pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化分享组件页面

pull/19/head
zyronon 4 years ago
parent
d1eb1594ee
commit
79ee099387
4 changed files with 96 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/Comment.vue
  2. 136
      src/components/Share.vue
  3. 6
      src/config/index.js
  4. 4
      src/pages/Test.vue

6
src/components/Comment.vue
Unescape View File

@ -3,7 +3,7 @@ @@ -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 { @@ -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 { @@ -127,7 +127,7 @@ export default {
}
}
.no-more{
.no-more {
margin: 10px;
text-align: center;
color: #ccc;

136
src/components/Share.vue
Unescape View File

@ -3,90 +3,97 @@ @@ -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 { @@ -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%;
}
}
span {
display: block;
text-align: center;
word-break: break-all;
.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 { @@ -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 {

6
src/config/index.js
Unescape View File

@ -1,6 +1,8 @@ @@ -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/'
}

4
src/pages/Test.vue
Unescape View File

@ -6,8 +6,7 @@ @@ -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 { @@ -61,7 +60,6 @@ export default {
bottom: 0;
top: 0;
overflow: auto;
color: white;
font-size: 1.4rem;
.content {

Write Preview
Loading…
Cancel
Save