--添加登录界面轮播图

src/views/secondDev/Login.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="t-container">
-        <StarBackground3 />
+       <!--  <StarBackground3 /> -->
+        <!-- <LoginCarousel /> -->
         <div :class="prefixCls" class="login-box relative w-full h-full" v-if="!isSingleLogin">
             <div class="center-box">
                 <div class="login-left-title">
@@ -10,9 +11,9 @@
                     <LoginForm />
                 </div>
             </div>
-            <div class="earth-wrapper">
+<!--             <div class="earth-wrapper">
                 <Earth3D />
-            </div>
+            </div> -->
         </div>
         <div style="width: 100%; height: 300px; display: flex; justify-content: center; align-items: center" v-else>
             <a-spin />
@@ -35,8 +36,11 @@
     import { useRouter } from 'vue-router';
     import { useMessage } from '/@/hooks/web/useMessage';
     import { useI18n } from '/@/hooks/web/useI18n';
-    import StarBackground3 from './StarBackground3.vue';
-    import Earth3D from './Earth3D.vue';
+    // import StarBackground3 from './StarBackground3.vue';
+    // import Earth3D from './Earth3D.vue';
+    import LoginCarousel from './LoginCarousel.vue';
+
+
 
     const { currentRoute } = useRouter();
     const userStore = useUserStore();

src/views/secondDev/LoginCarousel.vue

@@ -0,0 +1,80 @@
+<template>
+  <a-carousel class="login-carousel" autoplay>
+    <LoginCarouselImg v-for="img in imgs" :key="img.src" :src="img.src" :thumbnail="img.thumbnail"></LoginCarouselImg>
+  </a-carousel>
+</template>
+<script lang="ts">
+import { defineComponent,h } from 'vue';
+
+// 导入图片资源
+
+const LoginCarouselImg = defineComponent({
+  name: 'LoginCarouselImg',
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+    thumbnail: {
+      type: String,
+      required: true,
+    },
+    alt: {
+      type: String,
+      required: false,
+    },
+  },
+  setup() {
+    return {};
+  },
+  data() {
+    return {
+      reader: false, 
+    };
+  },
+  render() {
+    if (!this.src) return null;
+    return h('div', { class: 'carousel-item' }, [
+      h('img', { 
+        src: (this.reader ? this.src : this.thumbnail), 
+        alt: this.alt || '' 
+      }),
+    ]);
+  },
+
+});
+
+
+
+export default defineComponent({
+  name: 'LoginCarousel',
+  components: { LoginCarouselImg },
+  setup() {
+    return {};
+  },
+  data() {
+    return {
+        imgs: [
+        { src: new URL('/@/assets/images/login/1.png', import.meta.url).href, thumbnail: new URL('/@/assets/images/login/thum/1.png', import.meta.url).href, alt: '' },
+        { src: new URL('/@/assets/images/login/2.png', import.meta.url).href, thumbnail: new URL('/@/assets/images/login/thum/2.png', import.meta.url).href, alt: '' },
+        { src: new URL('/@/assets/images/login/3.png', import.meta.url).href, thumbnail: new URL('/@/assets/images/login/thum/3.png', import.meta.url).href, alt: '' },
+        { src: new URL('/@/assets/images/login/4.png', import.meta.url).href, thumbnail: new URL('/@/assets/images/login/thum/4.png', import.meta.url).href, alt: '' },
+        { src: new URL('/@/assets/images/login/5.png', import.meta.url).href, thumbnail: new URL('/@/assets/images/login/thum/5.png', import.meta.url).href, alt: '' },
+        ],
+    };
+  },
+});
+
+</script>
+<style lang="less" scoped>
+.login-carousel{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+
+</style>