优化
This commit is contained in:
zyronon
parent
642270adf2
commit
cf7e491bd8
@ -37,6 +37,8 @@ export default {
|
||||
'/service-protocol',
|
||||
'/address-list',
|
||||
'/video-detail',
|
||||
'/scan',
|
||||
'/face-to-face',
|
||||
'',
|
||||
];
|
||||
const toDepth = routeDeep.indexOf(to.path)
|
||||
|
||||
@ -2,6 +2,7 @@ $main-bg: rgb(22, 26, 37);
|
||||
$active-main-bg: rgb(31, 37, 52);
|
||||
$second-text-color: rgb(143, 143, 158);
|
||||
$second-btn-color: rgb(58, 58, 70);
|
||||
$second-btn-color-tran: rgba(58, 58, 70, .4);
|
||||
$line-color: rgb(37, 45, 66);
|
||||
|
||||
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div id="Message">
|
||||
<div class="header pt15p">
|
||||
<div class="header ">
|
||||
<div class="title">
|
||||
<p class="tac c-white ">消息</p>
|
||||
<span @click="nav('/myCard')">创建群聊</span>
|
||||
</div>
|
||||
</div>
|
||||
<Search class="m20p"></Search>
|
||||
<div class="line mb20p"></div>
|
||||
<div class="friends pl10p ">
|
||||
<div class="friend pr10p pl10p" v-for="item in 10">
|
||||
<Search class="m2r"></Search>
|
||||
<div class="line mb2r"></div>
|
||||
<div class="friends pl1r ">
|
||||
<div class="friend pr1r pl1r" v-for="item in 10">
|
||||
<div class="avatar on-line">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
</div>
|
||||
@ -20,7 +20,7 @@
|
||||
<span>状态设置</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt20p"></div>
|
||||
<div class="line mt2r"></div>
|
||||
<div class="requests">
|
||||
<div class="span">关注请求（1）</div>
|
||||
<div class="right">
|
||||
@ -56,7 +56,7 @@
|
||||
暂时没有更多了
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt10p"></div>
|
||||
<div class="line mt1r"></div>
|
||||
<div class="recommend">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
@ -99,6 +99,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="4"/>
|
||||
|
||||
<div class="create-chat">
|
||||
<div class="heng-gang"></div>
|
||||
<Search class="m2r"></Search>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -131,8 +136,96 @@ export default {
|
||||
padding-bottom: 60px;
|
||||
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 {
|
||||
margin-top: 2rem;
|
||||
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
position: relative;
|
||||
@ -140,7 +233,7 @@ export default {
|
||||
span {
|
||||
font-size: 1.6rem;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 2rem;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
43
src/pages/people/FaceToFace.vue
Normal file
43
src/pages/people/FaceToFace.vue
Normal 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>
|
||||
@ -10,7 +10,7 @@
|
||||
</Indicator>
|
||||
<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}">
|
||||
<SlideRowList v-model:active-index="currentSlideItemIndex">
|
||||
<SlideItem class="tab1">
|
||||
<Search placeholder="搜索用户备注或名字" class="mr20p ml20p mt10p"></Search>
|
||||
<div class="title">我的好友（互相关注）</div>
|
||||
@ -20,7 +20,7 @@
|
||||
<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">
|
||||
<img src="../../assets/img/icon/close.svg" style="width: 1rem;" @click.stop="$nav('/scan')">
|
||||
</Search>
|
||||
<Search v-else v-model="searchKey" :is-show-text="true" @notice="search" @clear="isSearch = false"></Search>
|
||||
</div>
|
||||
@ -54,37 +54,37 @@
|
||||
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="findAddressListDialog" class="dialog find-address-list" @click="findAddressListDialog = false">
|
||||
<div class="content" @click.stop="null">
|
||||
<div class="body">
|
||||
<div>
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
</div>
|
||||
<span class="title">发现通讯录好友</span>
|
||||
<span class="desc">
|
||||
授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见
|
||||
<Mask v-if="maskDialog" @click="maskDialog = false"></Mask>
|
||||
</transition>
|
||||
|
||||
<transition name="fade">
|
||||
<div v-if="findAddressListDialog" class="find-address-list-dialog" @click="findAddressListDialog = false">
|
||||
<div class="body">
|
||||
<div>
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
</div>
|
||||
<span class="title">发现通讯录好友</span>
|
||||
<span class="desc">
|
||||
<span>授权通讯录，看看哪些好友在使用抖音。具体使用场景及撤回授权方式详见</span>
|
||||
<span class="link" @click="$nav('/service-protocol')">《隐私政策》</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div @click="findAddressListDialog = false">暂时不要</div>
|
||||
<div @click="$nav('/address-list')">发现好友</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div @click="findAddressListDialog = false">暂时不要</div>
|
||||
<div @click="$nav('/address-list')">发现好友</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<Mask v-if="moreOptionDialog" @click="moreOptionDialog = false"></Mask>
|
||||
</transition>
|
||||
|
||||
<transition name="from-bottom">
|
||||
<div class="more-option-dialog" v-if="moreOptionDialog">
|
||||
<div class="row">
|
||||
<div class="row" @click="outWebImgAccountDialog = true;moreOptionDialog = false">
|
||||
<span>站外好友口令</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" @click="$nav('/scan')">
|
||||
<span>扫一扫加好友</span>
|
||||
</div>
|
||||
<div class="row" style="border-bottom: none;">
|
||||
<div class="row" style="border-bottom: none;" @click="$nav('/face-to-face')">
|
||||
<span>面对面加好友</span>
|
||||
</div>
|
||||
<div class="space"></div>
|
||||
@ -94,6 +94,29 @@
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
<script>
|
||||
@ -112,6 +135,7 @@ export default {
|
||||
return {
|
||||
findAddressListDialog: false,
|
||||
moreOptionDialog: false,
|
||||
outWebImgAccountDialog: false,
|
||||
indicatorFixed: false,
|
||||
isShowText: 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() {
|
||||
},
|
||||
methods: {
|
||||
t() {
|
||||
console.log('scan')
|
||||
},
|
||||
async search() {
|
||||
this.$showLoading()
|
||||
await this.$sleep(500)
|
||||
@ -181,6 +211,7 @@ export default {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.header {
|
||||
height: 6rem;
|
||||
@ -199,6 +230,7 @@ export default {
|
||||
.tab1 {
|
||||
box-sizing: border-box;
|
||||
padding: 2rem;
|
||||
|
||||
.title {
|
||||
margin-left: 2rem;
|
||||
margin-top: 2rem;
|
||||
@ -286,78 +318,71 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000000bb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.find-address-list-dialog {
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
width: 70vw;
|
||||
color: black;
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
border-radius: .3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
background: white;
|
||||
width: 70%;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.5rem;
|
||||
.body {
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.body {
|
||||
padding: 2rem;
|
||||
img {
|
||||
height: 6rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 1rem;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: rgb(18, 100, 149);
|
||||
}
|
||||
}
|
||||
|
||||
$footer-border-color: #eaeaf1;
|
||||
|
||||
.footer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
border-top: 1px solid $footer-border-color;
|
||||
font-size: 1.4rem;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 49%;
|
||||
text-align: center;
|
||||
border-right: 1px solid $footer-border-color;
|
||||
opacity: .5;
|
||||
|
||||
img {
|
||||
height: 6rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 1rem;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: rgb(18, 100, 149);
|
||||
&:nth-last-child(1) {
|
||||
border-right: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
$footer-border-color: #eaeaf1;
|
||||
|
||||
.footer {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
height: 4rem;
|
||||
border-top: 1px solid $footer-border-color;
|
||||
font-size: 1.4rem;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 49%;
|
||||
text-align: center;
|
||||
border-right: 1px solid $footer-border-color;
|
||||
opacity: .5;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
border-right: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
|
||||
108
src/pages/people/Scan.vue
Normal file
108
src/pages/people/Scan.vue
Normal 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>
|
||||
@ -25,6 +25,8 @@ import ChooseCity from "../pages/me/userinfo/ChooseCity";
|
||||
import FindAcquaintance from "../pages/people/FindAcquaintance";
|
||||
import ServiceProtocol from "../pages/other/ServiceProtocol";
|
||||
import AddressList from "../pages/people/AddressList";
|
||||
import Scan from "../pages/people/Scan";
|
||||
import FaceToFace from "../pages/people/FaceToFace";
|
||||
|
||||
const routes = [
|
||||
// {path: '', component: Music},
|
||||
@ -54,6 +56,8 @@ const routes = [
|
||||
{path: '/find-acquaintance', component: FindAcquaintance},
|
||||
{path: '/service-protocol', component: ServiceProtocol},
|
||||
{path: '/address-list', component: AddressList},
|
||||
{path: '/scan', component: Scan},
|
||||
{path: '/face-to-face', component: FaceToFace},
|
||||
]
|
||||
|
||||
export default VueRouter.createRouter({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user