Переглянути джерело

style(index): 优化首页布局及样式结构

- 注释并调整轮播图展位相关代码结构
- 修改头部标签栏样式,保证样式一致且易维护
- 调整列表项内部结构,保持代码缩进和书写规范
- 规范优惠券支持区域的样式和显示逻辑
- 保留关键图片元素,注释不影响功能部分代码
zhangtao 1 тиждень тому
батько
коміт
ff2d55f9ce
1 змінених файлів з 35 додано та 34 видалено
  1. 35 34
      src/pages/index/index.vue

+ 35 - 34
src/pages/index/index.vue

@@ -49,52 +49,53 @@ watch(() => currentTab.value, () => {
 </script>
 
 <template>
-  <view class="px24rpx py20px">
-    <view class="w132rpx">
+  <view>
+    <!-- <view class="w132rpx">
       轮播图展位
-    </view>
-    <wd-sticky :offset-top="-44">
-      <view class="w-100vw flex items-center bg-#f9f9f9 pb20rpx pt20rpx">
+    </view> -->
+    <view class="box-border px24rpx py20px">
+      <!-- <wd-sticky :offset-top="-44"> -->
+      <view class="sticky top-0 z999 box-border w-full flex items-center bg-#f9f9f9 pb20rpx pt20rpx">
         <view v-for="item in tabList" :key="item.value" class="mr28rpx rounded-24rpx px16rpx py8rpx text-24rpx" :class="[currentTab === item.value ? 'bg-[var(--them-color)] text-white ' : 'bg-white']" @click="currentTab = item.value">
           {{ item.label }}
         </view>
       </view>
-    </wd-sticky>
-
-    <view v-for="item in data" :key="item.storeId" class="relative mb20rpx box-border rounded-16rpx bg-white p24rpx" @click="handleView(item)">
-      <view class="mt80rpx flex items-center justify-between">
-        <view class="text-36rpx font-semibold">
-          {{ item.storeName }}
-        </view>
-        <view class="flex items-center text-24rpx">
-          <image :src="`${staticUrl}/smqjh-jy-dh.png`" class="mr3 h18.34rpx w18.34rpx" />  {{ item.distanceShow }}km
-        </view>
-      </view>
-      <view class="mt20rpx text-#aaa">
-        {{ item.address }}
-      </view>
-      <view class="mt20rpx flex items-center justify-between">
-        <view v-if="!item.allowanceClientScheme" class="flex items-center rounded-8rpx bg-#E6E6E6 px12rpx py8rpx">
-          <view class="text-22rpx text-#AAAAAA">
-            不支持优惠券
+      <!-- </wd-sticky> -->
+      <view v-for="item in data" :key="item.storeId" class="relative mb20rpx box-border rounded-16rpx bg-white p24rpx" @click="handleView(item)">
+        <view class="mt80rpx flex items-center justify-between">
+          <view class="text-36rpx font-semibold">
+            {{ item.storeName }}
           </view>
+          <view class="flex items-center text-24rpx">
+            <image :src="`${staticUrl}/smqjh-jy-dh.png`" class="mr3 h18.34rpx w18.34rpx" />  {{ item.distanceShow }}km
+          </view>
+        </view>
+        <view class="mt20rpx text-#aaa">
+          {{ item.address }}
         </view>
-        <view class="flex items-end">
-          <view class="text-28rpx">
-            {{ item.itemName }}
+        <view class="mt20rpx flex items-center justify-between">
+          <view v-if="!item.allowanceClientScheme" class="flex items-center rounded-8rpx bg-#E6E6E6 px12rpx py8rpx">
+            <view class="text-22rpx text-#AAAAAA">
+              不支持优惠券
+            </view>
           </view>
-          <view class="mx8rpx ml12rpx flex items-end text-#ff4d3a">
-            特惠价 <view class="font-semibold">
-              <text class="text-20rpx">
-                ¥
-              </text> <text class="text-36rpx">
-                {{ item.vipPrice }}L
-              </text>
+          <view class="flex items-end">
+            <view class="text-28rpx">
+              {{ item.itemName }}
+            </view>
+            <view class="mx8rpx ml12rpx flex items-end text-#ff4d3a">
+              特惠价 <view class="font-semibold">
+                <text class="text-20rpx">
+                  ¥
+                </text> <text class="text-36rpx">
+                  {{ item.vipPrice }}L
+                </text>
+              </view>
             </view>
           </view>
         </view>
-      </view>
       <!-- <image :src="`${staticUrl}/smqjh-jy-cz.png`" class="absolute left-0 top-0 h80rpx w234rpx" /> -->
+      </view>
     </view>
     <image
       :src="`${staticUrl}/smqjh-jy-dkj.png`"