完善细节

src/components/Comment.vue

@@ -28,18 +28,20 @@
                   <div class="name">{{ item.name }}</div>
                   <div class="detail">{{ item.text }}</div>
                   <div class="time-wrapper">
-                    <div class="time">{{ $time(item.time) }}</div>
+                    <div class="left">
-                    <div class="reply-text">回复</div>
+                      <div class="time">{{ $time(item.time) }} · 上海</div>
+                      <div class="reply-text">回复</div>
+                    </div>
+                    <div class="love" @click="loved(item)">
+                      <img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
+                           class="love-image">
+                      <img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
+                           class="love-image">
+                      <span>{{ formatNumber(item.loveNum) }}</span>
+                    </div>
                   </div>
                 </div>
               </div>
-              <div class="love" @click="loved(item)">
-                <img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
-                     class="love-image">
-                <img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
-                     class="love-image">
-                <span>{{ formatNumber(item.loveNum) }}</span>
-              </div>
             </div>
             <div class="replies">
               <div class="reply" v-for="child in item.children">
@@ -54,17 +56,20 @@
                     </div>
                     <div class="detail">{{ child.text }}</div>
                     <div class="time-wrapper">
-                      <div class="time">{{ $time(child.time) }}</div>
+                      <div class="left">
-                      <div class="reply-text">回复</div>
+                        <div class="time">{{ $time(item.time) }} · 上海</div>
+                        <div class="reply-text">回复</div>
+                      </div>
+                      <div class="love" @click="loved(item)">
+                        <img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
+                             class="love-image">
+                        <img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
+                             class="love-image">
+                        <span>{{ formatNumber(item.loveNum) }}</span>
+                      </div>
                     </div>
                   </div>
                 </div>
-                <div class="love" @click="loved(child)">
-                  <img v-if="child.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
-                       class="love-image">
-                  <img v-else src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
-                  <span>{{ formatNumber(child.loveNum) }}</span>
-                </div>
               </div>
               <div class="more">
                 <div class="gang"></div>
@@ -176,6 +181,9 @@ export default {
       isCall: false,
     }
   },
