You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
7.0 KiB
259 lines
7.0 KiB
<template>
|
|
<view class="assemble">
|
|
|
|
<!--自定义导航栏-->
|
|
<view class="navbar_section">
|
|
<view class="title">首页</view>
|
|
</view>
|
|
|
|
<view style="height: 20rpx;"></view>
|
|
<view class="div-style">
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image src="@/static/images/index/danlan.png" class="drop-image"></image>
|
|
</view>
|
|
<view class="title">本月业绩</view>
|
|
</view>
|
|
<view class="coach-message">
|
|
<view class="left1">
|
|
<view style="padding: 20rpx 0;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/huang.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">目标</view>
|
|
</view>
|
|
<view class="title-x1">50.000元</view>
|
|
</view>
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/lvs.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">预测</view>
|
|
</view>
|
|
<view class="title-x1">50.000元</view>
|
|
</view>
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/shenlan.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">成交</view>
|
|
</view>
|
|
<view class="title-x1">50.000元</view>
|
|
</view>
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/lan.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">定金</view>
|
|
</view>
|
|
<view class="title-x1">50.000元</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right1">
|
|
<view style="text-align: center;">08月01日-08月30日</view>
|
|
<view style="width: 100%;height: 80%;padding: 12rpx;">
|
|
<view style="padding: 10rpx;">目标 100%</view>
|
|
<fui-progress :percent="100" background="#ddd" activeColor="#FFB703" height="20"></fui-progress>
|
|
</view>
|
|
<view style="width: 100%;height: 80%;padding: 12rpx;">
|
|
<view style="padding: 10rpx;">目标 1%</view>
|
|
<fui-progress :percent="1" background="#ddd" activeColor="#039f64" height="20"></fui-progress>
|
|
</view>
|
|
<view style="width: 100%;height: 80%;padding: 12rpx;">
|
|
<view style="padding: 10rpx;">目标 20%</view>
|
|
<fui-progress :percent="20" background="#ddd" activeColor="#4066f2" height="20"></fui-progress>
|
|
</view>
|
|
<view style="width: 100%;height: 80%;padding: 12rpx;">
|
|
<view style="padding: 10rpx;">目标 8%</view>
|
|
<fui-progress :percent="8" background="#ddd" activeColor="#3b8bd1" height="20"></fui-progress>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view>
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image src="@/static/images/index/danlv.png" class="drop-image"></image>
|
|
</view>
|
|
<view class="title">本月业绩</view>
|
|
</view>
|
|
<view class="coach-message">
|
|
<view class="this_month">
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">待联系</view>
|
|
</view>
|
|
<view class="title-x1">50个</view>
|
|
</view>
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">待联系</view>
|
|
</view>
|
|
<view class="title-x1">50个</view>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">待释放</view>
|
|
</view>
|
|
<view class="title-x1">50个</view>
|
|
</view>
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">合同审核中</view>
|
|
</view>
|
|
<view class="title-x1">50个</view>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">待协作</view>
|
|
</view>
|
|
<view class="title-x1">50个</view>
|
|
</view>
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">消息</view>
|
|
</view>
|
|
<view class="title-x1">50个</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<AQTabber />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
border: 1px solid #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #fff;
|
|
.title{
|
|
padding: 20rpx 0;
|
|
font-size: 30rpx;
|
|
color: #858585;
|
|
}
|
|
}
|
|
|
|
.assemble {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #292929;
|
|
}
|
|
|
|
.div-style {
|
|
width: 92%;
|
|
height: 85vh;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin: auto;
|
|
}
|
|
|
|
.coach-message {
|
|
width: 92%;
|
|
margin: 10rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.drop-image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #7F7F7F;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.left1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.right1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.this_month {
|
|
width: 100%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.drop-image-x {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.title-x {
|
|
font-size: 28rpx;
|
|
color: #7F7F7F;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.title-x1 {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
padding-left: 60rpx;
|
|
}
|
|
</style>
|