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

优化分享朋友弹窗

Browse Source
This commit is contained in:
zyronon 2021-09-17 21:54:38 +08:00
parent 65e758a09c
commit 63d3bb20a2
1 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/home/components/ShareToFriend.vue
View File

@ -4,14 +4,13 @@
@cancel="cancel"
:height="height">
<div class="content" :style="{minHeight:height}">
<div class="create-chat-wrapper" v-show="!showJoinedChat">
<div class="create-chat" v-show="!showJoinedChat">
<Search
:isShowText="isShowText"
@click="isShowText = true;height = '100vh';"
@notice="isShowText = false;height = '70vh';"
showText="取消"
notice="gray"
class="ml2r mr2r"
placeholder="搜索"
v-model="searchKey"/>
<template v-if="searchKey">
@ -46,7 +45,7 @@
</div>
</template>
<template v-else>
<div class="joined-chat" @click="showJoinedChat = true">
<div class="joined-chat-group-nav" @click="showJoinedChat = true">
<img class="left" src="../../../assets/img/icon/people-gray.png" alt="">
<div class="right">
<span>已加入的群聊</span>
@ -67,7 +66,7 @@
</div>
</template>
</div>
<div class="joined-chat-wrapper" v-show="showJoinedChat">
<div class="joined-chat-group" v-show="showJoinedChat">
<div class="nav">
<back @click="showJoinedChat = false" mode="light" scale="1"></back>
<span>已加入的群聊</span>
@ -115,7 +114,7 @@ export default {
height: '70vh',
showJoinedChat: false,
isShowText: false,
text:'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
text: 'AAAAAAA、BBBBBBBB、CCCCCCCCCCCCC',
localFriends: [],
searchResult: [],
searchKey: '',
@ -170,8 +169,10 @@ export default {
height: 2.6rem;
}
@avatar-width: 3.8rem;
.friend-list {
padding: 0 2rem;
padding: 0 1.5rem;
.index {
color: @second-text-color;
@ -191,10 +192,10 @@ export default {
}
.left {
width: 3.8rem;
height: 3.8rem;
width: @avatar-width;
height: @avatar-width;
border-radius: 50%;
margin-right: 1rem;
margin-right: 1.5rem;
}
.right {
@ -213,22 +214,25 @@ export default {
.content {
.create-chat-wrapper {
.create-chat {
padding-bottom: 4rem;
background: @main-bg;
.joined-chat {
.search-ctn {
padding: 0 1.5rem;
}
.joined-chat-group-nav {
border-bottom: 1px solid @line-color;
height: 5rem;
padding: 0 2rem;
padding: 0 1.5rem;
display: flex;
align-items: center;
.left {
width: 2.2rem;
height: 2.2rem;
margin-left: 1rem;
margin-right: 2rem;
margin-right: 1rem;
}
.right {
@ -240,7 +244,6 @@ export default {
}
}
.btn-wrapper {
position: fixed;
bottom: 0;
@ -289,18 +292,18 @@ export default {
}
}
.joined-chat-wrapper {
.joined-chat-group {
background: @main-bg;
.nav {
font-size: 1.6rem;
padding: 2rem;
padding: 1.5rem;
display: flex;
justify-content: space-between;
}
.chat-list {
padding: 0 2rem;
padding: 0 1.5rem;
.chat-item {
margin-bottom: 2rem;
@ -318,10 +321,10 @@ export default {
}
.left {
width: 3.8rem;
height: 3.8rem;
width: @avatar-width;
height: @avatar-width;
border-radius: 50%;
margin-right: 1rem;
margin-right: 1.5rem;
}
.right {