|
|
@@ -0,0 +1,977 @@
|
|
|
+<template>
|
|
|
+ <div class="goods_topic">
|
|
|
+ <Header></Header>
|
|
|
+ <section class="section">
|
|
|
+ <div class="section__header">
|
|
|
+ <div class="container">
|
|
|
+ <el-breadcrumb separator="/">
|
|
|
+ <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>商品专题</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mains">
|
|
|
+ <div class="content_up">
|
|
|
+ <div class="banner_one">
|
|
|
+ <div class="one_bg">
|
|
|
+ <img class="bgimg" src="@/assets/topic/one_bg.png" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="banner_two">
|
|
|
+ <el-carousel indicator-position="none" :interval="4000" type="card" height="556px">
|
|
|
+ <el-carousel-item v-for="(item, index) in filteredCourseList2" :key="index">
|
|
|
+ <div class="carousel_box">
|
|
|
+ <!-- <div v-for="(it, ix) in item" class="carousel_li" :key="ix"> -->
|
|
|
+ <img :src="item.bimgUrl" @click="goToCourse(item,0)" alt="" />
|
|
|
+
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="topic_detail">
|
|
|
+ <div class="titles">
|
|
|
+ <img src="@/assets/topic/icon_left.png" alt="" />
|
|
|
+ <span class="scheme">进击取证</span>
|
|
|
+ <img src="@/assets/topic/icon_right.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="min_title">一站式解决方案，领跑新考季</div>
|
|
|
+ <div class="details">
|
|
|
+ <!-- 课程主体内容 - Vue数据驱动渲染 -->
|
|
|
+ <div class="course-container">
|
|
|
+ <el-row :gutter="24">
|
|
|
+ <!-- 动态渲染课程卡片 -->
|
|
|
+ <el-col
|
|
|
+ v-for="(course, index) in filteredCourseList"
|
|
|
+ :key="index"
|
|
|
+ :xs="24"
|
|
|
+ :sm="12"
|
|
|
+ :lg="8">
|
|
|
+ <el-card :class="['course-card', `type-${course.typeId}`]">
|
|
|
+ <div class="course-img-box">
|
|
|
+ <img :src="course.imgUrl" :alt="course.name" class="course-img">
|
|
|
+ <el-tag :class="['course-tag']" :type="course.tagType">{{ course.tagText }}</el-tag>
|
|
|
+ <div class="course-stats">
|
|
|
+ <span><i class="el-icon-user"></i> {{ course.learnCount }}</span>
|
|
|
+ <span><i class="el-icon-star-on"></i> {{ course.rating }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="course-content">
|
|
|
+ <div class="course-title">
|
|
|
+ <i :class="course.iconClass"></i>{{ course.name }}
|
|
|
+ <p style="margin-left: 5px;">{{ course.cname }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="specialty-tags">
|
|
|
+ <span class="specialty-tag" v-for="(item, idx) in course.specialties" :key="idx">{{ item }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="course-footer">
|
|
|
+ <div class="course-price">
|
|
|
+ 全科 ¥{{ course.price }} <del>¥{{ course.originalPrice }}</del>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" class="course-btn" @click="goToCourse(course,1)">
|
|
|
+ 立即报名
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="course-footer" v-if="course.price2">
|
|
|
+ <div class="course-price">
|
|
|
+ 单科实务 ¥{{ course.price2 }} <del>¥{{ course.originalPrice2 }}</del>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" class="course-btn" @click="goToCourse(course,2)">
|
|
|
+ 立即报名
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 无匹配课程提示 -->
|
|
|
+ <el-col v-if="filteredCourseList.length === 0" :span="24" style="text-align: center; padding: 50px 0;">
|
|
|
+ <el-empty description="未找到匹配的课程，请尝试其他关键词"></el-empty>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <buy-dialog :buyModal.sync="buyModal" :topicId="topicId" :subjectType="subjectType" :type="type"></buy-dialog>
|
|
|
+ <ToolBar></ToolBar>
|
|
|
+ <Footer></Footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Header from "@/components/header/index.vue";
|
|
|
+import Footer from "@/components/footer/index.vue";
|
|
|
+import ToolBar from "@/components/toolbar/index.vue";
|
|
|
+import buyDialog from './components/buyDialog.vue';
|
|
|
+import catalogue from './components/catalogue.vue';
|
|
|
+import { swiper, swiperSlide } from "vue-awesome-swiper";
|
|
|
+import "swiper/swiper-bundle.css";
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ components: { Header, Footer, ToolBar, buyDialog, catalogue, swiper,
|
|
|
+ swiperSlide},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ buyModal: false,
|
|
|
+ topicId: '',
|
|
|
+ subjectType: 0,
|
|
|
+ type: 0,
|
|
|
+ goodsInfo: {},
|
|
|
+ // goodsData: {},
|
|
|
+ vid: '',
|
|
|
+ vidzb: '',
|
|
|
+ vodPlayerJs: "https://player.polyv.net/script/player.js",
|
|
|
+ playerJs: "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
|
|
|
+ uidzb: "egsxlptzdq",
|
|
|
+ menuTab: [
|
|
|
+ {
|
|
|
+ name: "1",
|
|
|
+ label: "章节目录",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ courseTabIndex: "1",
|
|
|
+ courseId: "",
|
|
|
+ goodsId: "",
|
|
|
+ gradeId: "",
|
|
|
+ orderGoodsId: "",
|
|
|
+ needOpen: true, //是否需要一进来展开第一章节
|
|
|
+ menuIndex: [], //需要展开的章节索引值
|
|
|
+ courseList: [],
|
|
|
+ s_courseList: [],
|
|
|
+ goodsAuditionConfigIdList: [],
|
|
|
+ listenConfigList: [],
|
|
|
+ courserIndex: 0,
|
|
|
+ goodsDetail: {},
|
|
|
+ goodsExamConfig: [],
|
|
|
+ subList: [],
|
|
|
+ subIndex: 0,
|
|
|
+ typeList: [],
|
|
|
+ slideList: [],
|
|
|
+ showMeun: false,
|
|
|
+ swiperOptions: {
|
|
|
+ bannerList: [],
|
|
|
+ loop: true,
|
|
|
+ observer: true,
|
|
|
+ observeParents: true,
|
|
|
+ speed: 2000,
|
|
|
+ autoplayDisableOnInteraction: false,
|
|
|
+ autoplayStopOnLast: false,
|
|
|
+ autoplay: {
|
|
|
+ delay: 1000,
|
|
|
+ disableOnInteraction: false
|
|
|
+ },
|
|
|
+ // 显示分页
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ clickable: true //允许分页点击跳转
|
|
|
+ },
|
|
|
+ // 设置点击箭头
|
|
|
+ navigation: {
|
|
|
+ nextEl: ".swiper-button-next",
|
|
|
+ prevEl: ".swiper-button-prev"
|
|
|
+ }
|
|
|
+ }, //轮播
|
|
|
+ courseTypes: [
|
|
|
+ '一级建造师', '二级建造师', '监理工程师', '注册安全工程师',
|
|
|
+ // '水利质量检测员',
|
|
|
+ '中级经济师', '社会工作者（初级）',
|
|
|
+ '社会工作者（中级）'
|
|
|
+ // , '社区工作者'
|
|
|
+ ],
|
|
|
+ // 完整课程数据（Vue核心数据）
|
|
|
+ courseList: [
|
|
|
+ {
|
|
|
+ typeId: 1,
|
|
|
+ name: '一级建造师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require('@/assets/topic/course_yj.png'),
|
|
|
+ bimgUrl: require('@/assets/topic/banner_yj.png'),
|
|
|
+ topath0:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=946&businessId=1813&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath1:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=946&businessId=1813&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath2:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=946&businessId=1813&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ tagType: 'danger',
|
|
|
+ tagText: '热门',
|
|
|
+ learnCount: '12.8万人学习',
|
|
|
+ rating: '98%好评',
|
|
|
+ price: 3580,
|
|
|
+ originalPrice: 4380,
|
|
|
+ price2: 1080,
|
|
|
+ originalPrice2: 1980,
|
|
|
+ url:'',
|
|
|
+ url2:'',
|
|
|
+ iconClass: 'mdi mdi-account-hard-hat',
|
|
|
+ specialties: ['管理', '法规', '经济', '建筑', '市政', '机电', '公路', '水利', '港口与航道']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 2,
|
|
|
+ name: '二级建造师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require('@/assets/topic/course_ej.png'),
|
|
|
+ bimgUrl: require('@/assets/topic/banner_ej.png'),
|
|
|
+ topath0:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=946&businessId=1814&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath1:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=946&businessId=1814&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath2:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=946&businessId=1814&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ tagType: 'success',
|
|
|
+ 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('@/assets/topic/course_jl.png'),
|
|
|
+ bimgUrl: require('@/assets/topic/banner_jl.png'),
|
|
|
+ topath0:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=949&businessId=1818&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath1:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=949&businessId=1818&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath2:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=949&businessId=1818&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ tagType: 'warning',
|
|
|
+ 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('@/assets/topic/course_aq.png'),
|
|
|
+ bimgUrl: require('@/assets/topic/banner_aq.png'),
|
|
|
+ topath0:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=947&businessId=1815&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath1:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=947&businessId=1815&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath2:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=947&businessId=1815&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ tagType: 'danger',
|
|
|
+ tagText: '必学',
|
|
|
+ learnCount: '9.5万人学习',
|
|
|
+ rating: '95%好评',
|
|
|
+ price: 3680,
|
|
|
+ originalPrice: 4580,
|
|
|
+ price2: 1280,
|
|
|
+ originalPrice2: 2080,
|
|
|
+ iconClass: 'mdi mdi-shield-check',
|
|
|
+ specialties: ['管理', '法规', '技术基础', '其他安全', '化工安全', '建筑施工安全', '矿山安全', '金属冶炼安全', '煤矿安全', '道路运输安全']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 7,
|
|
|
+ name: '社会工作者(初级)',
|
|
|
+ cname:'通过无忧班',
|
|
|
+ imgUrl: require('@/assets/topic/course_sg1.png'),
|
|
|
+ bimgUrl: require('@/assets/topic/banner_sg1.png'),
|
|
|
+ topath0:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=948&businessId=1816&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath1:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=948&businessId=1816&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ tagType: 'success',
|
|
|
+ tagText: '入门',
|
|
|
+ learnCount: '7.8万人学习',
|
|
|
+ rating: '98%好评',
|
|
|
+ price: 1280,
|
|
|
+ originalPrice: 2280,
|
|
|
+ iconClass: 'mdi mdi-humanitarian',
|
|
|
+ specialties: ['综合能力', '实务']
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // typeId: 5,
|
|
|
+ // name: '水利质量检测员',
|
|
|
+ // imgUrl: require('@/assets/topic/course_sl.png'),
|
|
|
+ // bimgUrl: "",
|
|
|
+ // tagType: 'info',
|
|
|
+ // tagText: '新课',
|
|
|
+ // learnCount: '4.3万人学习',
|
|
|
+ // rating: '99%好评',
|
|
|
+ // price: 2580,
|
|
|
+ // originalPrice: 3580,
|
|
|
+ // iconClass: 'mdi mdi-water',
|
|
|
+ // specialties: ['基础知识', '混凝土工程', '岩土工程', '金属结构', '机械电气', '量测']
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ typeId: 6,
|
|
|
+ name: '中级经济师',
|
|
|
+ cname:'精英优享班',
|
|
|
+ imgUrl: require('@/assets/topic/course_jj.png'),
|
|
|
+ bimgUrl: require('@/assets/topic/banner_jj.png'),
|
|
|
+ topath0:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=945&businessId=1812&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath1:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=945&businessId=1812&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath2:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=945&businessId=1812&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ tagType: 'primary',
|
|
|
+ tagText: '特惠',
|
|
|
+ learnCount: '10.1万人学习',
|
|
|
+ rating: '97%好评',
|
|
|
+ price: 2280,
|
|
|
+ originalPrice: 3380,
|
|
|
+ price2: 1280,
|
|
|
+ originalPrice2: 2080,
|
|
|
+ iconClass: 'mdi mdi-currency-cny',
|
|
|
+ specialties: ['经济基础', '工商管理', '人力资源', '金融专业', '财政税收', '建筑与房地产', '知识产权', '保险经济', '运输经济', '旅游经济', '农业经济']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ typeId: 8,
|
|
|
+ name: '社会工作者(中级)',
|
|
|
+ cname:'通过无忧班',
|
|
|
+ imgUrl: require('@/assets/topic/course_sg2.png'),
|
|
|
+ bimgUrl: require('@/assets/topic/banner_sg2.png'),
|
|
|
+ topath0:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=948&businessId=1817&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ topath1:'https://xh.gdzckj.net/course-list?goodsName=&educationId=589&projectId=948&businessId=1817&subjectId=&sortType=1&showStatus=1&goodsStatus=1',
|
|
|
+ tagType: 'warning',
|
|
|
+ tagText: '进阶',
|
|
|
+ learnCount: '6.5万人学习',
|
|
|
+ rating: '96%好评',
|
|
|
+ price: 1580,
|
|
|
+ originalPrice: 2580,
|
|
|
+ iconClass: 'mdi mdi-human-male-female',
|
|
|
+ specialties: ['综合能力', '法规与政策', '实务']
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // typeId: 9,
|
|
|
+ // name: '社区工作者',
|
|
|
+ // imgUrl: require('@/assets/topic/course_sq2.png'),
|
|
|
+ // bimgUrl: "",
|
|
|
+ // tagType: 'danger',
|
|
|
+ // tagText: '基础',
|
|
|
+ // learnCount: '5.7万人学习',
|
|
|
+ // rating: '99%好评',
|
|
|
+ // price: 1580,
|
|
|
+ // originalPrice: 2580,
|
|
|
+ // iconClass: 'mdi mdi-home-group',
|
|
|
+ // specialties: ['基础知识', '职业技能']
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ // 筛选后的课程列表
|
|
|
+ filteredCourseList: [],
|
|
|
+ filteredCourseList2:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 初始化显示所有课程
|
|
|
+ this.filteredCourseList = [...this.courseList];
|
|
|
+ this.filteredCourseList.forEach(item=>{
|
|
|
+ if(item.bimgUrl){
|
|
|
+ this.filteredCourseList2.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // var i=0;
|
|
|
+ // var arr=[];
|
|
|
+ // this.filteredCourseList.forEach(item=>{
|
|
|
+ // if(item.bimgUrl){
|
|
|
+ // if(i==0)
|
|
|
+ // {
|
|
|
+ // arr.push(item);
|
|
|
+ // i=1;
|
|
|
+ // }
|
|
|
+ // else{
|
|
|
+ // arr.push(item);
|
|
|
+ // i=0;
|
|
|
+ // this.filteredCourseList2.push(arr);
|
|
|
+ // arr=[];
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // if(i==1){
|
|
|
+ // this.filteredCourseList2.push(arr);
|
|
|
+ // }
|
|
|
+ console.log("as",this.filteredCourseList2)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ swiperJump(swiper) {
|
|
|
+ if (swiper.jumpType == 1) {
|
|
|
+ //无跳转
|
|
|
+ return;
|
|
|
+ } else if (swiper.jumpType == 2) {
|
|
|
+ //url
|
|
|
+ window.open(swiper.jumpUrl, "_blank");
|
|
|
+ } else if (swiper.jumpType == 3) {
|
|
|
+ //内部接口
|
|
|
+ this.$router.push({
|
|
|
+ path: swiper.jumpUrl
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+goToCourse(item,type){
|
|
|
+ window.open(type==1?item.topath1:type==2?item.topath2:item.topath0, "_self");
|
|
|
+},
|
|
|
+ goCourse(item) {
|
|
|
+ if (item.topicId) {
|
|
|
+ this.topicId = item.topicId
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$router.push({
|
|
|
+ path: "/course-list",
|
|
|
+ query: {
|
|
|
+ educationId: item.educationId ? item.educationId : item.id || "",
|
|
|
+ projectId: item.projectId || "",
|
|
|
+ businessId: item.educationId ? item.id : "",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getgoodsInfo() {
|
|
|
+ this.$axios({
|
|
|
+ url: `/app/common/get/goodsInfo/${this.topicId}`,
|
|
|
+ method: 'get',
|
|
|
+ noToken: true
|
|
|
+ }).then(async(res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.goodsInfo = res.data
|
|
|
+ this.goodsId = res.data.goodsId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ togoBuy(subjectType, type) {
|
|
|
+ this.subjectType = subjectType
|
|
|
+ this.type = type
|
|
|
+ this.buyModal = true
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.goods_topic {
|
|
|
+ width: 100%;
|
|
|
+ .section {
|
|
|
+ &__header {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .course_btns {
|
|
|
+ padding: 10px 10px 10px 115px;
|
|
|
+ .meun_btns {
|
|
|
+ width: 100px;
|
|
|
+ .btns {
|
|
|
+ width: 96px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ background: #3F8DFD;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .slide-list {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .slide-list {
|
|
|
+ display: none;
|
|
|
+ transition: all 0.3s;
|
|
|
+ width: 672px;
|
|
|
+ background: #F8F8F8;
|
|
|
+ position: absolute;
|
|
|
+ top: 163px;
|
|
|
+ left: 115px;
|
|
|
+ padding-left: 24px;
|
|
|
+ z-index: 10;
|
|
|
+ border-radius: 4px;
|
|
|
+ &__item {
|
|
|
+ min-height: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+
|
|
|
+ &:nth-last-of-type(1) {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #fff;
|
|
|
+ width: 120px;
|
|
|
+ height: 28px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ border-radius: 14px;
|
|
|
+ background: #3f8dfd;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ li {
|
|
|
+ margin: 9px 24px 9px 0;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mains {
|
|
|
+ // width: 100%;
|
|
|
+ // padding: 0px 116px;
|
|
|
+ .content_up {
|
|
|
+ width: 100%;
|
|
|
+ height: 836px;
|
|
|
+ .banner_one {
|
|
|
+ width: 100%;
|
|
|
+ height: 280px;
|
|
|
+ background: url('../../assets/topic/banner_one.png') center center no-repeat;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
+ .one_bg {
|
|
|
+ width: 1056px;
|
|
|
+ height: 280px;
|
|
|
+ margin: 0 auto;
|
|
|
+ >img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .banner_two {
|
|
|
+ width: 100%;
|
|
|
+ height: 556px;
|
|
|
+ padding: 0 320px;
|
|
|
+ background: url('../../assets/topic/banner_two.png') center center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .topic_detail {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ // height: 3444px;
|
|
|
+ // height: 3100px;
|
|
|
+ background: url('../../assets/topic/topic_bg.png') center center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .titles {
|
|
|
+ margin-top: 109px;
|
|
|
+ >img {
|
|
|
+ width: 32px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .scheme {
|
|
|
+ font-size: 48px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #363543;
|
|
|
+ margin: 0px 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .min_title {
|
|
|
+ margin: 13px 0px 50px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #363543;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .details {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: -20px;
|
|
|
+ .detail_one {
|
|
|
+ width: 358px;
|
|
|
+ height: 2753px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 20px;
|
|
|
+ @media screen and (max-width: 1370px){
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .deatil_titles {
|
|
|
+ width: 100%;
|
|
|
+ height: 110px;
|
|
|
+ line-height: 110px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 8px 8px 0px 0px;
|
|
|
+ background: linear-gradient(45deg, #71A9F6 0%, #1658DA 100%);
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ &.two {
|
|
|
+ background: linear-gradient(45deg, #FE8D6D 0%, #ED3531 100%);
|
|
|
+ }
|
|
|
+ &.three {
|
|
|
+ background: linear-gradient(45deg, #E3BC79 0%, #BF7D2E 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail_mid {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0px 24px;
|
|
|
+
|
|
|
+ .mid_item {
|
|
|
+ width: 100%;
|
|
|
+ height: 74px;
|
|
|
+ border-bottom: 1px solid #EAEAEA;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .lefts {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #363543;
|
|
|
+ }
|
|
|
+ .rights {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FC3F3F;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .right_buy {
|
|
|
+ width: 76px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ background: #FC3F3F;
|
|
|
+ border-radius: 50px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .down_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 2369px;
|
|
|
+ >.l_img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+ /* 顶部轮播Banner - 800:768比例 */
|
|
|
+ .swiper{
|
|
|
+ width: 600px;
|
|
|
+ height: 556px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ .swiper-slide {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 600px;
|
|
|
+ height: 556px;
|
|
|
+margin: auto;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-pagination {
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 24px;
|
|
|
+
|
|
|
+ /deep/ .swiper-pagination-bullet {
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
+
|
|
|
+ &-active {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+ .banner {
|
|
|
+ // position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ /* 核心：800:768比例适配 (768/800=96%) */
|
|
|
+ width: 70%;
|
|
|
+ height: 556px;
|
|
|
+ padding-bottom: 96%;
|
|
|
+ }
|
|
|
+ /* Element UI轮播容器 */
|
|
|
+ .el-carousel {
|
|
|
+ // position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ // width: 580px;
|
|
|
+ height: 100%;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ ::deep .el-carousel__container {
|
|
|
+ height: 100% !important;
|
|
|
+ position:initial !important;
|
|
|
+ }
|
|
|
+ .el-carousel-item {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .banner-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ /* 叠加的文字内容层 */
|
|
|
+ .banner-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 10;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3); /* 半透明遮罩提升文字可读性 */
|
|
|
+ }
|
|
|
+ .banner h1 {
|
|
|
+ font-size: 42px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ text-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .banner p {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ opacity: 0.9;
|
|
|
+ color: white;
|
|
|
+ text-shadow: 0 1px 5px rgba(0,0,0,0.5);
|
|
|
+ }
|
|
|
+ .banner-wave {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f5f7fa' fill-opacity='1' d='M0,192L48,186.7C96,181,192,171,288,181.3C384,192,480,224,576,218.7C672,213,768,171,864,149.3C960,128,1056,128,1152,149.3C1248,171,1344,213,1392,234.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+ /* 课程容器 */
|
|
|
+ .course-container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 20px 50px;
|
|
|
+ }
|
|
|
+ /* 课程卡片样式 */
|
|
|
+ .course-card {
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+ margin-bottom: 24px;
|
|
|
+ border: none;
|
|
|
+ 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%;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: all 0.6s ease;
|
|
|
+ }
|
|
|
+ .course-card:hover .course-img {
|
|
|
+ transform: scale(1.08);
|
|
|
+ }
|
|
|
+ .course-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ left: 10px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ /* 课程内容区域 */
|
|
|
+ .course-content {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .course-title p {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ /* 不同课程类型的主题色 */
|
|
|
+ .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; } /* 社区工作者-粉色 */
|
|
|
+
|
|
|
+ .course-title { color: var(--theme-color); }
|
|
|
+ // .course-tag { background-color: var(--theme-color); }
|
|
|
+
|
|
|
+ /* 专业标签样式 */
|
|
|
+ .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;
|
|
|
+ color: var(--theme-color);
|
|
|
+ }
|
|
|
+ .course-price del {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ font-weight: normal;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ .course-btn {
|
|
|
+ background-color: var(--theme-color);
|
|
|
+ border-color: var(--theme-color);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+ .course-btn:hover {
|
|
|
+ background-color: var(--theme-color);
|
|
|
+ opacity: 0.9;
|
|
|
+ transform: translateY(-2px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .carousel_box {
|
|
|
+ width: 1350px;
|
|
|
+ margin: 0px auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ & > .carousel_li {
|
|
|
+ width: 602px;
|
|
|
+ height: 556px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ overflow: hidden;
|
|
|
+ &:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+ & > .header_teacher {
|
|
|
+ height: 124px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ & > img {
|
|
|
+ width: 602px;
|
|
|
+ height: 556px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ & > .r {
|
|
|
+ flex: 1;
|
|
|
+ h3 {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .content_teacher {
|
|
|
+ padding: 14px;
|
|
|
+ height: 1px;
|
|
|
+ flex: 1;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgb(51, 149, 255);
|
|
|
+ li {
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > .carousel_img {
|
|
|
+ border: 1px solid #eee;
|
|
|
+ height: 602px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.carousel_hover:hover {
|
|
|
+ border-color: rgb(0, 122, 255) !important;
|
|
|
+}
|
|
|
+</style>
|
caichengyu
