index.vue
2.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<template>
<view class="container">
<Navbar title="个人中心" canBack :bgColor="'#f3f4f6'"></Navbar>
<view class="topInfoSty">
<!-- 头部信息部分-->
<view class="topSty">
<view class=" avatorSty">
<u-avatar size="65" :src="userInfo.imgSrc" shape="square"></u-avatar>
</view>
<view class="rightSty margin-left">
<view class="right-top">
<view class="text-xl text-white" style="color: #333333">
{{user.name || ""}}
</view>
<view class="numSty margin-left-sm">
{{userInfo.numBh}}
</view>
</view>
<view class="right-bottom margin-top-sm">
<view class="topText">
{{userInfo.role}}
</view>
<view class=" topText margin-right-sm margin-left-sm">
|
</view>
<view class="topText">
工龄:{{userInfo.workNum}}年
</view>
</view>
</view>
</view>
<!-- 数据展示-->
<view class="dataShowSty margin-top-lg">
<data-summary></data-summary>
</view>
</view>
</view>
</template>
<script>
import dataSummary from "@/components/dataSummary/index"
import {
mapState
} from 'vuex'
export default {
name: "index",
components:{
dataSummary
},
computed: {
...mapState(["user"]),
},
data(){
return {
userInfo:{
imgSrc:'/static/images/mine/employeeAvator1.png',
name:'张测试',
role:'配送工',
workNum:'7',
numBh:'670666'
}
}
},
onLoad(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.container{
background-color: #f3f4f6;
}
.topInfoSty{
padding: 0px 20rpx;
.topSty{
width: 100%;
display: flex;
//justify-content: space-between;
.leftSty{
display: flex;
}
.rightSty{
display: flex;
width: calc(100% - 140rpx);
//justify-content: space-between;
flex-direction: column;
align-items: center;
.right-top{
width: 100%;
margin-top: 10px;
display: flex;
}
.right-bottom{
width: 100%;
//margin-top: 20px;
display: flex;
}
}
}
.avatorSty{
height: 136rpx;
width: 136rpx;
background-color: #ffffff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.numSty{
width: 120rpx;
height: 50rpx;
border-radius: 20rpx;
background-color: #d5d8dd;
display: flex;
justify-content: center;
align-items: center;
}
.topText{
color: rgb(102, 102, 102);
font-weight: 400;
font-size: 28rpx;
}
}
</style>