|
|
<template> <view class="app">
<!-- <view class="nav-view"> <text class="nav-title">轻未来</text> </view> --> <view> <view class="date-item"> <text class="triangle-bottomright"></text> <text class="date-title">时间</text> <text class="triangle-topleft"></text> <text class="date-txt">2021年</text> </view> <view @click="toAchievement"> <view class="service-item"> <text class="service-number">100.00</text> <text class="service-unit">万</text> </view> <text class="service-title">服务业绩(元)</text> <view class="charge-item"> <text class="charge-item-money">充值业绩：10.00万</text> <text class="charge-item-money">本月营业额：8000元</text> </view> </view> <view class="service-item"> <text class="service-number">1000</text>
</view> <text class="service-title">服务人数 (个)</text> <view class="charge-item"> <text class="charge-item-money">分公司数量：800 (个)</text> <text class="charge-item-money">合伙人：900 (个)</text> </view> <view class="separator-section"></view> <view class="rank-list"> <view class="rank-title"> <image class="rank-img" src="/static/home/rank.png"></image> <text class="rank-title-txt">4月业绩代理排名</text> </view> <view class="rank-item"> <view class="rank-top"> <image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image> <view class="rank-des"> <view class="rank-des-name"> <text class="rank-des-name-txt">张三</text> <text class="rank-des-nick-name">zhangsan</text> </view> <text class="rank-des-nick-name rank-des-company">分公司</text> </view> <image class="rank-rate-img" src="/static/home/firstRank.png"></image> </view> <view class="rank-bottom"> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">100.00</text> <text class="rank-bottom-item-des-unit"> 万</text> </view> <text class="rank-bottom-item-name">服务业绩</text> </view> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">10.00</text> <text class="rank-bottom-item-des-unit"> 万</text> </view> <text class="rank-bottom-item-name">充值业绩</text> </view> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">10000</text> <text class="rank-bottom-item-des-unit"> 个</text> </view> <text class="rank-bottom-item-name">服务人数</text> </view> </view> </view> <view class="rank-item"> <view class="rank-top"> <image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image> <view class="rank-des"> <view class="rank-des-name"> <text class="rank-des-name-txt">张三</text> <text class="rank-des-nick-name">zhangsan</text> </view> <text class="rank-des-nick-name rank-des-company">分公司</text> </view> <image class="rank-rate-img" src="/static/home/firstRank.png"></image> </view> <view class="rank-bottom"> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">100.00</text> <text class="rank-bottom-item-des-unit"> 万</text> </view> <text class="rank-bottom-item-name">服务业绩</text> </view> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">10.00</text> <text class="rank-bottom-item-des-unit"> 万</text> </view> <text class="rank-bottom-item-name">充值业绩</text> </view> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">10000</text> <text class="rank-bottom-item-des-unit"> 个</text> </view> <text class="rank-bottom-item-name">服务人数</text> </view> </view> </view> <view class="rank-item"> <view class="rank-top"> <image class="rank-user-img" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3832721317,312397218&fm=26&gp=0.jpg"></image> <view class="rank-des"> <view class="rank-des-name"> <text class="rank-des-name-txt">张三</text> <text class="rank-des-nick-name">zhangsan</text> </view> <text class="rank-des-nick-name rank-des-company">分公司</text> </view> <image class="rank-rate-img" src="/static/home/firstRank.png"></image> </view> <view class="rank-bottom"> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">100.00</text> <text class="rank-bottom-item-des-unit"> 万</text> </view> <text class="rank-bottom-item-name">服务业绩</text> </view> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">10.00</text> <text class="rank-bottom-item-des-unit"> 万</text> </view> <text class="rank-bottom-item-name">充值业绩</text> </view> <view class="rank-bottom-item"> <view class="rank-bottom-item-des"> <text class="rank-bottom-item-des-number">10000</text> <text class="rank-bottom-item-des-unit"> 个</text> </view> <text class="rank-bottom-item-name">服务人数</text> </view> </view> </view> </view> </view> </view></template>
<script> import tabbarMixin from './mixin/tabbar' import homeMixin from './mixin/home' import pageHeader from './components/page-header.vue' import banner from './components/banner.vue' import productList from '@/pages/product/components/product-list.vue' import homeAdvertModal from './components/home-advert-modal.vue' export default { components: { pageHeader, banner, productList, homeAdvertModal }, mixins: [homeMixin, tabbarMixin], data() { return { navList: [],//导航列表
advertList: [],//广告列表
hotList: [],//热门推荐
} }, computed: { midAdvert(){ if(this.advertList.length === 0) return {}; const res = this.advertList.filter(item=> item.advert_type === 'middle'); return res.length > 0 ? res[0]: {}; }, carousel(){ return this.advertList.filter(item=> item.advert_type === 'carousel'); } }, onLoad() { this.loadAdvert(); this.loadNavList(); setTimeout(()=>{ //this.navTo('/pages/address/list')
}, 1000) }, methods: { toAchievement(){ this.navTo('/pages/qHome/achievement') }, //加载广告 缓存10分钟
async loadAdvert(){ const res = await this.$request('advert', 'getAdvertList', {}, { cache: 10*60 }); this.advertList = res.data; this.log(res); }, //加载导航 缓存1小时
async loadNavList(){ const res = await this.$request('advert', 'getNavList', {}, { cache: 60*60*0, }); this.navList = res.data; }, } }</script>
<style> page{ background-color: white; }</style><style scoped lang="scss"> /* 分类 */ .nav-view{ height: 64rpx; border-bottom: 1rpx solid #E6E6E6; } .nav-title{ display: block; font-size: 20px; color:#333333 ; text-align: center; line-height: 64rpx; } .date-item{ margin: 25rpx 0rpx 30rpx; } .date-title{ background-color:#EDAF8B ; color: white; margin: 10rpx 10rpx 0rpx 20rpx; font-size: 13px; } .date-txt{ font-size: 15px; color: #333333; } .triangle-topleft { position: relative; top: 42rpx; left: -12rpx; width: 0; height: 0; border-top: 36rpx solid #EDAF8B; border-right: 36rpx solid transparent; } .triangle-bottomright { position: relative; top: -38rpx; left: 20rpx; width: 0; height: 0; border-bottom: 36rpx solid #EDAF8B; border-left: 36rpx solid transparent; } .service-item{ margin: 35rpx 10rpx 0rpx 30rpx; } .service-number{ color: #EDAF8B; font-size: 36px; margin: 0rpx 5rpx 0rpx 0rpx; } .service-unit{ color: #EDAF8B; font-size: 18px; margin: 0rpx 0rpx 20rpx 0rpx; } .service-title{ font-size: 15px; color: #999999; margin: 0rpx 0rpx 10rpx 30rpx; } .charge-item{ margin: 34rpx 20rpx 50rpx 30rpx; padding:15rpx 20rpx; background-color:#F5F5F5 ; display: flex; justify-content: space-between; align-items: center; } .charge-item-money{ color: #999999; font-size: 13px; } .separator-section{ height: 20rpx; background: #F5F5F5; } .rank-list{ padding: 10rpx 60rpx; } .rank-title{ border-bottom: 1rpx solid $separatorColor; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .rank-img{ display: inline-block; width: 44rpx; height: 44rpx; margin: 0rpx 28rpx 0rpx -10rpx; } .rank-title-txt{ color: #333333; font-size: 16px; font-weight: bold; height: 110rpx; line-height: 110rpx; } .rank-item{ border-bottom: 1rpx solid $separatorColor; } .rank-top{ margin: 20rpx 0rpx; position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; // vertical-align: middle;
} .rank-user-img{ width: 130rpx; height: 130rpx; border-radius: 50%; display: inline-block; margin-right: 28rpx; } .rank-des{ display: inline-block; } .rank-des-name{ font-size: 15px; font-weight: bold; } .rank-des-name-txt{ font-size: 15px; font-weight: bold; color: #333333; margin:0rpx 10rpx 0rpx 0rpx } .rank-des-nick-name{ font-size: 13px; font-weight: 500; color: #999999; } .rank-des-company{ position: relative; top: -0rpx; } .rank-bottom{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20rpx 0rpx; } .rank-bottom-item{ text-align: center; } .rank-bottom-item-des{ } .rank-bottom-item-des-number{ font-size: 18px; font-weight: bold; color: #333333; } .rank-bottom-item-des-unit{ font-size: 13px; font-weight: 500; color: #333333; margin: 0rpx 4rpx; } .rank-bottom-item-name{ position: relative; top: -4rpx; font-size: 13px; font-weight: 500; color: #999999; } .rank-rate-img{ position: absolute; // top: 18rpx;
right: 0rpx; width: 50rpx; height: 50rpx; border-radius: 50%; }
.cate-section { display: flex; align-items: center; flex-wrap:wrap; padding: 10rpx 16rpx; background: #fff; .item { display: flex; flex-direction: column; align-items: center; width: 20%; padding: 20rpx 0; font-size: 24rpx; color: #333; } .icon { width: 84rpx; height: 84rpx; margin-bottom: 14rpx; border-radius: 50%; } } .mid-ad{ width: 100%; height: 208rpx; padding: 0 20rpx 20rpx; background: #fff; image{ width:100%; height: 100%; } } .floor-header{ padding: 6rpx 30rpx 8rpx 24rpx; font-size: 24rpx; color: #999; background-color: #fff; .icon{ flex-shrink: 0; width: 80rpx; height: 80rpx; margin-right: 20rpx; } .tit-box{ flex: 1; display: flex; flex-direction: column; } .tit{ margin-bottom: 10rpx; font-size: 32rpx; color: #333; font-weight: 700; } .icon-you{ font-size: 28rpx; color: #999; } } .hot-wrap{ padding-top: 20rpx; background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7); opacity: 0; transition: opacity .2s; &.show{ opacity: 1; } .floor-header{ padding-bottom: 30rpx; } /deep/ .list-item{ box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06); } } </style>
|
