From 64cdc609b304a6efbe92f784254cf610c7c75b1a Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 29 Aug 2021 02:57:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=88=86=E4=BA=AB=E3=80=81?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   8 +-
 src/assets/img/icon/components/video/hqx.webp | Bin 1019 -> 0 bytes
 src/assets/scss/custom.less                   |   3 +-
 src/components/AutoInput.vue                  |   1 +
 src/components/Check.vue                      |  15 +-
 src/components/Comment.vue                    | 202 ++++++----
 src/components/DouyinCode.vue                 | 195 ++++++++++
 src/components/Mask.vue                       |   4 +
 src/components/Share.vue                      | 365 +++---------------
 src/components/Video.vue                      |  12 +-
 src/components/dialog/FromBottomDialog.vue    |  19 +-
 src/components/slide/SlideRowList.vue         |  16 +-
 src/config/index.js                           |   8 +-
 src/pages/Test.vue                            |   3 +-
 src/pages/Test3.vue                           | 199 +++++++---
 src/pages/home/Index2.vue                     |  62 ++-
 src/pages/home/Report.vue                     | 153 ++++++++
 src/pages/home/SubmitReport.vue               | 192 +++++++++
 src/pages/home/components/Duoshan.vue         |  97 +++++
 src/pages/home/components/PlayFeedback.vue    | 210 ++++++++++
 src/pages/home/components/ShareTo.vue         | 311 +++++++++++++++
 src/pages/me/userinfo/ChooseLocation.vue      |  30 +-
 src/pages/me/userinfo/ChooseProvince.vue      |  30 +-
 src/pages/me/userinfo/EditUserInfo.vue        |  14 +-
 src/pages/message/Message.vue                 |   3 +
 src/router/index.js                           |   4 +
 src/utils/global-methods.js                   |  22 +-
 src/utils/mixin.js                            |   2 +-
 28 files changed, 1657 insertions(+), 523 deletions(-)
 delete mode 100644 src/assets/img/icon/components/video/hqx.webp
 create mode 100644 src/components/DouyinCode.vue
 create mode 100644 src/pages/home/Report.vue
 create mode 100644 src/pages/home/SubmitReport.vue
 create mode 100644 src/pages/home/components/Duoshan.vue
 create mode 100644 src/pages/home/components/PlayFeedback.vue
 create mode 100644 src/pages/home/components/ShareTo.vue

diff --git a/src/App.vue b/src/App.vue
index 92c6ac6..1d55ca7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,9 +4,9 @@
       <Mask v-if="maskDialog" @click="hideMaskDialog" :mode="maskDialogMode"></Mask>
     </transition>
     <transition :name="transitionName">
-      <!--        <keep-alive>-->
-      <component :is="Component"/>
-      <!--        </keep-alive>-->
+      <keep-alive>
+        <component :is="Component"/>
+      </keep-alive>
     </transition>
   </router-view>
 
