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

熟人页面

pull/19/head
zyronon 4 years ago
parent
f0cbfffb5d
commit
b6f0aeea91
6 changed files with 255 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      src/assets/scss/utils.scss
  2. 86
      src/components/Search.vue
  3. 2
      src/pages/me/Me.vue
  4. 27
      src/pages/me/userinfo/ChooseSchool.vue
  5. 154
      src/pages/people/FindAcquaintance.vue
  6. 2
      src/pages/people/components/People.vue

100
src/assets/scss/utils.scss
Unescape 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;
} }

86
src/components/Search.vue
Unescape 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; font-size: 1.6rem;
margin: 0 10px;
} }
input { .search {
font-size: 1.6rem; flex: 1;
color: white; position: relative;
height: 50%; height: 3.6rem;
width: 100%; background: rgb(59, 59, 71);
outline: none; border-radius: 2px;
border: none; display: flex;
background: transparent; align-items: center;
&::-webkit-input-placeholder { .search-icon {
color: $second-text-color; height: 1.5rem;
width: 1.5rem;
margin: 0 1rem;
} }
}
.close { input {
position: absolute; font-size: 1.6rem;
right: 0; color: white;
width: 1rem; 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save