<template>
|
<!-- 我的 -->
|
<view class="container">
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<view class="header">
|
<view class="icon white iconfont iconshezhi right" @click="linkTo('./setting')"></view>
|
<view class="flex align-center">
|
<image class="header-img ml-15" src="../../static/images/head-img.jpg"></image>
|
<view class="flex flex-v ml-20">
|
<view>
|
<text class="font-18 white mr-5">222是个帅哥</text>
|
<text class="white icon iconfont iconxiugai"></text>
|
</view>
|
<view class="flex mt-10">
|
<view class="mr-20">
|
<text class="white mr-5 font-14">职位:</text>
|
<text class="white font-14">靓仔</text>
|
</view>
|
<view>
|
<text class="white mr-5 font-14">工号:</text>
|
<text class="white font-14">9527</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="content">
|
<view class="flex align-center performance">
|
<image class="title-img mr-10" src="../../static/images/mine1.png"></image>
|
<text class="font-18">我的业绩</text>
|
</view>
|
<view class="tab-box">
|
<h-tabs
|
class="tab"
|
:tabData="tabs"
|
:config="{
|
color: '#abb1cc',
|
activeColor: '#518EFF',
|
underLineColor: '#518EFF',
|
underLineHeight: 4,
|
fontSize: '30px',
|
itemWidth: 70,
|
underLineWidth: 60,
|
}"
|
/>
|
<view class="performance-content">
|
<view class="flex justify-around">
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 red">600.00</text>
|
<text class="font-14 mt-5">总现金业绩</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 green">600.00</text>
|
<text class="font-14 mt-5">售卡业绩</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 purple">600.00</text>
|
<text class="font-14 mt-5">项目业绩</text>
|
</view>
|
</view>
|
<view class="flex justify-around mt-15">
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 blueness">600.00</text>
|
<text class="font-14 mt-5">产品业绩</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 orange">600.00</text>
|
<text class="font-14 mt-5">余额划扣业绩</text>
|
</view>
|
<view class="flex flex-v align-center performance-item">
|
<text class="font-16 yellow">600.00</text>
|
<text class="font-14 mt-5">服务提成</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="flex align-center justify-between repository mt-20" @click="linkTo('./knowledge')">
|
<view class="flex align-center">
|
<image class="title-img mr-10" src="../../static/images/mine2.png"></image>
|
<text>知识库</text>
|
</view>
|
<text class="icon iconfont iconarrow-backimg gray"></text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
|
export default {
|
components: {
|
HTabs
|
},
|
data() {
|
return {
|
tabs:[
|
{
|
state: 1,
|
name: '今日'
|
},
|
{
|
state: 2,
|
name: '昨日'
|
},
|
{
|
state: 3,
|
name: '本月'
|
},
|
{
|
state: 4,
|
name: '上月'
|
},
|
],
|
}
|
},
|
methods: {
|
linkTo(val){
|
uni.navigateTo({
|
url:val
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.status_bar{
|
background: #518EFF;
|
color: #FFFFFF;
|
}
|
.header{
|
background: #518EFF;
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
padding: 15px;
|
}
|
.icon {
|
font-size: 18px;
|
font-family: texticons;
|
}
|
.header-img{
|
width: 64px;
|
height: 64px;
|
border-radius: 50%;
|
}
|
.content{
|
padding: 0 10px;
|
}
|
.performance{
|
padding: 0 3px;
|
margin: 15px 0px 10px;
|
}
|
.title-img{
|
width: 18px;
|
height: 18px;
|
}
|
.tab-box{
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.tab{
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.performance-content{
|
padding: 20px 0;
|
}
|
.performance-item{
|
width: 33.3%;
|
}
|
.repository{
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
padding: 10px 3px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
</style>
|
