Browse Source

refactor(app): 调整材料页面布局和内容

- 修改背景颜色,优化视觉效果
- 调整推荐材料商卡片布局,提高可读性
- 积分计算器功能暂时下架
- 修复品牌等级名称显示问题
- 优化卡片样式,统一风格
EvilDragon 4 months ago
parent
commit
a858f021a0

+ 27 - 25
packages/app/src/pages/material/index.vue

@@ -41,20 +41,28 @@ const pieces = ref([
     path: '/pages/material/mini-class/index',
   },
   {
-    title: '积分计算机',
-    desc: '积分小帮手',
-    icon: calculator,
-    gridItemClass: 'col-start-2 row-start-1',
-    path: '/pages/material/calculator/index',
-  },
-  {
     title: '推荐材料商',
-    desc: '我们将优先洽谈大家推荐的材料商',
+    desc: '优选推荐商',
     icon: materialDealers,
-    gridItemClass: 'col-start-1 col-end-3 row-start-2',
-    isMore: true,
+    gridItemClass: 'col-start-2 row-start-1',
     path: '/pages/material/recommend/index',
+    isMore: false,
   },
+  // {
+  //   title: '积分计算机',
+  //   desc: '积分小帮手',
+  //   icon: calculator,
+  //   gridItemClass: 'col-start-2 row-start-1',
+  //   path: '/pages/material/calculator/index',
+  // },
+  // {
+  //   title: '推荐材料商',
+  //   desc: '我们将优先洽谈大家推荐的材料商',
+  //   icon: materialDealers,
+  //   gridItemClass: 'col-start-1 col-end-3 row-start-2',
+  //   isMore: true,
+  //   path: '/pages/material/recommend/index',
+  // },
 ])
 const current = ref<number>(0)
 const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
@@ -124,7 +132,7 @@ onMounted(async () => {
       ></wd-swiper> -->
       <Banner :mode="BannerMode.Material" aspect="1.26/1"></Banner>
     </view>
-    <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
+    <view class="bg-[#f5f5f5] relative bottom-4 rounded-t-2xl py-1">
       <div class="my-6 grid grid-cols-2 grid-gap-3.5 mx-3.5">
         <template v-for="it of pieces" :key="it.title">
           <div :class="it.gridItemClass" @click="handleMenuItemClick(it)">
@@ -157,23 +165,17 @@ onMounted(async () => {
         </template>
       </div>
 
-      <template
-        v-for="({ brandLevelName, pointsRate, materialsList }, i) in materialDealerData"
-        :key="i"
-      >
-        <SectionHeading
+      <template v-for="({ brandLevelName, materialsList }, i) in materialDealerData" :key="i">
+        <!-- <SectionHeading
           :title="brandLevelName"
-          :subtitle="`积分兑换比例 ${pointsRate}%`"
+          :subtitle="`积分兑换比例${pointsRate}%`"
           custom-class="mx-3.5"
-        ></SectionHeading>
-        <div class="my-6 px-3.5 overflow-x-auto whitespace-nowrap space-x-3.5">
+        ></SectionHeading> -->
+        <SectionHeading :title="brandLevelName" custom-class="mx-3.5"></SectionHeading>
+        <div class="my-6 px-3.5 grid grid-cols-2 gap-x-2.5 gap-y-4">
           <template v-for="(it, index) in materialsList" :key="index">
-            <div
-              class="inline-block"
-              :style="{ width: 'calc(50% - 14rpx)' }"
-              @click="toDetail(it.id)"
-            >
-              <Card>
+            <div class="" @click="toDetail(it.id)">
+              <Card class="h-full">
                 <div class="flex flex-col items-center">
                   <wd-img
                     width="78"

+ 8 - 1
packages/app/src/pages/mine/homepage/statistics/index.vue

@@ -24,6 +24,7 @@ const tabs = ref([
   { label: '浏览明细', value: '浏览' },
   //   { label: '获客明细', value: '获客' },
 ])
+const current = ref('累计')
 const query = computed(() => ({}))
 onMounted(async () => {
   await setData()
@@ -32,7 +33,13 @@ onMounted(async () => {
 <template>
   <div class="flex-grow flex flex-col gap-5 px-3.5 py-6">
     <Card>
-      <SectionHeading title="主页数据"></SectionHeading>
+      <SectionHeading title="主页数据">
+        <template #append>
+          <div>
+            <wd-segmented v-model:value="current" :options="['累计']"></wd-segmented>
+          </div>
+        </template>
+      </SectionHeading>
       <div class="flex mt-7">
         <template v-for="(it, i) in info" :key="i">
           <div class="flex-1 flex flex-col items-center gap-2">