@@ -46,6 +46,8 @@ export default {
 
       const routeDeep = [
         '/message', '/attention', '/home', '/me', '/publish',
+        '/home/report',
+        '/home/submit-report',
         '/message/share-to-friend',
         '/message/joined-group-chat',
         '/country-choose',
diff --git a/src/assets/img/icon/components/video/hqx.webp b/src/assets/img/icon/components/video/hqx.webp
deleted file mode 100644
index 8626a2fa4d65ebb1b295934bcbe0138a3713a824..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1019
zcmV<X0|fkuP)<h;3K|Lk000e1NJLTq004LZ004Lh0{{R34!XwR0001KP)t-s0002}
zU^@R}J^f%h|6w}(VLJR^I{jce{a`!&Vmtj|JN;oh|7k@3WJCR8JN#li|6)A+U^@T*
z|NL@M{hEUQ+R^^i%lwIK{Aor0@$UV=u>GWs{Cive_x1kc-2JPU{^{iX$h!Tuq@klx
zm;e9(5p+^cQvl&2(N4y=?U#*zauf?_UOfA$9Fzb6129QMK~!ko?VDY9qA(DKJ0yH4
z`0)l&M5}H8|Bu|YtecB<lT5<&U{9ZmUiJ8#z?)<s!^;mdCew9Q<cdn5B$XFct+N+l
z8eJ(oL{++Z5n{VgaH1C5>8;t45CAQwz3Q7B!Q`9Cv}*zjT2EnJ)dV(FuTs655C!S9
zNEL{tNQl`INi1WBn<J4tYS6kwGNtBw7np<vcM=tth=Mh-8imPF4I@^B389SRl``|a
z^5%vxIn)H?SwR5h&vpS3inw({ekIWmLpuXqLX6TC?Hq#S3Hz_m{+vOW%rTQhDL9Fi
zPxgwyq;J859xY%sn4F9mz@&a4CNMF-Ie-WK>s^CMdlT=#WX%{bN6a7c1`HC!*ti!<
zIdSe@wB*Fd+^e*lc*%$sL(GiV77P-_*fI(pmY7onDKJPCE9-5*AX$vYy&=kp?dDj4
zLAtnd-(oqjy~%JOAckkXloMy}Y{`kWyXcV<*X~fui7R(KEhjGAMSz?*cTZzEu?pXe
z57%?3cz5c7ur0X+{I$C|1&P~>F>mlt1}|LQP4W>SJ{*I}{9y6Bx$*85@60D>cnH4K
z?VGvL^=|RU=)HzsYJ%U~nH!hZA@29)#;ZT+#F<XxuO83;6}Ol1KMwGsSPRH7j_2?|
zY-44*7JhQxl6f_s>>i3w#^%pU!Pz8iX0H##LqM!76>D3xmvev>Gh$__*@eJ)oL2kZ
zifydk&Im-aOCLL}tk@AN?*k*k>F?9(F22WVKsYhwt({h*_#Ueh!cmb0{q>LP^UvPS
z?qI6eN0^=Y%hARv93B18c6hbwG2|?o_{Y@q(O3rXP_Yl@cIw(#aahE?im=nlZbm$|
zi7#Jv-K)8L^x#5rhXS0}O&Pw7OzixHcNVk37qM}?HkO3=FUs4Y^W#nVntwFVnGoK&
z1NIj{CWs^dFl0sYBc@fvfmb{1{dn%Np4SoI7aVHN?HE`3;ChZn^`gxQ^K8eEYe1QA
z%Z*Tz(VW|=V$AbwVWVvR&4SamM?ObG=wvOh&(!ogL7VgQHFhVpvOjC{e%$8@&;Ef1
p_mh<G@exksXGc%}q16uw`~r6WsY_X}!6yI!002ovPDHLkV1kw@2L%8C

diff --git a/src/assets/scss/custom.less b/src/assets/scss/custom.less
index c36b400..03b9a11 100644
--- a/src/assets/scss/custom.less
+++ b/src/assets/scss/custom.less
@@ -6,6 +6,7 @@
 
 .global-notice {
   position: fixed;
+  z-index: 999;
   color: white;
   background: black;
   left: 50%;
@@ -21,7 +22,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 5rem;
+  min-height: 5rem;
   font-size: 1.4rem;
 
   &.no-active {
diff --git a/src/components/AutoInput.vue b/src/components/AutoInput.vue
index a0e8d47..f6b2adb 100644
--- a/src/components/AutoInput.vue
+++ b/src/components/AutoInput.vue
@@ -36,6 +36,7 @@ export default {
 <style scoped lang="less">
 
 .auto-input {
+  font-size: 1.2rem;
   width: 100%;
   max-height: 7rem;
   overflow-y: scroll;
diff --git a/src/components/Check.vue b/src/components/Check.vue
index 9d813f5..d6c4efe 100644
--- a/src/components/Check.vue
+++ b/src/components/Check.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="check" @click.stop="$emit('update:modelValue',!modelValue)">
+  <div class="check" @click.stop="change">
     <img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="">
     <img v-show="modelValue && mode === 'gray'" src="../assets/img/icon/components/check/check-gray.png" alt="">
     <img v-show="modelValue && mode === 'red'" src="../assets/img/icon/components/check/check-red.png" alt="">
@@ -24,7 +24,12 @@ export default {
   computed: {},
   created() {
   },
-  methods: {}
+  methods: {
+    change(){
+      this.$emit('update:modelValue',!this.modelValue)
+      this.$emit('change',!this.modelValue)
+    }
+  }
 }
 </script>
 
@@ -36,9 +41,9 @@ export default {
   width: @width;
   height: @width;
 
-  img {
-    width: 100%;
-    height: 100%;
+  >img {
+    width: 100%!important;
+    height: 100%!important;
   }
 
 }
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index fe4f5c2..1093a50 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,14 +1,24 @@
 <template>
-  <transition name="comment">
-    <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>
+  <from-bottom-dialog
+      v-model="modelValue"
+      @cancel="cancel"
+      :show-heng-gang="false"
+      maskMode="light"
+      height="70vh"
+      mode="white">
+    <template v-slot:header>
+      <div class="title">
+        <back mode="dark" img="close" direction="right" style="opacity: 0;"/>
+        <span>2.7w条评论</span>
+        <back mode="dark" img="close" direction="right" @click.stop="cancel"/>
+      </div>
+    </template>
+    <div class="comment">
+      <div class="wrapper" v-if="comments.length">
         <div class="items">
           <div class="item" v-for="item in comments">
-            <div class="main" v-longpress="e => showOptions(item)">
+            <!--             v-longpress="e => showOptions(item)"-->
+            <div class="main">
               <div class="content">
                 <img :src="item.avatar" alt="" class="head-image">
                 <div class="comment-container">
@@ -29,7 +39,8 @@
             </div>
             <div class="replies">
               <div class="reply" v-for="child in item.children">
-                <div class="content" v-longpress="e => showOptions(child)">
+                <!--                 v-longpress="e => showOptions(child)"-->
+                <div class="content">
                   <img :src="child.avatar" alt="" class="head-image">
                   <div class="comment-container">
                     <div class="name">
@@ -58,31 +69,38 @@
               </div>
             </div>
           </div>
-          <p class="no-more">暂时没有更多了</p>
         </div>
+        <no-more/>
       </div>
-      <Mask v-if="isInput"></Mask>
 
+      <Loading v-else style="position:absolute;"/>
+
+      <transition name="fade">
+        <Mask v-if="isCall" mode="lightgray" @click="isCall = false"/>
+      </transition>
       <div class="input-toolbar">
-        <div class="call-friend">
-          <div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
-            <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
-            <span>{{ item.name }}</span>
-            <img v-if="item.select" class="checked" src="../assets/img/icon/components/check/check-red-share.png">
+        <transition name="fade">
+          <div class="call-friend" v-if="isCall">
+            <div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
+              <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(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>
-        </div>
+        </transition>
 
         <div class="toolbar">
           <div class="input-wrapper">
             <AutoInput v-model="comment"></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="">
+              <img src="../assets/img/icon/message/call.png" @click="isCall = !isCall">
+              <img src="../assets/img/icon/message/emoji-black.png">
             </div>
           </div>
-          <img v-if="comment" src="../assets/img/icon/message/up.png" alt="">
+          <img v-if="comment" src="../assets/img/icon/message/up.png" @click="send">
         </div>
       </div>
+
       <ConfirmDialog
           title="私信给"
           ok-text="发送"
@@ -93,25 +111,77 @@
         </div>
       </ConfirmDialog>
     </div>
-  </transition>
+  </from-bottom-dialog>
 </template>
 
 <script>
 import AutoInput from "./AutoInput";
 import ConfirmDialog from "./dialog/ConfirmDialog";
 import {mapState} from "vuex";
+import FromBottomDialog from "./dialog/FromBottomDialog";
+import Loading from "./Loading";
 
 export default {
   name: "Comment",
-  components: {AutoInput, ConfirmDialog},
-  props: ['isCommenting'],
+  components: {
+    AutoInput,
+    ConfirmDialog,
+    FromBottomDialog,
+    Loading
+  },
+  props: {
+    modelValue: false,
+    videoId: {
+      type: String,
+      default: null
+    },
+  },
   computed: {
     ...mapState(['friends'])
   },
+  watch: {
+    modelValue(newVale) {
+      if (newVale) {
+        this.getData()
+      } else {
+        this.comments = []
+      }
+    }
+  },
   data() {
     return {
-      comment: '123',
-      comments: [
+      comment: '',
+      comments: [],
+      options: [
+        {id: 1, name: '私信回复'},
+        {id: 2, name: '复制'},
+        {id: 3, name: '搜一搜'},
+        {id: 4, name: '举报'},
+      ],
+      selectRow: {},
+      showPrivateChat: false,
+      isInput: false,
+      isCall: false,
+    }
+  },
+  methods: {
+    send() {
+      this.comments.push({
+        id: '2',
+        avatar: require('../assets/img/icon/avatar/4.png'),
+        name: '成都旅行',
+        text: this.comment,
+        loveNum: 27,
+        isLoved: false,
+        time: '2021-08-24 20:33',
+        children: []
+      })
+      this.comment = ''
+      this.isCall = false
+    },
+    async getData() {
+      await this.$sleep(500)
+      this.comments = [
         {
           id: '1',
           avatar: require('../assets/img/icon/avatar/1.png'),
@@ -194,20 +264,11 @@ export default {
             },
           ]
         }
-      ],
-      options: [
-        {id: 1, name: '私信回复'},
-        {id: 2, name: '复制'},
-        {id: 3, name: '搜一搜'},
-        {id: 4, name: '举报'},
-      ],
-      selectRow: {},
-      showPrivateChat: false,
-      isInput: true,
-      isCall: true,
-    }
-  },
-  methods: {
+      ]
+    },
+    cancel() {
+      this.$emit("update:modelValue", false)
+    },
     toggleCall(item) {
       item.select = !item.select
       let name = item.name
@@ -247,7 +308,7 @@ export default {
         str = ` ${hour}小时前`
       } else if (day === 1) str = `昨天${date.getHours()}:${date.getMinutes()}`
       else if (day === 2) str = `前天${date.getHours()}:${date.getMinutes()}`
-      else str = date
+      else str = time
       return str
     },
     call() {
@@ -260,39 +321,45 @@ export default {
 <style lang="less" scoped>
 @import "../assets/scss/index";
 
-.comment {
+.title {
+  z-index: 2;
   position: fixed;
-  height: 70vh;
+  left: 0;
+  right: 0;
+  height: 4rem;
+  padding: 0 1.5rem;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 1rem 1rem 0 0;
+
+  span {
+    font-size: 1.2rem;
+    text-align: center;
+  }
+
+  img {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+}
+
+.comment {
   width: 100%;
-  bottom: 0;
+  height: 70vh;
   background: #fff;
   z-index: 5;
   border-radius: 1rem 1rem 0 0;
 
-  .title {
+  .wrapper {
     position: relative;
-    margin: 1.5rem 0;
-
-    p {
-      font-size: 1.2rem;
-      text-align: center;
-    }
-
-    img {
-      width: 1.3rem;
-      height: 1.3rem;
-      position: absolute;
-      right: 2rem;
-      top: 0;
-    }
+    padding-top: 4rem;
+    padding-bottom: 6rem;
   }
 
   .items {
-    overflow-y: scroll;
-    height: 60vh;
-
     .item {
-
       .main {
         padding: .5rem 0;
         display: flex;
@@ -330,6 +397,7 @@ export default {
         }
 
         .more {
+          font-size: 1.2rem;
           margin: .5rem;
           display: flex;
           align-items: center;
@@ -383,6 +451,7 @@ export default {
 
           .time-wrapper {
             display: flex;
+            align-items: center;
 
             .time {
               color: #c4c3c3;
@@ -396,7 +465,6 @@ export default {
         }
       }
 
-
       .love {
         color: @second-text-color;
         text-align: center;
@@ -413,12 +481,6 @@ export default {
         }
       }
     }
-
-    .no-more {
-      margin: 10px;
-      text-align: center;
-      color: #ccc;
-    }
   }
 
 
@@ -432,12 +494,12 @@ export default {
     width: 100vw;
     bottom: 0;
     z-index: 3;
-    padding-top: 3rem;
 
     @space-width: 1.8rem;
     @icon-width: 4.8rem;
 
     .call-friend {
+      padding-top: 3rem;
       overflow-x: scroll;
       display: flex;
       padding-right: @space-width;
diff --git a/src/components/DouyinCode.vue b/src/components/DouyinCode.vue
new file mode 100644
index 0000000..4b02d51
--- /dev/null
+++ b/src/components/DouyinCode.vue
@@ -0,0 +1,195 @@
+<template>
+  <transition name="fade">
+    <div class="DouyinCode" v-if="modelValue">
+      <div class="content">
+        <img class="top" src="../assets/img/icon/components/video/douyin-code-bg.png" alt="">
+        <div class="desc">
+          <div class="left">
+            <div class="user">@名字</div>
+            <div class="title">#窃书不能算偷……窃书！……读书人的事，能算偷么？</div>
+          </div>
+          <img class="code" src="../assets/img/icon/components/video/douyin-code.jpg" alt="">
+        </div>
+        <img class="bottom" src="../assets/img/icon/components/video/douyin-code-bottom.jpg" alt="">
+
+        <div class="video-poster">
+          <img src="../assets/img/poster/1.jpg" class="poster">
+          <img src="../assets/img/icon/play.svg" class="play">
+        </div>
+      </div>
+      <div class="toolbar">
+        <div class="title">分享到</div>
+        <div class="shares ">
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/toqq.webp" alt="">
+            <span>QQ好友</span>
+          </div>
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/tozone.webp" alt="">
+            <span>QQ空间</span>
+          </div>
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
+            <span>微信好友</span>
+          </div>
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/towechat.webp" alt="">
+            <span>朋友圈</span>
+          </div>
+          <div class="share-to" @click="$no">
+            <img src="../assets/img/icon/components/video/todownload.webp" alt="">
+            <span>保存</span>
+          </div>
+        </div>
+        <div class="cancel" @click="cancel">取消</div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: "DouyinCode",
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.$emit('update:modelValue', false)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/scss/index";
+
+.DouyinCode {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  background: transparent;
+
+  .content {
+    background: white;
+    width: 80vw;
+    margin-bottom: 2rem;
+    position: relative;
+
+    .top {
+      width: 100%;
+    }
+
+    .desc {
+      margin-bottom: 2rem;
+      display: flex;
+      padding: 1rem;
+
+      .left {
+        font-size: 1.8rem;
+
+        .title {
+          font-size: 1.4rem;
+          color: @second-text-color;
+        }
+
+      }
+
+      .code {
+        width: 6rem;
+      }
+    }
+
+    .bottom {
+      width: 100%;
+    }
+
+    .video-poster {
+      width: 35vw;
+      height: calc(35vw * 1.5);
+      position: absolute;
+      top: 8rem;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .poster {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .play {
+        position: relative;
+        z-index: 9;
+        width: 4rem;
+      }
+    }
+  }
+
+  .toolbar {
+    width: 100vw;
+    background: black;
+    border-radius: 1rem 1rem 0 0;
+    color: white;
+
+    .title {
+      font-size: 1.2rem;
+      padding: 1rem;
+      text-align: center;
+    }
+
+    @space-width: 1.8rem;
+    @icon-width: 4.5rem;
+
+    .shares {
+      display: flex;
+      padding-right: @space-width * 2;
+
+      .share-to {
+        margin-left: @space-width;
+        margin-bottom: @space-width;
+
+
+        img {
+
+          width: @icon-width;
+          height: @icon-width;
+          border-radius: 50%;
+        }
+
+        span {
+          color: @second-text-color;
+          font-size: 1rem;
+          display: block;
+          text-align: center;
+        }
+      }
+    }
+
+    .cancel {
+      font-size: 1.6rem;
+      background: rgb(38,38,38);
+      padding: 1.5rem;
+      text-align: center;
+    }
+
+  }
+}
+</style>
diff --git a/src/components/Mask.vue b/src/components/Mask.vue
index 1c88afc..a050473 100644
--- a/src/components/Mask.vue
+++ b/src/components/Mask.vue
@@ -34,6 +34,10 @@ export default {
     background: transparent;
   }
 
+  &.lightgray {
+    background: rgba(0, 0, 0, 0.15);
+  }
+
   &.white {
     background: transparent;
   }
diff --git a/src/components/Share.vue b/src/components/Share.vue
index b6fd5a2..e9cf865 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -1,70 +1,77 @@
 <template>
-  <transition name="share">
-    <div class="share" v-if="isSharing">
+  <from-bottom-dialog
+      v-model="modelValue"
+      @cancel="closeShare"
+      :show-heng-gang="false"
+      maskMode="light"
+      height="37rem"
+      mode="dark">
+    <div class="share">
       <div class="title">
         <span>私信给朋友</span>
         <back mode="light" img="close" direction="right" @click="closeShare"></back>
       </div>
-      <div class="friends  ">
+      <div class="friends">
         <div class="friend" v-for="item in friends.all" @click="toggleCall(item)">
           <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(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 class="more">
+        <div class="more" @click="closeShare($nav('/message/share-to-friend'))">
           <back mode="light" direction="right"></back>
           <span>更多</span>
         </div>
       </div>
       <div class="line"></div>
       <div class="shares ">
-        <div class="share-to " @click="$nav('/message/share-to-friend')">
+        <div class="share-to" @click="closeShare($nav('/message/share-to-friend'))">
           <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
           <span>私信朋友</span>
         </div>
-        <div class="share-to">
+        <div class="share-to" @click="$no">
           <img src="../assets/img/icon/components/video/torichang.png" alt="">
           <span>分享日常</span>
         </div>
-        <div class="share-to" @click="share2WeChatZone">
+        <div class="share-to" @click="closeShare($emit('showShare2WeChatZone'))">
           <img src="../assets/img/icon/components/video/towechat.webp" alt="">
           <span>朋友圈</span>
         </div>
-        <div class="share-to" @click="share2WeChat">
+        <div class="share-to" @click="closeShare($emit('share2WeChat'))">
           <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
           <span>微信好友</span>
         </div>
-        <div class="share-to" @click="share2QQZone">
+        <div class="share-to" @click="closeShare($emit('share2QQZone'))">
           <img src="../assets/img/icon/components/video/tozone.webp" alt="">
           <span>QQ空间</span>
         </div>
-        <div class="share-to" @click="share2QQ">
+        <div class="share-to" @click="closeShare($emit('share2QQ'))">
           <img src="../assets/img/icon/components/video/toqq.webp" alt="">
           <span>QQ好友</span>
         </div>
-        <div class="share-to" @click="showShareDuoshan = true;showShareDialog = false;">
+        <div class="share-to" @click="closeShare($emit('showShareDuoshan'))">
           <img src="../assets/img/icon/components/video/duoshan.png" alt="">
           <span>多闪</span>
         </div>
-        <div class="share-to ">
+        <div class="share-to" @click="$no">
           <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
           <span>今日头条</span>
         </div>
-        <div class="share-to" @click="share2Webo">
+        <div class="share-to" @click="closeShare($emit('share2Webo'))">
           <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
           <span>微博</span>
         </div>
       </div>
       <div class="toolbar ">
-        <div class="tool  ">
+        <div class="tool" @click="$no">
           <img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
           <span>一起视频</span>
         </div>
-        <div class="tool  ">
+        <div class="tool" @click="$nav('/home/report')">
           <img src="../assets/img/icon/components/video/warring.png" alt="">
           <span>举报</span>
         </div>
-        <div class="tool" @click="download">
+        <div class="tool" @click="canDownload && closeShare($emit('download'))"
+             :style="{ opacity : canDownload ? '1' : '0.5' }">
           <img src="../assets/img/icon/components/video/download.png" alt="">
           <span>保存本地</span>
         </div>
@@ -73,15 +80,16 @@
           <img v-else src="../assets/img/icon/components/video/star.png" alt="">
           <span>收藏</span>
         </div>
-        <div class="tool">
+        <div class="tool" @click="$no">
           <img src="../assets/img/icon/components/video/comeonplay.png" alt="">
           <span>合拍</span>
         </div>
-        <div class="tool">
+        <div class="tool" @click="$no">
           <img src="../assets/img/icon/components/video/bizhi.webp" alt="">
           <span>动态壁纸</span>
         </div>
-        <div class="tool">
+        <!--        todo-->
+        <div class="tool" @click="$emit('dislike')">
           <img src="../assets/img/icon/components/video/dislike.png" alt="">
           <span>不感兴趣</span>
         </div>
@@ -89,15 +97,15 @@
           <img src="../assets/img/icon/components/video/link.png" alt="">
           <span>复制链接</span>
         </div>
-        <div class="tool">
+        <div class="tool" @click="closeShare($emit('showDouyinCode'))">
           <img src="../assets/img/icon/components/video/qrcode.png" alt="">
           <span>抖音码</span>
         </div>
-        <div class="tool ">
+        <div class="tool" @click="$no">
           <img src="../assets/img/icon/components/video/dou.webp" alt="">
           <span>帮上热门</span>
         </div>
-        <div class="tool ">
+        <div class="tool" @click="closeShare($emit('play-feedback'))">
           <img src="../assets/img/icon/components/video/feedback.webp" alt="">
           <span>播放反馈</span>
         </div>
@@ -113,126 +121,37 @@
             <Check mode="red" v-model="isCreateChat"/>
             <span>创建群聊</span>
           </div>
-          <b-button type="primary">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
+          <b-button type="primary" @click="$no">{{ selectFriends.length > 1 ? '分别发送' : '发送' }}</b-button>
         </div>
       </div>
-
-      <from-bottom-dialog
-          v-model="showShareDialog"
-          @cancel="cancel"
-          maskMode="light"
-          height="50vh"
-          mode="light">
-        <div class="option-dialog">
-          <div class="buttons">
-            <b-button v-if="showProgress"
-                      class="mb1r"
-                      :border="false"
-                      :progress="progress">
-              <img src="../assets/img/icon/components/video/download-gray.png" alt="">
-              <span class="second-text-color">下载中 9.2MB/{{ progress }}%</span>
-            </b-button>
-
-            <b-button type="green" v-if="showShare2WeChatZone">
-              <template v-slot:prefix>
-                <img src="../assets/img/icon/components/video/wechatzone-white.webp" alt="">
-              </template>
-              发送视频到朋友圈
-            </b-button>
-            <b-button type="green" v-if="showShare2WeChat">
-              <template v-slot:prefix>
-                <img src="../assets/img/icon/components/video/wechat-white.webp" alt="">
-              </template>
-              发送视频到微信
-            </b-button>
-            <b-button type="qqzone" v-if="showShare2QQZone">
-              <template v-slot:prefix>
-                <img src="../assets/img/icon/components/video/qqzone-white.png" alt="">
-              </template>
-              发送视频到QQ空间
-            </b-button>
-            <b-button type="qq" v-if="showShare2QQ">
-              <template v-slot:prefix>
-                <img src="../assets/img/icon/components/video/qq-white.webp" alt="">
-              </template>
-              发送视频到QQ
-            </b-button>
-            <b-button type="webo" v-if="showShare2Webo">
-              <template v-slot:prefix>
-                <img src="../assets/img/icon/components/video/webo-white.webp" alt="">
-              </template>
-              发送视频到微博
-            </b-button>
-
-            <b-button v-if="!showDownload" class="mt1r" type="white">复制口令发给好友</b-button>
-
-            <template v-if="showDownload">
-              <b-button type="primary">
-                去相册查看
-                <back scale="0.7" mode="light" direction="right"></back>
-              </b-button>
-
-              <b-button class="mt1r" type="white">
-                <img src="../assets/img/icon/components/video/wechat.webp" alt="">
-                发送视频到微信
-              </b-button>
-            </template>
-          </div>
-          <div class="dialog-friends">
-            <div class="dialog-friend" v-for="item in friends.all">
-              <img :src="$imgPreview(item.avatar)" alt="">
-              <div class="right">
-                <span>{{ item.name }}</span>
-                <div class="share-btn">分享</div>
-              </div>
-            </div>
-            <div class="dialog-friend">
-              <img src="../assets/img/icon/head-image.jpeg" alt="">
-              <div class="right">
-                <span>更多好友</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </from-bottom-dialog>
-
-      <from-bottom-dialog
-          v-model="showShareDuoshan"
-          @cancel="cancel"
-          maskMode="light"
-          mode="light">
-        <div class="share-to-duoshan">
-          <img src="../assets/img/icon/components/video/duoshan-logo2.png" class="logo">
-          <div class="wrapper">
-            <div class="title2">多闪</div>
-            <div class="subtitle">开发者：北京拍拍看看科技有限公司；版本：6.8.0</div>
-            <div class="subtitle mb2r">
-              <span class="link" @click="$nav('/service-protocol',{type:'多闪权限申请与使用情况说明'})">应用权限</span>与
-              <span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span>
-            </div>
-            <b-button type="dark2">
-              <template v-slot:prefix>
-                <img src="../assets/img/icon/components/video/duoshan-logo.webp">
-              </template>
-              下载多闪
-            </b-button>
-          </div>
-        </div>
-
-      </from-bottom-dialog>
     </div>
-  </transition>
+  </from-bottom-dialog>
 </template>
 
 <script>
 import {mapState} from "vuex";
 import Check from "./Check";
 import FromBottomDialog from "./dialog/FromBottomDialog";
+import DouyinCode from "./DouyinCode";
 
 export default {
   name: "Share",
-  components: {FromBottomDialog, Check},
-  props: ['isSharing'],
+  components: {
+    FromBottomDialog,
+    Check,
+    DouyinCode
+  },
+  props: {
+    modelValue: false,
+    videoId: {
+      type: String,
+      default: null
+    },
+    canDownload: {
+      type: Boolean,
+      default: true
+    },
+  },
   computed: {
     ...mapState(['friends']),
     selectFriends() {
@@ -241,18 +160,7 @@ export default {
   },
   data() {
     return {
-      progress: 0,
       isCreateChat: false,
-      showShareDialog: false,
-
-      showProgress: false,
-      showDownload: false,
-      showShare2WeChatZone: false,
-      showShare2WeChat: false,
-      showShare2QQZone: false,
-      showShare2QQ: false,
-      showShare2Webo: false,
-      showShareDuoshan: false,
       isCollect: false
     }
   },
@@ -272,72 +180,12 @@ export default {
         this.$notice('收藏成功')
       }
       this.isCollect = !this.isCollect
-
-    },
-    download() {
-      this.showShareDialog = true
-      this.showDownload = false
-      this.downloadVideo(e => this.showDownload = true)
-    },
-    share2WeChatZone() {
-      this.showShareDialog = true
-      this.showShare2WeChatZone = false
-      this.downloadVideo(e => this.showShare2WeChatZone = true)
-    },
-    share2WeChat() {
-      this.showShareDialog = true
-      this.showShare2WeChat = false
-      this.downloadVideo(e => this.showShare2WeChat = true)
-    },
-    share2QQZone() {
-      this.showShareDialog = true
-      this.showShare2QQZone = false
-      this.downloadVideo(e => this.showShare2QQZone = true)
-    },
-    share2QQ() {
-      this.showShareDialog = true
-      this.showShare2QQ = false
-      this.downloadVideo(e => this.showShare2QQ = true)
-    },
-    share2Webo() {
-      this.showShareDialog = true
-      this.showShare2Webo = false
-      this.downloadVideo(e => this.showShare2Webo = true)
-    },
-    downloadVideo(cb) {
-      this.showProgress = true
-      this.progress = 0
-      let time = setInterval(() => {
-        if (this.progress >= 100) {
-          clearInterval(time)
-          this.showProgress = false
-          cb()
-        } else {
-          this.progress++
-        }
-      }, 5)
-    },
-    cancel() {
-      this.showProgress = false
-      this.showDownload = false
-      this.showShare2WeChatZone = false
-      this.showShare2WeChat = false
-      this.showShare2QQZone = false
-      this.showShare2QQ = false
-      this.showShare2Webo = false
     },
     toggleCall(item) {
       item.select = !item.select
-      // let name = item.name
-      // if (this.comment.includes('@' + name)) {
-      //   this.comment = this.comment.replace(`@${name} `, '')
-      // } else {
-      //   this.comment += `@${name} `
-      // }
     },
     closeShare() {
-      this.$emit("update:is-sharing", false)
-      // this.isSharing = false
+      this.$emit("update:modelValue", false)
     }
   }
 }
@@ -351,11 +199,7 @@ export default {
 }
 
 .share {
-  position: fixed;
-  /*top: 200px;*/
   width: 100%;
-  bottom: 0;
-  z-index: 5;
   background: black;
   border-radius: 10px 10px 0 0;
   color: white;
@@ -365,6 +209,7 @@ export default {
   @icon-width: 4.8rem;
 
   .title {
+    font-size: 1.4rem;
     padding: 20px;
     position: relative;
     display: flex;
@@ -406,9 +251,9 @@ export default {
         margin-top: .5rem;
         text-align: center;
         width: @icon-width;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        //white-space: nowrap;
+        //overflow: hidden;
+        //text-overflow: ellipsis;
       }
 
       .checked {
@@ -426,9 +271,9 @@ export default {
       margin-bottom: @space-width;
 
       img {
-        width: @icon-width - 2;
-        height: @icon-width - 2;
-        padding: 1rem;
+        width: @icon-width - 2.6;
+        height: @icon-width - 2.6;
+        padding: 1.3rem;
         border-radius: 50%;
         background: @second-btn-color-tran;
         //background: rgb(56, 58, 57);
@@ -555,102 +400,6 @@ export default {
 
     }
   }
-
-  .option-dialog {
-    .buttons {
-      padding: 0 1.5rem;
-
-      img {
-        height: 2.2rem;
-        margin-right: .5rem;
-      }
-    }
-
-    .dialog-friends {
-      color: black;
-      margin: 1rem 1rem 0 1rem;
-      width: calc(100% - 2rem);
-      background: white;
-      border-radius: 6px 6px 0 0;
-
-      > .dialog-friend {
-        box-sizing: border-box;
-        padding: 10px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        //border-bottom: 1px solid ghostwhite;
-        border-bottom: 1px solid gainsboro;
-
-        img {
-          border-radius: 50%;
-          width: 40px;
-          height: 40px;
-        }
-
-        .right {
-          margin: 0 5px 0 15px;
-          font-size: 1.6rem;
-          width: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          .share-btn {
-            font-size: 1.4rem;
-            color: white;
-            padding: 5px 20px;
-            background: @primary-btn-color;
-            border-radius: 2px;
-          }
-        }
-      }
-    }
-  }
-
-  .share-to-duoshan {
-    padding: 3rem 2rem;
-    min-height: calc(50vh - 6rem);
-    //min-height: 50vh;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-
-
-    .logo {
-      height: 12rem;
-      width: 12rem;
-    }
-
-    .wrapper {
-      width: 100%;
-    }
-
-    .title2 {
-      margin-bottom: 2rem;
-      text-align: center;
-      font-size: 2rem;
-      color: black;
-    }
-
-    .subtitle {
-      text-align: center;
-      font-size: 1.2rem;
-      color: @second-text-color;
-    }
-
-
-    .button {
-      width: 100%;
-
-      img {
-        height: 2.2rem;
-        margin-right: .5rem;
-      }
-    }
-  }
 }
 
 .share-enter-active,
diff --git a/src/components/Video.vue b/src/components/Video.vue
index ac6465a..c5ffeaf 100644
--- a/src/components/Video.vue
+++ b/src/components/Video.vue
@@ -42,16 +42,16 @@
                 <!--                <transition name="loved">-->
                 <!--                </transition>-->
               </div>
-              <span>{{ lVideo.loves }}</span>
+              <span>{{ $likeNum(lVideo.likeNum) }}</span>
             </div>
             <div class="message mb2r" @click.stop="$emit('showComments')">
               <!--            <div class="message mb15p" @click.stop="showComment">-->
               <img src="../assets/img/icon/message.svg" alt="" class="message-image">
-              <span>{{ lVideo.comments }}</span>
+              <span>{{ $likeNum(lVideo.commentNum) }}</span>
             </div>
             <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
               <img src="../assets/img/icon/share.svg" alt="" class="share-image">
-              <span>{{ lVideo.shared }}</span>
+              <span>{{ $likeNum(lVideo.sharedNum) }}</span>
             </div>
             <div v-else class="share mb4r" @click.stop="$emit('showShare')">
               <img src="../assets/img/icon/share.svg" alt="" class="share-image">
@@ -60,7 +60,7 @@
               <img class="music1" src="../assets/img/icon/home/music1.png" alt="">
               <img class="music2" src="../assets/img/icon/home/music2.png" alt="">
               <div class="music-bg">
-                <img class="music" src="../assets/img/icon/head-image.jpeg" alt="" @click.stop="$nav('/music')">
+                <img class="music" src="../assets/img/icon/head-image.jpeg" alt="" @click.stop="globalMethods.$nav('/music')">
               </div>
             </div>
           </div>
@@ -152,6 +152,7 @@ export default {
   },
   data() {
     return {
+      globalMethods:globalMethods,
       duration: 0,
       step: 0,
       currentTime: 0,
@@ -194,6 +195,9 @@ export default {
     })
   },
   methods: {
+    $likeNum(v){
+      return globalMethods.$likeNum(v)
+    },
     $duration(v) {
       if (!v) return
       let m = Math.floor(v / 60)
diff --git a/src/components/dialog/FromBottomDialog.vue b/src/components/dialog/FromBottomDialog.vue
index dfa5aa0..bb83303 100644
--- a/src/components/dialog/FromBottomDialog.vue
+++ b/src/components/dialog/FromBottomDialog.vue
@@ -18,6 +18,7 @@
          @touchmove="move"
          @touchend="end"
     >
+      <slot name="header"></slot>
       <div class="heng-gang" :class="mode" v-if="showHengGang">
         <div class="content"></div>
       </div>
@@ -52,17 +53,31 @@ export default {
       type: Boolean,
       default: true
     },
+    pageId: {
+      type: String,
+      default: null
+    }
   },
   watch: {
     modelValue(newVal) {
       let app = document.getElementById('app')
       if (newVal) {
-        app.children[0].style.position = 'absolute'
+        if (this.pageId) {
+          let page = document.getElementById(this.pageId)
+          page.style.position = 'absolute'
+        } else {
+          app.children[0].style.position = 'absolute'
+        }
         this.scroll = document.documentElement.scrollTop
         document.body.style.position = 'fixed'
         document.body.style.top = -this.scroll + 'px'
       } else {
-        app.children[1].style.position = 'fixed'
+        if (this.pageId) {
+          let page = document.getElementById(this.pageId)
+          page.style.position = 'fixed'
+        } else {
+          app.children[1].style.position = 'fixed'
+        }
         document.body.style.position = 'static'
         document.documentElement.scrollTop = this.scroll
       }
diff --git a/src/components/slide/SlideRowList.vue b/src/components/slide/SlideRowList.vue
index 859f55e..ace7725 100644
--- a/src/components/slide/SlideRowList.vue
+++ b/src/components/slide/SlideRowList.vue
@@ -16,9 +16,11 @@
           </div>
           <div class="indicator" ref="indicator"></div>
         </div>
-        <div class="right" :style="{opacity:loading ? 0 : 1}">搜索</div>
+        <img src="../../assets/img/icon/search-gray.png" alt=""
+             :style="{opacity:loading ? 0 : 1}"
+             style="margin-top: .5rem;">
       </div>
-      <div class="loading" :style="loadingStyle">AA</div>
+      <Loading class="loading" style="width: 4rem;" :style="loadingStyle" :is-full-screen="false"/>
     </div>
     <div id="base-slide-list" ref="slideList"
          :style="{'flex-direction':'row',marginTop:indicatorFixed?'5rem':'0'}"
@@ -32,9 +34,13 @@
 
 <script>
 import bus from "../../utils/bus";
+import Loading from "../Loading";
 
 export default {
   name: "BaseSlideList",
+  components:{
+    Loading
+  },
   props: {
     canMove: {
       type: Boolean,
@@ -186,7 +192,7 @@ export default {
       this.startTime = Date.now()
     },
     touchMove(e) {
-    //  this.$stopPropagation(e)
+      //  this.$stopPropagation(e)
 
       if (!this.canMove) return;
       this.moveXDistance = e.touches[0].pageX - this.startLocationX
@@ -359,8 +365,8 @@ export default {
 
     .loading {
       opacity: 0;
-      top: 20px;
-      right: 15px;
+      top: 1.3rem;
+      right: 1.5rem;
       position: absolute;
 
     }
diff --git a/src/config/index.js b/src/config/index.js
index 6a5c641..a0ebf11 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,8 +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.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://localhost//index.php/v1',
-  filePreview:'http://localhost/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 5bf0b93..a7ba208 100644
--- a/src/pages/Test.vue
+++ b/src/pages/Test.vue
@@ -6,7 +6,7 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <Share :isSharing="true"/>
+      <Share  v-model="test"/>
     </div>
   </div>
 </template>
@@ -41,6 +41,7 @@ export default {
           "status": 1
         }
       ],
+      test:true
     }
   },
   computed: {},
diff --git a/src/pages/Test3.vue b/src/pages/Test3.vue
index 5a027f2..1bcdb48 100644
--- a/src/pages/Test3.vue
+++ b/src/pages/Test3.vue
@@ -1,53 +1,105 @@
 <template>
-  <div class="Test">
+  <div class="play-feedback">
+    <div class="feedback-header">
+      <span>&nbsp;</span>
+      <div class="title">播放反馈</div>
+      <back mode="dark" img="close" @click="cancel"></back>
+    </div>
     <div class="content">
-      <img class="top" src="../assets/img/icon/components/video/douyin-code-bg.png" alt="">
-      <div class="desc">
-        <div class="left">
-          <div class="user">@名字</div>
-          <div class="title">#窃书不能算偷……窃书！……读书人的事，能算偷么？</div>
+      <div class="notice">请选择要反馈的问题</div>
+      <div class="l-row" @click="falseOther(()=>{this.type1 = true} )">
+        <Check mode="red" :modelValue="type1" @change="falseOther(()=>{this.type1 = true} )"/>
+        <span>网络正常无法播放视频</span>
+      </div>
+      <div class="l-row" @click="falseOther(()=>{this.type2 = true} )">
+        <Check mode="red" :modelValue="type2" @change="falseOther(()=>{this.type2 = true} )"/>
+        <span>视频画面正常没声音</span>
+      </div>
+      <div class="l-row" @click="falseOther(()=>{this.type3 = true} )">
+        <Check mode="red" :modelValue="type3" @change="falseOther(()=>{this.type3 = true} )"/>
+        <span>播放几秒/中途卡信</span>
+      </div>
+      <div class="l-row" @click="falseOther(()=>{this.type4 = true} )">
+        <Check mode="red" :modelValue="type4" @change="falseOther(()=>{this.type4 = true} )"/>
+        <span>画面内容不全</span>
+      </div>
+      <div class="l-row" @click="falseOther(()=>{this.type5 = true} )">
+        <Check mode="red" :modelValue="type5" @change="falseOther(()=>{this.type5 = true} )"/>
+        <span>播放过程中闪退回桌面</span>
+      </div>
+      <div class="l-row" @click="falseOther(()=>{this.type6 = true} )">
+        <Check mode="red" :modelValue="type6" @change="falseOther(()=>{this.type6 = true} )"/>
+        <span>画面模糊不清晰</span>
+      </div>
+      <div class="l-row" @click="falseOther(()=>{this.type7 = true} )">
+        <Check mode="red" :modelValue="type7" @change="falseOther(()=>{this.type7 = true} )"/>
+        <span>视频播放其他问题或建议</span>
+      </div>
+      <div v-if="type7" class="other">
+        <div class="textarea-ctn">
+          <textarea name="" id="" cols="30" rows="10"
+                    v-model="desc"
+                    placeholder="详输入内容"></textarea>
         </div>
-        <img class="code" src="../assets/img/icon/components/video/douyin-code.jpg" alt="">
+        <div class="text-num">{{ desc.length }}/300</div>
       </div>
-      <img class="bottom" src="../assets/img/icon/components/video/douyin-code-bottom.jpg" alt="">
+      <b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button>
     </div>
   </div>
 </template>
 <script>
+import FromBottomDialog from "../components/dialog/FromBottomDialog";
+import Check from "../components/Check";
+import BaseButton from "../components/BaseButton";
 
 export default {
   name: "Test",
   props: {},
+  components: {
+    BaseButton,
+    FromBottomDialog,
+    Check
+  },
   data() {
     return {
-      comment: '12'
+      showShareDialog: true,
+      type1: false,
+      type2: false,
+      type3: false,
+      type4: false,
+      type5: false,
+      type6: false,
+      type7: false,
+      disabled: false,
+      desc: ''
+    }
+  },
+  computed: {
+    disabled() {
+      if (this.type7 && this.desc) return true
+      return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
     }
   },
-  computed: {},
   created() {
   },
   methods: {
-    changeText(e) {
-      console.log(e)
-      console.log(this.$el.innerText)
-
+    falseOther(cb) {
+      this.type1 = false
+      this.type2 = false
+      this.type3 = false
+      this.type4 = false
+      this.type5 = false
+      this.type6 = false
+      this.type7 = false
+      cb()
     },
-    get() {
-      console.log(this.$refs.input)
+    cancel() {
 
     },
-    call() {
-      let span = document.createElement('span')
-      span.setAttribute('contenteditable', false)
-      span.classList.add('link')
-      span.innerText = Date.now() + ' '
-      this.$refs.input.append(span)
-    },
-    emoji() {
-      let span = document.createElement('img')
-      span.setAttribute('src', require('../assets/img/icon/message/emoji/4.webp'))
-      span.classList.add('emoji')
-      this.$refs.input.append(span)
+    submit() {
+      if (this.disabled) return
+      this.cancel()
+      this.$notice('感谢你的反馈，我们会尽快答复！')
     }
   }
 }
@@ -56,44 +108,91 @@ export default {
 <style scoped lang="less">
 @import "../assets/scss/index";
 
-.Test {
+.play-feedback {
+  max-height: 49rem;
+  overflow: auto;
+  background: #fff;
+  color: black;
   position: fixed;
+  bottom: 5rem;
   left: 0;
   right: 0;
-  bottom: 0;
-  top: 0;
-  background: #fff;
-  overflow: auto;
+
+  .feedback-header {
+    position: fixed;
+    left: 0;
+    right: 0;
+    background: white;
+    height: 3rem;
+    padding: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    font-weight: bold;
+    font-size: 1.8rem;
+  }
 
   .content {
-    padding-top: 6rem;
+    padding: 6rem 1.5rem 1.5rem 1.5rem;
+  }
 
-    .top {
-      width: 100%;
+  .notice {
+    font-size: 1.2rem;
+    color: @second-text-color;
+  }
+
+  .l-row {
+    display: flex;
+    align-items: center;
+    min-height: 5rem;
+    font-size: 1.4rem;
+    border-bottom: 1px solid #f1f1f1;
+
+
+    .check {
+      width: 2rem;
+      height: 2rem;
+      margin-right: 1rem;
     }
+  }
+
+  .no-border {
+    border-bottom: none;
+  }
+
+  .other {
+    .textarea-ctn {
+      width: 100%;
+      background: #eae8e8;
+      padding: 1.5rem;
+      box-sizing: border-box;
+      margin-top: 1rem;
+      border-radius: 2px;
 
-    .desc {
-      display: flex;
-      padding: 1rem;
 
-      .left {
-        font-size: 1.8rem;
+      textarea {
+        font-family: "Microsoft YaHei UI";
+        outline: none;
+        width: 100%;
+        border: none;
+        background: transparent;
+        color: black;
 
-        .title {
-          font-size: 1.4rem;
+        &::placeholder {
           color: @second-text-color;
         }
-
-      }
-
-      .code {
-        width: 12rem;
       }
     }
 
-    .bottom {
-      width: 100%;
+    .text-num {
+      margin-top: .8rem;
+      margin-bottom: .8rem;
+      font-size: 1rem;
+      color: @second-text-color;
+      text-align: right;
     }
   }
 }
+
+
 </style>
diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue
index 2d67d3f..feffa60 100644
--- a/src/pages/home/Index2.vue
+++ b/src/pages/home/Index2.vue
@@ -148,8 +148,34 @@
         <Me></Me>
       </SlideItem>
     </SlideRowList>
-    <Comment v-model:is-commenting="isCommenting"/>
-    <Share v-model:is-sharing="isSharing" ref="share"/>
+
+    <Comment v-model="isCommenting"/>
+
+    <Share v-model="isSharing"
+           ref="share"
+           @dislike="dislike"
+           :videoId="videos[videoActiveIndex]?.id"
+           :canDownload="videos[videoActiveIndex]?.canDownload"
+           @play-feedback="showPlayFeedback = true"
+           @showShareDuoshan="showShareDuoshan = true"
+           @showDouyinCode="showDouyinCode = true"
+           @showShare2WeChatZone="shareType = 2"
+           @share2WeChat="shareType = 3"
+           @share2QQZone="shareType = 4"
+           @share2QQ="shareType = 5"
+           @share2Webo="shareType = 8"
+           @download="shareType = 9"
+    />
+    <PlayFeedback v-model="showPlayFeedback"/>
+
+    <DouyinCode v-model="showDouyinCode"></DouyinCode>
+
+    <Duoshan v-model="showShareDuoshan"/>
+
+    <ShareTo v-model:type="shareType"
+            :videoId="videos[videoActiveIndex]?.id"
+            :canDownload="videos[videoActiveIndex]?.canDownload"
+    />
   </div>
 </template>
 <script>
@@ -171,10 +197,27 @@ import Share from "../../components/Share";
 import SlideColumnList from "../../components/slide/SlideColumnList";
 import SlideRowList from "../../components/slide/SlideRowList";
 import Me from '../me/Me'
+import PlayFeedback from "./components/PlayFeedback";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import Duoshan from "./components/Duoshan";
+import ShareTo from "./components/ShareTo";
+import DouyinCode from "../../components/DouyinCode";
 
 export default {
   name: "HomeIndex",
-  components: {SlideColumnList, SlideRowList, Video1, Comment, Share, Me},
+  components: {
+    FromBottomDialog,
+    SlideColumnList,
+    SlideRowList,
+    Video1,
+    Comment,
+    Share,
+    Me,
+    PlayFeedback,
+    Duoshan,
+    ShareTo,
+    DouyinCode
+  },
   data() {
     return {
       webVideos: [
@@ -325,6 +368,15 @@ export default {
       ],
       isCommenting: false,
       isSharing: false,
+
+      shareType: -1,
+
+      showPlayFeedback: false,
+      showShareDuoshan: false,
+      showShareDialog: false,
+      showShare2WeChatZone: false,
+      showDouyinCode: false,
+
       videoActiveIndex: 0,
       baseActiveIndex: 0,
       activeIndex: 1,
@@ -380,6 +432,9 @@ export default {
     this.width = document.body.clientWidth
   },
   methods: {
+    dislike() {
+      this.$notice('操作成功，将减少此类视频的推荐')
+    },
     async getData() {
       this.loading = true
       let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
@@ -405,6 +460,7 @@ export default {
 #home-index {
   height: 100%;
   width: 100%;
+  //z-index: 4;
   position: relative;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/home/Report.vue b/src/pages/home/Report.vue
new file mode 100644
index 0000000..4f3849d
--- /dev/null
+++ b/src/pages/home/Report.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="Report">
+    <BaseHeader backMode="light">
+      <template v-slot:center>
+        <span class="f16">视频举报</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="title">
+        <span>内容违规</span>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'色情低俗'})">
+        <span>色情低俗</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'时政不实信息'})">
+        <span>时政不实信息</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'违法犯罪'})">
+        <span>违法犯罪</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'垃圾广告、售卖假货等'})">
+        <span>垃圾广告、售卖假货等</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'造谣传播'})">
+        <span>造谣传播</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'涉嫌欺诈'})">
+        <span>涉嫌欺诈</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'侮辱漫骂'})">
+        <span>侮辱漫骂</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'危险行为'})">
+        <span>危险行为</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'涉嫌非法集资'})">
+        <span>涉嫌非法集资</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'价值观导向不良'})">
+        <span>价值观导向不良</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="line"></div>
+<!--todo 没做详细的举报      -->
+      <div class="title">
+        <span>侵犯名誉</span>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'侵犯名誉、隐私、肖像权等'})">
+        <span>侵犯名誉、隐私、肖像权等</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'内容盗用本人作品'})">
+        <span>内容盗用本人作品</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'内容盗用他人作品'})">
+        <span>内容盗用他人作品</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="line"></div>
+      <div class="title">
+        <span>未成年</span>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'未成年人不当行为'})">
+        <span>未成年人不当行为</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'内容不适合未成年观看'})">
+        <span>内容不适合未成年观看</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="line"></div>
+      <div class="title">
+        <span>其他</span>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'引人不适'})">
+        <span>引人不适</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'疑似自我伤害'})">
+        <span>疑似自我伤害</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'诱导点赞、分享、关注'})">
+        <span>诱导点赞、分享、关注</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+      <div class="row" @click="$nav('/home/submit-report',{type:'其他'})">
+        <span>其他</span>
+        <back scale=".8" direction="right"></back>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Report",
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.Report {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+
+    .title {
+      font-size: 1.2rem;
+      padding: 1rem 1.5rem;
+      color: @second-text-color;
+
+      img {
+        width: 1rem;
+        height: 1rem;
+        margin-right: .2rem;
+      }
+    }
+  }
+
+  .line {
+    width: calc(100% - 3rem);
+    margin-left: 1.5rem;
+    background: @line-color;
+  }
+}
+</style>
diff --git a/src/pages/home/SubmitReport.vue b/src/pages/home/SubmitReport.vue
new file mode 100644
index 0000000..a15a8bd
--- /dev/null
+++ b/src/pages/home/SubmitReport.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="Report">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">视频举报</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="title">
+        <span>你的举报将在12小时内受理，若举报成功会第一时间告知处理结果，请尽量提交完整的举报描述及材料</span>
+      </div>
+      <div class="row">
+        <span>
+          举报理由：{{ type }}
+        </span>
+      </div>
+      <div class="l-row">
+        <div class="notice">举报描述(选填)</div>
+        <div class="textarea-ctn">
+          <textarea name="" id="" cols="30" rows="10"
+                    v-model="desc"
+                    placeholder="详细描述举报理由"></textarea>
+        </div>
+        <div class="text-num">{{ desc.length }}/200</div>
+      </div>
+      <div class="upload-photo">
+        <div class="photo-wrapper" v-for="(index,item) in photos">
+          <img class="photo" src="../../assets/img/poster/1.jpg" alt="">
+          <img class="close" src="../../assets/img/icon/components/light-close.png" alt="" @click="photos.pop()">
+        </div>
+        <div class="upload" @click="upload" v-if="photos.length !== 4">
+          <img src="../../assets/img/icon/home/camera-gray.png" alt="">
+          <span>{{ photos.length }}/4</span>
+        </div>
+      </div>
+
+      <b-button type="primary" @click="$no">提交</b-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Report",
+  props: {},
+  data() {
+    return {
+      type: '色情低俗',
+      desc: '',
+      photos: []
+    }
+  },
+  computed: {},
+  created() {
+    this.type = this.$route.query.type
+  },
+  activated() {
+    this.type = this.$route.query.type
+  },
+  methods: {
+    async upload() {
+      this.$showLoading()
+      await this.$sleep(500)
+      this.$hideLoading()
+      this.photos.push(
+          require(`../../assets/img/poster/${this.photos.length}.jpg`)
+      )
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.Report {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+
+    .title {
+      font-size: 1.2rem;
+      padding: 1rem 1.5rem;
+      color: @second-text-color;
+      border-bottom: 1px solid #cccccc11;
+
+      img {
+        width: 1rem;
+        height: 1rem;
+        margin-right: .2rem;
+      }
+    }
+
+    .l-row {
+      padding: 0 1.5rem;
+
+      .textarea-ctn {
+        width: 100%;
+        background: @active-main-bg;
+        padding: 1.5rem;
+        box-sizing: border-box;
+        margin-top: 1rem;
+        border-radius: 2px;
+
+
+        textarea {
+          font-family: "Microsoft YaHei UI";
+          outline: none;
+          width: 100%;
+          border: none;
+          background: transparent;
+          color: white;
+
+          &::placeholder {
+            color: @second-text-color;
+          }
+        }
+      }
+
+      .text-num {
+        margin-top: .5rem;
+        font-size: 1rem;
+        color: @second-text-color;
+        text-align: right;
+      }
+    }
+
+    .upload-photo {
+      margin-top: .5rem;
+      display: flex;
+      padding: 0 1.5rem;
+
+      @width: calc((100vw - 3vw - 3rem) / 4);
+
+      .photo-wrapper {
+        width: @width;
+        height: @width;
+        position: relative;
+        margin-right: 1vw;
+
+        .photo {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+        }
+
+        .close {
+          position: absolute;
+          right: 0;
+          top: 0;
+          background: @second-btn-color;
+          padding: .3rem;
+          width: 1rem;
+          height: 1rem;
+        }
+      }
+
+      .upload {
+        width: @width;
+        height: @width;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        color: @second-text-color;
+        font-size: 1.2rem;
+        align-items: center;
+        background: @second-btn-color-tran;
+
+        img {
+          width: 3.5rem;
+          height: 3.5rem;
+        }
+      }
+    }
+  }
+
+  .button {
+    position: absolute;
+    left: 1.5rem;
+    right: 1.5rem;
+    bottom: 1.5rem;
+  }
+}
+</style>
diff --git a/src/pages/home/components/Duoshan.vue b/src/pages/home/components/Duoshan.vue
new file mode 100644
index 0000000..a0ab050
--- /dev/null
+++ b/src/pages/home/components/Duoshan.vue
@@ -0,0 +1,97 @@
+<template>
+  <from-bottom-dialog
+      v-model="modelValue"
+      @cancel="cancel"
+      maskMode="light"
+      mode="light">
+    <div class="share-to-duoshan">
+      <img src="../../../assets/img/icon/components/video/duoshan-logo2.png" class="logo">
+      <div class="wrapper">
+        <div class="title2">多闪</div>
+        <div class="subtitle">开发者：北京拍拍看看科技有限公司；版本：6.8.0</div>
+        <div class="subtitle mb2r">
+          <span class="link" @click="$nav('/service-protocol',{type:'多闪权限申请与使用情况说明'})">应用权限</span>与
+          <span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span>
+        </div>
+        <b-button type="dark2">
+          <template v-slot:prefix>
+            <img src="../../../assets/img/icon/components/video/duoshan-logo.webp">
+          </template>
+          下载多闪
+        </b-button>
+      </div>
+    </div>
+  </from-bottom-dialog>
+</template>
+<script>
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+
+export default {
+  name: "Duoshan",
+  components: {
+    FromBottomDialog
+  },
+  props: {
+    modelValue: false
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {
+    cancel() {
+      this.$emit('update:modelValue', false)
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.share-to-duoshan {
+  padding: 3rem 2rem;
+  min-height: calc(50vh - 6rem);
+  //min-height: 50vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+
+
+  .logo {
+    height: 12rem;
+    width: 12rem;
+  }
+
+  .wrapper {
+    width: 100%;
+  }
+
+  .title2 {
+    margin-bottom: 2rem;
+    text-align: center;
+    font-size: 2rem;
+    color: black;
+  }
+
+  .subtitle {
+    text-align: center;
+    font-size: 1.2rem;
+    color: @second-text-color;
+  }
+
+
+  .button {
+    width: 100%;
+
+    img {
+      height: 2.2rem;
+      margin-right: .5rem;
+    }
+  }
+}
+</style>
diff --git a/src/pages/home/components/PlayFeedback.vue b/src/pages/home/components/PlayFeedback.vue
new file mode 100644
index 0000000..dbbed9a
--- /dev/null
+++ b/src/pages/home/components/PlayFeedback.vue
@@ -0,0 +1,210 @@
+<template>
+  <transition name="fade">
+    <div class="play-feedback" v-if="modelValue">
+      <div class="feedback-header">
+        <span>&nbsp;</span>
+        <div class="title">播放反馈</div>
+        <back mode="dark" img="close" @click="cancel"></back>
+      </div>
+      <div class="content">
+        <div class="notice">请选择要反馈的问题</div>
+        <div class="l-row" @click="falseOther(()=>{this.type1 = true} )">
+          <Check mode="red" :modelValue="type1" @change="falseOther(()=>{this.type1 = true} )"/>
+          <span>网络正常无法播放视频</span>
+        </div>
+        <div class="l-row" @click="falseOther(()=>{this.type2 = true} )">
+          <Check mode="red" :modelValue="type2" @change="falseOther(()=>{this.type2 = true} )"/>
+          <span>视频画面正常没声音</span>
+        </div>
+        <div class="l-row" @click="falseOther(()=>{this.type3 = true} )">
+          <Check mode="red" :modelValue="type3" @change="falseOther(()=>{this.type3 = true} )"/>
+          <span>播放几秒/中途卡信</span>
+        </div>
+        <div class="l-row" @click="falseOther(()=>{this.type4 = true} )">
+          <Check mode="red" :modelValue="type4" @change="falseOther(()=>{this.type4 = true} )"/>
+          <span>画面内容不全</span>
+        </div>
+        <div class="l-row" @click="falseOther(()=>{this.type5 = true} )">
+          <Check mode="red" :modelValue="type5" @change="falseOther(()=>{this.type5 = true} )"/>
+          <span>播放过程中闪退回桌面</span>
+        </div>
+        <div class="l-row" @click="falseOther(()=>{this.type6 = true} )">
+          <Check mode="red" :modelValue="type6" @change="falseOther(()=>{this.type6 = true} )"/>
+          <span>画面模糊不清晰</span>
+        </div>
+        <div class="l-row" @click="falseOther(()=>{this.type7 = true} )">
+          <Check mode="red" :modelValue="type7" @change="falseOther(()=>{this.type7 = true} )"/>
+          <span>视频播放其他问题或建议</span>
+        </div>
+        <div v-if="type7" class="other">
+          <div class="textarea-ctn">
+          <textarea name="" id="" cols="30" rows="10"
+                    v-model="desc"
+                    placeholder="详输入内容"></textarea>
+          </div>
+          <div class="text-num">{{ desc.length }}/300</div>
+        </div>
+        <b-button type="primary" :disabled="!disabled" @click="submit">提交</b-button>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import Check from "../../../components/Check";
+
+export default {
+  name: "Test",
+  props: {
+    modelValue: false
+  },
+  components: {
+    Check
+  },
+  watch: {
+    modelValue(newVal) {
+      this.type1 = false
+      this.type2 = false
+      this.type3 = false
+      this.type4 = false
+      this.type5 = false
+      this.type6 = false
+      this.type7 = false
+      this.desc = ''
+    }
+  },
+  data() {
+    return {
+      type1: false,
+      type2: false,
+      type3: false,
+      type4: false,
+      type5: false,
+      type6: false,
+      type7: false,
+      desc: ''
+    }
+  },
+  computed: {
+    disabled() {
+      if (this.type7 && this.desc) return true
+      return this.type1 || this.type2 || this.type3 || this.type4 || this.type5 || this.type6
+    }
+  },
+  created() {
+  },
+  methods: {
+    falseOther(cb) {
+      this.type1 = false
+      this.type2 = false
+      this.type3 = false
+      this.type4 = false
+      this.type5 = false
+      this.type6 = false
+      this.type7 = false
+      cb()
+    },
+    cancel() {
+      this.$emit('update:modelValue', false)
+    },
+    async submit() {
+      this.cancel()
+      this.$showLoading()
+      await this.$sleep(1000)
+      this.$hideLoading()
+      this.$notice('感谢你的反馈，我们会尽快答复！')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.play-feedback {
+  max-height: 49rem;
+  overflow: auto;
+  background: #fff;
+  color: black;
+  position: fixed;
+  bottom: 5rem;
+  left: 0;
+  right: 0;
+
+  .feedback-header {
+    position: fixed;
+    left: 0;
+    right: 0;
+    background: white;
+    height: 3rem;
+    padding: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    font-weight: bold;
+    font-size: 1.8rem;
+  }
+
+  .content {
+    padding: 6rem 1.5rem 1.5rem 1.5rem;
+  }
+
+  .notice {
+    font-size: 1.2rem;
+    color: @second-text-color;
+  }
+
+  .l-row {
+    display: flex;
+    align-items: center;
+    min-height: 5rem;
+    font-size: 1.4rem;
+    border-bottom: 1px solid #f1f1f1;
+
+
+    .check {
+      width: 2rem;
+      height: 2rem;
+      margin-right: 1rem;
+    }
+  }
+
+  .no-border {
+    border-bottom: none;
+  }
+
+  .other {
+    .textarea-ctn {
+      width: 100%;
+      background: #eae8e8;
+      padding: 1.5rem;
+      box-sizing: border-box;
+      margin-top: 1rem;
+      border-radius: 2px;
+
+
+      textarea {
+        font-family: "Microsoft YaHei UI";
+        outline: none;
+        width: 100%;
+        border: none;
+        background: transparent;
+        color: black;
+
+        &::placeholder {
+          color: @second-text-color;
+        }
+      }
+    }
+
+    .text-num {
+      margin-top: .8rem;
+      margin-bottom: .8rem;
+      font-size: 1rem;
+      color: @second-text-color;
+      text-align: right;
+    }
+  }
+}
+
+
+</style>
diff --git a/src/pages/home/components/ShareTo.vue b/src/pages/home/components/ShareTo.vue
new file mode 100644
index 0000000..29dc6af
--- /dev/null
+++ b/src/pages/home/components/ShareTo.vue
@@ -0,0 +1,311 @@
+<template>
+  <from-bottom-dialog
+      page-id="home-index"
+      v-model="showShareDialog"
+      @cancel="cancel"
+      maskMode="light"
+      height="50vh"
+      mode="white">
+    <div class="option-dialog">
+      <div class="buttons">
+        <b-button v-if="downloading"
+                  class="mb1r"
+                  :border="false"
+                  :progress="progress">
+          <img src="../../../assets/img/icon/components/video/download-gray.png" alt="">
+          <span class="second-text-color">下载中 9.2MB/{{ progress }}%</span>
+        </b-button>
+
+        <template v-if="canDownload">
+          <b-button type="green" v-if="showShare2WeChatZone" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="">
+            </template>
+            发送视频到朋友圈
+          </b-button>
+          <b-button type="green" v-if="showShare2WeChat" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="">
+            </template>
+            发送视频到微信
+          </b-button>
+          <b-button type="qqzone" v-if="showShare2QQZone" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="">
+            </template>
+            发送视频到QQ空间
+          </b-button>
+          <b-button type="qq" v-if="showShare2QQ" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/qq-white.webp" alt="">
+            </template>
+            发送视频到QQ
+          </b-button>
+          <b-button type="webo" v-if="showShare2Webo" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/webo-white.webp" alt="">
+            </template>
+            发送视频到微博
+          </b-button>
+          <b-button v-if="!showDownload" class="mt1r" type="white" @click="$no">复制口令发给好友</b-button>
+        </template>
+
+        <template v-else>
+          <b-button type="green" v-if="showShare2WeChatZone" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/wechatzone-white.webp" alt="">
+            </template>
+            复制口令发给好友
+          </b-button>
+          <b-button type="green" v-if="showShare2WeChat" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/wechat-white.webp" alt="">
+            </template>
+            复制口令发给好友
+          </b-button>
+          <b-button type="qqzone" v-if="showShare2QQZone" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/qqzone-white.png" alt="">
+            </template>
+            复制口令发给好友
+          </b-button>
+          <b-button type="qq" v-if="showShare2QQ" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/qq-white.webp" alt="">
+            </template>
+            复制口令发给好友
+          </b-button>
+          <b-button type="webo" v-if="showShare2Webo" @click="$no">
+            <template v-slot:prefix>
+              <img src="../../../assets/img/icon/components/video/webo-white.webp" alt="">
+            </template>
+            复制口令发给好友
+          </b-button>
+        </template>
+
+        <template v-if="showDownload">
+          <b-button type="primary" @click="$no">
+            去相册查看
+            <back scale="0.7" mode="light" direction="right"></back>
+          </b-button>
+
+          <b-button class="mt1r" type="white" @click="$no">
+            <img src="../../../assets/img/icon/components/video/wechat.webp" alt="">
+            发送视频到微信
+          </b-button>
+        </template>
+      </div>
+      <div class="dialog-friends">
+        <div class="dialog-friend" v-for="item in localFriends.all" @click="share(item)">
+          <img :src="$imgPreview(item.avatar)" alt="">
+          <div class="right">
+            <span>{{ item.name }}</span>
+            <div class="share-btn" v-if="!item.select">分享</div>
+            <div class="share-btn shared" v-else>已私信</div>
+          </div>
+        </div>
+        <div class="more" @click="cancel($nav('/message/share-to-friend'))">
+          <img src="../../../assets/img/icon/components/video/more-dark.png">
+          <div class="right">
+            <span>更多好友</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </from-bottom-dialog>
+</template>
+<script>
+import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
+import {mapState} from "vuex";
+
+export default {
+  name: "ShareTo",
+  components: {
+    FromBottomDialog
+  },
+  props: {
+    type: {
+      type: Number,
+      default: -1
+    },
+    videoId: {
+      type: String,
+      default: null
+    },
+    canDownload: {
+      type: Boolean,
+      default: true
+    },
+  },
+  watch: {
+    type(newVal, oldVal) {
+      this.change(newVal)
+    },
+    showShareDialog() {
+      this.localFriends = this.$clone(this.friends)
+    }
+  },
+  data() {
+    return {
+      progress: 0,
+      downloading: false,
+
+      showShareDialog: false,
+      showDownload: false,
+      showShare2WeChatZone: false,
+      showShare2WeChat: false,
+      showShare2QQZone: false,
+      showShare2QQ: false,
+      showShare2Webo: false,
+      localFriends: [],
+    }
+  },
+  computed: {
+    ...mapState(['friends']),
+  },
+  created() {
+  },
+  methods: {
+    async change(newVal) {
+      if (newVal === -1) return
+      this.showShareDialog = true
+      if (this.canDownload) {
+        let downloadedVideo = this.$storageGet('downloadedVideo', [])
+        if (!downloadedVideo.find(v => v === this.videoId) && !this.downloading) {
+          await this.downloadVideo()
+        }
+      }
+      switch (newVal) {
+        case 2:
+          return this.showShare2WeChatZone = true
+        case 3:
+          return this.showShare2WeChat = true
+        case 4:
+          return this.showShare2QQZone = true
+        case 5:
+          return this.showShare2QQ = true
+        case 8:
+          return this.showShare2Webo = true
+        case 9:
+          return this.showDownload = true
+      }
+    },
+    cancel() {
+      this.showShareDialog = false
+      this.showDownload = false
+      this.showShare2WeChatZone = false
+      this.showShare2WeChat = false
+      this.showShare2QQZone = false
+      this.showShare2QQ = false
+      this.showShare2Webo = false
+      this.$emit('update:type', -1)
+    },
+    downloadVideo() {
+      return new Promise((resolve, reject) => {
+        this.progress = 0
+        this.downloading = true
+        let time = setInterval(() => {
+          if (this.progress >= 100) {
+            let downloadedVideo = this.$storageGet('downloadedVideo', [])
+            downloadedVideo.push(this.videoId)
+            this.$storageSet('downloadedVideo', downloadedVideo)
+            clearInterval(time)
+            this.downloading = false
+            resolve()
+          } else {
+            this.progress++
+          }
+        }, 5)
+      })
+    },
+    share(item) {
+      if (item.select) {
+        this.$notice('已分享给朋友')
+      }
+      item.select = true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../../assets/scss/index";
+
+.option-dialog {
+  .buttons {
+    padding: 0 1.5rem;
+
+    img {
+      height: 2.2rem;
+      margin-right: .5rem;
+    }
+  }
+
+  .dialog-friends {
+    color: black;
+    margin: 1rem 1rem 0 1rem;
+    width: calc(100% - 2rem);
+    background: white;
+    border-radius: 6px 6px 0 0;
+
+    > .dialog-friend {
+      box-sizing: border-box;
+      padding: .8rem;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #efefef;
+
+      img {
+        border-radius: 50%;
+        width: 3.8rem;
+        height: 3.8rem;
+      }
+
+      .right {
+        margin: 0 0.5rem 0 1.5rem;
+        font-size: 1.4rem;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .share-btn {
+          font-size: 1.3rem;
+          color: white;
+          height: 2.5rem;
+          width: 6rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: @primary-btn-color;
+          border-radius: 2px;
+
+          &.shared {
+            background: lightgray;
+            color: @second-text-color;
+          }
+        }
+      }
+    }
+
+    .more {
+      box-sizing: border-box;
+      height: 5.5rem;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #efefef;
+      font-size: 1.4rem;
+      margin-bottom: 1.5rem;
+
+      img {
+        border-radius: 50%;
+        width: 2rem;
+        height: 2rem;
+        margin: 0 2.2rem 0 1.5rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/me/userinfo/ChooseLocation.vue b/src/pages/me/userinfo/ChooseLocation.vue
index 97b19b7..445518b 100644
--- a/src/pages/me/userinfo/ChooseLocation.vue
+++ b/src/pages/me/userinfo/ChooseLocation.vue
@@ -23,7 +23,7 @@
         <div class="row" @click="$nav('/choose-province')">
           <span>中国</span>
           <div class="right">
-            <back scale='1.5' direction="right"></back>
+            <back scale=".8" direction="right"></back>
           </div>
         </div>
         <div v-for="(value, name)  of countryOk">
@@ -1234,34 +1234,6 @@ export default {
         margin-right: .2rem;
       }
     }
-
-    .row {
-      padding: 0 1.5rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 5rem;
-      font-size: 1.4rem;
-      transition: all .1s;
-      background: @main-bg;
-
-      .right {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: @second-text-color;
-
-        img {
-          margin-left: 1rem;
-          width: 15px;
-        }
-      }
-
-      &:active {
-        background: @active-main-bg;
-        color: @second-text-color;
-      }
-    }
   }
 }
 
diff --git a/src/pages/me/userinfo/ChooseProvince.vue b/src/pages/me/userinfo/ChooseProvince.vue
index 7dc5051..10f3952 100644
--- a/src/pages/me/userinfo/ChooseProvince.vue
+++ b/src/pages/me/userinfo/ChooseProvince.vue
@@ -10,7 +10,7 @@
         <div class="row" @click="$nav('/choose-city')" v-for="item in list">
           <span>{{ item }}</span>
           <div class="right">
-            <back scale='1.5' direction="right"></back>
+            <back scale=".8" direction="right"></back>
           </div>
         </div>
       </div>
@@ -63,34 +63,6 @@ export default {
       }
 
     }
-
-    .row {
-      padding: 0 1.5rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 5rem;
-      font-size: 1.4rem;
-      transition: all .1s;
-      background: @main-bg;
-
-      .right {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: @second-text-color;
-
-        img {
-          margin-left: 1rem;
-          width: 15px;
-        }
-      }
-
-      &:active {
-        background: @active-main-bg;
-        color: @second-text-color;
-      }
-    }
   }
 }
 
diff --git a/src/pages/me/userinfo/EditUserInfo.vue b/src/pages/me/userinfo/EditUserInfo.vue
index d71a5bc..7e6e6e8 100644
--- a/src/pages/me/userinfo/EditUserInfo.vue
+++ b/src/pages/me/userinfo/EditUserInfo.vue
@@ -20,28 +20,28 @@
         <div class="left">名字</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.name) }}</span>
-          <back direction="right"></back>
+          <back scale=".8" direction="right"></back>
         </div>
       </div>
       <div class="row" @click="$nav('/edit-userinfo-item',{type:2})">
         <div class="left">抖音号</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.account) }}</span>
-          <back direction="right"></back>
+          <back scale=".8" direction="right"></back>
         </div>
       </div>
       <div class="row" @click="$nav('/edit-userinfo-item',{type:3})">
         <div class="left">简介</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.desc) }}</span>
-          <back direction="right"></back>
+          <back scale=".8" direction="right"></back>
         </div>
       </div>
       <div class="row" @click="showSexDialog">
         <div class="left">性别</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.sex) }}</span>
-          <back direction="right"></back>
+          <back scale=".8" direction="right"></back>
         </div>
       </div>
       <div class="row" @click="showBirthdayDialog">
@@ -49,21 +49,21 @@
         <div class="right">
           <span>{{ isEmpty(userinfo.birthday) }}</span>
           <div v-show="false" id="trigger1"></div>
-          <back direction="right"></back>
+          <back scale=".8" direction="right"></back>
         </div>
       </div>
       <div class="row" @click="$nav('/choose-location')">
         <div class="left">所在地</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.location) }}</span>
-          <back direction="right"></back>
+          <back scale=".8" direction="right"></back>
         </div>
       </div>
       <div class="row" @click="$nav('/add-school')">
         <div class="left">学校</div>
         <div class="right">
           <span>{{ isEmpty(userinfo.school.name) }}</span>
-          <back direction="right"></back>
+          <back scale=".8" direction="right"></back>
         </div>
       </div>
     </div>
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index e890ffa..a038539 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -239,6 +239,9 @@ export default {
 
 <style scoped lang="less">
 @import "../../assets/scss/index";
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
 
 #Message {
   position: absolute;
diff --git a/src/router/index.js b/src/router/index.js
index 35f6f86..0584a17 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,8 @@ import Test2 from "../pages/Test2";
 import Test3 from "../pages/Test3";
 import Share2Friend from "../pages/message/Share2Friend";
 import JoinedGroupChat from "../pages/message/JoinedGroupChat";
+import Report from "../pages/home/Report";
+import SubmitReport from "../pages/home/SubmitReport";
 
 const routes = [
   // {path: '', component: Music},
@@ -54,6 +56,8 @@ const routes = [
   {path: '/test2', component: Test2},
   {path: '/test3', component: Test3},
   {path: '/home', component: Index},
+  {path: '/home/report', component: Report},
+  {path: '/home/submit-report', component: SubmitReport},
   {path: '/attention', component: Attention},
   {path: '/publish', component: Publish},
   {path: '/message', component: Message},
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index 6fa7872..28ee1ca 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -140,6 +140,9 @@ export default {
       document.body.removeChild(div)
     }, 1000)
   },
+  $no(){
+    this.$notice('未实现')
+  },
   $back() {
     window.history.back()
   },
@@ -248,5 +251,22 @@ export default {
     //当前的transformY
     transformY = parseInt(transformY)
     return transformY
-  }
+  },
+  $storageSet(key, value) {
+    localStorage.setItem(key, JSON.stringify(value))
+  },
+  $storageGet(key, defaultValue = '') {
+    let res = localStorage.getItem(key)
+    if (res) {
+      return JSON.parse(res)
+    }
+    return defaultValue
+  },
+  $storageClear(key, isAll = false) {
+    if (isAll) {
+      localStorage.clear()
+    } else {
+      localStorage.removeItem(key)
+    }
+  },
 }
\ No newline at end of file
diff --git a/src/utils/mixin.js b/src/utils/mixin.js
index 02dd8e1..62c9849 100644
--- a/src/utils/mixin.js
+++ b/src/utils/mixin.js
@@ -65,7 +65,7 @@ export default {
             pressTimer = setTimeout(() => {
               // 执行函数
               handler();
-            }, 500)
+            }, 300)
           }
         }
         // 取消计时器