center.vue
3.66 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
132
133
134
<template>
<div class="user_center ">
<NafmHeader navClass="nafmii-head-bg2" :leftArrow="false">
<div class="header">
<div class="header_left">
<img :src="headerIcon">
</div>
<div class="header_right" @click="jumpPersonPage">
<div class="right_txt" v-if="GIsLogin">
<div class="nick">凝视你的目光</div>
<div class="phone">183****8924</div>
</div>
<div class="right_txt" v-else>
<div class="nick">{{$t('center.login')}}</div>
<div class="phone">{{$t('center.konwMore')}}</div>
</div>
<div class="iconfont iconright"></div>
</div>
</div>
</NafmHeader>
<div class="center_menu_list">
<van-cell :title="$t('center.message')" center is-link to="/user/message" :icon="icon.message" value-class="right_content">
<template #default>
<div class="dot" v-if="GIsLogin"></div>
</template>
</van-cell>
<van-cell :title="$t('center.collect')" center is-link to="/user/collect" :icon="icon.collect" />
<van-cell :title="$t('center.study')" center is-link @click="jumpStudyPage" :icon="icon.study" value-class="right_content" />
<!-- <van-cell :title="$t('center.question')" center is-link to="/user/question" :icon="icon.question" /> -->
<!-- <van-cell :title="$t('center.feedBack')" center is-link to="/user/feedback" :icon="icon.feedback" /> -->
<van-cell :title="$t('center.about')" center is-link to="/user/about" :icon="icon.about" value-class="right_content">
<template #default>
<div v-if="GIsLogin">版本2.1</div>
</template>
</van-cell>
<van-cell :title="$t('center.setting')" center is-link to="/user/setting" :icon="icon.setting" />
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Center',
data() {
return {
headerIcon: require('@/assets/icon/photo_default.png'),
icon: {
message: require('@/assets/icon/center_message.png'),
collect: require('@/assets/icon/center_collect.png'),
study: require('@/assets/icon/center_study.png'),
question: require('@/assets/icon/center_question.png'),
feedback: require('@/assets/icon/center_feedback.png'),
about: require('@/assets/icon/center_about.png'),
setting: require('@/assets/icon/center_setting.png'),
},
}
},
computed: {
...mapGetters('user', ['GIsLogin'])
},
methods: {
// 跳转到我到学习页面
jumpStudyPage() {
},
// 跳转到 个人设置中心
jumpPersonPage() {
this.$router.push({
path: '/user/person'
})
}
},
}
</script>
<style lang="less">
@import "~@/assets/css/variable.less";
.user_center {
background-color: #fafafa;
height: 100vh;
}
.nav_content_container {
position: relative;
z-index: 999;
}
.header {
padding: 35px 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.header_left {
width: 62px;
height: 62pxpx;
border-radius: 50%;
margin-right: 12px;
img {
width: 100%;
}
}
.header_right {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
color: @colorfff;
.nick {
font-size: 19px;
}
.phone {
margin-top: 3px;
font-size: 14px;
}
}
}
.center_menu_list {
background-color: #fff;
.right_content {
display: flex;
align-items: center;
justify-content: flex-end;
}
.dot {
width: 8px;
height: 8px;
background: #ff4038;
border-radius: 50%;
}
}
.van-cell:not(:last-child)::after {
right: 16px;
}
</style>