选择男家或地区页面
This commit is contained in:
zyronon
parent
08eebfa142
commit
531046e32e
@ -43,6 +43,7 @@ export default {
|
||||
|
||||
const routeDeep = [
|
||||
'/message', '/attention', '/home', '/me', '/publish',
|
||||
'/country-choose',
|
||||
'/edit-userinfo',
|
||||
'/edit-userinfo-item',
|
||||
'/video-detail',
|
||||
|
||||
BIN
src/assets/img/icon/arrow-up.png
Normal file
BIN
src/assets/img/icon/arrow-up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@ -29,6 +29,13 @@
|
||||
background: $main-bg;
|
||||
}
|
||||
}
|
||||
&.no-padding {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
&.border{
|
||||
border-bottom: 1px solid $line-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $active-main-bg;
|
||||
|
||||
@ -38,6 +38,7 @@ export default {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
background: $main-bg;
|
||||
z-index: 2;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
<input 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">
|
||||
<img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear">
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="attention">
|
||||
<header>
|
||||
<span>双流</span>
|
||||
<span @click="$nav('/country-choose')">双流</span>
|
||||
<div class="arrow"></div>
|
||||
</header>
|
||||
<div class="ad">
|
||||
|
||||
@ -1,119 +1,74 @@
|
||||
<template>
|
||||
<div class='countryChoose'>
|
||||
<header>
|
||||
<div class="title">
|
||||
<img src="../../assets/img/icon/close-white.png" alt="" class="close-img">
|
||||
<span>选择国家或地区</span>
|
||||
<base-header>
|
||||
<template v-slot:center>
|
||||
选择国家或地区
|
||||
</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>
|
||||
|
||||
</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 class="row no-active">
|
||||
同城
|
||||
</div>
|
||||
<div class="right">
|
||||
<ul class="indicator-ctn2">
|
||||
<li>A</li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
<li>D</li>
|
||||
<li>E</li>
|
||||
<li>F</li>
|
||||
<li>G</li>
|
||||
<li>H</li>
|
||||
<li>I</li>
|
||||
<li>J</li>
|
||||
<li>K</li>
|
||||
<li>L</li>
|
||||
<li>M</li>
|
||||
<li>N</li>
|
||||
<li>O</li>
|
||||
<li>P</li>
|
||||
<li>Q</li>
|
||||
<li>R</li>
|
||||
<li>S</li>
|
||||
<li>T</li>
|
||||
<li>U</li>
|
||||
<li>V</li>
|
||||
<li>W</li>
|
||||
<li>X</li>
|
||||
<li>Y</li>
|
||||
<li>Z</li>
|
||||
</ul>
|
||||
<div class="list">
|
||||
<div v-for="(value, name) of countryOk">
|
||||
<div :class="name" class="row no-active no-padding border index">
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
<div class="row no-active no-padding border" v-for="item of value">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator-ctn">
|
||||
<div class="indicator">
|
||||
<div class="item arrow" data-index="top"></div>
|
||||
<div class="item">A</div>
|
||||
<div class="item">B</div>
|
||||
<div class="item">C</div>
|
||||
<div class="item">D</div>
|
||||
<div class="item">E</div>
|
||||
<div class="item">F</div>
|
||||
<div class="item">G</div>
|
||||
<div class="item">H</div>
|
||||
<div class="item">I</div>
|
||||
<div class="item">J</div>
|
||||
<div class="item">K</div>
|
||||
<div class="item">L</div>
|
||||
<div class="item">M</div>
|
||||
<div class="item">N</div>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
import Search from "../../components/Search";
|
||||
|
||||
export default {
|
||||
name: "countryChoose",
|
||||
components: {},
|
||||
components: {Search},
|
||||
data() {
|
||||
return {
|
||||
country: [
|
||||
@ -2341,200 +2296,171 @@
|
||||
"pinyin": "Z"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
isShowText: false,
|
||||
searchKey: '',
|
||||
indexOffsetTop: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.countryOk)
|
||||
},
|
||||
mounted() {
|
||||
let ul = document.querySelector('.indicator-ctn2')
|
||||
let ulOffsetTop = ul.offsetTop
|
||||
let itemHeight = 18
|
||||
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'
|
||||
let indexs = document.querySelectorAll('.index')
|
||||
indexs.forEach(v => {
|
||||
this.indexOffsetTop[v.children[0].innerText] = v.offsetTop
|
||||
})
|
||||
ul.addEventListener('touchstart', function ($e) {
|
||||
let pageY = $e.touches[0].pageY - ulOffsetTop
|
||||
let items = document.querySelectorAll('.item')
|
||||
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
|
||||
currentIndex = Math.floor(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) {
|
||||
liEl.forEach((el, index) => {
|
||||
el.style.left = 0
|
||||
el.style.fontSize = '1rem'
|
||||
el.style.color = '#fff'
|
||||
items.forEach((el, index) => {
|
||||
el.style.transform = `translate3d(0,0,0) ${resetScale}`
|
||||
el.style.color = resetColor
|
||||
})
|
||||
})
|
||||
ul.addEventListener('touchmove', function ($e) {
|
||||
liEl.forEach((el, index) => {
|
||||
el.style.left = 0
|
||||
el.style.fontSize = '1rem'
|
||||
el.style.color = '#fff'
|
||||
})
|
||||
let pageY = $e.touches[0].pageY - ulOffsetTop
|
||||
let currentIndex = pageY / itemHeight
|
||||
currentIndex = Math.floor(currentIndex)
|
||||
render(currentIndex)
|
||||
console.log(currentIndex)
|
||||
})
|
||||
|
||||
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'
|
||||
let render = (currentIndex) => {
|
||||
// console.log('currentIndex', currentIndex)
|
||||
let scale = 'scale(1.2)'
|
||||
items[currentIndex].style.transform = `translate3d(${-itemHeight * 4}px,0,0) ${scale}`
|
||||
items[currentIndex].style.color = '#fff'
|
||||
this.goto(items[currentIndex])
|
||||
for (let i = 1; i < 5; i++) {
|
||||
let nextIndex = currentIndex + i
|
||||
let preIndex = currentIndex - i
|
||||
if (preIndex >= 0) {
|
||||
if (i === 4) {
|
||||
items[preIndex].style.transform = `translate3d(0,0,0) ${resetScale}`
|
||||
items[preIndex].style.color = resetColor
|
||||
} else {
|
||||
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'
|
||||
|
||||
|
||||
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'
|
||||
items[preIndex].style.transform = `translate3d(${-itemHeight * (4 - i)}px,0,0) ${scale}`
|
||||
items[preIndex].style.color = `#ffffff${22 * i}`
|
||||
}
|
||||
}
|
||||
if (nextIndex < 26) {
|
||||
if (i === 4) {
|
||||
items[nextIndex].style.transform = `translate3d(0,0,0) ${resetScale}`
|
||||
items[nextIndex].style.color = resetColor
|
||||
} else {
|
||||
items[nextIndex].style.transform = `translate3d(${-itemHeight * (4 - i)}px,0,0) ${scale}`
|
||||
items[nextIndex].style.color = `#ffffff${22 * i}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
.countryChoose {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 1.6rem;
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
@import "../../assets/scss/index";
|
||||
|
||||
header {
|
||||
background: red;
|
||||
height: 110px;
|
||||
width: 100%;
|
||||
.countryChoose {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
margin-top: 110px;
|
||||
.indicator-ctn {
|
||||
width: 2rem;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
right: 0.5rem;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
width: 95%;
|
||||
height: calc(100% - 110px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 5%;
|
||||
height: calc(100% - 110px);
|
||||
.indicator {
|
||||
width: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
justify-content: space-between;
|
||||
|
||||
.indicator-ctn2 {
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 468px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
position: absolute;
|
||||
transition: all .3s;
|
||||
height: 18px;
|
||||
div {
|
||||
color: $second-text-color;
|
||||
//transition: all .3s;
|
||||
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>
|
||||
|
||||
@ -355,20 +355,18 @@ export default {
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
|
||||
img {
|
||||
padding: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
img {
|
||||
margin-left: 20px;
|
||||
margin-left: 2rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
padding: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: .6rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -28,7 +28,8 @@
|
||||
<template v-else>
|
||||
<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 @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>
|
||||
</div>
|
||||
<div class="record" v-else>
|
||||
@ -37,10 +38,34 @@
|
||||
</div>
|
||||
<div class="options" v-if="showOption">
|
||||
<div class="option-wrapper">
|
||||
<div class="option" v-for="i in 7">
|
||||
<img src="../../assets/img/icon/举报.svg" alt="">
|
||||
<div class="option">
|
||||
<img src="../../assets/img/icon/message/photo.png" alt="">
|
||||
<span>照片</span>
|
||||
</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>
|
||||
@ -495,12 +520,14 @@ export default {
|
||||
}
|
||||
|
||||
.options {
|
||||
padding-top: 1.5rem;
|
||||
font-size: 1.4rem;
|
||||
width: 100vw;
|
||||
padding: 1.5rem;
|
||||
height: 30vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
.option-wrapper {
|
||||
padding: 1.5rem;
|
||||
box-sizing: border-box;
|
||||
$grid-width: calc((100vw - 3rem) / 4);
|
||||
color: black;
|
||||
display: grid;
|
||||
@ -517,7 +544,7 @@ export default {
|
||||
border-radius: .4rem;
|
||||
background: whitesmoke;
|
||||
padding: 1rem;
|
||||
width: 2.5rem;
|
||||
width: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,20 +25,20 @@
|
||||
<div class="row" @click="$nav('/set-remark')">
|
||||
<div class="left">设备备注</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/img/icon/back.png" alt="">
|
||||
<back direction="right" scale="1.2" ></back>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO 没做 -->
|
||||
<div class="row">
|
||||
<div class="left">举报</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/img/icon/back.png" alt="">
|
||||
<back direction="right" scale="1.2" ></back>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" @click="blockDialog = true">
|
||||
<div class="left">拉黑</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/img/icon/back.png" alt="">
|
||||
<back direction="right" scale="1.2" ></back>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,7 +52,7 @@
|
||||
<div class="notice">
|
||||
拉黑后，对方将无法搜索到你，也不能再给你发私信
|
||||
</div>
|
||||
<div class="row">确认拉黑</div>
|
||||
<div class="row red">确认拉黑</div>
|
||||
<div class="row">不让 TA 看</div>
|
||||
<div class="space"></div>
|
||||
<div class="row" @click="blockDialog = false">取消</div>
|
||||
@ -164,6 +164,10 @@ export default {
|
||||
&:nth-last-child(1) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&.red{
|
||||
color: $primary-btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
|
||||
@ -54,57 +54,16 @@
|
||||
</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>
|
||||
<Footer v-bind:init-tab="4"/>
|
||||
|
||||
<from-bottom-dialog v-model="createChatDialog">
|
||||
<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">
|
||||
<div class="search-result" v-if="searchFriends.length">
|
||||
<div class="search-result-item" v-for="item in searchFriends"
|
||||
@ -115,8 +74,8 @@
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="account">{{ item.account ? '抖音号:' + item.account : '' }}</span>
|
||||
</div>
|
||||
<img v-if="item.select" src="../../assets/img/icon/back.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/checked.png" alt="">
|
||||
<img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-result" v-else>
|
||||
@ -142,8 +101,8 @@
|
||||
<img class="left" src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
<div class="right">
|
||||
<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/close.svg" alt="">
|
||||
<img v-if="item.select" src="../../assets/img/icon/message/checked.png" alt="">
|
||||
<img v-if="!item.select" src="../../assets/img/icon/message/no-check2.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -195,8 +154,8 @@ export default {
|
||||
return {
|
||||
createChatSearchKey: '',
|
||||
showJoinedChat: false,
|
||||
// createChatDialog: false,
|
||||
createChatDialog: false,
|
||||
isShowText: false,
|
||||
text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
|
||||
friends: [
|
||||
{
|
||||
@ -272,7 +231,8 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -335,6 +295,7 @@ export default {
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//background: #fff;
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-top: 1rem;
|
||||
@ -355,7 +316,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -430,7 +391,7 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1.5rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -134,7 +134,7 @@ export default {
|
||||
return parseFloat(val)
|
||||
},
|
||||
$setCss(el, key, value) {
|
||||
// console.log(value)
|
||||
console.log(value)
|
||||
if (key === 'transform') {
|
||||
//直接设置不生效
|
||||
el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user