店铺首页

.hbuilderx/launch.json

+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

src/Components/navBar/navBar.vue

+<template>
+  <view class="nav-bar" :style="`height: {{navBarHeight}}px; backgroundColor: {{bgColor}};`">
+    <view
+      class="container"
+      :style="`height: {{containerHeight}}px; marginTop: {{containerMargin}}px;`"
+    >
+      containerMargin{{ (containerHeight, containerHeight, containerMargin) }}
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const navBarHeight = ref(0);
+const containerHeight = ref(0);
+const containerMargin = ref(0);
+const bgColor = ref('');
+
+onMounted(() => {
+  const capsuleButtonInfo = xma.getMenuButtonBoundingClientRect();
+  const systemInfo = xma.getSystemInfoSync();
+  const gap = capsuleButtonInfo.top - systemInfo.statusBarHeight;
+  navBarHeight.value = gap * 2 + capsuleButtonInfo.height + systemInfo.statusBarHeight;
+  containerHeight.value = capsuleButtonInfo.height;
+  containerMargin.value = capsuleButtonInfo.top;
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-bar {
+  position: sticky;
+  top: 0rpx;
+  z-index: 999;
+  width: 750rpx;
+  overflow: hidden;
+
+  transition: background-color 0.5s;
+
+  .container {
+    width: 750rpx;
+    display: flex;
+  }
+}
+</style>

src/pages/shop/shop.vue

 <template>
-  <view class="shop-pages"></view>
+  <view class="shop-pages">
+    <view class="swiper">
+      <wd-swiper
+        customClass="swiper-custom"
+        :list="swiperList"
+        autoplay
+        height="536rpx"
+        customStyle="border-radius: 0rpx;"
+        :current="current"
+        @click="handleClick"
+        @change="onChange"
+      ></wd-swiper>
+    </view>
+    <view class="content">
+      <view class="shop-info">
+        <view class="shop-info-top">
+          <view class="shop-info-detail">
+            <text class="shop-title">川心美蛙鱼头火锅(中环广场店)</text>
+            <view class="shop-tag-list">
+              <view class="tag-item">
+                <text>中环广场卤煮 第1名</text>
+              </view>
+              <view class="tag-item">
+                <text>火锅</text>
+              </view>
+              <view class="tag-item">
+                <text>免费wifi</text>
+              </view>
+              <view class="tag-item">
+                <text>朋友聚餐</text>
+              </view>
+            </view>
+          </view>
+          <view class="shop-info-score"></view>
+        </view>
+        <view class="shop-info-bottom"></view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-const title = ref('小程序平台');
+import navBar from '@/Components/navBar/navBar.vue';
+const current = ref(0);
+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',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
+]);
+const handleClick = (e) => {
+  console.log(e);
+};
+const onChange = (e) => {
+  console.log(e);
+};
 </script>
 
 <style lang="scss">
 .shop-pages {
-  width: 375px;
+  width: 375 * 2rpx;
+  margin: 0 auto;
+
+  .swiper {
+    width: 750rpx;
+    margin: 0 auto;
+    height: 536rpx;
+
+    :deep(.wd-swiper__track) {
+      border-radius: 0;
+    }
+  }
+
+  .content {
+    width: 750rpx;
+
+    .shop-info {
+      width: 750rpx;
+      background-color: #fdfdfd;
+      position: relative;
+      top: -80rpx;
+      border-radius: 16rpx 16rpx 0rpx 0rpx;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      padding: 20rpx 32rpx 20rpx 40rpx;
+      .shop-info-top {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .shop-info-detail {
+          display: flex;
+          flex-direction: column;
+          .shop-title {
+            font-size: 18 * 2rpx;
+            font-weight: bold;
+            color: #3d3d3d;
+          }
+          .shop-tag-list {
+            display: flex;
+            flex-wrap: wrap;
+            max-width: 400rpx;
+            background-color: #fff;
+            margin-top: 8rpx;
+            .tag-item {
+              border-radius: 3 * 2rpx;
+              background: #efefef;
+              box-sizing: border-box;
+              padding: 8rpx;
+              margin-right: 24rpx;
+              margin-top: 8rpx;
+              text {
+                font-size: 9 * 2rpx;
+                color: #767676;
+              }
+            }
+            .tag-item:nth-child(1) {
+              margin-left: 0;
+              background: linear-gradient(90deg, #fcdbdb 0%, rgba(255, 255, 255, 0) 98%);
+            }
+          }
+        }
+        .shop-info-score {
+          box-sizing: border-box;
+          padding: 8rpx;
+          border-radius: 8px;
+          background: linear-gradient(180deg, #fcdbdb 0%, rgba(255, 255, 255, 0.36) 100%);
+        }
+      }
+    }
+  }
 }
 </style>

vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import uni from '@dcloudio/vite-plugin-uni';
 import AutoImport from 'unplugin-auto-import/vite';
 import eslint from 'vite-plugin-eslint';
-
+import path from 'path';
 import legacy from '@vitejs/plugin-legacy';
 
 // https://vitejs.dev/config/
@@ -31,7 +31,11 @@ export default defineConfig({
         targets: ['defaults', 'not IE 11'],
       }),
   ].filter(Boolean),
-
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
   server: {
     open: true,
     // 代理配置