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
Unified 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 @@
<div class="comment f14" v-if="isCommenting"> <div class="comment f14" v-if="isCommenting">
<div class="title mt1r"> <div class="title mt1r">
<p>2.7w条评论</p> <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>
<div class="items"> <div class="items">
<div class="item pl1r pr1r mb1r oh" <div class="item pl1r pr1r mb1r oh"
@ -54,7 +54,7 @@ export default {
// this.isCommenting = !this.isCommenting; // this.isCommenting = !this.isCommenting;
// console.log(666) // console.log(666)
// } // }
call(){ call() {
console.log(this.commit) console.log(this.commit)
} }
} }
@ -127,7 +127,7 @@ export default {
} }
} }
.no-more{ .no-more {
margin: 10px; margin: 10px;
text-align: center; text-align: center;
color: #ccc; color: #ccc;

136
src/components/Share.vue
Unescape View File

@ -3,90 +3,97 @@
<div class="share" v-if="isSharing"> <div class="share" v-if="isSharing">
<div class="title"> <div class="title">
<span>私信给朋友</span> <span>私信给朋友</span>
<img src="../assets/img/icon/close.svg" @click="closeShare"> <back mode="light" img="close" direction="right" @click="closeShare"></back>
</div> </div>
<div class="friends pl1r pb2r"> <div class="friends ">
<div class="friend pr1r pl1r" v-for="item in 10"> <div class="friend " v-for="item in 10">
<img src="../assets/img/icon/head-image.jpeg" alt=""> <img src="../assets/img/icon/head-image.jpeg" alt="">
<span>ttenu</span> <span>ttenu</span>
</div> </div>
<div class="friend pr1r"> <div class="more">
<img src="../assets/img/icon/next.svg" alt=""> <back mode="light" direction="right"></back>
<span>更多</span> <span>更多</span>
</div> </div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="shares pl1r pb2r"> <div class="shares ">
<div class="share-to pr1r pl1r"> <div class="share-to ">
<img src="../assets/img/icon/components/video/tofriend.webp" alt=""> <img src="../assets/img/icon/components/video/torichang.png" alt="">
<span>分享到日常</span> <span>分享到日常</span>
</div> </div>
<div class="share-to pr1r pl1r"> <div class="share-to ">
<img src="../assets/img/icon/components/video/towechat.webp" alt=""> <img src="../assets/img/icon/components/video/towechat.webp" alt="">
<span>朋友圈</span> <span>朋友圈</span>
</div> </div>
<div class="share-to pr1r pl1r"> <div class="share-to ">
<img src="../assets/img/icon/components/video/towechatchat.webp" alt=""> <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
<span>微信好友</span> <span>微信好友</span>
</div> </div>
<div class="share-to pr1r pl1r"> <div class="share-to ">
<img src="../assets/img/icon/components/video/tozone.webp" alt=""> <img src="../assets/img/icon/components/video/tozone.webp" alt="">
<span>QQ空间</span> <span>QQ空间</span>
</div> </div>
<div class="share-to pr1r pl1r"> <div class="share-to ">
<img src="../assets/img/icon/components/video/toqq.webp" alt=""> <img src="../assets/img/icon/components/video/toqq.webp" alt="">
<span>QQ好友</span> <span>QQ好友</span>
</div> </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=""> <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
<span>今日头条</span> <span>今日头条</span>
</div> </div>
<div class="share-to pr1r pl1r"> <div class="share-to ">
<img src="../assets/img/icon/components/video/toweibo.webp" alt=""> <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
<span>微博</span> <span>微博</span>
</div> </div>
</div> </div>
<div class="toolbar pl1r pb2r"> <div class="toolbar ">
<div class="tool pr1r pl1r "> <div class="tool ">
<img src="../assets/img/icon/components/video/comeonlook.webp" alt=""> <img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
<span>一起看视频</span> <span>一起看视频</span>
</div> </div>
<div class="tool pr1r pl1r "> <div class="tool ">
<img src="../assets/img/icon/components/video/warring.png" alt=""> <img src="../assets/img/icon/components/video/warring.png" alt="">
<span>举报</span> <span>举报</span>
</div> </div>
<div class="tool pr1r pl1r "> <div class="tool ">
<img src="../assets/img/icon/components/video/download.png" alt=""> <img src="../assets/img/icon/components/video/download.png" alt="">
<span>保存本地</span> <span>保存本地</span>
</div> </div>
<div class="tool pr1r pl1r "> <div class="tool ">
<img src="../assets/img/icon/components/video/star.png" alt=""> <img src="../assets/img/icon/components/video/star.png" alt="">
<span>收藏</span> <span>收藏</span>
</div> </div>
<div class="tool pr1r pl1r "> <div class="tool ">
<img src="../assets/img/icon/components/video/comeonplay.webp" alt=""> <img src="../assets/img/icon/components/video/comeonplay.png" alt="">
<span>合拍</span> <span>合拍</span>
</div> </div>
<div class="tool pr1r pl1r"> <div class="tool ">
<img src="../assets/img/icon/components/video/bizhi.webp" alt=""> <img src="../assets/img/icon/components/video/bizhi.webp" alt="">
<span>动态壁纸</span> <span>动态壁纸</span>
</div> </div>
<div class="tool pr1r pl1r"> <div class="tool ">
<img src="../assets/img/icon/components/video/dislike.png" alt=""> <img src="../assets/img/icon/components/video/dislike.png" alt="">
<span>不感兴趣</span> <span>不感兴趣</span>
</div> </div>
<div class="tool pr1r pl1r"> <div class="tool ">
<img src="../assets/img/icon/components/video/link.png" alt=""> <img src="../assets/img/icon/components/video/link.png" alt="">
<span>复制链接</span> <span>复制链接</span>
</div> </div>
<div class="tool pr1r pl1r"> <div class="tool ">
<img src="../assets/img/icon/components/video/qrcode.png" alt=""> <img src="../assets/img/icon/components/video/qrcode.png" alt="">
<span>二维码</span> <span>抖音码</span>
</div> </div>
<div class="tool pr1r pl1r"> <div class="tool ">
<img src="../assets/img/icon/hepai.svg" alt=""> <img src="../assets/img/icon/components/video/dou.webp" alt="">
<span>合拍</span> <span>帮上热门</span>
</div>
<div class="tool ">
<img src="../assets/img/icon/components/video/feedback.webp" alt="">
<span>播放反馈</span>
</div> </div>
</div> </div>
</div> </div>
@ -120,57 +127,86 @@ export default {
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
@space-width: 1.8rem;
@icon-width: 4.8rem;
.title { .title {
padding: 20px; padding: 20px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
img { img {
width: 15px; width: 1.4rem;
height: 15px; height: 1.4rem;
padding: .6rem;
border-radius: 50%;
background: @second-btn-color-tran;
//background: rgb(56, 58, 57);
} }
} }
.friends { .friends {
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
padding-right: @space-width * 2;
.friend { .friend {
width: 45px; margin-left: @space-width;
margin-bottom: @space-width;
img { img {
width: 45px; width: @icon-width;
height: 45px; height: @icon-width;
border-radius: 50%; border-radius: 50%;
} }
}
span { .more {
display: block; margin-left: @space-width;
text-align: center; margin-bottom: @space-width;
word-break: break-all;
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; height: 1px;
background: #1c1c1c; background: #1c1c1c;
margin-left: 20px; margin-left: 2rem;
width: calc(100% - 40px); width: calc(100% - 4rem);
margin-bottom: 10px; margin-bottom: 1rem;
} }
.shares { .shares {
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
padding-right: @space-width * 2;
.share-to { .share-to {
margin-left: @space-width;
margin-bottom: @space-width;
img { img {
width: 5rem;
height: 5rem; width: @icon-width;
height: @icon-width;
border-radius: 50%; border-radius: 50%;
} }
@ -186,17 +222,21 @@ export default {
.toolbar { .toolbar {
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
padding-right: @space-width * 2;
.tool { .tool {
float: left; float: left;
margin-left: @space-width;
margin-bottom: @space-width;
img { img {
width: 3rem; width: @icon-width - 2;
height: 3rem; height: @icon-width - 2;
padding: 1rem; padding: 1rem;
border-radius: 50%; border-radius: 50%;
background: @second-btn-color; //background: @second-btn-color;
background: rgb(56, 58, 57);
} }
span { span {

6
src/config/index.js
Unescape View File

@ -1,6 +1,8 @@
export default { export default {
// baseUrl: 'http://192.168.0.105//index.php/v1', // baseUrl: 'http://192.168.0.105//index.php/v1',
// filePreview:'http://192.168.0.105/static/uploads/', // filePreview:'http://192.168.0.105/static/uploads/',
baseUrl: 'http://192.168.10.164//index.php/v1', // baseUrl: 'http://192.168.10.164//index.php/v1',
filePreview:'http://192.168.10.164/static/uploads/' // 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 @@
</template> </template>
</BaseHeader> </BaseHeader>
<div class="content"> <div class="content">
<Share :is-sharing="true" ref="share"/> <Comment :is-commenting="true"/>
</div> </div>
</div> </div>
</template> </template>
@ -61,7 +60,6 @@ export default {
bottom: 0; bottom: 0;
top: 0; top: 0;
overflow: auto; overflow: auto;
color: white;
font-size: 1.4rem; font-size: 1.4rem;
.content { .content {

Write Preview
Loading…
Cancel
Save