预售页面实现

src/components/index/OtherSearch.vue

@@ -51,7 +51,7 @@ function back() {
   }
   .searchBox {
     opacity: 1;
-    width: 256rpx;
+    width: 400rpx;
     height: 56rpx;
     background: #f4f4f4;
     border-radius: 28rpx 28rpx 28rpx 28rpx;

src/pages/index/presale.vue

 <template>
   <view class="container">
     <view class="top">
-      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
+      <OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
+    </view>
+    <view class="nav">
+      <wd-swiper
+        class="main-img"
+        :list="swiperList"
+        autoplay
+        v-model:current="current"
+        @click="handleClick"
+        @change="onChange"
+        height="188"
+      ></wd-swiper>
+    </view>
+    <view class="sort">
+      <view style="display: flex; flex-direction: row">
+        <view class="borderClass" @tap="toBuilding" v-for="(item, index) in sortList" :key="index">
+          <img :src="item.img" style="width: 48rpx; height: 48rpx" />
+          <view class="sort-text">{{ item.text }}</view>
+        </view>
+      </view>
+    </view>
+    <view>
+      <view>
+        <scroll-view class="tabs" scroll-x="true">
+          <text
+            @tap="choice(index, item.categoryId)"
+            v-for="(item, index) in tabsData"
+            :key="index"
+            class="text"
+            :class="light === index ? 'light' : ''"
+          >
+            {{ item.text }}
+          </text>
+        </scroll-view>
+      </view>
+      <view class="tab-list" v-for="(item, index) in buyList" :key="index">
+        <img class="buy-list" :src="item.img" style="width: 670rpx; height: 670rpx" />
+        <view>
+          <text class="retail-price">零售价：￥{{ item.price }}/盒</text>
+          <text class="presale-price">预售价：￥{{ item.price }}/盒</text>
+        </view>
+        <view>
+          <img
+            class="buy-img"
+            src="/static/presale/img6.png"
+            style="
+              position: sticky;
+              width: 284rpx;
+              height: 128rpx;
+              float: right;
+              margin-top: -100rpx;
+              margin-right: 30rpx;
+            "
+          />
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
-import Search from '../../components/index/Search.vue';
+import OtherSearch from '../../components/index/OtherSearch.vue';
+const current = ref(0);
+const light = ref(0);
+const sortList = ref([
+  { img: '/static/presale/img1.png', price: '25', text: '应季好物' },
+  { img: '/static/presale/img2.png', price: '25', text: '猪肉蛋禽' },
+  { img: '/static/presale/img3.png', price: '25', text: '米面粮油' },
+  { img: '/static/presale/img4.png', price: '25', text: '预选蔬菜' },
+  { img: '/static/presale/img5.png', price: '25', text: '心选水果' },
+]);
+const swiperList = ref([
+  '../../static/presale/img.png',
+  '../../static/presale/img.png',
+  '../../static/presale/img.png',
+]);
+const tabsData = ref([
+  { img: '/static/assets/mainPicture.png', text: '全部' },
+  { img: '/static/assets/presale.png', text: '分类1' },
+  { img: '/static/assets/presale.png', text: '分类2' },
+  { img: '/static/assets/presale.png', text: '分类3' },
+  { img: '/static/assets/presale.png', text: '分类4' },
+  { img: '/static/assets/presale.png', text: '分类5' },
+  { img: '/static/assets/presale.png', text: '分类6' },
+  { img: '/static/assets/presale.png', text: '分类7' },
+  { img: '/static/assets/presale.png', text: '分类8' },
+]);
+const buyList = ref([
+  { img: '/static/presale/buy.png', price: '29.9', text: '应季好物' },
+  { img: '/static/presale/buy.png', price: '29.9', text: '猪肉蛋禽' },
+  { img: '/static/presale/buy.png', price: '29.9', text: '米面粮油' },
+]);
+const shopList = ref([
+  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
+  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
+  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
+  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
+  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
+  { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
+]);
+function handleClick(e) {
+  console.log(e);
+}
+function onChange(e) {
+  console.log(e);
+}
+const choice = (index) => {
+  light.value = index;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -23,4 +125,111 @@ page {
     overflow: hidden;
   }
 }
+.nav {
+  width: 710rpx;
+  margin-left: 18rpx;
+  margin-top: -270rpx;
+}
+.nav-img {
+  width: 710rpx;
+  display: flex;
+  position: relative;
+  top: 12rpx;
+}
+.sort {
+  width: 750rpx;
+  height: 186rpx;
+}
+.borderClass {
+  width: 96rpx;
+  height: 96rpx;
+  margin-left: 50rpx;
+  margin-top: 22rpx;
+}
+.sort-text {
+  font-size: 22rpx;
+  font-weight: 500;
+  line-height: 24rpx;
+  text-align: center;
+  letter-spacing: 0em;
+  color: #3d3d3d;
+  width: 176rpx;
+  margin-left: -60rpx;
+}
+.tabs {
+  width: 355px;
+  height: 38px;
+  margin-top: -64rpx;
+  margin-left: 20rpx;
+  border-radius: 8px 8px 0px 0px;
+  background: #ffffff;
+}
+.tabs {
+  white-space: nowrap;
+  height: 60rpx;
+  .text {
+    font-size: 24rpx;
+    color: #d8d8d8;
+    margin: 0 20rpx;
+    font-weight: bold;
+    display: inline-block;
+  }
+  .text:nth-child(1) {
+    margin-left: 40rpx;
+  }
+  .light {
+    background: #50d071;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+    position: relative;
+    //&::after {
+    //  content: '';
+    //  width: 20rpx;
+    //  height: 12rpx;
+    //  background: #e6ffe3;
+    //  background-size: 100% 100%;
+    //  position: absolute;
+    //  bottom: -16rpx;
+    //  left: 50%;
+    //  transform: translate(-50%);
+    //}
+  }
+}
+.tab-list {
+  width: 710rpx;
+  height: 730rpx;
+  margin-top: -64rpx;
+  margin-left: 20rpx;
+  border-radius: 0px 0px 8px 8px;
+  background: #ffffff;
+  margin-top: 6rpx;
+}
+.buy-list {
+  margin-top: 30rpx;
+  margin-left: 20rpx;
+}
+.retail-price {
+  height: 28rpx;
+  display: block;
+  margin-top: -120rpx;
+  margin-left: 60rpx;
+  font-family: Source Han Sans;
+  font-size: 24rpx;
+  font-weight: normal;
+  line-height: 28rpx;
+  letter-spacing: 0em;
+  text-decoration: line-through;
+  font-variation-settings: 'opsz' auto;
+  font-feature-settings: 'kern' on;
+  color: #b3b3b3;
+}
+.presale-price {
+  display: block;
+  margin-left: 60rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #ffffff;
+}
 </style>