商城：轮播图调整

src/views/mall/home/components/carousel.vue

@@ -1,13 +1,16 @@
 <template>
-  <v-carousel cycle hide-delimiter-background :show-arrows="false" style="width: 100%; max-width: 100%; height: auto;">
+  <v-carousel cycle hide-delimiter-background :show-arrows="false" style="height: 100%; min-width: 1184px;">
     <v-carousel-item v-for="(item, i) in carouselList" :key="i">
-      <v-img :src="item.imgUrl" :lazy-src="item.imgUrl">
+      <!-- <v-img :src="item.imgUrl" :lazy-src="item.imgUrl" style="width: 100%; height: auto;">
         <template v-slot:placeholder>
             <v-row align="center" class="fill-height ma-0" justify="center">
               <v-progress-circular color="grey-lighten-5" indeterminate></v-progress-circular>
             </v-row>
         </template>
-      </v-img>
+      </v-img> -->
+      <figure>
+        <img :src="item.imgUrl" :lazy-src="item.imgUrl" style="width: 100%;" />
+      </figure>
     </v-carousel-item>
   </v-carousel>
 </template>

src/views/mall/home/components/hotGoods.vue

@@ -8,7 +8,7 @@
       <v-card v-for="val in goodList" :key="val.id" class="goods-box-item" hover elevation="2" @click="handleClickGood(val)">
         <v-img :src="val.picUrl" width="100%" height="68%" cover></v-img>
         <div class="pa-3">
-          <p class="ellipsis color-333 text-center">{{ val.name }}</p>
+          <p class="ellipsis color-333">{{ val.name }}</p>
           <p class="color-999 ellipsis font-size-14 mt-1">{{ val.introduction }}</p>
           <div class="mt-1">
             <div class="goods-box-item-price float-left">￥{{ isArray(val.price) ? fen2yuan(val.price[0]) : fen2yuan(val.price) }}</div>

src/views/mall/home/components/pointExchange/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>xxx</div>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-point-exchange'})
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/mall/home/index.vue

@@ -2,41 +2,59 @@
   <div style="min-width: 1184px;" class="white-bgc">
     <!-- 搜索框 -->
     <div class="py-5 stickyBox">
-      <div class="search d-flex align-center">
-        <v-text-field
-          v-model="inputVal"
-          placeholder="请输入关键词"
-          color="primary"
-          variant="plain"
-          density="compact"
-          clearable
-          :hide-details="true"
-          class="ml-3 px-2"
-          style="height: 100%; line-height: 100%;"
-          @keyup.enter="handleSearch"
-        ></v-text-field>
-        <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
+      <div class="default-width d-flex align-center justify-space-between">
+        <div class="header-link">
+          <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
+          <span class="mx-8 cursor-pointer">积分兑换</span>
+          <span class="cursor-pointer">订单中心</span>
+          <span class="mx-8 cursor-pointer">
+            <v-icon size="20">mdi-cart-outline</v-icon>
+            购物车
+          </span>
+        </div>
+        <div class="search d-flex align-center">
+          <v-text-field
+            v-model="inputVal"
+            placeholder="请输入关键词"
+            color="primary"
+            variant="plain"
+            density="compact"
+            clearable
+            :hide-details="true"
+            class="ml-3 px-2"
+            style="height: 100%; line-height: 100%;"
+            @keyup.enter="handleSearch"
+          ></v-text-field>
+          <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
+        </div>
       </div>
     </div>
 
     <!-- 轮播图 -->
-    <Carousel :templateData="template" />
+    <Carousel :templateData="template" class="mb-10" style="min-height: 370px;" />
 
     <!-- 热门商品 -->
-    <HotGoods :templateData="template" class="my-10 default-width" />
+    <HotGoods :templateData="template" class="default-width" />
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'mall-home-index'})
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import Carousel from './components/carousel.vue'
 import HotGoods from './components/hotGoods.vue'
 import { useMallStore } from '@/store/mall'
+import { useRouter } from 'vue-router'
 
 // 获取装修模版
 useMallStore().getMallDiyTemplate()
 
+const router = useRouter()
+const isActive = computed(() => (path) => {
+  const currentPath = router.currentRoute.value.path
+  return currentPath.includes(path)
+})
+
 let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})
 useMallStore().$subscribe((mutation, state) => {
   if (state.template && Object.keys(state.template).length) template.value = state?.template
@@ -48,21 +66,37 @@ const handleSearch = () => {}
 </script>
 
 <style scoped lang="scss">
+.active-route {
+  position: relative;
+  color: var(--v-primary-base);
+  &::before {
+    content: '';
+    width: 100%;
+    height: 3px;
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    background-color: var(--v-primary-base);
+  }
+}
+.header-link span:hover {
+  color: var(--v-primary-base);
+}
 .stickyBox {
   position: sticky;
   top: 48px;
   z-index: 999;
   background-color: #fff;
+  // border-bottom: 1px solid #00897B;
 }
 .search {
   height: 50px;
-  width: 800px;
+  width: 350px;
   border: 2px solid var(--v-primary-base);
   border-radius: 5px;
-  margin: 0 auto;
   .searchBtn {
-    width: 180px;
-    height: 50px;
+    width: 100px;
+    height: 49px;
     line-height: 48px;
     text-align: center;
     font-size: 18px;