首页更新

src/Components/index/Marketing.vue

+<template>
+  <view class="nearby">
+    <view class="nearby-top">
+      <view class="left">
+        <image class="tou" src="../../static/index/periphery.png" mode="widthFix" />
+        <text class="">附近人气美食</text>
+      </view>
+      <view class="right">
+        <text class="">立即查看</text>
+        <image class="jian" src="../../static/index/rightJ.png" mode="widthFix" />
+      </view>
+    </view>
+    <view class="nearby-bootom">
+      <view class="contentBox" v-for="(item, index) in 3" :key="index">
+        <image class="img" src="../../static/index/test4.png" mode="widthFix" />
+        <text class="one-text">黔灵山公园</text>
+        <view class="two-text">10.98万人最近去过</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import {} from 'vue';
+</script>
+
+<style lang="scss" scoped>
+.nearby {
+  width: 710rpx;
+  height: 350rpx;
+  border-radius: 16rpx;
+  background: #ffffff;
+  margin: 0 auto;
+  box-sizing: border-box;
+  overflow: hidden;
+  .nearby-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: linear-gradient(180deg, rgba(225, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 68%);
+    .left {
+      padding-top: 20rpx;
+      margin-left: 20rpx;
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+      font-family:
+        Source Han Sans,
+        Source Han Sans;
+      font-weight: 500;
+      color: #3d3d3d;
+      .tou {
+        width: 24rpx;
+        margin-right: 12rpx;
+      }
+    }
+    .right {
+      margin-right: 20rpx;
+      padding-top: 20rpx;
+      display: flex;
+      align-items: center;
+      font-size: 20rpx;
+      color: #abaaaa;
+      font-family:
+        Source Han Sans,
+        Source Han Sans;
+      font-weight: 400;
+      .jian {
+        width: 20rpx;
+        margin-left: 8rpx;
+      }
+    }
+  }
+  .nearby-bootom {
+    margin-top: 40rpx;
+    display: flex;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    overflow: hidden;
+    justify-content: space-between;
+    .contentBox {
+      width: 220rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      .img {
+        width: 200rpx;
+      }
+      .one-text {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #3d3d3d;
+        margin: 12rpx 0;
+      }
+      .two-text {
+        padding: 0 8rpx;
+        height: 30rpx;
+        line-height: 30rpx;
+        border-radius: 6rpx;
+        background: #ffe9e1;
+        font-size: 16rpx;
+        color: #fa5151;
+      }
+    }
+  }
+}
+</style>

src/Components/index/ShopCard.vue

@@ -23,6 +23,17 @@
         </view>
       </view>
     </view>
+    <view class="nearby-bootom">
+      <view class="contentBox" v-for="(item, index) in 3" :key="index">
+        <image class="img" src="../../static/index/eatFood.png" mode="widthFix" />
+        <text class="one">生态素食套餐</text>
+        <view class="price">
+          <image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
+          <text class="two">￥19.9</text>
+          <text class="three">29.8</text>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -36,8 +47,7 @@ import {} from 'vue';
   height: 536rpx;
   border-radius: 16rpx;
   background: #fdfdfd;
-  margin: 0 auto;
-  margin-top: 10rpx;
+  margin: 10rpx auto;
   .head {
     width: 100%;
     height: 200rpx;
@@ -121,5 +131,48 @@ import {} from 'vue';
       }
     }
   }
+  .nearby-bootom {
+    margin-top: 74rpx;
+    display: flex;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    overflow: hidden;
+    justify-content: space-between;
+    .contentBox {
+      width: 220rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      .img {
+        width: 180rpx;
+      }
+      .one {
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #3d3d3d;
+        margin: 10rpx 0;
+      }
+      .price {
+        display: flex;
+        align-items: center;
+        .img {
+          width: 36rpx;
+        }
+        .two {
+          font-size: 24rpx;
+          color: #fa5151;
+          font-weight: 500;
+          margin-left: 12rpx;
+          // margin: 10rpx 0;
+        }
+        .three {
+          font-size: 20rpx;
+          color: #abaaaa;
+          margin-left: 8rpx;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
 }
 </style>

src/pages/index/index.vue

@@ -39,7 +39,7 @@
       <view class="nearby-top">
         <view class="left">
           <image class="tou" src="../../static/index/eat.png" mode="widthFix" />
-          <text class="">附近人气美食</text>
+          <text class="">周边娱乐推荐</text>
         </view>
         <view class="right">
           <text class="">立即查看</text>
@@ -84,6 +84,10 @@
     <ShopCard />
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData" />
+    <!-- 营销模块 -->
+    <Marketing />
+    <!-- 美食卡片 -->
+    <FoodDetails :cardData="cardData" />
   </view>
 </template>
 
@@ -93,6 +97,7 @@ import { useCountStore } from '@/store';
 import Search from '../../components/index/Search.vue';
 import FoodDetails from '../../components/index/FoodDetails.vue';
 import ShopCard from '../../components/index/ShopCard.vue';
+import Marketing from '../../components/index/Marketing.vue';
 
 const title = ref('小程序平台');
 const { countInfo, addCount } = useCountStore();