diff --git a/src/assets/img/icon/QQ.svg b/src/assets/img/icon/QQ.svg
deleted file mode 100644
index aceac9e..0000000
--- a/src/assets/img/icon/QQ.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704183989" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="35475" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M918.67136 594.22848c-15.26656-37.2352-35.32928-70.4064-56.28288-96.06016 9.82016-13.0304 16.0768-32.64256 16.0768-54.58176 0-30.01088-11.6992-55.65952-28.2112-66.07616 2.5792-16.48 3.92576-33.36448 3.92576-50.56128C854.17984 146.34752 706.68032 0 524.69888 0 342.8096 0 195.29728 146.34752 195.29728 326.94912c0 17.36064 1.37728 34.40128 4.00512 51.03104-16.14976 10.70976-27.50592 36.04736-27.50592 65.6064 0 17.15072 3.82592 32.88064 10.19392 45.15584-21.12512 22.8032-41.71392 52.03968-58.58048 85.6384-46.71104 93.10848-39.7376 187.2192-10.97088 202.54592 14.75584 7.85664 53.2352-16.82432 91.0272-62.62656 6.12992 53.89696 31.6352 103.09248 70.6688 142.68672-64.66816 19.12192-107.52768 56.8704-101.78432 95.18592 7.15392 48.41728 89.03808 79.4432 182.95552 69.31072 68.7296-7.44576 124.7936-34.87872 147.1232-68.04864 5.76256 0.25984 11.56352 0.39936 17.40416 0.39936 9.36832 0 18.63552-0.3584 27.79776-1.02016 22.82112 32.79872 76.86144 60.31616 142.4064 68.68992 91.05792 11.56864 169.87392-18.18624 175.99488-66.46912 4.90112-38.49088-37.76256-77.15968-101.35808-97.15072 37.82144-38.016 63.12192-84.98304 70.65984-136.51712 33.55904 45.888 67.87072 75.2 85.81888 71.25888C942.36288 787.97312 957.5232 689.01376 918.67136 594.22848z" p-id="35476" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/icon/newicon/c38.png b/src/assets/img/icon/newicon/c38.png
deleted file mode 100644
index 55103cd..0000000
Binary files a/src/assets/img/icon/newicon/c38.png and /dev/null differ
diff --git a/src/assets/img/icon/newicon/c50.png b/src/assets/img/icon/newicon/c50.png
deleted file mode 100644
index 2ffb8ac..0000000
Binary files a/src/assets/img/icon/newicon/c50.png and /dev/null differ
diff --git a/src/assets/img/icon/qiangjing.svg b/src/assets/img/icon/qiangjing.svg
deleted file mode 100644
index 4a18d07..0000000
--- a/src/assets/img/icon/qiangjing.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702199514" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10387" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M509.866667 896a106.773333 106.773333 0 0 1-104.384 85.333333H149.184A106.688 106.688 0 0 1 42.666667 874.816V618.517333a106.752 106.752 0 0 1 85.333333-104.405333V149.482667A106.816 106.816 0 0 1 234.816 42.666667h639.701333A106.816 106.816 0 0 1 981.333333 149.482667v639.701333A106.816 106.816 0 0 1 874.517333 896H509.866667z m2.133333-85.333333h362.517333c11.861333 0 21.482667-9.6 21.482667-21.482667V149.482667C896 137.621333 886.4 128 874.517333 128H234.816C222.954667 128 213.333333 137.6 213.333333 149.482667V512h192.149334A106.688 106.688 0 0 1 512 618.517333V810.666667zM128 618.517333v256.298667c0 11.541333 9.6 21.184 21.184 21.184h256.298667c11.541333 0 21.184-9.6 21.184-21.184V618.517333c0-11.541333-9.6-21.184-21.184-21.184H149.184c-11.541333 0-21.184 9.6-21.184 21.184z" fill="#000000" p-id="10388"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/icon/qr_code.svg b/src/assets/img/icon/qr_code.svg
deleted file mode 100644
index 7d801b0..0000000
--- a/src/assets/img/icon/qr_code.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539702255514" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12890" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M384 128c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H170.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667V170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666667H170.666667C123.733333 85.333333 85.333333 123.733333 85.333333 170.666667v213.333333c0 46.933333 38.4 85.333333 85.333334 85.333333h213.333333c46.933333 0 85.333333-38.4 85.333333-85.333333V170.666667c0-46.933333-38.4-85.333333-85.333333-85.333334zM853.333333 128c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H640c-23.466667 0-42.666667-19.2-42.666667-42.666667V170.666667c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666667H640c-46.933333 0-85.333333 38.4-85.333333 85.333334v213.333333c0 46.933333 38.4 85.333333 85.333333 85.333333h213.333333c46.933333 0 85.333333-38.4 85.333334-85.333333V170.666667c0-46.933333-38.4-85.333333-85.333334-85.333334zM384 597.333333c23.466667 0 42.666667 19.2 42.666667 42.666667v213.333333c0 23.466667-19.2 42.666667-42.666667 42.666667H170.666667c-23.466667 0-42.666667-19.2-42.666667-42.666667V640c0-23.466667 19.2-42.666667 42.666667-42.666667h213.333333m0-42.666666H170.666667c-46.933333 0-85.333333 38.4-85.333334 85.333333v213.333333c0 46.933333 38.4 85.333333 85.333334 85.333334h213.333333c46.933333 0 85.333333-38.4 85.333333-85.333334V640c0-46.933333-38.4-85.333333-85.333333-85.333333zM748.8 917.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333333 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333333 21.333333zM898.133333 917.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333333-21.333333s21.333333 8.533333 21.333334 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333334 21.333333zM599.466667 917.333333c-12.8 0-21.333333-8.533333-21.333334-21.333333V597.333333c0-12.8 8.533333-21.333333 21.333334-21.333333s21.333333 8.533333 21.333333 21.333333v298.666667c0 12.8-10.666667 21.333333-21.333333 21.333333z" p-id="12891"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/icon/sq-share-qqzone-01.svg b/src/assets/img/icon/sq-share-qqzone-01.svg
deleted file mode 100644
index bfa9519..0000000
--- a/src/assets/img/icon/sq-share-qqzone-01.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539704109094" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34711" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M959.312722 404.165016c0-9.907651 0-7.187703-9.907651-7.187703h-267.524986l-39.658231-70.61836-108.965738-209.4278h-19.84293l-99.06218 209.4278-39.654138 70.61836h-310.008567v4.496408l55.912428 39.654138 156.795069 138.79409-35.58138 317.240271c0 9.907651 2.035356 9.907651 21.846564 9.907651l258.654968-158.621671 258.109546 158.621671c9.93528 0 10.177803 0 20.085454-9.907651l-49.409317-317.240271 148.683321-127.548978 59.527768-48.207955z m-653.959176 303.975153l287.340288-234.193857-267.52908-45.853327h406.245398l-247.716848 224.286206 257.621429 55.759955h-435.961187z" p-id="34712" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/img/icon/wechat.svg b/src/assets/img/icon/wechat.svg
deleted file mode 100644
index 19d2fa3..0000000
--- a/src/assets/img/icon/wechat.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1539703648430" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29219" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M692.313043 347.269565c11.130435 0 22.26087 0 35.617391 2.226087C696.765217 204.8 540.93913 95.721739 362.852174 95.721739c-198.121739 0-360.626087 135.791304-360.626087 307.2 0 100.173913 53.426087 180.313043 144.695652 242.643478L111.304348 756.869565l126.886957-62.330435c44.521739 8.904348 82.365217 17.808696 126.886957 17.808696 11.130435 0 22.26087 0 33.391304-2.226087-6.678261-24.486957-11.130435-48.973913-11.130435-75.686957C385.113043 476.382609 520.904348 347.269565 692.313043 347.269565L692.313043 347.269565zM498.643478 249.321739c26.713043 0 44.521739 17.808696 44.521739 44.521739 0 26.713043-17.808696 44.521739-44.521739 44.521739-26.713043 0-53.426087-17.808696-53.426087-44.521739C445.217391 267.130435 471.930435 249.321739 498.643478 249.321739L498.643478 249.321739zM244.869565 340.591304c-26.713043 0-53.426087-17.808696-53.426087-44.521739 0-26.713043 26.713043-44.521739 53.426087-44.521739 26.713043 0 44.521739 17.808696 44.521739 44.521739C291.617391 322.782609 273.808696 340.591304 244.869565 340.591304L244.869565 340.591304zM244.869565 340.591304" p-id="29220" fill="#ffffff"></path><path d="M1021.773913 629.982609c0-144.695652-144.695652-262.678261-307.2-262.678261-171.408696 0-307.2 117.982609-307.2 262.678261 0 144.695652 135.791304 262.678261 307.2 262.678261 35.617391 0 71.234783-8.904348 109.078261-17.808696l97.947826 53.426087-26.713043-91.269565C968.347826 783.582609 1021.773913 710.121739 1021.773913 629.982609L1021.773913 629.982609zM616.626087 583.234783c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617391 26.713043 0 44.521739 17.808696 44.521739 35.617391C661.147826 565.426087 643.33913 583.234783 616.626087 583.234783L616.626087 583.234783zM814.747826 583.234783c-17.808696 0-35.617391-17.808696-35.617391-35.617391 0-17.808696 17.808696-35.617391 35.617391-35.617391 26.713043 0 44.521739 17.808696 44.521739 35.617391C859.269565 565.426087 841.46087 583.234783 814.747826 583.234783L814.747826 583.234783zM814.747826 583.234783" p-id="29221" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/scss/color.less b/src/assets/scss/color.less
index 8b77e69..37bcc06 100644
--- a/src/assets/scss/color.less
+++ b/src/assets/scss/color.less
@@ -5,7 +5,6 @@
 @second-btn-color-tran: rgba(58, 58, 70, .4);
 @line-color: rgb(37, 45, 66);
 
