店铺首页完成

src/App.vue

@@ -13,7 +13,6 @@ onHide(() => {
 </script>
 <style>
 .multi-line {
-  width: 200px; /* 设置宽度 */
   overflow: hidden; /* 溢出隐藏 */
   display: -webkit-box; /* 作为弹性伸缩盒子模型显示 */
   -webkit-box-orient: vertical; /* 垂直排列子元素 */

src/pages/shop/shop.vue

@@ -188,6 +188,46 @@
         <!-- 评价列表-end -->
       </view>
       <!-- 用户评价-end -->
+      <!-- 周边推荐-start -->
+      <view class="surrounding-recommendations">
+        <text class="title">周边推荐</text>
+        <view class="tag-list">
+          <view
+            @click="changeActie(item.id)"
+            :class="activeId == item.id ? 'active-tag' : ''"
+            class="tag"
+            v-for="item in tagList"
+            :key="item.id"
+          >
+            {{ item.name }}
+          </view>
+        </view>
+        <view class="goods-list-tg">
+          <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
+            <view :id="i" class="scroll-view-item_H" v-for="i in 10" :key="i">
+              <view class="item-box">
+                <image src="@/static/shop/ice.png"></image>
+                <text class="goods-name multi-line">健康生态调味品</text>
+                <view class="goods-pf-rs">
+                  <text class="goods-fs">4.3</text>
+                  <text class="goods-fs-2">分</text>
+                  <text class="goods-rs">36/人</text>
+                </view>
+                <view class="tag-list">
+                  <view class="tag" v-for="item in tagList2" :key="item.id">
+                    {{ item.name }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+        <view class="tj-more">
+          <text>查看更多</text>
+          <wd-icon name="arrow-right" size="16px"></wd-icon>
+        </view>
+      </view>
+      <!-- 周边推荐-end -->
     </view>
   </view>
 </template>
@@ -196,6 +236,14 @@
 import navBar from '@/Components/navBar/navBar.vue';
 const current = ref(0);
 const old = reactive({ scrollTop: 0 });
+const activeId = ref(1);
+const tagList = ref([
+  { name: '美食', id: 1 },
+  { name: '休闲娱乐', id: 2 },
+  { name: '景点', id: 3 },
+  { name: '生活服务', id: 4 },
+]);
+const tagList2 = ref([{ name: '免费停车', id: 1 }]);
 const swiperList = ref([
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
@@ -212,6 +260,9 @@ function scroll(e) {
   console.log(e);
   old.scrollTop = e.detail.scrollTop;
 }
+function changeActie(id) {
+  activeId.value = id;
+}
 </script>
 
 <style lang="scss">
@@ -558,6 +609,7 @@ page {
             justify-content: center;
             align-items: center;
             box-sizing: border-box;
+            margin-left: auto;
             .sold-shares {
               font-size: 10 * 2rpx;
               color: #abaaaa;
@@ -570,7 +622,6 @@ page {
               border-radius: 12 * 2rpx;
               text-align: center;
               line-height: 24 * 2rpx;
-              position: absolute;
               font-size: 12 * 2rpx;
               color: #fff;
             }
@@ -707,6 +758,124 @@ page {
       }
     }
     // 用户评价-end
+    // 周边推荐-start
+    .surrounding-recommendations {
+      width: 100%;
+      border-radius: 8 * 2rpx 8 * 2rpx 0 0;
+      background: #ffffff;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      padding: 20rpx;
+      margin-top: 10rpx;
+      .title {
+        font-size: 13 * 2rpx;
+        font-weight: bold;
+        color: #3d3d3d;
+      }
+      .tag-list {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+        margin-top: 26rpx;
+        .tag {
+          border-radius: 10 * 2rpx;
+          background: #efefef;
+          color: #3d3d3d;
+          box-sizing: border-box;
+          padding: 6rpx 20rpx;
+          margin-right: 20rpx;
+          font-size: 11 * 2rpx;
+        }
+        .active-tag {
+          border-radius: 10 * 2rpx;
+          background: #ffefee;
+          box-sizing: border-box;
+          padding: 6rpx 20rpx;
+          margin-right: 20rpx;
+          color: #fa5151;
+        }
+      }
+      .goods-list-tg {
+        margin-top: 30rpx;
+        width: 100%;
+        background-color: #fff;
+        padding-bottom: 40rpx;
+        .scroll-view_H {
+          white-space: nowrap;
+          width: 100%;
+        }
+        .scroll-view-item_H {
+          display: inline-block;
+          margin-right: 20rpx;
+          .item-box {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            image {
+              width: 84 * 2rpx;
+              height: 60 * 2rpx;
+              border-radius: 8 * 2rpx;
+            }
+            .goods-name {
+              font-size: 12 * 2rpx;
+              width: 72 * 2rpx;
+              font-weight: bold;
+              color: #3d3d3d;
+              margin-top: 10rpx;
+            }
+            .goods-pf-rs {
+              display: flex;
+              align-items: center;
+              margin-top: 10rpx;
+              .goods-fs {
+                font-weight: 500;
+                font-size: 14 * 2rpx;
+                color: #fa5151;
+              }
+              .goods-fs-2 {
+                font-weight: 400;
+                font-size: 10 * 2rpx;
+                color: #fa5151;
+              }
+              .goods-rs {
+                font-size: 10 * 2rpx;
+                font-weight: 500;
+                color: #abaaaa;
+              }
+            }
+
+            .tag-list {
+              display: flex;
+              width: 84 * 2rpx;
+              flex-wrap: wrap;
+              margin-top: 20rpx;
+              .tag {
+                border-radius: 3 * 2rpx;
+                background: #efefef;
+                color: #abaaaa;
+                box-sizing: border-box;
+                padding: 6rpx;
+                font-size: 8 * 2rpx;
+                margin-right: 20rpx;
+              }
+            }
+          }
+        }
+      }
+      .tj-more {
+        border-top: 2rpx solid #f4f4f4;
+        width: 100%;
+        height: 36 * 2rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 9 * 2rpx;
+        color: #767676;
+      }
+    }
+
+    // 周边推荐-end
   }
 }
 </style>