first commit
This commit is contained in:
zoujiandong
@@ -0,0 +1,287 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user