up333

packages/mobile/src/views/stair/index.vue

@@ -22,10 +22,10 @@
       />
     </div>
     <!-- 底部功能 -->
-    <div class="botBtn">
+    <div :class="`botBtn ${tubiaoShow ? '' : 'botBtnHide'}`">
       <div
         @click="cutPage(item.id)"
-        :class="`btnRow ${tubiaoShow ? '' : 'btnRowHide'}`"
+        :class="`btnRow`"
         v-for="item in btnData"
         :key="item.id"
       >
@@ -51,13 +51,16 @@
           </div>
         </transition>
       </div>
-      <div class="btnRow btnRow2" @click="tubiaoShow = !tubiaoShow">
-        <div>
-          <i class="el-icon-d-arrow-right" v-show="tubiaoShow"></i>
-          <i class="el-icon-d-arrow-left" v-show="!tubiaoShow"></i>
-        </div>
+    </div>
+
+    <!-- 隐藏和显示按钮 -->
+    <div class="tuBiao" @click="tubiaoShow = !tubiaoShow">
+      <div>
+        <i class="el-icon-d-arrow-right" v-show="tubiaoShow"></i>
+        <i class="el-icon-d-arrow-left" v-show="!tubiaoShow"></i>
       </div>
     </div>
+
     <!-- 简介组件 -->
     <StairIntro v-if="btnDataAc === 1" @close="btnDataAc = null" />
     <!-- 打卡组件 -->
@@ -82,8 +85,8 @@ export default {
       tubiaoShow: true,
 
       // 测试url
-      // textUrl: "http://project.4dage.com:8016/SWKK", //本地
-      textUrl: "/SWKK", //打包
+      textUrl: "http://project.4dage.com:8016/SWKK", //本地 
+      // textUrl: "/SWKK", //打包
 
       lookNum: 0,
       likeNum: 0,
@@ -213,7 +216,7 @@ export default {
   .upleft {
     position: absolute;
     left: 5px;
-    bottom: 86px;
+    bottom: 90px;
     display: flex;
     align-items: center;
     color: #fff;
@@ -252,13 +255,14 @@ export default {
     justify-content: space-around;
     bottom: 24px;
     left: 0px;
+    opacity: 1;
+    transition: all 0.5s;
     .btnRow {
       position: relative;
       text-align: center;
       width: 52px;
       height: 51px;
-      opacity: 1;
-      transition: all 0.5s;
+
       & > img {
         width: 52px;
         height: 51px;
@@ -273,28 +277,6 @@ export default {
       }
     }
 
-    .btnRow2 {
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 9999;
-
-      & > div {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #d6cece;
-        font-size: 30px;
-      }
-    }
-
-    .btnRowHide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
     .likeAddAnimate-enter-active,
     .likeAddAnimate-leave-active {
       transition: all 2s ease;
@@ -329,5 +311,25 @@ export default {
       }
     }
   }
+
+  .botBtnHide {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // 展示和隐藏图标
+  .tuBiao {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    z-index: 9999;
+    right: 0px;
+    bottom: 24px;
+    color: #d6cece;
+    font-size: 30px;
+  }
 }
 </style>

packages/pc/src/views/stair/index.vue

@@ -25,10 +25,10 @@
       <div class="row" v-for="item in data" :key="item.id">{{ item.name }}</div>
     </div> -->
     <!-- 底部功能 -->
-    <div class="botBtn">
+    <div :class="`botBtn ${tubiaoShow ? '' : 'botBtnHide'}`">
       <div
         @click="cutPage(item.id)"
-        :class="`btnRow ${tubiaoShow ? '' : 'btnRowHide'}`"
+        :class="`btnRow`"
         v-for="item in btnData"
         :key="item.id"
         @mouseenter="btnDataInd = item.id"
@@ -64,15 +64,16 @@
           {{ item.name }}
         </div>
       </div>
-      <!-- 展开收起图标 -->
-      <div
-        class="botBtnTuBiao"
-        :title="tubiaoShow ? '隐藏图标' : '显示图标'"
-        @click="tubiaoShow = !tubiaoShow"
-      >
-        <i class="el-icon-d-arrow-right" v-show="tubiaoShow"></i>
-        <i class="el-icon-d-arrow-left" v-show="!tubiaoShow"></i>
-      </div>
+    </div>
+
+    <!-- 展开收起图标 -->
+    <div
+      class="botBtnTuBiao"
+      :title="tubiaoShow ? '隐藏图标' : '显示图标'"
+      @click="tubiaoShow = !tubiaoShow"
+    >
+      <i class="el-icon-d-arrow-right" v-show="tubiaoShow"></i>
+      <i class="el-icon-d-arrow-left" v-show="!tubiaoShow"></i>
     </div>
 
     <!-- 简介组件 -->
@@ -325,15 +326,15 @@ export default {
     position: absolute;
     bottom: 55px;
     left: 80px;
-
+    opacity: 1;
+    transition: all 0.5s;
     .btnRow {
       position: relative;
       cursor: pointer;
       text-align: center;
       width: 87px;
       height: 51px;
-      opacity: 1;
-      transition: all 0.5s;
+
       & > img {
         width: 52px;
         height: 51px;
@@ -361,22 +362,20 @@ export default {
         text-align: center;
       }
     }
-    .btnRowHide {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    // 展开收起图标
-    .botBtnTuBiao {
-      position: absolute;
-      right: -30px;
-      top: 48%;
-      transform: translateY(-50%);
-      z-index: 99;
-      cursor: pointer;
-      color: #d6cece;
-      font-size: 30px;
-    }
+  }
+  .botBtnHide {
+    opacity: 0;
+    pointer-events: none;
+  }
+  // 展开收起图标
+  .botBtnTuBiao {
+    position: absolute;
+    bottom: 60px;
+    left: 510px;
+    z-index: 99;
+    cursor: pointer;
+    color: #d6cece;
+    font-size: 30px;
   }
 }
 </style>