A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a1300399510@qq.com 提交于 2023/03/30 -14:20:01

Browse Source
This commit is contained in:
XiaoMo
2023-03-30 14:20:12 +08:00
parent 32589c715f
commit 4dd5b7cac1
6 changed files with 132 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/views/user/UserIndex.vue
View File

@@ -1,7 +1,6 @@
<template>
<div class="container">
<div class="header flexcenter flexcolumn">
<div class="portrait flexcenter shadow">
<img class="portrait-icom" :src="info.avatar" />
</div>
@@ -9,6 +8,56 @@
</div>
<div class="operation-box shadow">
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<image class="operation-icom" mode="widthFix" src="../../../img/u62.png"></image>消息
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.collect }}</div>
<image class="operation-right-icom" mode="widthFix" src="../../../img/u60.svg"></image>
</div>
</div>
<div class="operation-item flexacenter" v-for="(item, index) in list" :key="index">
<div class="operation-left flexacenter">
<image class="operation-icom" mode="widthFix" :src="item.icon"></image>{{ item.name }}
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.creation }}</div>
<image class="operation-right-icom" mode="widthFix" src="../../../img/u60.svg"></image>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<image class="operation-icom" mode="widthFix" src="../../../img/u44.png"></image>收藏
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.creation }}</div>
<image class="operation-right-icom" mode="widthFix" src="../../../img/u60.svg"></image>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<image class="operation-icom" mode="widthFix" src="../../../img/u50.png"></image>发帖
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.likearticle }}</div>
<image class="operation-right-icom" mode="widthFix" src="../../../img/u60.svg"></image>
</div>
</div>
<div class="operation-item flexacenter">
<div class="operation-left flexacenter">
<image class="operation-icom" mode="widthFix" src="../../../img/u56.png"></image>回帖
</div>
<div class="operation-right flexacenter">
<div class="operation-data flexcenter">{{ count.comment }}</div>
<image class="operation-right-icom" mode="widthFix" src="../../../img/u60.svg"></image>
</div>
</div>
</div>
</div>
</template>
@@ -21,7 +70,20 @@ export default {
info: {
avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
nickname: "Ada.Wu"
}
},
count: {
collect: 10,
creation: 10,
likearticle: 10,
comment: 10,
},
list: [{
icon: "@/assets/img/user/collect.png",
name: "收藏",
key: "collect",
}, {
name: "发帖"
}]
};
},
@@ -69,5 +131,67 @@ export default {
}
.operation-box {
background-color: #fff;
margin: 0 .2933rem .4rem;
border-radius: .4rem;
-webkit-box-shadow: 0 0 .3rem rgba(0, 0, 0, .1);
box-shadow: 0 0 .3rem rgba(0, 0, 0, .1);
.operation-item {
height: 1.8rem;
justify-content: space-between;
padding: 0 .4rem;
&:not(:first-of-type) {
border-top: .0133rem dotted #d7d7d7;
}
.operation-left {
color: #333333;
font-size: .36rem;
line-height: .6rem;
}
.operation-icom {
width: .48rem;
height: .48rem;
margin-right: .32rem;
}
.operation-data {
background-color: rgba(246, 246, 246, 1);
border-radius: .64rem;
font-size: .28rem;
color: #555555;
min-width: .9rem;
text-align: center;
padding: 0 .2rem;
box-sizing: border-box;
}
.operation-right-icom {
width: .12rem;
height: .22rem;
margin-left: .2rem;
}
.operation-uid {
border: .0133rem solid rgba(235, 235, 235, 1);
height: .56rem;
border-radius: .16rem;
color: #000;
font-size: .3rem;
padding: 0 .2rem;
}
.operation-uid-value {
font-weight: 650;
}
}
}
}
</style>