<template> <div class="grade-status"> <div class="nav"> <van-icon name="arrow-left" size="20" class="nav-left" @click="$router.go(-1)" /> <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> <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> </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 } ] }; }, methods: { handleUrl(urlName) { this.$router.push({ name: urlName }); } } }; </script> <style lang="scss" scoped> $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; } } .forest-content { text-align: center; padding-top: 25px; .nums { font-size: 14px; color: $white; line-height: 25px; margin-bottom: 12px; } .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 { box-sizing: border-box; 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-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; 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, 0.2); .van-progress__portion { background: #f9f9f9; } .van-progress__pivot { display: none; } } </style>