262 lines
6.6 KiB
Vue
262 lines
6.6 KiB
Vue
<template>
|
||
<navBar :title="'继续教育'"></navBar>
|
||
<view class="page">
|
||
<!-- 课程列表 -->
|
||
<view class="course-list">
|
||
<!-- 肝胆精品课 -->
|
||
<view class="course-item" @click="goToCourse('course')">
|
||
<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('video')">
|
||
<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('ppt')">
|
||
<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 '@/components/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"
|
||
import navTo from '@/utils/navTo.js';
|
||
import navBar from "@/components/navBar/navBar.vue"
|
||
// 方法
|
||
// 方法
|
||
const goToCourse = (courseType) => {
|
||
console.log('进入课程:', courseType);
|
||
|
||
// 根据课程类型进行不同的处理
|
||
switch(courseType) {
|
||
case 'course':
|
||
navTo({
|
||
url: '/pages_course/course/course'
|
||
})
|
||
break;
|
||
case 'video':
|
||
navTo({
|
||
url: '/pages_app/video/video'
|
||
})
|
||
break;
|
||
case 'ppt':
|
||
navTo({
|
||
url: '/pages_app/ppt/ppt'
|
||
})
|
||
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 - var(--status-bar-height) - 44px);
|
||
margin-top:calc(var(--status-bar-height) + 44px);
|
||
}
|
||
|
||
// 课程列表
|
||
.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>
|