|
@@ -328,14 +328,16 @@ function goDetails(item){
|
|
<div class="author-popup">
|
|
<div class="author-popup">
|
|
<div class="title">作者详情</div>
|
|
<div class="title">作者详情</div>
|
|
<div class="authorList-box" v-for="(item, index) in authorInfoList" :key="index">
|
|
<div class="authorList-box" v-for="(item, index) in authorInfoList" :key="index">
|
|
- <div class="img-list-box" @click="goDetails(item)">
|
|
|
|
- <img
|
|
|
|
- :src="item?.headImgUrl|| defaultImg"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
- <div class="name-list-box" @click="goDetails(item)">
|
|
|
|
- {{ item.name }}
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="user-box">
|
|
|
|
+ <div class="img-list-box" @click="goDetails(item)">
|
|
|
|
+ <img
|
|
|
|
+ :src="item?.headImgUrl|| defaultImg"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="name-list-box" @click="goDetails(item)">
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<div
|
|
<div
|
|
@click="changeFollowStateList(item)"
|
|
@click="changeFollowStateList(item)"
|
|
:class="['opt-btn', item.following === 'following' ? 'following' : '']"
|
|
:class="['opt-btn', item.following === 'following' ? 'following' : '']"
|
|
@@ -567,26 +569,31 @@ function goDetails(item){
|
|
.authorList-box {
|
|
.authorList-box {
|
|
margin: 20px 0;
|
|
margin: 20px 0;
|
|
display: flex;
|
|
display: flex;
|
|
- gap: 0 20px;
|
|
|
|
|
|
+ justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
- .img-list-box {
|
|
|
|
- width: 78px;
|
|
|
|
- height: 78px;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- overflow: hidden;
|
|
|
|
- img {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ .user-box {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .img-list-box {
|
|
|
|
+ width: 78px;
|
|
|
|
+ height: 78px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .name-list-box {
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ width: 100px;
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .name-list-box {
|
|
|
|
- width: 100px;
|
|
|
|
- -webkit-box-orient: vertical;
|
|
|
|
- overflow: hidden;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
.opt-btn {
|
|
.opt-btn {
|
|
- margin-left: 30%;
|
|
|
|
min-width: 160px;
|
|
min-width: 160px;
|
|
height: 40px;
|
|
height: 40px;
|
|
padding: 5px 10px;
|
|
padding: 5px 10px;
|