288 lines
7.2 KiB
Vue
288 lines
7.2 KiB
Vue
<template>
|
||
<uni-nav-bar title="继续教育" fixed color="#8B2316" height="140rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
|
||
<view class="page">
|
||
<!-- 课程列表 -->
|
||
<view class="course-list">
|
||
<!-- 肝胆精品课 -->
|
||
<view class="course-item" @click="goToCourse('hepatoBiliary')">
|
||
<up-image :src="course" width="94rpx" height="94rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title">肝胆精品课</view>
|
||
<view class="course-subtitle">肝胆精品课，筑梦·医路成长</view>
|
||
</view>
|
||
<view class="course-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 肝胆视频 -->
|
||
<view class="course-item" @click="goToCourse('hepatoBiliaryVideo')">
|
||
<up-image :src="videoImg" width="94rpx" height="94rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title">肝胆视频</view>
|
||
<view class="course-subtitle">数千集精彩报告等您来看</view>
|
||
</view>
|
||
<view class="course-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 肝胆课件 -->
|
||
<view class="course-item" @click="goToCourse('hepatoBiliaryCourseware')">
|
||
<up-image :src="pptImg" width="94rpx" height="94rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title">肝胆课件</view>
|
||
<view class="course-subtitle">国内专业优质肝胆课件共享平台</view>
|
||
</view>
|
||
<view class="course-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 病例讨论 -->
|
||
<view class="course-item" @click="goToCourse('caseDiscussion')">
|
||
<up-image :src="talkImg" width="94rpx" height="94rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title">病例讨论</view>
|
||
<view class="course-subtitle">互帮互助，病例共讨</view>
|
||
</view>
|
||
<view class="course-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 病例荟萃 -->
|
||
<view class="course-item" @click="goToCourse('caseCollection')">
|
||
<up-image :src="huicuiImg" width="94rpx" height="94rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title">病例荟萃</view>
|
||
<view class="course-subtitle">一线专家临床总结</view>
|
||
</view>
|
||
<view class="course-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 现代肝病学院 -->
|
||
<view class="course-item" @click="goToCourse('modernHepatology')">
|
||
<up-image :src="xueyuanImg" width="94rpx" height="94rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title">现代肝病学院</view>
|
||
<view class="course-subtitle">一期一关注，绝对收获满满</view>
|
||
</view>
|
||
<view class="course-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新手教程 -->
|
||
<view class="course-item" @click="goToCourse('tutorial')">
|
||
<up-image :src="newerImg" width="94rpx" height="94rpx" ></up-image>
|
||
<view class="course-content">
|
||
<view class="course-title">新手教程</view>
|
||
<view class="course-subtitle">手把手助您用好专家工作室</view>
|
||
</view>
|
||
<view class="course-arrow">
|
||
<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<CustomTabbar></CustomTabbar>
|
||
</template>
|
||
|
||
<script setup>
|
||
import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
|
||
import { ref } from 'vue';
|
||
import { onShow } from "@dcloudio/uni-app";
|
||
import course from "@/static/jingpinkecheng.png"
|
||
import videoImg from "@/static/gandanshipin.png"
|
||
import pptImg from "@/static/gandankejian.png"
|
||
import talkImg from "@/static/bibglijiaoliu.png"
|
||
import huicuiImg from "@/static/jingdianbingli.png"
|
||
import xueyuanImg from "@/static/ganbingxueyuan.png"
|
||
import newerImg from "@/static/xinshoujiaocheng.png"
|
||
// 方法
|
||
// 方法
|
||
const goToCourse = (courseType) => {
|
||
console.log('进入课程:', courseType);
|
||
|
||
// 根据课程类型进行不同的处理
|
||
switch(courseType) {
|
||
case 'hepatoBiliary':
|
||
uni.showToast({
|
||
title: '肝胆精品课功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'hepatoBiliaryVideo':
|
||
uni.showToast({
|
||
title: '肝胆视频功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'hepatoBiliaryCourseware':
|
||
uni.showToast({
|
||
title: '肝胆课件功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'caseDiscussion':
|
||
uni.showToast({
|
||
title: '病例讨论功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'caseCollection':
|
||
uni.showToast({
|
||
title: '病例荟萃功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'modernHepatology':
|
||
uni.showToast({
|
||
title: '现代肝病学院功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
case 'tutorial':
|
||
uni.showToast({
|
||
title: '新手教程功能开发中',
|
||
icon: 'none'
|
||
});
|
||
break;
|
||
default:
|
||
uni.showToast({
|
||
title: '功能开发中',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
};
|
||
|
||
onShow(() => {
|
||
console.log('继续教育页面显示');
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 颜色变量
|
||
$primary-color: #ff6b6b;
|
||
$theme-color: #8B2316;
|
||
$white: #fff;
|
||
$gray-bg: #f5f5f5;
|
||
$gray-light: #eee;
|
||
$gray-medium: #999;
|
||
$gray-dark: #666;
|
||
$text-color: #333;
|
||
|
||
// 课程图标颜色
|
||
$green-color: #00D4AA;
|
||
$yellow-color: #FFB800;
|
||
$orange-color: #FF8C00;
|
||
$green-chat-color: #52C41A;
|
||
$purple-color: #B37FEB;
|
||
$blue-color: #40A9FF;
|
||
$orange-tutorial-color: #FF7A45;
|
||
|
||
// 尺寸变量
|
||
$border-radius: 8px;
|
||
$border-radius-small: 6px;
|
||
$padding: 15px;
|
||
$padding-small: 10px;
|
||
|
||
.page {
|
||
background-color: $gray-bg;
|
||
min-height: calc(100vh - 140rpx);
|
||
|
||
padding-bottom: 120rpx;
|
||
}
|
||
|
||
// 课程列表
|
||
.course-list {
|
||
padding: 20rpx;
|
||
|
||
.course-item {
|
||
background-color: $white;
|
||
border-radius: $border-radius;
|
||
margin-bottom: 20rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.course-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 30rpx;
|
||
|
||
&.green {
|
||
background-color: $green-color;
|
||
}
|
||
|
||
&.yellow {
|
||
background-color: $yellow-color;
|
||
}
|
||
|
||
&.orange {
|
||
background-color: $orange-color;
|
||
}
|
||
|
||
&.green-chat {
|
||
background-color: $green-chat-color;
|
||
}
|
||
|
||
&.purple {
|
||
background-color: $purple-color;
|
||
}
|
||
|
||
&.blue {
|
||
background-color: $blue-color;
|
||
}
|
||
|
||
&.orange-tutorial {
|
||
background-color: $orange-tutorial-color;
|
||
}
|
||
}
|
||
|
||
.course-content {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
|
||
.course-title {
|
||
font-size: 32rpx;
|
||
color: $text-color;
|
||
font-weight: 600;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.course-subtitle {
|
||
font-size: 26rpx;
|
||
color: $gray-medium;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
.course-arrow {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
// 点击效果
|
||
&:active {
|
||
opacity: 0.8;
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
</style>
|