|
|
@@ -1,34 +1,356 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="jiedianbackground">
|
|
|
- <image src="../../static/image/jiedian.png" mode=""></image>
|
|
|
+ <view class="content">
|
|
|
+ <view class="container">
|
|
|
+ <view class="jiedianbackground">
|
|
|
+ <image src="../../static/image/jiedian.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="number-box">
|
|
|
+ <view class="number">
|
|
|
+ <text>{{people}}</text>人
|
|
|
+ </view>
|
|
|
+ <view class="renshu">
|
|
|
+ 我的接点人数
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="message">
|
|
|
+ <view class="yeji">
|
|
|
+ <view class="yeji-a">
|
|
|
+ <view class="yeji-top">
|
|
|
+ A区业绩
|
|
|
+ </view>
|
|
|
+ <view class="yeji-buttom">￥{{a}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="border"></view>
|
|
|
+ <view class="yeji-a">
|
|
|
+ <view class="yeji-top">
|
|
|
+ B区业绩
|
|
|
+ </view>
|
|
|
+ <view class="yeji-buttom">￥{{b}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="border"></view>
|
|
|
+ <view class="yeji-a">
|
|
|
+ <view class="yeji-top">
|
|
|
+ C区业绩
|
|
|
+ </view>
|
|
|
+ <view class="yeji-buttom">￥{{c}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="relation-box">
|
|
|
+ <view class="relation">
|
|
|
+ <view class="headbox">
|
|
|
+ <view class="head">
|
|
|
+ <view class="photo">
|
|
|
+ <image src="../../static/image/photo.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="head-title">
|
|
|
+ <image src="../../static/image/jiedian1.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="information">
|
|
|
+ <view class="name">
|
|
|
+ 徐浩岚
|
|
|
+ </view>
|
|
|
+ <view class="cell">
|
|
|
+ 18252757278
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sanchaji">
|
|
|
+ <image src="../../static/image/sanchaji.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="subordinate">
|
|
|
+ <view class="headbox" >
|
|
|
+ <view class="head">
|
|
|
+ <view class="photo">
|
|
|
+ <image src="../../static/image/photo.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="head-title">
|
|
|
+ <image src="../../static/image/jiedian1.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="headbox" >
|
|
|
+ <view class="head">
|
|
|
+ <view class="photo">
|
|
|
+ <image src="../../static/image/photo.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="head-title">
|
|
|
+ <image src="../../static/image/jiedian1.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="headbox" >
|
|
|
+ <view class="head">
|
|
|
+ <view class="photo">
|
|
|
+ <image src="../../static/image/photo.jpg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="head-title">
|
|
|
+ <image src="../../static/image/jiedian1.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default{
|
|
|
- data(){
|
|
|
- return{}
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ a: 1,
|
|
|
+ b: 2,
|
|
|
+ c: 3,
|
|
|
+ people: 255,
|
|
|
+ //'12345678901'.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
|
|
+ }
|
|
|
},
|
|
|
- methods:{}
|
|
|
+ methods: {}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- page{
|
|
|
+ page {
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
+ height: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
- .container{
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ .content {}
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .jiedianbackground {
|
|
|
+ position: absolute;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 400rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .number-box {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3F7C1F;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 72rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 86rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .renshu {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #3F7C1F;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .jiedianbackground{
|
|
|
- image{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ .message {
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .relation-box {
|
|
|
+ margin-top: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .relation {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ .headbox {
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ width: 154rpx;
|
|
|
+ height: 154rpx;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ width: 154rpx;
|
|
|
+ height: 154rpx;
|
|
|
+ background: #EF9E20;
|
|
|
+ box-shadow: 5rpx 0rpx 5rpx 0rpx rgba(110, 171, 78, 0.26);
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 154rpx;
|
|
|
+ height: 154rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-title {
|
|
|
+ margin: -30rpx 30rpx 0 30rpx;
|
|
|
+ width: 94rpx;
|
|
|
+ height: 32rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .information {
|
|
|
+ margin-left: 77rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 297rpx;
|
|
|
+ height: 137rpx;
|
|
|
+ align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 4rpx solid #6EAB4E;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3F7C1F;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell {
|
|
|
+ margin-left: 70rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ABD56F;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sanchaji {
|
|
|
+ margin: 30rpx 0;
|
|
|
+ width: 530rpx;
|
|
|
+ height: 91rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .subordinate {
|
|
|
+ width: 750rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .headbox {
|
|
|
+
|
|
|
+ width: 154rpx;
|
|
|
+ height: 154rpx;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ width: 154rpx;
|
|
|
+ height: 154rpx;
|
|
|
+ background: #EF9E20;
|
|
|
+ box-shadow: 5rpx 0rpx 5rpx 0rpx rgba(110, 171, 78, 0.26);
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ width: 154rpx;
|
|
|
+ height: 154rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-title {
|
|
|
+ margin: -30rpx 30rpx 0 30rpx;
|
|
|
+ width: 94rpx;
|
|
|
+ height: 32rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .yeji {
|
|
|
+ position: relative;
|
|
|
+ margin-top: -72rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 143rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .yeji-a {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .yeji-top {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yeji-buttom {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .border {
|
|
|
+ width: 1rpx;
|
|
|
+ height: 51rpx;
|
|
|
+ background: #DDDDDD;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
