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

优化

pull/19/head
zyronon 4 years ago
parent
642270adf2
commit
cf7e491bd8
7 changed files with 447 additions and 94 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. 2
      src/App.vue
  2. 1
      src/assets/scss/color.scss
  3. 109
      src/pages/home/Message.vue
  4. 43
      src/pages/people/FaceToFace.vue
  5. 172
      src/pages/people/FindAcquaintance.vue
  6. 108
      src/pages/people/Scan.vue
  7. 4
      src/router/index.js

2
src/App.vue
Unescape View File

@ -37,6 +37,8 @@ export default {
'/service-protocol', '/service-protocol',
'/address-list', '/address-list',
'/video-detail', '/video-detail',
'/scan',
'/face-to-face',
'', '',
]; ];
const toDepth = routeDeep.indexOf(to.path) const toDepth = routeDeep.indexOf(to.path)

1
src/assets/scss/color.scss
Unescape View File

@ -2,6 +2,7 @@ $main-bg: rgb(22, 26, 37);
$active-main-bg: rgb(31, 37, 52); $active-main-bg: rgb(31, 37, 52);
$second-text-color: rgb(143, 143, 158); $second-text-color: rgb(143, 143, 158);
$second-btn-color: rgb(58, 58, 70); $second-btn-color: rgb(58, 58, 70);
$second-btn-color-tran: rgba(58, 58, 70, .4);
$line-color: rgb(37, 45, 66); $line-color: rgb(37, 45, 66);

109
src/pages/home/Message.vue
Unescape View File

