bnyer
/
bnyer-cloud-tiktok
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

个人中心排版修改

feature-1.1-dev
langz 3 years ago
parent
f45f5ddb06
commit
8691b3074d
1 changed files with 118 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 152
      pages/userInfo/userInfo.vue

152
pages/userInfo/userInfo.vue
View File

@ -23,63 +23,93 @@
</view> </view>
<view class="menu-content"> <view class="menu-content">
<view class="prominent-menu"> <view class="prominent-menu">
<view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/myCollection/myCollection')"> <!-- <view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/myCollection/myCollection')">
<view class="prominent-menu-title">我的收藏</view> <view class="prominent-menu-title">我的收藏</view>
<view class="prominent-menu-icon"> <view class="prominent-menu-icon">
<uni-icons custom-prefix="iconfont" type="icon-wodeshoucang" size="40" :color="primaryColor" /> <uni-icons custom-prefix="iconfont" type="icon-wodeshoucang" size="40" :color="primaryColor" />
</view> </view>
</view> </view> -->
<view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/aiPaint/aiPaint')"> <!-- <view class="prominent-menu-item collect-menu" @click="toLinkAuth('/pages/userInfo/aiPaint/aiPaint')">
<view class="prominent-menu-title">我的创作</view> <view class="prominent-menu-title">我的创作</view>
<view class="prominent-menu-icon"> <view class="prominent-menu-icon">
<uni-icons custom-prefix="iconfont" type="icon-chuangzuozhongxin" size="40" :color="primaryColor" /> <uni-icons custom-prefix="iconfont" type="icon-chuangzuozhongxin" size="40" :color="primaryColor" />
</view> </view>
</view> -->
<view class="prominent-menu-item collect-menu" @click="toLink('/pages/userInfo/vip/vip')">
<view class="prominent-menu-icon">
<uni-icons class="list-menu-icon" type="vip" size="50" :color="primaryColor" />
</view>
<view class="prominent-menu-title">会员中心</view>
<view class="vip-center-button">
查看
</view>
</view> </view>
</view> </view>
<view class="list-menu"> <view class="list-menu">
<view class="list-menu-item" @click="toLink('/pages/userInfo/vip/vip')"> <view class="list-menu-title">
<uni-icons class="list-menu-icon" type="vip" size="20" :color="primaryColor" /> 常用功能
</view>
<!-- <view class="list-menu-item" @click="toLink('/pages/userInfo/vip/vip')">
<uni-icons class="list-menu-icon" type="vip" size="40" :color="primaryColor" />
<view class="text">会员中心</view> <view class="text">会员中心</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
</view> </view> -->
<view class="list-menu-item" @click="toLinkAuth('/pages/userInfo/myCollection/myCollection')">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-wodeshoucang" size="35" :color="primaryColor" />
<view class="text">我的收藏</view>
<!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view>
<view class="list-menu-item" @click="toLinkAuth('/pages/userInfo/aiPaint/aiPaint')">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-chuangzuozhongxin" size="35" :color="primaryColor" />
<view class="text">我的创作</view>
<!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view>
<view class="list-menu-item" @click="toLink('/pages/userInfo/goldNum/goldNum')"> <view class="list-menu-item" @click="toLink('/pages/userInfo/goldNum/goldNum')">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-biaoqing" size="20" :color="primaryColor" /> <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-biaoqing" size="35" :color="primaryColor" />
<view class="text">领取画意值</view> <view class="text">领取画意值</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view> </view>
<view class="list-menu-item" @click="$noMultipleClicks(useCdk)"> <view class="list-menu-item" @click="$noMultipleClicks(useCdk)">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-xunhuanjiagongcishu" size="20" :color="primaryColor" /> <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-xunhuanjiagongcishu" size="35" :color="primaryColor" />
<view class="text">兑换画意值</view> <view class="text">兑换画意值</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view> </view>
<view class="list-menu-item" @click="toLink('/pages/userInfo/goldNum/goldNumLog')"> <!-- <view class="list-menu-item" @click="toLink('/pages/userInfo/goldNum/goldNumLog')">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-huabi1" size="20" :color="primaryColor" /> <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-huabi1" size="40" :color="primaryColor" />
<view class="text">画意值记录</view> <view class="text">画意值记录</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
</view> </view> -->
</view> </view>
<view class="list-menu"> <view class="list-menu">
<view class="list-menu-title">
其他功能
</view>
<view class="list-menu-item" @click="toLink('/pages/userInfo/goldNum/goldNumLog')">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-huabi1" size="35" :color="primaryColor" />
<view class="text">画意值记录</view>
<!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view>
<view class="list-menu-item" @click="toLink(`/pages/userInfo/question/question`)"> <view class="list-menu-item" @click="toLink(`/pages/userInfo/question/question`)">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-wenti-" size="20" :color="primaryColor"></uni-icons> <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-wenti-" size="35" :color="primaryColor"></uni-icons>
<view class="text">常见问题</view> <view class="text">常见问题</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view> </view>
<view class="list-menu-item" @click="$noMultipleClicks(linkToUs)"> <view class="list-menu-item" @click="$noMultipleClicks(linkToUs)">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-zhifeiji" size="20" :color="primaryColor" /> <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-zhifeiji" size="35" :color="primaryColor" />
<view class="text">联系我们</view> <view class="text">联系我们</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view> </view>
<view class="list-menu-item" @click="toLink(`/pages/userInfo/setting/setting`)"> <view class="list-menu-item" @click="toLink(`/pages/userInfo/setting/setting`)">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-chilun" size="20" :color="primaryColor"></uni-icons> <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-chilun" size="35" :color="primaryColor"></uni-icons>
<view class="text">设置</view> <view class="text">设置</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <!-- <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> -->
</view> </view>
</view> </view>
<view class="share-box"> <view class="share-box">
<button title="分享" open-type="share"> <button title="分享" open-type="share">
<view class="list-menu-item"> <view class="list-menu-item-share">
<uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-fenxiang1" size="20" :color="primaryColor" /> <uni-icons class="list-menu-icon" custom-prefix="iconfont" type="icon-fenxiang1" size="20" :color="primaryColor" />
<view class="text">分享</view> <view class="text">分享</view>
<uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons> <uni-icons class="list-menu-genduo" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
@ -353,7 +383,9 @@ import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons
.my-message { .my-message {
width: 100vw; width: 100vw;
height: calc(20vh + 20rpx); height: calc(20vh + 20rpx);
background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%); // background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);
background-image: linear-gradient(-225deg, #FFFEFF 0%, #ffe6ff 100%);
// background-color: #fff2fd;
position: relative; position: relative;
.dim-div { .dim-div {
@ -437,7 +469,7 @@ import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
.prominent-menu { .prominent-menu {
height: 120rpx; height: 140rpx;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -445,21 +477,33 @@ import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons
.prominent-menu-item { .prominent-menu-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; // justify-content: space-between;
//此处等右边有新模块的时候再采用下面的width //此处等右边有新模块的时候再采用下面的width
width: calc(50% - 10rpx); // width: calc(50% - 10rpx);
//width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10rpx; border-radius: 10rpx;
background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%); // background-image: linear-gradient(-225deg, #aaffff 0%, #c58bff 100%);
background-image: linear-gradient(-225deg, #c58bff 0%, #aaffff 100%);
padding: 20rpx 10rpx 20rpx 30rpx; padding: 20rpx 10rpx 20rpx 30rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
.prominent-menu-title { .prominent-menu-title {
font-size: 26rpx; margin-left: 20rpx;
font-size: 30rpx;
font-weight: 600; font-weight: 600;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25); text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);
} }
.vip-center-button {
position: absolute;
right: 40rpx;
box-sizing: border-box;
padding: 5px 10px;
background-color: #FFFEFF;
border-radius: 40rpx;
font-size: 22rpx;
color: #3a3a3a;
}
.prominent-menu-icon { .prominent-menu-icon {
@ -470,12 +514,22 @@ import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons
} }
.list-menu { .list-menu {
position: relative;
display: flex;
flex-wrap: wrap;
// height: 160rpx;
margin-top: 20rpx; margin-top: 20rpx;
padding: 0 20rpx; padding: 90rpx 20rpx 20rpx 20rpx;
background-color: $uni-white; background-color: $uni-white;
border-radius: 10rpx; border-radius: 10rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
.list-menu-title {
position: absolute;
font-size: 32rpx;
font-weight: bold;
left: 40rpx;
top: 20rpx;
}
} }
@ -483,11 +537,13 @@ import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons
.list-menu-item { .list-menu-item {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 80rpx; width: 25%;
line-height: 80rpx; height: 120rpx;
border-bottom: 2rpx solid $uni-border-2; // line-height: 80rpx;
// border-bottom: 2rpx solid $uni-border-2;
.list-menu-icon{ .list-menu-icon{
color: $uni-primary; color: $uni-primary;
@ -495,8 +551,8 @@ import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons
.text { .text {
font-size: 26rpx; font-size: 26rpx;
line-height: 80rpx; // line-height: 80rpx;
width: calc(100% - 100rpx); // width: calc(100% - 100rpx);
} }
.list-menu-genduo{ .list-menu-genduo{
@ -504,6 +560,34 @@ import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons
} }
} }
.list-menu-item-share {
display: flex;
// flex-direction: column;
align-items: center;
// justify-content: space-between;
// width: 80%;
height: 90rpx;
line-height: 80rpx;
// border-bottom: 2rpx solid $uni-border-2;
.list-menu-icon{
color: $uni-primary;
margin-right: 10px;
margin-left: 10px;
}
.text {
font-size: 26rpx;
// line-height: 80rpx;
// width: calc(100% - 100rpx);
}
.list-menu-genduo{
position: absolute;
right: 30rpx;
}
}
.list-menu-item:first-child { .list-menu-item:first-child {
} }

Write Preview
Loading…
Cancel
Save