MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debug

Browse Source
This commit is contained in:
zyronon 2021-10-10 02:19:01 +08:00
parent 4a31283ada
commit 658ee3d522
9 changed files with 83 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/icon/message/setting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
src/assets/img/icon/msg-icon5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
src/assets/img/icon/msg-icon6.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 616 B

BIN
src/assets/img/icon/msg-icon7.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 B

BIN
src/assets/img/icon/people/address-book.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

6
src/components/Search.vue
View File

@ -2,10 +2,11 @@
<div class="search-ctn" :class="mode">
<div class="search">
<img v-if="isShowSearchIcon" class="search-icon" src="../assets/img/icon/search-gray.png" alt="">
<input type="text" :placeholder="placeholder" v-model="value" >
<input type="text" :placeholder="placeholder" v-model="value">
<div class="suffix">
<slot v-if="$slots.default"></slot>
<img v-if="value.length && (!$slots.default)" src="../assets/img/icon/login/close-full-gray.png" @click.stop="clear">
<img v-if="value.length && (!$slots.default)" src="../assets/img/icon/login/close-full-gray.png"
@click.stop="clear">
</div>
</div>
<div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">{{ showText }}</div>
@ -13,6 +14,7 @@
</template>
<script>
//TODO　背景颜色不对
export default {
name: "Search",
props: {

22
src/pages/message/Fans.vue
View File

@ -6,7 +6,14 @@
</template>
</BaseHeader>
<div class="content">
<People v-for="item in friends.all" :people="item"></People>
<People v-for="item in friends.all" :people="item" mode="fans"></People>
<div class="line mt1r"></div>
<div class="title">
<span>朋友推荐</span>
<img src="../../assets/img/icon/about-gray.png" alt="">
</div>
<People v-for="item in friends.all" :people="item" mode="recommend"></People>
</div>
</div>
</template>
@ -50,6 +57,19 @@ export default {
.content {
padding: @padding-page;
padding-top: 6rem;
.title {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1.2rem;
display: flex;
align-items: center;
img {
margin-left: .5rem;
width: 1.3rem;
}
}
}
}
</style>

43
src/pages/people/FindAcquaintance.vue
View File

@ -5,13 +5,13 @@
<Indicator
style="width: 50%;"
tabStyleWidth="40%"
:tabTexts="['发现熟人','熟人列表']"
:tabTexts="['发现朋友','熟人列表']"
v-model:active-index="currentSlideItemIndex">
</Indicator>
<img src="../../assets/img/icon/menu-gray.png" alt="" class="option" @click="moreOptionDialog = true">
</div>
<SlideRowList v-model:active-index="currentSlideItemIndex">
<SlideItem class="tab1">
<SlideItem class="tab1" style="overflow: auto;">
<div class="mr2r ml2r mt1r">
<Search v-if="!isShowText"
placeholder="搜索用户名字/抖音号"
@ -24,13 +24,13 @@
</div>
<div class="no-search" v-if="!isShowText">
<div class="look-address-list" @click="findAddressListDialog = true">
<img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
<img class="left" src="../../assets/img/icon/people/address-book.png" alt="">
<div class="right">
<div class="notice">
<div class="text1">查看通讯录朋友</div>
<div class="text2">看看谁在抖音</div>
<div class="text2">看看有谁在抖音</div>
</div>
<back scale="1" direction="right"></back>
<back direction="right"></back>
</div>
</div>
<div class="line"></div>
@ -38,21 +38,22 @@
朋友推荐
<img src="../../assets/img/icon/about-gray.png" style="width: 1rem;margin-left: .2rem;">
</div>
<People v-for="item in list " :people="item"></People>
<People v-for="item in friends.all " :people="item" mode="recommend"></People>
</div>
<div class="is-search" v-else>
<div class="tooltip" v-if="searchKey && !isSearch">
<img src="../../assets/img/icon/close.svg" style="width: 1rem;">
搜索用户名字/抖音号：<span class="searchKey">{{ searchKey }}</span>
</div>
<People v-if="isSearch" v-for="item in list " :people="item"></People>
<!-- TODO -->
<People v-if="isSearch" v-for="item in friends.all " :people="item" mode="recommend"></People>
</div>
</SlideItem>
<SlideItem class="tab2">
<SlideItem class="tab2" style="overflow: auto;">
<Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
<div class="title">我的好友（互相关注）</div>
<People v-for="item in list " :people="item"></People>
<NoMore></NoMore>
<div class="title">{{ friends.all.length }} 位朋友</div>
<People v-for="item in friends.all " :people="item" mode="friend"></People>
<NoMore class="mb5r"/>
</SlideItem>
</SlideRowList>
@ -132,6 +133,7 @@ import People from './components/People'
import Search from '../../components/Search'
import Indicator from '../../components/slide/Indicator'
import FromBottomDialog from "../../components/dialog/FromBottomDialog";
import {mapState} from "vuex";
export default {
name: "FindAcquaintance",
@ -179,7 +181,8 @@ export default {
set() {
this.findAddressListDialog = this.outWebImgAccountDialog = false
}
}
},
...mapState(['friends'])
},
mounted() {
},
@ -242,7 +245,8 @@ export default {
padding: 2rem;
.title {
margin-top: 2rem;
margin-top: @padding-page;
margin-bottom: 1rem;
color: @second-text-color;
font-size: 1.2rem;
}
@ -272,11 +276,11 @@ export default {
align-items: center;
.left {
background: @second-btn-color;
background: @second-btn-color-tran;
border-radius: 50%;
padding: 1rem;
width: 2.4rem;
margin-right: 1.8rem;
padding: 1.2rem;
width: 2.2rem;
margin-right: 1.5rem;
}
.right {
@ -286,13 +290,12 @@ export default {
align-items: center;
img {
height: 2rem;
width: 1.4rem;
}
.notice {
.text1 {
font-size: 1.6rem;
font-size: 1.4rem;
margin-bottom: .5rem;
}

46
src/pages/people/components/People.vue
View File

@ -7,14 +7,15 @@
<template v-if="mode === 'fans'">
<div class="left">
<div class="name">{{ people.name }}</div>
<div class="detail">
<div class="name">
<template v-if="people.type === RELATE_ENUM.REQUEST_FOLLOW">
发来一个关注请求
</template>
<template v-else>
该用户关注了你
关注了你
</template>
</div>
<div class="detail">07-23</div>
</div>
<div class="right">
<!-- 他关注我 -->
@ -37,8 +38,29 @@
</div>
</template>
<template v-if="mode === 'recommend'">
<div class="left">
<div class="name">{{ people.name }}</div>
<div class="detail">可能认识的人</div>
</div>
<div class="right">
<div class="l-button ">移除</div>
<div class="l-button red">关注</div>
</div>
</template>
<template v-if="mode === 'friend'">
<div class="left">
<div class="name">{{ people.name }}</div>
<div class="detail">4小时之内在线</div>
</div>
<div class="right">
<div class="l-button">发私信</div>
<img src="../../../assets/img/icon/menu-white.png" alt="" @click="showPopover = !showPopover">
</div>
</template>
</div>
<!-- TODO 点了不消失，内容也变了 -->
<transition name="scale">
<div class="popover" v-if="people.type === 4 && showPopover">
<div class="arrow"></div>
@ -112,8 +134,8 @@ export default {
.head-image {
margin-right: 1.5rem;
width: 4.8rem;
height: 4.8rem;
width: 4.5rem;
height: 4.5rem;
border-radius: 50%;
}
@ -134,7 +156,8 @@ export default {
.left {
.name {
font-size: 1.6rem;
font-size: 1.2rem;
margin-bottom: .2rem;
color: white;
}
@ -151,16 +174,17 @@ export default {
.l-button {
margin-left: .8rem;
padding: .5rem 2rem;
border-radius: .2rem;
background: rgb(58, 58, 67);
font-size: 1.2rem;
padding: .4rem 0;
display: flex;
align-items: center;
justify-content: center;
width: 5.5rem;
&:only-child {
background: yellow;
}
&.address-list {
padding: .7rem 3rem;
width: 7rem;
}
&.red {