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">

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

@ -1,119 +1,74 @@
<template> <template>
<div class='countryChoose'> <div class='countryChoose'>
<header> <base-header>
<div class="title"> <template v-slot:center>
<img src="../../assets/img/icon/close-white.png" alt="" class="close-img"> 选择国家或地区
<span>选择国家或地区</span> </template>
<template v-slot:bottom>
<Search :isShowText="isShowText"
@click="isShowText = true"
@notice="isShowText = false;"
@clear="isShowText = false"
class="ml2r mr2r mt1r" placeholder="输入城市或区县名搜索" v-model="searchKey"></Search>
</template>
</base-header>
<div ref="list" class="content" @scroll="scroll">
<div class="row no-active">
默认位置
</div> </div>
<div class="row no-active">
</header> 同城
<div class="content">
<div class="left">
<p>1111212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
<p>1212</p>
</div> </div>
<div class="right"> <div class="list">
<ul class="indicator-ctn2"> <div v-for="(value, name) of countryOk">
<li>A</li> <div :class="name" class="row no-active no-padding border index">
<li>B</li> <span>{{ name }}</span>
<li>C</li> </div>
<li>D</li> <div class="row no-active no-padding border" v-for="item of value">
<li>E</li> <span>{{ item.name }}</span>
<li>F</li> </div>
<li>G</li> </div>
<li>H</li> </div>
<li>I</li> </div>
<li>J</li> <div class="indicator-ctn">
<li>K</li> <div class="indicator">
<li>L</li> <div class="item arrow" data-index="top"></div>
<li>M</li> <div class="item">A</div>
<li>N</li> <div class="item">B</div>
<li>O</li> <div class="item">C</div>
<li>P</li> <div class="item">D</div>
<li>Q</li> <div class="item">E</div>
<li>R</li> <div class="item">F</div>
<li>S</li> <div class="item">G</div>
<li>T</li> <div class="item">H</div>
<li>U</li> <div class="item">I</div>
<li>V</li> <div class="item">J</div>
<li>W</li> <div class="item">K</div>
<li>X</li> <div class="item">L</div>
<li>Y</li> <div class="item">M</div>
<li>Z</li> <div class="item">N</div>
</ul> <div class="item">O</div>
<div class="item">P</div>
<div class="item">Q</div>
<div class="item">R</div>
<div class="item">S</div>
<div class="item">T</div>
<div class="item">U</div>
<div class="item">V</div>
<div class="item">W</div>
<div class="item">X</div>
<div class="item">Y</div>
<div class="item">Z</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { import Search from "../../components/Search";
export default {
name: "countryChoose", name: "countryChoose",
components: {}, components: {Search},
data() { data() {
return { return {
country: [ country: [
@ -2341,200 +2296,171 @@
"pinyin": "Z" "pinyin": "Z"
} }
] ]
} },
isShowText: false,
searchKey: '',
indexOffsetTop: {}
} }
}, },
created() { created() {
console.log(this.countryOk)
}, },
mounted() { mounted() {
let ul = document.querySelector('.indicator-ctn2') let indexs = document.querySelectorAll('.index')
let ulOffsetTop = ul.offsetTop indexs.forEach(v => {
let itemHeight = 18 this.indexOffsetTop[v.children[0].innerText] = v.offsetTop
let fontSize = '1.4rem'
let liEl = document.querySelectorAll('.indicator-ctn2 li')
liEl.forEach((el, index) => {
el.style.top = index * itemHeight + 'px'
el.style.width = itemHeight + 'px'
el.style.height = itemHeight + 'px'
}) })
ul.addEventListener('touchstart', function ($e) { let items = document.querySelectorAll('.item')
let pageY = $e.touches[0].pageY - ulOffsetTop let item = document.querySelector(`.item:nth-child(2)`)
let itemHeight = item.clientHeight
let ul = document.querySelector('.indicator')
let ulOffsetTop = ul.offsetTop
let resetScale = 'scale(1)'
let resetColor = 'rgb(143, 143, 158)'
ul.addEventListener('touchstart', e => {
let pageY = e.touches[0].pageY - ulOffsetTop
let currentIndex = pageY / itemHeight let currentIndex = pageY / itemHeight
currentIndex = Math.floor(currentIndex) currentIndex = Math.floor(currentIndex)
render(currentIndex) render(currentIndex)
}) })
ul.addEventListener('touchmove', e => {
let pageY = e.touches[0].pageY - ulOffsetTop
let currentIndex = pageY / itemHeight
currentIndex = Math.floor(currentIndex)
if (currentIndex >= 0 && currentIndex < 26) {
render(currentIndex)
}
})
ul.addEventListener('touchend', function ($e) { ul.addEventListener('touchend', function ($e) {
liEl.forEach((el, index) => { items.forEach((el, index) => {
el.style.left = 0 el.style.transform = `translate3d(0,0,0) ${resetScale}`
el.style.fontSize = '1rem' el.style.color = resetColor
el.style.color = '#fff'
}) })
}) })
ul.addEventListener('touchmove', function ($e) { let render = (currentIndex) => {
liEl.forEach((el, index) => { // console.log('currentIndex', currentIndex)
el.style.left = 0 let scale = 'scale(1.2)'
el.style.fontSize = '1rem' items[currentIndex].style.transform = `translate3d(${-itemHeight * 4}px,0,0) ${scale}`
el.style.color = '#fff' items[currentIndex].style.color = '#fff'
}) this.goto(items[currentIndex])
let pageY = $e.touches[0].pageY - ulOffsetTop for (let i = 1; i < 5; i++) {
let currentIndex = pageY / itemHeight let nextIndex = currentIndex + i
currentIndex = Math.floor(currentIndex) let preIndex = currentIndex - i
render(currentIndex) if (preIndex >= 0) {
console.log(currentIndex) if (i === 4) {
}) items[preIndex].style.transform = `translate3d(0,0,0) ${resetScale}`
items[preIndex].style.color = resetColor
function render(currentIndex) {
liEl[currentIndex].style.left = -itemHeight * 4 + 10 + 'px'
liEl[currentIndex].style.fontSize = fontSize
liEl[currentIndex].style.color = '#fff'
if (currentIndex === 0) {
liEl[currentIndex + 1].style.left = -itemHeight * 3 + 'px'
liEl[currentIndex + 1].style.fontSize = fontSize
liEl[currentIndex + 1].style.color = '#ffffff22'
liEl[currentIndex + 2].style.left = -itemHeight * 2 + 'px'
liEl[currentIndex + 2].style.fontSize = fontSize
liEl[currentIndex + 2].style.color = '#ffffff44'
liEl[currentIndex + 3].style.left = -itemHeight * 1 + 'px'
liEl[currentIndex + 3].style.fontSize = fontSize
liEl[currentIndex + 3].style.color = '#ffffff66'
} else if (currentIndex === 1) {
liEl[currentIndex - 1].style.left = -itemHeight * 3 + 'px'
liEl[currentIndex - 1].style.fontSize = fontSize
liEl[currentIndex - 1].style.color = '#ffffff22'
liEl[currentIndex + 1].style.left = -itemHeight * 3 + 'px'
liEl[currentIndex + 1].style.fontSize = fontSize
liEl[currentIndex + 1].style.color = '#ffffff22'
liEl[currentIndex + 2].style.left = -itemHeight * 2 + 'px'
liEl[currentIndex + 2].style.fontSize = fontSize
liEl[currentIndex + 2].style.color = '#ffffff44'
liEl[currentIndex + 3].style.left = -itemHeight * 1 + 'px'
liEl[currentIndex + 3].style.fontSize = fontSize
liEl[currentIndex + 3].style.color = '#ffffff66'
} else if (currentIndex === 2) {
liEl[currentIndex - 2].style.left = -itemHeight * 2 + 'px'
liEl[currentIndex - 2].style.fontSize = fontSize
liEl[currentIndex - 2].style.color = '#ffffff44'
liEl[currentIndex - 1].style.left = -itemHeight * 3 + 'px'
liEl[currentIndex - 1].style.fontSize = fontSize
liEl[currentIndex - 1].style.color = '#ffffff22'
liEl[currentIndex + 1].style.left = -itemHeight * 3 + 'px'
liEl[currentIndex + 1].style.fontSize = fontSize
liEl[currentIndex + 1].style.color = '#ffffff22'
liEl[currentIndex + 2].style.left = -itemHeight * 2 + 'px'
liEl[currentIndex + 2].style.fontSize = fontSize
liEl[currentIndex + 2].style.color = '#ffffff44'
liEl[currentIndex + 3].style.left = -itemHeight * 1 + 'px'
liEl[currentIndex + 3].style.fontSize = fontSize
liEl[currentIndex + 3].style.color = '#ffffff66'
} else { } else {
liEl[currentIndex - 1].style.left = -itemHeight * 3 + 'px' items[preIndex].style.transform = `translate3d(${-itemHeight * (4 - i)}px,0,0) ${scale}`
liEl[currentIndex - 1].style.fontSize = fontSize items[preIndex].style.color = `#ffffff${22 * i}`
liEl[currentIndex - 1].style.color = '#ffffff22' }
}
liEl[currentIndex - 2].style.left = -itemHeight * 2 + 'px' if (nextIndex < 26) {
liEl[currentIndex - 2].style.fontSize = fontSize if (i === 4) {
liEl[currentIndex - 2].style.color = '#ffffff44' items[nextIndex].style.transform = `translate3d(0,0,0) ${resetScale}`
items[nextIndex].style.color = resetColor
liEl[currentIndex - 3].style.left = -itemHeight * 1 + 'px' } else {
liEl[currentIndex - 3].style.fontSize = fontSize items[nextIndex].style.transform = `translate3d(${-itemHeight * (4 - i)}px,0,0) ${scale}`
liEl[currentIndex - 3].style.color = '#ffffff66' items[nextIndex].style.color = `#ffffff${22 * i}`
}
}
liEl[currentIndex + 1].style.left = -itemHeight * 3 + 'px'
liEl[currentIndex + 1].style.fontSize = fontSize
liEl[currentIndex + 1].style.color = '#ffffff22'
liEl[currentIndex + 2].style.left = -itemHeight * 2 + 'px'
liEl[currentIndex + 2].style.fontSize = fontSize
liEl[currentIndex + 2].style.color = '#ffffff44'
liEl[currentIndex + 3].style.left = -itemHeight * 1 + 'px'
liEl[currentIndex + 3].style.fontSize = fontSize
liEl[currentIndex + 3].style.color = '#ffffff66'
} }
} }
}, },
computed: {}, computed: {},
methods: {} methods: {
goto(el) {
let list = this.$refs.list
if (el.dataset['index']) {
return list.scrollTop = 0
} }
let py = el.innerText
if (document.querySelector(`.${py}`)) {
list.scrollTop = document.querySelector(`.${py}`).offsetTop - 110
}
},
scroll(e) {
// console.log()
let listScrollTop = e.target.scrollTop + 100
for (const item of this.indexOffsetTop) {
}
}
}
}
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.countryChoose { @import "../../assets/scss/index";
height: 100%;
width: 100%;
font-size: 1.6rem;
overflow: hidden;
color: white;
header { .countryChoose {
background: red;
height: 110px;
width: 100%;
position: fixed; position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0; top: 0;
color: white;
font-size: 1.4rem;
overflow: hidden;
.title { .indicator-ctn {
text-align: center; width: 2rem;
height: 100vh;
span { position: fixed;
font-size: 1.8rem; z-index: 3;
font-weight: bold; top: 0;
} right: 0.5rem;
}
}
}
.content {
margin-top: 110px;
display: flex; display: flex;
height: 100%; align-items: center;
width: 100%; justify-content: center;
}
.left { .indicator {
width: 95%; width: 2rem;
height: calc(100% - 110px);
overflow-y: scroll;
}
.right {
width: 5%;
height: calc(100% - 110px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
}
.indicator-ctn2 { div {
width: 20px; color: $second-text-color;
padding: 0; //transition: all .3s;
margin: 0;
height: 468px;
position: relative;
text-align: center;
list-style: none;
}
li {
position: absolute;
transition: all .3s;
height: 18px;
font-size: 1rem; font-size: 1rem;
line-height: 14px; padding: .1rem;
} }
.arrow {
padding: 0 0 .3rem 0;
width: 0;
height: 0;
border: .5rem solid transparent;
border-bottom: 1rem solid $second-text-color;
}
}
}
.fixed {
position: fixed;
top: 11rem;
left: 2rem;
right: 2rem;
}
.content {
height: calc(100% - 11rem);
margin-top: 11rem;
width: 100%;
overflow-y: scroll;
.list {
padding-left: 2rem;
padding-right: 2rem;
//padding-right: 2.5rem;
.row {
background: $main-bg;
}
}
}
}
</style> </style>

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;
} }
} }
} }

1166
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;