From b0cc473a7817cc7df1515c9af67c498b02502e55 Mon Sep 17 00:00:00 2001
From: zzc <1761997216@qq.com>
Date: Thu, 5 Feb 2026 21:58:56 +0800
Subject: [PATCH] fix: index

---
 pages/avatar/index.vue | 895 +++++++++++++++++++++++++----------------
 utils/request.js       |   4 +-
 2 files changed, 540 insertions(+), 359 deletions(-)

diff --git a/pages/avatar/index.vue b/pages/avatar/index.vue
index be386a3..c040a61 100644
--- a/pages/avatar/index.vue
+++ b/pages/avatar/index.vue
@@ -1,6 +1,31 @@
 <template>
-  <view class="avatar-page">
+  <view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
     <NavBar title="头像制作" />
+
+    <!-- 顶部步骤条 -->
+    <view class="top-steps">
+      <view class="step-bar">
+        <view
+          v-for="(tool, idx) in tools"
+          :key="idx"
+          class="step-item"
+          :class="{ active: activeTool === tool.type }"
+          @tap="openTool(tool.type)"
+        >
+          <view class="step-num-wrap">
+            <view class="step-line" v-if="idx > 0"></view>
+            <view class="step-num">
+              <text v-if="activeTool === tool.type && showPanel">{{
+                tool.icon
+              }}</text>
+              <text v-else>{{ tool.step }}</text>
+            </view>
+          </view>
+          <text class="step-text">{{ tool.text }}</text>
+        </view>
+      </view>
+    </view>
+
     <view class="preview-card">
       <view class="preview-square">
         <image
@@ -38,82 +63,108 @@
       <button class="btn primary" open-type="share">分享给朋友</button>
     </view>
 
-    <view class="section">
-      <view class="section-header">
-        <text class="section-title">选择头像</text>
-        <view class="more-btn" @tap="openMorePopup">
-          <text>查看更多</text>
-          <text class="arrow">›</text>
+    <!-- 弹出编辑面板 -->
+    <view class="panel-container" :class="{ show: showPanel }">
+      <view class="panel-mask" @tap="closePanel"></view>
+      <view class="panel-content">
+        <view class="panel-handle" @tap="closePanel"></view>
+
+        <!-- 头像选择区 -->
+        <view v-if="activeTool === 'avatar'" class="section">
+          <view class="section-title">选择头像</view>
+          <scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
+            <view class="avatar-list">
+              <view class="avatar-card upload-card">
+                <button
+                  class="wechat-avatar-btn"
+                  open-type="chooseAvatar"
+                  @chooseavatar="onChooseAvatar"
+                >
+                  <view class="upload-icon">📷</view>
+                  <text class="upload-text">微信头像</text>
+                </button>
+              </view>
+              <view
+                v-for="(item, i) in systemAvatars"
+                :key="i"
+                class="avatar-card"
+                :class="{ active: currentAvatar?.id === item.id }"
+                @tap="currentAvatar = item"
+              >
+                <image
+                  :src="item.imageUrl"
+                  class="avatar-thumb"
+                  mode="aspectFill"
+                />
+                <view v-if="currentAvatar?.id === item.id" class="check"
+                  >✔</view
+                >
+              </view>
+              <view class="avatar-card more-card" @tap="openMorePopup">
+                <view class="upload-icon">🔍</view>
+                <text class="upload-text">更多</text>
+              </view>
+            </view>
+          </scroll-view>
         </view>
-      </view>
-      <scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
-        <view class="avatar-list">
-          <view class="avatar-card upload-card">
-            <button
-              class="wechat-avatar-btn"
-              open-type="chooseAvatar"
-              @chooseavatar="onChooseAvatar"
+
+        <!-- 头像框选择区 -->
+        <view v-if="activeTool === 'frame'" class="section">
+          <view class="section-title">选择头像框</view>
+          <scroll-view scroll-y class="panel-grid-scroll">
+            <view class="grid">
+              <view
+                v-for="(frame, i) in frames"
+                :key="i"
+                class="grid-item"
+                :class="{ active: selectedFrame?.id === frame.id }"
+                @tap="toggleFrame(frame)"
+              >
+                <image
+                  :src="frame.imageUrl"
+                  class="grid-img"
+                  mode="aspectFill"
+                />
+                <view v-if="selectedFrame?.id === frame.id" class="check"
+                  >✔</view
+                >
+              </view>
+            </view>
+            <view v-if="frameLoading" class="loading-more">加载中...</view>
+            <view v-else-if="!frameHasNext && frames.length > 0" class="no-more"
+              >没有更多了</view
             >
