优化

src/components/DouyinCode.vue

@@ -2,7 +2,9 @@
   <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="video-poster">
+          <img src="../assets/img/poster/1.jpg" class="poster">
+        </div>
         <div class="desc">
           <div class="left">
             <div class="user">@名字</div>
@@ -10,12 +12,6 @@
           </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-white.png" class="play">
-        </div>
       </div>
       <div class="toolbar">
         <div class="title">分享到</div>
@@ -38,7 +34,7 @@
           </div>
           <div class="share-to" @click="$no">
             <img src="../assets/img/icon/components/video/todownload.webp" alt="">
-            <span>保存</span>
+            <span>保存到相册</span>
           </div>
         </div>
         <div class="cancel" @click="cancel">取消</div>
@@ -80,16 +76,15 @@ export default {
   align-items: center;
   justify-content: flex-end;
   background: transparent;
+  @w: 70vw;
 
   .content {
     background: white;
-    width: 80vw;
-    margin-bottom: 20rem;
+    width: @w;
+    margin-bottom: 40rem;
     position: relative;
-
-    .top {
-      width: 100%;
-    }
+    border-radius: 10rem;
+    overflow: hidden;
 
     .desc {
       margin-bottom: 20rem;
@@ -103,42 +98,21 @@ export default {
           font-size: 14rem;
           color: @second-text-color;
         }
-
       }
-
       .code {
         width: 60rem;
       }
     }
 
-    .bottom {
-      width: 100%;
-    }
-
     .video-poster {
-      width: 35vw;
-      height: calc(35vw * 1.5);
-      position: absolute;
-      top: 80rem;
-      left: 50%;
-      transform: translateX(-50%);
+      width: @w;
+      height: @w;
       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: 40rem;
+        object-fit: cover;
       }
     }
   }
