预售页面样式优化

src/components/index/OtherSearch.vue

@@ -36,7 +36,6 @@ function back() {
   border-radius: 16rpx 16rpx 16rpx 16rpx;
   opacity: 0.8;
   margin: 0 auto;
-  margin-top: 44rpx;
   display: flex;
   align-items: center;
   padding-left: 20rpx;

src/pages/index/presale.vue

@@ -58,11 +58,79 @@
         </view>
       </view>
     </view>
+    <view class="waterfall">
+      <view class="wt-left wt-list">
+        <view
+          class="wt-item"
+          v-for="(good, index) in LeftList"
+          :key="index"
+          @click="ToDetail(good.id)"
+        >
+          <view class="item-img">
+            <image :src="good.image" mode="widthFix"></image>
+            <image
+              class="presale-img"
+              src="/static/presale/presale.png"
+              style="width: 132rpx; height: 64rpx"
+            />
+            <image
+              class="preview-img"
+              src="/static/presale/preview.png"
+              style="width: 264rpx; height: 40rpx"
+            />
+            <text class="pre-text">预计9月15日发货</text>
+          </view>
+          <!-- 介绍部分 -->
+          <view class="introduce-section">
+            <text class="title">{{ good.name }}</text>
+            <view class="tags-box">
+              <text class="good-detail">{{ good.detail }}</text>
+              <text class="introduction">{{ good.introduction }}</text>
+              <text class="good-price">￥{{ good.price }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="vt-right wt-list">
+        <view
+          class="wt-item"
+          v-for="(good, index) in RightList"
+          :key="index"
+          @click="ToDetail(good.id)"
+        >
+          <view class="item-img">
+            <image :src="good.image" mode="widthFix"></image>
+            <image
+              class="presale-img"
+              src="/static/presale/presale.png"
+              style="width: 132rpx; height: 64rpx"
+            />
+            <image
+              class="preview-img"
+              src="/static/presale/preview.png"
+              style="width: 264rpx; height: 40rpx"
+            />
+            <text class="pre-text">预计9月15日发货</text>
+          </view>
+          <!-- 介绍部分 -->
+          <view class="introduce-section">
+            <text class="title">{{ good.name }}</text>
+            <view class="tags-box">
+              <text class="good-detail">{{ good.detail }}</text>
+              <text class="introduction">{{ good.introduction }}</text>
+              <text class="good-price">￥{{ good.price }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup>
 import OtherSearch from '../../components/index/OtherSearch.vue';
+import { ref } from 'vue';
 const current = ref(0);
 const light = ref(0);
 const sortList = ref([
@@ -101,6 +169,71 @@ const shopList = ref([
   { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
   { img: '/static/presale/img7.png', price: '29.9', text: '应季好物' },
 ]);
+// 声明需要的数据
+const data = reactive({
+  leftList: [], // 左边列图片
+  rightList: [], // 右边列图片
+  leftHeight: 0, // 左边列高度
+  rightHeight: 0, // 右边列高度
+  columnWidth: 0, // 列宽度
+});
+
+// 总商品数据列表
+const goodList = ref([
+  {
+    id: 1,
+    name: '这是一个商品',
+    image: '/static/presale/buy.png',
+    introduction: '商品简介商品简介',
+    price: 69.9,
+  },
+  {
+    id: 2,
+    name: '商品二',
+    image: '/static/presale/img7.png',
+    introduction: '商品简介商品简介',
+    price: 69.9,
+  },
+  {
+    id: 3,
+    name: '商品三',
+    image: '/static/assets/fruit.png',
+    introduction: '商品简介商品简介',
+    price: 69.9,
+  },
+  {
+    id: 4,
+    name: '商品四',
+    image: '/static/presale/buy.png',
+    introduction: '商品简介商品简介',
+    price: 69.9,
+  },
+  {
+    id: 5,
+    name: '商品五',
+    image: '/static/presale/buy.png',
+    introduction: '商品简介商品简介',
+    price: 69.9,
+  },
+]);
+// 左侧数据列表
+const LeftList = ref([]);
+// 右侧数据列表
+const RightList = ref([]);
+
+// 将商品信息列表分为左侧右侧两个部分
+for (let i = 0; i < goodList.value.length; i++) {
+  if (i % 2 === 0) {
+    LeftList.value.push(goodList.value[i]);
+  } else {
+    RightList.value.push(goodList.value[i]);
+  }
+}
+
+// 点击商品 跳转详情
+function ToDetail(id) {
+  console.log('点击了商品', id);
+}
 function handleClick(e) {
   console.log(e);
 }
@@ -128,7 +261,7 @@ page {
 .nav {
   width: 710rpx;
   margin-left: 18rpx;
-  margin-top: -270rpx;
+  margin-top: -300rpx;
 }
 .nav-img {
   width: 710rpx;
@@ -232,4 +365,74 @@ page {
   font-weight: bold;
   color: #ffffff;
 }
+.waterfall {
+  display: flex;
+  flex-direction: row;
+  width: 710rpx;
+  justify-content: center;
+  overflow: hidden;
+  margin-top: 10rpx;
+  margin-left: 30rpx;
+}
+
+.wt-list {
+  width: 360rpx;
+  display: flex;
+  flex-direction: column;
+  margin-right: 10rpx;
+}
+
+.wt-item {
+  border-radius: 8px 8px 8px 8px;
+  margin-bottom: 15rpx;
+  background-color: #ffffff;
+}
+
+.item-img image {
+  width: 100%;
+}
+
+/* 商品介绍 */
+.introduce-section {
+  background: #ffffff;
+  padding: 20rpx 30rpx;
+  border-radius: 0 0 08px 8px;
+  margin-top: -20rpx;
+  height: 110rpx;
+}
+
+.introduce-section .title {
+  font-size: 32rpx;
+  color: #303133;
+  height: 50rpx;
+  line-height: 50rpx;
+}
+
+.introduce-section .tags-box {
+  display: flex;
+  align-items: center;
+  height: 30rpx;
+  font-size: 24rpx;
+  color: #909399;
+}
+.good-price {
+  position: relative;
+  margin-top: 70rpx;
+  margin-left: -200rpx;
+  color: #fa5151;
+  font-size: 28rpx;
+}
+.preview-img {
+  margin-left: 100rpx;
+  display: block;
+  margin-top: -48rpx;
+}
+.pre-text {
+  float: right;
+  margin-top: -40rpx;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 14px;
+  color: #ffffff;
+}
 </style>