-              <view class="upload-icon">📷</view>
-              <text class="upload-text">微信头像</text>
-            </button>
-          </view>
-          <view
-            v-for="(item, i) in systemAvatars"
-            :key="i"
-            class="avatar-card"
-            :class="{ active: currentAvatar === item }"
-            @tap="currentAvatar = item"
-          >
-            <image
-              :src="item.imageUrl"
-              class="avatar-thumb"
-              mode="aspectFill"
-            />
-            <view v-if="currentAvatar === item" class="check">✔</view>
-          </view>
+          </scroll-view>
         </view>
-      </scroll-view>
-    </view>
 
-    <view class="tabs">
-      <view
-        class="tab"
-        :class="{ active: activeTab === 'frame' }"
-        @tap="activeTab = 'frame'"
-        >头像框</view
-      >
-      <view
-        class="tab"
-        :class="{ active: activeTab === 'decor' }"
-        @tap="activeTab = 'decor'"
-        >挂饰配件</view
-      >
-    </view>
-
-    <view v-if="activeTab === 'frame'" class="grid">
-      <view
-        v-for="(frame, i) in frames"
-        :key="i"
-        class="grid-item"
-        :class="{ active: selectedFrame === frame }"
-        @tap="toggleFrame(frame)"
-      >
-        <image :src="frame.imageUrl" class="grid-img" mode="aspectFill" />
-        <view v-if="selectedFrame === frame" class="check">✔</view>
-      </view>
-    </view>
-
-    <view v-else class="grid">
-      <view
-        v-for="(decor, i) in decors"
-        :key="i"
-        class="grid-item"
-        :class="{ active: selectedDecor === decor }"
-        @tap="toggleDecor(decor)"
-      >
-        <image :src="decor.imageUrl" class="grid-img" mode="aspectFit" />
-        <view v-if="selectedDecor === decor" class="check">✔</view>
+        <!-- 挂饰选择区 -->
+        <view v-if="activeTool === 'decor'" class="section">
+          <view class="section-title">选择挂饰配件</view>
+          <scroll-view scroll-y class="panel-grid-scroll">
+            <view class="grid">
+              <view
+                v-for="(decor, i) in decors"
+                :key="i"
+                class="grid-item"
+                :class="{ active: selectedDecor?.id === decor.id }"
+                @tap="toggleDecor(decor)"
+              >
+                <image
+                  :src="decor.imageUrl"
+                  class="grid-img"
+                  mode="aspectFit"
+                />
+                <view v-if="selectedDecor?.id === decor.id" class="check"
+                  >✔</view
+                >
+              </view>
+            </view>
+            <view v-if="decorLoading" class="loading-more">加载中...</view>
+            <view v-else-if="!decorHasNext && decors.length > 0" class="no-more"
+              >没有更多了</view
+            >
+          </scroll-view>
+        </view>
       </view>
     </view>
 
@@ -182,6 +233,7 @@ import {
   uploadImage,
 } from "@/utils/common.js";
 import NavBar from "@/components/NavBar/NavBar.vue";
+import { getBavBarHeight } from "@/utils/system";
 
 const userStore = useUserStore();
 const loginPopupRef = ref(null);
@@ -192,6 +244,24 @@ const systemAvatars = ref([]);
 const frames = ref([]);
 const decors = ref([]);
 
+// Panel and steps logic
+const showPanel = ref(false);
+const activeTool = ref("avatar");
+const tools = [
+  { step: "01", text: "头像", type: "avatar", icon: "👤" },
+  { step: "02", text: "头像框", type: "frame", icon: "🖼️" },
+  { step: "03", text: "挂饰配件", type: "decor", icon: "✨" },
+];
+
+const openTool = (type) => {
+  activeTool.value = type;
+  showPanel.value = true;
+};
+
+const closePanel = () => {
+  showPanel.value = false;
+};
+
 // Pagination states
 const framePage = ref(1);
 const frameHasNext = ref(true);
@@ -204,7 +274,6 @@ const decorLoading = ref(false);
 const currentAvatar = ref(null);
 const selectedFrame = ref(null);
 const selectedDecor = ref(null);
-const activeTab = ref("frame");
 
 // More Popup logic
 const morePopup = ref(null);
