zyronon
4 years ago
5 changed files with 669 additions and 532 deletions
|
Before Width: | Height: | Size: 369 B |
@ -1,301 +1,302 @@
@@ -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 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="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 class="qr-code"> |
||||
<img src="../assets/img/icon/qr-code-white.svg" alt=""> |
||||
</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 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' |
||||
|
||||
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') |
||||
}, |
||||
} |
||||
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') |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.me { |
||||
color: white; |
||||
|
||||
.header { |
||||
background: gray; |
||||
|
||||
.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; |
||||
|
||||
&:nth-child(1) { |
||||
transform: rotate(180deg); |
||||
} |
||||
} |
||||
.me { |
||||
color: white; |
||||
|
||||
.header { |
||||
background: gray; |
||||
|
||||
.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; |
||||
|
||||
&: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; |
||||
} |
||||
} |
||||
|
||||
.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 { |
||||
.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; |
||||
} |
||||
} |
||||
.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> |
||||
|
||||
@ -1,189 +1,341 @@
@@ -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 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 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="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="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 class="right"> |
||||
<div class="button">回头</div> |
||||
<div class="button">移除</div> |
||||
</div> |
||||
<p class="tac mt18p f12">无更多消息</p> |
||||
</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> |
||||
<Footer v-bind:init-tab="4"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Footer from '../../components/Footer.vue' |
||||
|
||||
export default { |
||||
name: "Message", |
||||
components: { |
||||
Footer |
||||
}, |
||||
data() { |
||||
return {} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
mounted() { |
||||
} |
||||
} |
||||
import Footer from '../../components/Footer.vue' |
||||
|
||||
export default { |
||||
name: "Message", |
||||
components: { |
||||
Footer |
||||
}, |
||||
data() { |
||||
return {} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
mounted() { |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
#Message { |
||||
position: fixed; |
||||
font-size: 1.6rem; |
||||
background: #2e3244; |
||||
color: #b8b9c1; |
||||
height: 100%; |
||||
width: 100vw; |
||||
|
||||
.header { |
||||
.title { |
||||
position: relative; |
||||
|
||||
span { |
||||
position: absolute; |
||||
right: 10px; |
||||
top: 0; |
||||
} |
||||
} |
||||
#Message { |
||||
padding-bottom: 60px; |
||||
color: white; |
||||
|
||||
.header { |
||||
.title { |
||||
position: relative; |
||||
|
||||
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 { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
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; |
||||
} |
||||
|
||||
div { |
||||
text-align: center; |
||||
&:active { |
||||
background: #353a4f; |
||||
} |
||||
|
||||
img { |
||||
border-radius: 3px; |
||||
width: 45px; |
||||
height: 45px; |
||||
.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; |
||||
|
||||
span { |
||||
display: block; |
||||
} |
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.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 { |
||||
|
||||
.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%; |
||||
|
||||
} |
||||
} |
||||
} |
||||
.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> |
||||
|
||||
Loading…
Reference in new issue