geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、添加登录轮播背景图

Browse Source
This commit is contained in:
张福财
2026-03-30 09:26:54 +08:00
parent 5bc1d821ae
commit 56f8cde854
4 changed files with 51 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/secondDev/Login.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="t-container">
<!-- <StarBackground3 /> -->
<!-- <LoginCarousel /> -->
<LoginCarousel />
<div :class="prefixCls" class="login-box relative w-full h-full" v-if="!isSingleLogin">
<div class="center-box">
<div class="login-left-title">

56
src/views/secondDev/LoginCarousel.vue
View File

@ -1,12 +1,22 @@
<template>
<a-carousel class="login-carousel" autoplay>
<a-carousel class="login-carousel" :dots="false" 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';
import { defineComponent, h } from 'vue';
// 导入图片资源
import img1 from '/@/assets/images/login/1.jpg';
import img2 from '/@/assets/images/login/2.jpg';
import img3 from '/@/assets/images/login/3.jpg';
import img4 from '/@/assets/images/login/4.jpg';
import img5 from '/@/assets/images/login/5.jpg';
import thumb1 from '/@/assets/images/login/thum/1.jpg';
import thumb2 from '/@/assets/images/login/thum/2.jpg';
import thumb3 from '/@/assets/images/login/thum/3.jpg';
import thumb4 from '/@/assets/images/login/thum/4.jpg';
import thumb5 from '/@/assets/images/login/thum/5.jpg';
const LoginCarouselImg = defineComponent({
name: 'LoginCarouselImg',
@ -27,6 +37,28 @@ const LoginCarouselImg = defineComponent({
setup() {
return {};
},
mounted(){
// 懒加载图片
if(this.src) {
this.loadImage();
}
},
methods: {
loadImage() {
// 创建 Image 对象预加载高清图片
const img = new Image();
img.onload = () => {
// 图片加载完成后切换到高清图
this.reader = true;
};
img.onerror = () => {
console.warn('高清图片加载失败:', this.src);
// 加载失败时使用缩略图
this.reader = false;
};
img.src = this.src;
}
},
data() {
return {
reader: false,
@ -37,7 +69,9 @@ const LoginCarouselImg = defineComponent({
return h('div', { class: 'carousel-item' }, [
h('img', {
src: (this.reader ? this.src : this.thumbnail),
alt: this.alt || ''
alt: this.alt || '',
witth:"auto",
height:"100%"
}),
]);
},
@ -55,11 +89,11 @@ export default defineComponent({
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: '' },
{ src: img1, thumbnail: thumb1, alt: '' },
{ src: img2, thumbnail: thumb2, alt: '' },
{ src: img3, thumbnail: thumb3, alt: '' },
{ src: img4, thumbnail: thumb4, alt: '' },
{ src: img5, thumbnail: thumb5, alt: '' },
],
};
},
@ -74,6 +108,12 @@ export default defineComponent({
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.carousel-item{
height: 98%;
width: auto !important;
}