Skip to content

X
XiTianSenMall
Commit 4622842d authored by leiqingsong's avatar leiqingsong
Browse files
Options

eslint格式

parent c80af5e0
Hide whitespace changes
Inline Side-by-side
Showing with 256 additions and 270 deletions
H5/src/views/grade.vue
View file @ 4622842d
......@@ -10,218 +10,208 @@
<span class="nav-title">森林状态</span>
</div>
<div class="forest-content">
<div class="forest-level">
{{level}}
</div>
<div class="nums">
距离下一级直推用户还需增加{{directpush}}
</div>
<div class="nums">
距离下一级团队用户还需增加{{team}}
</div>
<div class="level-progress">
<div class="level-num">{{currentLevel}}</div>
<van-progress :percentage="50" />
<div class="level-num">{{nextLevel}}</div>
</div>
<div class="relegation">
保级还需增加￥{{relegationNum}} 业绩
</div>
<div class="forest-level">
{{ level }}
</div>
<div class="nums">距离下一级直推用户还需增加{{ directpush }}</div>
<div class="nums">距离下一级团队用户还需增加{{ team }}</div>
<div class="level-progress">
<div class="level-num">{{ currentLevel }}</div>
<van-progress :percentage="50" />
<div class="level-num">{{ nextLevel }}</div>
</div>
<div class="relegation">保级还需增加￥{{ relegationNum }} 业绩</div>
</div>
<div class="forest-list">
<div class="forest-item" v-for="(item,index) in list" :key="index">
<span class="forest-item-num">{{item.num}}</span>
<div class="forest-item-label">
<span >{{item.label}}</span>
<van-icon
v-if="item.hasArrow"
name="arrow"
size="16"
class="nav-left"
@click="handleUrl(item.urlName)"
/>
</div>
<div class="forest-item" v-for="(item, index) in list" :key="index">
<span class="forest-item-num">{{ item.num }}</span>
<div class="forest-item-label">
<span>{{ item.label }}</span>
<van-icon
v-if="item.hasArrow"
name="arrow"
size="16"
class="nav-left"
@click="handleUrl(item.urlName)"
/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "grade",
data() {
return {
level:'Lv.3白银树',
directpush:'XXX',
team:"XXX",
relegationNum:"21,141",
currentLevel:'Lv.3',
nextLevel:'Lv.4',
list:[
{
num:14,
label:"团队总人数",
hasArrow:true,
urlName:'LeagueNums'
},
{
num:12,
label:"我的直推",
hasArrow:true
},
{
num:61859,
label:"团队累计总业绩",
hasArrow:false
},
{
num:11256,
label:"团队当月新增业绩",
hasArrow:false
},
level: "Lv.3白银树",
directpush: "XXX",
team: "XXX",
relegationNum: "21,141",
currentLevel: "Lv.3",
nextLevel: "Lv.4",
list: [
{
num: 14,
label: "团队总人数",
hasArrow: true,
urlName: "LeagueNums"
},
{
num: 12,
label: "我的直推",
hasArrow: true
},
{
num: 61859,
label: "团队累计总业绩",
hasArrow: false
},
{
num: 11256,
label: "团队当月新增业绩",
hasArrow: false
}
]
};
},
methods: {
handleUrl(urlName){
this.$router.push({name:urlName})
handleUrl(urlName) {
this.$router.push({ name: urlName });
}
}
};
</script>
<style lang="scss" scoped>
$white:#ffffff;
.grade-status{
$white: #ffffff;
.grade-status {
width: 100%;
height: 298px;
background-image: url("../assets/images/森林状态.png");
background-size: cover;
.nav {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 46px;
color: #fff;
.nav-left {
position: absolute;
top: 0;
bottom: 0;
width: 52px;
height: 100%;
line-height: 46px;
text-align: center;
}
.nav-title {
max-width: 60%;
margin: 0 auto;
font-weight: bold;
font-size: 16px;
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 46px;
color: #fff;
.nav-left {
position: absolute;
top: 0;
bottom: 0;
width: 52px;
height: 100%;
line-height: 46px;
text-align: center;
}
.nav-title {
max-width: 60%;
margin: 0 auto;
font-weight: bold;
font-size: 16px;
}
}
}
.forest-content{
.forest-content {
text-align: center;
padding-top: 25px;
.nums{
font-size: 14px;
color: $white;
line-height: 25px;
margin-bottom: 12px;
.nums {
font-size: 14px;
color: $white;
line-height: 25px;
margin-bottom: 12px;
}
.relegation{
font-size: 16px;
color: $white;
margin-top: 20px;
.relegation {
font-size: 16px;
color: $white;
margin-top: 20px;
}
}
.forest-level{
height: 45px;
font-family: PingFang-SC-Bold;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
.level-progress{
width: 100%;
padding: 0 30px;
display: flex;
align-items: center;
.level-num{
width: 36px;
height: 16px;
line-height: 16px;
background-image: url("../assets/images/rankbox.png");
background-size: cover;
font-family: PingFang-SC-Bold;
font-size: 11px;
color: #fc5202;
}
}
.forest-list{
}
.forest-level {
height: 45px;
font-family: PingFang-SC-Bold;
font-size: 24px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
.level-progress {
width: 100%;
padding: 0 30px;
display: flex;
align-items: center;
.level-num {
width: 36px;
height: 16px;
line-height: 16px;
background-image: url("../assets/images/rankbox.png");
background-size: cover;
font-family: PingFang-SC-Bold;
font-size: 11px;
color: #fc5202;
}
}
.forest-list {
padding: 0 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
.forest-item{
height: 98px;
background-color: #ffffff;
box-shadow: 0px 1px 6px 0px
rgba(6, 0, 1, 0.04);
border-radius: 4px;
width: calc(50% - 8px);
margin-bottom: 10px;
text-align: center;
padding-top: 15px;
box-sizing: border-box;
.forest-item {
height: 98px;
background-color: #ffffff;
box-shadow: 0px 1px 6px 0px rgba(6, 0, 1, 0.04);
border-radius: 4px;
width: calc(50% - 8px);
margin-bottom: 10px;
text-align: center;
padding-top: 15px;
box-sizing: border-box;
}
.forest-item-num{
height: 19px;
font-family: DINCondensed-Bold;
font-size: 26px;
.forest-item-num {
height: 19px;
font-family: DINCondensed-Bold;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 25px;
letter-spacing: 0px;
color: #333333;
}
.forest-item-label {
display: flex;
align-items: center;
justify-content: center;
span {
font-family: PingFang-SC-Medium;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 25px;
letter-spacing: 0px;
color: #333333;
color: #666666;
}
.nav-left {
color: #666;
}
}
.forest-item-label{
display: flex;
align-items: center;
justify-content: center;
span{
font-family: PingFang-SC-Medium;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.nav-left{
color: #666;
}
}
}
}
}
</style>
<style lang=scss>
.van-progress{
width: 250px;
height: 4px;
background-color: rgba(0,0,0,.2);
.van-progress__portion{
background: #f9f9f9;
}
.van-progress__pivot{
display: none;
}
}
<style lang="scss">
.van-progress {
width: 250px;
height: 4px;
background-color: rgba(0, 0, 0, 0.2);
.van-progress__portion {
background: #f9f9f9;
}
.van-progress__pivot {
display: none;
}
}
</style>
H5/src/views/leagueNums.vue
View file @ 4622842d
......@@ -10,67 +10,64 @@
<span class="nav-title">森林状态</span>
</div>
<div class="panel-list">
<div class="panel-item" v-for="(item,index) in list" :key="index">
<span class="panel-item-num">{{item.num}}</span>
<div class="panel-item-label">
<span >{{item.label}}</span>
</div>
<div class="panel-item" v-for="(item, index) in list" :key="index">
<span class="panel-item-num">{{ item.num }}</span>
<div class="panel-item-label">
<span>{{ item.label }}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "leagueNums",
data() {
return {
list:[
{
num:54,
label:"普通用户",
},
{
num:34,
label:"幼苗",
},
{
num:22,
label:"青铜树",
},
{
num:12,
label:"白银树",
},
{
num:5,
label:"黄金树",
},
{
num:1,
label:"农场主",
},
{
num:0,
label:"森林之星",
},
{
num:0,
label:"西田森合伙人",
}
list: [
{
num: 54,
label: "普通用户"
},
{
num: 34,
label: "幼苗"
},
{
num: 22,
label: "青铜树"
},
{
num: 12,
label: "白银树"
},
{
num: 5,
label: "黄金树"
},
{
num: 1,
label: "农场主"
},
{
num: 0,
label: "森林之星"
},
{
num: 0,
label: "西田森合伙人"
}
]
};
},
methods: {
}
methods: {}
};
</script>
<style lang="scss" scoped>
$white:#ffffff;
.league-nums{
$white: #ffffff;
.league-nums {
width: 100%;
height: 298px;
background-image: url("../assets/images/森林状态.png");
......@@ -82,67 +79,66 @@ $white:#ffffff;
width: 100%;
height: 46px;
color: #fff;
.nav-left {
position: absolute;
top: 0;
bottom: 0;
width: 52px;
height: 100%;
line-height: 46px;
.nav-left {
position: absolute;
top: 0;
bottom: 0;
width: 52px;
height: 100%;
line-height: 46px;
text-align: center;
}
.nav-title {
max-width: 60%;
margin: 0 auto;
font-weight: bold;
font-size: 16px;
}
}
}
.panel-list {
padding: 0 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
.panel-item {
height: 113px;
background-color: #ffffff;
box-shadow: 0px 2px 12px 0px rgba(6, 0, 1, 0.04);
border-radius: 4px;
width: calc(50% - 8px);
margin-bottom: 10px;
text-align: center;
padding-top: 15px;
box-sizing: border-box;
}
.nav-title {
max-width: 60%;
margin: 0 auto;
font-weight: bold;
font-size: 16px;
.panel-item-num {
height: 19px;
font-family: DINCondensed-Bold;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 25px;
letter-spacing: 0px;
color: #333333;
}
}
}
.panel-list{
padding: 0 15px;
.panel-item-label {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
.panel-item{
height: 113px;
background-color: #ffffff;
box-shadow: 0px 2px 12px 0px
rgba(6, 0, 1, 0.04);
border-radius: 4px;
width: calc(50% - 8px);
margin-bottom: 10px;
text-align: center;
padding-top: 15px;
box-sizing: border-box;
align-items: center;
justify-content: center;
span {
font-family: PingFang-SC-Medium;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.panel-item-num{
height: 19px;
font-family: DINCondensed-Bold;
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 25px;
letter-spacing: 0px;
color: #333333;
}
.panel-item-label{
display: flex;
align-items: center;
justify-content: center;
span{
font-family: PingFang-SC-Medium;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.nav-left{
color: #666;
}
.nav-left {
color: #666;
}
}
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment