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

90
src/components/Search.vue
View File

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

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

@ -541,10 +541,8 @@ export default {
width: 25px; width: 25px;
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
} }
} }
.button-ctn { .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> <span class="f14" @click="$nav('/declare-school',{type:1})">没有找到?</span>
</template> </template>
<template v-slot:bottom> <template v-slot:bottom>
<div class="search-ctn"> <Search class="mt1r mb1r ml2r mr2r" placeholder="搜索大学名称"
<Search placeholder="搜索大学名称" v-model="schoolName" @clear="isSearch = false"></Search> v-model="schoolName"
<span class="search-btn" @click="search">搜索</span> @clear="isSearch = false"
</div> :is-show-text="true"
@notice="search"></Search>
</template> </template>
</BaseHeader> </BaseHeader>
<div class="content"> <div class="content">
@ -107,24 +108,6 @@ export default {
color: white; color: white;
overflow: auto; 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 { .content {
padding-top: 12rem; padding-top: 12rem;

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

@ -1,7 +1,7 @@
<template> <template>
<div class="FindAcquaintance"> <div class="FindAcquaintance">
<div class="header"> <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 <Indicator
style="width: 50%;" style="width: 50%;"
tabStyleWidth="40%" tabStyleWidth="40%"
@ -11,14 +11,44 @@
<img src="../../assets/img/icon/back.png" alt="" class="option" @click="moreOptionDialog = true"> <img src="../../assets/img/icon/back.png" alt="" class="option" @click="moreOptionDialog = true">
</div> </div>
<SlideRowList v-model:active-index="currentSlideItemIndex" :style="{opacity : moreOptionDialog ? .5:1}"> <SlideRowList v-model:active-index="currentSlideItemIndex" :style="{opacity : moreOptionDialog ? .5:1}">
<SlideItem> <SlideItem class="tab1">
<Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search> <Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
<div class="title">我的好友（互相关注）</div> <div class="title">我的好友（互相关注）</div>
<People v-for="item in list " :people="item"></People> <People v-for="item in list " :people="item"></People>
<NoMore></NoMore> <NoMore></NoMore>
</SlideItem> </SlideItem>
<SlideItem> <SlideItem class="tab2">
<Search :key="1"></Search> <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> </SlideItem>
</SlideRowList> </SlideRowList>
@ -81,8 +111,12 @@ export default {
data() { data() {
return { return {
findAddressListDialog: false, findAddressListDialog: false,
moreOptionDialog: true, moreOptionDialog: false,
indicatorFixed: false, indicatorFixed: false,
isShowText: false,
isSearch: false,
searchKey: '',
currentSlideItemIndex: 1, currentSlideItemIndex: 1,
list: [ list: [
{ {
@ -106,7 +140,24 @@ export default {
computed: {}, computed: {},
mounted() { 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> </script>
@ -145,11 +196,91 @@ export default {
} }
} }
.title { .tab1 {
margin-left: 2rem; .title {
margin-top: 2rem; margin-left: 2rem;
color: $second-text-color; margin-top: 2rem;
font-size: 1.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 { .dialog {
@ -228,7 +359,6 @@ export default {
} }
.more-option-dialog { .more-option-dialog {
z-index: 9; z-index: 9;
position: fixed; position: fixed;

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

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