9.1

2025-09-01 16:25:46 +08:00
parent 7270482bd9
commit 82e0a5c10d
14 changed files with 3089 additions and 464 deletions
@@ -0,0 +1,147 @@
+<template>
+	<view class="ppt-detail-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="课件详情"
+			@clickLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+			<template v-slot:right>
+				<view class="nav-actions">
+					<uni-icons type="paperplane" size="22" color="#8B2316"></uni-icons>
+					<uni-icons type="heart" size="22" color="#8B2316" style="margin-left: 20rpx;"></uni-icons>
+				</view>
+			</template>
+		</uni-nav-bar>
+
+		<!-- 下载提示条 -->
+		<view class="download-bar">
+			<view class="download-inner">
+				<u-icon name="download" color="#fff" size="28"></u-icon>
+				<text class="download-text">本课件下载</text>
+				<text class="download-price">{{ price }}</text>
+				<text class="download-unit">元</text>
+			</view>
+		</view>
+
+		<!-- 图片浏览 -->
+		<view class="viewer">
+			<swiper
+				class="ppt-swiper"
+				:indicator-dots="false"
+				:circular="true"
+				:autoplay="false"
+				@change="onSwiperChange"
+			>
+				<swiper-item v-for="(img, idx) in images" :key="idx">
+					<view class="slide">
+						<image :src="img" mode="widthFix" class="slide-image" />
+					</view>
+				</swiper-item>
+			</swiper>
+
+			<!-- 页码指示 -->
+			<view class="page-indicator">{{ currentIndex + 1 }}/{{ images.length }}</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	import { onShow } from "@dcloudio/uni-app";
+
+	const images = ref([
+		'/static/big_background_my.png',
+		'/static/big_background_my.png',
+		'/static/big_background_my.png'
+	]);
+	const currentIndex = ref(1); // 对应截图显示 2/23 的第二页效果
+	const price = ref('1.0');
+
+	const onSwiperChange = (e) => {
+		currentIndex.value = e.detail.current;
+	};
+
+	const goBack = () => {
+		uni.navigateBack();
+	};
+
+	onShow(() => {
+		// 可在此根据路由参数拉取课件详情与图片列表
+	});
+</script>
+
+<style lang="scss" scoped>
+	.ppt-detail-page {
+		background-color: #ffffff;
+		min-height: 100vh;
+	}
+
+	.nav-actions {
+		display: flex;
+		align-items: center;
+	}
+
+	.download-bar {
+		position: sticky;
+		top: calc(var(--status-bar-height) + 44px);
+		z-index: 9;
+		width: 100%;
+		background-color: #6F6F6F; // 接近截图灰条
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.download-inner {
+		padding: 0 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+	}
+	.download-text {
+		margin-left: 12rpx;
+		font-size: 28rpx;
+	}
+	.download-price {
+		margin-left: 8rpx;
+		color: #ff3b30; // 红色价格
+		
+		font-size: 30rpx;
+	}
+	.download-unit {
+		margin-left: 4rpx;
+		font-size: 26rpx;
+	}
+
+	.viewer {
+		padding: 24rpx 0;
+	}
+
+	.ppt-swiper {
+		width: 100%;
+		min-height: 400rpx;
+		background-color: #fff;
+	}
+	.slide {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+	}
+	.slide-image {
+		width: 100%;
+	}
+
+	.page-indicator {
+		margin-top: 20rpx;
+		text-align: center;
+		font-size: 32rpx;
+		color: #333;
+	}
+</style>