zyronon
4 years ago
5 changed files with 669 additions and 532 deletions
|
Before Width: | Height: | Size: 369 B |
@ -1,301 +1,302 @@ |
|||||||
<template> |
<template> |
||||||
<div class="me"> |
<div class="me"> |
||||||
<div class="container"> |
<div class="container"> |
||||||
<!--<div class="header" v-bind:style="{height:height/2+'px'}">--> |
<!--<div class="header" v-bind:style="{height:height/2+'px'}">--> |
||||||
<div class="header"> |
<div class="header"> |
||||||
<div class="top pt20p pl10p pr10p"> |
<div class="top pt20p pl10p pr10p"> |
||||||
<img src="../assets/img/icon/next.svg" alt="" @click="$emit('back')"> |
<img src="../assets/img/icon/next.svg" alt="" @click="$emit('back')"> |
||||||
<img src="../assets/img/icon/more.svg" alt=""> |
<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> |
||||||
<div class="bottom"> |
<div class="qr-code"> |
||||||
<div class="container pr10p pl10p pt10p"> |
<img src="../assets/img/icon/qr-code-white.svg" alt=""> |
||||||
<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> |
||||||
</div> |
</div> |
||||||
<div class="content oh"> |
<div class="description"> |
||||||
<div class="video-container" v-for="item of videos" v-bind:style="{'height':width/3*1.2+'px'}"> |
<p class="name f22 mt5p mb5p">ttentau</p> |
||||||
<video src="../assets/video/1.mp4" poster="../assets/img/poster/src1-bg.png"></video> |
<div class="number mb10p"> |
||||||
<div class="love"> |
<span>抖音号：605128307</span> |
||||||
<img src="../assets/img/icon/love.svg" alt=""> |
<div class="jrtt"> |
||||||
<span class="ml5p">72.3w</span> |
<img src="../assets/img/icon/sina.svg" alt=""> |
||||||
</div> |
<span>头条主页</span> |
||||||
|
<img src="../assets/img/icon/next.svg" alt=""> |
||||||
</div> |
</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> |
||||||
|
</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> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Footer from './Footer.vue' |
import Footer from './Footer.vue' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "Other", |
name: "Other", |
||||||
components: { |
components: { |
||||||
Footer |
Footer |
||||||
}, |
}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
height: 0, |
height: 0, |
||||||
width: 0, |
width: 0, |
||||||
videos: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}], |
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') |
|
||||||
}, |
|
||||||
} |
|
||||||
} |
} |
||||||
|
}, |
||||||
|
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> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||||
.me { |
.me { |
||||||
color: white; |
color: white; |
||||||
|
|
||||||
.header { |
.header { |
||||||
background: gray; |
background: gray; |
||||||
|
|
||||||
.top { |
.top { |
||||||
/*height: 30%;*/ |
/*height: 30%;*/ |
||||||
height: 100px; |
height: 100px; |
||||||
display: flex; |
display: flex; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
background: url("../assets/img/icon/top-bg.jpg"); |
background: url("../assets/img/icon/top-bg.jpg"); |
||||||
|
|
||||||
img { |
img { |
||||||
border-radius: 50%; |
border-radius: 50%; |
||||||
padding: 5px; |
padding: 5px; |
||||||
background: #524a4a; |
background: #524a4a; |
||||||
height: 20px; |
height: 20px; |
||||||
width: 20px; |
width: 20px; |
||||||
|
|
||||||
&:nth-child(1) { |
&:nth-child(1) { |
||||||
transform: rotate(180deg); |
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; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
.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; |
||||||
} |
} |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
.content { |
.tabset { |
||||||
.video-container { |
display: flex; |
||||||
width: 33%; |
justify-content: space-around; |
||||||
float: left; |
|
||||||
position: relative; |
.tab { |
||||||
overflow: hidden; |
padding-top: 10px; |
||||||
border: .5px solid black; |
padding-bottom: 10px; |
||||||
|
text-align: center; |
||||||
video { |
width: 30%; |
||||||
width: 100%; |
|
||||||
} |
&.active { |
||||||
|
border-bottom: 2px solid gold; |
||||||
.love { |
|
||||||
position: absolute; |
|
||||||
bottom: 10px; |
|
||||||
left: 10px; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
img { |
|
||||||
height: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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> |
</style> |
||||||
|
|||||||
@ -1,189 +1,341 @@ |
|||||||
<template> |
<template> |
||||||
<div id="Message"> |
<div id="Message"> |
||||||
<div class="container"> |
<div class="header pt15p"> |
||||||
<div class="header pt15p"> |
<div class="title"> |
||||||
<div class="title"> |
<p class="tac fb c-white ">消息</p> |
||||||
<p class="tac fb c-white ">消息</p> |
<span @click="nav('/myCard')">创建群聊</span> |
||||||
<span @click="nav('/myCard')">联系人</span> |
</div> |
||||||
</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="line mt20p"></div> |
</div> |
||||||
<div class="toolbar mt30p"> |
<div class="right"> |
||||||
<div> |
<!-- <div class="not-read"></div>--> |
||||||
<img src="../../assets/img/icon/msg-icon1.png" alt=""> |
<!-- <img class="camera" src="../../assets/img/icon/close-white.png" alt="">--> |
||||||
<span>粉丝</span> |
<img class="arrow" src="../../assets/img/icon/close-white.png" alt=""> |
||||||
</div> |
</div> |
||||||
<div> |
</div> |
||||||
<img src="../../assets/img/icon/msg-icon2.png" alt=""> |
</div> |
||||||
<span>赞</span> |
</div> |
||||||
</div> |
<div class="line mt10p"></div> |
||||||
<div> |
<div class="recommend"> |
||||||
<img src="../../assets/img/icon/msg-icon3.png" alt=""> |
<div class="title"> |
||||||
<span>评论和@</span> |
<div class="left"> |
||||||
</div> |
朋友推荐 |
||||||
<div> |
<img src="../../assets/img/icon/close-white.png" alt=""> |
||||||
<img src="../../assets/img/icon/msg-icon4.png" alt=""> |
</div> |
||||||
<span>随拍互动</span> |
<img class="right" src="../../assets/img/icon/close-white.png" alt=""> |
||||||
</div> |
</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> |
||||||
<div class="line mt20p"></div> |
<div class="right"> |
||||||
<div class="messages mt10p"> |
<div class="button">回头</div> |
||||||
<div class="message top"> |
<div class="button">移除</div> |
||||||
<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> |
</div> |
||||||
<p class="tac mt18p f12">无更多消息</p> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer v-bind:init-tab="4"/> |
<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"/> |
||||||
|
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import Footer from '../../components/Footer.vue' |
import Footer from '../../components/Footer.vue' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "Message", |
name: "Message", |
||||||
components: { |
components: { |
||||||
Footer |
Footer |
||||||
}, |
}, |
||||||
data() { |
data() { |
||||||
return {} |
return {} |
||||||
}, |
}, |
||||||
created() { |
created() { |
||||||
|
|
||||||
}, |
}, |
||||||
mounted() { |
mounted() { |
||||||
} |
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||||
#Message { |
#Message { |
||||||
position: fixed; |
padding-bottom: 60px; |
||||||
font-size: 1.6rem; |
color: white; |
||||||
background: #2e3244; |
|
||||||
color: #b8b9c1; |
.header { |
||||||
height: 100%; |
.title { |
||||||
width: 100vw; |
position: relative; |
||||||
|
|
||||||
.header { |
span { |
||||||
.title { |
position: absolute; |
||||||
position: relative; |
right: 10px; |
||||||
|
top: 0; |
||||||
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%; |
||||||
|
} |
||||||
|
|
||||||
.toolbar { |
span { |
||||||
display: flex; |
display: block; |
||||||
justify-content: space-around; |
text-align: center; |
||||||
|
word-break: break-all; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.line { |
||||||
|
border-top: 1px solid #494950; |
||||||
|
} |
||||||
|
|
||||||
|
.messages { |
||||||
|
.message { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&.top { |
||||||
|
background: #353a4f; |
||||||
|
} |
||||||
|
|
||||||
div { |
&:active { |
||||||
text-align: center; |
background: #353a4f; |
||||||
|
} |
||||||
|
|
||||||
img { |
.head-image { |
||||||
border-radius: 3px; |
margin-left: 30px; |
||||||
width: 45px; |
margin-right: 15px; |
||||||
height: 45px; |
width: 50px; |
||||||
|
height: 50px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
} |
.content { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 15px 0; |
||||||
|
border-bottom: 1px solid darkgray; |
||||||
|
|
||||||
span { |
.left { |
||||||
display: block; |
.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; |
||||||
|
} |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
.line { |
} |
||||||
margin: 0 20px; |
} |
||||||
border-top: 1px solid #494950; |
|
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
.messages { |
.item { |
||||||
|
display: flex; |
||||||
.message { |
align-items: center; |
||||||
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%; |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
&.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> |
</style> |
||||||
|
|||||||
Loading…
Reference in new issue