主页面增加轮播图

Vue/src/main.js

@@ -6,6 +6,9 @@ import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/antd.css'
 import JsonExcel from 'vue-json-excel'
 import 'element-ui/lib/theme-chalk/index.css'; // 导入相关样式
+import { Carousel, CarouselItem } from 'element-ui';
+Vue.use(Carousel);
+Vue.use(CarouselItem);
 
 Vue.component('downloadExcel', JsonExcel)
 Vue.config.productionTip = false
@@ -16,4 +19,4 @@ new Vue({
   router,
   store,
   render: function (h) { return h(App) }
-}).$mount('#app')
+}).$mount('#app')

Vue/src/router/routes.js

@@ -8,7 +8,12 @@ const routes = [
         children: [
             {
                 path: "",
-                redirect: "/commodity",
+                redirect: "/myhome",
+                meta: {auth: true}
+            },
+            {
+                path: 'myhome',
+                component: () => import('@/views/basics/Myhome'),
                 meta: {auth: true}
             },
             {

Vue/src/views/basics/Myhome.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-carousel
+      indicator-position="outside"
+      :interval="3000"
+      arrow="always"
+      height="640px">
+    <el-carousel-item v-for="(item, index) in carouseData" :key="index">
+      <img :src="item" alt="轮播图">
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<script setup>
+const carouseData = [
+  '/sf1.png',
+  '/sf2.png',
+  '/sf3.png',
+  '/sf4.png',
+  '/sf5.png',
+];
+</script>
+
+<style scoped>
+.el-carousel__item {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center; /* 垂直居中 */
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  display: block; /* 确保图片显示 */
+}
+</style>