@@ -151,7 +125,7 @@ export default {
 
     .title {
       font-size: 12rem;
-      padding: 10rem;
+      padding: 14rem;
       text-align: center;
     }
 
@@ -163,15 +137,14 @@ export default {
       padding-right: @space-width * 2;
 
       .share-to {
-        margin-left: @space-width;
+        margin-left: 28rem;
         margin-bottom: @space-width;
 
-
         img {
-
           width: @icon-width;
           height: @icon-width;
           border-radius: 50%;
+          margin-bottom: 5rem;
         }
 
         span {
@@ -185,7 +158,7 @@ export default {
 
     .cancel {
       font-size: 16rem;
-      background: rgb(38,38,38);
+      background: rgb(38, 38, 38);
       padding: 15rem;
       text-align: center;
     }

src/components/Share.vue

@@ -11,7 +11,7 @@
       mode="dark">
     <div class="share">
       <div class="title">
-        <span>私信给朋友</span>
+        <span>分享给朋友</span>
         <dy-back mode="light" img="close" direction="right" @click.stop="closeShare"></dy-back>
       </div>
       <div class="friends">
@@ -30,66 +30,54 @@
         <template v-if="mode === 'video'">
           <div class="share-to" @click.stop="$no">
             <img src="../assets/img/icon/components/video/torichang.png" alt="">
-            <span>分享日常</span>
+            <span>转发</span>
           </div>
           <div class="share-to" @click.stop="closeShare($emit('ShareToFriend'))">
             <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
             <span>私信朋友</span>
           </div>
-          <div class="share-to" @click.stop="closeShare($emit('showShare2WeChatZone'))">
+          <div class="share-to" @click.stop="copyLink">
             <img src="../assets/img/icon/components/video/towechat.webp" alt="">
-            <span>朋友圈</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2WeChat'))">
-            <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
-            <span>微信好友</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2QQZone'))">
-            <img src="../assets/img/icon/components/video/tozone.webp" alt="">
-            <span>QQ空间</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2QQ'))">
-            <img src="../assets/img/icon/components/video/toqq.webp" alt="">
-            <span>QQ好友</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('showShareDuoshan'))">
-            <img src="../assets/img/icon/components/video/duoshan.png" alt="">
-            <span>多闪</span>
-          </div>
-          <div class="share-to" @click.stop="$no">
-            <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">
-            <span>今日头条</span>
+            <span>复制链接</span>
           </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2Webo'))">
-            <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
-            <span>微博</span>
+          <div class="share-to" v-if="canDownload" @click.stop="closeShare($emit('download'))">
+            <img src="../assets/img/icon/components/video/towechat.webp" alt="">
+            <span>保存本地</span>
           </div>
+          <div class="share-to" @click.stop="closeShare($emit('showDouyinCode'))">
+            <img src="../assets/img/icon/components/video/towechat.webp" alt="">
+            <span>生成图片</span>
+          </div>
+          <!--          <div class="share-to" @click.stop="closeShare($emit('showShare2WeChatZone'))">-->
+          <!--            <img src="../assets/img/icon/components/video/towechat.webp" alt="">-->
+          <!--            <span>朋友圈</span>-->
+          <!--          </div>-->
+          <!--          <div class="share-to" @click.stop="closeShare($emit('share2WeChat'))">-->
+          <!--            <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">-->
+          <!--            <span>微信好友</span>-->
+          <!--          </div>-->
+          <!--          <div class="share-to" @click.stop="closeShare($emit('share2QQZone'))">-->
+          <!--            <img src="../assets/img/icon/components/video/tozone.webp" alt="">-->
+          <!--            <span>QQ空间</span>-->
+          <!--          </div>-->
+          <!--          <div class="share-to" @click.stop="closeShare($emit('share2QQ'))">-->
+          <!--            <img src="../assets/img/icon/components/video/toqq.webp" alt="">-->
+          <!--            <span>QQ好友</span>-->
+          <!--          </div>-->
+          <!--          <div class="share-to" @click.stop="$no">-->
+          <!--            <img src="../assets/img/icon/components/video/totoutiao.webp" alt="">-->
+          <!--            <span>今日头条</span>-->
+          <!--          </div>-->
+          <!--          <div class="share-to" @click.stop="closeShare($emit('share2Webo'))">-->
+          <!--            <img src="../assets/img/icon/components/video/toweibo.webp" alt="">-->
+          <!--            <span>微博</span>-->
+          <!--          </div>-->
         </template>
         <template v-if="mode === 'music'">
           <div class="share-to" @click.stop="closeShare($emit('ShareToFriend'))">
             <img src="../assets/img/icon/components/video/tofriend.webp" alt="">
             <span>私信朋友</span>
           </div>
-          <div class="share-to" @click.stop="closeShare($emit('showShare2WeChatZone'))">
-            <img src="../assets/img/icon/components/video/towechat.webp" alt="">
-            <span>朋友圈</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2WeChat'))">
-            <img src="../assets/img/icon/components/video/towechatchat.webp" alt="">
-            <span>微信好友</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2QQZone'))">
-            <img src="../assets/img/icon/components/video/tozone.webp" alt="">
-            <span>QQ空间</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2QQ'))">
-            <img src="../assets/img/icon/components/video/toqq.webp" alt="">
-            <span>QQ好友</span>
-          </div>
-          <div class="share-to" @click.stop="closeShare($emit('share2Webo'))">
-            <img src="../assets/img/icon/components/video/toweibo.webp" alt="">
-            <span>微博</span>
-          </div>
         </template>
         <template v-if="mode === 'my-music'">
           <div class="share-to" @click.stop="$no">
@@ -103,28 +91,19 @@
         </template>
       </div>
       <div class="toolbar ">
-        <template v-if="mode === 'qrcode'">
-          <div class="tool" @click.stop="copyLink">
-            <img src="../assets/img/icon/components/video/link.png" alt="">
-            <span>复制链接</span>
-          </div>
-        </template>
         <template v-if="mode === 'music'">
-          <div class="tool" @click.stop="copyLink">
-            <img src="../assets/img/icon/components/video/link.png" alt="">
-            <span>复制链接</span>
-          </div>
           <div class="tool" @click.stop="$nav('/home/report',{mode:this.mode})">
             <img src="../assets/img/icon/components/video/warring.png" alt="">
             <span>举报音乐</span>
           </div>
-          <div class="tool" @click.stop="closeShare($emit('showDouyinCode'))">
-            <img src="../assets/img/icon/components/video/qrcode.png" alt="">
-            <span>抖音码</span>
-          </div>
         </template>
         <template v-if="mode === 'video'">
           <div class="tool" @click.stop="$no">
+<!--TODO icon不对            -->
+            <img src="../assets/img/icon/components/video/feedback.webp" alt="">
+            <span>建群分享</span>
+          </div>
+          <div class="tool" @click.stop="$no">
             <img src="../assets/img/icon/components/video/comeonlook.webp" alt="">
             <span>一起视频</span>
           </div>
@@ -132,16 +111,6 @@
             <img src="../assets/img/icon/components/video/warring.png" alt="">
             <span>举报</span>
           </div>
-          <div class="tool" @click.stop="canDownload && closeShare($emit('download'))"
-               :style="{ opacity : canDownload ? '1' : '0.5' }">
-            <img src="../assets/img/icon/components/video/download.png" alt="">
-            <span>保存本地</span>
-          </div>
-          <div class="tool" @click.stop="toggleCollect">
-            <img v-if="isCollect" src="../assets/img/icon/components/video/star-full.png" alt="">
-            <img v-else src="../assets/img/icon/components/video/star.png" alt="">
-            <span>收藏</span>
-          </div>
           <div class="tool" @click.stop="$no">
             <img src="../assets/img/icon/components/video/comeonplay.png" alt="">
             <span>合拍</span>
@@ -150,23 +119,14 @@
             <img src="../assets/img/icon/components/video/bizhi.webp" alt="">
             <span>动态壁纸</span>
           </div>
-          <!--        todo-->
-          <div class="tool" @click.stop="closeShare($emit('dislike'))">
-            <img src="../assets/img/icon/components/video/dislike.png" alt="">
-            <span>不感兴趣</span>
-          </div>
-          <div class="tool" @click.stop="copyLink">
-            <img src="../assets/img/icon/components/video/link.png" alt="">
-            <span>复制链接</span>
-          </div>
-          <div class="tool" @click.stop="closeShare($emit('showDouyinCode'))">
-            <img src="../assets/img/icon/components/video/qrcode.png" alt="">
-            <span>抖音码</span>
-          </div>
           <div class="tool" @click.stop="$no">
             <img src="../assets/img/icon/components/video/dou.webp" alt="">
             <span>帮上热门</span>
           </div>
+          <div class="tool" @click.stop="closeShare($emit('dislike'))">
+            <img src="../assets/img/icon/components/video/dislike.png" alt="">
+            <span>不感兴趣</span>
+          </div>
           <div class="tool" @click.stop="closeShare($emit('play-feedback'))">
             <img src="../assets/img/icon/components/video/feedback.webp" alt="">
             <span>播放反馈</span>
@@ -234,7 +194,6 @@ export default {
   data() {
     return {
       isCreateChat: false,
-      isCollect: false
     }
   },
   methods: {
@@ -243,17 +202,10 @@ export default {
       this.$showLoading()
       await this.$sleep(500)
       this.$hideLoading()
+      //TODO 抖音样式改了
       this.$notice('复制成功')
     },
-    toggleCollect() {
-      this.closeShare()
-      if (this.isCollect) {
-        this.$notice('取消收藏成功')
-      } else {
-        this.$notice('收藏成功')
-      }
-      this.isCollect = !this.isCollect
-    },
+
     toggleCall(item) {
       item.select = !item.select
     },
@@ -275,7 +227,8 @@ export default {
   box-sizing: border-box;
 
   @space-width: 18rem;
-  @icon-width: 48rem;
+  @avatar-width: 48rem;
+  @icon-width: 28rem;
 
   .title {
     font-size: 14rem;
@@ -301,7 +254,7 @@ export default {
     padding-right: @space-width * 2;
 
     .friend {
-      width: @icon-width;
+      width: @avatar-width;
       position: relative;
       margin-left: @space-width;
       margin-bottom: @space-width;
@@ -311,15 +264,15 @@ export default {
       align-items: center;
 
       .avatar {
-        width: @icon-width;
-        height: @icon-width;
+        width: @avatar-width;
+        height: @avatar-width;
         border-radius: 50%;
       }
 
       span {
         margin-top: 5rem;
         text-align: center;
-        width: @icon-width;
+        width: @avatar-width;
         //white-space: nowrap;
         //overflow: hidden;
         //text-overflow: ellipsis;
@@ -327,7 +280,7 @@ export default {
 
       .checked {
         position: absolute;
-        top: @icon-width - 1.5;
+        top: @avatar-width - 1.5;
         right: -2px;
         width: 20rem;
         height: 20rem;
@@ -376,9 +329,8 @@ export default {
 
 
       img {
-
-        width: @icon-width;
-        height: @icon-width;
+        width: @avatar-width;
+        height: @avatar-width;
         border-radius: 50%;
       }
 
@@ -403,8 +355,8 @@ export default {
       margin-bottom: @space-width;
 
       img {
-        width: @icon-width - 2;
-        height: @icon-width - 2;
+        width: @icon-width;
+        height: @icon-width;
         padding: 10rem;
         border-radius: 50%;
         //background: @second-btn-color;

src/components/slide/ItemToolbar.vue

@@ -74,8 +74,10 @@ function showComments() {
       <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
+<!--TODO     -->
     <div class="message mb2r" @click.stop="showComments">
-      <img src="../../assets/img/icon/star-white.png" alt="" class="message-image">
+      <img v-if="item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
+      <img v-else src="@/assets/img/icon/components/video/star.png" alt="" class="message-image">
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
     <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">

src/components/slide/SlideAlbum.vue

@@ -35,7 +35,7 @@
              :style="getProgressWidth(index)"></div>
       </div>
     </div>
-    <Teleport to="#slideHook" v-if="state.isPreview">
+    <Teleport to="#home-index" v-if="state.isPreview">
       <div class="preview">
         <div class="preview-wrapper">
           <img :src="img"
@@ -49,7 +49,7 @@
         </div>
       </div>
     </Teleport>
-    <Teleport to="#slideHook" v-if="state.operationStatus === SlideAlbumOperationStatus.Detail">
+    <Teleport to="#home-index" v-if="state.operationStatus === SlideAlbumOperationStatus.Detail">
       <div class="album-toolbar">
         <div class="left">关闭</div>
         <div class="right">

src/pages/home/Index2.vue

@@ -126,7 +126,6 @@
            :videoId="videos[videoActiveIndex]?.id"
            :canDownload="videos[videoActiveIndex]?.canDownload"
            @play-feedback="showPlayFeedback = true"
-           @showShareDuoshan="delayShowDialog(e => this.showShareDuoshan = true)"
            @shareToFriend="delayShowDialog(e => this.shareToFriend = true)"
            @showDouyinCode="showDouyinCode = true"
            @showShare2WeChatZone="shareType = 2"
@@ -141,7 +140,6 @@
 
     <DouyinCode v-model="showDouyinCode"/>
 
-    <Duoshan v-model="showShareDuoshan"/>
 
     <ShareTo v-model:type="shareType"
              :videoId="videos[videoActiveIndex]?.id"
@@ -180,7 +178,6 @@ import SlideColumnList from "../../components/slide/SlideColumnList";
 import SlideRowList from "../../components/slide/SlideRowList";
 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";
 import Uploader from "../me/Uploader";
@@ -204,7 +201,6 @@ export default {
     Share,
     Uploader,
     PlayFeedback,
-    Duoshan,
     ShareTo,
     DouyinCode,
     FollowSetting,

src/pages/home/components/Duoshan.vue

@@ -1,99 +0,0 @@
-<template>
-  <from-bottom-dialog
-      page-id="home-index"
-      :modelValue="modelValue"
-      @update:modelValue="e=>$emit('update:modelValue',e)"
-      @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/less/index";
-
-.share-to-duoshan {
-  padding: 30rem 20rem;
-  min-height: calc(50vh - 60rem);
-  //min-height: 50vh;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-
-
-  .logo {
-    height: 120rem;
-    width: 120rem;
-  }
-
-  .wrapper {
-    width: 100%;
-  }
-
-  .title2 {
-    margin-bottom: 20rem;
-    text-align: center;
-    font-size: 20rem;
-    color: black;
-  }
-
-  .subtitle {
-    text-align: center;
-    font-size: 12rem;
-    color: @second-text-color;
-  }
-
-
-  .button {
-    width: 100%;
-
-    img {
-      height: 22rem;
-      margin-right: 5rem;
-    }
-  }
-}
-</style>

src/pages/home/components/ShareTo.vue

@@ -85,7 +85,7 @@
 
         <template v-if="showDownload">
           <b-button type="primary" @click="$no">
-            去相册查看
+            已保存，请去相册查看
             <dy-back scale="0.7" mode="light" direction="right"></dy-back>
           </b-button>
 

src/pages/slideHooks/index.vue

@@ -14,7 +14,7 @@
         >
           <H class="first-horizontal-item"
              name="main"
-             id="slideHook"
+             id="home-index"
              v-model:index="state.navIndex">
             <SlideItem id="slide1">
               <div class="sub-type"
@@ -63,7 +63,7 @@
               </div>
               <VInfinite
                   @touchstart="pageClick"
-                  v-love="'slideHook'"
+                  v-love="'home-index'"
                   :style="{background: 'black',marginTop:state.subTypeVisible?state.subTypeHeight:0}"
                   name="main"
                   id="slide1-infinite"
@@ -121,18 +121,17 @@
       </SlideItem>
     </H>
 
-    <Comment page-id="slideHook" v-model="state.commentVisible"
+    <Comment page-id="home-index" v-model="state.commentVisible"
              @close="closeComments"
     />
 
     <Share v-model="state.isSharing"
            ref="share"
-           page-id="slideHook"
+           page-id="home-index"
            @dislike="dislike"
            :videoId="state.recommendVideos[state.itemIndex]?.id"
            :canDownload="state.recommendVideos[state.itemIndex]?.canDownload"
            @play-feedback="state.showPlayFeedback = true"
-           @showShareDuoshan="delayShowDialog(e => state.showShareDuoshan = true)"
            @shareToFriend="delayShowDialog(e => state.shareToFriend = true)"
            @showDouyinCode="state.showDouyinCode = true"
            @showShare2WeChatZone="state.shareType = 2"
@@ -147,8 +146,6 @@
 
     <DouyinCode v-model="state.showDouyinCode"/>
 
-    <Duoshan v-model="state.showShareDuoshan"/>
-
     <ShareTo v-model:type="state.shareType"
              :videoId="state.recommendVideos[state.itemIndex]?.id"
              :canDownload="state.recommendVideos[state.itemIndex]?.canDownload"
@@ -195,19 +192,14 @@ import Utils from "@/utils";
 import api from "@/api";
 import {useStore} from "vuex";
 import PlayFeedback from "@/pages/home/components/PlayFeedback";
-import FromBottomDialog from "../../components/dialog/FromBottomDialog";
-import Duoshan from "@/pages/home/components/Duoshan";
 import ShareTo from "@/pages/home/components/ShareTo";
 import DouyinCode from "../../components/DouyinCode";
-import Uploader from "../me/Uploader";
 import FollowSetting from "@/pages/home/components/FollowSetting";
 import BlockDialog from "../message/components/BlockDialog";
 import Search from "../../components/Search";
 import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 import FollowSetting2 from "@/pages/home/components/FollowSetting2";
-import Dom from "../../utils/dom";
 import ShareToFriend from "@/pages/home/components/ShareToFriend";
-import resource from "@/assets/data/resource";
 import UserPanel from "@/components/UserPanel.vue";
 import Community from "@/pages/slideHooks/Community.vue";
 import Shop from "@/pages/slideHooks/Shop.vue";