148 lines
2.9 KiB
Vue
148 lines
2.9 KiB
Vue
<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>
|