yglt-uniapp/pages/TechnologySystems/TechnologySystems.vue

<!-- 7.科技系统 -->
<template>
	<view class="content">
		<div class="top">
			<swiper class="swiper" circular :interval="2000" :duration="500" :indicatorDots="true">
				<swiper-item>
					<div class="top-content top-content1" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content2" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content3" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content4" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content5" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content6" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content7" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content8" />
				</swiper-item>
				<swiper-item>
					<div class="top-content top-content9" />
				</swiper-item>
			</swiper>
		</div>
		<div class="bottom">
			<Menu :type="7" />
		</div>
	</view>
</template>

<script setup>
	import Menu from '../../components/Menu.vue'
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.top {
		flex: 12;
	}

	.bottom {
		flex: 1;
		background-color: rgba(44 61, 43, 1);
	}

	.swiper {
		height: 100%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.top-content {
		height: 100%;
	}

	.top-content1 {
		background: url('~@/static/eight1.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content2 {
		background: url('~@/static/eight2.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content3 {
		background: url('~@/static/eight3.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content4 {
		background: url('~@/static/eight4.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content5 {
		background: url('~@/static/eight5.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content6 {
		background: url('~@/static/eight6.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content7 {
		background: url('~@/static/eight7.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content8 {
		background: url('~@/static/eight8.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.top-content9 {
		background: url('~@/static/eight9.jpg') no-repeat;
		background-size: 100% 100%;
	}
</style>