From e95d08674e59f2ea5bffdb299e4178f08b28ff84 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 13 Feb 2023 01:33:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserPanel.vue  | 512 ++++++++++++++++++----------------
 src/pages/slideHooks/Shop.vue |  13 +
 2 files changed, 283 insertions(+), 242 deletions(-)
 create mode 100644 src/pages/slideHooks/Shop.vue

diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 33bda8d..568e699 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -90,76 +90,92 @@
             {{ state.localAuthor.school?.name }}
           </div>
         </div>
-
-        <div class="other">
+      </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>
-
-        <div class="my-buttons">
-          <div class="follow-display">
-            <div class="follow-wrapper" :class="state.localAuthor.is_follow ? 'follow-wrapper-followed' : ''">
-              <div class="no-follow" @click="state.localAuthor.is_follow = true">
-                <img src="@/assets/img/icon/add-white.png" alt="">
-                <span>关注</span>
-              </div>
-              <div class="followed">
-                <div class="l-button" @click="$emit('showFollowSetting2')">
-                  <span>已关注</span>
-                  <img src="@/assets/img/icon/arrow-up-white.png" alt="">
-                </div>
-                <div class="l-button" @click="$nav('/message/chat')">
-                  <span>私信</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="option"
-               :class="state.isShowRecommend?'option-recommend':''"
-               @click="state.isShowRecommend = !state.isShowRecommend">
-            <img v-if="state.loadings.showRecommend" class="loading" src="@/assets/img/icon/loading-gray.png"
-                 alt="">
-            <img v-else class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
-          </div>
-        </div>
-
-        <div class="recommend" :class="{hidden:!state.isShowRecommend}">
-          <div class="title">
-            <span>你可能感兴趣</span>
-            <img src="@/assets/img/icon/about-gray.png">
-          </div>
-          <div class="friends"
-               @touchmove="stop">
-            <div class="friend" v-for="item in friends.all">
-              <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
-              <span class="name">{{ item.name }}</span>
-              <span class="tips">可能感兴趣的人</span>
-              <b-button type="primary">关注</b-button>
-              <div class="close">
-                <dy-back img="close" scale=".6"></dy-back>
-              </div>
-            </div>
-            <div class="more" @click="$nav('/people/find-acquaintance')">
-              <div class="notice">
-                <div>点击查看</div>
-                <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>
+
+      <div class="my-buttons">
+        <div class="follow-display">
+          <div class="follow-wrapper" :class="state.localAuthor.is_follow ? 'follow-wrapper-followed' : ''">
+            <div class="no-follow" @click="state.localAuthor.is_follow = true">
+              <img src="@/assets/img/icon/add-white.png" alt="">
+              <span>关注</span>
+            </div>
+            <div class="followed">
+              <div class="l-button" @click="$emit('showFollowSetting2')">
+                <span>已关注</span>
+                <img src="@/assets/img/icon/arrow-up-white.png" alt="">
+              </div>
+              <div class="l-button" @click="$nav('/message/chat')">
+                <span>私信</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="option"
+             :class="state.isShowRecommend?'option-recommend':''"
+             @click="state.isShowRecommend = !state.isShowRecommend">
+          <img v-if="state.loadings.showRecommend" class="loading" src="@/assets/img/icon/loading-gray.png"
+               alt="">
+          <img v-else class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
+        </div>
+      </div>
+
+      <div class="recommend" :class="{hidden:!state.isShowRecommend}">
+        <div class="title">
+          <span>你可能感兴趣</span>
+          <img src="@/assets/img/icon/about-gray.png">
+        </div>
+        <div class="friends"
+             @touchmove="stop">
+          <div class="friend" v-for="item in friends.all">
+            <img :style="item.select?'opacity: .5;':''" class="avatar" :src="$imgPreview(item.avatar)" alt="">
+            <span class="name">{{ item.name }}</span>
+            <span class="tips">可能感兴趣的人</span>
+            <b-button type="primary">关注</b-button>
+            <div class="close">
+              <dy-back img="close" scale=".6"></dy-back>
+            </div>
+          </div>
+          <div class="more" @click="$nav('/people/find-acquaintance')">
+            <div class="notice">
+              <div>点击查看</div>
+              <div>更多好友</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="total" ref="total">
         作品 62
         <img class="arrow" src="@/assets/img/icon/arrow-up-white.png" alt="">
@@ -276,9 +292,10 @@ onMounted(() => {
   state.videos.my.total = resource.my.length
 })
 