-
 @primary-btn-color: rgb(252, 47, 86);
 @disable-primary-btn-color: rgba(252, 47, 86, .5);
 
diff --git a/src/components/AutoInput.vue b/src/components/AutoInput.vue
index 61e8582..0a0aafb 100644
--- a/src/components/AutoInput.vue
+++ b/src/components/AutoInput.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="edit" contenteditable @input="changeText">{{ innerText }}</div>
+  <div ref="input"
+       :placeholder="placeholder"
+       class="auto-input"
+       contenteditable
+       @input="changeText">{{ innerText }}
+  </div>
 </template>
 
 <script>
@@ -7,6 +12,13 @@ export default {
   name: "AutoInput",
   props: {
     modelValue: String,
+    placeholder: {
+      type: String,
+      default: '留下你的精彩评论吧'
+    }
+  },
+  mounted() {
+    // this.$refs.input.setAttribute("placeholder", "改变")
   },
   data: function () {
     return {
@@ -21,27 +33,27 @@ export default {
 }
 </script>
 
-<style scoped>
-.edit {
+<style scoped lang="less">
+
+.auto-input {
   width: 100%;
-  max-height: 70px;
-  background: #eee;
+  max-height: 7rem;
   overflow-y: scroll;
-  padding: 8px 10px;
-  border-radius: 30px;
+  padding: 0 .5rem;
   outline: none;
 }
 
-.edit::-webkit-scrollbar {
+.auto-input::-webkit-scrollbar {
   width: 0 !important
 }
 
-.edit:empty::before {
-  content: "留下你的精彩评论吧";
+.auto-input:empty::before {
+  /*content: "留下你的精彩评论吧";*/
+  content: attr(placeholder);
   color: #999999;
 }
 
-.edit:focus::before {
+.auto-input:focus::before {
   content: none;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 8db60f0..43985c9 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,59 +1,244 @@
 <template>
   <transition name="comment">
-    <div class="comment f14" v-if="isCommenting">
-      <div class="title mt1r">
-        <p>2.7w条评论</p>
-        <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"
-             v-for="item in 2"
-        >
-          <div class="content pull-left ">
-            <img src="../assets/img/icon/head-image.jpeg" alt="" class="head-image pull-left">
-            <div class="pull-right comment-container">
-              <div class="name">@ttentau</div>
-              <div class="detail">其实我也不知道评论点什么啊啊啊看吧看吧看吧</div>
-              <div class="time mt10p">10-02</div>
+    <div class="comment" v-if="isCommenting">
+      <div class="wrapper">
+        <div class="title">
+          <p>2.7w条评论</p>
+          <back mode="dark" img="close" direction="right" @click.stop="$emit('update:is-commenting',false)"/>
+        </div>
+        <div class="items">
+          <div class="item" v-for="item in comments">
+            <div class="main" v-longpress="e => showOptions(item)">
+              <div class="content">
+                <img :src="item.avatar" alt="" class="head-image">
+                <div class="comment-container">
+                  <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="reply-text">回复</div>
+                  </div>
+                </div>
+              </div>
+              <div class="love" @click="loved(item)">
+                <img v-if="item.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>{{ $likeNum(item.loveNum) }}</span>
+              </div>
+            </div>
+            <div class="replies">
+              <div class="reply" v-for="child in item.children">
+                <div class="content" v-longpress="e => showOptions(child)">
+                  <img :src="child.avatar" alt="" class="head-image">
+                  <div class="comment-container">
+                    <div class="name">
+                      {{ child.name }}
+                      <div class="reply-user" v-if="child.replay"></div>
+                      {{ child.replay }}
+                    </div>
+                    <div class="detail">{{ child.text }}</div>
+                    <div class="time-wrapper">
+                      <div class="time">{{ $time(child.time) }}</div>
+                      <div class="reply-text">回复</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>{{ $likeNum(child.loveNum) }}</span>
+                </div>
+              </div>
+              <div class="more">
+                <div class="gang"></div>
+                <span>展开更多回复</span>
+                <div class="arrow"></div>
+              </div>
             </div>
           </div>
-          <div class="love pull-right">
-            <img src="../assets/img/icon/love-gray.svg" alt="" class="love-image">
-            <span class="f14 block">3453</span>
+          <p class="no-more">暂时没有更多了</p>
+        </div>
+      </div>
+      <Mask v-if="isInput"></Mask>
+
+      <div class="input-toolbar">
+        <div class="call-friend">
+          <div class="friend" v-for="item in friends" @click="item.select = !item.select">
+            <img :style="item.select?'opacity: .5;':''" class="avatar" :src="item.avatar" alt="">
+            <span>{{ item.name }}</span>
+            <img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
           </div>
         </div>
-        <p class="no-more">暂时没有更多了</p>
-      </div>
-      <div class="input-comment">
-        <AutoInput v-model="commit"></AutoInput>
-        <div class="options">
-          <img src="../assets/img/icon/add.svg" alt="" @click="call">
-          <img src="../assets/img/icon/add.svg" alt="">
-          <img src="../assets/img/icon/add.svg" alt="">
+        <div class="toolbar">
+          <div class="input-wrapper">
+            <AutoInput v-model="commit"></AutoInput>
+            <div class="right">
+              <img src="../assets/img/icon/message/call.png" alt="" class="camera">
+              <img src="../assets/img/icon/message/emoji-black.png" alt="">
+            </div>
+          </div>
+          <img v-if="commit" src="../assets/img/icon/message/up.png" alt="">
         </div>
       </div>
+      <ConfirmDialog
+          title="私信给"
+          ok-text="发送"
+          v-model:visible="showPrivateChat"
+      >
+        <div class="private-chat">
+
+        </div>
+      </ConfirmDialog>
     </div>
   </transition>
-
 </template>
 
 <script>
 import AutoInput from "./AutoInput";
+import ConfirmDialog from "./dialog/ConfirmDialog";
+import {mapState} from "vuex";
 
 export default {
   name: "Comment",
-  components: {AutoInput},
+  components: {AutoInput, ConfirmDialog},
   props: ['isCommenting'],
+  computed: {
+    ...mapState(['friends'])
+  },
   data() {
     return {
-      commit: ''
+      commit: '',
+      comments: [
+        {
+          id: '1',
+          avatar: require('../assets/img/icon/avatar/1.png'),
+          name: '彭雨晏',
+          text: '这到底是怎么了？艺人一个接一个的出事',
+          loveNum: 57000,
+          isLoved: false,
+          time: '2021-08-24 20:10',
+          children: [
+            {
+              id: '10',
+              avatar: require('../assets/img/icon/avatar/2.png'),
+              name: 'sugar少吃一点',
+              replay: '',
+              text: '要么之前吴京说了一句话对一个小女孩说，以后别来娱乐圈',
+              loveNum: 9174,
+              isLoved: false,
+              time: '2021-08-24 20:25',
+            },
+            {
+              id: '11',
+              avatar: require('../assets/img/icon/avatar/3.png'),
+              name: '我不吃晚饭了',
+              replay: 'sugar少吃一点',
+              text: '@nana max',
+              loveNum: 695,
+              isLoved: false,
+              time: '2021-08-24 20:29',
+            },
+            {
+              id: '12',
+              avatar: require('../assets/img/icon/avatar/4.png'),
+              name: '我劝你善良',
+              replay: 'sugar少吃一点',
+              text: '对对 我也刷到过这个视频',
+              loveNum: 1253,
+              isLoved: false,
+              time: '2021-08-24 20:59',
+            },
+          ]
+        },
+        {
+          id: '2',
+          avatar: require('../assets/img/icon/avatar/4.png'),
+          name: '成都旅行',
+          text: '开车回来4个小时，爬山两小时，如果当天天气好，你一定会喜欢上这里，是真的美！一日游',
+          loveNum: 27,
+          isLoved: false,
+          time: '2021-08-24 20:33',
+          children: [
+            {
+              id: '20',
+              avatar: require('../assets/img/icon/avatar/4.png'),
+              name: '成都旅行',
+              replay: '',
+              text: '甘海子，汶川转经楼村',
+              loveNum: 32,
+              isLoved: false,
+              time: '2021-08-24 20:34',
+            },
+            {
+              id: '21',
+              avatar: require('../assets/img/icon/avatar/5.png'),
+              name: 'August',
+              replay: '成都旅行',
+              text: '@NickyOO @AW%',
+              loveNum: 0,
+              isLoved: false,
+              time: '2021-08-25 03:29',
+            },
+            {
+              id: '22',
+              avatar: require('../assets/img/icon/avatar/6.png'),
+              name: '用户121342411',
+              replay: '成都旅行',
+              text: '自己可以开私家车进去不',
+              loveNum: 1,
+              isLoved: false,
+              time: '2021-08-25 07:29',
+            },
+          ]
+        }
+      ],
+      options: [
+        {id: 1, name: '私信回复'},
+        {id: 2, name: '复制'},
+        {id: 3, name: '搜一搜'},
+        {id: 4, name: '举报'},
+      ],
+      selectRow: {},
+      showPrivateChat: false,
+      isInput: true
     }
   },
   methods: {
+    loved(row) {
+      if (row.isLoved) {
+        row.loveNum--
+      } else {
+        row.loveNum++
+      }
+      row.isLoved = !row.isLoved
+    },
+    showOptions(row) {
+      this.$showSelectDialog(this.options, e => {
+        if (e.id === 1) {
+          this.selectRow = row
+          this.showPrivateChat = true
+        }
+      })
+    },
     // showComment() {
     //     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 = date
+      return str
+    },
     call() {
       console.log(this.commit)
     }
@@ -62,28 +247,31 @@ export default {
 </script>
 
 <style lang="less" scoped>
+@import "../assets/scss/index";
 
 .comment {
   position: fixed;
-  /*top: 200px;*/
+  height: 70vh;
   width: 100%;
   bottom: 0;
   background: #fff;
   z-index: 5;
-  border-radius: 10px 10px 0 0;
+  border-radius: 1rem 1rem 0 0;
 
   .title {
     position: relative;
+    margin: 1.5rem 0;
 
     p {
+      font-size: 1.2rem;
       text-align: center;
     }
 
     img {
-      width: 15px;
-      height: 15px;
+      width: 1.3rem;
+      height: 1.3rem;
       position: absolute;
-      right: 20px;
+      right: 2rem;
       top: 0;
     }
   }
@@ -93,37 +281,125 @@ export default {
     height: 60vh;
 
     .item {
-      .head-image {
-        width: 40px;
-        border-radius: 50%;
-        float: left;
-      }
 
-      .content {
-        float: left;
-        width: 85%;
+      .main {
+        padding: .5rem 0;
+        display: flex;
 
-        .head-image {
-          width: 15%;
+        &:active {
+          background: #53535321;
         }
 
-        .comment-container {
-          width: 80%;
+        .head-image {
+          margin-left: 1.5rem;
+          margin-right: 1rem;
+          width: 3.5rem;
+          height: 3.5rem;
+          border-radius: 50%;
+        }
+      }
 
-          .time {
-            color: gray;
+      .replies {
+        padding-left: 5.5rem;
+
+        .reply {
+          padding: .5rem 0 .5rem .5rem;
+          display: flex;
+
+          &:active {
+            background: #53535321;
+          }
+
+          .head-image {
+            margin-right: 1rem;
+            width: 2rem;
+            height: 2rem;
+            border-radius: 50%;
           }
         }
 
+        .more {
+          margin: .5rem;
+          display: flex;
+          align-items: center;
+          color: @second-text-color;
+
+          .gang {
+            background: #d5d5d5;
+            width: 2rem;
+            margin-right: 1rem;
+            height: 1px;
+          }
+
+          .arrow {
+            margin-left: .5rem;
+            margin-top: .8rem;
+            width: 0;
+            height: 0;
+            border: .5rem solid transparent;
+            border-top: .6rem solid @second-text-color;
+          }
+        }
       }
 
+      .content {
+        display: flex;
+        flex: 1;
+        font-size: 1.4rem;
+
+        .comment-container {
+          width: 85%;
+
+          .name {
+            color: @second-text-color;
+            margin-bottom: .5rem;
+            display: flex;
+            align-items: center;
+
+
+            .reply-user {
+              margin-left: .5rem;
+              width: 0;
+              height: 0;
+              border: .5rem solid transparent;
+              border-left: .6rem solid gray;
+            }
+          }
+
+          .detail {
+            margin-bottom: .5rem;
+          }
+
+          .time-wrapper {
+            display: flex;
+
+            .time {
+              color: #c4c3c3;
+              margin-right: 1.5rem;
+            }
+
+            .reply-text {
+              color: @second-text-color;
+            }
+          }
+        }
+      }
+
+
       .love {
+        color: @second-text-color;
         text-align: center;
+        width: 3rem;
+        padding-right: 1rem;
 
         .love-image {
-          width: 30px;
+          width: 2.5rem;
           border-radius: 50%;
         }
+
+        span {
+          transform: translateY(-.5rem);
+        }
       }
     }
 
@@ -134,23 +410,95 @@ export default {
     }
   }
 
-  .input-comment {
-    padding: 10px;
-    border-top: 1px solid #e2e1e1;
-    display: flex;
-    align-items: center;
 
-    .options {
+  @normal-bg-color: rgb(35, 38, 47);
+  @chat-bg-color: rgb(105, 143, 244);
+
+  .input-toolbar {
+    border-radius: 1rem 1rem 0 0;
+    background: white;
+    position: fixed;
+    width: 100vw;
+    bottom: 0;
+    z-index: 3;
+    padding-top: 3rem;
+
+    @space-width: 1.8rem;
+    @icon-width: 4.8rem;
+
+    .call-friend {
+      overflow-x: scroll;
       display: flex;
+      padding-right: @space-width;
+
+      .friend {
+        width: @icon-width;
+        position: relative;
+        margin-left: @space-width;
+        margin-bottom: @space-width;
+        font-size: 1rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .avatar {
+          width: @icon-width;
+          height: @icon-width;
+          border-radius: 50%;
+        }
+
+        span {
+          margin-top: .5rem;
+          text-align: center;
+          width: @icon-width;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .checked {
+          position: absolute;
+          top: @icon-width - 1.5;
+          right: -2px;
+          width: 2rem;
+          height: 2rem;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .toolbar {
+      @icon-width: 2.5rem;
+      display: flex;
+      align-items: center;
+      padding: 1rem 1.5rem;
+      border-top: 1px solid #e2e1e1;
+
+      .input-wrapper {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: .5rem 1rem;
+        background: #eee;
+        border-radius: 2rem;
+
+        .right {
+          display: flex;
+          align-items: center;
+        }
+
+        .auto-input {
+          width: calc(100vw - 18rem);
+        }
+      }
 
       img {
-        width: 20px;
-        height: 20px;
-        margin: 0 5px;
-
-        &:nth-last-child(1) {
-          margin-right: 0;
-        }
+        width: @icon-width;
+        height: @icon-width;
+        border-radius: 50%;
+        margin-left: 1.5rem;
       }
     }
   }
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 99ad175..be98ccb 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -6,9 +6,9 @@
         <back mode="light" img="close" direction="right" @click="closeShare"></back>
       </div>
       <div class="friends  ">
-        <div class="friend " v-for="item in 10">
-          <img src="../assets/img/icon/head-image.jpeg" alt="">
-          <span>ttenu</span>
+        <div class="friend " v-for="item in friends">
+          <img :src="item.avatar" alt="">
+          <span>{{ item.name }}</span>
         </div>
         <div class="more">
           <back mode="light" direction="right"></back>
@@ -101,9 +101,14 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: "Share",
   props: ['isSharing'],
+  computed: {
+    ...mapState(['friends'])
+  },
   methods: {
     closeShare() {
       this.$emit("update:is-sharing", false)
diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index 43b620e..b84638d 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -1,13 +1,14 @@
 <template>
-  <div class="ConfirmDialog " @click="$emit('dismiss')">
+  <div class="ConfirmDialog " @click="$emit('dismiss')" v-if="visible">
     <div class="content" @click.stop="stop">
       <div class="body">
         <div class="title" v-if="title">{{ title }}</div>
         <div class="subtitle" :class="subtitleColor" v-if="subtitle">{{ subtitle }}</div>
       </div>
+      <slot></slot>
       <div class="footer">
-        <div class="cancel" :class="cancelTextColor" @click.stop="$emit('cancel')">{{ cancelText }}</div>
-        <div class="ok" @click.stop="$emit('ok')">{{ okText }}</div>
+        <div class="cancel" :class="cancelTextColor" @click.stop="cancel">{{ cancelText }}</div>
+        <div class="ok" @click.stop="ok">{{ okText }}</div>
       </div>
     </div>
   </div>
@@ -18,7 +19,7 @@ export default {
   props: {
     visible: {
       type: Boolean,
-      default: false
+      default: true
     },
     title: {
       type: String,
@@ -62,6 +63,14 @@ export default {
   },
   methods: {
     stop() {
+    },
+    ok() {
+      this.$emit('ok')
+      this.$emit('update:visible', false)
+    },
+    cancel() {
+      this.$emit('cancel')
+      this.$emit('update:visible', false)
     }
   }
 }
diff --git a/src/store/index.js b/src/store/index.js
index 12c8c35..12fa87f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -23,7 +23,172 @@ const store = Vuex.createStore({
         education: null,
         displayType: enums.DISPLAY_TYPE.ALL,
       }
-    }
+    },
+    friends: [
+      {
+        avatar: require('../assets/img/icon/avatar/1.png'),
+        name: '倒影着稚嫩的少年',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/2.png'),
+        name: '冒安志',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/3.png'),
+        name: '凌依晨',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/4.png'),
+        name: '蔡傲安',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/5.png'),
+        name: '甫韦茹',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/6.png'),
+        name: '马佳婉清',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/7.png'),
+        name: '富察昕昕',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/8.png'),
+        name: '章昊苍',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/9.png'),
+        name: '买易槐',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/10.png'),
+        name: '阎韶丽',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/11.png'),
+        name: '倒影着稚嫩的少年',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/12.png'),
+        name: '思念一直在',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/13.png'),
+        name: '幸福泡泡',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/14.png'),
+        name: '原味青春',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/15.png'),
+        name: '℉阳光下的小情绪',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/16.png'),
+        name: '看，熟悉旳风景',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/17.png'),
+        name: '心若向阳无谓伤悲',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/18.png'),
+        name: '蓝天下的迷彩?',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/19.png'),
+        name: '◇、_保持微笑ゞ',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/20.png'),
+        name: '浅唱↘我们的歌',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/21.png'),
+        name: 'dear°学会微笑',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/22.png'),
+        name: '〤伱的微笑',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/23.png'),
+        name: '一只喵的旅行。',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/24.png'),
+        name: '为你锁住心',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/25.png'),
+        name: '一起走过的日子°',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/26.png'),
+        name: '‘心’之天空',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+      {
+        avatar: require('../assets/img/icon/avatar/27.png'),
+        name: '好◇°我会Yi直在●',
+        lastLoginTime: '2021-08-25 12:12:12',
+        select:false
+      },
+
+    ]
   },
   mutations: {
     setUserinfo(store, val) {
@@ -31,7 +196,7 @@ const store = Vuex.createStore({
     },
     setMaskDialog(store, val) {
       store.maskDialog = val.state
-      if (val.mode){
+      if (val.mode) {
         store.maskDialogMode = val.mode
       }
     }
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index 131e81e..6fa7872 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -232,10 +232,11 @@ export default {
     return Config.filePreview + url
   },
   $likeNum(num) {
-    if (num < 1000) {
+    if (!num) return
+    if (num < 10000) {
       return num
     } else {
-      return parseInt(num / 10000) + 'w'
+      return (num / 10000).toFixed(1) + 'w'
     }
   },
   $getTransform(el) {
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index 2bdd600..d697890 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -23,13 +23,13 @@ export default {
     SlideColumnVirtualList,
     SlideItem,
     Indicator,
-    'Video1':Video,
+    'Video1': Video,
     Footer,
     Mask,
     NoMore,
     Back,
     Loading,
-    'b-button':BaseButton
+    'b-button': BaseButton
   },
   data() {
     return {
@@ -38,5 +38,56 @@ export default {
   },
   methods: {
     ...globalMethods
-  }
+  },
+  directives: {
+    longpress: {
+      beforeMount: function (el, binding, vNode) {
+        // 确保提供的表达式是函数
+        if (typeof binding.value !== 'function') {
+          // 获取组件名称
+          const compName = vNode.context.name;
+          // 将警告传递给控制台
+          let warn = `[longpress:] provided expression '${binding.expression}' is not afunction, but has to be `;
+          if (compName) {
+            warn += `Found in component '${compName}' `
+          }
+          console.warn(warn);
+        }
+        // 定义变量
+        let pressTimer = null;
+        // 定义函数处理程序
+        // 创建计时器（ 1秒后执行函数 ）
+        let start = (e) => {
+          if (e.type === 'click' && e.button !== 0) {
+            return;
+          }
+          if (pressTimer === null) {
+            pressTimer = setTimeout(() => {
+              // 执行函数
+              handler();
+            }, 500)
+          }
+        }
+        // 取消计时器
+        let cancel = (e) => {
+          // 检查计时器是否有值
+          if (pressTimer !== null) {
+            clearTimeout(pressTimer);
+            pressTimer = null;
+          }
+        }
+        // 运行函数
+        const handler = (e) => {
+          // 执行传递给指令的方法
+          binding.value(e)
+        };
+        // 添加事件监听器
+        el.addEventListener("touchstart", start);
+        // 取消计时器
+        el.addEventListener("click", cancel);
+        el.addEventListener("touchend", cancel);
+        el.addEventListener("touchcancel", cancel);
+      }
+    }
+  },
 }
\ No newline at end of file