优化

src/components/UserPanel.vue

@@ -90,20 +90,36 @@
             {{ state.localAuthor.school?.name }}
           </div>
         </div>
-
+      </div>
       <div class="other">
+        <div class="scroll-x" @touchmove="stop">
           <div class="item">
             <img src="@/assets/img/icon/me/shopping-cart-white.png" alt="">
             <div class="right">
-              <div class="top">抖音商城</div>
-              <div class="bottom">发现超值好物</div>
+              <div class="top">进入橱窗</div>
+              <div class="bottom">9件好物</div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="@/assets/img/icon/me/play.png" alt="">
+            <div class="right">
+              <div class="top">直播动态</div>
+              <div class="bottom">可预约明天直播</div>
             </div>
           </div>
           <div class="item">
             <img src="@/assets/img/icon/me/music-white.png" alt="">
             <div class="right">
-              <div class="top">我的音乐</div>
-              <div class="bottom">已收藏20首</div>
+              <div class="top">Ta的音乐</div>
+              <div class="bottom">听听ta的歌单</div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="@/assets/img/icon/people/address-book.png" alt="">
+            <div class="right">
+              <div class="top">粉丝群</div>
+              <div class="bottom">1个群聊</div>
+            </div>
           </div>
         </div>
       </div>
@@ -159,7 +175,7 @@
           </div>
         </div>
       </div>
-      </div>
+
       <div class="total" ref="total">
         作品 62
         <img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
@@ -279,6 +295,7 @@ onMounted(() => {
 function stop(e) {
   e.stopPropagation()
 }
+
 function followButton() {
 }
 
@@ -669,13 +686,24 @@ function touchEnd(e) {
         }
       }
 
+
+    }
+
     .other {
       display: flex;
       margin-bottom: 20rem;
+      overflow: hidden;
+
+      .scroll-x {
+        padding-left: 20rem;
+        display: flex;
+        overflow-x: scroll;
+      }
 
       .item {
         margin-right: 25rem;
         display: flex;
+        flex-shrink: 0;
 
         img {
           margin-right: 8rem;
@@ -704,8 +732,7 @@ function touchEnd(e) {
     }
 
     .my-buttons {
-        margin-top: 20rem;
-        margin-bottom: 20rem;
+      margin: 20rem;
       overflow: hidden;
       display: flex;
       justify-content: flex-end;
@@ -825,15 +852,15 @@ function touchEnd(e) {
 
     .recommend {
       transition: all .3s ease;
-        height: 230rem;
+      height: 250rem;
       overflow: hidden;
-        margin-bottom: 20rem;
 
       &.hidden {
         height: 0;
       }
 
       .title {
+        padding-left: 20rem;
         font-size: 12rem;
         color: @second-text-color;
         display: flex;
@@ -847,9 +874,11 @@ function touchEnd(e) {
       }
 
       .friends {
+        padding-left: 20rem;
         margin-top: 10rem;
         display: flex;
         overflow-x: scroll;
+        margin-bottom: 20rem;
 
         .friend {
           position: relative;
@@ -906,7 +935,6 @@ function touchEnd(e) {
         }
       }
     }
-    }
 
     .total {
       background: @main-bg;

src/pages/slideHooks/Shop.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Shop"
+}
+</script>
+
+<style scoped>
+
+</style>