修改url

src/Components/index/FoodDetails.vue

@@ -16,20 +16,20 @@
       <view class="labelBox">
         <view v-for="(item, index) in item.labels" :key="index">{{ item }}</view>
       </view>
-      <view class="groupPurchasePrice">
+      <view class="groupPurchasePrice" v-for="(item, index) in item.simpleProds" :key="index">
         <image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
-        <text class="one-text">￥19</text>
+        <text class="one-text">￥{{ item.price }}</text>
         <!-- <view class="two-text">7.8折</view> -->
-        <text class="three-text">￥29.8</text>
-        <text class="four-text">深夜加班续命套餐</text>
+        <text class="three-text">￥{{ item.oriPrice }}</text>
+        <text class="four-text">{{ item.prodName }}</text>
       </view>
-      <view class="groupPurchasePrice">
+      <!-- <view class="groupPurchasePrice">
         <image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
         <text class="one-text">￥39</text>
         <view class="two-text">8.8折</view>
         <text class="three-text">￥59.8</text>
         <text class="four-text">游戏通宵补血套餐</text>
-      </view>
+      </view> -->
     </view>
   </view>
 </template>
@@ -46,7 +46,7 @@ const props = defineProps({
 <style lang="scss" scoped>
 .card {
   width: 710rpx;
-  height: 316rpx;
+  // height: 316rpx;
   border-radius: 0rpx 0rpx 16rpx 16rpx;
   background: #fdfdfd;
   margin: 0 auto;
@@ -61,6 +61,7 @@ const props = defineProps({
     border-radius: 16rpx;
   }
   .right {
+    width: calc(100% - 164rpx);
     margin-left: 20rpx;
     display: flex;
     flex-direction: column;
@@ -73,6 +74,9 @@ const props = defineProps({
     .twoBxo {
       display: flex;
       align-items: center;
+      margin: 8rpx 0;
+      width: 100%;
+      position: relative;
       .one-text {
         font-size: 22rpx;
         font-weight: bold;
@@ -95,6 +99,8 @@ const props = defineProps({
         color: #908f8f;
         font-weight: 500;
         margin-left: 182rpx;
+        position: absolute;
+        right: 20rpx;
       }
     }
     .threeBox {
@@ -115,6 +121,7 @@ const props = defineProps({
     .labelBox {
       display: flex;
       align-items: center;
+      margin: 20rpx 0;
       view {
         margin-right: 8rpx;
         display: inline-block;
@@ -129,6 +136,7 @@ const props = defineProps({
     .groupPurchasePrice {
       display: flex;
       align-items: center;
+      margin-bottom: 20rpx;
       .img {
         width: 32rpx;
       }

src/Components/index/ShopCard.vue

 <template>
   <view class="card">
-    <view class="head">
+    <view class="head" :style="{ backgroundImage: `url(${shopCardData.shopLogo})` }">
       <view class="containerBox">
-        <image class="img" src="../../static/index/test1.png" mode="widthFix" />
+        <image class="img" :src="shopCardData.shopLogo" mode="aspectFill" />
         <view class="right">
-          <text class="text">老门框卤煮总店（百年老店）</text>
+          <text class="text">{{ shopCardData.shopName }}</text>
           <view class="twoBxo">
-            <text class="one-text">5.0推荐</text>
-            <text class="two-text">￥30/人</text>
+            <text class="one-text">{{ shopCardData.grade }}推荐</text>
+            <!-- <text class="two-text">￥30/人</text> -->
             <text class="three-text">销量1265</text>
             <text class="four-text">1.2km</text>
           </view>
           <view class="threeBox">
-            <image class="img2" src="../../static/index/test2.png" mode="widthFix" />
+            <image class="img2" src="../../static/index/test2.png" mode="aspectFill" />
             <text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
           </view>
           <view class="labelBox">
@@ -25,10 +25,10 @@
     </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" />
+        <image class="img" src="../../static/index/eatFood.png" mode="aspectFill" />
         <text class="one">生态素食套餐</text>
         <view class="price">
-          <image class="img" src="../../static/index/groupBuying.png" mode="widthFix" />
+          <image class="img" src="../../static/index/groupBuying.png" mode="aspectFill" />
           <text class="two">￥19.9</text>
           <text class="three">29.8</text>
         </view>
@@ -38,7 +38,12 @@
 </template>
 
 <script setup>
-import {} from 'vue';
+import { defineProps } from 'vue';
+const props = defineProps({
+  shopCardData: {
+    type: Object,
+  },
+});
 </script>
 
 <style lang="scss" scoped>
@@ -48,12 +53,15 @@ import {} from 'vue';
   border-radius: 16rpx;
   background: #fdfdfd;
   margin: 10rpx auto;
+  overflow: hidden;
   .head {
     width: 100%;
     height: 200rpx;
-    background: url('../../static/index/test3.png') no-repeat;
-    background-size: 100% 100%;
+    // background: url('../../static/index/test3.png') no-repeat;
+    background-size: 100%;
     position: relative;
+    backdrop-filter: blur(10px); /* 背景模糊度为10像素 */
+    -webkit-backdrop-filter: blur(10px); /* Safari 和 Chrome 需要的前缀 */
     .containerBox {
       display: flex;
       position: absolute;
@@ -61,6 +69,8 @@ import {} from 'vue';
       left: 20rpx;
       .img {
         width: 144rpx;
+        height: 144rpx;
+        border-radius: 18rpx;
       }
       .right {
         margin-left: 20rpx;
@@ -105,6 +115,8 @@ import {} from 'vue';
           margin-top: 10rpx;
           .img2 {
             width: 40rpx;
+            height: 40rpx;
+            border-radius: 50%;
           }
           .one-text {
             font-size: 22rpx;
@@ -145,6 +157,7 @@ import {} from 'vue';
       align-items: flex-start;
       .img {
         width: 180rpx;
+        height: 136rpx;
       }
       .one {
         font-size: 28rpx;
@@ -157,6 +170,7 @@ import {} from 'vue';
         align-items: center;
         .img {
           width: 36rpx;
+          height: 36rpx;
         }
         .two {
           font-size: 24rpx;

src/pages/index/index.vue

@@ -119,7 +119,7 @@
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData" />
     <!-- 店铺卡片推荐 -->
-    <ShopCard />
+    <ShopCard :shopCardData="shopCardData" />
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData1" />
     <!-- 营销模块 -->
@@ -172,6 +172,7 @@ const classificationB = ref([
 const cardData = ref([]);
 const cardData1 = ref([]);
 const cardData2 = ref([]);
+const shopCardData = ref({});
 const current = ref(0);
 const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/guiyang.png']);
 const listParams = {
@@ -278,9 +279,10 @@ const getMerchantList = () => {
         item.labels = item.labels.split(',');
       }
     });
-    cardData.value = res.data.content.slice(0, 2);
-    cardData1.value = res.data.content.slice(2, 4);
-    cardData2.value = res.data.content.slice(4);
+    shopCardData.value = res.data.content[0];
+    cardData.value = res.data.content.slice(1, 3);
+    cardData1.value = res.data.content.slice(3, 5);
+    cardData2.value = res.data.content.slice(5);
   });
 };
 // distance参数来源

vite.config.ts

@@ -41,7 +41,7 @@ export default defineConfig({
     // 代理配置
     proxy: {
       '/api': {
-        target: 'http://192.168.0.147:9999',
+        target: 'http://test2.rhhzkj.com:8080',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
       },