115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
|
<!-- 我的 -->
|
||
|
|
<template>
|
||
|
|
<view class="my">
|
||
|
|
<!-- 顶部背景 -->
|
||
|
|
<view class="head-Bg">
|
||
|
|
<lwTopnav :bgColor="bgColor" lwColor="#fff" lwTitle="我的"></lwTopnav>
|
||
|
|
<view class="my-avatar">
|
||
|
|
<u-avatar size="130" :showSex="avatar!==''" :sexIcon="sex" :src="avatar"
|
||
|
|
@click="toShowDetail"></u-avatar>
|
||
|
|
<text @click="toShowDetail">请点击登录</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="my-detail" @click="toShowDetail">
|
||
|
|
<text>个人信息</text>
|
||
|
|
<u-icon name="arrow-right" size="28" color="#aab1c0"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="login-out" v-if="isLogin">
|
||
|
|
退出登录
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import lwTopnav from "@/components/lw-topnav/lw-topnav";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
lwTopnav
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
avatar: '',//头像
|
||
|
|
sex: 'man',// 性别-man、woman
|
||
|
|
isLogin: false,// 是否登录
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: '我的'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
// 前往我的信息
|
||
|
|
toShowDetail(){
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/my/mySetting'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.my{
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
height: calc(100vh - 50px);
|
||
|
|
.head-Bg{
|
||
|
|
height: 500rpx;
|
||
|
|
top: 0rpx;
|
||
|
|
left: 0rpx;
|
||
|
|
z-index: 1;
|
||
|
|
width: 100%;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
overflow: hidden;
|
||
|
|
background: -webkit-linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
|
||
|
|
background: linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%);
|
||
|
|
border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%;
|
||
|
|
}
|
||
|
|
.my-avatar{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-top: 30rpx;
|
||
|
|
text{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.my-detail{
|
||
|
|
margin-top: -70rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
z-index: 2;
|
||
|
|
width: 85%;
|
||
|
|
height: 130rpx;
|
||
|
|
color: #000;
|
||
|
|
background-color: #fff;
|
||
|
|
font-size: 30rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20rpx;
|
||
|
|
box-shadow: 0px 7px 30px 0px rgba(100, 100, 111, 0.2);
|
||
|
|
}
|
||
|
|
.login-out{
|
||
|
|
position: absolute;
|
||
|
|
box-shadow: 0px 5px 9px 0px rgba(100, 100, 111, 0.2);
|
||
|
|
bottom: 60px;
|
||
|
|
width: 85%;
|
||
|
|
border-radius: 80rpx;
|
||
|
|
border: 2rpx solid #ff2e0a;
|
||
|
|
height: 90rpx;
|
||
|
|
color: #ff2e0a;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background-color: #fff;
|
||
|
|
font-size: 34rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|