<template>
|
<view>
|
<div class="box">
|
<div class="box_info" :style="{background: 'url(' + img + ')'}">
|
<image src="@/static/2@2x.png" mode="widthFix" />
|
<div class="box_info_box">
|
<text>张三</text>
|
<div class="box_info_box_x">
|
<text>豆米科技</text>
|
<image src="@/static/mine_ic_change@2x.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="box_function">
|
<div class="box_function_item" v-for="(item, index) in MENU" :key="index">
|
<div class="box_function_item_left">
|
<image :src="item.icon" alt="" />
|
<text>{{item.name}}</text>
|
</div>
|
<div class="box_function_item_right">
|
<van-icon name="arrow" size="20" color="#CCCCCC" />
|
</div>
|
</div>
|
</div>
|
<div class="box_out"><text>退出登录</text></div>
|
</div>
|
<myTabbar :index="2" />
|
</view>
|
</template>
|
|
<script>
|
import myTabbar from "@/components/myTabber.vue"
|
export default {
|
components: {
|
myTabbar
|
},
|
data() {
|
return {
|
MENU: [
|
{ name: '个人信息', url: '/personal/personalInformation', icon: require('@/static/mine_ic_gerenxinxi@2x.png') },
|
// { name: '系统通知', url: '', icon: require('@/assets/icon/mine_ic_xitonggonggao@2x.png') },
|
{ name: '更新手机号', url: '/personal/updatePhone', icon: require('@/static/mine_ic_shoujihao@2x.png') },
|
{ name: '更新邮箱号', url: '/personal/updateMailbox', icon: require('@/static/mine_ic_youxianghao@2x.png') },
|
{ name: '扫码绑定账号', url: '', icon: require('@/static/mine_ic_bangding@2x.png') },
|
{ name: '修改密码', url: '/personal/changePassword', icon: require('@/static/mine_ic_xiugaimima@2x.png') },
|
],
|
img: require('@/static/mine_bg@2x.png')
|
}
|
},
|
onLoad() {
|
uni.hideTabBar()
|
// uni.login({
|
// success: data => {
|
// this.wxLogin(data.code)
|
// },
|
// fail: err => {
|
// uni.$u.toast(err)
|
// }
|
// })
|
},
|
methods: {
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.box_info {
|
padding: 0 30rpx;
|
height: 168rpx;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
background-repeat: no-repeat;
|
background-size: cover;
|
image {
|
width: 88rpx;
|
height: 88rpx;
|
}
|
.box_info_box {
|
height: 88rpx;
|
display: flex;
|
margin-left: 30rpx;
|
flex-direction: column;
|
justify-content: space-between;
|
.box_info_box_x {
|
display: flex;
|
align-items: center;
|
text {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 0.8);
|
}
|
image {
|
width: 26rpx;
|
height: 26rpx;
|
margin-left: 10rpx;
|
}
|
}
|
text {
|
font-size: 34rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.box_function {
|
margin-top: 30rpx;
|
.box_function_item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 98rpx;
|
border-bottom: 1rpx solid #E5E5E5;
|
/*&:last-child {*/
|
/* border: none;*/
|
/*}*/
|
.box_function_item_left {
|
display: flex;
|
align-items: center;
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 24rpx;
|
}
|
text {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.box_out {
|
position: fixed;
|
bottom: 200rpx;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 350rpx;
|
height: 88rpx;
|
background: #F7F7F7;
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
</style>
|
