美食详情页

src/views/My/index.vue

@@ -110,8 +110,9 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 .mine {
   padding-left: 4.7vw;
   padding-right: 4.7vw;
-  overflow: hidden;
   position: relative;
+  height: calc(100% - 80px);
+  overflow: auto;
   > img.bg {
     position: absolute;
     top: 0;

src/views/Serve/FoodDetail.vue

@@ -1,18 +1,311 @@
 <template>
   <div class="food-detail">
-    <div class="card banner">
+    <img src="@/assets/img/my/food-detail-banner-bg.png" alt="" class="banner-bg">
+    <div class="banner-card">
+      <h2>美食店铺名称（仁和新街点）</h2>
+      <div class="star">
+        <img
+          v-for="n in 5"
+          :key="n"
+          src="@/assets/img/service/star.png" alt="" class="star"
+        >
+        5
+      </div>
+      <div class="tag-list">
+        <div class="tag">
+          菜系标签
+        </div>
+        <div class="tag">
+          评价标签
+        </div>
+        <div class="tag">
+          其他标签
+        </div>
+      </div>
+      <img src="@/assets/img/service/food-detail-banner.png" alt="" class="shop-banner">
+      <div class="bottom-bar">
+        <div class="left">
+          <img src="@/assets/img/service/address-gray.png" alt="" class="icon">
+          <div class="address">鸠江区仁和路和兴街S12栋S110号</div>
+        </div>
+        <div class="right">
+          <button class="nav">
+            <img class="" src="@/assets/img/service/navigation-gray.png" alt="" draggable="false">
+            导航
+          </button>
+          <button class="phone">
+            <img class="" src="@/assets/img/service/phone-gray-2.png" alt="" draggable="false">
+            电话
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="content-card">
+      <div class="top-line">
+        <div class="title">推荐菜</div>
+        <button>
+          更多  》
+        </button>
+      </div>
+      <div class="swiper-container-food">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <img src="@/assets/img/service/【古建筑】.png" alt="">
+            <div class="title-wrap">
+              <h4>美食名称</h4>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <img src="@/assets/img/service/【快速浏览】.png" alt="">
+            <div class="title-wrap">
+              <h4>美食名称</h4>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <img src="@/assets/img/service/【西洋建筑】.png" alt="">
+            <div class="title-wrap">
+              <h4>美食名称</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
+    <div class="content-card">
+      <div class="top-line">
+        <div class="title">周边景点</div>
+        <button>
+          更多  》
+        </button>
+      </div>
+      <div class="swiper-container-attractions">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide">
+            <img src="@/assets/img/service/【古建筑】.png" alt="">
+            <div class="title-wrap">
+              <h4>景点名称</h4>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <img src="@/assets/img/service/【快速浏览】.png" alt="">
+            <div class="title-wrap">
+              <h4>景点名称</h4>
+            </div>
+          </div>
+          <div class="swiper-slide">
+            <img src="@/assets/img/service/【西洋建筑】.png" alt="">
+            <div class="title-wrap">
+              <h4>景点名称</h4>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import Swiper from "../../assets/libs/swiper.js";
+
 export default {
+  mounted() {
+    this.$nextTick(() => {
+      new Swiper(".swiper-container-food", {
+        slidesPerView: 1.4,
+        spaceBetween: 15,
+        centeredSlides: true,
+      })
+    })
+
+    this.$nextTick(() => {
+      new Swiper(".swiper-container-attractions", {
+        slidesPerView: 2.3,
+        spaceBetween: 15,
+        centeredSlides: true,
+      })
+    })
+  }
 }
 </script>
 
 <style lang="less" scoped>
 .food-detail {
+  position: relative;
+  height: calc(100% - 80px);
+  overflow: auto;
+  background: #F0F0F0;
+  z-index: 0;
+  
+  > img.banner-bg {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+  }
+  
+  > .banner-card {
+    background: #FFFFFF;
+    box-shadow: 0vw 0vw 0.9vw 0vw rgba(192,192,192,0.51);
+    border-radius: 1.3vw;
+    margin-top: 13.3vw;
+    margin-left: 2.8vw;
+    margin-right: 2.8vw;
+    padding: 3.5vw 3.2vw 3vw 3.2vw;
+    > h2 {
+      font-size: 4.8vw;
+      font-weight: bold;
+      color: #000000;
+      margin-bottom: 2.3vw;
+    }
+    > .star {
+      display: flex;
+      font-size: 3.2vw;
+      font-weight: bold;
+      color: #e6271d;
+      margin-bottom: 3vw;
+      > img.star {
+        width: 3vw;
+        height: 3vw;
+        margin-right: 1vw;
+      }
+    }
+    > .tag-list {
+      margin-bottom: 2.1vw;
+      > .tag {
+        padding-left: 2.3vw;
+        padding-right: 2.3vw;
+        padding-top: 1vw;
+        padding-bottom: 1vw;
+        display: inline-block;
+        background: #DDC49C;
+        border-radius: 0.5vw;
+        margin-right: 2.1vw;
+        font-size: 3.2vw;
+        font-weight: bold;
+        color: #483515;
+      }
+    }
+    > img.shop-banner {
+      width: 100%;
+      border-radius: 2.1vw;
+    }
+    > .bottom-bar {
+      margin-top: 3.3vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      > .left {
+        > img.icon {
+          width: 3.1vw;
+          height: 3.9vw;
+          margin-right: 0.8vw;
+          vertical-align: middle;
+        }
+        > .address {
+          display: inline-block;
+          vertical-align: middle;
+          font-size: 3.5vw;
+          font-weight: bold;
+          color: #787878;
+        }
+      }
+      > .right {
+        > button {
+          font-size: 2.9vw;
+          font-weight: bold;
+          color: #787878;
+          display: inline-flex;
+          flex-direction: column;
+          align-items: center;
+          &:nth-of-type(1) {
+            margin-right: 5.5vw;
+          }
+          > img {
+            display: block;
+            width: 5.3vw;
+            height: 5.3vw;
+            margin-bottom: 0.8vw;
+          }
+        }
+      }
+    }
+  }
 
+  > .content-card {
+    background-color: #fff;
+    margin-top: 5vw;
+    padding-top: 6vw;
+    padding-bottom: 7.5vw;
+    > .top-line {
+      padding-left: 4.7vw;
+      padding-right: 4.7vw;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > .title {
+        font-size: 3.5vw;
+        font-weight: bold;
+        color: #000000;
+      }
+      > button {
+        font-size: 2.7vw;
+        font-weight: 600;
+        color: #333333;
+        padding-top: 1vw;
+        padding-bottom: 1vw;
+      }
+    }
+    > .swiper-container-food {
+      margin-top: 5vw;
+      overflow: hidden;
+      > .swiper-wrapper {
+        > .swiper-slide {
+          width: 82.8vw;
+          height: 53.2vw;
+          background: #F7F8FA;
+          > img {
+            width: 100%;
+            height: 40.7vw;
+            object-fit: cover;
+          }
+          > .title-wrap {
+            > h4 {
+              text-align: center;
+              margin-top: 4vw;
+              font-size: 3.2vw;
+              font-weight: bold;
+              color: #333333;
+            }
+          }
+        }
+      }
+    }
+    > .swiper-container-attractions {
+      margin-top: 5vw;
+      overflow: hidden;
+      > .swiper-wrapper {
+        > .swiper-slide {
+          width: 43.6vw;
+          height: 55vw;
+          background: #F7F8FA;
+          > img {
+            width: 100%;
+            height: 44.5vw;
+            object-fit: cover;
+          }
+          > .title-wrap {
+            > h4 {
+              text-align: center;
+              margin-top: 3vw;
+              font-size: 3.2vw;
+              font-weight: bold;
+              color: #333333;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>