优化

src/components/Footer.vue

@@ -10,9 +10,7 @@
     </div>
     <div class="l-button" @click="tab(3)">
       <div class="add-ctn">
-        <div class="add-one">
+        <img src="../assets/img/icon/add-light.png" alt="" class="add">
-          <img src="../assets/img/icon/add-light.png" alt="" class="add">
-        </div>
       </div>
     </div>
     <div class="l-button" @click="tab(4)">
@@ -125,24 +123,17 @@ export default {
 
     .add-ctn {
       @height: 27rem;
-      @width: 40rem;
+      @width: 36rem;
       height: @height;
       width: @width;
-      background: linear-gradient(to right, #59dcdf, #ff5f75);
+      border-radius: 6rem;
-      border-radius: 5rem;
       box-sizing: border-box;
       padding: 0 2rem;
-
+      border: 3rem solid white;
-      .add-one {
+      background: black;
-        box-sizing: border-box;
+      display: flex;
-        height: 100%;
+      align-items: center;
-        border-radius: 5rem;
+      justify-content: center;
-        border: 2px solid white;
-        background: black;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
 
       img {
         width: 20rem;

src/components/Share.vue

@@ -340,10 +340,10 @@ export default {
       margin-bottom: @space-width;
 
       img {
-        width: @icon-width - 2.6;
+        width: 20rem;
-        height: @icon-width - 2.6;
         padding: 13rem;
         border-radius: 50%;
+        margin-bottom: 3rem;
         background: @second-btn-color-tran;
         //background: rgb(56, 58, 57);
       }

src/components/slide/SlideAlbum.vue

@@ -324,7 +324,7 @@ function progressBarTouchMEnd(e) {
 }
 
 function touchStart(e) {
-  console.log('start', e.touches.length)
+  // console.log('start', e.touches.length)
   if (e.touches.length === 1) {
     slideTouchStart(e, wrapperEl.value, state)
   } else {
@@ -338,10 +338,10 @@ function touchStart(e) {
 }
 
 function touchMove(e) {
-  console.log('move', e.touches.length,)
+  // console.log('move', e.touches.length,)
   let current1 = {x: e.touches[0].pageX, y: e.touches[0].pageY}
   if (isZooming.value && e.touches.length === 1) {
-    console.log('m1')
+    // console.log('m1')
     state.status = 'pause'
     Utils.$stopPropagation(e)
 
@@ -355,7 +355,7 @@ function touchMove(e) {
     state.last.point1 = current1
   } else {
     if (e.touches.length === 1) {
-      console.log('m2')
+      // console.log('m2')
       slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,
           () => {
             state.status = 'pause'
@@ -366,7 +366,7 @@ function touchMove(e) {
             }
           })
     } else {
-      console.log('m3')
+      // console.log('m3')
       state.operationStatus = SlideAlbumOperationStatus.Zooming
       Utils.$stopPropagation(e)
       state.status = 'pause'

src/components/slide/SlideUser.vue

@@ -246,6 +246,7 @@ export default {
 </script>
 
 <style scoped lang="less">
+@p: 15rem;
 #SlideUser {
   width: 100%;
   height: 100%;
@@ -255,9 +256,11 @@ export default {
   align-items: center;
   justify-content: center;
   position: relative;
+  padding: 0 @p;
+  box-sizing: border-box;
 
   .content {
-    width: 85%;
+    width: 100%;
     background: linear-gradient(to bottom, rgb(71, 90, 110), rgb(97, 84, 75));
     display: flex;
     flex-direction: column;
@@ -362,11 +365,11 @@ export default {
     bottom: 20rem;
     display: flex;
     justify-content: space-between;
-    left: 15rem;
+    left: @p;
-    right: 15rem;
+    right: @p;
 
     .button {
-      width: 49%;
+      width: 48%;
     }
 
 

src/pages/slideHooks/IndicatorHome.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="indicator-home" :class="isLight">
+  <div class="indicator-home" :class="{isLight}">
     <transition name="fade">
       <div class="mask" v-if="open" @click="open = false"></div>
     </transition>
@@ -205,7 +205,11 @@ export default {
   font-weight: bold;
 
   &.isLight {
-    color: black;
+    .tab{
+      &.active {
+        color: black!important;
+      }
+    }
   }
 
   .notice {

src/pages/slideHooks/index.vue

@@ -226,7 +226,7 @@ const bodyWidth = computed(() => store.state.bodyWidth)
 const subTypeRef = ref(null)
 const state = reactive({
   baseIndex: 0,
-  navIndex: 0,
+  navIndex: 4,
   itemIndex: 0,
   test: '',
   recommendVideos: [
@@ -234,14 +234,14 @@ const state = reactive({
     //   type: 'img',
     //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
     // },
-    {
+    // {
-      type: 'imgs',
+    //   type: 'imgs',
-      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-    },
+    // },
-    {
+    // {
-      type: 'user',
+    //   type: 'user',
-      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+    //   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-    },
+    // },
   ],
 
   isSharing: false,
@@ -404,7 +404,6 @@ function render(item, itemIndex, play, position) {
 <style scoped lang="less">
 @import "@/assets/less/index";
 
-
 .test-slide-wrapper {
   font-size: 14rem;
   width: 100%;