exam_mp/pages/index/index.vue

<template>
	<Container class="body-content" title="首页" :showBack="false">
		<view class="home">
			<!-- 倒计时 -->
			<view class="time">
				<view>倒计时</view>
				<view>151天</view>
			</view>
			<!-- 轮播图 -->
			<swiper class="swiper" circular autoplay>
				<swiper-item v-for="(item, index) in banner_list" :key="index">
					<view class="swiper-item"><image class="swiper-item-image" :src="item.image_url" mode="aspectFill" @load="onImageLoad($event, item, index)"></image></view>
				</swiper-item>
			</swiper>
			<!-- 公告 -->
			<view class="notice" v-if="notice_list !='' && notice_list != null">
				<view class="title-lable">公告</view>
				<view class="notice-title">{{notice_list[0]['title']}}</view>
				<navigator url="/pages/notice/list">
					<view class="notice-more">{{'更多 >'}}</view>
				</navigator>
			</view>
			<!-- 2025新大纲 -->
			<view class="new_outline">
				<uni-section title="基础用法" type="line">
					<view class="p-20">
						<uni-segmented-control :flex="false" :current="current" :values="items" style-type="text" @clickItem="(e) => (current = e.currentIndex)" />
						<!-- 执业药师 -->
						<template v-for="(item, index) in list" :key="item.id">
							<view v-if="current === index" class="grid">
								<view v-for="i in item?.children" class="flex" @click="clickClass(i)">
									<view class="bg-red"></view>
									<view>{{ i.name }}</view>
								</view>
							</view>
						</template>
					</view>
				</uni-section>
			</view>
		</view>
		<uni-section title="往年真题" type="line">
			<!-- 往年真题 -->
			<view class="grid-3">
				<view
					v-for="item in 7"
					class="flex"
					@click="
						toReal({
							title: '2025真题'
						})
					"
				>
					<view class="bg-red"></view>
					<view>执业药师{{ item }}</view>
				</view>
			</view>
		</uni-section>
	</Container>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import Container from '../../components/Container/Container.vue';
import { router } from '../../utils/router';
import { request } from '../../utils/request';
import { arrayToTree } from '../../utils';

const current = ref(0);
const items = ref(['', '标签2']);
const list = ref([]);
const banner_list = ref([]);
const notice_list=ref([]);
const imgHeight= ref('auto'); // 初始高度

const clickClass = ({ id }) => {
	router.push({
		url: '/pages/regulations/index',
		params: {
			id
		}
	});
};

const toReal = (item) => {
	router.push({
		url: '/pages/real/index',
		params: item
	});
};
const onImageLoad = (e, item, index) => {
  const { width, height } = e.detail;
  const ratio = height / width;
  const systemInfo = uni.getSystemInfoSync();
  const imgHeightValue = systemInfo.windowWidth * ratio;
  imgHeight.value = imgHeightValue + 'px';
};
onMounted(async () => {
	const res = await request('api/question_bank/question_reception/chapter/get', {}, 'POST');
	list.value = arrayToTree({
		list: res.data
	});
	items.value[0] = list.value[0].name;

	// 首页轮播
	const banner_res = await request('api/question_bank/question_reception/banner/list', {page:1,limit:10}, 'POST');
	banner_list.value = banner_res.data.data;
	//系统公告
	const notice_res = await request('api/question_bank/question_reception/notice/list', {page:1,limit:1}, 'POST');
	notice_list.value = notice_res.data.data;
	console.log(notice_list);
});
</script>

<style scoped lang="scss">
.body-content {
	background: #f8f8f8;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.home {
	display: flex;
	flex-direction: column;
	gap: 20rpx;

	.time {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 80rpx;
	}
	.swiper {
	  width: 100%;
	  height: v-bind(imgHeight);
	  /* 关键修复样式 */
	  overflow: hidden;
	  transform-style: preserve-3d;
	  
	  .swiper-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 30rpx;
		/* 确保变换不影响子元素 */
		transform: translateZ(0);
		
		.swiper-item-image {
		  width: 100%;
		  height: 100%;
		  display: block;
		  border-radius: 30rpx;
		  /* 防止图片变形 */
		  object-fit: cover;
		  /* 确保层级 */
		  position: relative;
		}
	  }
	}

	.notice {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding-left: 26rpx;
		height: 72rpx;
		background: #ffffff;
		border-radius: 500rpx 500rpx 500rpx 500rpx;
		border:1rpx solid #f8f8f8;
		.title-lable {
			padding: 5rpx 15rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #3f75ff;
			font-weight: 500;
			font-size: 26rpx;
			color: #3f75ff;
			line-height: 32rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.notice-title{
			width: calc(100% - 225rpx);
			color: #333;
			font-size: 26rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.notice-more{
			font-size: 26rpx;
		}
	}

	.new_outline {
		border: 1rpx solid #000000;
	}
}

.title {
	font-family: 'PingFang SC, PingFang SC';
	font-weight: 700;
	font-size: 32rpx;
	color: #000000;
}

.p-20 {
	padding: 0 30rpx 30rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	height: 100%;
}

.flex {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	align-items: center;
	justify-content: center;
}

.bg-red {
	width: 149rpx;
	height: 80rpx;
	background: #d9d9d9;
}
</style>