优化
This commit is contained in:
zyronon
parent
16d5cfa089
commit
e95d08674e
@ -90,76 +90,92 @@
|
|||||||
{{ state.localAuthor.school?.name }}
|
{{ state.localAuthor.school?.name }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="other">
|
<div class="other">
|
||||||
|
<div class="scroll-x" @touchmove="stop">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<img src="@/assets/img/icon/me/shopping-cart-white.png" alt="">
|
<img src="@/assets/img/icon/me/shopping-cart-white.png" alt="">
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="top">抖音商城</div>
|
<div class="top">进入橱窗</div>
|
||||||
<div class="bottom">发现超值好物</div>
|
<div class="bottom">9件好物</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="@/assets/img/icon/me/play.png" alt="">
|
||||||
|
<div class="right">
|
||||||
|
<div class="top">直播动态</div>
|
||||||
|
<div class="bottom">可预约明天直播</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<img src="@/assets/img/icon/me/music-white.png" alt="">
|
<img src="@/assets/img/icon/me/music-white.png" alt="">
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="top">我的音乐</div>
|
<div class="top">Ta的音乐</div>
|
||||||
<div class="bottom">已收藏20首</div>
|
<div class="bottom">听听ta的歌单</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="item">
|
||||||
|
<img src="@/assets/img/icon/people/address-book.png" alt="">
|
||||||
<div class="my-buttons">
|
<div class="right">
|
||||||
<div class="follow-display">
|
<div class="top">粉丝群</div>
|
||||||
<div class="follow-wrapper" :class="state.localAuthor.is_follow ? 'follow-wrapper-followed' : ''">
|
<div class="bottom">1个群聊</div>
|
||||||
<div class="no-follow" @click="state.localAuthor.is_follow = true">
|
|
||||||
<img src="@/assets/img/icon/add-white.png" alt="">
|
|
||||||
<span>关注</span>
|
|
||||||
</div>
|
|
||||||
<div class="followed">
|
|
||||||
<div class="l-button" @click="$emit('showFollowSetting2')">
|
|
||||||
<span>已关注</span>
|
|
||||||
<img src="@/assets/img/icon/arrow-up-white.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="l-button" @click="$nav('/message/chat')">
|
|
||||||
<span>私信</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="option"
|
|
||||||
:class="state.isShowRecommend?'option-recommend':''"
|
|
||||||
@click="state.isShowRecommend = !state.isShowRecommend">
|
|
||||||
<img v-if="state.loadings.showRecommend" class="loading" src="@/assets/img/icon/loading-gray.png"
|
|
||||||
alt="">
|
|
||||||
<img v-else class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="recommend" :class="{hidden:!state.isShowRecommend}">
|
|
||||||
<div class="title">
|
|
||||||
<span>你可能感兴趣</span>
|
|
||||||
<img src="@/assets/img/icon/about-gray.png">
|
|
||||||
</div>
|
|
||||||
<div class="friends"
|
|
||||||
@touchmove="stop">
|
|
||||||
<div class="friend" v-for="item in friends.all">
|
|
||||||
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
|
|
||||||
<span class="name">{{ item.name }}</span>
|
|
||||||
<span class="tips">可能感兴趣的人</span>
|
|
||||||
<b-button type="primary">关注</b-button>
|
|
||||||
<div class="close">
|
|
||||||
<dy-back img="close" scale=".6"></dy-back>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="more" @click="$nav('/people/find-acquaintance')">
|
|
||||||
<div class="notice">
|
|
||||||
<div>点击查看</div>
|
|
||||||
<div>更多好友</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="my-buttons">
|
||||||
|
<div class="follow-display">
|
||||||
|
<div class="follow-wrapper" :class="state.localAuthor.is_follow ? 'follow-wrapper-followed' : ''">
|
||||||
|
<div class="no-follow" @click="state.localAuthor.is_follow = true">
|
||||||
|
<img src="@/assets/img/icon/add-white.png" alt="">
|
||||||
|
<span>关注</span>
|
||||||
|
</div>
|
||||||
|
<div class="followed">
|
||||||
|
<div class="l-button" @click="$emit('showFollowSetting2')">
|
||||||
|
<span>已关注</span>
|
||||||
|
<img src="@/assets/img/icon/arrow-up-white.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="l-button" @click="$nav('/message/chat')">
|
||||||
|
<span>私信</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="option"
|
||||||
|
:class="state.isShowRecommend?'option-recommend':''"
|
||||||
|
@click="state.isShowRecommend = !state.isShowRecommend">
|
||||||
|
<img v-if="state.loadings.showRecommend" class="loading" src="@/assets/img/icon/loading-gray.png"
|
||||||
|
alt="">
|
||||||
|
<img v-else class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recommend" :class="{hidden:!state.isShowRecommend}">
|
||||||
|
<div class="title">
|
||||||
|
<span>你可能感兴趣</span>
|
||||||
|
<img src="@/assets/img/icon/about-gray.png">
|
||||||
|
</div>
|
||||||
|
<div class="friends"
|
||||||
|
@touchmove="stop">
|
||||||
|
<div class="friend" v-for="item in friends.all">
|
||||||
|
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
|
||||||
|
<span class="name">{{ item.name }}</span>
|
||||||
|
<span class="tips">可能感兴趣的人</span>
|
||||||
|
<b-button type="primary">关注</b-button>
|
||||||
|
<div class="close">
|
||||||
|
<dy-back img="close" scale=".6"></dy-back>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="more" @click="$nav('/people/find-acquaintance')">
|
||||||
|
<div class="notice">
|
||||||
|
<div>点击查看</div>
|
||||||
|
<div>更多好友</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="total" ref="total">
|
<div class="total" ref="total">
|
||||||
作品 62
|
作品 62
|
||||||
<img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
|
<img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
|
||||||
@ -276,9 +292,10 @@ onMounted(() => {
|
|||||||
state.videos.my.total = resource.my.length
|
state.videos.my.total = resource.my.length
|
||||||
})
|
})
|
||||||
|
|
||||||
function stop(e){
|
function stop(e) {
|
||||||
e.stopPropagation()
|
e.stopPropagation()
|
||||||
}
|
}
|
||||||
|
|
||||||
function followButton() {
|
function followButton() {
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -669,240 +686,251 @@ function touchEnd(e) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.other {
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.other {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.scroll-x {
|
||||||
|
padding-left: 20rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 20rem;
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
margin-right: 25rem;
|
margin-right: 25rem;
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 8rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
background: @second-btn-color-tran;
|
||||||
|
padding: 8rem;
|
||||||
|
height: 22rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
img {
|
.top {
|
||||||
margin-right: 8rem;
|
color: white;
|
||||||
border-radius: 4rem;
|
font-size: 14rem;
|
||||||
background: @second-btn-color-tran;
|
|
||||||
padding: 8rem;
|
|
||||||
height: 22rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.bottom {
|
||||||
display: flex;
|
color: @second-text-color;
|
||||||
justify-content: space-between;
|
font-size: 12rem;
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.top {
|
|
||||||
color: white;
|
|
||||||
font-size: 14rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
color: @second-text-color;
|
|
||||||
font-size: 12rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.my-buttons {
|
.my-buttons {
|
||||||
margin-top: 20rem;
|
margin: 20rem;
|
||||||
margin-bottom: 20rem;
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
@width: 36rem;
|
||||||
|
|
||||||
|
.follow-display {
|
||||||
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
@width: 36rem;
|
|
||||||
|
|
||||||
.follow-display {
|
.follow-wrapper {
|
||||||
flex: 1;
|
width: 200%;
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
transition: all .3s ease;
|
||||||
|
|
||||||
.follow-wrapper {
|
&.follow-wrapper-followed {
|
||||||
width: 200%;
|
transform: translate3d(-50%, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-follow {
|
||||||
|
width: calc(100% - 5rem);
|
||||||
|
color: white;
|
||||||
|
border-radius: 4rem;
|
||||||
|
background: @primary-btn-color;
|
||||||
|
height: @width;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: nowrap;
|
align-items: center;
|
||||||
transition: all .3s ease;
|
justify-content: center;
|
||||||
|
margin-right: 5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
&.follow-wrapper-followed {
|
span {
|
||||||
transform: translate3d(-50%, 0, 0);
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.no-follow {
|
.followed {
|
||||||
width: calc(100% - 5rem);
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.l-button {
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 4rem;
|
border-radius: 4rem;
|
||||||
background: @primary-btn-color;
|
background: @second-btn-color;
|
||||||
height: @width;
|
height: @width;
|
||||||
|
width: 50%;
|
||||||
|
margin-right: 5rem;
|
||||||
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-right: 5rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.followed {
|
img {
|
||||||
width: 100%;
|
transform: rotate(180deg);
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.l-button {
|
|
||||||
color: white;
|
|
||||||
border-radius: 4rem;
|
|
||||||
background: @second-btn-color;
|
|
||||||
height: @width;
|
|
||||||
width: 50%;
|
|
||||||
margin-right: 5rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
|
||||||
@width: 14rem;
|
|
||||||
width: @width;
|
|
||||||
height: @width;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.option {
|
img {
|
||||||
position: relative;
|
@width: 14rem;
|
||||||
width: @width;
|
|
||||||
height: @width;
|
|
||||||
font-size: 12rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 4rem;
|
|
||||||
background: @second-btn-color;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
&.option-recommend {
|
|
||||||
.arrow {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading {
|
|
||||||
@width: 12rem;
|
|
||||||
width: @width;
|
|
||||||
height: @width;
|
|
||||||
animation: rotate .6s linear infinite;
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg)
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
transition: transform .3s ease;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
@width: 16rem;
|
|
||||||
width: @width;
|
width: @width;
|
||||||
height: @width;
|
height: @width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.recommend {
|
.option {
|
||||||
transition: all .3s ease;
|
position: relative;
|
||||||
height: 230rem;
|
width: @width;
|
||||||
overflow: hidden;
|
height: @width;
|
||||||
|
font-size: 12rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4rem;
|
||||||
|
background: @second-btn-color;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&.option-recommend {
|
||||||
|
.arrow {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
@width: 12rem;
|
||||||
|
width: @width;
|
||||||
|
height: @width;
|
||||||
|
animation: rotate .6s linear infinite;
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg)
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
transition: transform .3s ease;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
@width: 16rem;
|
||||||
|
width: @width;
|
||||||
|
height: @width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend {
|
||||||
|
transition: all .3s ease;
|
||||||
|
height: 250rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding-left: 20rem;
|
||||||
|
font-size: 12rem;
|
||||||
|
color: @second-text-color;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-left: 3rem;
|
||||||
|
width: 13rem;
|
||||||
|
height: 13rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.friends {
|
||||||
|
padding-left: 20rem;
|
||||||
|
margin-top: 10rem;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: scroll;
|
||||||
margin-bottom: 20rem;
|
margin-bottom: 20rem;
|
||||||
|
|
||||||
&.hidden {
|
.friend {
|
||||||
height: 0;
|
position: relative;
|
||||||
}
|
background: @second-btn-color-tran;
|
||||||
|
margin-right: 10rem;
|
||||||
.title {
|
padding: 10rem;
|
||||||
font-size: 12rem;
|
|
||||||
color: @second-text-color;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
img {
|
.avatar {
|
||||||
margin-left: 3rem;
|
@width: 100rem;
|
||||||
width: 13rem;
|
border-radius: 50%;
|
||||||
height: 13rem;
|
width: @width;
|
||||||
|
height: @width;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-top: 10rem;
|
||||||
|
font-size: 12rem;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
margin-top: 5rem;
|
||||||
|
font-size: 12rem;
|
||||||
|
color: @second-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
margin-top: 10rem;
|
||||||
|
width: 150rem;
|
||||||
|
height: 26rem;
|
||||||
|
font-size: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
right: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.friends {
|
.more {
|
||||||
margin-top: 10rem;
|
.notice {
|
||||||
display: flex;
|
width: 100rem;
|
||||||
overflow-x: scroll;
|
height: 100%;
|
||||||
|
|
||||||
.friend {
|
|
||||||
position: relative;
|
|
||||||
background: @second-btn-color-tran;
|
|
||||||
margin-right: 10rem;
|
|
||||||
padding: 10rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
.avatar {
|
color: @second-text-color;
|
||||||
@width: 100rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: @width;
|
|
||||||
height: @width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
margin-top: 10rem;
|
|
||||||
font-size: 12rem;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tips {
|
|
||||||
margin-top: 5rem;
|
|
||||||
font-size: 12rem;
|
|
||||||
color: @second-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
margin-top: 10rem;
|
|
||||||
width: 150rem;
|
|
||||||
height: 26rem;
|
|
||||||
font-size: 12rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem;
|
|
||||||
right: 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
.notice {
|
|
||||||
width: 100rem;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: @second-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
13
src/pages/slideHooks/Shop.vue
Normal file
13
src/pages/slideHooks/Shop.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Shop"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user