Commit 34c253ce authored by liwei's avatar liwei

规范化了我的页面的css样式名称

parent 3c3b8675
...@@ -125,8 +125,8 @@ ...@@ -125,8 +125,8 @@
watch: { watch: {
info: { info: {
handler(newValue) { handler(newValue) {
if (newValue?.pictureUrls?.length) { if (newValue?.url?.length) {
this.imgs = newValue.pictureUrls this.imgs = newValue.url
} }
}, },
deep: true, deep: true,
......
...@@ -145,8 +145,8 @@ ...@@ -145,8 +145,8 @@
item.memAvatar = item.memAvatar.replace(/\\/g, '/') item.memAvatar = item.memAvatar.replace(/\\/g, '/')
} }
//处理动态照片 //处理动态照片
if (item.pictureUrls != null){ if (item.url != null){
item.pictureUrls = item.pictureUrls.replace(/\\/g, '/').split(',') item.url = item.url.replace(/\\/g, '/').split(',')
} }
//处理性别 //处理性别
item.memSex = getValue('sex',item.memSex) item.memSex = getValue('sex',item.memSex)
......
...@@ -71,9 +71,8 @@ ...@@ -71,9 +71,8 @@
], ],
//当前tab //当前tab
current: 1, current: 1,
arr: [],
total: 0,
num: 0, num: 0,
//登录弹窗
isLoginPop: false isLoginPop: false
}; };
}, },
......
<template> <template>
<view class="" style="background: #F4F5F9;"> <view style="background: #F4F5F9;">
<!-- 没登录--> <!-- 没登录-->
<view class="home-page-container" style="min-height: 100vh;" @touchmove.stop.prevent="() => {}" v-if="nologin==true"> <view class="noLogin-container" @touchmove.stop.prevent="() => {}" v-if="nologin==true">
<image class="bgc-imga" :src="baseUrl+'/user/bg-c.png'" mode="aspectFill"></image> <image class="noLogin-background-image" :src="baseUrl+'/user/bg-c.png'" mode="aspectFill"></image>
<u-navbar leftText=" " title=" " :bgColor="bgColor" :fixed="false" :safeAreaInsetTop="true" <u-navbar leftText=" " title=" " bgColor="rgba(255, 255, 255, 0)" :fixed="false" :safeAreaInsetTop="true" :placeholder="true">
:placeholder="true">
<view class="u-nav-slot" slot="left"> <view class="u-nav-slot" slot="left">
<view class="text"> </view> <view class="texts"> </view>
</view> </view>
<view class="u-nav-slot" slot="center"> <view class="u-nav-slot" slot="center">
<view class="texts"> 我的 </view> <view class="texts"> 我的 </view>
</view> </view>
</u-navbar> </u-navbar>
<view class="noimg"> <view class="noLogin-image">
<image :src="baseUrl+'/user/nologin.png'" style="width: 100%;height: 100%;" mode="aspectFill"/> <image :src="baseUrl+'/user/nologin.png'" style="width: 100%;height: 100%;" mode="aspectFill"/>
</view> </view>
<view class="text"> 登录后才能查看我的哦 </view> <view class="noLogin-text"> 登录后才能查看我的哦 </view>
<view class="nobutton" @click="login"> 点此登录 </view> <view class="noLogin-button" @click="login"> 点此登录 </view>
</view> </view>
<!-- 已登录--> <!-- 已登录-->
<view class="" v-if="nologin == false"> <view class="Login-container" v-if="nologin == false">
<!-- 顶部 背景-->
<image class="bgc-imga" :src="baseUrl+'/user/my2.png'" mode="aspectFill"/> <!-- 顶部-->
<view class="top">
<!-- 顶部 第一部分--> <!-- 顶部背景-->
<view class="logion"> <image class="top-background" :src="baseUrl+'/user/my22.png'" mode="aspectFill"></image>
<image class="bgc-imgas" :src="baseUrl+'/user/my22.png'" mode="aspectFill"></image> <view class="top-content">
<view class="sss"> <view class="top-avatar">
<view class="logo"> <!-- 头像-->
<image :src="info.headPortrait" style="width: 100%;height: 100%;border-radius: 50%;" <image class="top-avatar-image" :src="info.headPortrait" mode="aspectFill"/>
mode="aspectFill"> <view class="top-avatar-label">
</image> <image :src="baseUrl+'/user/myrz.png'" class="label-image" mode="aspectFill"
<view class="logola">
<image :src="baseUrl+'/user/myrz.png'" class="cuo" mode="aspectFill"
v-if="info.waitApprovedStatus == 'EXAMINE' || info.waitApprovedStatus=='REFUSE'"/> v-if="info.waitApprovedStatus == 'EXAMINE' || info.waitApprovedStatus=='REFUSE'"/>
<image :src="baseUrl+'/user/yrz.png'" class="cuo" mode="aspectFill" v-else/> <image :src="baseUrl+'/user/yrz.png'" class="label-image" mode="aspectFill" v-else/>
<view class="shenhe"> <view class="label-title">
{{ info.waitApprovedStatus == 'EXAMINE' ? {{ info.waitApprovedStatus == 'EXAMINE' ?
"审核中": info.waitApprovedStatus == 'PASS' ? "审核中": info.waitApprovedStatus == 'PASS' ?
"已认证": info.waitApprovedStatus == 'REFUSE' ? "已认证": info.waitApprovedStatus == 'REFUSE' ?
...@@ -46,38 +43,32 @@ ...@@ -46,38 +43,32 @@
</view> </view>
</view> </view>
</view> </view>
<view class="names"> <view class="top-name">
<text v-if="info.nickName">{{info.nickName}}</text><text v-else>0</text> <text v-if="info.nickName">{{info.nickName}}</text>
<text v-else>0</text>
</view> </view>
<view class="div"> <view class="top-tabs">
<view class="diving" @click="gotolike(1,info.ilike)"> <view class="tab-1" @click="gotolike(1,info.ilike)">
<view class="divtast"> <view class="tab-1-num">
<text v-if="info.ilike">{{info.ilike}}</text><text v-else>0</text> <text v-if="info.ilike">{{info.ilike}}</text><text v-else>0</text>
</view> </view>
<view class="divingname"> <view class="tab-1-text">
我喜欢的 我喜欢的
</view> </view>
</view> </view>
<view class="diving" style="margin: 0 136rpx;" @click="gotolike(2,info.likeMe)"> <view class="tab-2" style="margin: 0 136rpx;" @click="gotolike(2,info.likeMe)">
<view class="tab-2-num">
<!-- <view class="divtast" v-if="info.likeMe==0">-->
<view class="divtast">
<text v-if="info.likeMe">{{info.likeMe}}</text><text v-else>0</text> <text v-if="info.likeMe">{{info.likeMe}}</text><text v-else>0</text>
</view> </view>
<!-- <view class="vimg" v-else>--> <view class="tab-2-text">
<!-- <image :src="info.likeMeheadPortrait" class="simg" mode="aspectFill"></image>-->
<!-- </view>-->
<view class="divingname">
喜欢我的 喜欢我的
</view> </view>
</view> </view>
<view class="diving" @click="gotolike(3,info.lovers)"> <view class="tab-3" @click="gotolike(3,info.lovers)">
<view class="divtast"> <view class="tab-3-num">
<text v-if="info.lovers">{{info.lovers}}</text><text v-else>0</text> <text v-if="info.lovers">{{info.lovers}}</text><text v-else>0</text>
</view> </view>
<view class="tab-3-text">
<view class="divingname">
互相喜欢 互相喜欢
</view> </view>
</view> </view>
...@@ -85,30 +76,30 @@ ...@@ -85,30 +76,30 @@
</view> </view>
</view> </view>
<!-- 认证 第部分--> <!-- 认证 第部分-->
<view class="box"> <view class="content-1">
<view class="boxsing" style="height: 52rpx;"> <view class="double-auth">
<view class="boxsname" style="margin-left: 42rpx;"> <view class="double-auth-title" style="margin-left: 42rpx;">
双重认证 双重认证
</view> </view>
<view class="boxsnames" style="width: 88rpx;margin-left: 0rpx;"> <view class="double-auth-text" style="width: 88rpx;margin-left: 0rpx;">
{{numtwo}}/2) {{numtwo}}/2)
</view> </view>
<view class="boxsnames" style="margin-left: 0rpx;"> <view class="double-auth-text" style="margin-left: 0rpx;">
配对成功率提升200% 配对成功率提升200%
</view> </view>
<view class="boxsbutton" @click="gotomation"> <view class="double-auth-button" @click="gotomation">
立即认证 立即认证
</view> </view>
</view> </view>
<view class="boxsing" style="height: 52rpx;"> <view class="personal-data">
<view class="boxsname" style="margin-left: 42rpx;"> <view class="personal-data-title">
个人资料 个人资料
</view> </view>
<view class="boxsnames"> <view class="personal-data-desc">
资料完善80%以上双倍曝光 资料完善80%以上双倍曝光
</view> </view>
<view class="boxsbutton" @click="updateInformation"> <view class="personal-data-button" @click="updateInformation">
立即完善 立即完善
</view> </view>
</view> </view>
...@@ -116,26 +107,30 @@ ...@@ -116,26 +107,30 @@
</view> </view>
</view> </view>
<!-- 动态 第三部分--> <!-- 动态 第二部分-->
<view class="box" @click="goCommunity" v-if="(info.userArticleViewResponse.articleImg !== null && info.userArticleViewResponse.articleImg.length) || info.userArticleViewResponse.articleContent !== null"> <view class="content-2" @click="goCommunity" v-if="(info.articleInfo.articleImg !== null && info.articleInfo.articleImg.length) || info.articleInfo.articleContent !== null">
<view class="boxsing"> <view class="my-article">
<image :src="baseUrl+'/user/106.svg'" style="width: 42rpx;height: 42rpx;margin-left: 42rpx;;" <view class="my-article-title">
mode="aspectFill"> <image class="title-image" :src="baseUrl+'/user/106.svg'" mode="aspectFill"/>
</image> <view class="title-text">
<view class="boxsname">
我的动态 我的动态
</view> </view>
</view> </view>
<view class="strs" v-if="info.userArticleViewResponse.articleContent !== null"> <view class="my-article-more">
{{info.userArticleViewResponse.articleContent}} 查看更多
<u-icon name="arrow-right" size="13" bold="true"></u-icon>
</view> </view>
<view :class="['imgs',info.userArticleViewResponse.articleImg.length == 2 ? 'twoTemp':'']" v-if="info.userArticleViewResponse.articleImg !== null && info.userArticleViewResponse.articleImg.length"> </view>
<image v-for="item in info.userArticleViewResponse.articleImg" :src="item" mode="aspectFill"></image> <view class="my-article-content" v-if="info.articleInfo.articleContent !== null">
{{info.articleInfo.articleContent}}
</view>
<view :class="['my-article-image-1',info.articleInfo.articleImg.length == 2 ? 'my-article-image-2':'']" v-if="info.articleInfo.articleImg !== null && info.articleInfo.articleImg.length">
<image v-for="item in info.articleInfo.articleImg" :src="item" mode="aspectFill"></image>
</view> </view>
</view> </view>
<!-- 操作项 第部分--> <!-- 操作项 第部分-->
<view class="box" style=""> <view class="content-3">
<view class="box-bottom" v-for="(item,index) in button" :key="index" @click="whether(index)"> <view class="box-bottom" v-for="(item,index) in button" :key="index" @click="whether(index)">
<view class="box-bottom-left"> <view class="box-bottom-left">
<image :src="item.img" class="box-bottom-img" mode="aspectFill"></image> <image :src="item.img" class="box-bottom-img" mode="aspectFill"></image>
...@@ -199,8 +194,6 @@ import {setUserProfile} from '../../api/login/index' ...@@ -199,8 +194,6 @@ import {setUserProfile} from '../../api/login/index'
nologin: '',//登录标志 nologin: '',//登录标志
userInfo:{},//用户信息 userInfo:{},//用户信息
token:'',//token token:'',//token
img: this.$BASE_URL,
bgColor: "rgba(255, 255, 255, 0)",
button: [ button: [
{ {
name: "金币", name: "金币",
...@@ -224,16 +217,17 @@ import {setUserProfile} from '../../api/login/index' ...@@ -224,16 +217,17 @@ import {setUserProfile} from '../../api/login/index'
img: this.$store.state.imgUrl+'/user/myset.png', img: this.$store.state.imgUrl+'/user/myset.png',
}], }],
info: { info: {
headPortrait:'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg', headPortrait:'http://192.168.1.7/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
nickName:'11111', nickName:'11111',
ilike:'6', ilike:'6',
likeMe:'7', likeMe:'7',
lovers:'8', lovers:'8',
goldBalance:0, goldBalance:0,
userArticleViewResponse:{ waitApprovedStatus:'PASS',
articleInfo:{
articleImg:[ articleImg:[
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg', 'http://192.168.1.7/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg',
'http://192.168.1.80/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg' 'http://192.168.1.7/upload/CmsBanner/20241230/18E63B570FF04DB3A8EFE277D58256C4.jpg'
], ],
articleContent:'将昨天的快乐在今天发出去,就是双倍快乐!' articleContent:'将昨天的快乐在今天发出去,就是双倍快乐!'
} }
...@@ -363,161 +357,152 @@ import {setUserProfile} from '../../api/login/index' ...@@ -363,161 +357,152 @@ import {setUserProfile} from '../../api/login/index'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.logion { .noLogin-container{
min-height: 100vh;
.noLogin-background-image{
position: absolute;
top: -100rpx;
left: 0rpx;
width: 100%; width: 100%;
height: 750rpx; height: 100%;
position: relative; pointer-events: none;
}
.twoTemp{
&:after{
width: calc(33% - 10rpx);
content: '';
}
image{
&:last-child{
margin-left: 10rpx;
}
}
}
.imgs{
display: flex;
justify-content: space-between;
padding: 30rpx 42rpx;
image{
width: calc(33% - 10rpx);
height: 198rpx;
border-radius: 12rpx;
}
} }
.strs{ .u-nav-slot{
padding: 30rpx 42rpx; .texts {
font-size: 28rpx; height: 50rpx;
color: #333333; font-size: 32rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
color: #000000;
line-height: 50rpx;
} }
.box-bottom-text-la {
font-size: 36rpx;
font-family: 'PingFang SC-Heavy, PingFang SC';
font-weight: 400;
color: #5B83E8;
line-height: 36rpx;
margin-left: 20rpx;
} }
.noLogin-image{
.box-bottom-right-img { width: 338rpx;
width: 11rpx; height: 338rpx;
height: 20rpx; margin: 0 auto;
margin: 0 38rpx 0 14rpx; padding-top: 200rpx;
} }
.noLogin-text{
.box-bottom-right-name { width: 100%;
font-size: 28rpx; height: 44rpx;
font-size: 32rpx;
font-family: 'PingFang SC-Regular, PingFang SC'; font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400; font-weight: 400;
color: #B7B7B7; color: #C9C9D0;
line-height: 28rpx; line-height: 44rpx;
text-align: center;
margin-top: 104rpx;
} }
.noLogin-button{
.box-bottom-right { width: 392rpx;
height: 84rpx;
background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
border-radius: 42rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: center;
}
.box-bottom-text {
font-size: 28rpx; font-size: 28rpx;
font-family: 'PingFang SC-Heavy'; margin: 0 auto;
font-weight: bolder; font-family: 'PingFang SC-Regular, PingFang SC';
color: rgba(45, 49, 50, 0.9); font-weight: 400;
line-height: 28rpx; color: #415C9E;
margin-left: 24rpx; margin-top: 40rpx;
} }
.box-bottom-img {
height: 36rpx;
width: 36rpx;
margin-left: 42rpx;
} }
.box-bottom-left { .Login-container{
display: flex; .top {
align-items: center; width: 100%;
height: 750rpx;
position: relative;
.top-background{
position: absolute;
top: 0rpx;
left: 0rpx;
width: 100%;
height: 100%;
} }
.top-content{
.box-bottom { position: absolute;
width: 100%;
height: 100%;
left: 0rpx;
.top-avatar {
width: 184rpx;
height: 184rpx;
border: 6rpx solid #CCD9EF;
margin: 0 auto;
border-radius: 50%;
margin-top: 186rpx;
position: relative;
.top-avatar-image{
width: 100%; width: 100%;
height: 100%;
border-radius: 50%;
}
.top-avatar-label {
width: 126rpx;
height: 36rpx; height: 36rpx;
background: rgba(222, 231, 252, 1);
border-radius: 23rpx;
border: 2rpx solid #86A6F3;
position: absolute;
left: 30rpx;
bottom: -18rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
margin-bottom: 66rpx; .label-image{
width: 20rpx;
height: 20rpx;
} }
.label-title {
.box-bottom:first-child { height: 28rpx;
padding-top: 30rpx; font-size: 20rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #86A6F3;
margin-left: 8rpx;
line-height: 28rpx;
} }
.box-bottom:last-child {
padding-bottom: 40rpx;
} }
}
.boxsbutton { .top-name{
width: 152rpx; width: 100%;
height: 52rpx; text-align: center;
background: #E7EDFC; height: 44rpx;
font-size: 32rpx;
font-family: 'Arial-Regular, Arial';
font-weight: 600;
color: #333333;
line-height: 44rpx;
margin-top: 28rpx;
}
.top-tabs{
width: 100%;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
margin-top: 50rpx;
.tab-1{
width: 102rpx;
display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
font-size: 24rpx; .tab-1-num{
font-family: 'PingFang SC-Regular, PingFang SC'; width: 96rpx;
font-weight: 400; height: 96rpx;
color: #446CD2; margin-top: 30rpx;
line-height: 52rpx; display: flex;
margin-left: auto; font-size: 40rpx;
border-radius: 33rpx; font-family: 'Arial-Regular, Arial';
margin-right: 42rpx;
}
.boxsnames {
height: 34rpx;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400; font-weight: 400;
line-height: 34rpx; color: #000000;
margin-left: 18rpx;
color: rgba(45, 49, 50, 0.9);
}
.boxsname {
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx; line-height: 40rpx;
margin-left: 14rpx; justify-content: center;
}
.boxsing {
display: flex;
align-items: center; align-items: center;
height: 42rpx;
padding-top: 42rpx;
} }
.tab-1-text{
.box {
width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 32rpx;
position: relative;
}
.divingname {
width: 96rpx; width: 96rpx;
height: 24rpx; height: 24rpx;
font-size: 24rpx; font-size: 24rpx;
...@@ -526,31 +511,17 @@ import {setUserProfile} from '../../api/login/index' ...@@ -526,31 +511,17 @@ import {setUserProfile} from '../../api/login/index'
color: #B1B4C5; color: #B1B4C5;
line-height: 24rpx; line-height: 24rpx;
} }
.simg {
width: 100%;
height: 100%;
border-radius: 50%;
filter: blur(4rpx);
transform: translate3d(0, 0, 0);
}
.vimg {
border: 5rpx solid #CCD9EF;
width: 96rpx;
height: 96rpx;
margin-top: 30rpx;
border-radius: 50%;
box-sizing: border-box;
} }
.tab-2{
.divtast { width: 102rpx;
display: flex;
flex-direction: column;
justify-content: center;
.tab-2-num{
width: 96rpx; width: 96rpx;
height: 96rpx; height: 96rpx;
margin-top: 30rpx; margin-top: 30rpx;
display: flex; display: flex;
font-size: 40rpx; font-size: 40rpx;
font-family: 'Arial-Regular, Arial'; font-family: 'Arial-Regular, Arial';
font-weight: 400; font-weight: 400;
...@@ -559,158 +530,271 @@ import {setUserProfile} from '../../api/login/index' ...@@ -559,158 +530,271 @@ import {setUserProfile} from '../../api/login/index'
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.tab-2-text{
.diving { width: 96rpx;
height: 24rpx;
font-size: 24rpx;
font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
font-weight: 400;
color: #B1B4C5;
line-height: 24rpx;
}
}
.tab-3{
width: 102rpx; width: 102rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} .tab-3-num{
width: 96rpx;
.div { height: 96rpx;
width: 100%; margin-top: 30rpx;
display: flex; display: flex;
font-size: 40rpx;
font-family: 'Arial-Regular, Arial';
font-weight: 400;
color: #000000;
line-height: 40rpx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 50rpx;
} }
.tab-3-text{
.sss { width: 96rpx;
position: absolute; height: 24rpx;
width: 100%; font-size: 24rpx;
height: 100%; font-family: 'Source Han Sans CN-Regular, Source Han Sans CN';
left: 0rpx; font-weight: 400;
color: #B1B4C5;
line-height: 24rpx;
} }
.names {
width: 100%;
text-align: center;
height: 44rpx;
font-size: 32rpx;
// font-weight: bold;
// font-family: 'PingFang SC-Bold, PingFang SC';
font-family: 'Arial-Regular, Arial';
font-weight: 600;
color: #333333;
line-height: 44rpx;
margin-top: 28rpx;
} }
.shenhe {
height: 28rpx;
font-size: 20rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #86A6F3;
margin-left: 8rpx;
line-height: 28rpx;
} }
.cuo {
width: 20rpx;
height: 20rpx;
} }
}
.logo { .content-1{
width: 184rpx; width: 686rpx;
height: 184rpx; background: #FFFFFF;
border: 6rpx solid #CCD9EF; border-radius: 24rpx;
margin: 0 auto; margin: 0 auto;
border-radius: 50%; margin-top: 32rpx;
margin-top: 186rpx;
position: relative; position: relative;
.double-auth{
.logola {
width: 126rpx;
height: 36rpx;
background: rgba(222, 231, 252, 1);
border-radius: 23rpx;
border: 2rpx solid #86A6F3;
position: absolute;
left: 30rpx;
bottom: -18rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; height: 52rpx;
} padding-top: 42rpx;
.double-auth-title{
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-left: 42rpx;
} }
.double-auth-text{
.texts { height: 34rpx;
font-size: 24rpx;
height: 50rpx; font-family: 'PingFang SC-Regular, PingFang SC';
font-size: 32rpx; font-weight: 400;
font-family: 'PingFang SC-Bold, PingFang SC'; line-height: 34rpx;
// font-weight: bold; margin-left: 18rpx;
color: #000000; color: rgba(45, 49, 50, 0.9);
line-height: 50rpx;
} }
.double-auth-button{
.nobutton { width: 152rpx;
width: 392rpx; height: 52rpx;
height: 84rpx; background: #E7EDFC;
background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
border-radius: 42rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #446CD2;
line-height: 52rpx;
margin-left: auto;
border-radius: 33rpx;
margin-right: 42rpx;
}
}
.personal-data{
display: flex;
align-items: center;
padding-top: 42rpx;
height: 52rpx;
.personal-data-title{
height: 40rpx;
font-size: 28rpx; font-size: 28rpx;
margin: 0 auto; font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-left: 42rpx;
}
.personal-data-desc{
height: 34rpx;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC'; font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400; font-weight: 400;
color: #415C9E; line-height: 34rpx;
margin-top: 40rpx; margin-left: 18rpx;
color: rgba(45, 49, 50, 0.9);
} }
.personal-data-button{
.text { width: 152rpx;
width: 100%; height: 52rpx;
height: 44rpx; background: #E7EDFC;
font-size: 32rpx; display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC'; font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400; font-weight: 400;
color: #C9C9D0; color: #446CD2;
line-height: 44rpx; line-height: 52rpx;
text-align: center; margin-left: auto;
margin-top: 104rpx; border-radius: 33rpx;
margin-right: 42rpx;
} }
}
.noimg { }
width: 338rpx; .content-2{
height: 338rpx; width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto; margin: 0 auto;
padding-top: 200rpx; margin-top: 32rpx;
position: relative;
.my-article {
display: flex;
justify-content: space-between;
align-items: center;
height: 42rpx;
padding-top: 42rpx;
.my-article-title{
display: flex;
.title-image{
width: 42rpx;
height: 42rpx;
margin-left: 42rpx;
} }
.title-text{
page { height: 40rpx;
height: 100%; font-size: 28rpx;
background: linear-gradient(180deg, #F4F5F9 0%, #F4F5F9 100%); font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-left: 14rpx;
} }
.bgc-img {
position: absolute;
top: -80rpx;
left: 40rpx;
width: 670rpx;
pointer-events: none;
height: 100%;
} }
.my-article-more{
.bgc-imga { display: flex;
position: absolute; height: 40rpx;
top: -100rpx; font-size: 28rpx;
left: 0rpx; font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-right: 42rpx;
}
}
.my-article-content{
padding: 30rpx 42rpx;
font-size: 28rpx;
color: #333333;
}
.my-article-image-1{
display: flex;
justify-content: space-between;
padding: 30rpx 42rpx;
image{
width: calc(33% - 10rpx);
height: 198rpx;
border-radius: 12rpx;
}
}
.my-article-image-2{
&:after{
width: calc(33% - 10rpx);
content: '';
}
image{
&:last-child{
margin-left: 10rpx;
}
}
}
}
.content-3{
width: 686rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin: 0 auto;
margin-top: 32rpx;
position: relative;
.box-bottom {
width: 100%; width: 100%;
height: 100%; height: 36rpx;
pointer-events: none; display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 66rpx;
.box-bottom-left {
display: flex;
align-items: center;
.box-bottom-img {
height: 36rpx;
width: 36rpx;
margin-left: 42rpx;
} }
.box-bottom-text {
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 28rpx;
margin-left: 24rpx;
}
.box-bottom-text-la {
.bgc-imgas { font-size: 36rpx;
position: absolute; font-family: 'PingFang SC-Heavy, PingFang SC';
top: 0rpx; font-weight: 400;
left: 0rpx; color: #5B83E8;
width: 100%; line-height: 36rpx;
height: 100%; margin-left: 20rpx;
}
}
.box-bottom-right {
display: flex;
align-items: center;
justify-content: flex-end;
.box-bottom-right-img {
width: 11rpx;
height: 20rpx;
margin: 0 38rpx 0 14rpx;
}
.box-bottom-right-name {
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #B7B7B7;
line-height: 28rpx;
}
} }
}
.box-bottom:first-child {
padding-top: 30rpx;
}
.box-bottom:last-child {
padding-bottom: 40rpx;
}
}
}
.popup-container { .popup-container {
height: 562rpx; height: 562rpx;
width: 544rpx; width: 544rpx;
......
...@@ -101,12 +101,18 @@ ...@@ -101,12 +101,18 @@
<view class="card" style="height: auto;" <view class="card" style="height: auto;"
v-if="(userData.articleImg !== null && userData.articleImg.length) || userData.articleContent !== null"> v-if="(userData.articleImg !== null && userData.articleImg.length) || userData.articleContent !== null">
<view class="content"> <view class="content">
<view class="have_image"> <view class="have_image_two">
<view class="have_image_title">
<image :src="baseUrl+'/user/106.svg'" mode="aspectFill"/> <image :src="baseUrl+'/user/106.svg'" mode="aspectFill"/>
<view class="title" style="font-family: SC-Bold;"> <view class="title" style="font-family: SC-Bold;">
我的动态 我的动态
</view> </view>
</view> </view>
<view class="boxsname2">
查看更多
<u-icon name="arrow-right" size="13" bold="true"></u-icon>
</view>
</view>
<view class="strs" v-if="userData.articleContent !== null"> <view class="strs" v-if="userData.articleContent !== null">
{{userData.articleContent}} {{userData.articleContent}}
</view> </view>
...@@ -671,6 +677,37 @@ ...@@ -671,6 +677,37 @@
} }
} }
.have_image_two {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-weight: bold;
.have_image_title{
display: flex;
align-items: center;
}
image {
width: 28rpx;
height: 28rpx;
}
.title {
padding-left: 12rpx;
}
.boxsname2{
display: flex;
height: 40rpx;
font-size: 28rpx;
font-family: 'PingFang SC-Heavy';
font-weight: bolder;
color: rgba(45, 49, 50, 0.9);
line-height: 40rpx;
margin-right: 42rpx;
}
}
.one { .one {
font-size: 28rpx; font-size: 28rpx;
margin-top: 26rpx; margin-top: 26rpx;
......
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
page { page {
height: 100%; height: 100%;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment