轮播

src/views/Home/personal/components/headCarousel.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <v-carousel height="80" show-arrows="hover" hide-delimiters cycle>
+      <!-- <template v-slot:prev="{ props }">
+        <v-btn
+          tonal
+          plain
+          size="x-small"
+          icon="$prev"
+          variant="elevated"
+          @click="props.onClick"
+        ></v-btn>
+      </template>
+      <template v-slot:next="{ props }">
+        <v-btn
+          tonal
+          plain
+          size="x-small"
+          icon="$next"
+          variant="elevated"
+          @click="props.onClick"
+        ></v-btn>
+      </template> -->
+      <v-carousel-item
+        v-for="(item,i) in items"
+        :key="i"
+        :src="item.src"
+        cover
+      ></v-carousel-item>
+    </v-carousel>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name:'personal-headCarousel'})
+
+const items = ref([
+  { src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', },
+  { src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg', },
+  { src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg', },
+  { src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg', },
+])
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Home/personal/index.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="parent">
-    <div>个人用户首页</div>
+    <headCarousel></headCarousel>
   </div>
 </template>
 
 <script setup>
+import headCarousel from './components/headCarousel.vue'
 defineOptions({ name:'personal-index'})
 </script>