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-08-02 00:30:51 +08:00
parent 08eebfa142
commit 531046e32e
13 changed files with 3686 additions and 2607 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -43,6 +43,7 @@ export default {
const routeDeep = [ const routeDeep = [
'/message', '/attention', '/home', '/me', '/publish', '/message', '/attention', '/home', '/me', '/publish',
'/country-choose',
'/edit-userinfo', '/edit-userinfo',
'/edit-userinfo-item', '/edit-userinfo-item',
'/video-detail', '/video-detail',

BIN
src/assets/img/icon/arrow-up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

7
src/assets/scss/custom.scss
View File

@ -29,6 +29,13 @@
background: $main-bg; background: $main-bg;
} }
} }
&.no-padding {
padding:0;
}
&.border{
border-bottom: 1px solid $line-color;
}
&:active { &:active {
background: $active-main-bg; background: $active-main-bg;

1
src/components/BaseHeader.vue
View File

@ -38,6 +38,7 @@ export default {
width: 100%; width: 100%;
position: fixed; position: fixed;
background: $main-bg; background: $main-bg;
z-index: 2;
.header { .header {
display: flex; display: flex;

4
src/components/Search.vue
View File

@ -5,10 +5,10 @@
<input type="text" :placeholder="placeholder" v-model="value"> <input type="text" :placeholder="placeholder" v-model="value">
<div class="suffix"> <div class="suffix">
<slot v-if="$slots.default"></slot> <slot v-if="$slots.default"></slot>
<img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click="clear"> <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear">
</div> </div>
</div> </div>
<div v-if="isShowText" class="notice" :style="{color : notice}" @click="$emit('notice')">搜索</div> <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">搜索</div>
</div> </div>
</template> </template>

2
src/pages/home/Attention.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div id="attention"> <div id="attention">
<header> <header>
<span>双流</span> <span @click="$nav('/country-choose')">双流</span>
<div class="arrow"></div> <div class="arrow"></div>
</header> </header>
<div class="ad"> <div class="ad">

4968
src/pages/login/countryChoose.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -355,20 +355,18 @@ export default {
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
img { img {
padding: 4px; padding: .6rem;
height: 16px; width: 1.8rem;
width: 16px;
} }
} }
.right { .right {
img { img {
margin-left: 20px; margin-left: 2rem;
border-radius: 50%; border-radius: 50%;
background: rgba(82, 80, 80, 0.5); background: rgba(82, 80, 80, 0.5);
padding: 4px; padding: .6rem;
height: 16px; width: 1.8rem;
width: 16px;
} }
} }
} }

1176
src/pages/me/userinfo/ChooseLocation.vue
View File

File diff suppressed because it is too large Load Diff

39
src/pages/message/Chat.vue
View File

@ -28,7 +28,8 @@
<template v-else> <template v-else>
<img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-black.png" alt=""> <img @click="recording = true;showOption = false" src="../../assets/img/icon/message/voice-black.png" alt="">
<img src="../../assets/img/icon/message/emoji-black.png" alt=""> <img src="../../assets/img/icon/message/emoji-black.png" alt="">
<img @click="showOption = !showOption" src="../../assets/img/icon/message/add-black.png" alt=""> <img v-if="showOption" @click="showOption = !showOption" src="../../assets/img/icon/message/close-black.png" alt="">
<img v-else @click="showOption = !showOption" src="../../assets/img/icon/message/add-black.png" alt="">
</template> </template>
</div> </div>
<div class="record" v-else> <div class="record" v-else>
@ -37,10 +38,34 @@
</div> </div>
<div class="options" v-if="showOption"> <div class="options" v-if="showOption">
<div class="option-wrapper"> <div class="option-wrapper">
<div class="option" v-for="i in 7"> <div class="option">
<img src="../../assets/img/icon/举报.svg" alt=""> <img src="../../assets/img/icon/message/photo.png" alt="">
<span>照片</span> <span>照片</span>
</div> </div>
<div class="option">
<img src="../../assets/img/icon/message/camera2.png" alt="">
<span>拍摄</span>
</div>
<div class="option">
<img src="../../assets/img/icon/message/redpack.png" alt="">
<span>红包</span>
</div>
<div class="option">
<img src="../../assets/img/icon/message/video.png" alt="">
<span>视频通话</span>
</div>
<div class="option">
<img src="../../assets/img/icon/message/audio.png" alt="">
<span>语音通话</span>
</div>
<div class="option">
<img src="../../assets/img/icon/message/come-on.png" alt="">
<span>一起看视频</span>
</div>
<div class="option">
<img src="../../assets/img/icon/message/come-chang.png" alt="">
<span>一起唱</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -495,12 +520,14 @@ export default {
} }
.options { .options {
padding-top: 1.5rem; font-size: 1.4rem;
width: 100vw;
padding: 1.5rem;
height: 30vh; height: 30vh;
box-sizing: border-box; box-sizing: border-box;
.option-wrapper { .option-wrapper {
padding: 1.5rem; box-sizing: border-box;
$grid-width: calc((100vw - 3rem) / 4); $grid-width: calc((100vw - 3rem) / 4);
color: black; color: black;
display: grid; display: grid;
@ -517,7 +544,7 @@ export default {
border-radius: .4rem; border-radius: .4rem;
background: whitesmoke; background: whitesmoke;
padding: 1rem; padding: 1rem;
width: 2.5rem; width: 3rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }

12
src/pages/message/ChatDetail.vue
View File

@ -25,20 +25,20 @@
<div class="row" @click="$nav('/set-remark')"> <div class="row" @click="$nav('/set-remark')">
<div class="left">设备备注</div> <div class="left">设备备注</div>
<div class="right"> <div class="right">
<img src="../../assets/img/icon/back.png" alt=""> <back direction="right" scale="1.2" ></back>
</div> </div>
</div> </div>
<!-- TODO 没做 --> <!-- TODO 没做 -->
<div class="row"> <div class="row">
<div class="left">举报</div> <div class="left">举报</div>
<div class="right"> <div class="right">
<img src="../../assets/img/icon/back.png" alt=""> <back direction="right" scale="1.2" ></back>
</div> </div>
</div> </div>
<div class="row" @click="blockDialog = true"> <div class="row" @click="blockDialog = true">
<div class="left">拉黑</div> <div class="left">拉黑</div>
<div class="right"> <div class="right">
<img src="../../assets/img/icon/back.png" alt=""> <back direction="right" scale="1.2" ></back>
</div> </div>
</div> </div>
</div> </div>
@ -52,7 +52,7 @@
<div class="notice"> <div class="notice">
拉黑后，对方将无法搜索到你，也不能再给你发私信 拉黑后，对方将无法搜索到你，也不能再给你发私信
</div> </div>
<div class="row">确认拉黑</div> <div class="row red">确认拉黑</div>
<div class="row">不让 TA 看</div> <div class="row">不让 TA 看</div>
<div class="space"></div> <div class="space"></div>
<div class="row" @click="blockDialog = false">取消</div> <div class="row" @click="blockDialog = false">取消</div>
@ -164,6 +164,10 @@ export default {
&:nth-last-child(1) { &:nth-last-child(1) {
border-top: none; border-top: none;
} }
&.red{
color: $primary-btn-color;
}
} }
.space { .space {

69
src/pages/message/Message.vue
View File

@ -54,57 +54,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="not-more">
暂时没有更多了
</div>
</div>
<div class="line mt1r"></div>
<div class="recommend">
<div class="title">
<div class="left">
朋友推荐
<img src="../../assets/img/icon/close-white.png" alt="">
</div>
<img class="right" src="../../assets/img/icon/close-white.png" alt="">
</div>
<div class="list">
<div class="item" v-for="i in 5">
<img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image pull-left">
<div class="content">
<div class="left">
<div class="name">A</div>
<div class="detail">
该用户关注了你
</div>
</div>
<div class="right">
<div class="button">回关</div>
<div class="button">移除</div>
</div>
</div>
</div>
<div class="item">
<img src="../../assets/img/icon/msg-icon1.png" alt="" class="head-image pull-left">
<div class="content">
<div class="left">
<div class="name">A</div>
<div class="detail">
该用户关注了你
</div>
</div>
<div class="right">
<div class="button">回头</div>
<div class="button">移除</div>
</div>
</div>
</div>
</div>
</div> </div>
<Footer v-bind:init-tab="4"/> <Footer v-bind:init-tab="4"/>
<from-bottom-dialog v-model="createChatDialog"> <from-bottom-dialog v-model="createChatDialog">
<div class="create-chat-wrapper" v-show="!showJoinedChat"> <div class="create-chat-wrapper" v-show="!showJoinedChat">
<Search class="ml2r mr2r" placeholder="搜索用户" v-model="createChatSearchKey"></Search> <Search :isShowText="isShowText"
@click="isShowText = true"
@notice="isShowText = false;"
@clear="isShowText = false"
class="ml2r mr2r" placeholder="搜索用户" v-model="createChatSearchKey"></Search>
<template v-if="createChatSearchKey"> <template v-if="createChatSearchKey">
<div class="search-result" v-if="searchFriends.length"> <div class="search-result" v-if="searchFriends.length">
<div class="search-result-item" v-for="item in searchFriends" <div class="search-result-item" v-for="item in searchFriends"
@ -115,8 +74,8 @@
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span> <span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span>
</div> </div>
<img v-if="item.select" src="../../assets/img/icon/back.png" alt=""> <img v-if="item.select" src="../../assets/img/icon/message/checked.png" alt="">
<img v-if="!item.select" src="../../assets/img/icon/close.svg" alt=""></div> <img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt=""></div>
</div> </div>
</div> </div>
<div class="no-result" v-else> <div class="no-result" v-else>
@ -142,8 +101,8 @@
<img class="left" src="../../assets/img/icon/head-image.jpeg" alt=""> <img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
<div class="right"> <div class="right">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<img v-if="item.select" src="../../assets/img/icon/back.png" alt=""> <img v-if="item.select" src="../../assets/img/icon/message/checked.png" alt="">
<img v-if="!item.select" src="../../assets/img/icon/close.svg" alt=""> <img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt="">
</div> </div>
</div> </div>
</div> </div>
@ -195,8 +154,8 @@ export default {
return { return {
createChatSearchKey: '', createChatSearchKey: '',
showJoinedChat: false, showJoinedChat: false,
// createChatDialog: false,
createChatDialog: false, createChatDialog: false,
isShowText: false,
text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC', text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
friends: [ friends: [
{ {
@ -272,7 +231,8 @@ export default {
}, },
mounted() { mounted() {
}, },
methods: {} methods: {
}
} }
</script> </script>
@ -335,6 +295,7 @@ export default {
margin-bottom: 2rem; margin-bottom: 2rem;
display: flex; display: flex;
align-items: center; align-items: center;
//background: #fff;
&:nth-child(1) { &:nth-child(1) {
margin-top: 1rem; margin-top: 1rem;
@ -355,7 +316,7 @@ export default {
justify-content: space-between; justify-content: space-between;
img { img {
height: 1.5rem; height: 2rem;
} }
} }
} }
@ -430,7 +391,7 @@ export default {
} }
img { img {
height: 1.5rem; height: 2rem;
} }
} }
} }

2
src/utils/global-methods.js
View File

@ -134,7 +134,7 @@ export default {
return parseFloat(val) return parseFloat(val)
}, },
$setCss(el, key, value) { $setCss(el, key, value) {
// console.log(value) console.log(value)
if (key === 'transform') { if (key === 'transform') {
//直接设置不生效 //直接设置不生效
el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value; el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value;