|
|
@@ -0,0 +1,689 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <nav-bar title="考前专题" class="navbar"></nav-bar>
|
|
|
+ <!-- 顶部宣传横幅 -->
|
|
|
+ <view class="banner">
|
|
|
+ <!-- 轮播图组件 -->
|
|
|
+ <swiper
|
|
|
+ class="banner-swiper"
|
|
|
+ :indicator-dots="true"
|
|
|
+ :autoplay="true"
|
|
|
+ :interval="5000"
|
|
|
+ :duration="500"
|
|
|
+ indicator-color="rgba(255,255,255,0.5)"
|
|
|
+ indicator-active-color="#ffffff"
|
|
|
+ circular
|
|
|
+ >
|
|
|
+ <swiper-item v-for="(item, index) in bannerList" :key="index">
|
|
|
+ <image
|
|
|
+ :src="item.bimgUrl"
|
|
|
+ class="banner-img"
|
|
|
+ mode="widthFix"
|
|
|
+ @click="goToCourse(item,0)"
|
|
|
+ ></image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 课程主体内容 -->
|
|
|
+ <view class="course-container">
|
|
|
+ <view class="titles">
|
|
|
+ <image class="timg" src="@/static/topic/icon_left.png" alt="" />
|
|
|
+ <text class="scheme">进击取证</text>
|
|
|
+ <image class="timg" src="@/static/topic/icon_right.png" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="min_title">一站式解决方案，领跑新考季</view>
|
|
|
+ <view class="course-row">
|
|
|
+ <!-- 课程卡片 -->
|
|
|
+ <view
|
|
|
+ class="course-col"
|
|
|
+ v-for="(course, index) in filteredCourseList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="course-card" :class="`type-${course.typeId}`">
|
|
|
+ <view class="course-img-box">
|
|
|
+ <image :src="course.imgUrl" :alt="course.name" class="course-img" mode="aspectFill"></image>
|
|
|
+ <view class="course-tag" :style="{ backgroundColor: `var(--theme-color)` }">
|
|
|
+ <text>{{ course.tagText }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="course-stats">
|
|
|
+ <text><i class="mdi mdi-account"></i> {{ course.learnCount }}</text>
|
|
|
+ <text><i class="mdi mdi-star"></i> {{ course.rating }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="course-content">
|
|
|
+ <view class="course-title" :style="{ color: `var(--theme-color)` }">
|
|
|
+ <i :class="course.iconClass"></i>
|
|
|
+ <text>{{ course.name }}</text>
|
|
|
+ <text style="margin-left: 5px;">{{ course.cname }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="specialty-tags">
|
|
|
+ <view class="specialty-tag" v-for="(item, idx) in course.specialties" :key="idx">
|
|
|
+ <text>{{ item }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="course-footer">
|
|
|
+ <view class="course-price" :style="{ color: `var(--theme-color)` }">
|
|
|
+ <text>全科 ¥{{ course.price }}</text>
|
|
|
+ <text class="original-price">¥{{ course.originalPrice }}</text>
|
|
|
+ </view>
|
|
|
+ <button class="course-btn" :style="{ backgroundColor: `var(--theme-color)` }" @click="goToCourse(course,1)">
|
|
|
+ 立即报名
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ <view class="course-footer" v-if="course.price2">
|
|
|
+ <view class="course-price" :style="{ color: `var(--theme-color)` }">
|
|
|
+ <text>单科实务 ¥{{ course.price2 }}</text>
|
|
|
+ <text class="original-price">¥{{ course.originalPrice2 }}</text>
|
|
|
+ </view>
|
|
|
+ <button class="course-btn" :style="{ backgroundColor: `var(--theme-color)` }" @click="goToCourse(course,2)">
|
|
|
+ 立即报名
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 无匹配课程提示 -->
|
|
|
+ <view class="empty-col" v-if="filteredCourseList.length === 0">
|
|
|
+ <view class="empty-view">
|
|
|
+ <text class="empty-text">未找到匹配的课程，请尝试其他关键词</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 回到顶部按钮 -->
|
|
|
+ <view
|
|
|
+ class="back-to-top"
|
|
|
+ :class="{ visible: isScrolled }"
|
|
|
+ @click="backToTop"
|
|
|
+ >
|
|
|
+ <i class="mdi mdi-arrow-up"></i>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 滚动状态
|
|
|
+ isScrolled: false,
|
|
|
+ // 搜索关键词
|
|
|
+ searchKeyword: '',
|
|
|
+ // 选中的课程类型
|
|
|
+ selectedCourseType: '',
|
|
|
+ // picker索引
|
|
|
+ pickerIndex: 0,
|
|
|
+ // 轮播图数据（800:768比例）
|
|
|
+ bannerList: [],
|
|
|
+ // 课程类型列表
|
|
|
+ courseTypes: [
|
|
|
+ '一级建造师', '二级建造师', '监理工程师', '注册安全工程师',
|
|
|
+ // '水利质量检测员',
|
|
|
+ '中级经济师', '社会工作者（初级）',
|
|
|
+ '社会工作者（中级）',
|
|
|
+ // '社区工作者'
|
|
|
+ ],
|
|
|
+ // 课程数据
|
|
|
+ courseList: [
|
|
|
+ {
|
|
|
+ typeId: 1,
|
|
|
+ name: '一级建造师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require("@/static/topic/course_yj.png"),
|
|
|
+ bimgUrl: require("@/static/topic/banner_yj.png"),
|
|
|
+ topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1813',
|
|
|
+ topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1813',
|
|
|
+ topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1813',
|
|
|
+ tagText: '热门',
|
|
|
+ learnCount: '12.8万人学习',
|
|
|
+ rating: '98%好评',
|
|
|
+ price: 3580,
|
|
|
+ originalPrice: 4380,
|
|
|
+ price2: 1080,
|
|
|
+ originalPrice2: 1980,
|
|
|
+ iconClass: 'mdi mdi-account-hard-hat',
|
|
|
+ specialties: ['管理', '法规', '经济', '建筑', '市政', '机电', '公路', '水利', '港口与航道']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 2,
|
|
|
+ name: '二级建造师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require("@/static/topic/course_ej.png"),
|
|
|
+ bimgUrl: require("@/static/topic/banner_ej.png"),
|
|
|
+ topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1814',
|
|
|
+ topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1814',
|
|
|
+ topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1814',
|
|
|
+ tagText: '推荐',
|
|
|
+ learnCount: '15.6万人学习',
|
|
|
+ rating: '97%好评',
|
|
|
+ price: 2280,
|
|
|
+ originalPrice: 3280,
|
|
|
+ price2: 980,
|
|
|
+ originalPrice2: 1680,
|
|
|
+ iconClass: 'mdi mdi-account-tie',
|
|
|
+ specialties: ['管理', '法规', '建筑', '市政', '机电', '公路', '水利']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 3,
|
|
|
+ name: '监理工程师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require("@/static/topic/course_jl.png"),
|
|
|
+ bimgUrl: require("@/static/topic/banner_jl.png"),
|
|
|
+ topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1818',
|
|
|
+ topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1818',
|
|
|
+ topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1818',
|
|
|
+ tagText: '精品',
|
|
|
+ learnCount: '8.2万人学习',
|
|
|
+ rating: '96%好评',
|
|
|
+ price: 2580,
|
|
|
+ originalPrice: 3380,
|
|
|
+ price2: 1080,
|
|
|
+ originalPrice2: 1880,
|
|
|
+ iconClass: 'mdi mdi-clipboard-check',
|
|
|
+ specialties: ['管理', '概论', '土建三控', '土建案例', '交通三控', '交通案例', '水利三控', '水利案例']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 4,
|
|
|
+ name: '注册安全工程师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require("@/static/topic/course_aq.png"),
|
|
|
+ bimgUrl: require("@/static/topic/banner_aq.png"),
|
|
|
+ topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1815',
|
|
|
+ topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1815',
|
|
|
+ topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1815',
|
|
|
+ tagText: '必学',
|
|
|
+ learnCount: '9.5万人学习',
|
|
|
+ rating: '95%好评',
|
|
|
+ price: 3680,
|
|
|
+ originalPrice: 4580,
|
|
|
+ price2: 1280,
|
|
|
+ originalPrice2: 2080,
|
|
|
+ iconClass: 'mdi mdi-shield-check',
|
|
|
+ specialties: ['管理', '法规', '技术基础', '其他安全', '化工安全', '建筑施工安全', '矿山安全', '金属冶炼安全', '煤矿安全', '道路运输安全']
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // typeId: 5,
|
|
|
+ // name: '水利质量检测员',
|
|
|
+ // imgUrl: require("@/static/topic/course_sl.png"),
|
|
|
+ // tagText: '新课',
|
|
|
+ // learnCount: '4.3万人学习',
|
|
|
+ // rating: '99%好评',
|
|
|
+ // price: 2580,
|
|
|
+ // originalPrice: 3580,
|
|
|
+ // iconClass: 'mdi mdi-water',
|
|
|
+ // specialties: ['基础知识', '混凝土工程', '岩土工程', '金属结构', '机械电气', '量测']
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ typeId: 6,
|
|
|
+ name: '中级经济师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require("@/static/topic/course_jj.png"),
|
|
|
+ bimgUrl: require("@/static/topic/banner_jj.png"),
|
|
|
+ topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1812',
|
|
|
+ topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1812',
|
|
|
+ topath2:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1812',
|
|
|
+ tagText: '特惠',
|
|
|
+ learnCount: '10.1万人学习',
|
|
|
+ rating: '97%好评',
|
|
|
+ price: 2280,
|
|
|
+ originalPrice: 3380,
|
|
|
+ price2: 1280,
|
|
|
+ originalPrice2: 2080,
|
|
|
+ iconClass: 'mdi mdi-currency-cny',
|
|
|
+ specialties: ['经济基础', '工商管理', '人力资源', '金融专业', '财政税收', '建筑与房地产', '知识产权', '保险经济', '运输经济', '旅游经济', '农业经济']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 7,
|
|
|
+ name: '社会工作者（初级）',
|
|
|
+ cname:'通过无忧班',
|
|
|
+ imgUrl: require("@/static/topic/course_sg1.png"),
|
|
|
+ bimgUrl: require("@/static/topic/banner_sg1.png"),
|
|
|
+ topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1816',
|
|
|
+ topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1816',
|
|
|
+ tagText: '入门',
|
|
|
+ learnCount: '7.8万人学习',
|
|
|
+ rating: '98%好评',
|
|
|
+ price: 1280,
|
|
|
+ originalPrice: 2280,
|
|
|
+ iconClass: 'mdi mdi-humanitarian',
|
|
|
+ specialties: ['综合能力', '实务']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 8,
|
|
|
+ name: '社会工作者（中级）',
|
|
|
+ cname:'通过无忧班',
|
|
|
+ imgUrl: require("@/static/topic/course_sg2.png"),
|
|
|
+ bimgUrl: require("@/static/topic/banner_sg2.png"),
|
|
|
+ topath0:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1817',
|
|
|
+ topath1:'https://xh5.gdzckj.net/pages/course/index?educationId=589&projectId=946&businessId=1817',
|
|
|
+ tagText: '进阶',
|
|
|
+ learnCount: '6.5万人学习',
|
|
|
+ rating: '96%好评',
|
|
|
+ price: 1580,
|
|
|
+ originalPrice: 2580,
|
|
|
+ iconClass: 'mdi mdi-human-male-female',
|
|
|
+ specialties: ['综合能力', '法规与政策', '实务']
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // typeId: 9,
|
|
|
+ // name: '社区工作者',
|
|
|
+ // imgUrl: require("@/static/topic/course_sq.png"),
|
|
|
+ // tagText: '基础',
|
|
|
+ // learnCount: '5.7万人学习',
|
|
|
+ // rating: '99%好评',
|
|
|
+ // price: 1580,
|
|
|
+ // originalPrice: 2580,
|
|
|
+ // iconClass: 'mdi mdi-home-group',
|
|
|
+ // specialties: ['基础知识', '职业技能']
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ // 筛选后的课程列表
|
|
|
+ filteredCourseList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 初始化课程列表
|
|
|
+ this.filteredCourseList = [...this.courseList]
|
|
|
+ this.filteredCourseList.forEach(item=>{
|
|
|
+ if(item.bimgUrl){
|
|
|
+ this.bannerList.push(item);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log("as",this.bannerList)
|
|
|
+ // 监听滚动事件
|
|
|
+ uni.onWindowResize(this.handleScroll)
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 0
|
|
|
+ })
|
|
|
+ // 欢迎提示
|
|
|
+ // uni.showToast({
|
|
|
+ // title: '欢迎来到建工教育',
|
|
|
+ // icon: 'success'
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 监听页面滚动
|
|
|
+ // uni.onPageScroll((e) => {
|
|
|
+ // this.isScrolled = e.scrollTop > 100
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+ // 移除滚动监听
|
|
|
+ // uni.offPageScroll()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 处理滚动
|
|
|
+ handleScroll() {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ this.screenHeight = res.windowHeight
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 回到顶部
|
|
|
+ backToTop() {
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop: 0,
|
|
|
+ duration: 500
|
|
|
+ })
|
|
|
+ uni.showToast({
|
|
|
+ title: '已回到顶部',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 筛选课程
|
|
|
+ filterCourses() {
|
|
|
+ let result = [...this.courseList]
|
|
|
+
|
|
|
+ // 按类型筛选
|
|
|
+ if (this.selectedCourseType) {
|
|
|
+ result = result.filter(course => course.name === this.selectedCourseType)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 按关键词筛选
|
|
|
+ if (this.searchKeyword) {
|
|
|
+ const keyword = this.searchKeyword.toLowerCase()
|
|
|
+ result = result.filter(course => {
|
|
|
+ const nameMatch = course.name.toLowerCase().includes(keyword)
|
|
|
+ const specialtyMatch = course.specialties.some(s => s.toLowerCase().includes(keyword))
|
|
|
+ return nameMatch || specialtyMatch
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.filteredCourseList = result
|
|
|
+
|
|
|
+ // 无结果提示
|
|
|
+ if (this.searchKeyword && result.length === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '未找到匹配课程',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择课程类型
|
|
|
+ handleTypeChange(e) {
|
|
|
+ const index = e.detail.value
|
|
|
+ this.pickerIndex = index
|
|
|
+ this.selectedCourseType = index === 0 ? '' : this.courseTypes[index - 1]
|
|
|
+ this.filterCourses()
|
|
|
+ },
|
|
|
+ // 重置筛选
|
|
|
+ resetFilter() {
|
|
|
+ this.searchKeyword = ''
|
|
|
+ this.selectedCourseType = ''
|
|
|
+ this.pickerIndex = 0
|
|
|
+ this.filteredCourseList = [...this.courseList]
|
|
|
+ uni.showToast({
|
|
|
+ title: '筛选条件已重置',
|
|
|
+ icon: 'info'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 课程报名
|
|
|
+ goToCourse(item,type) {
|
|
|
+ // var url1=(type==1?item.topath1:type==2?item.topath2:item.topath0).substring(22);
|
|
|
+ // console.log("asd",url1)
|
|
|
+ // uni.redirectTo({
|
|
|
+ // url:(type==1?item.topath1:type==2?item.topath2:item.topath0).substring(22),
|
|
|
+ // })
|
|
|
+ window.open(type==1?item.topath1:type==2?item.topath2:item.topath0, "_self");
|
|
|
+ },
|
|
|
+ // 登录/注册
|
|
|
+ gotoLogin() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '登录/注册功能开发中',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 我的课程
|
|
|
+ gotoMyCourse() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '我的课程功能开发中',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ /* 顶部轮播Banner */
|
|
|
+ .banner {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ /* 按800:768比例计算高度（宽度100%，高度=宽度*768/800） */
|
|
|
+ height: 0;
|
|
|
+ padding-bottom: 96%; /* 768/800 = 0.96 = 96% */
|
|
|
+ }
|
|
|
+ .banner-swiper {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .banner-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+/* 课程容器 */
|
|
|
+.course-container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 20px 50px;
|
|
|
+
|
|
|
+}
|
|
|
+.titles {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .titles .timg {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+ .titles .scheme {
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #363543;
|
|
|
+ margin: 0px 40rpx;
|
|
|
+ }
|
|
|
+ .min_title {
|
|
|
+ text-align: center;
|
|
|
+ margin: 13rpx 0px 50rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #363543;
|
|
|
+ }
|
|
|
+.course-row {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 24px;
|
|
|
+}
|
|
|
+.course-col {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 300px;
|
|
|
+ max-width: calc(33.333% - 16px);
|
|
|
+}
|
|
|
+.empty-col {
|
|
|
+ width: 100%;
|
|
|
+ padding: 50rpx 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.empty-view {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.empty-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.empty-text {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+/* 课程卡片 */
|
|
|
+.course-card {
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+ margin-bottom: 24px;
|
|
|
+ background-color: white;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+.course-card:hover {
|
|
|
+ transform: translateY(-8px);
|
|
|
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
|
|
|
+}
|
|
|
+.course-img-box {
|
|
|
+ height: 180px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.course-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ transition: all 0.6s ease;
|
|
|
+}
|
|
|
+.course-card:hover .course-img {
|
|
|
+ transform: scale(1.08);
|
|
|
+}
|
|
|
+.course-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: 15px;
|
|
|
+ z-index: 2;
|
|
|
+ color: white;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.course-stats {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 15px;
|
|
|
+ background: linear-gradient(transparent, rgba(0,0,0,0.6));
|
|
|
+ color: white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 课程内容 */
|
|
|
+.course-content {
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.course-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.course-title i {
|
|
|
+ margin-right: 8px;
|
|
|
+ font-size: 22px;
|
|
|
+}
|
|
|
+.specialty-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 15px 0;
|
|
|
+}
|
|
|
+.specialty-tag {
|
|
|
+ margin: 0 8px 8px 0;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #f0f2f5;
|
|
|
+ color: #666;
|
|
|
+ font-size: 12px;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+.specialty-tag:hover {
|
|
|
+ background-color: var(--theme-color);
|
|
|
+ color: white;
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+.course-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+ padding-top: 15px;
|
|
|
+ border-top: 1px solid #f0f2f5;
|
|
|
+}
|
|
|
+.course-price {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.original-price {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-left: 8px;
|
|
|
+ text-decoration: line-through;
|
|
|
+}
|
|
|
+.course-btn {
|
|
|
+ background-color: var(--theme-color);
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ padding: 0rpx 16rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+.course-btn:hover {
|
|
|
+ opacity: 0.9;
|
|
|
+ transform: translateY(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+/* 回到顶部 */
|
|
|
+.back-to-top {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 30px;
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #1989fa;
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 4px 12px rgba(25, 137, 250, 0.3);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ opacity: 0;
|
|
|
+ visibility: hidden;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+.back-to-top.visible {
|
|
|
+ opacity: 1;
|
|
|
+ visibility: visible;
|
|
|
+}
|
|
|
+.back-to-top:hover {
|
|
|
+ background-color: #0e6ecd;
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow: 0 6px 16px rgba(25, 137, 250, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 响应式适配 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .banner-title {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ .course-col {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ .filter-row {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .filter-col-10, .filter-col-8, .filter-col-6 {
|
|
|
+ flex: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .footer-content {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ .footer-col {
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+ /* 全局样式 */
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ scroll-behavior: smooth;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 课程类型主题色 */
|
|
|
+ .type-1 { --theme-color: #1989fa; }
|
|
|
+ .type-2 { --theme-color: #52c41a; }
|
|
|
+ .type-3 { --theme-color: #faad14; }
|
|
|
+ .type-4 { --theme-color: #f5222d; }
|
|
|
+ .type-5 { --theme-color: #40a9ff; }
|
|
|
+ .type-6 { --theme-color: #722ed1; }
|
|
|
+ .type-7 { --theme-color: #13c2c2; }
|
|
|
+ .type-8 { --theme-color: #fa8c16; }
|
|
|
+ .type-9 { --theme-color: #eb2f96; }
|
|
|
+
|
|
|
+ /* 引入MDI图标 */
|
|
|
+ @import url('https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css');
|
|
|
+</style>
|
caichengyu
