优化分享组件页面
This commit is contained in:
zyronon
parent
d1eb1594ee
commit
79ee099387
@ -3,7 +3,7 @@
|
||||
<div class="comment f14" v-if="isCommenting">
|
||||
<div class="title mt1r">
|
||||
<p>2.7w条评论</p>
|
||||
<img src="../assets/img/icon/close.svg" @click.stop="$emit('update:is-commenting',false)">
|
||||
<back mode="dark" img="close" direction="right" @click.stop="$emit('update:is-commenting',false)"/>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="item pl1r pr1r mb1r oh"
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
// this.isCommenting = !this.isCommenting;
|
||||
// console.log(666)
|
||||
// }
|
||||
call(){
|
||||
call() {
|
||||
console.log(this.commit)
|
||||
}
|
||||
}
|
||||
@ -127,7 +127,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.no-more{
|
||||
.no-more {
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
|
||||
@ -3,90 +3,97 @@
|
||||
<div class="share" v-if="isSharing">
|
||||
<div class="title">
|
||||
<span>私信给朋友</span>
|
||||
<img src="../assets/img/icon/close.svg" @click="closeShare">
|
||||
<back mode="light" img="close" direction="right" @click="closeShare"></back>
|
||||
</div>
|
||||
<div class="friends pl1r pb2r">
|
||||
<div class="friend pr1r pl1r" v-for="item in 10">
|
||||
<div class="friends ">
|
||||
<div class="friend " v-for="item in 10">
|
||||
<img src="../assets/img/icon/head-image.jpeg" alt="">
|
||||
<span>ttenu</span>
|
||||
</div>
|
||||
<div class="friend pr1r">
|
||||
<img src="../assets/img/icon/next.svg" alt="">
|
||||
<div class="more">
|
||||
<back mode="light" direction="right"></back>
|
||||
<span>更多</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
<div class="shares pl1r pb2r">
|
||||
<div class="share-to pr1r pl1r">
|
||||
<img src="../assets/img/icon/components/video/tofriend.webp" alt="">
|
||||
<div class="shares ">
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/torichang.png" alt="">
|
||||
<span>分享到日常</span>
|
||||
</div>
|
||||
<div class="share-to pr1r pl1r">
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/towechat.webp" alt="">
|
||||
<span>朋友圈</span>
|
||||
</div>
|
||||
<div class="share-to pr1r pl1r">
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
|
||||
<span>微信好友</span>
|
||||
</div>
|
||||
<div class="share-to pr1r pl1r">
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/tozone.webp" alt="">
|
||||
<span>QQ空间</span>
|
||||
</div>
|
||||
<div class="share-to pr1r pl1r">
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/toqq.webp" alt="">
|
||||
<span>QQ好友</span>
|
||||
</div>
|
||||
<div class="share-to pr1r pl1r">
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/duoshan.png" alt="">
|
||||
<span>多闪</span>
|
||||
</div>
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
|
||||
<span>今日头条</span>
|
||||
</div>
|
||||
<div class="share-to pr1r pl1r">
|
||||
<div class="share-to ">
|
||||
<img src="../assets/img/icon/components/video/toweibo.webp" alt="">
|
||||
<span>微博</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar pl1r pb2r">
|
||||
<div class="tool pr1r pl1r ">
|
||||
<div class="toolbar ">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
|
||||
<span>一起看视频</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r ">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/warring.png" alt="">
|
||||
<span>举报</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r ">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/download.png" alt="">
|
||||
<span>保存本地</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r ">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/star.png" alt="">
|
||||
<span>收藏</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r ">
|
||||
<img src="../assets/img/icon/components/video/comeonplay.webp" alt="">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/comeonplay.png" alt="">
|
||||
<span>合拍</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/bizhi.webp" alt="">
|
||||
<span>动态壁纸</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/dislike.png" alt="">
|
||||
<span>不感兴趣</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/link.png" alt="">
|
||||
<span>复制链接</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r">
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/qrcode.png" alt="">
|
||||
<span>二维码</span>
|
||||
<span>抖音码</span>
|
||||
</div>
|
||||
<div class="tool pr1r pl1r">
|
||||
<img src="../assets/img/icon/hepai.svg" alt="">
|
||||
<span>合拍</span>
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/dou.webp" alt="">
|
||||
<span>帮上热门</span>
|
||||
</div>
|
||||
<div class="tool ">
|
||||
<img src="../assets/img/icon/components/video/feedback.webp" alt="">
|
||||
<span>播放反馈</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -120,57 +127,86 @@ export default {
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
|
||||
@space-width: 1.8rem;
|
||||
@icon-width: 4.8rem;
|
||||
|
||||
.title {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
padding: .6rem;
|
||||
border-radius: 50%;
|
||||
background: @second-btn-color-tran;
|
||||
//background: rgb(56, 58, 57);
|
||||
}
|
||||
}
|
||||
|
||||
.friends {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding-right: @space-width * 2;
|
||||
|
||||
.friend {
|
||||
width: 45px;
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
|
||||
img {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
|
||||
img {
|
||||
width: @icon-width - 2;
|
||||
height: @icon-width - 2;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
background: @second-btn-color-tran;
|
||||
//background: rgb(56, 58, 57);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line{
|
||||
.line {
|
||||
height: 1px;
|
||||
background: #1c1c1c;
|
||||
margin-left: 20px;
|
||||
width: calc(100% - 40px);
|
||||
margin-bottom: 10px;
|
||||
margin-left: 2rem;
|
||||
width: calc(100% - 4rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.shares {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding-right: @space-width * 2;
|
||||
|
||||
.share-to {
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
|
||||
|
||||
img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
|
||||
width: @icon-width;
|
||||
height: @icon-width;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -186,17 +222,21 @@ export default {
|
||||
.toolbar {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding-right: @space-width * 2;
|
||||
|
||||
|
||||
.tool {
|
||||
float: left;
|
||||
margin-left: @space-width;
|
||||
margin-bottom: @space-width;
|
||||
|
||||
img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
width: @icon-width - 2;
|
||||
height: @icon-width - 2;
|
||||
padding: 1rem;
|
||||
border-radius: 50%;
|
||||
background: @second-btn-color;
|
||||
//background: @second-btn-color;
|
||||
background: rgb(56, 58, 57);
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
export default {
|
||||
// baseUrl: 'http://192.168.0.105//index.php/v1',
|
||||
// filePreview:'http://192.168.0.105/static/uploads/',
|
||||
baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||
filePreview:'http://192.168.10.164/static/uploads/'
|
||||
// baseUrl: 'http://192.168.10.164//index.php/v1',
|
||||
// filePreview:'http://192.168.10.164/static/uploads/'
|
||||
baseUrl: 'http://localhost//index.php/v1',
|
||||
filePreview:'http://localhost/static/uploads/'
|
||||
}
|
||||
@ -6,8 +6,7 @@
|
||||
</template>
|
||||
</BaseHeader>
|
||||
<div class="content">
|
||||
<Share :is-sharing="true" ref="share"/>
|
||||
|
||||
<Comment :is-commenting="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -61,7 +60,6 @@ export default {
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow: auto;
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
|
||||
.content {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user