pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

pull/29/head
zyronon 3 years ago
parent
16d5cfa089
commit
e95d08674e
2 changed files with 265 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 476
      src/components/UserPanel.vue
  2. 13
      src/pages/slideHooks/Shop.vue

476
src/components/UserPanel.vue
Unescape View File

@ -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 class="item">
<img src="@/assets/img/icon/people/address-book.png" alt="">
<div class="right">
<div class="top">粉丝群</div>
<div class="bottom">1个群聊</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="my-buttons"> <div class="my-buttons">
<div class="follow-display"> <div class="follow-display">
<div class="follow-wrapper" :class="state.localAuthor.is_follow ? 'follow-wrapper-followed' : ''"> <div class="follow-wrapper" :class="state.localAuthor.is_follow ? 'follow-wrapper-followed' : ''">
<div class="no-follow" @click="state.localAuthor.is_follow = true"> <div class="no-follow" @click="state.localAuthor.is_follow = true">
<img src="@/assets/img/icon/add-white.png" alt=""> <img src="@/assets/img/icon/add-white.png" alt="">
<span>关注</span> <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>
<div class="followed"> <div class="l-button" @click="$nav('/message/chat')">
<div class="l-button" @click="$emit('showFollowSetting2')"> <span>私信</span>
<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>
</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>
<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="recommend" :class="{hidden:!state.isShowRecommend}">
<div class="title"> <div class="title">
<span>你可能感兴趣</span> <span>你可能感兴趣</span>
<img src="@/assets/img/icon/about-gray.png"> <img src="@/assets/img/icon/about-gray.png">
</div> </div>
<div class="friends" <div class="friends"
@touchmove="stop"> @touchmove="stop">
<div class="friend" v-for="item in friends.all"> <div class="friend" v-for="item in friends.all">
<img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt=""> <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<span class="tips">可能感兴趣的人</span> <span class="tips">可能感兴趣的人</span>
<b-button type="primary">关注</b-button> <b-button type="primary">关注</b-button>
<div class="close"> <div class="close">
<dy-back img="close" scale=".6"></dy-back> <dy-back img="close" scale=".6"></dy-back>
</div>
</div> </div>
<div class="more" @click="$nav('/people/find-acquaintance')"> </div>
<div class="notice"> <div class="more" @click="$nav('/people/find-acquaintance')">
<div>点击查看</div> <div class="notice">
<div>更多好友</div> <div>点击查看</div>
</div> <div>更多好友</div>
</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; display: flex;
flex-shrink: 0;
img { img {
margin-right: 8rem; margin-right: 8rem;
border-radius: 4rem; border-radius: 4rem;
background: @second-btn-color-tran; background: @second-btn-color-tran;
padding: 8rem; padding: 8rem;
height: 22rem; height: 22rem;
} }
.right { .right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
.top { .top {
color: white; color: white;
font-size: 14rem; font-size: 14rem;
} }
.bottom { .bottom {
color: @second-text-color; color: @second-text-color;
font-size: 12rem; 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-followed {
transform: translate3d(-50%, 0, 0);
}
.follow-wrapper { .no-follow {
width: 200%; 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 {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
.l-button { img {
color: white; transform: rotate(180deg);
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; width: @width;
height: @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 { .option {
.arrow { position: relative;
transform: rotate(0deg); 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 { .loading {
@width: 12rem; @width: 12rem;
width: @width; width: @width;
height: @width; height: @width;
animation: rotate .6s linear infinite; animation: rotate .6s linear infinite;
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0deg) transform: rotate(0deg)
} }
to { to {
transform: rotate(360deg) transform: rotate(360deg)
}
} }
} }
}
.arrow { .arrow {
transition: transform .3s ease; transition: transform .3s ease;
transform: rotate(180deg); transform: rotate(180deg);
@width: 16rem; @width: 16rem;
width: @width; width: @width;
height: @width; height: @width;
}
} }
}
.recommend { .recommend {
transition: all .3s ease; transition: all .3s ease;
height: 230rem; height: 250rem;
overflow: hidden; overflow: hidden;
margin-bottom: 20rem;
&.hidden { &.hidden {
height: 0; height: 0;
} }
.title { .title {
font-size: 12rem; padding-left: 20rem;
color: @second-text-color; font-size: 12rem;
display: flex; color: @second-text-color;
align-items: center; display: flex;
align-items: center;
img { img {
margin-left: 3rem; margin-left: 3rem;
width: 13rem; width: 13rem;
height: 13rem; height: 13rem;
}
} }
}
.friends { .friends {
margin-top: 10rem; padding-left: 20rem;
display: flex; margin-top: 10rem;
overflow-x: scroll; display: flex;
overflow-x: scroll;
margin-bottom: 20rem;
.friend { .friend {
position: relative; position: relative;
background: @second-btn-color-tran; background: @second-btn-color-tran;
margin-right: 10rem; margin-right: 10rem;
padding: 10rem; padding: 10rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.avatar { .avatar {
@width: 100rem; @width: 100rem;
border-radius: 50%; border-radius: 50%;
width: @width; width: @width;
height: @width; height: @width;
} }
.name { .name {
margin-top: 10rem; margin-top: 10rem;
font-size: 12rem; font-size: 12rem;
color: white; color: white;
} }
.tips { .tips {
margin-top: 5rem; margin-top: 5rem;
font-size: 12rem; font-size: 12rem;
color: @second-text-color; color: @second-text-color;
} }
.button { .button {
margin-top: 10rem; margin-top: 10rem;
width: 150rem; width: 150rem;
height: 26rem; height: 26rem;
font-size: 12rem; font-size: 12rem;
} }
.close { .close {
position: absolute; position: absolute;
top: 2rem; top: 2rem;
right: 2rem; right: 2rem;
}
} }
}
.more { .more {
.notice { .notice {
width: 100rem; width: 100rem;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @second-text-color; color: @second-text-color;
}
} }
} }
} }

13
src/pages/slideHooks/Shop.vue
Unescape View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "Shop"
}
</script>
<style scoped>
</style>
Write Preview
Loading…
Cancel
Save