+  mounted() {
+    this.getData()
+  },
   methods: {
     send() {
       this.comments.push({
@@ -211,7 +219,7 @@ export default {
               text: '要么之前吴京说了一句话对一个小女孩说，以后别来娱乐圈',
               loveNum: 9174,
               isLoved: false,
-              time: '2021-08-24 20:25',
+              time: '2022-08-24 20:25',
             },
             {
               id: '11',
@@ -221,7 +229,7 @@ export default {
               text: '@nana max',
               loveNum: 695,
               isLoved: false,
-              time: '2021-08-24 20:29',
+              time: '2023-01-24 20:29',
             },
             {
               id: '12',
@@ -231,7 +239,7 @@ export default {
               text: '对对 我也刷到过这个视频',
               loveNum: 1253,
               isLoved: false,
-              time: '2021-08-24 20:59',
+              time: '2023-02-23 20:59',
             },
           ]
         },
@@ -311,19 +319,6 @@ export default {
     //     this.isCommenting = !this.isCommenting;
     //     console.log(666)
     // }
-    $time(time) {
-      let date = new Date(time)
-      let now = new Date()
-      let day = now.getDate() - date.getDate()
-      let str = ''
-      if (day === 0) {
-        let hour = now.getHours() - date.getHours()
-        str = ` ${hour}小时前`
-      } else if (day === 1) str = `昨天${date.getHours()}:${date.getMinutes()}`
-      else if (day === 2) str = `前天${date.getHours()}:${date.getMinutes()}`
-      else str = time
-      return str
-    },
     call() {
       console.log(this.commit)
     }
@@ -359,21 +354,27 @@ export default {
 }
 
 .comment {
-  width: 100%;
+  width: 100vw;
   height: v-bind(height);
   background: #fff;
   z-index: 5;
   border-radius: 10rem 10rem 0 0;
 
   .wrapper {
+    width: 100%;
     position: relative;
     padding-top: 40rem;
     padding-bottom: 60rem;
   }
 
   .items {
+    width: 100%;
+
     .item {
+      width: 100%;
+
       .main {
+        width: 100%;
         padding: 5rem 0;
         display: flex;
 
@@ -435,12 +436,14 @@ export default {
       }
 
       .content {
+        width: 100%;
         display: flex;
-        flex: 1;
         font-size: 14rem;
 
         .comment-container {
-          width: 85%;
+          flex: 1;
+          margin-right: 20rem;
+
 
           .name {
             color: @second-text-color;
@@ -465,35 +468,40 @@ export default {
           .time-wrapper {
             display: flex;
             align-items: center;
+            justify-content: space-between;
+            font-size: 12rem;
+
+            .left {
+              display: flex;
+
+              .time {
+                color: #c4c3c3;
+                margin-right: 10rem;
+              }
 
-            .time {
+              .reply-text {
-              color: #c4c3c3;
+                color: @second-text-color;
-              margin-right: 15rem;
+              }
             }
 
-            .reply-text {
+            .love {
               color: @second-text-color;
+              display: flex;
+              align-items: center;
+
+              .love-image {
+                width: 18rem;
+                border-radius: 50%;
+              }
+
+              span {
+                font-size: 10rem;
+                word-break: keep-all;
+              }
             }
           }
         }
       }
-
-      .love {
-        color: @second-text-color;
-        text-align: center;
-        width: 30rem;
-        padding-right: 10rem;
-
-        .love-image {
-          width: 25rem;
-          border-radius: 50%;
-        }
-
-        span {
-          font-size: 10rem;
-          transform: translateY(-5rem);
-        }
-      }
     }
   }
 

src/components/dialog/FromBottomDialog.vue

@@ -193,7 +193,7 @@ export default {
   z-index: 9;
   position: fixed;
   width: 100%;
-  overflow: auto;
+  overflow-y: auto;
   padding-top: 24rem;
   bottom: 0;
   left: 0;

src/components/slide/ItemToolbar.vue

@@ -75,12 +75,12 @@ function showComments() {
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
     <!--TODO     -->
-    <div class="message mb2r" @click.stop="showComments">
+    <div class="message mb2r" @click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)">
-      <img v-if="item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
+      <img v-if="props.item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
       <img v-else src="@/assets/img/icon/components/video/star.png" alt="" class="message-image">
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
-    <div v-if="!isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
+    <div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
       <img src="../../assets/img/icon/share-white-full.png" alt="" class="share-image">
       <span>{{ Utils.formatNumber(props.item.share_count) }}</span>
     </div>

src/pages/home/components/IndicatorHome.vue

@@ -205,14 +205,6 @@ export default {
   transition: all .3s;
   font-weight: bold;
 
-  &.isLight {
-    .tab{
-      &.active {
-        color: black!important;
-      }
-    }
-  }
-
   .notice {
     opacity: 0;
     top: 0;

src/utils/index.jsx

@@ -324,6 +324,30 @@ export default {
         return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
     }
   },
+  $time(time) {
+    let date = new dayjs(time)
+    let now = new dayjs()
+    let d = now.valueOf() - date.valueOf()
+    let str = ''
+    if (d < 1000 * 60) {
+      str = '刚刚'
+    } else if (d < 1000 * 60 * 60) {
+      str = `${(d / (1000 * 60)).toFixed()}分钟前`
+    } else if (d < 1000 * 60 * 60 * 24) {
+      str = `${(d / (1000 * 60 * 60)).toFixed()}小时前`
+    } else if (d < 1000 * 60 * 60 * 24 * 2) {
+      str = '1天前'
+    } else if (d < 1000 * 60 * 60 * 24 * 3) {
+      str = '2天前'
+    } else if (d < 1000 * 60 * 60 * 24 * 4) {
+      str = '3天前'
+    } else if (date.isSame(now, 'year')) {
+      str = dayjs(time).format('MM-DD')
+    } else {
+      str = dayjs(time).format('YYYY-MM-DD')
+    }
+    return str
+  },
   $duration(v) {
     if (!v) return '00:00'
     let m = Math.floor(v / 60)