feat: 静态样式完善

src/pages/bestSellers/bestSellers.vue

@@ -42,7 +42,7 @@ function queryList(pageNo, pageSize) {
 </script>
 
 <template>
-  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+  <z-paging ref="paging" use-page-scroll refresher-only @query="queryList">
     <template #top>
       <view class="relative from-[#FA2B19] to-[#FE6232] bg-gradient-to-br" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
         <wd-navbar :bordered="false" custom-class="bg-transparent!">
@@ -63,10 +63,23 @@ function queryList(pageNo, pageSize) {
     </template>
     <view class="pt-20rpx">
       <view class="flex items-center gap-24rpx bg-white p-24rpx">
-        <image
-          src="/static/images/avatar.jpg"
-          class="h-160rpx w-160rpx shrink-0"
-        />
+        <view class="relative">
+          <image
+            src="/static/images/avatar.jpg"
+            class="h-160rpx w-160rpx shrink-0"
+          />
+          <!-- 左上角TOP 1标签 -->
+          <view class="absolute left-10rpx top-10rpx h-52rpx w-48rpx flex items-center justify-center rounded-4rpx bg-#DEA90B text-20rpx text-white font-bold" style="clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);">
+            <view class="flex flex-col items-center leading-none">
+              <text class="text-16rpx">
+                TOP
+              </text>
+              <text class="text-18rpx">
+                1
+              </text>
+            </view>
+          </view>
+        </view>
         <view class="flex-1">
           <view class="line-clamp-2 text-28rpx">
             SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]

src/pages/index/index.vue

@@ -154,7 +154,7 @@ onLoad(() => {
         class="flex items-center justify-between bg-white pb-40rpx pl-42rpx pr-34rpx pt-26rpx"
         :style="{ paddingTop: `${safeAreaInsets?.top + 13}px` }"
       >
-        <image src="/static/header-logo.png" class="h-54rpx w-250rpx" />
+        <image src="/static/header-logo.png" class="h-44rpx w-275rpx" />
         <view class="flex items-center">
           <image src="/static/icons/search.png" class="mr-20rpx h-36rpx w-36rpx" @click="toPage('/pages/search/search')" />
           <image src="/static/icons/notifications.png" class="h-36rpx w-36rpx" @click="toPage('/pages/notifications/notifications')" />

src/pages/myOrders/myOrders.vue

@@ -15,6 +15,7 @@ import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
 import { orderList } from '@/api/order'
 import { formatNumber } from '@/utils'
+import { toPage } from '@/utils/page'
 
 defineOptions({
   name: 'MyOrders', // 我的订单
@@ -50,9 +51,10 @@ const tabList = ref<any>([
     value: 4,
   },
 ])
+
 // 搜索结果
 const dataList = ref<any[]>([])
-async function queryList(pageNo, pageSize) {
+async function queryList(pageNo: number, pageSize: number) {
   // 此处请求仅为演示，请替换为自己项目中的请求
   try {
     const res = await orderList({
@@ -61,59 +63,54 @@ async function queryList(pageNo, pageSize) {
       type: tab.value, // 根据tab的值来查询不同状态的订单
       userId: userInfo.value.userId,
     })
-    paging.value[tab.value].complete(res.data.list)
+    paging.value.complete(res.data.list)
   }
   catch {
-    paging.value[tab.value].complete(false)
+    paging.value.complete(false)
   }
 }
-
-function toPage() {
-  uni.navigateTo({
-    url: '/pages/myOrders/orderDetail',
-  })
-}
 </script>
 
 <template>
-  <wd-tabs v-model="tab" swipeable sticky custom-class="bg-transparent!">
-    <wd-tab v-for="tabItem in tabList" :key="tabItem" :title="tabItem.label" :value="tabItem.value">
-      <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
-        <wd-card v-for="item in dataList" :key="item.orderId" type="rectangle" custom-class="px-24rpx! py-6rpx!" custom-content-class="py-18rpx!" custom-title-class="py-18rpx!" @click="toPage">
-          <template #title>
-            <view class="flex items-center justify-between">
-              <view class="text-28rpx text-#000">
-                Order ID：{{ item.orderId }}
-              </view>
-              <wd-text size="26rpx" type="primary" text="Completed" />
+  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
+    <template #top>
+      <wd-tabs v-model="tab" custom-class="bg-transparent!" @click="() => queryList(1, 20)">
+        <wd-tab v-for="tabItem in tabList" :key="tabItem.value" :title="tabItem.label" :name="tabItem.value" />
+      </wd-tabs>
+    </template>
+    <wd-card v-for="item in dataList" :key="item.orderId" type="rectangle" custom-class="px-24rpx! py-6rpx!" custom-content-class="py-18rpx!" custom-title-class="py-18rpx!" @click="toPage('/pages/myOrders/orderDetail', { id: item.orderId })">
+      <template #title>
+        <view class="flex items-center justify-between">
+          <view class="text-28rpx text-#000">
+            Order ID：{{ item.orderId }}
+          </view>
+          <wd-text size="26rpx" type="primary" text="Completed" />
+        </view>
+      </template>
+      <view class="flex items-center gap-24rpx">
+        <image
+          src="/static/images/avatar.jpg"
+          class="h-140rpx w-140rpx shrink-0"
+        />
+        <view class="flex-1">
+          <view class="line-clamp-2 text-28rpx text-#000">
+            SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
+          </view>
+          <view class="py-4rpx text-24rpx text-#3A444C">
+            Color：Black Grey
+          </view>
+          <view class="flex items-center justify-between text-24rpx text-#3A444C">
+            <view>
+              ৳ {{ formatNumber(item.payPrice) }}
             </view>
-          </template>
-          <view class="flex items-center gap-24rpx">
-            <image
-              src="/static/images/avatar.jpg"
-              class="h-140rpx w-140rpx shrink-0"
-            />
-            <view class="flex-1">
-              <view class="line-clamp-2 text-28rpx text-#000">
-                SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
-              </view>
-              <view class="py-4rpx text-24rpx text-#3A444C">
-                Color：Black Grey
-              </view>
-              <view class="flex items-center justify-between text-24rpx text-#3A444C">
-                <view>
-                  ৳ {{ formatNumber(item.payPrice) }}
-                </view>
-                <view>
-                  Quantity：1
-                </view>
-              </view>
+            <view>
+              Quantity：1
             </view>
           </view>
-        </wd-card>
-      </z-paging>
-    </wd-tab>
-  </wd-tabs>
+        </view>
+      </view>
+    </wd-card>
+  </z-paging>
 </template>
 
 <style lang="scss" scoped>

src/pages/referEarn/referEarn.vue

@@ -13,6 +13,7 @@
 import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
 import { myUsers } from '@/api/mine'
+import { goBack } from '@/utils/page'
 
 defineOptions({
   name: 'ReferEarn', // 邀请赚钱
@@ -44,14 +45,34 @@ async function queryList(pageNo: number, pageSize: number) {
 </script>
 
 <template>
-  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
-    <template #top>
-      <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
-        <wd-navbar custom-class="bg-transparent!" :bordered="false" left-arrow title="Refer Earn" />
+  <wd-navbar custom-class="bg-transparent!" :bordered="false" fixed>
+    <template #left>
+      <wd-icon name="thin-arrow-left" color="#fff" size="32rpx" @click="goBack" />
+    </template>
+    <template #title>
+      <view class="text-white font-bold text-32rpx!">
+        Refer Earn
       </view>
     </template>
-    <view class="mb-40rpx">
+  </wd-navbar>
+  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
+    <view class="relative mb-40rpx">
       <!-- 邀请图 -->
+      <image src="/static/images/refer-earn-bg.png" class="w-full" mode="widthFix" />
+      <view class="absolute bottom-166rpx left-1/2 w-326rpx transform text-center -translate-x-1/2">
+        <view class="px-14rpx text-36rpx text-white">
+          <view>INVTE FRIDENS</view>
+          <view class="mb-26rpx">
+            EARN CASH
+            <text class="text-[var(--wot-color-theme)]">
+              ৳50
+            </text>
+          </view>
+        </view>
+        <view class="rounded-full bg-#F9CD96 py-14rpx text-34rpx text-[var(--wot-color-theme)] font-bold shadow-[0_2rpx_8rpx_0_rgba(249,205,150,0.5)]">
+          SHARE NOW
+        </view>
+      </view>
     </view>
     <view class="px-24rpx">
       <view class="mb-28rpx text-center text-32rpx text-[var(--wot-color-theme)]">

src/pages/search/search.vue

@@ -13,6 +13,7 @@
 import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import { useQueue } from 'wot-design-uni'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+import { goBack } from '@/utils/page'
 
 defineOptions({
   name: 'SearchPage', // 搜索
@@ -109,7 +110,7 @@ function queryList(pageNo, pageSize) {
           <template #title>
             <view class="content">
               <view class="back">
-                <wd-icon name="thin-arrow-left" size="36rpx" />
+                <wd-icon name="thin-arrow-left" size="32rpx" @click="goBack" />
               </view>
               <input v-model.trim="keyword" class="search-input" type="text" :placeholder="$t('search.placeholder')">
               <wd-icon name="search" custom-class="search-icon" color="#999" size="32rpx" />
@@ -124,7 +125,7 @@ function queryList(pageNo, pageSize) {
       </view>
     </template>
     <view class="px-24rpx pb-24rpx">
-      <view class="flex flex-wrap gap-20rpx">
+      <view class="grid grid-cols-2 gap-22rpx">
         <product v-for="(item, index) in newProducts" :key="index" :height="340" :item="item" />
         <view />
       </view>
@@ -154,7 +155,6 @@ page {
         padding: 0 25rpx;
       }
       .search-input {
-        box-sizing: border-box;
         flex: 1;
         height: 100%;
         text-align: left;
@@ -162,8 +162,7 @@ page {
         border-radius: 8rpx;
         border: 1px solid #efefef;
         font-size: 28rpx;
-        padding-left: 22rpx;
-        padding-right: 64rpx;
+        padding: 16rpx 64rpx 16rpx 22rpx;
         font-weight: normal;
         &:active {
           border-color: rgba(230, 27, 40, 0.65);

src/pages/topChampions/topChampions.vue

@@ -42,7 +42,7 @@ function queryList(pageNo, pageSize) {
 </script>
 
 <template>
-  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+  <z-paging ref="paging" use-page-scroll refresher-only @query="queryList">
     <template #top>
       <view
         class="relative from-[#FA2B19] to-[#FE6232] bg-gradient-to-br"
@@ -65,7 +65,18 @@ function queryList(pageNo, pageSize) {
       <view class="py-22rpx text-center text-22rpx text-#5C5C5C">
         2025.05.05 Update
       </view>
-      <view class="flex items-center justify-between bg-white p-24rpx">
+      <view class="relative flex items-center justify-between bg-white p-24rpx">
+        <!-- 左上角TOP 1标签 -->
+        <view class="absolute left-24rpx top-0rpx h-52rpx w-48rpx flex items-center justify-center rounded-4rpx bg-#DEA90B text-20rpx text-white font-bold" style="clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);">
+          <view class="flex flex-col items-center leading-none">
+            <text class="text-16rpx">
+              TOP
+            </text>
+            <text class="text-18rpx">
+              1
+            </text>
+          </view>
+        </view>
         <view class="w-30% flex flex-col items-center justify-center text-center font-bold">
           <wd-img width="80rpx" height="80rpx" round src="/static/images/avatar.jpg" />
           <view class="text-28rpx">