测试版
This commit is contained in:
liuyuan
257
pages/visitor/mine.vue
Normal file
257
pages/visitor/mine.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<view class="commonPage commonPageBox">
|
||||
<view class="bg_top">
|
||||
<u-icon @click="goSetting()" class="setIcon" labelColor="#294a97" labelPos="bottom" label="设置" name="setting"
|
||||
:style="`top:${(20 + statusBarHeight) * 2}rpx`" color="#294a97" size="22"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="mine_box" :style="`top:${(80 + statusBarHeight) * 2}rpx`">
|
||||
<view class="per_mes">
|
||||
<view class="per_mes_user">
|
||||
<view style="display: flex; align-items: center; flex-direction: column">
|
||||
<image src="../../static/logo.png" class="per_mes_img color_shandow"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="userInfoBox">
|
||||
<view class="name" style=" font-size: 32rpx;" @click="toLogin()">未登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_box" style=" margin-top: 50rpx;">
|
||||
<view class="xiugai boxShadow box_fillet">
|
||||
<common-list :dataList="pageList" @hancleClick="handleClickTab" label="name">
|
||||
<template slot="rightSlot" slot-scope="slotProps">
|
||||
<text class="fdButtonBox aui-text-success"
|
||||
style="line-height: 40rpx">{{ slotProps.row.content }}</text>
|
||||
</template>
|
||||
</common-list>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer_box">
|
||||
<view class="footer_item" @click="toHome()">
|
||||
<view class="footer_nav_item" @click="selected=1">
|
||||
<image v-if="selected == 1" class="footer_item_image"
|
||||
src="/static/tab/home_active.png" mode="aspectFit"></image>
|
||||
<image v-else class="footer_item_image" src="/static/tab/home.png" mode="aspectFit">
|
||||
</image>
|
||||
<text class="footer_item_text"
|
||||
:class="[selected == 1 ? 'footer_item_text_active' : '']">首页</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer_item" @click="toMine()">
|
||||
<view class="footer_nav_item" @click="selected=4">
|
||||
<image v-if="selected == 4" class="footer_item_image"
|
||||
src="/static/tab/mine_active.png" mode="aspectFit"></image>
|
||||
<image v-else class="footer_item_image" src="/static/tab/mine.png" mode="aspectFit">
|
||||
</image>
|
||||
<text class="footer_item_text"
|
||||
:class="[selected == 4 ? 'footer_item_text_active' : '']">我的</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selected : 4,
|
||||
pageList: [
|
||||
{
|
||||
name: "关于我们",
|
||||
url: "/pages/my/aboutUs",
|
||||
type: "pageJump",
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//首页
|
||||
toHome(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/visitor/index'
|
||||
})
|
||||
},
|
||||
//跳转设置
|
||||
goSetting() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/set?name=visitor',
|
||||
});
|
||||
},
|
||||
//点击切换
|
||||
handleClickTab(v) {
|
||||
switch (v.type) {
|
||||
case "pageJump":
|
||||
this.onPageJump(v.url);
|
||||
break;
|
||||
}
|
||||
},
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
});
|
||||
},
|
||||
//去登录
|
||||
toLogin(){
|
||||
this.onPageJump('/pages/user/login')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commonPage{
|
||||
background-image: linear-gradient(-10deg, #fdf0ed 0%, #bfe3f0 40%, #e4eefa 60%, #bfe3f0 80%, #7dc1f0 100%);
|
||||
}
|
||||
.mine_box {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: 0 0rpx;
|
||||
}
|
||||
.per_mes {
|
||||
padding: 0 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.per_mes_img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 90rpx;
|
||||
margin: 0 0 0 0;
|
||||
float: left;
|
||||
}
|
||||
.userInfoBox{
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
color: #6990c7 !important;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 26rpx;
|
||||
line-height: 40rpx;
|
||||
color: #6990c7;
|
||||
}
|
||||
.per_user_img {
|
||||
display: inline-block;
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
margin-left: 10rpx;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg_top {
|
||||
padding: 0 30rpx;
|
||||
height: 30vh;
|
||||
position: relative;
|
||||
|
||||
.setIcon {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
}
|
||||
}
|
||||
.list_box {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.xiugai {
|
||||
border-radius: 10rpx !important;
|
||||
margin: 0 20rpx;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
|
||||
.nav_list {
|
||||
background-color: #b7e0e2;
|
||||
padding: 15rpx 0 15rpx 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
text {
|
||||
color: #333;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-image: url("@/static/icon/icon_right.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_list:nth-last-child(1) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footer_box {
|
||||
height: 90rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
background: #fff;
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
.footer_item {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer_nav_item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.footer_item_text {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.footer_item_text_active {
|
||||
color: #7dc1f0 !important;
|
||||
}
|
||||
|
||||
.footer_item_image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user