首页增加轮换图片

src/views/Home/Index.vue

@@ -58,6 +58,13 @@
 
   <el-row class="mt-8px" :gutter="8" justify="space-between">
     <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
+      <div>
+        <el-carousel :interval="4000" type="card" height="200px">
+          <el-carousel-item v-for="item in image" :key="item.id">
+            <el-image style="width: 100%; height: 100%" :src="item.src" alt="无图片" :title="item.name"/>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
       <el-card shadow="never">
         <template #header>
           <div class="h-3 flex justify-between">
@@ -120,6 +127,9 @@
         </el-skeleton>
       </el-card>
     </el-col>
+
+
+
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
       <el-card shadow="never">
         <template #header>
@@ -175,7 +185,9 @@
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 import { formatTime } from '@/utils'
-
+import mn2 from '@/assets/imgs/Home-image/02.png'
+import mn3 from '@/assets/imgs/Home-image/03.png'
+import mn4 from '@/assets/imgs/Home-image/04.png'
 import { useUserStore } from '@/store/modules/user'
 import { useWatermark } from '@/hooks/web/useWatermark'
 import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
@@ -183,6 +195,7 @@ import { pieOptions, barOptions } from './echarts-data'
 
 defineOptions({ name: 'Home' })
 
+
 const { t } = useI18n()
 const userStore = useUserStore()
 const { setWatermark } = useWatermark()
@@ -196,7 +209,23 @@ let totalSate = reactive<WorkplaceTotal>({
   access: 0,
   todo: 0
 })
-
+const image = [
+  {
+    id: 1,
+    src: mn2,
+    name: '02'
+  },
+  {
+    id: 2,
+    src: mn3,
+    name: '03'
+  },
+  {
+    id: 3,
+    src: mn4,
+    name: '04'
+  },
+]
 const getCount = async () => {
   const data = {
     project: 40,
@@ -389,3 +418,21 @@ const getAllApi = async () => {
 
 getAllApi()
 </script>
+
+<style scoped>
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 200px;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>