-function stop(e){
+function stop(e) {
   e.stopPropagation()
 }
+
 function followButton() {
 }
 
@@ -669,240 +686,251 @@ function touchEnd(e) {
         }
       }
 
-      .other {
+
+    }
+
+    .other {
+      display: flex;
+      margin-bottom: 20rem;
+      overflow: hidden;
+
+      .scroll-x {
+        padding-left: 20rem;
         display: flex;
-        margin-bottom: 20rem;
+        overflow-x: scroll;
+      }
 
-        .item {
-          margin-right: 25rem;
+      .item {
+        margin-right: 25rem;
+        display: flex;
+        flex-shrink: 0;
+
+        img {
+          margin-right: 8rem;
+          border-radius: 4rem;
+          background: @second-btn-color-tran;
+          padding: 8rem;
+          height: 22rem;
+        }
+
+        .right {
           display: flex;
+          justify-content: space-between;
+          flex-direction: column;
 
-          img {
-            margin-right: 8rem;
-            border-radius: 4rem;
-            background: @second-btn-color-tran;
-            padding: 8rem;
-            height: 22rem;
+          .top {
+            color: white;
+            font-size: 14rem;
           }
 
-          .right {
-            display: flex;
-            justify-content: space-between;
-            flex-direction: column;
-
-            .top {
-              color: white;
-              font-size: 14rem;
-            }
-
-            .bottom {
-              color: @second-text-color;
-              font-size: 12rem;
-            }
+          .bottom {
+            color: @second-text-color;
+            font-size: 12rem;
           }
         }
       }
+    }
 
-      .my-buttons {
-        margin-top: 20rem;
-        margin-bottom: 20rem;
+    .my-buttons {
+      margin: 20rem;
+      overflow: hidden;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      @width: 36rem;
+
+      .follow-display {
+        flex: 1;
         overflow: hidden;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        @width: 36rem;
 
-        .follow-display {
-          flex: 1;
-          overflow: hidden;
+        .follow-wrapper {
+          width: 200%;
+          display: flex;
+          flex-wrap: nowrap;
+          transition: all .3s ease;
 
-          .follow-wrapper {
-            width: 200%;
+          &.follow-wrapper-followed {
+            transform: translate3d(-50%, 0, 0);
+          }
+
+          .no-follow {
+            width: calc(100% - 5rem);
+            color: white;
+            border-radius: 4rem;
+            background: @primary-btn-color;
+            height: @width;
             display: flex;
-            flex-wrap: nowrap;
-            transition: all .3s ease;
+            align-items: center;
+            justify-content: center;
+            margin-right: 5rem;
+            box-sizing: border-box;
 
-            &.follow-wrapper-followed {
-              transform: translate3d(-50%, 0, 0);
+            span {
+              margin-left: 2rem;
             }
+          }
 
-            .no-follow {
-              width: calc(100% - 5rem);
+          .followed {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            .l-button {
               color: white;
               border-radius: 4rem;
-              background: @primary-btn-color;
+              background: @second-btn-color;
               height: @width;
+              width: 50%;
+              margin-right: 5rem;
+              box-sizing: border-box;
               display: flex;
               align-items: center;
               justify-content: center;
-              margin-right: 5rem;
-              box-sizing: border-box;
 
               span {
                 margin-left: 2rem;
               }
-            }
 
-            .followed {
-              width: 100%;
-              display: flex;
-              justify-content: space-around;
-              align-items: center;
-
-              .l-button {
-                color: white;
-                border-radius: 4rem;
-                background: @second-btn-color;
-                height: @width;
-                width: 50%;
-                margin-right: 5rem;
-                box-sizing: border-box;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                span {
-                  margin-left: 2rem;
-                }
-
-                img {
-                  transform: rotate(180deg);
-                }
+              img {
+                transform: rotate(180deg);
               }
             }
           }
-
-          img {
-            @width: 14rem;
-            width: @width;
-            height: @width;
-          }
         }
 
-        .option {
-          position: relative;
-          width: @width;
-          height: @width;
-          font-size: 12rem;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: 4rem;
-          background: @second-btn-color;
-          color: white;
-
-          &.option-recommend {
-            .arrow {
-              transform: rotate(0deg);
-            }
-          }
-        }
-
-        .loading {
-          @width: 12rem;
-          width: @width;
-          height: @width;
-          animation: rotate .6s linear infinite;
-
-          @keyframes rotate {
-            from {
-              transform: rotate(0deg)
-            }
-            to {
-              transform: rotate(360deg)
-            }
-          }
-        }
-
-        .arrow {
-          transition: transform .3s ease;
-          transform: rotate(180deg);
-          @width: 16rem;
+        img {
+          @width: 14rem;
           width: @width;
           height: @width;
         }
       }
 
-      .recommend {
-        transition: all .3s ease;
-        height: 230rem;
-        overflow: hidden;
+      .option {
+        position: relative;
+        width: @width;
+        height: @width;
+        font-size: 12rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4rem;
+        background: @second-btn-color;
+        color: white;
+
+        &.option-recommend {
+          .arrow {
+            transform: rotate(0deg);
+          }
+        }
+      }
+
+      .loading {
+        @width: 12rem;
+        width: @width;
+        height: @width;
+        animation: rotate .6s linear infinite;
+
+        @keyframes rotate {
+          from {
+            transform: rotate(0deg)
+          }
+          to {
+            transform: rotate(360deg)
+          }
+        }
+      }
+
+      .arrow {
+        transition: transform .3s ease;
+        transform: rotate(180deg);
+        @width: 16rem;
+        width: @width;
+        height: @width;
+      }
+    }
+
+    .recommend {
+      transition: all .3s ease;
+      height: 250rem;
+      overflow: hidden;
+
+      &.hidden {
+        height: 0;
+      }
+
+      .title {
+        padding-left: 20rem;
+        font-size: 12rem;
+        color: @second-text-color;
+        display: flex;
+        align-items: center;
+
+        img {
+          margin-left: 3rem;
+          width: 13rem;
+          height: 13rem;
+        }
+      }
+
+      .friends {
+        padding-left: 20rem;
+        margin-top: 10rem;
+        display: flex;
+        overflow-x: scroll;
         margin-bottom: 20rem;
 
-        &.hidden {
-          height: 0;
-        }
-
-        .title {
-          font-size: 12rem;
-          color: @second-text-color;
+        .friend {
+          position: relative;
+          background: @second-btn-color-tran;
+          margin-right: 10rem;
+          padding: 10rem;
           display: flex;
+          flex-direction: column;
           align-items: center;
 
-          img {
-            margin-left: 3rem;
-            width: 13rem;
-            height: 13rem;
+          .avatar {
+            @width: 100rem;
+            border-radius: 50%;
+            width: @width;
+            height: @width;
+          }
+
+          .name {
+            margin-top: 10rem;
+            font-size: 12rem;
+            color: white;
+          }
+
+          .tips {
+            margin-top: 5rem;
+            font-size: 12rem;
+            color: @second-text-color;
+          }
+
+          .button {
+            margin-top: 10rem;
+            width: 150rem;
+            height: 26rem;
+            font-size: 12rem;
+          }
+
+          .close {
+            position: absolute;
+            top: 2rem;
+            right: 2rem;
           }
         }
 
-        .friends {
-          margin-top: 10rem;
-          display: flex;
-          overflow-x: scroll;
-
-          .friend {
-            position: relative;
-            background: @second-btn-color-tran;
-            margin-right: 10rem;
-            padding: 10rem;
+        .more {
+          .notice {
+            width: 100rem;
+            height: 100%;
             display: flex;
             flex-direction: column;
             align-items: center;
-
-            .avatar {
-              @width: 100rem;
-              border-radius: 50%;
-              width: @width;
-              height: @width;
-            }
-
-            .name {
-              margin-top: 10rem;
-              font-size: 12rem;
-              color: white;
-            }
-
-            .tips {
-              margin-top: 5rem;
-              font-size: 12rem;
-              color: @second-text-color;
-            }
-
-            .button {
-              margin-top: 10rem;
-              width: 150rem;
-              height: 26rem;
-              font-size: 12rem;
-            }
-
-            .close {
-              position: absolute;
-              top: 2rem;
-              right: 2rem;
-            }
-          }
-
-          .more {
-            .notice {
-              width: 100rem;
-              height: 100%;
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              color: @second-text-color;
-            }
+            justify-content: center;
+            color: @second-text-color;
           }
         }
       }
diff --git a/src/pages/slideHooks/Shop.vue b/src/pages/slideHooks/Shop.vue
new file mode 100644
index 0000000..7587742
--- /dev/null
+++ b/src/pages/slideHooks/Shop.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Shop"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file