From 79ee099387fc5f43a453b0a21f289a80fac8e744 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 24 Aug 2021 23:42:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment.vue |   6 +-
 src/components/Share.vue   | 136 ++++++++++++++++++++++++-------------
 src/config/index.js        |   6 +-
 src/pages/Test.vue         |   4 +-
 4 files changed, 96 insertions(+), 56 deletions(-)

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index da198c3..8db60f0 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -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;
diff --git a/src/components/Share.vue b/src/components/Share.vue
index f38244a..99ad175 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -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%;
       }
+    }
 
-      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 {
   .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 {
diff --git a/src/config/index.js b/src/config/index.js
index 561787d..6a5c641 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -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/'
 }
\ No newline at end of file
diff --git a/src/pages/Test.vue b/src/pages/Test.vue
index 36f01e3..6d8af4b 100644
--- a/src/pages/Test.vue
+++ b/src/pages/Test.vue
@@ -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 {