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-07-20 02:07:38 +08:00
parent f0cbfffb5d
commit b6f0aeea91
6 changed files with 257 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/assets/scss/utils.scss
View File

@ -51,45 +51,45 @@
margin
*/
$margin: 50;
$margin: 5;
@while $margin >= 5 {
.ml#{$margin}p {
margin-left: #{$margin}px !important;
@while $margin >= 0 {
.ml#{$margin}r {
margin-left: #{$margin}rem !important;
}
$margin: $margin - 5;
$margin: $margin - 1;
}
$margin: 50;
@while $margin >= 5 {
.mr#{$margin}p {
margin-right: #{$margin}px !important;
$margin: 5;
@while $margin >= 0 {
.mr#{$margin}r {
margin-right: #{$margin}rem !important;
}
$margin: $margin - 5;
$margin: $margin - 1;
}
$margin: 50;
@while $margin >=5 {
.mt#{$margin}p {
margin-top: #{$margin}px !important;
$margin: 5;
@while $margin >=0 {
.mt#{$margin}r {
margin-top: #{$margin}rem !important;
}
$margin: $margin - 5;
$margin: $margin - 1;
}
$margin: 50;
@while $margin >= 5 {
.mb#{$margin}p {
margin-bottom: #{$margin}px !important;
$margin: 5;
@while $margin >= 0 {
.mb#{$margin}r {
margin-bottom: #{$margin}rem !important;
}
$margin: $margin - 5;
$margin: $margin - 1;
}
$margin: 50;
@while $margin >= 5 {
.m#{$margin}p {
margin: #{$margin}px !important;
$margin: 5;
@while $margin >= 0 {
.m#{$margin}r {
margin: #{$margin}rem !important;
}
$margin: $margin - 5;
$margin: $margin - 1;
}
@ -100,44 +100,44 @@ padding
*/
$padding: 50;
@while $padding >= 5 {
.pl#{$padding}p {
padding-left: #{$padding}px !important;
$padding: 5;
@while $padding >= 0 {
.pl#{$padding}r {
padding-left: #{$padding}rem !important;
}
$padding: $padding - 5;
$padding: $padding - 1;
}
$padding: 50;
@while $padding >= 5 {
.pr#{$padding}p {
padding-right: #{$padding}px !important;
$padding: 5;
@while $padding >= 0 {
.pr#{$padding}r {
padding-right: #{$padding}rem !important;
}
$padding: $padding - 5;
$padding: $padding - 1;
}
$padding: 50;
@while $padding >= 5 {
.pt#{$padding}p {
padding-top: #{$padding}px !important;
$padding: 5;
@while $padding >= 0 {
.pt#{$padding}r {
padding-top: #{$padding}rem !important;
}
$padding: $padding - 5;
$padding: $padding - 1;
}
$padding: 50;
@while $padding >= 5 {
.pb#{$padding}p {
padding-bottom: #{$padding}px !important;
$padding: 5;
@while $padding >= 0 {
.pb#{$padding}r {
padding-bottom: #{$padding}rem !important;
}
$padding: $padding - 5;
$padding: $padding - 1;
}
$padding: 50;
@while $padding >= 5 {
.p#{$padding}p {
padding: #{$padding}px !important;
$padding: 5;
@while $padding >= 0 {
.p#{$padding}r {
padding: #{$padding}rem !important;
}
$padding: $padding - 5;
$padding: $padding - 1;
}

50
src/components/Search.vue
View File

