完善消息页面
This commit is contained in:
zyronon
parent
6057c98406
commit
de872107a8
Binary file not shown.
|
Before Width: | Height: | Size: 369 B |
@ -1,301 +1,302 @@
|
||||
<template>
|
||||
<div class="me">
|
||||
<div class="container">
|
||||
<!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
|
||||
<div class="header">
|
||||
<div class="top pt20p pl10p pr10p">
|
||||
<img src="../assets/img/icon/next.svg" alt="" @click="$emit('back')">
|
||||
<img src="../assets/img/icon/more.svg" alt="">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="container pr10p pl10p pt10p">
|
||||
<div class="head">
|
||||
<img src="../assets/img/icon/head-image.jpeg" class="head-image ml20p">
|
||||
<div class="other-buttons" v-if="false">
|
||||
<div class="attention">
|
||||
关注
|
||||
</div>
|
||||
<div class="more-attention">
|
||||
-
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-buttons ">
|
||||
<div class="collect">
|
||||
<img src="../assets/img/icon/collect-white.svg" alt="">
|
||||
<span class="mr5p">收藏</span>
|
||||
</div>
|
||||
<div class="add-friend">
|
||||
<img src="../assets/img/icon/add-friend-white.svg" alt="">
|
||||
</div>
|
||||
<div class="qr-code">
|
||||
<img src="../assets/img/icon/qr-code-white.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p class="name f22 mt5p mb5p">ttentau</p>
|
||||
<div class="number mb10p">
|
||||
<span>抖音号：605128307</span>
|
||||
<div class="jrtt">
|
||||
<img src="../assets/img/icon/sina.svg" alt="">
|
||||
<span>头条主页</span>
|
||||
<img src="../assets/img/icon/next.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="signature f12 mb10p">
|
||||
<span>填写个性签名更容易获得别人关注哦</span>
|
||||
</div>
|
||||
<div class="info f10 mb10p">
|
||||
<div class="age">
|
||||
<img src="../assets/img/icon/person.svg" alt="">
|
||||
<span>22岁</span>
|
||||
</div>
|
||||
<div class="location">
|
||||
<span>上海</span>
|
||||
</div>
|
||||
<div class="school">
|
||||
四川理工大学
|
||||
</div>
|
||||
</div>
|
||||
<div class="heat mb10p">
|
||||
<span>8获赞</span>
|
||||
<span>38关注</span>
|
||||
<span>42粉丝</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabset">
|
||||
<div class="tab active" @click="toggleTab($event,0)">
|
||||
<span>作品1</span>
|
||||
</div>
|
||||
<div class="tab" @click="toggleTab($event,1)">
|
||||
<span>动态6</span>
|
||||
</div>
|
||||
<div class="tab" @click="toggleTab($event,2)">
|
||||
<span>喜欢6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content oh">
|
||||
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}">
|
||||
<video src="../assets/video/1.mp4" poster="../assets/img/poster/src1-bg.png"></video>
|
||||
<div class="love">
|
||||
<img src="../assets/img/icon/love.svg" alt="">
|
||||
<span class="ml5p">72.3w</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="me">
|
||||
<div class="container">
|
||||
<!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
|
||||
<div class="header">
|
||||
<div class="top pt20p pl10p pr10p">
|
||||
<img src="../assets/img/icon/next.svg" alt="" @click="$emit('back')">
|
||||
<img src="../assets/img/icon/more.svg" alt="">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="container pr10p pl10p pt10p">
|
||||
<div class="head">
|
||||
<img src="../assets/img/icon/head-image.jpeg" class="head-image ml20p">
|
||||
<div class="other-buttons" v-if="false">
|
||||
<div class="attention">
|
||||
关注
|
||||
</div>
|
||||
<div class="more-attention">
|
||||
-
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-buttons ">
|
||||
<div class="collect">
|
||||
<img src="../assets/img/icon/collect-white.svg" alt="">
|
||||
<span class="mr5p">收藏</span>
|
||||
</div>
|
||||
<div class="add-friend">
|
||||
<img src="../assets/img/icon/add-friend-white.svg" alt="">
|
||||
</div>
|
||||
<div class="qr-code">
|
||||
<img src="../assets/img/icon/qr-code-white.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p class="name f22 mt5p mb5p">ttentau</p>
|
||||
<div class="number mb10p">
|
||||
<span>抖音号：605128307</span>
|
||||
<div class="jrtt">
|
||||
<img src="../assets/img/icon/sina.svg" alt="">
|
||||
<span>头条主页</span>
|
||||
<img src="../assets/img/icon/next.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="signature f12 mb10p">
|
||||
<span>填写个性签名更容易获得别人关注哦</span>
|
||||
</div>
|
||||
<div class="info f10 mb10p">
|
||||
<div class="age">
|
||||
<img src="../assets/img/icon/person.svg" alt="">
|
||||
<span>22岁</span>
|
||||
</div>
|
||||
<div class="location">
|
||||
<span>上海</span>
|
||||
</div>
|
||||
<div class="school">
|
||||
四川理工大学
|
||||
</div>
|
||||
</div>
|
||||
<div class="heat mb10p">
|
||||
<span>8获赞</span>
|
||||
<span>38关注</span>
|
||||
<span>42粉丝</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabset">
|
||||
<div class="tab active" @click="toggleTab($event,0)">
|
||||
<span>作品1</span>
|
||||
</div>
|
||||
<div class="tab" @click="toggleTab($event,1)">
|
||||
<span>动态6</span>
|
||||
</div>
|
||||
<div class="tab" @click="toggleTab($event,2)">
|
||||
<span>喜欢6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content oh">
|
||||
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}">
|
||||
<video src="../assets/video/1.mp4" poster="../assets/img/poster/src1-bg.png"></video>
|
||||
<div class="love">
|
||||
<img src="../assets/img/icon/love.svg" alt="">
|
||||
<span class="ml5p">72.3w</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from './Footer.vue'
|
||||
import Footer from './Footer.vue'
|
||||
|
||||
export default {
|
||||
name: "Other",
|
||||
components: {
|
||||
Footer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 0,
|
||||
width: 0,
|
||||
videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.height = window.screen.height
|
||||
this.width = window.screen.width
|
||||
},
|
||||
methods: {
|
||||
toggleTab(e, index) {
|
||||
let childNodes = e.target.parentElement.childNodes
|
||||
childNodes.forEach(function (item) {
|
||||
item.classList.remove('active')
|
||||
})
|
||||
e.target.classList.add('active')
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: "Other",
|
||||
components: {
|
||||
Footer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: 0,
|
||||
width: 0,
|
||||
videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.height = window.screen.height
|
||||
this.width = window.screen.width
|
||||
},
|
||||
methods: {
|
||||
toggleTab(e, index) {
|
||||
let childNodes = e.target.parentElement.childNodes
|
||||
childNodes.forEach(function (item) {
|
||||
item.classList.remove('active')
|
||||
})
|
||||
e.target.classList.add('active')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.me {
|
||||
color: white;
|
||||
.me {
|
||||
color: white;
|
||||
|
||||
.header {
|
||||
background: gray;
|
||||
.header {
|
||||
background: gray;
|
||||
|
||||
.top {
|
||||
/*height: 30%;*/
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url("../assets/img/icon/top-bg.jpg");
|
||||
.top {
|
||||
/*height: 30%;*/
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url("../assets/img/icon/top-bg.jpg");
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
background: #524a4a;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
background: #524a4a;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-image: url("../assets/img/icon/head-image.jpeg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
/*height: 60%;*/
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #2e3244ed;
|
||||
position: relative;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.head-image {
|
||||
background: black;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.my-buttons {
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
|
||||
img {
|
||||
padding: 6px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 60px;
|
||||
color: white;
|
||||
|
||||
.number {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid gray;
|
||||
|
||||
.jrtt {
|
||||
float: right;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heat {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabset {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.tab {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid gold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.video-container {
|
||||
width: 33%;
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: .5px solid black;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.love {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(1) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-image: url("../assets/img/icon/head-image.jpeg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
/*height: 60%;*/
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #2e3244ed;
|
||||
position: relative;
|
||||
|
||||
.head {
|
||||
width: 100%;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.head-image {
|
||||
background: black;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.my-buttons {
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
|
||||
img {
|
||||
padding: 6px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.description {
|
||||
margin-top: 60px;
|
||||
color: white;
|
||||
|
||||
.number {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid gray;
|
||||
|
||||
.jrtt {
|
||||
float: right;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heat {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabset {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.tab {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid gold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.video-container {
|
||||
width: 33%;
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: .5px solid black;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.love {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,14 +3,19 @@
|
||||
<SlideList style="width: 100vw;"
|
||||
@first="first"
|
||||
@end="end"
|
||||
@move="move"
|
||||
v-model:active-index="baseActiveIndex"
|
||||
>
|
||||
<SlideItem style="overflow:auto;" :style="contentStyle" @scroll="scroll" @click="click">
|
||||
<div ref="desc" class="desc">
|
||||
<header ref="header">
|
||||
<img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
|
||||
<img src="../../assets/img/icon/more.svg" alt="">
|
||||
<div class="left">
|
||||
<img src="../../assets/img/icon/next.svg" alt="">
|
||||
<span>切换账号</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/img/icon/more.svg" alt="">
|
||||
<img src="../../assets/img/icon/more.svg" alt="" @click.stop="baseActiveIndex = 1">
|
||||
</div>
|
||||
</header>
|
||||
<div class="detail">
|
||||
<div class="head">
|
||||
@ -25,46 +30,29 @@
|
||||
</div>
|
||||
<div class="my-buttons ">
|
||||
<div class="collect">
|
||||
<img src="../../assets/img/icon/collect-white.svg" alt="">
|
||||
<span class="mr5p">收藏</span>
|
||||
<span class="mr5p">编辑资料</span>
|
||||
<span class="f10p" style="color: darkgray">85%</span>
|
||||
</div>
|
||||
<div class="add-friend">
|
||||
<img src="../../assets/img/icon/add-friend-white.svg" alt="">
|
||||
</div>
|
||||
<div class="qr-code">
|
||||
<img src="../../assets/img/icon/qr-code-white.svg" alt="">
|
||||
<img src="../../assets/img/icon/add.svg" alt="">
|
||||
<span class="mr5p">熟人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<p class="name f22 mt5p mb5p">ttentau</p>
|
||||
<div class="number mb10p">
|
||||
<span class="mr5p">私密账号</span>
|
||||
<span>抖音号：605128307</span>
|
||||
<div class="jrtt">
|
||||
<img src="../../assets/img/icon/sina.svg" alt="">
|
||||
<span>头条主页</span>
|
||||
<img src="../../assets/img/icon/next.svg" alt="">
|
||||
</div>
|
||||
<img src="../../assets/img/icon/qr_code.svg" alt="" @click.stop="$nav('/MyCard')">
|
||||
</div>
|
||||
<div class="signature f12 mb10p">
|
||||
<span>填写个性签名更容易获得别人关注哦</span>
|
||||
</div>
|
||||
<div class="info f10 mb10p">
|
||||
<div class="age">
|
||||
<img src="../../assets/img/icon/person.svg" alt="">
|
||||
<span>22岁</span>
|
||||
</div>
|
||||
<div class="location">
|
||||
<span>上海</span>
|
||||
</div>
|
||||
<div class="school">
|
||||
四川理工大学
|
||||
</div>
|
||||
</div>
|
||||
<div class="heat">
|
||||
<span>8获赞</span>
|
||||
<span>38关注</span>
|
||||
<span>42粉丝</span>
|
||||
<div class="text"><span class="num">8</span>获赞</div>
|
||||
<div class="text"><span class="num">8</span>关注</div>
|
||||
<div class="text"><span class="num">8</span>粉丝</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -240,19 +228,14 @@ export default {
|
||||
contentIndex(newVal, oldVal) {
|
||||
this.changeIndex(newVal, oldVal)
|
||||
},
|
||||
baseActiveIndex(newVal, oldVal) {
|
||||
if (newVal === 1) {
|
||||
console.log('right')
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bodyHeight() {
|
||||
return this.$store.state.bodyHeight
|
||||
},
|
||||
contentStyle(){
|
||||
return{
|
||||
opacity:1
|
||||
contentStyle() {
|
||||
return {
|
||||
opacity: this.baseActiveIndex === 1 ? 0.5 : 1
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -271,11 +254,6 @@ export default {
|
||||
this.$stopPropagation(e)
|
||||
}
|
||||
},
|
||||
move(e) {
|
||||
if (e.x.isDrawRight) {
|
||||
console.log('isDrawRight')
|
||||
}
|
||||
},
|
||||
scroll() {
|
||||
let top = this.tabContents[this.contentIndex].getBoundingClientRect().top
|
||||
this.indicatorFixed = top < this.indicatorHeight;
|
||||
@ -345,7 +323,7 @@ $right-bg-color: #2e3244;
|
||||
}
|
||||
|
||||
.Me {
|
||||
font-size: 1.6rem;
|
||||
background: $right-bg-color;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -359,6 +337,7 @@ $right-bg-color: #2e3244;
|
||||
|
||||
.desc {
|
||||
header {
|
||||
color: white;
|
||||
height: 150px;
|
||||
/* background-image: url('./imgs/header2.jpg'); */
|
||||
background-image: url('data:image/jpeg;base64,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');
|
||||
@ -371,22 +350,37 @@ $right-bg-color: #2e3244;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
padding: 5px;
|
||||
background: #524a4a;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
.left {
|
||||
font-size: 1.2rem;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
padding-right: 13px;
|
||||
padding-left: 5px;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotate(180deg);
|
||||
img {
|
||||
padding: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
img {
|
||||
margin-left: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgba(82, 80, 80, 0.5);
|
||||
padding: 4px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.detail {
|
||||
background: $left-bg-color;
|
||||
background: $right-bg-color;
|
||||
padding: 0 20px;
|
||||
|
||||
.head {
|
||||
@ -399,7 +393,7 @@ $right-bg-color: #2e3244;
|
||||
|
||||
.head-image {
|
||||
background: black;
|
||||
padding: 5px;
|
||||
padding: 2px;
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
@ -407,20 +401,25 @@ $right-bg-color: #2e3244;
|
||||
|
||||
.my-buttons {
|
||||
div {
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
background: rgb(99, 98, 98);
|
||||
margin-right: 5px;
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
color: white;
|
||||
|
||||
img {
|
||||
padding: 6px;
|
||||
height: 20px;
|
||||
&:nth-child(1) {
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
img {
|
||||
padding: 0 6px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -432,49 +431,33 @@ $right-bg-color: #2e3244;
|
||||
transform: translateY(-20px);
|
||||
|
||||
.number {
|
||||
color: darkgray;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid gray;
|
||||
|
||||
.jrtt {
|
||||
float: right;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
float: left;
|
||||
border-radius: 2px;
|
||||
background: #676767;
|
||||
margin-right: 5px;
|
||||
padding: 2px 4px;
|
||||
|
||||
img {
|
||||
height: 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
img {
|
||||
width: 18px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.heat {
|
||||
span {
|
||||
color: darkgray;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.num {
|
||||
color: white;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.4rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,189 +1,341 @@
|
||||
<template>
|
||||
<div id="Message">
|
||||
<div class="container">
|
||||
<div class="header pt15p">
|
||||
<div class="title">
|
||||
<p class="tac fb c-white ">消息</p>
|
||||
<span @click="nav('/myCard')">联系人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt20p"></div>
|
||||
<div class="toolbar mt30p">
|
||||
<div>
|
||||
<img src="../../assets/img/icon/msg-icon1.png" alt="">
|
||||
<span>粉丝</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../assets/img/icon/msg-icon2.png" alt="">
|
||||
<span>赞</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../assets/img/icon/msg-icon3.png" alt="">
|
||||
<span>评论和@</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../assets/img/icon/msg-icon4.png" alt="">
|
||||
<span>随拍互动</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt20p"></div>
|
||||
<div class="messages mt10p">
|
||||
<div class="message top">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="name">游戏小助手</div>
|
||||
<div class="detail">抖出好游戏</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="f14">20:54</div>
|
||||
<div class="number">9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="name">游戏小助手</div>
|
||||
<div class="detail">抖出好游戏</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="f14">20:54</div>
|
||||
<div class="number">9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tac mt18p f12">无更多消息</p>
|
||||
</div>
|
||||
<Footer v-bind:init-tab="4"/>
|
||||
<div id="Message">
|
||||
<div class="header pt15p">
|
||||
<div class="title">
|
||||
<p class="tac fb c-white ">消息</p>
|
||||
<span @click="nav('/myCard')">创建群聊</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<img src="../../assets/img/icon/pause.svg" alt="">
|
||||
<input type="text" placeholder="搜索">
|
||||
</div>
|
||||
<div class="line mb20p"></div>
|
||||
<div class="friends pl10p ">
|
||||
<div class="friend pr10p pl10p" v-for="item in 10">
|
||||
<img src="../../assets/img/icon/head-image.jpeg" alt="">
|
||||
<span>ttenu</span>
|
||||
</div>
|
||||
<div class="friend pr10p">
|
||||
<img src="../../assets/img/icon/next.svg" alt="">
|
||||
<span>状态设置</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt20p"></div>
|
||||
<div class="messages ">
|
||||
<div class="message " 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">粉丝</div>
|
||||
<div class="detail">
|
||||
<img class="sent" src="../../assets/img/icon/close-white.png" alt="">
|
||||
已送达 ，sb，凌晨 01:15
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- <div class="not-read"></div>-->
|
||||
<!-- <img class="camera" src="../../assets/img/icon/close-white.png" alt="">-->
|
||||
<img class="arrow" src="../../assets/img/icon/close-white.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line mt10p"></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"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from '../../components/Footer.vue'
|
||||
import Footer from '../../components/Footer.vue'
|
||||
|
||||
export default {
|
||||
name: "Message",
|
||||
components: {
|
||||
Footer
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
export default {
|
||||
name: "Message",
|
||||
components: {
|
||||
Footer
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#Message {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
background: #2e3244;
|
||||
color: #b8b9c1;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
#Message {
|
||||
padding-bottom: 60px;
|
||||
color: white;
|
||||
|
||||
.header {
|
||||
.title {
|
||||
position: relative;
|
||||
.header {
|
||||
.title {
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
border-radius: 3px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 20px;
|
||||
border-top: 1px solid #494950;
|
||||
}
|
||||
|
||||
.messages {
|
||||
|
||||
.message {
|
||||
padding:13px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.top{
|
||||
background: #353a4f;
|
||||
}
|
||||
&:active{
|
||||
background: #353a4f;
|
||||
}
|
||||
|
||||
.head-image {
|
||||
margin-right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
.name {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
.number {
|
||||
display: inline-block;
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
margin-top: 5px;
|
||||
/*padding: 5px;*/
|
||||
background: yellow;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
height: 40px;
|
||||
background: darkgray;
|
||||
margin: 20px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.friends {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.friend {
|
||||
&:nth-last-child(1) {
|
||||
img {
|
||||
margin: 0 10px;
|
||||
padding: 15px;
|
||||
background: darkgray;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
border-top: 1px solid #494950;
|
||||
}
|
||||
|
||||
.messages {
|
||||
.message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.top {
|
||||
background: #353a4f;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #353a4f;
|
||||
}
|
||||
|
||||
.head-image {
|
||||
margin-left: 30px;
|
||||
margin-right: 15px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid darkgray;
|
||||
|
||||
.left {
|
||||
.name {
|
||||
font-size: 1.8rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 5px;
|
||||
|
||||
.sent {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.camera {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.not-read {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.recommend {
|
||||
.title {
|
||||
padding:20px 20px 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.left {
|
||||
img {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
border-radius: 50%;
|
||||
background: darkgray;
|
||||
padding: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.top {
|
||||
background: #353a4f;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #353a4f;
|
||||
}
|
||||
|
||||
.head-image {
|
||||
margin-left: 20px;
|
||||
margin-right: 15px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 0;
|
||||
|
||||
.left {
|
||||
.name {
|
||||
font-size: 1.8rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 5px;
|
||||
|
||||
.sent {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.button {
|
||||
background: #bb3c3c;
|
||||
margin-left: 8px;
|
||||
padding: 6px 20px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
background: darkgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -236,10 +236,11 @@ export default {
|
||||
this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
|
||||
}
|
||||
|
||||
this.$attrs['onMove'] && this.$emit('move', {
|
||||
x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
|
||||
y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
|
||||
})
|
||||
//todo 太卡了，后面考虑用原生js来写
|
||||
// this.$attrs['onMove'] && this.$emit('move', {
|
||||
// x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
|
||||
// y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
|
||||
// })
|
||||
|
||||
|
||||
if (this.direction === 'row') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user