@ -1,15 +1,15 @@
<template> <template>
<div id="Message"> <div id="Message">
<div class="header pt15p"> <div class="header ">
<div class="title"> <div class="title">
<p class="tac c-white ">消息</p> <p class="tac c-white ">消息</p>
<span @click="nav('/myCard')">创建群聊</span> <span @click="nav('/myCard')">创建群聊</span>
</div> </div>
</div> </div>
<Search class="m20p"></Search> <Search class="m2r"></Search>
<div class="line mb20p"></div> <div class="line mb2r"></div>
<div class="friends pl10p "> <div class="friends pl1r ">
<div class="friend pr10p pl10p" v-for="item in 10"> <div class="friend pr1r pl1r" v-for="item in 10">
<div class="avatar on-line"> <div class="avatar on-line">
<img src="../../assets/img/icon/head-image.jpeg" alt=""> <img src="../../assets/img/icon/head-image.jpeg" alt="">
</div> </div>
@ -20,7 +20,7 @@
<span>状态设置</span> <span>状态设置</span>
</div> </div>
</div> </div>
<div class="line mt20p"></div> <div class="line mt2r"></div>
<div class="requests"> <div class="requests">
<div class="span">关注请求（1）</div> <div class="span">关注请求（1）</div>
<div class="right"> <div class="right">
@ -56,7 +56,7 @@
暂时没有更多了 暂时没有更多了
</div> </div>
</div> </div>
<div class="line mt10p"></div> <div class="line mt1r"></div>
<div class="recommend"> <div class="recommend">
<div class="title"> <div class="title">
<div class="left"> <div class="left">
@ -99,6 +99,11 @@
</div> </div>
</div> </div>
<Footer v-bind:init-tab="4"/> <Footer v-bind:init-tab="4"/>
<div class="create-chat">
<div class="heng-gang"></div>
<Search class="m2r"></Search>
</div>
</div> </div>
</template> </template>
@ -131,8 +136,96 @@ export default {
padding-bottom: 60px; padding-bottom: 60px;
color: white; color: white;
.create-chat {
padding: 10px 10px 0 10px;
z-index: 9;
position: fixed;
width: 100%;
max-height: 50vh;
overflow: auto;
bottom: 0;
background: $main-bg;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
.heng-gang {
display: flex;
justify-content: center;
.content {
border-radius: 2px;
height: 4px;
width: 30px;
background: $second-btn-color;
margin-bottom: 5px;
}
}
.collection {
margin: 10px 0;
background: white;
width: 100%;
border-radius: 6px;
display: flex;
align-items: center;
font-size: 1.6rem;
font-weight: bold;
padding: 10px;
box-sizing: border-box;
img {
background: white;
width: 35px;
height: 35px;
margin-right: 10px;
}
}
.friends {
background: white;
border-radius: 6px 6px 0 0;
width: 100%;
.friend {
box-sizing: border-box;
padding: 10px;
width: 100%;
display: flex;
align-items: center;
//border-bottom: 1px solid ghostwhite;
border-bottom: 1px solid gainsboro;
img {
border-radius: 50%;
width: 40px;
height: 40px;
}
.right {
margin: 0 5px 0 15px;
font-size: 1.6rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.share-btn {
font-size: 1.4rem;
color: white;
padding: 5px 20px;
background: $primary-btn-color;
border-radius: 2px;
}
}
}
}
}
.header { .header {
margin-top: 2rem;
.title { .title {
font-size: 1.8rem; font-size: 1.8rem;
position: relative; position: relative;
@ -140,7 +233,7 @@ export default {
span { span {
font-size: 1.6rem; font-size: 1.6rem;
position: absolute; position: absolute;
right: 10px; right: 2rem;
top: 0; top: 0;
} }
} }

43
src/pages/people/FaceToFace.vue
Unescape View File

@ -0,0 +1,43 @@
<template>
<div class="FaceToFace">
<BaseHeader style="background: black">
<template v-slot:right>
<span class="f16" @click="$nav('/common-setting')">设置</span>
</template>
</BaseHeader>
<div class="content">
</div>
</div>
</template>
<script>
//TODO 动画效果麻烦
export default {
name: "FaceToFace",
data() {
return {}
},
computed: {},
created() {
},
methods: {}
}
</script>
<style scoped lang="scss">
@import "../../assets/scss/index";
.FaceToFace {
background: black;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
.content {
padding-top: 6rem;
}
}
</style>

172
src/pages/people/FindAcquaintance.vue
Unescape View File

@ -10,7 +10,7 @@
</Indicator> </Indicator>
<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">
<SlideItem class="tab1"> <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>
@ -20,7 +20,7 @@
<SlideItem class="tab2"> <SlideItem class="tab2">
<div class="mr2r ml2r mt1r"> <div class="mr2r ml2r mt1r">
<Search v-if="!isShowText" :is-show-text="false" @click="isShowText = true"> <Search v-if="!isShowText" :is-show-text="false" @click="isShowText = true">
<img src="../../assets/img/icon/close.svg" style="width: 1rem;" @click.stop="t"> <img src="../../assets/img/icon/close.svg" style="width: 1rem;" @click.stop="$nav('/scan')">
</Search> </Search>
<Search v-else v-model="searchKey" :is-show-text="true" @notice="search" @clear="isSearch = false"></Search> <Search v-else v-model="searchKey" :is-show-text="true" @notice="search" @clear="isSearch = false"></Search>
</div> </div>
@ -54,15 +54,18 @@
<transition name="fade"> <transition name="fade">
<div v-if="findAddressListDialog" class="dialog find-address-list" @click="findAddressListDialog = false"> <Mask v-if="maskDialog" @click="maskDialog = false"></Mask>
<div class="content" @click.stop="null"> </transition>
<transition name="fade">
<div v-if="findAddressListDialog" class="find-address-list-dialog" @click="findAddressListDialog = false">
<div class="body"> <div class="body">
<div> <div>
<img src="../../assets/img/icon/head-image.jpeg" alt=""> <img src="../../assets/img/icon/head-image.jpeg" alt="">
</div> </div>
<span class="title">发现通讯录好友</span> <span class="title">发现通讯录好友</span>
<span class="desc"> <span class="desc">
授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见 <span>授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见</span>
<span class="link" @click="$nav('/service-protocol')">《隐私政策》</span> <span class="link" @click="$nav('/service-protocol')">《隐私政策》</span>
</span> </span>
</div> </div>
@ -71,20 +74,17 @@
<div @click="$nav('/address-list')">发现好友</div> <div @click="$nav('/address-list')">发现好友</div>
</div> </div>
</div> </div>
</div>
</transition>
<transition name="fade">
<Mask v-if="moreOptionDialog" @click="moreOptionDialog = false"></Mask>
</transition> </transition>
<transition name="from-bottom"> <transition name="from-bottom">
<div class="more-option-dialog" v-if="moreOptionDialog"> <div class="more-option-dialog" v-if="moreOptionDialog">
<div class="row"> <div class="row" @click="outWebImgAccountDialog = true;moreOptionDialog = false">
<span>站外好友口令</span> <span>站外好友口令</span>
</div> </div>
<div class="row"> <div class="row" @click="$nav('/scan')">
<span>扫一扫加好友</span> <span>扫一扫加好友</span>
</div> </div>
<div class="row" style="border-bottom: none;"> <div class="row" style="border-bottom: none;" @click="$nav('/face-to-face')">
<span>面对面加好友</span> <span>面对面加好友</span>
</div> </div>
<div class="space"></div> <div class="space"></div>
@ -94,6 +94,29 @@
</div> </div>
</transition> </transition>
<transition name="fade">
<div class="out-web-img-account-dialog" v-if="outWebImgAccountDialog">
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="img-account">
<img src="../../assets/img/icon/close-white.png" alt="" class="close" @click="outWebImgAccountDialog = false">
<div class="desc">
<div>这是你的图片口令</div>
<div>你可以通过此口令添加站外好友</div>
</div>
<div class="notice">
<img src="../../assets/img/icon/close.svg" alt="">
<span>图片口令已保存到相册</span>
</div>
<div class="btn wechat" @click="outWebImgAccountDialog = false">
<img src="../../assets/img/icon/close.svg" alt="">
<span>发给微信好友</span>
</div>
<div class="btn qq" @click="outWebImgAccountDialog = false">
<img src="../../assets/img/icon/close.svg" alt="">
<span>发给QQ好友</span>
</div>
</div>
</transition>
</div> </div>
</template> </template>
<script> <script>
@ -112,6 +135,7 @@ export default {
return { return {
findAddressListDialog: false, findAddressListDialog: false,
moreOptionDialog: false, moreOptionDialog: false,
outWebImgAccountDialog: false,
indicatorFixed: false, indicatorFixed: false,
isShowText: false, isShowText: false,
isSearch: false, isSearch: false,
@ -137,13 +161,19 @@ export default {
], ],
} }
}, },
computed: {}, computed: {
maskDialog: {
get() {
return this.findAddressListDialog || this.moreOptionDialog || this.outWebImgAccountDialog
},
set() {
this.findAddressListDialog = this.moreOptionDialog = this.outWebImgAccountDialog = false
}
}
},
mounted() { mounted() {
}, },
methods: { methods: {
t() {
console.log('scan')
},
async search() { async search() {
this.$showLoading() this.$showLoading()
await this.$sleep(500) await this.$sleep(500)
@ -181,6 +211,7 @@ export default {
bottom: 0; bottom: 0;
top: 0; top: 0;
color: white; color: white;
font-size: 1.4rem;
.header { .header {
height: 6rem; height: 6rem;
@ -199,6 +230,7 @@ export default {
.tab1 { .tab1 {
box-sizing: border-box; box-sizing: border-box;
padding: 2rem; padding: 2rem;
.title { .title {
margin-left: 2rem; margin-left: 2rem;
margin-top: 2rem; margin-top: 2rem;
@ -286,25 +318,20 @@ export default {
} }
} }
.dialog { .find-address-list-dialog {
z-index: 10; z-index: 2;
position: absolute; position: fixed;
top: 0; left: 50%;
bottom: 0; top: 50%;
left: 0; transform: translate3d(-50%, -50%, 0);
right: 0; width: 70vw;
background: #000000bb;
display: flex;
justify-content: center;
align-items: center;
color: black; color: black;
.content {
background: white; background: white;
width: 70%;
border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
font-size: 1.5rem; border-radius: .3rem;
display: flex;
flex-direction: column;
align-items: center;
.body { .body {
padding: 2rem; padding: 2rem;
@ -336,7 +363,7 @@ export default {
$footer-border-color: #eaeaf1; $footer-border-color: #eaeaf1;
.footer { .footer {
margin-top: 2rem; width: 100%;
display: flex; display: flex;
height: 4rem; height: 4rem;
border-top: 1px solid $footer-border-color; border-top: 1px solid $footer-border-color;
@ -360,8 +387,6 @@ export default {
} }
}
.more-option-dialog { .more-option-dialog {
z-index: 9; z-index: 9;
position: fixed; position: fixed;
@ -391,5 +416,82 @@ export default {
} }
} }
.out-web-img-account-dialog {
z-index: 2;
position: fixed;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
width: 80vw;
color: black;
background: white;
box-sizing: border-box;
border-radius: .3rem;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
.img-account {
}
.close {
top: 1rem;
right: 1rem;
position: absolute;
background: $second-btn-color-tran;
padding: .4rem;
width: 1rem;
border-radius: 50%;
}
.desc {
margin-top: 2rem;
text-align: center;
}
.notice {
margin-top: 2rem;
display: flex;
align-items: center;
color: $second-text-color;
img {
margin-right: 1rem;
width: 1rem;
}
}
.btn {
width: 100%;
height: 4rem;
border-radius: .3rem;
margin-top: 2rem;
display: flex;
justify-content: center;
align-items: center;
color: white;
&:nth-last-child(1) {
margin-top: 1rem;
}
&.wechat {
background: rgb(62, 174, 56);
}
&.qq {
background: rgb(24, 183, 238);
}
img {
margin-right: 1rem;
width: 1rem;
}
}
}
} }
</style> </style>

108
src/pages/people/Scan.vue
Unescape View File

@ -0,0 +1,108 @@
<template>
<div class="Scan">
<img src="../../assets/img/icon/back.png" @click="$back" class="back">
<div class="video-ctn">
<video src="../../assets/video/3.mp4"></video>
</div>
<div class="float">
<div class="open-light">
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
<span>轻触照亮</span>
</div>
<div class="option">
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
<span>我的抖音码</span>
</div>
<div class="option">
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
<span>相册</span>
</div>
</div>
<div class="scan-anim">
</div>
</div>
</template>
<script>
//TODO 那个动画没做，用css画有点麻烦，后面ps p一张图片吧
export default {
name: "Scan",
data() {
return {}
},
computed: {},
created() {
},
methods: {}
}
</script>
<style scoped lang="scss">
@import "../../assets/scss/index";
.Scan {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: auto;
color: white;
.back {
z-index: 3;
margin: 2rem 0 0 2rem;
position: fixed;
height: 2rem;
}
.float {
position: fixed;
bottom: 6rem;
display: flex;
justify-content: space-between;
width: 80vw;
left: 10vw;
.option {
display: flex;
flex-direction: column;
align-items: center;
img {
border-radius: 50%;
background: $second-btn-color-tran;
padding: 1.6rem;
height: 2.4rem;
margin-bottom: 1rem;
}
}
.open-light {
position: fixed;
bottom: 16rem;
display: flex;
flex-direction: column;
align-items: center;
left: 50%;
transform: translateX(-50%);
img {
height: 2.4rem;
margin-bottom: 1rem;
}
}
}
.video-ctn {
height: 100vh;
width: 100vw;
video {
height: 100vh;
width: 100vw;
}
}
}
</style>

4
src/router/index.js
Unescape View File

@ -25,6 +25,8 @@ import ChooseCity from "../pages/me/userinfo/ChooseCity";
import FindAcquaintance from "../pages/people/FindAcquaintance"; import FindAcquaintance from "../pages/people/FindAcquaintance";
import ServiceProtocol from "../pages/other/ServiceProtocol"; import ServiceProtocol from "../pages/other/ServiceProtocol";
import AddressList from "../pages/people/AddressList"; import AddressList from "../pages/people/AddressList";
import Scan from "../pages/people/Scan";
import FaceToFace from "../pages/people/FaceToFace";
const routes = [ const routes = [
// {path: '', component: Music}, // {path: '', component: Music},
@ -54,6 +56,8 @@ const routes = [
{path: '/find-acquaintance', component: FindAcquaintance}, {path: '/find-acquaintance', component: FindAcquaintance},
{path: '/service-protocol', component: ServiceProtocol}, {path: '/service-protocol', component: ServiceProtocol},
{path: '/address-list', component: AddressList}, {path: '/address-list', component: AddressList},
{path: '/scan', component: Scan},
{path: '/face-to-face', component: FaceToFace},
] ]
export default VueRouter.createRouter({ export default VueRouter.createRouter({

Write Preview
Loading…
Cancel
Save