|
|
@@ -20,23 +20,54 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
<el-upload :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
<img v-if="userInfo.avatar" class="img2" :src="userInfo.avatar" alt="" />
|
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
- <div v-if="active === '关注' || active === '粉丝'">
|
|
|
+ <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">
|
|
|
- <fans-info :list="item" @getDetail="tab"></fans-info>
|
|
|
+ <div class="box">
|
|
|
+ <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="name1">{{ item.nickname }}</div>
|
|
|
+ <img class="name2" src="../../assets/img/renzheng_icon@3x.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text2">暂无</div>
|
|
|
+ <div class="box3">
|
|
|
+ <div class="box4">
|
|
|
+ <div class="text4">
|
|
|
+ 粉丝 <span>{{ item.follows }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="text4">
|
|
|
+ 已售 <span>{{ item.sales }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ plain
|
|
|
+ round
|
|
|
+ :class="{ prim: !item.follow }"
|
|
|
+ size="mini"
|
|
|
+ @click.prevent="like(item)"
|
|
|
+ >
|
|
|
+ {{ item.follow ? '已关注' : '关注' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="imgBox" v-if="item.bg">
|
|
|
+ <img class="imgBox1" :src="item.bg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="empty">
|
|
|
- <div class="border2"></div>
|
|
|
- <el-empty description="还没有哦～"></el-empty>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="content" v-if="!empty && active !== '关注' && active !== '粉丝'">
|
|
|
+ <div class="content" v-if="active !== '关注' && active !== '粉丝'">
|
|
|
<div class="name">基本信息</div>
|
|
|
<div class="box">
|
|
|
<div class="text">
|
|
|
@@ -128,13 +159,15 @@
|
|
|
<script>
|
|
|
import { mapState } from 'vuex';
|
|
|
import resolveUrl from 'resolve-url';
|
|
|
+import user from '../../mixins/user';
|
|
|
import Clipboard from 'clipboard';
|
|
|
-import FansInfo from '../../components/FansInfo.vue';
|
|
|
+// import FansInfo from '../../components/FansInfo.vue';
|
|
|
export default {
|
|
|
created() {
|
|
|
this.uploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
|
|
|
},
|
|
|
- components: { FansInfo },
|
|
|
+ // components: { FansInfo },
|
|
|
+ mixins: [user],
|
|
|
data() {
|
|
|
return {
|
|
|
tabs: ['粉丝', '关注'],
|
|
|
@@ -329,13 +362,6 @@ export default {
|
|
|
color: #ccc;
|
|
|
margin: 10px 0 0 17px;
|
|
|
}
|
|
|
- // /deep/ .el-message-box {
|
|
|
- // /deep/ .el-message-box__btns {
|
|
|
- // /deep/ .el-button {
|
|
|
- // background: red !important;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
.top {
|
|
|
height: 146px;
|
|
|
width: 970px;
|
|
|
@@ -380,6 +406,95 @@ export default {
|
|
|
left: 431px;
|
|
|
}
|
|
|
}
|
|
|
+ .userContent {
|
|
|
+ padding: 0 16px;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .text {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .img4 {
|
|
|
+ width: 78px;
|
|
|
+ height: 78px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .box2 {
|
|
|
+ width: 288px;
|
|
|
+ margin-right: 50px;
|
|
|
+ .name {
|
|
|
+ .flex();
|
|
|
+ margin-top: 5px;
|
|
|
+ .name1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .name2 {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .box3 {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .box4 {
|
|
|
+ display: flex;
|
|
|
+ .text4 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-button {
|
|
|
+ background-color: transparent;
|
|
|
+ min-width: 76px;
|
|
|
+ height: 28px;
|
|
|
+
|
|
|
+ &.prim {
|
|
|
+ .line(@radius:28px);
|
|
|
+ text-align: center;
|
|
|
+ /deep/span {
|
|
|
+ color: @prim;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ .flex();
|
|
|
+ .imgBox1 {
|
|
|
+ width: 140px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.content {
|
|
|
padding: 0 16px;
|
|
|
.name {
|
