商城主页：搜索框+轮播图

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

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <v-carousel cycle hide-delimiter-background :show-arrows="false" style="width: 100%; max-width: 100%; height: auto;">
+        <v-carousel-item v-for="(item, i) in carouselList" :key="i">
+          <v-img :src="item.url" :lazy-src="item.url">
+            <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-carousel-item>
+      </v-carousel>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'mall-home-carousel'})
+
+const carouselList = [
+  { url: 'https://wx-static.ydjdev.com/resource-1730081781870-30114.jpg?imageView2/0/w/1920' },
+  { url: 'https://wx-static.ydjdev.com/resource-1730084780292-95821.jpg?imageView2/0/w/1920' },
+]
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/mall/home/index.vue

@@ -1,11 +1,54 @@
 <template>
-  <div>mall-home</div>
+  <div style="min-width: 1184px;">
+    <!-- 搜索框 -->
+    <div class="default-width py-5">
+      <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>
+
+    <!-- 轮播图 -->
+    <Carousel />
+  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'mall-home-index'})
+import { ref } from 'vue'
+import Carousel from './components/carousel.vue'
+
+const inputVal = ref('')
+const handleSearch = () => {}
 </script>
 
 <style scoped lang="scss">
-
+.search {
+  height: 50px;
+  width: 800px;
+  border: 2px solid var(--v-primary-base);
+  border-radius: 5px;
+  margin: 0 auto;
+  .searchBtn {
+    width: 180px;
+    height: 50px;
+    line-height: 48px;
+    text-align: center;
+    font-size: 18px;
+    color: #fff;
+    background-color: var(--v-primary-base);
+    cursor: pointer;
+  }
+}
 </style>