Skip to content

P
pica-new-compaign
提交 bfd08c19 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

完成勤奋分组件

上级 e26a8a52
显示空白字符变更
内嵌 并排
正在显示 包含 366 行增加 和 2 行删除
components/about.vue
浏览文件 @ bfd08c19
<template>
<div class="about-container">
about nuxtjs ssr
<StatusBar :isLogin=true :minValue=80></StatusBar>
<StatusBar :isLogin=true :minValue=180></StatusBar>
<StatusBar :isLogin=false minValue=0></StatusBar>
</div>
</template>
<script>
// asyncData fetch 在组件中无效
import StatusBar from '../components/bussiness/status-bar';
export default {
components: {
StatusBar
},
data() {
return {
name: 'about'
......
components/bussiness/status-bar copy.vue 0 → 100644
浏览文件 @ bfd08c19
<template>
<div class="status-wrapper">
<div class="status-text">
<span :class="{'no-login': !isLogin}" v-html="statusText"></span>
</div>
<div class="status-bar-wrapper">
<div class="line"></div>
<div class="line-2" :style="{'width': activeWidth}"></div>
<div class="circle-wrapper">
<div class="circle">
<div>
<span class="score-text">勤奋值</span>
</div>
<div v-for="(item, index) in statusTextList" :key="index">
<span class="circle" :class="{'active': activeNum >= (index + 1)}"></span>
<span class="score" :class="{'active': activeNum >= (index + 1)}">{{item}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
minValue: {
type: Number | String,
default: 0
},
maxValue: {
type: Number | String,
default: 300
},
isLogin: {
type: Boolean | String,
default: true
},
statusTextList: {
type: Array,
default: () => ['100勤奋分', '200勤奋分', '300勤奋分']
}
},
data() {
return {
activeNum: 0,
activeWidth: '0%',
}
},
computed: {
statusText() {
let htmlText = '登录后完成任务，就能获得瓜分云鹊豆的资格啦！';
if(!this.isLogin) return htmlText;
let minValue = this.minValue, activeNum = 0, activeWidth;
if(minValue <= 50) {
htmlText = `已经获得<span style="color: #FFE8A5">${minValue}</span>勤奋分啦，继续努力就能瓜分100万云鹊豆！`
} else if(minValue < 100 ) {
htmlText = `还差<span style="color">${100 - minValue}</span>分，就有资格瓜分<span style="color: #FFE8A5">100</span>万云鹊豆啦！`
} else if(minValue < 200) {
htmlText = `已经有资格瓜分<span style="color: #FFE8A5">100</span>万云鹊豆啦，继续努力还能瓜分<span style="color: #FFE8A5">200</span>万！`
} else if(minValue < 300) {
htmlText = `已经有资格瓜分<span style="color: #FFE8A5">300</span>万云鹊豆啦，继续努力还能瓜分<span style="color: #FFE8A5">200</span>万！`
} else {
htmlText = `天啦撸，你有资格瓜分500万云鹊豆哦！`
}
activeNum = Math.floor(minValue / 100);
if(activeNum <= 0) {
activeNum = 0;
} else if(activeNum >= 3) {
activeNum = 3
}
this.activeNum = activeNum;
activeWidth = (this.minValue * 100 / this.maxValue).toFixed(2);
if(activeWidth >= 100) {
activeWidth = 100;
}
this.activeWidth = activeWidth + '%';
return htmlText;
}
},
mounted() {
},
}
</script>
<style lang="less" scoped>
.status-wrapper {
background: #9A1F36;
height: 88px;
.status-text {
text-align: center;
font-size: 12px;
padding: 10px 0 13px;
color: #fff;
.no-login {
color: #FFE8A5
}
}
.status-bar-wrapper {
position: relative;
top: 0;
left: 0;
width: 90%;
display: flex;
flex-direction: column;
.line {
width: 100%;
height: 3px;
background:rgba(115,15,33,1);
border-radius: 1.5px;
}
.line-2 {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 3px;
background:linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
border-radius: 1.5px;
}
.circle-wrapper {
position: relative;
top: -10px;
left: 0;
// margin-right: 80px;
.circle {
display: flex;
flex-direction: row;
justify-content: space-between;
div {
position: relative;
top: 0;
left: 0;
.circle {
// position: relative;
width: 10px;
height: 10px;
border: 4px solid #730F21;
border-radius: 10px;
background: #9A1F36;
}
.score-text {
display: inline-block;
width: 60px;
position: absolute;
top: 26px;
left: 0;
font-size: 12px;
color: #730F21;
}
.score {
position: absolute;
top: 23px;
left: -29px;
width: 70px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
// background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
border-radius: 10px;
border: 1px solid rgba(115,15,33,1);
color: #730F21;
&.active {
color: #730F21;
background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
}
}
}
.circle.active {
border: 4px solid #FFE8A5;
// background: rgba(255, 200, 100, 1);
background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
}
}
}
}
}
</style>
\ No newline at end of file
components/bussiness/status-bar.vue 0 → 100644
浏览文件 @ bfd08c19
<template>
<div class="status-wrapper">
<div class="status-text">
<span :class="{'no-login': !isLogin}" v-html="htmlText"></span>
</div>
<div class="status-bar-wrapper">
<div class="line"></div>
<div class="line-2" :style="{'width': activeWidth}"></div>
<div class="circle-wrapper">
<div class="circle">
<div>
<span class="score-text">勤奋值</span>
</div>
<div v-for="(item, index) in statusTextList" :key="index">
<span class="circle" :class="{'active': activeNum >= (index + 1)}"></span>
<span class="score" :class="{'active': activeNum >= (index + 1)}">{{item}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
minValue: {
type: Number | String,
default: 0
},
maxValue: {
type: Number | String,
default: 300
},
isLogin: {
type: Boolean | String,
default: true
},
statusTextList: {
type: Array,
default: () => ['100勤奋分', '200勤奋分', '300勤奋分']
}
},
data() {
return {
activeNum: 0,
activeWidth: '0%',
htmlText: '登录后完成任务，就能获得瓜分云鹊豆的资格啦！'
}
},
mounted() {
this.init();
},
methods: {
init() {
let htmlText = '登录后完成任务，就能获得瓜分云鹊豆的资格啦！';
if(!this.isLogin) return htmlText;
let minValue = this.minValue, activeNum = 0, activeWidth;
if(minValue <= 50) {
htmlText = `已经获得<span style="color: #FFE8A5">${minValue}</span>勤奋分啦，继续努力就能瓜分100万云鹊豆！`
} else if(minValue < 100 ) {
htmlText = `还差<span style="color">${100 - minValue}</span>分，就有资格瓜分<span style="color: #FFE8A5">100</span>万云鹊豆啦！`
} else if(minValue < 200) {
htmlText = `已经有资格瓜分<span style="color: #FFE8A5">100</span>万云鹊豆啦，继续努力还能瓜分<span style="color: #FFE8A5">200</span>万！`
} else if(minValue < 300) {
htmlText = `已经有资格瓜分<span style="color: #FFE8A5">300</span>万云鹊豆啦，继续努力还能瓜分<span style="color: #FFE8A5">200</span>万！`
} else {
htmlText = `天啦撸，你有资格瓜分500万云鹊豆哦！`
}
activeNum = Math.floor(minValue / 100);
if(activeNum <= 0) {
activeNum = 0;
} else if(activeNum >= 3) {
activeNum = 3
}
this.activeNum = activeNum;
activeWidth = (this.minValue * 100 / this.maxValue).toFixed(2);
if(activeWidth >= 100) {
activeWidth = 100;
}
this.activeWidth = activeWidth + '%';
this.htmlText = htmlText;
}
},
}
</script>
<style lang="less" scoped>
.status-wrapper {
background: #9A1F36;
height: 88px;
.status-text {
text-align: center;
font-size: 12px;
padding: 10px 0 13px;
color: #fff;
.no-login {
color: #FFE8A5
}
}
.status-bar-wrapper {
position: relative;
top: 0;
left: 0;
width: 90%;
display: flex;
flex-direction: column;
.line {
width: 100%;
height: 3px;
background:rgba(115,15,33,1);
border-radius: 1.5px;
}
.line-2 {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 3px;
background:linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
border-radius: 1.5px;
}
.circle-wrapper {
position: relative;
top: -10px;
left: 0;
// margin-right: 80px;
.circle {
display: flex;
flex-direction: row;
justify-content: space-between;
div {
position: relative;
top: 0;
left: 0;
.circle {
// position: relative;
width: 10px;
height: 10px;
border: 4px solid #730F21;
border-radius: 10px;
background: #9A1F36;
}
.score-text {
display: inline-block;
width: 60px;
position: absolute;
top: 26px;
left: 0;
font-size: 12px;
color: #730F21;
}
.score {
position: absolute;
top: 23px;
left: -29px;
width: 70px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
// background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
border-radius: 10px;
border: 1px solid rgba(115,15,33,1);
color: #730F21;
&.active {
color: #730F21;
background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
}
}
}
.circle.active {
border: 4px solid #FFE8A5;
// background: rgba(255, 200, 100, 1);
background: linear-gradient(360deg,rgba(255,160,33,1) 0%,rgba(255,232,165,1) 100%);
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或