@ -1,8 +1,14 @@
<template>
<div class="search-ctn">
<div class="search">
<img src="../assets/img/icon/pause.svg" alt="">
<input type="text" :placeholder="placeholder" v-model="value">
<img v-if="value.length" class="close" src="../assets/img/icon/close.svg" @click="clear">
<img class="search-icon" src="../assets/img/icon/pause.svg" alt="">
<input autofocus 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/close.svg" @click="clear">
</div>
</div>
<div v-if="isShowText" class="notice" :style="{color : notice}" @click="$emit('notice')">搜索</div>
</div>
</template>
@ -18,12 +24,22 @@ export default {
type: String,
default: ''
},
notice: {
type: String,
default: 'red'
},
isShowText: {
type: Boolean,
default: false
},
},
methods: {
clear() {
this.value = ''
}
},
mounted() {
},
computed: {
value: {
get() {
@ -43,18 +59,28 @@ export default {
<style scoped lang="scss">
@import "../assets/scss/color";
.search-ctn {
display: flex;
align-items: center;
.notice {
margin-left: 2rem;
font-size: 1.6rem;
}
.search {
flex: 1;
position: relative;
height: 36px;
height: 3.6rem;
background: rgb(59, 59, 71);
border-radius: 2px;
display: flex;
align-items: center;
img {
height: 15px;
width: 15px;
margin: 0 10px;
.search-icon {
height: 1.5rem;
width: 1.5rem;
margin: 0 1rem;
}
input {
@ -71,11 +97,15 @@ export default {
}
}
.close {
.suffix {
position: absolute;
right: 0;
right: 2rem;
img {
width: 1rem;
}
}
}
}
</style>

2
src/pages/me/Me.vue
View File

@ -541,10 +541,8 @@ export default {
width: 25px;
margin-bottom: 15px;
}
}
}
}
.button-ctn {

27
src/pages/me/userinfo/ChooseSchool.vue
View File

@ -8,10 +8,11 @@
<span class="f14" @click="$nav('/declare-school',{type:1})">没有找到?</span>
</template>
<template v-slot:bottom>
<div class="search-ctn">
<Search placeholder="搜索大学名称" v-model="schoolName" @clear="isSearch = false"></Search>
<span class="search-btn" @click="search">搜索</span>
</div>
<Search class="mt1r mb1r ml2r mr2r" placeholder="搜索大学名称"
v-model="schoolName"
@clear="isSearch = false"
:is-show-text="true"
@notice="search"></Search>
</template>
</BaseHeader>
<div class="content">
@ -107,24 +108,6 @@ export default {
color: white;
overflow: auto;
.search-ctn {
background: $main-bg;
width: 100%;
box-sizing: border-box;
padding: 1rem 2rem;
display: flex;
align-items: center;
.search {
flex: 1;
}
.search-btn {
font-size: 1.4rem;
margin-left: 2rem;
color: $primary-btn-color;
}
}
.content {
padding-top: 12rem;

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

@ -1,7 +1,7 @@
<template>
<div class="FindAcquaintance">
<div class="header">
<img src="../../assets/img/icon/back.png" alt="" class="back" @click="$back">
<img src="../../assets/img/icon/back.png" alt="" class="back" @click="back">
<Indicator
style="width: 50%;"
tabStyleWidth="40%"
@ -11,14 +11,44 @@
<img src="../../assets/img/icon/back.png" alt="" class="option" @click="moreOptionDialog = true">
</div>
<SlideRowList v-model:active-index="currentSlideItemIndex" :style="{opacity : moreOptionDialog ? .5:1}">
<SlideItem>
<SlideItem class="tab1">
<Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
<div class="title">我的好友（互相关注）</div>
<People v-for="item in list " :people="item"></People>
<NoMore></NoMore>
</SlideItem>
<SlideItem>
<Search :key="1"></Search>
<SlideItem class="tab2">
<div class="mr2r ml2r mt1r">
<Search v-if="!isShowText" :is-show-text="false" @click="isShowText = true">
<img src="../../assets/img/icon/close.svg" style="width: 1rem;" @click.stop="t">
</Search>
<Search v-else v-model="searchKey" :is-show-text="true" @notice="search" @clear="isSearch = false"></Search>
</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="">
<div class="right">
<div class="notice">
<div class="text1">查看通讯录朋友</div>
<div class="text2">看看谁在抖音</div>
</div>
<img src="../../assets/img/icon/back.png" alt="">
</div>
</div>
<div class="line"></div>
<div class="title">
朋友推荐
<img src="../../assets/img/icon/close.svg" style="width: 1rem;">
</div>
<People v-for="item in list " :people="item"></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>
</div>
</SlideItem>
</SlideRowList>
@ -81,8 +111,12 @@ export default {
data() {
return {
findAddressListDialog: false,
moreOptionDialog: true,
moreOptionDialog: false,
indicatorFixed: false,
isShowText: false,
isSearch: false,
searchKey: '',
currentSlideItemIndex: 1,
list: [
{
@ -106,7 +140,24 @@ export default {
computed: {},
mounted() {
},
methods: {}
methods: {
t() {
console.log('scan')
},
async search() {
this.$showLoading()
await this.$sleep(500)
this.$hideLoading()
this.isSearch = true
},
back() {
if (this.isShowText) {
this.isShowText = false
} else {
this.$back()
}
}
}
}
</script>
@ -145,12 +196,92 @@ export default {
}
}
.tab1 {
.title {
margin-left: 2rem;
margin-top: 2rem;
color: $second-text-color;
font-size: 1.2rem;
}
}
.tab2 {
.title {
display: flex;
align-items: center;
margin-top: 2rem;
margin-bottom: 1rem;
color: $second-text-color;
font-size: 1.2rem;
img {
width: 1rem;
}
}
.no-search {
padding: 2rem;
.look-address-list {
margin: 0 2rem 2rem 0;
display: flex;
justify-content: space-between;
align-items: center;
.left {
background: $second-btn-color;
border-radius: 50%;
padding: 1rem;
width: 2.4rem;
margin-right: 1.8rem;
}
.right {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
img {
height: 2rem;
}
.notice {
.text1 {
font-size: 1.6rem;
margin-bottom: .5rem;
}
.text2 {
font-size: 1.2rem;
color: $second-text-color;
}
}
}
}
}
.is-search {
padding: 0 2rem 2rem 2rem;
.tooltip {
margin-top: 2rem;
display: flex;
align-items: center;
color: $second-text-color;
img {
margin-right: 1rem;
width: 1.5rem;
}
.searchKey {
color: yellow;
}
}
}
}
.dialog {
z-index: 10;
@ -228,7 +359,6 @@ export default {
}
.more-option-dialog {
z-index: 9;
position: fixed;

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

@ -93,7 +93,6 @@ export default {
.head-image {
margin-left: 20px;
margin-right: 15px;
width: 48px;
height: 48px;
@ -120,7 +119,6 @@ export default {
}
.right {
margin-right: 20px;
display: flex;
align-items: center;