|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="container">
|
|
|
+ <div class="containers">
|
|
|
<div class="top">
|
|
|
<el-upload :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload2">
|
|
|
<img class="top" :src="userInfo.bg || require('../../assets/img/bg-moren@3x.png')" alt="" />
|
|
|
@@ -31,17 +31,17 @@
|
|
|
<div class="userContent" v-if="active === '关注' || active === '粉丝'">
|
|
|
<div class="border"></div>
|
|
|
<el-empty v-if="empty" description="还没有哦~"></el-empty>
|
|
|
- <div v-for="item in list" :key="item.id">
|
|
|
- <div class="box">
|
|
|
+ <div style="margin-top: 30px" v-for="item in list" :key="item.id">
|
|
|
+ <div class="boxFollow">
|
|
|
<router-link :to="{ path: '/castingDetail?id=' + item.id }">
|
|
|
<div class="text">
|
|
|
<img class="img4" :src="item.avatar" alt="" />
|
|
|
<div class="box2">
|
|
|
- <div class="name">
|
|
|
+ <div class="nickname">
|
|
|
<div class="name1">{{ item.nickname }}</div>
|
|
|
<img class="name2" src="../../assets/img/renzheng_icon@3x.png" alt="" />
|
|
|
</div>
|
|
|
- <div class="text2">暂无</div>
|
|
|
+ <div class="detail">{{ item.intro || '暂无' }}</div>
|
|
|
<div class="box3">
|
|
|
<div class="box4">
|
|
|
<div class="text4">
|
|
|
@@ -51,16 +51,18 @@
|
|
|
已售 <span>{{ item.sales }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-button
|
|
|
- style="color: #939599"
|
|
|
- plain
|
|
|
- round
|
|
|
- :class="{ prim: !item.follow }"
|
|
|
- size="mini"
|
|
|
- @click.prevent="like(item)"
|
|
|
- >
|
|
|
- {{ item.follow ? '已关注' : '关注' }}
|
|
|
- </el-button>
|
|
|
+ <div class="btnFollow">
|
|
|
+ <el-button
|
|
|
+ style="color: #939599"
|
|
|
+ plain
|
|
|
+ round
|
|
|
+ :class="{ prim: !item.follow }"
|
|
|
+ size="mini"
|
|
|
+ @click.prevent="like(item)"
|
|
|
+ >
|
|
|
+ {{ item.follow ? '已关注' : '关注' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="imgBox" v-if="item.bg">
|
|
|
@@ -384,7 +386,7 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
-.container {
|
|
|
+.containers {
|
|
|
.border2 {
|
|
|
height: 1px;
|
|
|
background: #494a4d;
|
|
|
@@ -397,21 +399,7 @@ export default {
|
|
|
padding-top: 200px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
- /deep/ .el-button {
|
|
|
- position: absolute;
|
|
|
- width: 90px;
|
|
|
- height: 26px;
|
|
|
- border-radius: 16px;
|
|
|
- border: 1px solid #939599;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- background: transparent;
|
|
|
- color: #939599;
|
|
|
- line-height: 6px;
|
|
|
- cursor: pointer;
|
|
|
- top: 20px;
|
|
|
- right: 15px;
|
|
|
- }
|
|
|
+
|
|
|
/deep/ .el-empty__description {
|
|
|
color: #ccc;
|
|
|
margin: 10px 0 0 17px;
|
|
|
@@ -420,6 +408,21 @@ export default {
|
|
|
height: 146px;
|
|
|
width: 970px;
|
|
|
position: relative;
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ width: 90px;
|
|
|
+ height: 26px;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid #939599;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ background: transparent;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ top: 20px;
|
|
|
+ right: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.top1 {
|
|
|
@@ -464,7 +467,7 @@ export default {
|
|
|
.userContent {
|
|
|
padding: 0 16px;
|
|
|
|
|
|
- .box {
|
|
|
+ .boxFollow {
|
|
|
.flex();
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 20px;
|
|
|
@@ -480,9 +483,9 @@ export default {
|
|
|
.box2 {
|
|
|
width: 288px;
|
|
|
margin-right: 50px;
|
|
|
- .name {
|
|
|
+ .nickname {
|
|
|
.flex();
|
|
|
- margin-top: 5px;
|
|
|
+ // margin-top: 5px;
|
|
|
.name1 {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
@@ -495,7 +498,7 @@ export default {
|
|
|
height: 18px;
|
|
|
}
|
|
|
}
|
|
|
- .text2 {
|
|
|
+ .detail {
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #939599;
|
|
|
@@ -521,18 +524,22 @@ export default {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
- .el-button {
|
|
|
- background-color: transparent;
|
|
|
- min-width: 76px;
|
|
|
- height: 28px;
|
|
|
+ .btnFollow {
|
|
|
+ .el-button {
|
|
|
+ background-color: transparent;
|
|
|
+ min-width: 76px;
|
|
|
+ height: 28px;
|
|
|
+
|
|
|
+ &.prim {
|
|
|
+ .line(@radius: 28px);
|
|
|
+ border: 0;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- &.prim {
|
|
|
- .line(@radius:28px);
|
|
|
- text-align: center;
|
|
|
- /deep/span {
|
|
|
- color: @prim;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
+ /deep/span {
|
|
|
+ color: @prim;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|