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

优化uploader页面

pull/19/head
zyronon 4 years ago
parent
a16d3c9dac
commit
4a36eec3fc
2 changed files with 70 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 63
      src/pages/me/Uploader.less
  2. 95
      src/pages/me/Uploader.vue

63
src/pages/me/Uploader.less
Unescape View File

@ -360,24 +360,71 @@ @@ -360,24 +360,71 @@
.my-buttons {
display: flex;
justify-content: space-between;
align-items: center;
@width: 3.6rem;
.no-follow {
color: white;
border-radius: .2rem;
background: @primary-btn-color;
flex: 1;
height: @width;
display: flex;
align-items: center;
justify-content: center;
margin-right: .5rem;
box-sizing: border-box;
.button {
span {
margin-left: .2rem;
}
}
.followed {
flex: 1;
display: flex;
justify-content: space-around;
align-items: center;
.l-button {
color: white;
border-radius: .2rem;
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);
}
}
}
.option {
position: relative;
width: 32%;
width: @width;
height: @width;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: .2rem;
background: @second-btn-color;
height: 3rem;
color: white;
}
img {
@width: 1.6rem;
width: @width;
height: @width;
}
img {
@width: 1.6rem;
width: @width;
height: @width;
}
}

95
src/pages/me/Uploader.vue
Unescape View File

@ -51,12 +51,11 @@ @@ -51,12 +51,11 @@
<span>抖音号：605128307</span>
<img src="../../assets/img/icon/me/qrcode-gray.png" alt="" @click.stop="$nav('/my-card')">
</div>
<div class="signature f12" @click="$nav('/edit-userinfo-item',{type:3})">
<div class="signature f12">
<template v-if="!userinfo.desc">
<span>点击添加介绍，让大家认识你...</span>
<img src="../../assets/img/icon/me/write-gray.png" alt="">
</template>
<span v-else class="text">{{ userinfo.desc }}</span>
</div>
<div class="more">
<div class="age item" v-if="userinfo.birthday">
@ -90,18 +89,20 @@ @@ -90,18 +89,20 @@
</div>
</div>
<div class="my-buttons">
<div class="">
<div class="button" @click="$nav('/edit-userinfo')">
<img src="../../assets/img/icon/add-white.png" alt="">
<div class="no-follow" v-if="false">
<img src="../../assets/img/icon/add-white.png" alt="">
<span>关注</span>
</div>
<div class="followed" v-else>
<div class="l-button">
<span>已关注</span>
<img src="../../assets/img/icon/arrow-up-white.png" alt="">
</div>
<div class="l-button">
<span>私信</span>
</div>
<!-- <div class="button" @click="$nav('/edit-userinfo')">-->
<!-- <span>编辑资料</span>-->
<!-- </div>-->
<!-- <div class="button" @click="$nav('/edit-userinfo')">-->
<!-- <span>主页访客</span>-->
<!-- </div>-->
</div>
<div class="button" @click="$nav('/find-acquaintance')">
<div class="option">
<img src="../../assets/img/icon/arrow-up-white.png" alt="">
</div>
</div>
@ -109,8 +110,8 @@ @@ -109,8 +110,8 @@
</div>
<Indicator
name="videoList"
tabStyleWidth="25%"
:tabTexts="['作品','私密','喜欢','收藏']"
tabStyleWidth="50%"
:tabTexts="['作品','喜欢']"
v-model:active-index="contentIndex">
</Indicator>
<SlideRowList
@ -125,17 +126,6 @@ @@ -125,17 +126,6 @@
<Loading v-if="loadings.loading0" :is-full-screen="false"></Loading>
<no-more v-else/>
</SlideItem>
<SlideItem class="SlideItem"
@scroll="scroll"
:style="SlideItemStyle">
<div class="notice">
<img src="../../assets/img/icon/me/lock-gray.png" alt="">
<span>只有你能看到设为私密的作品和日常</span>
</div>
<Posters v-if="videos.private.total !== -1" mode="private" :list="videos.private.list"></Posters>
<Loading v-if="loadings.loading1" :is-full-screen="false"></Loading>
<no-more v-else/>
</SlideItem>
<SlideItem class="SlideItem"
@scroll="scroll"
:style="SlideItemStyle">
@ -147,61 +137,6 @@ @@ -147,61 +137,6 @@
<Loading v-if="loadings.loading2" :is-full-screen="false"></Loading>
<no-more v-else/>
</SlideItem>
<SlideItem class="SlideItem"
@scroll="scroll"
:style="SlideItemStyle">
<div class="notice">
<img src="../../assets/img/icon/me/lock-gray.png" alt="">
<span>只有你能看到自己的收藏列表</span>
</div>
<div class="collect" ref="collect">
<div class="video" v-if=" videos.collect.video.list.length">
<div class="top">
<div class="left">
<img src="../../assets/img/icon/me/video-whitegray.png" alt="">
<span>视频</span>
</div>
<div class="right">
<span>全部</span>
<back direction="right"></back>
</div>
</div>
<div class="list">
<div class="item"
v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
<img class="poster" :src="$imgPreview(i.poster)" alt="">
<div class="num">
<img class="love" src="../../assets/img/icon/love.svg" alt="">
<span>{{ $likeNum(i.likeNum) }}</span>
</div>
</div>
</div>
</div>
<div class="audio" v-if=" videos.collect.video.list.length">
<div class="top">
<div class="left">
<img src="../../assets/img/icon/me/music-whitegray.png" alt="">
<span>音乐</span>
</div>
<div class="right">
<span>全部</span>
<back direction="right"></back>
</div>
</div>
<div class="list">
<div class="item"
v-for="i in videos.collect.video.list.length>3?videos.collect.video.list.slice(0,3):videos.collect.video.list">
<img class="poster" :src="$imgPreview(i.poster)" alt="">
<div class="title">用户创作的原声用户创作的原声用户创作的原声
</div>
</div>
</div>
</div>
</div>
<Loading v-if="loadings.loading3" :is-full-screen="false"></Loading>
<no-more v-else/>
</SlideItem>
</SlideRowList>
</div>
<transition name="fade">

Write Preview
Loading…
Cancel
Save