@@ -299,11 +368,13 @@ onLoad((options) => {
     };
 
     if (options.type === "frame") {
-      activeTab.value = "frame";
+      activeTool.value = "frame";
       selectedFrame.value = recommendItem;
+      showPanel.value = true;
     } else if (options.type === "decor") {
-      activeTab.value = "decor";
+      activeTool.value = "decor";
       selectedDecor.value = recommendItem;
+      showPanel.value = true;
     } else if (options.type === "avatar") {
       currentAvatar.value = recommendItem;
     }
@@ -311,10 +382,12 @@ onLoad((options) => {
 });
 
 onReachBottom(() => {
-  if (activeTab.value === "frame") {
-    loadFrames();
-  } else if (activeTab.value === "decor") {
-    loadDecors();
+  if (showPanel.value) {
+    if (activeTool.value === "frame") {
+      loadFrames();
+    } else if (activeTool.value === "decor") {
+      loadDecors();
+    }
   }
 });
 
@@ -738,317 +811,425 @@ const loadImage = (url) => {
 <style lang="scss" scoped>
 .avatar-page {
   min-height: 100vh;
+  background: #f8f8f8;
+  padding-bottom: 200rpx;
+}
+
+.top-steps {
   background: #fff;
-  box-sizing: border-box;
-  padding-bottom: env(safe-area-inset-bottom);
-}
-.preview-card {
-  margin: 20rpx 24rpx;
-  background: #fff;
-  border-radius: 24rpx;
-  padding: 24rpx;
-  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
-}
-.preview-square {
-  width: 600rpx;
-  height: 600rpx;
-  margin: 0 auto;
-  border-radius: 24rpx;
-  background: #f5dfc9;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.frame-img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-}
-.decor-img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 240rpx;
-  height: 240rpx;
-  /* 移除原有的 transform 和 center positioning，改为由 inline style 控制 */
-}
-.preview-tip {
-  display: block;
-  text-align: center;
-  color: #999;
-  font-size: 22rpx;
-  margin-top: 12rpx;
-}
-.interaction-tip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12rpx;
-  margin-top: 20rpx;
-  font-size: 24rpx;
-  color: #ff3b30;
-  background: #fff0f0;
-  padding: 12rpx 32rpx;
-  border-radius: 999rpx;
-  width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
-}
-.tip-divider {
-  color: #ffccc7;
-  margin: 0 4rpx;
-}
+  padding: 30rpx 0;
+  margin-bottom: 20rpx;
+  position: sticky;
+  z-index: 100;
 
-.action-buttons {
-  display: flex;
-  padding: 0 48rpx;
-  gap: 32rpx;
-  margin-top: 32rpx;
-}
-
-.btn {
-  flex: 1;
-  height: 88rpx;
-  border-radius: 999rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 30rpx;
-  font-weight: 600;
-  margin: 0;
-  padding: 0;
-  border: none;
-  line-height: normal;
-}
-.btn::after {
-  border: none;
-}
-
-.section {
-  margin-top: 24rpx;
-  padding: 0 24rpx;
-}
-.section-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12rpx;
-}
-.section-title {
-  font-size: 26rpx;
-  font-weight: 600;
-}
-.avatar-scroll {
-  width: 100%;
-}
-.avatar-list {
-  display: flex;
-}
-.avatar-card {
-  width: 160rpx;
-  height: 160rpx;
-  border-radius: 16rpx;
-  overflow: hidden;
-  margin-right: 16rpx;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
-
-  &.active {
-    outline: 4rpx solid #ff3b30;
+  .step-bar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 40rpx;
   }
 
-  &.upload-card {
-    background: #fff5f5;
+  .step-item {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
-    border: 2rpx dashed #ffccc7;
-    box-sizing: border-box;
+    position: relative;
+    flex: 1;
 
-    .wechat-avatar-btn {
+    .step-num-wrap {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: center;
+      margin-bottom: 12rpx;
+    }
+
+    .step-line {
+      position: absolute;
+      left: -50%;
+      right: 50%;
+      top: 20rpx;
+      height: 2rpx;
+      background: #eee;
+      z-index: 1;
+    }
+
+    .step-num {
+      width: 40rpx;
+      height: 40rpx;
+      background: #f5f5f5;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20rpx;
+      color: #999;
+      position: relative;
+      z-index: 2;
+      transition: all 0.3s;
+    }
+
+    .step-text {
+      font-size: 24rpx;
+      color: #999;
+      transition: all 0.3s;
+    }
+
+    &.active {
+      .step-num {
+        background: #ff3b30;
+        color: #fff;
+        transform: scale(1.2);
+        box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
+      }
+      .step-text {
+        color: #ff3b30;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.preview-card {
+  background: #fff;
+  margin: 0 30rpx 30rpx;
+  padding: 40rpx;
+  border-radius: 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
+
+  .preview-square {
+    width: 600rpx;
+    height: 600rpx;
+    background: #f0f0f0;
+    position: relative;
+    border-radius: 24rpx;
+    overflow: hidden;
+    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
+
+    .avatar-img {
       width: 100%;
       height: 100%;
-      padding: 0;
-      margin: 0;
-      background: transparent;
+    }
+
+    .frame-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+
+    .decor-img {
+      position: absolute;
+      width: 240rpx;
+      height: 240rpx;
+      z-index: 3;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .interaction-tip {
+    margin-top: 30rpx;
+    font-size: 24rpx;
+    color: #ff3b30;
+    background: rgba(255, 59, 48, 0.1);
+    padding: 10rpx 30rpx;
+    border-radius: 100rpx;
+
+    .tip-divider {
+      margin: 0 15rpx;
+      opacity: 0.3;
+    }
+  }
+
+  .preview-tip {
+    margin-top: 30rpx;
+    font-size: 24rpx;
+    color: #999;
+  }
+}
+
+.action-buttons {
+  padding: 0 30rpx;
+  display: flex;
+  gap: 20rpx;
+
+  .btn {
+    flex: 1;
+    height: 88rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 44rpx;
+    font-size: 30rpx;
+    font-weight: bold;
+
+    &.primary {
+      background: #ff3b30;
+      color: #fff;
+    }
+
+    &.secondary {
+      background: #fff;
+      color: #333;
+      border: 2rpx solid #eee;
+    }
+  }
+}
+
+/* 编辑面板样式 */
+.panel-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 1000;
+  visibility: hidden;
+  transition: all 0.3s;
+
+  &.show {
+    visibility: visible;
+    .panel-mask {
+      opacity: 1;
+    }
+    .panel-content {
+      transform: translateY(0);
+    }
+  }
+
+  .panel-mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  .panel-content {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    border-radius: 40rpx 40rpx 0 0;
+    padding: 30rpx;
+    transform: translateY(100%);
+    transition: transform 0.3s;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .panel-handle {
+    width: 80rpx;
+    height: 8rpx;
+    background: #eee;
+    border-radius: 4rpx;
+    margin: 0 auto 30rpx;
+  }
+
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-bottom: 30rpx;
+    color: #333;
+  }
+
+  .panel-grid-scroll {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+.avatar-scroll {
+  white-space: nowrap;
+  width: 100%;
+
+  .avatar-list {
+    display: inline-flex;
+    padding: 10rpx 0;
+    gap: 20rpx;
+  }
+
+  .avatar-card {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    position: relative;
+    border: 4rpx solid transparent;
+    background: #f5f5f5;
+
+    &.active {
+      border-color: #ff3b30;
+    }
+
+    .avatar-thumb {
+      width: 100%;
+      height: 100%;
+    }
+
+    .check {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: #ff3b30;
+      color: #fff;
+      font-size: 20rpx;
+      padding: 4rpx 8rpx;
+      border-radius: 0 0 0 16rpx;
+    }
+
+    &.upload-card,
+    &.more-card {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      line-height: normal;
-      border: none;
+      background: #fdf2f2;
+      border: 2rpx dashed #ffcbcb;
 
-      &::after {
-        border: none;
+      .wechat-avatar-btn {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        line-height: 1.2;
+
+        &::after {
+          border: none;
+        }
       }
-    }
 
-    .upload-icon {
-      font-size: 48rpx;
-      margin-bottom: 8rpx;
-    }
+      .upload-icon {
+        font-size: 40rpx;
+        margin-bottom: 8rpx;
+      }
 
-    .upload-text {
-      font-size: 22rpx;
-      color: #ff3b30;
-      font-weight: 500;
+      .upload-text {
+        font-size: 20rpx;
+        color: #ff3b30;
+      }
     }
   }
 }
 
-.avatar-thumb {
-  width: 100%;
-  height: 100%;
-}
-.check {
-  position: absolute;
-  right: 8rpx;
-  top: 8rpx;
-  width: 32rpx;
-  height: 32rpx;
-  border-radius: 50%;
-  background: #ff3b30;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 22rpx;
-}
-
-.tabs {
-  display: flex;
-  padding: 16rpx 24rpx 8rpx;
-  gap: 12rpx;
-}
-.tab {
-  flex: 1;
-  text-align: center;
-  background: #f7f7f7;
-  border-radius: 999rpx;
-  height: 64rpx;
-  line-height: 64rpx;
-  font-size: 26rpx;
-  color: #666;
-}
-.tab.active {
-  background: #fff0f0;
-  color: #ff3b30;
-}
-
 .grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16rpx;
-  padding: 8rpx 24rpx 24rpx;
-}
-.grid-item {
-  height: 200rpx;
-  border-radius: 16rpx;
-  background: #fff;
-  overflow: hidden;
-  position: relative;
-  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
-}
-.grid-item.active {
-  outline: 4rpx solid #ff3b30;
-}
-.grid-img {
-  width: 100%;
-  height: 100%;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20rpx;
+
+  .grid-item {
+    aspect-ratio: 1;
+    background: #f5f5f5;
+    border-radius: 20rpx;
+    overflow: hidden;
+    position: relative;
+    border: 4rpx solid transparent;
+
+    &.active {
+      border-color: #ff3b30;
+    }
+
+    .grid-img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .check {
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: #ff3b30;
+      color: #fff;
+      font-size: 20rpx;
+      padding: 4rpx 8rpx;
+      border-radius: 0 0 0 16rpx;
+    }
+  }
 }
 
-.btn.primary {
-  background: #ff3b30;
-  color: #fff;
-  box-shadow: 0 12rpx 24rpx rgba(255, 59, 48, 0.35);
-}
-.btn.secondary {
-  background: #f5f5f5;
-  color: #333;
+.loading-more,
+.no-more {
+  text-align: center;
+  font-size: 24rpx;
+  color: #999;
+  padding: 30rpx 0;
 }
+
 .hidden-canvas {
   position: fixed;
   left: -9999px;
   top: -9999px;
 }
 
-/* More Popup Styles */
-.more-btn {
-  margin-left: auto;
-  font-size: 24rpx;
-  color: #999;
-  display: flex;
-  align-items: center;
-}
-.arrow {
-  font-size: 32rpx;
-  margin-left: 4rpx;
-  line-height: 1;
-  position: relative;
-  top: -2rpx;
-}
-
+/* 更多弹窗样式保持不变 */
 .popup-content {
   background: #fff;
-  border-radius: 24rpx 24rpx 0 0;
-  height: 60vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.popup-header {
-  padding: 32rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  border-bottom: 2rpx solid #f5f5f5;
-}
-.popup-title {
-  font-size: 32rpx;
-  font-weight: 600;
-}
-.close-btn {
-  position: absolute;
-  right: 32rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 32rpx;
-  color: #999;
-  padding: 10rpx;
-}
-.popup-scroll {
-  flex: 1;
-  height: 0;
-}
-.popup-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20rpx;
-  padding: 24rpx;
-}
-.popup-item {
-  aspect-ratio: 1;
-  border-radius: 16rpx;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-.popup-img {
-  width: 100%;
-  height: 100%;
-}
-.loading-text,
-.no-more-text {
-  text-align: center;
-  padding: 24rpx;
-  color: #999;
-  font-size: 24rpx;
+  border-radius: 32rpx 32rpx 0 0;
+  padding: 30rpx;
+  max-height: 80vh;
+
+  .popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30rpx;
+
+    .popup-title {
+      font-size: 32rpx;
+      font-weight: bold;
+    }
+
+    .close-btn {
+      font-size: 40rpx;
+      color: #999;
+      padding: 10rpx;
+    }
+  }
+
+  .popup-scroll {
+    height: 60vh;
+  }
+
+  .popup-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20rpx;
+  }
+
+  .popup-item {
+    aspect-ratio: 1;
+    border-radius: 20rpx;
+    overflow: hidden;
+    background: #f5f5f5;
+
+    .popup-img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .loading-text,
+  .no-more-text {
+    text-align: center;
+    font-size: 24rpx;
+    color: #999;
+    padding: 30rpx 0;
+  }
 }
 </style>
+"}]} ```
diff --git a/utils/request.js b/utils/request.js
index 113e60b..022bc02 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -1,6 +1,6 @@
-const BASE_URL = "https://api.ai-meng.com";
+// const BASE_URL = "https://api.ai-meng.com";
 // const BASE_URL = 'http://127.0.0.1:3999'
-// const BASE_URL = "http://192.168.1.3:3999";
+const BASE_URL = "http://192.168.1.3:3999";
 // const BASE_URL = "http://192.168.31.253:3999";
 import { useUserStore } from "@/stores/user";