<template>
	<view class="my-download-page">
		<!-- 顶部导航栏 -->
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="我的下载"
			@cviewckLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
			
		</uni-nav-bar>

		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 观看历史 -->
			<view class="list-item" @click="goToHistory">
				<text class="item-text">诊疗指南</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			
			<!-- 分隔线 -->
			<view class="divider"></view>
			
			<!-- 离线缓存 -->
			<view class="list-item" @click="goToCache">
				<text class="item-text">期刊杂志</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			<!-- 分隔线 -->
			<view class="divider"></view>
			<view class="list-item" @click="goToCache">
				<text class="item-text">课件文档</text>
				<uni-icons type="right" color="#999999" size="16"></uni-icons>
			</view>
			<view class="divider"></view>
			
		</view>
	</view>
</template>

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

const goBack = () => {
	uni.navigateBack();
};

const goToHistory = () => {
	uni.showToast({ title: '观看历史', icon: 'none' });
};

const goToCache = () => {
	uni.showToast({ title: '离线缓存', icon: 'none' });
};
</script>

<style lang="scss" scoped>
.my-download-page {
	min-height: 100vh;
	background: #f9f9f9;
}

.content-area {
	
}

.list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 30rpx;
	background: #ffffff;
	
	.item-text {
		font-size: 32rpx;
		color: #000000;
	}
}

.divider {
	height: 2rpx;
	background: #f0f0f0;
	
}
</style>
