mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 02:46:44 +08:00
3013 lines
84 KiB
Vue
3013 lines
84 KiB
Vue
<template>
|
||
<div>
|
||
<div class="course-banner">
|
||
<portal-header
|
||
current="index"
|
||
textColor="#000000"
|
||
style="z-index: 999; position: relative"
|
||
@showClass="showClass"
|
||
></portal-header>
|
||
<div id="container" style="z-index: 99" v-if="resonimg.length == 1">
|
||
<!-- 当轮播图等于一张时 -->
|
||
<swiper :options="swiperOptiontwo">
|
||
<swiper-slide
|
||
style="margin: 0 auto"
|
||
v-for="(item, idx) in resonimg"
|
||
:key="'a' + idx"
|
||
class="swiper-slide games pointer"
|
||
@click.native="banJump(item)"
|
||
>
|
||
<div
|
||
class="bannbox"
|
||
:style="{
|
||
background: `url(${
|
||
fileBaseUrl + item.image
|
||
}) no-repeat 100% / 100%`,
|
||
}"
|
||
></div>
|
||
<img
|
||
class="banner-img"
|
||
style="margin: 0 auto"
|
||
:src="fileBaseUrl + item.image"
|
||
alt=""
|
||
/>
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<div id="container" style="z-index: 99" v-else>
|
||
<swiper
|
||
:options="swiperOption"
|
||
ref="mySwiper"
|
||
v-if="resonimg.length > 1"
|
||
>
|
||
<swiper-slide
|
||
style="margin: 0 auto"
|
||
v-for="(item, idx) in resonimg"
|
||
:key="'b' + idx"
|
||
class="swiper-slide games pointer"
|
||
@click.native="banJump(item)"
|
||
>
|
||
<div
|
||
class="bannbox"
|
||
:style="{
|
||
background: `url(${
|
||
fileBaseUrl + item.image
|
||
}) no-repeat 100% / 100%`,
|
||
}"
|
||
></div>
|
||
<img
|
||
class="banner-img"
|
||
style="margin: 0 auto"
|
||
:src="fileBaseUrl + item.image"
|
||
alt=""
|
||
/>
|
||
</swiper-slide>
|
||
<div class="swiper-pagination" slot="pagination"></div>
|
||
<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
|
||
</swiper>
|
||
</div>
|
||
|
||
<div class="personal-panel">
|
||
<div class="personal-img">
|
||
<author-img
|
||
width="68px"
|
||
height="68px"
|
||
:avatar="userInfo.avatar"
|
||
:aid="userInfo.aid"
|
||
:noJump="false"
|
||
:sex="userInfo.sex"
|
||
></author-img>
|
||
|
||
<!-- {{ userInfo.avatar }} -->
|
||
</div>
|
||
<!-- <img style="width:68px;height:68px" src="/images/Avatarman.png" alt=""> -->
|
||
<p class="personal-name">
|
||
{{ userInfo.name }} {{ userInfo.userNo }}
|
||
<span class="grade">{{ userData.level }}</span>
|
||
</p>
|
||
|
||
<p class="personal-info">
|
||
{{ cutOrgNamePath(userInfo.departFullName) }}
|
||
</p>
|
||
<a href="uc/study/task">
|
||
<div class="personal-box" style="margin-bottom: 10px">
|
||
<span>学习任务</span>
|
||
<span v-if="studyTaskCount == 0" style="display: flex">
|
||
暂无任务
|
||
<div class="tobe-icon">
|
||
<img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt="" />
|
||
</div>
|
||
</span>
|
||
<span v-else style="display: flex"
|
||
>{{ studyTaskCount ? studyTaskCount : 0 }}个待学习
|
||
<div class="tobe-icon">
|
||
<img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt="" />
|
||
</div>
|
||
</span>
|
||
<!-- <img class="personal-box-img" :src="`${webBaseUrl}/images/homeWu/agency.png`" alt="" srcset=""> -->
|
||
</div>
|
||
</a>
|
||
<div class="last-study-info">
|
||
<div
|
||
class="one-line-ellipsis"
|
||
style="color: #333; font-size: 16px"
|
||
v-if="overlayShow"
|
||
>
|
||
<router-link :to="'/course/studyindex?id=' + lastStudy.courseId">
|
||
<img
|
||
class="Recent"
|
||
:src="`${webBaseUrl}/images/Recent.png`"
|
||
alt=""
|
||
/>
|
||
最近学习： {{ lastStudy.courseName }}
|
||
</router-link>
|
||
</div>
|
||
<!-- <div class="tobe-icon">
|
||
<img :src="`${webBaseUrl}/images/homeWu/Pending.png`" alt="">
|
||
</div> -->
|
||
</div>
|
||
<ul class="personal-ul">
|
||
<li>
|
||
<!-- <router-link to="/user/ranking"> -->
|
||
<span class="label">累计学习</span>
|
||
<p>
|
||
<span>{{ userData.totalStudyHour }}</span
|
||
>小时
|
||
</p>
|
||
<!-- </router-link> -->
|
||
</li>
|
||
<!-- <li>
|
||
<span class="label">经验值等级</span>
|
||
<p><span>{{userData.level}}</span></p>
|
||
</li> -->
|
||
<li>
|
||
<router-link @click.native="setCurIdentity(1)" to="/user/ucurrency">
|
||
<span class="label">我的U币</span>
|
||
<p>
|
||
<span>{{ userData.uvalue > 0 ? userData.uvalue : 0 }}</span
|
||
>个
|
||
</p>
|
||
</router-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="xindex-content">
|
||
<!-- 推荐课程 -->
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main">
|
||
<!--内容块-->
|
||
<div class="modules-title xindex-main">
|
||
<span class="modules-text">推荐课程</span>
|
||
<span class="quyer-tag">
|
||
<a
|
||
:class="courseList.orderType == 2 ? 'current' : ''"
|
||
@click="orderTypeFilter(2)"
|
||
>最热</a
|
||
>
|
||
<a
|
||
:class="courseList.orderType == 1 ? 'current' : ''"
|
||
@click="orderTypeFilter(1)"
|
||
>最新</a
|
||
>
|
||
<span @click="uOnClick" class="Uxtext" style="">
|
||
U选小课堂
|
||
<span class="uxicon">
|
||
<svg-icon icon-class="hot" style="font-size: 22px"></svg-icon>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<span class="more">
|
||
<router-link to="/course">查看更多>></router-link>
|
||
</span>
|
||
</div>
|
||
<div class="modules-list">
|
||
<!-- 一个固定内容 -->
|
||
<!-- <div class="xindex-course">
|
||
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
|
||
<div style="border-radius: 4px;" class="xindex-course-image">
|
||
<el-image style="border-radius: 4px;" class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
|
||
<span class="course-type">录播课</span>
|
||
</div>
|
||
<div style="display:flex">
|
||
<div style="flex:80%" title="高效谈判系列课" class="course-title portal-title-tow two-line-ellipsis">高效谈判系列课</div>
|
||
<div >
|
||
<svg-icon style="font-size: 32px;margin-top: 8px;" icon-class="collectedCourse"></svg-icon>
|
||
</div>
|
||
</div>
|
||
<div class="course-author">
|
||
<div>
|
||
<span class="study-num">3000+人学习</span>
|
||
</div>
|
||
<div style="display:flex">
|
||
<div style="padding-left:15px">
|
||
<div>
|
||
<span class="course-score-value">5.0分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div> -->
|
||
<!--内容列表内容-->
|
||
<div
|
||
v-for="(course, ccidx) in courseComputedOneList"
|
||
:key="'cc' + ccidx"
|
||
class="xindex-course"
|
||
style="position: relative"
|
||
>
|
||
<div style="position: absolute; right: 25px; bottom: 72px">
|
||
<interactBar
|
||
nodeWidth="20px"
|
||
:courseExclusive="true"
|
||
:type="1"
|
||
:data="course"
|
||
:comments="false"
|
||
:praises="false"
|
||
:shares="false"
|
||
:views="false"
|
||
>
|
||
</interactBar>
|
||
<!-- <svg-icon style="font-size: 32px;margin-top: -5px;" icon-class="collectedCourse"></svg-icon> -->
|
||
</div>
|
||
<a @click="toCourseDetail(course)">
|
||
<div class="xindex-course-image">
|
||
<course-image :course="course"></course-image>
|
||
<span v-if="course.type == 20 || 10" class="course-type"
|
||
>录播课</span
|
||
>
|
||
</div>
|
||
<div
|
||
style="width: 80%"
|
||
:title="course.name"
|
||
class="course-title portal-title-tow two-line-ellipsis"
|
||
>
|
||
{{ course.name }}
|
||
</div>
|
||
<div class="course-author">
|
||
<div class="course-author-left">
|
||
{{ course.authorInfo.name }}
|
||
|
||
<span class="study-num"
|
||
>{{ formatNum(course.studys) }}人学习</span
|
||
>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div v-if="course.score">
|
||
<span class="course-score-value" style="margin-left: 10px"
|
||
>{{ toScore(course.score) }}分</span
|
||
>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<!-- 推荐课程内容列表 -->
|
||
<div
|
||
v-for="(course, ccidx) in recommendedList.list"
|
||
:key="'rr' + ccidx"
|
||
class="xindex-course"
|
||
style="position: relative"
|
||
>
|
||
<div style="position: absolute; right: 25px; bottom: 72px">
|
||
<interactBar
|
||
nodeWidth="20px"
|
||
:courseExclusive="true"
|
||
:type="1"
|
||
:data="course"
|
||
:comments="false"
|
||
:praises="false"
|
||
:shares="false"
|
||
:views="false"
|
||
>
|
||
</interactBar>
|
||
</div>
|
||
<a @click="toCourseDetail(course)">
|
||
<div class="xindex-course-image">
|
||
<course-image :course="course"></course-image>
|
||
<span v-if="course.type == 20 || 10" class="course-type"
|
||
>录播课</span
|
||
>
|
||
</div>
|
||
<div
|
||
style="width: 80%"
|
||
:title="course.name"
|
||
class="course-title portal-title-tow two-line-ellipsis"
|
||
>
|
||
{{ course.name }}
|
||
</div>
|
||
<div class="course-author">
|
||
<div class="course-author-left">
|
||
{{ course.authorInfo.name }}
|
||
<span class="study-num"
|
||
>{{ formatNum(course.studys) }}人学习</span
|
||
>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div v-if="course.score">
|
||
<span class="course-score-value" style="margin-left: 10px"
|
||
>{{ toScore(course.score) }}分</span
|
||
>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<!--内容列表内容-->
|
||
<div
|
||
v-for="(course, ccidx) in courseComputedTwoList"
|
||
:key="'cctwo' + ccidx"
|
||
class="xindex-course"
|
||
style="position: relative"
|
||
>
|
||
<div style="position: absolute; right: 25px; bottom: 72px">
|
||
<interactBar
|
||
nodeWidth="20px"
|
||
:courseExclusive="true"
|
||
:type="1"
|
||
:data="course"
|
||
:comments="false"
|
||
:praises="false"
|
||
:shares="false"
|
||
:views="false"
|
||
>
|
||
</interactBar>
|
||
<!-- <svg-icon style="font-size: 32px;margin-top: -5px;" icon-class="collectedCourse"></svg-icon> -->
|
||
</div>
|
||
<a @click="toCourseDetail(course)">
|
||
<div class="xindex-course-image">
|
||
<course-image :course="course"></course-image>
|
||
<span v-if="course.type == 20 || 10" class="course-type"
|
||
>录播课</span
|
||
>
|
||
</div>
|
||
<div
|
||
style="width: 80%"
|
||
:title="course.name"
|
||
class="course-title portal-title-tow two-line-ellipsis"
|
||
>
|
||
{{ course.name }}
|
||
</div>
|
||
<div class="course-author">
|
||
<div class="course-author-left">
|
||
{{ course.authorInfo.name }}
|
||
|
||
<span class="study-num"
|
||
>{{ formatNum(course.studys) }}人学习</span
|
||
>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div v-if="course.score">
|
||
<span class="course-score-value" style="margin-left: 10px"
|
||
>{{ toScore(course.score) }}分</span
|
||
>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="xcontent2-minor" style="margin-top: 60px">
|
||
<div class="portal-ranking ranking-bg">
|
||
<p class="ranking-title">课程热度榜</p>
|
||
<ul class="xindex-ranking-course">
|
||
<li
|
||
class="xindex-ranking-li"
|
||
v-for="(item, cindex) in scorelist"
|
||
:key="'cc' + cindex"
|
||
>
|
||
<a style="display: inherit" @click="toCourseDetail(item)">
|
||
<span class="portal-right-text blue-one">
|
||
<img :src="getPic(cindex)" alt="" />
|
||
</span>
|
||
<span
|
||
class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
|
||
style="font-size: 14px; color: #04243c"
|
||
>{{ item.name }}</span
|
||
>
|
||
|
||
<div class="list-active">
|
||
<div class="list-content">
|
||
<div class="list-img">
|
||
<course-image
|
||
:text="false"
|
||
:course="item"
|
||
></course-image>
|
||
<span v-if="item.type < 21" class="course-type"
|
||
>录播</span
|
||
>
|
||
<span v-if="item.type == 30" class="course-type"
|
||
>线下课</span
|
||
>
|
||
<span v-if="item.type == 40" class="course-type"
|
||
>学习项目</span
|
||
>
|
||
</div>
|
||
<div class="list-text">
|
||
<h6 class="two-line-ellipsis">{{ item.name }}</h6>
|
||
<span>{{ item.publishTime }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="list-bottom">
|
||
<couresinteract :type="1" :data="item"></couresinteract>
|
||
|
||
<!-- <interactBar :type="1" :data="item" :couseViews="false" :shares="false" :views="false"></interactBar> -->
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="portal-ranking ranking-bg reviewTop">
|
||
<p class="ranking-title">课程好评榜</p>
|
||
<ul class="xindex-ranking-review" style="overflow: auto;margin: 0;top: 0;">
|
||
<li
|
||
@click="toCourseDetail(item)"
|
||
class="xindex-ranking-li title-line-ellipsis"
|
||
v-for="(item, index) in Positive"
|
||
:key="'bb' + index"
|
||
style="line-height: 22px"
|
||
>
|
||
<span class="portal-right-text orange-one">
|
||
<img :src="getPic(index)" alt="" />
|
||
</span>
|
||
<span
|
||
class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
|
||
style="font-size: 14px; color: #04243c; line-height: 26px"
|
||
>{{ item.name }}</span
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 推荐案例2版 -->
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main xindex-main">
|
||
<div class="modules-title">
|
||
<span class="modules-text">推荐案例</span>
|
||
<!-- <span class="quyer-tag">
|
||
<a
|
||
:class="caseList.orderType == 2 ? 'current' : ''"
|
||
@click="changeCaseOrder(2)"
|
||
>最热</a
|
||
>
|
||
<a
|
||
:class="caseList.orderType == 1 ? 'current' : ''"
|
||
@click="changeCaseOrder(1)"
|
||
>最新</a
|
||
>
|
||
</span> -->
|
||
<span class="more">
|
||
<router-link to="/case">查看更多>></router-link>
|
||
</span>
|
||
</div>
|
||
<div class="modules-list">
|
||
<div
|
||
class="xindex-case"
|
||
v-for="(ca, ind) in caseList.list"
|
||
:key="'aa' + ind"
|
||
>
|
||
<div class="case-index boe-case-index">
|
||
<div class="case-top"></div>
|
||
<div class="case-conent" @click="jumcasedet(ca)">
|
||
<p class="cast-time">
|
||
<span class="time-one" v-if="caseList.orderType == 2">
|
||
<svg-icon
|
||
style="margin-right: 0; font-size: 16px"
|
||
icon-class="crown"
|
||
></svg-icon
|
||
>人气榜NO.{{ ind + 1 }}
|
||
</span>
|
||
<span style="float: right">{{
|
||
ca.sysCreateTime.substring(0, 10)
|
||
}}</span>
|
||
</p>
|
||
<p :title="ca.title" class="two-line-ellipsis case-title">
|
||
{{ ca.title }}
|
||
</p>
|
||
<p class="case-text three-line-ellipsis">{{ ca.summary }}</p>
|
||
<p class="case-info">
|
||
<interactBar
|
||
:type="3"
|
||
:readonly="true"
|
||
:data="ca"
|
||
:shares="false"
|
||
:views="false"
|
||
></interactBar>
|
||
</p>
|
||
</div>
|
||
<div class="case-inter">
|
||
<div class="case-inter-box">
|
||
<div class="case-inter-left">
|
||
<div style="float: left">
|
||
<authorInfo
|
||
:avatar="ca.authorInfo.avatar"
|
||
:name="ca.authorInfo.name"
|
||
:sex="ca.authorInfo.sex"
|
||
:aid="userInfo.aid"
|
||
></authorInfo>
|
||
</div>
|
||
<div class="case-inter-orgin index-one-line-ellipsis">
|
||
{{ ca.authorInfo.orgInfo }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="caseList.orderType == 2"
|
||
class="interact-bar-index"
|
||
style="
|
||
font-size: 12px;
|
||
color: #6e7b84;
|
||
display: flex;
|
||
line-height: 30px;
|
||
"
|
||
>
|
||
<interactBar
|
||
:type="3"
|
||
:readonly="true"
|
||
:comments="false"
|
||
:praises="false"
|
||
:favorites="false"
|
||
:data="ca"
|
||
:shares="false"
|
||
:views="true"
|
||
></interactBar
|
||
>人观看
|
||
</div>
|
||
</div>
|
||
|
||
<!-- -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="xcontent2-minor">
|
||
<div
|
||
class="portal-ranking ranking-bg"
|
||
style="margin-top: 60px; padding-right: 17px"
|
||
>
|
||
<p class="ranking-title">案例排行榜</p>
|
||
<ul class="xindex-ranking-case">
|
||
<li
|
||
@click="jumcasedet(item)"
|
||
class="xindex-ranking-li title-line-ellipsis"
|
||
v-for="(item, index) in Popularity"
|
||
:key="'bb' + index"
|
||
style="line-height: 22px"
|
||
>
|
||
<span class="portal-right-text orange-one">
|
||
<img :src="getPic(index)" alt="" />
|
||
</span>
|
||
<span
|
||
class="portal-title-desc two-line-ellipsis"
|
||
style="font-size: 14px; color: #04243c; line-height: 26px"
|
||
>{{ item.title }}</span
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 推荐文章 -->
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main xindex-main">
|
||
<div class="modules-title" style="margin-top: 22px">
|
||
<span class="modules-text">推荐文章</span>
|
||
<span class="quyer-tag">
|
||
<a
|
||
:class="articleList.orderType == 2 ? 'current' : ''"
|
||
@click="changeArticleOrder(2)"
|
||
>最热</a
|
||
>
|
||
<a
|
||
:class="articleList.orderType == 1 ? 'current' : ''"
|
||
@click="changeArticleOrder(1)"
|
||
>最新</a
|
||
>
|
||
</span>
|
||
<span class="more">
|
||
<router-link to="/article">查看更多>></router-link>
|
||
</span>
|
||
</div>
|
||
<div class="modules-list">
|
||
<div class="article-card boe-article-index" style="display: flex">
|
||
<!-- 首张 -->
|
||
<div
|
||
class="article-card-left"
|
||
v-if="articleList && articleList.first && articleList.first.id"
|
||
>
|
||
<div class="article-card-box">
|
||
<a
|
||
:href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`"
|
||
style="font-weight: 700; font-size: 20px"
|
||
>
|
||
<div class="article-info-image-box">
|
||
<article-image
|
||
height="100%"
|
||
width="100%"
|
||
:article="articleList.first"
|
||
></article-image>
|
||
</div>
|
||
<div class="article-info">
|
||
<div class="article-info-title" style="margin-top: 10px">
|
||
<div class="one-line-ellipsis">
|
||
<span
|
||
style="
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
word-break: break-all;
|
||
color: #00253e;
|
||
"
|
||
>{{ articleList.first.title }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="article-info-index-summary index-tive-line-ellipsis"
|
||
style="
|
||
min-height: 160px;
|
||
font-weight: 400;
|
||
margin-top: 14px;
|
||
word-break: break-all;
|
||
"
|
||
>
|
||
{{ articleList.first.summary }}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div></div>
|
||
<div
|
||
class="article-info-time"
|
||
style="
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16px;
|
||
"
|
||
>
|
||
<span>{{
|
||
articleList.first &&
|
||
articleList.first.sysCreateTime &&
|
||
articleList.first.sysCreateTime.substring(0, 10)
|
||
}}</span>
|
||
<span
|
||
><a
|
||
:href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`"
|
||
>查看详情</a
|
||
></span
|
||
>
|
||
</div>
|
||
<div class="article-other-info" style="margin-top: 17px">
|
||
<div>
|
||
<author-img
|
||
height="32px"
|
||
width="32px"
|
||
:avatar="articleList.first.authorInfo.avatar"
|
||
:aid="articleList.first.authorInfo.aid"
|
||
:sex="articleList.first.authorInfo.sex"
|
||
></author-img>
|
||
</div>
|
||
<div style="margin-top: 5px">
|
||
<interactBar
|
||
:type="2"
|
||
:readonly="true"
|
||
:data="articleList.first"
|
||
:views="false"
|
||
:shares="false"
|
||
>
|
||
</interactBar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--内容列表内容-->
|
||
<div class="article-card-right" style="flex: 1">
|
||
<div
|
||
class="article-card-box"
|
||
v-for="article in articleList.list"
|
||
:key="'a1' + article.id"
|
||
>
|
||
<div class="article-li">
|
||
<div class="article-img" v-if="article.coverurl != ''">
|
||
<a
|
||
:href="`${webBaseUrl}/article/detail?id=${article.id}`"
|
||
style="font-weight: 700; font-size: 20px"
|
||
>
|
||
<el-image
|
||
style="width: 100%; height: 100%"
|
||
:src="fileBaseUrl + article.coverurl"
|
||
></el-image>
|
||
</a>
|
||
</div>
|
||
<div class="article-right">
|
||
<a
|
||
:href="`${webBaseUrl}/article/detail?id=${article.id}`"
|
||
style="font-weight: 700; font-size: 20px"
|
||
>
|
||
<p class="article-info-title index-one-line-ellipsis">
|
||
{{ article.title }}
|
||
</p>
|
||
<p class="article-info-summary two-line-ellipsis">
|
||
{{ article.summary }}
|
||
</p>
|
||
</a>
|
||
<div class="article-bottom">
|
||
<div style="display: flex">
|
||
<div>
|
||
<author-img
|
||
height="32px"
|
||
width="32px"
|
||
:avatar="article.authorInfo.avatar"
|
||
:aid="article.authorInfo.aid"
|
||
:sex="article.authorInfo.sex"
|
||
></author-img>
|
||
</div>
|
||
<div>
|
||
<span
|
||
style="
|
||
color: #6e7b84;
|
||
font-size: 14px;
|
||
margin: 6px 13px 0 10px;
|
||
"
|
||
>{{ article.authorInfo.name }}</span
|
||
>
|
||
</div>
|
||
<div style="padding-top: 0px">
|
||
<interactBar
|
||
:type="2"
|
||
:readonly="true"
|
||
:data="article"
|
||
:views="false"
|
||
:shares="false"
|
||
></interactBar>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span class="article-info-time">{{
|
||
article.sysCreateTime.substring(0, 10)
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--内容块-->
|
||
<div class="xcontent2-minor">
|
||
<div
|
||
style="margin-top: 82px; padding-right: 17px"
|
||
class="portal-ranking ranking-bg"
|
||
>
|
||
<!-- 排行榜位置 -->
|
||
<p class="ranking-title">文章排行榜</p>
|
||
<ul class="xindex-ranking-article">
|
||
<li
|
||
class="xindex-ranking-li"
|
||
v-for="(item, index) in ankingList"
|
||
:key="'a2' + item.id"
|
||
style="line-height: 22px"
|
||
>
|
||
<a
|
||
style="display: inherit"
|
||
:href="`${webBaseUrl}/article/detail?id=${item.id}`"
|
||
>
|
||
<span class="portal-right-text orange-one">
|
||
<img :src="getPic(index)" alt="" />
|
||
</span>
|
||
<span class="portal-index-summary two-line-ellipsis">{{
|
||
item.title
|
||
}}</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 推荐问答 -->
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main xindex-main">
|
||
<!--内容块-->
|
||
<div class="modules-title" style="margin-top: 22px">
|
||
<span class="modules-text">推荐问答</span>
|
||
<span class="quyer-tag">
|
||
<a
|
||
:class="qaList.orderType == 'views' ? 'current' : ''"
|
||
@click="changeQaOrder('views')"
|
||
>最热</a
|
||
>
|
||
<a
|
||
:class="qaList.orderType == '' ? 'current' : ''"
|
||
@click="changeQaOrder('')"
|
||
>最新</a
|
||
>
|
||
</span>
|
||
<span class="more">
|
||
<router-link to="/qa">查看更多>></router-link>
|
||
</span>
|
||
</div>
|
||
<div class="modules-list">
|
||
<!--内容列表内容-->
|
||
<div
|
||
class="xindex-qa"
|
||
v-for="qa in qaList.list"
|
||
:key="'qa' + qa.id"
|
||
>
|
||
<div class="qa-card boe-qa-index">
|
||
<p class="qa-top">
|
||
<span>{{ formatNum(qa.views) }}正在关注</span
|
||
><span>{{ qa.sysCreateTime.substring(0, 10) }}</span>
|
||
</p>
|
||
<div class="qa-center">
|
||
<p
|
||
class="one-line-ellipsis portal-index-title"
|
||
style="color: #181818"
|
||
>
|
||
{{ qa.title }}
|
||
</p>
|
||
<p
|
||
class="boe-qa-sum two-line-ellipsis"
|
||
style="color: #6e7b84"
|
||
>
|
||
{{ qa.content }}
|
||
</p>
|
||
<p class="qa-views pointer" @click="jumpRouter(qa)">
|
||
查看详情
|
||
</p>
|
||
</div>
|
||
<div class="qa-char">
|
||
<author-img
|
||
:avatar="qa.authorInfo.avatar"
|
||
:aid="qa.authorInfo.aid"
|
||
:sex="qa.authorInfo.sex"
|
||
>
|
||
</author-img>
|
||
<div>
|
||
<p class="info-name">{{ qa.authorInfo.name }}</p>
|
||
<p class="info-bar">
|
||
<interactBar
|
||
:type="4"
|
||
:readonly="true"
|
||
:data="qa"
|
||
:comments="false"
|
||
:answers="true"
|
||
:shares="false"
|
||
:praises="false"
|
||
:views="false"
|
||
></interactBar>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="xcontent2-minor">
|
||
<!-- 排行榜 -->
|
||
<div
|
||
class="portal-ranking ranking-bg"
|
||
style="margin-top: 80px; padding-right: 17px"
|
||
>
|
||
<p class="ranking-title">问答排行榜</p>
|
||
<ul class="xindex-ranking-qa">
|
||
<li
|
||
@click="jumpRouter(item)"
|
||
class="xindex-ranking-li"
|
||
v-for="(item, index) in answersList"
|
||
:key="'q' + item.id"
|
||
style="line-height: 22px"
|
||
>
|
||
<span class="portal-right-text orange-one">
|
||
<img :src="getPic(index)" alt="" />
|
||
</span>
|
||
<span class="portal-index-summary two-line-ellipsis">{{
|
||
item.title
|
||
}}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a
|
||
href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course"
|
||
> </a
|
||
>
|
||
</div>
|
||
<portal-footer></portal-footer>
|
||
<portalFloatTools></portalFloatTools>
|
||
<interest-Collection
|
||
ref="userCollection"
|
||
@close="closeCollection"
|
||
></interest-Collection>
|
||
<!-- 兴趣偏好 -->
|
||
<guide-box ref="guide" @close="closeGuide"></guide-box>
|
||
<!-- 引导页 -->
|
||
<!-- <medalDlg></medalDlg> -->
|
||
<!--登录勋章-->
|
||
<el-dialog
|
||
width="540px"
|
||
class="medalbox"
|
||
:visible.sync="showLoginMedal"
|
||
:append-to-body="true"
|
||
>
|
||
<div
|
||
class="jinian-medal-img"
|
||
:style="`background: url(${webBaseUrl}/images/jinian_medal.png) no-repeat;`"
|
||
>
|
||
<!--登录勋章显示，根据UI显示修改-->
|
||
<span
|
||
style="position: absolute; right: 60px; top: 60px; cursor: pointer"
|
||
>
|
||
<img
|
||
@click="closeJinian"
|
||
:src="`${webBaseUrl}/images/close.png`"
|
||
width="26px"
|
||
height="26px"
|
||
alt=""
|
||
/>
|
||
</span>
|
||
<div style="text-align: center; padding-right: 10px">
|
||
<img
|
||
:src="`${webBaseUrl}/images/login_medal.png`"
|
||
width="206px"
|
||
height="269px"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div style="text-align: left; padding: 20px 60px 100px 60px">
|
||
<div class="jntext1">感谢有您 一路相伴</div>
|
||
<div class="jntext2">勋章领取条件:</div>
|
||
<div class="jntext3">2022年11月4日-11月19日登录过平台学习的校友</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- U课堂弹窗 -->
|
||
<div class="u-class">
|
||
<el-dialog :visible.sync="showUClass" width="833px">
|
||
<div class="ClassBoxContent">
|
||
<img src="../assets/images/u_class.png" alt="" class="img" />
|
||
<div class="ContentBox">
|
||
<div class="left">
|
||
<div class="title">U选小课堂</div>
|
||
<div class="jy">项目简介</div>
|
||
<div class="msg">
|
||
于22年首推，是一个面向全集团员工开放的职业通识类数字化培养项目，旨在帮助员工开阔眼界、加厚职业素养。在原有外部精选通用力课程基础上，2023年引入创新专区，以新鲜的话题、新颖的形式，带给全员丰富、有趣的学习体验。
|
||
</div>
|
||
<div class="bottom"></div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="tyl" @click="tylClick">
|
||
<div class="tyl_title">
|
||
<img
|
||
src="../assets/images/dc.png"
|
||
alt=""
|
||
class="tyl_title_img"
|
||
/>
|
||
<span class="tyl_title_msg">通用力专区</span>
|
||
</div>
|
||
<div class="tyl_jy">加厚职业素养，轻学习、快成长！</div>
|
||
<div class="tyl_msg">
|
||
内容涵盖：领导力、市场营销、职场技能、财务知识、法律常识、人力资源、经典国学、人文社科
|
||
</div>
|
||
</div>
|
||
<div class="text_msg">
|
||
创新力专区课程版权已到期！
|
||
</div>
|
||
<!-- <div class="cyl" @click="cylClick">
|
||
<div class="tyl_title">
|
||
<img
|
||
src="../assets/images/cyl.png"
|
||
alt=""
|
||
class="tyl_title_img"
|
||
/>
|
||
<span class="tyl_title_msg">创新力专区</span>
|
||
</div>
|
||
<div class="tyl_jy">激发创新潜力，拓视野、促思考！</div>
|
||
<div class="tyl_msg">
|
||
内容涵盖：组合创新、单点破局、错位竞争、分形创新、第二曲线、数字化、元宇宙<br/>
|
||
创新力专区课程版权将于2024年4月16日到期，逾期将无法继续访问，请尽快完成学习
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import apiCourseStudy from "@/api/modules/courseStudy.js";
|
||
import portalHeader from "@/components/PortalHeader.vue";
|
||
import portalFooter from "@/components/PortalFooter.vue";
|
||
import portalFloatTools from "@/components/PortalFloatTools.vue";
|
||
import authorInfo from "@/components/Portal/authorInfo.vue";
|
||
import apiCourse from "@/api/modules/coursePortal.js";
|
||
import apiCase from "@/api/modules/cases.js";
|
||
import apiArticle from "@/api/modules/article.js";
|
||
import apiQa from "@/api/modules/qa.js";
|
||
import apiGuide from "@/api/phase2/guide.js";
|
||
import apiUser from "@/api/system/user.js";
|
||
import apiCoursePortal from "@/api/modules/coursePortal.js";
|
||
import interactBar from "@/components/Portal/interactBar.vue";
|
||
import couresinteract from "@/components/Portal/course/couresinteract.vue";
|
||
import ad from "@/components/Portal/adFloat.vue";
|
||
import courseImage from "@/components/Course/courseImage.vue";
|
||
import articleImage from "@/components/Article/articleImage.vue";
|
||
import InterestCollection from "@/components/Portal/interestCollection.vue";
|
||
import GuideBox from "@/components/Portal/guideBox.vue";
|
||
import medalDlg from "@/components/Portal/medalDlg.vue";
|
||
import { toScore, formatUserNumber, cutOrgNamePath } from "@/utils/tools.js";
|
||
import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||
import apiPlace from "@/api/phase2/place.js";
|
||
import authorImg from "@/components/Portal/authorImg.vue";
|
||
import apiStat from "@/api/phase2/stat.js";
|
||
import apiIndex from "@/api/phase2/index.js";
|
||
import apiUserhobby from "@/api/phase2/userhobby.js";
|
||
export default {
|
||
name: "index",
|
||
components: {
|
||
authorImg,
|
||
portalHeader,
|
||
ad,
|
||
portalFooter,
|
||
articleImage,
|
||
portalFloatTools,
|
||
authorInfo,
|
||
interactBar,
|
||
couresinteract,
|
||
courseImage,
|
||
InterestCollection,
|
||
GuideBox,
|
||
medalDlg,
|
||
},
|
||
created() {
|
||
this.$store.dispatch("refrashStudyTaskCount");
|
||
let $this = this;
|
||
//判断是否弹出登录勋章，设置截止日期
|
||
var nowDate = new Date();
|
||
var endDate = new Date("2022-11-18"); //先设置时间是11月18日
|
||
if (nowDate < endDate) {
|
||
apiStat.getUserLoginMedal().then((rs) => {
|
||
if (rs.status == 200) {
|
||
if (rs.result.show) {
|
||
//设置是否需要显示纪念勋章
|
||
$this.needLoginMedal = true;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
//提取需要提示勋章
|
||
// apiStat.getUserMedalTips().then(res=>{
|
||
// if(res.status==200){
|
||
// $this.medalTips=res.result;
|
||
// }
|
||
// })
|
||
},
|
||
data() {
|
||
return {
|
||
Positive:[],
|
||
showUClass: false,
|
||
showLoginMedal: false, //是否显示登录勋章
|
||
needLoginMedal: false, //是否需要显示纪念勋章
|
||
medalTips: [
|
||
{ medalId: 1, medalLevel: 5, isShow: false },
|
||
{ medalId: 3, medalLevel: 4, isShow: false },
|
||
],
|
||
lastStudy: {},
|
||
overlayShow: false,
|
||
userData: { level: 1, uvalue: 0, totalStudyHour: 0 },
|
||
userHobby: {
|
||
needShow: false,
|
||
localKeyPre: "user-hobby-", //本地存储的key
|
||
},
|
||
needHobbyShow: false, //是否显示兴趣爱好
|
||
formatNum: formatUserNumber,
|
||
cutOrgNamePath: cutOrgNamePath,
|
||
// userInfo: {},
|
||
ankingList: [],
|
||
answersList: [],
|
||
Popularity: [],
|
||
reviewList:[],//好评
|
||
scorelist: [],
|
||
resonimg: [],
|
||
swiperOptiontwo: {
|
||
autoplay: false,
|
||
// noSwiping: true,
|
||
},
|
||
swiperOption: {
|
||
autoplay: {
|
||
delay: 2000,
|
||
disableOnInteraction: false, //解决滑动后不能轮播的问题
|
||
},
|
||
speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
|
||
loop: true, //循环切换
|
||
peed: 300, //循环速度
|
||
scrollbar: ".swiper-scrollbar",
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
// type : 'progressbar', //分页器形状
|
||
clickable: true, //点击分页器的指示点分页器会控制Swiper切换
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
},
|
||
|
||
couname: "",
|
||
isNext: true,
|
||
pageIndex: 1,
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
toScore,
|
||
courseList: {
|
||
num: 12,
|
||
orderType: 2,
|
||
list: [],
|
||
},
|
||
// 推荐课程
|
||
recommendedList:{
|
||
list: [],
|
||
},
|
||
caseList: {
|
||
num: 3,
|
||
orderType: 2,
|
||
list: [],
|
||
},
|
||
articleList: {
|
||
num: 4,
|
||
orderType: 2,
|
||
first: {
|
||
id: "",
|
||
authorInfo: {},
|
||
},
|
||
list: [],
|
||
},
|
||
qaList: {
|
||
num: 4,
|
||
orderType: "views",
|
||
list: [],
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getCourseData(1);
|
||
this.getRecommendList();
|
||
this.getPositive()
|
||
this.getCaseData();
|
||
this.getArticleData();
|
||
this.getQaData();
|
||
this.couresreso();
|
||
this.getScoreList();
|
||
this.getPopularity();
|
||
this.getAnkingData();
|
||
this.getLevel();
|
||
this.getQaAnswers();
|
||
this.getLastStudy();
|
||
|
||
//检查兴趣爱好是否已填报,
|
||
//先检查本地session和 local 15天, 这两个值是在组件中设置的
|
||
let sessionHobby = sessionStorage.getItem(
|
||
"user-hobby-" + this.userInfo.aid
|
||
);
|
||
let localHobbyTime = localStorage.getItem("notYet" + this.userInfo.aid);
|
||
if (!sessionHobby) {
|
||
//只有session中不存在，才会验证
|
||
//本地15天验证,localHobby,后续完善
|
||
let flag = true; //请求检查
|
||
if (localHobbyTime) {
|
||
let day =
|
||
(new Date() - new Date(localHobbyTime)) / (1000 * 60 * 60 * 24);
|
||
if (day < 15) {
|
||
flag = false;
|
||
}
|
||
}
|
||
if (flag) {
|
||
apiUserhobby.has().then((res) => {
|
||
if (res.status == 200) {
|
||
if (!res.result) {
|
||
//设置需要显示兴趣爱好收集窗口
|
||
this.userHobby.needShow = true;
|
||
}
|
||
} else {
|
||
console.log("兴趣爱好检查失败" + res.message);
|
||
}
|
||
//检查引导页
|
||
this.checkAndShowGuide();
|
||
});
|
||
} else {
|
||
this.checkAndShowGuide();
|
||
}
|
||
} else {
|
||
//检查引导页
|
||
this.checkAndShowGuide();
|
||
}
|
||
//this.$refs.userCollection.show();
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo", "studyTaskCount"]),
|
||
swiper() {
|
||
return this.$refs.mySwiper.swiper;
|
||
},
|
||
courseComputedOneList(){
|
||
return this.courseList.list.slice(0,3)
|
||
},
|
||
courseComputedTwoList(){
|
||
return this.courseList.list.slice(3)
|
||
},
|
||
},
|
||
methods: {
|
||
getPositive() {
|
||
// 这个是案例的好评
|
||
// apiCase.queryComments(10).then(res => {
|
||
// if (res.status == 200) {
|
||
// this.Positive = res.result;
|
||
// console.log(res);
|
||
// }
|
||
// });
|
||
// 修改成课程的好评
|
||
apiCourse.scorelist(10, 2).then(res => {
|
||
if (res.status == 200) {
|
||
res.result.forEach(item => {
|
||
if (item.publishTime != '') {
|
||
item.coverImg = item.images;
|
||
let time = item.publishTime.split('-');
|
||
item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`
|
||
}
|
||
})
|
||
this.Positive = res.result;
|
||
}
|
||
});
|
||
},
|
||
tylClick() {
|
||
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130");
|
||
},
|
||
cylClick() {
|
||
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
|
||
},
|
||
showClass(flag) {
|
||
if (flag) {
|
||
this.showUClass = flag;
|
||
}
|
||
},
|
||
uOnClick(){
|
||
// this.showUClass = true;
|
||
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130")
|
||
},
|
||
setCurIdentity(iden) {
|
||
this.$store.dispatch("SetCurIdentity", iden);
|
||
},
|
||
closeJinian() {
|
||
this.showLoginMedal = false;
|
||
},
|
||
banJump(item) {
|
||
if (item.JumpUrl) {
|
||
window.open(item.JumpUrl);
|
||
}
|
||
},
|
||
//上次学习记录
|
||
getLastStudy() {
|
||
apiCourseStudy.lastStudy().then((res) => {
|
||
if (res.status === 200) {
|
||
this.lastStudy = res.result;
|
||
if (res.result != "" && res.result.courseId) {
|
||
this.overlayShow = true;
|
||
}
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
//检查并弹出引导页
|
||
checkAndShowGuide() {
|
||
//引导页弹框是否显示
|
||
//检查本地,减少服务器请求的次数
|
||
let localGuide = localStorage.getItem("user-guide-" + this.userInfo.aid);
|
||
if (!localGuide) {
|
||
apiGuide.hasUser().then((res) => {
|
||
if (res.status == 200) {
|
||
if (!res.result) {
|
||
this.$refs.guide.show();
|
||
} else {
|
||
if (this.userHobby.needShow) {
|
||
this.$refs.userCollection.show();
|
||
} else {
|
||
if (this.needLoginMedal) {
|
||
this.showLoginMedal = true;
|
||
}
|
||
}
|
||
}
|
||
localStorage.setItem("user-guide-" + this.userInfo.aid, 1);
|
||
} else {
|
||
console.log("获取引导页检查失败" + res.message);
|
||
//this.$message.error('')
|
||
if (this.userHobby.needShow) {
|
||
this.$refs.userCollection.show();
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
if (this.userHobby.needShow) {
|
||
this.$refs.userCollection.show();
|
||
} else {
|
||
if (this.needLoginMedal) {
|
||
this.showLoginMedal = true;
|
||
}
|
||
}
|
||
}
|
||
|
||
//测试情况下
|
||
// this.$refs.guide.show();
|
||
},
|
||
closeGuide() {
|
||
//关闭引导页
|
||
if (this.userHobby.needShow) {
|
||
//需要弹出兴趣收集页，弹出兴趣收集页
|
||
this.$refs.userCollection.show();
|
||
}
|
||
},
|
||
closeCollection() {
|
||
if (this.needLoginMedal) {
|
||
this.showLoginMedal = true;
|
||
}
|
||
},
|
||
jumstudy() {
|
||
this.$router.push({ path: "../views/study/TaskList.vue" });
|
||
},
|
||
jumcasedet(item) {
|
||
this.$router.push({ path: "/case/detail", query: { id: item.id } });
|
||
},
|
||
getPic(index) {
|
||
return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
|
||
},
|
||
getLevel() {
|
||
//获取经验值和等级
|
||
apiStat.getUserStatTotalInfo(this.userInfo.aid).then((res) => {
|
||
if (res.status == 200) {
|
||
this.userData = res.result;
|
||
//console.log(this.userData,'this.userData')
|
||
}
|
||
});
|
||
},
|
||
getQaAnswers() {
|
||
apiIndex.qaAnswers(10).then((res) => {
|
||
if (res.status == 200) {
|
||
this.answersList = res.result;
|
||
}
|
||
});
|
||
},
|
||
getAnkingData() {
|
||
// 文章排行榜
|
||
apiIndex.articleViews(10).then((res) => {
|
||
if (res.status == 200) {
|
||
this.ankingList = res.result;
|
||
}
|
||
});
|
||
},
|
||
getPopularity() {
|
||
//案例排行榜
|
||
apiCase.queryPraises(10).then((res) => {
|
||
if (res.status == 200) {
|
||
this.Popularity = res.result;
|
||
// console.log(this.Popularity)
|
||
}
|
||
});
|
||
},
|
||
getScoreList() {
|
||
//课程排行榜
|
||
apiCourse.scorelist(10, 1).then((res) => {
|
||
if (res.status == 200) {
|
||
res.result.forEach((item) => {
|
||
if (item.publishTime != "") {
|
||
item.coverImg = item.images;
|
||
let time = item.publishTime.split("-");
|
||
item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`;
|
||
}
|
||
});
|
||
this.scorelist = res.result;
|
||
//console.log(this.scorelist,'this.scorelist');
|
||
}
|
||
});
|
||
},
|
||
// bgfun(){
|
||
// console.log(this.$refs.bannimg[0]);
|
||
// this.$nextTick(() => {
|
||
// console.log(this.$refs.bannimg[0])
|
||
// })
|
||
// },
|
||
couresreso() {
|
||
let key = "index";
|
||
apiPlace.detail(key).then((res) => {
|
||
let lmj = JSON.parse(res.result.content);
|
||
this.resonimg = lmj;
|
||
});
|
||
},
|
||
jumUX() {
|
||
window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank");
|
||
},
|
||
toCourseDetail(item) {
|
||
//二期调整，直接改成一个地址
|
||
//return this.webBaseUrl + '/course/detail?id=' + item.id;
|
||
let $this = this;
|
||
if (item.type == 10) {
|
||
//return this.webBaseUrl + "/course/studyindex?id=" + item.id;
|
||
//console.log("直接进入学习页面");
|
||
this.$router.push("/course/studyindex?id=" + item.id);
|
||
} else if (item.type == 20) {
|
||
apiCourseStudy.hasSignup(item.id).then((rs) => {
|
||
if (rs.status == 200) {
|
||
//return $this.webBaseUrl + "/course/studyindex?id=" + item.id;
|
||
this.$router.push("/course/studyindex?id=" + item.id);
|
||
} else {
|
||
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
|
||
this.$router.push("/course/detail?id=" + item.id);
|
||
}
|
||
});
|
||
//return $this.webBaseUrl + "/course/detail?id=" + item.id;
|
||
}
|
||
},
|
||
orderTypeFilter(val) {
|
||
this.courseList.orderType = val;
|
||
this.pageIndex = 1;
|
||
this.getCourseData();
|
||
},
|
||
nextPage() {
|
||
this.pageIndex += 1;
|
||
if (this.isNext) {
|
||
this.getCourseData(this.pageIndex);
|
||
}
|
||
},
|
||
// 获取推荐课程list
|
||
getRecommendList(){
|
||
apiIndex.getRecommendList(1,3).then((res) => {
|
||
if(res.code === 200){
|
||
console.log(res.data.records);
|
||
let courseIds = [];
|
||
res.data.records.forEach((item) => {
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
code: "",
|
||
sex: null,
|
||
};
|
||
courseIds.push(item.id);
|
||
});
|
||
this.loadCouserTeacher(res.data.records, courseIds);
|
||
console.log(res.result,'lalalala');
|
||
this.recommendedList.list = res.data.records
|
||
}
|
||
})
|
||
},
|
||
getCourseData(pageIndex) {
|
||
this.isNext = false;
|
||
let { orderType, num } = this.courseList;
|
||
let course = {
|
||
pageSize: 6,
|
||
device: 1,
|
||
orderField: orderType == 1 ? "" : "studys",
|
||
orderAsc: false,
|
||
topOrder: true,
|
||
pageIndex: pageIndex,
|
||
};
|
||
|
||
apiIndex.courselist(course).then((res) => {
|
||
if (res.status == 200 && res.result.length > 0) {
|
||
let courseIds = [];
|
||
res.result.forEach((item) => {
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
code: "",
|
||
sex: null,
|
||
};
|
||
courseIds.push(item.id);
|
||
});
|
||
this.loadCouserTeacher(res.result, courseIds);
|
||
console.log(res.result,'lalalala');
|
||
|
||
this.courseList.list = res.result;
|
||
//this.couname = res.result.list.name;
|
||
// if (res.result.count - pageIndex * num < 8) {
|
||
// this.pageIndex = 0;
|
||
// }
|
||
// this.isNext = true;
|
||
|
||
// }
|
||
} else {
|
||
console.log("加载课程信息失败:" + res.error);
|
||
}
|
||
});
|
||
|
||
// apiCourse.list({orderType,num,device:1}).then(res => {
|
||
// if(res.status==200){
|
||
// if(res.result.length>0){
|
||
// let courseIds=[];
|
||
// res.result.forEach(item=>{
|
||
// item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''};
|
||
// courseIds.push(item.id);
|
||
// })
|
||
// this.loadCouserTeacher(res.result,courseIds);
|
||
// this.courseList.list=res.result;
|
||
// }
|
||
// }else{
|
||
// console.log('加载课程信息失败:'+res.error);
|
||
// }
|
||
// })
|
||
},
|
||
// 去掉案例的推荐课程
|
||
// changeCaseOrder(val) {
|
||
// this.caseList.orderType = val;
|
||
// this.getCaseData();
|
||
// },
|
||
|
||
//案例的参数等着需要改
|
||
getCaseData() {
|
||
apiIndex.newCases().then((res) => {
|
||
if (res.status == 200) {
|
||
if (res.result.length > 0) {
|
||
let userIds = [];
|
||
res.result.forEach((item) => {
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
code: "",
|
||
sex: null,
|
||
};
|
||
|
||
if (item.authorId && item.authorId != "") {
|
||
userIds.push(item.authorId);
|
||
}
|
||
});
|
||
this.caseList.list = res.result;
|
||
this.loadCaseAuthorInfo(res.result, userIds);
|
||
}
|
||
// this.caseList.list = res.result;
|
||
} else {
|
||
console.log("加载案例错误：" + res.error);
|
||
}
|
||
});
|
||
},
|
||
loadCaseAuthorInfo(list, ids) {
|
||
//加载作者信息，头像，机构信息
|
||
if (ids.length == 0) {
|
||
return;
|
||
}
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(ids).then((res) => {
|
||
if (res.status == 200) {
|
||
list.forEach((item, index) => {
|
||
res.result.some((author) => {
|
||
if (author.aid == item.authorId) {
|
||
author.orgInfo = cutOrgNamePath(author.orgInfo, 1);
|
||
item.authorInfo = author;
|
||
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
console.log("加载用户信息失败:" + res.error);
|
||
//this.$message.error(res.message);
|
||
}
|
||
});
|
||
},
|
||
getArticleData() {
|
||
let $this = this;
|
||
this.articleList.list = [];
|
||
apiIndex.articlelist(this.articleList.orderType).then((res) => {
|
||
if (res.status == 200) {
|
||
if (res.result.length > 0) {
|
||
let userIds = [];
|
||
res.result.forEach((item, idx) => {
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
code: "",
|
||
sex: null,
|
||
};
|
||
userIds.push(item.sysCreateAid);
|
||
if (idx == 0) {
|
||
$this.articleList.first = item;
|
||
} else {
|
||
$this.articleList.list.push(item);
|
||
}
|
||
});
|
||
// console.log(res.result, 'res.result');
|
||
this.loadAuthorInfo(res.result, userIds);
|
||
}
|
||
} else {
|
||
console.log("加载文章错误：" + res.error);
|
||
}
|
||
});
|
||
},
|
||
changeArticleOrder(val) {
|
||
this.articleList.orderType = val;
|
||
this.getArticleData();
|
||
},
|
||
getQaData() {
|
||
let params = {
|
||
pageSize: this.qaList.num,
|
||
orderAsc: false,
|
||
orderField: this.qaList.orderType,
|
||
};
|
||
// if (this.qaList.orderType == 2) {
|
||
// params.orderField = 'praises';
|
||
// }
|
||
apiQa.indexList(params).then((res) => {
|
||
if (res.status == 200) {
|
||
if (res.result.length > 0) {
|
||
let userIds = [];
|
||
res.result.forEach((item) => {
|
||
item.authorInfo = {
|
||
aid: "",
|
||
name: "",
|
||
orgInfo: "",
|
||
avatar: "",
|
||
code: "",
|
||
sex: null,
|
||
};
|
||
userIds.push(item.sysCreateAid);
|
||
});
|
||
this.qaList.list = res.result;
|
||
this.loadAuthorInfo(res.result, userIds);
|
||
}
|
||
} else {
|
||
console.log("加载问答错误：" + res.error);
|
||
}
|
||
//console.log(res)
|
||
});
|
||
},
|
||
changeQaOrder(val) {
|
||
this.qaList.orderType = val;
|
||
this.getQaData();
|
||
},
|
||
loadCouserTeacher(list, ids) {
|
||
let that = this;
|
||
// 先查课程关联教师iD
|
||
apiCourse.getTeacherByCourseIDs(ids).then((cres) => {
|
||
if (cres.status == 200) {
|
||
let userIds = [];
|
||
list.forEach((item, index) => {
|
||
cres.result.some((courseTeahcer) => {
|
||
if (courseTeahcer.courseId == item.id) {
|
||
if (courseTeahcer.teacherIds) {
|
||
userIds.push(courseTeahcer.teacherIds[0]);
|
||
item.authorInfo.aid = courseTeahcer.teacherIds[0];
|
||
item.authorInfo.name = courseTeahcer.names[0];
|
||
if (item.authorInfo.name == "BOE教师") {
|
||
item.authorInfo.name = "";
|
||
}
|
||
}
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
//that.loadCourseAuthorInfo(list, userIds);
|
||
}
|
||
});
|
||
},
|
||
loadCourseAuthorInfo(list, ids) {
|
||
//加载作者信息，头像，机构信息
|
||
if (ids.length == 0) {
|
||
return;
|
||
}
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(ids).then((res) => {
|
||
if (res.status == 200) {
|
||
list.forEach((item, index) => {
|
||
res.result.some((author) => {
|
||
if (author.aid == item.authorInfo.aid) {
|
||
item.authorInfo = author;
|
||
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
console.log("加载用户信息失败:" + res.error);
|
||
}
|
||
});
|
||
},
|
||
loadAuthorInfo(list, ids) {
|
||
//加载作者信息，头像，机构信息
|
||
if (ids.length == 0) {
|
||
return;
|
||
}
|
||
const noReapetIds = [...new Set(ids)];
|
||
apiUser.getByIds(ids).then((res) => {
|
||
if (res.status == 200) {
|
||
list.forEach((item, index) => {
|
||
res.result.some((author) => {
|
||
if (author.aid == item.sysCreateAid) {
|
||
item.authorInfo = author;
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
console.log("加载用户信息失败:" + res.error);
|
||
}
|
||
});
|
||
},
|
||
jumpRouter(item) {
|
||
this.$router.push({
|
||
path: "/qa/answer",
|
||
query: {
|
||
id: item.id,
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.u-class {
|
||
::v-deep .el-dialog {
|
||
border-radius: 15px;
|
||
.el-dialog__headerbtn .el-dialog__close {
|
||
color: white;
|
||
position: absolute;
|
||
z-index: 99;
|
||
right: 15px;
|
||
}
|
||
}
|
||
::v-deep .el-dialog__body {
|
||
padding: 0px;
|
||
}
|
||
.ClassBoxContent {
|
||
width: 100%;
|
||
height: 396px;
|
||
// background: red;
|
||
border-radius: 15px;
|
||
.ContentBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 9;
|
||
display: flex;
|
||
.left,
|
||
.right {
|
||
height: calc(100% - 30px);
|
||
}
|
||
.left {
|
||
padding-left: 30px;
|
||
width: 48%;
|
||
margin-top: -32px;
|
||
.title {
|
||
width: 200px;
|
||
height: 59px;
|
||
line-height: 59px;
|
||
text-align: center;
|
||
margin-left: -8px;
|
||
font-size: 38px;
|
||
color: white;
|
||
margin-top: 42.97px;
|
||
padding-top: 5px;
|
||
text-shadow: 0 6px 3px rgba(96, 85, 243, 0.4);
|
||
}
|
||
.jy {
|
||
color: white;
|
||
font-size: 20px;
|
||
margin-top: 87.53px;
|
||
font-weight: 400;
|
||
}
|
||
.msg {
|
||
margin-top: 5px;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
width: 326px;
|
||
text-align: justify;
|
||
line-height: 20px;
|
||
}
|
||
.bottom {
|
||
width: 100px;
|
||
height: 1px;
|
||
background: rgba(255, 255, 255, 0.85);
|
||
margin-top: 40px;
|
||
}
|
||
}
|
||
.right {
|
||
// padding-left: 10px;
|
||
width: 50%;
|
||
.tyl {
|
||
cursor: pointer;
|
||
width: calc(100% - 20px);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
height: 160px;
|
||
margin-top: 163px;
|
||
.tyl_title {
|
||
width: 100%;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
.tyl_title_img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
.tyl_title_msg {
|
||
font-size: 20px;
|
||
margin-left: 10px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.tyl_jy {
|
||
margin-top: 6.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding-left: 20px;
|
||
color: #333333;
|
||
}
|
||
.tyl_msg {
|
||
width: 350.36px;
|
||
margin-top: 13px;
|
||
margin-left: 20px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
.tyl:hover {
|
||
border: 0.96px solid rgba(140, 105, 242, 1);
|
||
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.3);
|
||
}
|
||
.text_msg{
|
||
margin: 43px 0 0 222px;
|
||
font-size: 14px;
|
||
color: #000;
|
||
}
|
||
.cyl {
|
||
cursor: pointer;
|
||
width: calc(100% - 20px);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 4px;
|
||
height: 180px;
|
||
margin-top: 10px;
|
||
.tyl_title {
|
||
width: 100%;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
.tyl_title_img {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
.tyl_title_msg {
|
||
font-size: 20px;
|
||
margin-left: 10px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.tyl_jy {
|
||
margin-top: 6.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
padding-left: 20px;
|
||
color: #333333;
|
||
}
|
||
.tyl_msg {
|
||
width: 350.36px;
|
||
margin-top: 13px;
|
||
margin-left: 20px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
.cyl:hover {
|
||
border: 0.96px solid rgba(140, 105, 242, 1);
|
||
box-shadow: 7px 5px 6px 0px rgba(76, 31, 221, 0.24);
|
||
}
|
||
}
|
||
}
|
||
.img {
|
||
width: 835px;
|
||
height: 428px;
|
||
height: 428px;
|
||
margin-left: -1px;
|
||
margin-top: -1px;
|
||
position: absolute;
|
||
top: 0px;
|
||
}
|
||
}
|
||
}
|
||
.xindex-course-image:hover {
|
||
transform: scale(1.3) translateY(-15px);
|
||
transition: all 0.6s;
|
||
}
|
||
.Recent {
|
||
vertical-align: top;
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
.jinian-medal-img {
|
||
text-align: center;
|
||
padding-top: 10px;
|
||
.jntext1 {
|
||
height: 56px;
|
||
font-size: 40px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #924504;
|
||
line-height: 56px;
|
||
}
|
||
.jntext2 {
|
||
margin-top: 30px;
|
||
height: 30px;
|
||
font-size: 22px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #924504;
|
||
line-height: 30px;
|
||
}
|
||
.jntext3 {
|
||
margin-top: 10px;
|
||
height: 50px;
|
||
font-size: 18px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #924504;
|
||
line-height: 25px;
|
||
}
|
||
}
|
||
.medalbox {
|
||
background: transparent !important;
|
||
::v-deep .el-dialog {
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
.el-dialog__header {
|
||
display: none !important;
|
||
}
|
||
.el-dialog__body {
|
||
// width: 320px !important;
|
||
// height: 420px !important;
|
||
background: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-inter-orgin {
|
||
// width: 45%;
|
||
// float: left;
|
||
margin-left: 5px;
|
||
line-height: 30px;
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
}
|
||
.tobe-icon {
|
||
width: 8px;
|
||
height: 14px;
|
||
margin-top: 1.5px;
|
||
margin-left: 8px;
|
||
}
|
||
.grade {
|
||
width: 70px;
|
||
height: 30px;
|
||
display: inline-block;
|
||
font-size: 16px;
|
||
color: #9d6110;
|
||
line-height: 30px;
|
||
background: url("../../public/images/homeWu/gradebgimg.png");
|
||
}
|
||
.article-li {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
.article-img {
|
||
// width: 252px;
|
||
// height: 142px;
|
||
border-radius: 4px;
|
||
|
||
// margin-right: 20px;
|
||
img {
|
||
// width: 252px;
|
||
// height: 142px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.article-right {
|
||
width: 100%;
|
||
|
||
.article-info-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #00253e;
|
||
margin-bottom: 9px;
|
||
// width: 50%;
|
||
}
|
||
|
||
.article-info-summary {
|
||
// font-size: 14px;
|
||
font-weight: 400;
|
||
color: #6e7b84;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.article-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
::v-deep .uavatar {
|
||
// width: 32px;
|
||
// height: 32px;
|
||
}
|
||
}
|
||
|
||
.article-info-time {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #6e7b84;
|
||
}
|
||
}
|
||
}
|
||
.course-ran-bg {
|
||
background: linear-gradient(180deg, #d7eaff 1%, #fafafa 24%);
|
||
}
|
||
|
||
.personal-panel {
|
||
position: absolute;
|
||
right: 8%;
|
||
top: 105px;
|
||
// background: url('/images/homeWu/personal-bgimg.png');
|
||
background: rgba($color: #fff, $alpha: 0.46);
|
||
border-radius: 8px;
|
||
z-index: 999;
|
||
backdrop-filter: blur(10px);
|
||
text-align: center;
|
||
color: #fff;
|
||
|
||
.personal-img {
|
||
width: 68px;
|
||
height: 68px;
|
||
margin: 0 auto;
|
||
::v-deep .el-avatar {
|
||
width: 68px;
|
||
height: 68px;
|
||
img {
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.personal-name {
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
margin-top: 12px;
|
||
color: #333333;
|
||
}
|
||
|
||
.personal-info {
|
||
font-size: 14px;
|
||
color: #000000;
|
||
margin-top: 10px;
|
||
}
|
||
.last-study-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 10px;
|
||
font-size: 16px;
|
||
}
|
||
.personal-box {
|
||
width: 100%;
|
||
height: 47px;
|
||
background: #387df7;
|
||
border-radius: 4px;
|
||
line-height: 47px;
|
||
padding-left: 15px;
|
||
padding-right: 32px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
// margin-top: 20px;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
.personal-box-img {
|
||
position: absolute;
|
||
width: 24px;
|
||
height: 24px;
|
||
left: 10px;
|
||
top: -8px;
|
||
}
|
||
}
|
||
|
||
.personal-ul {
|
||
display: flex;
|
||
li {
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
.label {
|
||
color: #999999;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
p {
|
||
margin-top: 5px;
|
||
text-align: center;
|
||
color: #000;
|
||
span {
|
||
font-size: 22px;
|
||
text-align: center;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-active {
|
||
display: none;
|
||
// width: 458px;
|
||
width: 135%;
|
||
height: 165px;
|
||
padding: 20px;
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 2px;
|
||
border: 1px solid #edeff0;
|
||
position: absolute;
|
||
top: 30px;
|
||
right: -22px;
|
||
z-index: 999;
|
||
|
||
.list-content {
|
||
display: flex;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #edeff0;
|
||
|
||
.list-img {
|
||
width: 125px;
|
||
height: 70px;
|
||
position: relative;
|
||
|
||
::v-deep .el-image {
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.course-type {
|
||
position: absolute;
|
||
// left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
height: 20;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
padding: 0px 8px;
|
||
background: #f99000;
|
||
border-radius: 0px 0px 0px 10px;
|
||
}
|
||
}
|
||
|
||
.list-text {
|
||
flex: 1;
|
||
margin-left: 12px;
|
||
|
||
h6 {
|
||
font-size: 14px;
|
||
margin: 0px;
|
||
font-weight: 500;
|
||
line-height: normal;
|
||
color: #04243c;
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-bottom {
|
||
padding-top: 10px;
|
||
|
||
::v-deep .interact-bar-btns {
|
||
justify-content: space-between !important;
|
||
|
||
.interact-bar-btn {
|
||
margin: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-info {
|
||
position: relative;
|
||
|
||
.span {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.list-info:hover .list-active {
|
||
// transition: all 0.5s;
|
||
display: block;
|
||
}
|
||
|
||
// .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
|
||
// width: 108px;
|
||
// height: 38px;
|
||
// }
|
||
|
||
.bannbox {
|
||
width: 100%;
|
||
height: 520px;
|
||
text-align: center;
|
||
filter: blur(5px);
|
||
z-index: -1;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
::v-deep.swiper-slide .games .swiper-slide-active {
|
||
text-align: center !important;
|
||
}
|
||
|
||
#container {
|
||
position: absolute;
|
||
height: 520px;
|
||
top: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.banner-img {
|
||
height: 520px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
transform: (-50%, -50%);
|
||
}
|
||
|
||
.course-banner {
|
||
height: 520px;
|
||
// background: url('/images/course-banner.png');
|
||
.swiper-button-prev {
|
||
height: 38px;
|
||
// top:auto;
|
||
padding: 0 16px;
|
||
background: rgba($color: #000000, $alpha: 0.8)
|
||
url("../assets/images/icon/ban-left.png") no-repeat;
|
||
background-size: 12px 18px;
|
||
background-position: 16px 10px;
|
||
bottom: 66px;
|
||
border-radius: 19px 0 0 19px;
|
||
}
|
||
.swiper-button-next {
|
||
height: 38px;
|
||
// right: 52.65%;
|
||
bottom: 66px;
|
||
top: auto;
|
||
padding: 0 16px;
|
||
background: rgba($color: #000000, $alpha: 0.1)
|
||
url("../assets/images/icon/ban-right.png") no-repeat;
|
||
background-size: 12px 18px;
|
||
background-position: 6px 10px;
|
||
border-radius: 0 19px 19px 0;
|
||
}
|
||
.swiper-pagination-bullets {
|
||
// background: #000;
|
||
left: 60px;
|
||
bottom: 66px;
|
||
}
|
||
::v-deep .swiper-pagination {
|
||
line-height: 25px;
|
||
height: 32px;
|
||
border-radius: 19px;
|
||
// background: rgba($color: #000000, $alpha: 0.1);
|
||
width: auto;
|
||
left: 45%;
|
||
padding: 0 20px;
|
||
border-radius: 19px;
|
||
.swiper-pagination-bullet {
|
||
position: relative;
|
||
width: 25px;
|
||
height: 5px;
|
||
margin-top: 10px;
|
||
background: #fff;
|
||
opacity: 1 !important;
|
||
// background: rgba($color: #fff, $alpha: 0.5);
|
||
border-radius: 2px;
|
||
}
|
||
.swiper-pagination-bullet::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20px;
|
||
bottom: -20px;
|
||
left: -2px;
|
||
right: -2px;
|
||
}
|
||
.swiper-pagination-bullet-active {
|
||
height: 5px;
|
||
opacity: 1 !important;
|
||
margin-top: 10px;
|
||
width: 25px;
|
||
background: #387df7;
|
||
// background: rgba($color: #fff, $alpha: 0.8);
|
||
border-radius: 2px;
|
||
}
|
||
.swiper-container {
|
||
// background-color: rgba($color: #000000, $alpha: 0.2);
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-orginfo {
|
||
// line-height: 25px;
|
||
height: 45px;
|
||
}
|
||
|
||
.three-line-ellipsis {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
box-sizing: border-box;
|
||
-webkit-line-clamp: 3;
|
||
word-break: break-all;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
// .case-box {
|
||
// display: flex;
|
||
.xindex-case {
|
||
&:nth-child(2) {
|
||
.case-top {
|
||
background: linear-gradient(333deg, #d2def3 0%, #b4c4e0 100%);
|
||
}
|
||
}
|
||
&:last-child {
|
||
.case-top {
|
||
background: linear-gradient(153deg, #a4d3df 0%, #b4dce6 100%);
|
||
}
|
||
}
|
||
.case-index {
|
||
position: relative;
|
||
// width: 408px;
|
||
// height: 396px;
|
||
background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.case-inter {
|
||
position: absolute;
|
||
width: 100%;
|
||
.case-inter-box {
|
||
display: flex;
|
||
margin-right: 46px;
|
||
|
||
.case-inter-left {
|
||
flex: 1;
|
||
// display: flex;
|
||
}
|
||
.interact-bar-index {
|
||
margin-left: auto;
|
||
::v-deep .svg-icon {
|
||
padding-top: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-top {
|
||
// height: 120px;
|
||
background: linear-gradient(153deg, #82a8d1 0%, #a4c5e8 100%);
|
||
border-radius: 8px 8px 0px 0px;
|
||
}
|
||
|
||
.case-conent {
|
||
position: absolute;
|
||
// transform:translate(-50%,-50%);
|
||
top: -50px;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
// width: 350px;
|
||
// height: 274px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 1px 10px 0px rgba(4, 36, 60, 0.05);
|
||
border-radius: 4px;
|
||
|
||
// padding: 30px;
|
||
.cast-time {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
height: 24px;
|
||
.time-one {
|
||
height: 24px;
|
||
background: rgba($color: #387df7, $alpha: 0.1);
|
||
border-radius: 4px;
|
||
// padding: 3px 10px;
|
||
color: #387df7;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.case-title {
|
||
// height: 48px;
|
||
// font-size: 16px;
|
||
font-weight: 600;
|
||
color: #00253e;
|
||
// line-height: 24px;
|
||
}
|
||
|
||
.case-text {
|
||
// height: 60px;
|
||
// font-size: 14px;
|
||
color: #6e7b84;
|
||
// line-height: 20px;
|
||
// margin-bottom: 30px;
|
||
}
|
||
|
||
::v-deep .case-info {
|
||
.interact-bar-btns {
|
||
justify-content: space-between !important;
|
||
|
||
.interact-bar-btn {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//}
|
||
|
||
.casetwo {
|
||
border: 1px solid #f0f0f0;
|
||
width: 100%;
|
||
height: 245px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
background-color: #fff;
|
||
|
||
.case-top {
|
||
height: 70px;
|
||
background-image: linear-gradient(to right, #b8c7e2, #d0dcf3);
|
||
}
|
||
}
|
||
|
||
// .qa-dai{
|
||
// color: #5da1ff;
|
||
// }
|
||
.Uxtext {
|
||
font-weight: 450;
|
||
margin-top: 5px;
|
||
margin-left: 15px;
|
||
font-size: 14px;
|
||
color: #3d3d3d;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
|
||
.uxicon {
|
||
font-size: 10px;
|
||
position: absolute;
|
||
top: -14px;
|
||
left: 98%;
|
||
}
|
||
|
||
.text-status1 {
|
||
// padding:3px;
|
||
color: #1ea0fa;
|
||
}
|
||
|
||
.text-status2 {
|
||
// padding: 3px;
|
||
color: #00aa00;
|
||
}
|
||
|
||
.text-status3 {
|
||
// padding: 3px;
|
||
color: #588afc;
|
||
margin-left: -10px;
|
||
}
|
||
|
||
.qa-yi {
|
||
color: blue;
|
||
}
|
||
|
||
.el-card {
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.portal-content {
|
||
font-family: "Noto Sans SC";
|
||
}
|
||
|
||
// .one-line-ellipsis {
|
||
// width: 100%;
|
||
// white-space: nowrap;
|
||
// word-break: break-all;
|
||
// text-overflow: ellipsis;
|
||
// display: -webkit-box;
|
||
// -webkit-box-orient: vertical;
|
||
// -webkit-line-clamp: 1; /* 这里是超出几行省略 */
|
||
|
||
// }
|
||
.two-line-ellipsis {
|
||
display: -webkit-box;
|
||
// white-space:pre-wrap;
|
||
overflow: hidden;
|
||
// text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.course-card {
|
||
// padding: 30px;
|
||
padding-bottom: 22px;
|
||
// width: 410px;
|
||
// margin-bottom: 30px;
|
||
// margin-right: 36px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background-color: #ffffff;
|
||
|
||
.course-image-box {
|
||
position: relative;
|
||
.course-type {
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 0px;
|
||
width: 60px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
background-color: #f99000;
|
||
border-radius: 2px 4px 2px 14px;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
}
|
||
|
||
.course-type-title {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 0px;
|
||
width: 90px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
}
|
||
|
||
.course-flag {
|
||
height: 26px;
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 0;
|
||
}
|
||
|
||
.course-tip {
|
||
width: 100%;
|
||
height: 26px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
padding: 0 10px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
|
||
.course-study-count {
|
||
float: left;
|
||
}
|
||
|
||
.course-time {
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
|
||
.course-title {
|
||
margin: 16px 0 16px 0;
|
||
height: 44px;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
}
|
||
.course-title-box {
|
||
display: flex;
|
||
|
||
.interact-bar-index {
|
||
}
|
||
}
|
||
.course-author {
|
||
// margin: 5px 15px;
|
||
// padding-bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.course-author-left {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
}
|
||
}
|
||
|
||
.study-num {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
// margin-left: 12px;
|
||
-moz-user-select: none;
|
||
/*火狐*/
|
||
-webkit-user-select: none;
|
||
/*webkit浏览器*/
|
||
-ms-user-select: none;
|
||
/*IE10*/
|
||
-khtml-user-select: none;
|
||
/*早期浏览器*/
|
||
user-select: none;
|
||
}
|
||
|
||
.course-score {
|
||
padding: 10px 15px;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
// border-top: 1px solid #ccc;
|
||
.course-score-star {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modules {
|
||
margin-top: 20px;
|
||
// width: 100%;
|
||
display: flex;
|
||
|
||
.modules-title {
|
||
.modules-text {
|
||
height: 28px;
|
||
font-size: 20px;
|
||
font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.recommend {
|
||
vertical-align: text-bottom;
|
||
height: 26px;
|
||
}
|
||
|
||
.quyer-tag {
|
||
margin-left: 15px;
|
||
|
||
a {
|
||
color: #333333;
|
||
font-size: 14px;
|
||
margin: 0 15px;
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
outline: none;
|
||
}
|
||
|
||
.current {
|
||
width: 44px;
|
||
height: 26px;
|
||
background: #387df7;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
}
|
||
|
||
// .current::after {
|
||
// content: '';
|
||
// width: 18px;
|
||
// height: 2px;
|
||
// background-color: #5da1ff;
|
||
// margin: 0 auto;
|
||
// display: block;
|
||
// }
|
||
}
|
||
|
||
.more {
|
||
float: right;
|
||
margin-top: 7px;
|
||
margin-right: 30px;
|
||
color: #333333;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.modules-list {
|
||
margin-top: 30px;
|
||
|
||
// margin-bottom: 15px;
|
||
// margin-right: 36px;
|
||
.case-card {
|
||
// width: 593px;
|
||
margin-bottom: 15px;
|
||
|
||
.case-info-image-box {
|
||
position: relative;
|
||
|
||
.case-info {
|
||
width: 385px;
|
||
|
||
.case-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.case-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.case-info-summary {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
height: 82px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 160px;
|
||
height: 105px;
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.case-info-box {
|
||
.case-info {
|
||
.case-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.case-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.case-info-summary {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
height: 82px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-other-info {
|
||
height: 40px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.article-card {
|
||
//width: 100%;
|
||
background: #fff;
|
||
// padding: 30px;
|
||
border-radius: 8px;
|
||
|
||
.article-card-left {
|
||
// float: left;
|
||
.article-card-box {
|
||
.article-info-image-box {
|
||
border-radius: 4px;
|
||
.article-info {
|
||
height: 400px;
|
||
|
||
.article-info-title {
|
||
font-size: 16px;
|
||
color: #00253e;
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.article-info-summary {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
height: 160px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 470px;
|
||
height: 330px;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-card-right {
|
||
// float: right;
|
||
// width: 68%;
|
||
flex: 1;
|
||
margin-left: 28px;
|
||
|
||
.article-card-box {
|
||
// height: 160px;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 16px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0px;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.article-info-box {
|
||
.article-info {
|
||
display: flex;
|
||
|
||
.article-image {
|
||
// width: 150px;
|
||
// height: 150px;
|
||
// margin-right: 10px;
|
||
width: 140px;
|
||
height: 105px;
|
||
margin-top: 10px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.article-body {
|
||
flex: 1;
|
||
|
||
.article-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.article-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.article-info-summary {
|
||
padding-top: 9px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
height: 43px;
|
||
line-height: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-card-box:not(:last-child) {
|
||
border-bottom: 1px solid #ededed;
|
||
}
|
||
}
|
||
|
||
.article-other-info {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.qa-card {
|
||
// width: 298px;
|
||
// height: 320px;
|
||
// padding: 30px;
|
||
box-sizing: border-box;
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 8px;
|
||
// margin-right: 36px;
|
||
background: #fff;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.qa-top {
|
||
& span:first-child {
|
||
height: 24px;
|
||
background: rgba($color: #387df7, $alpha: 0.05);
|
||
// padding: 3px 10px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #387df7;
|
||
// margin-right: 46px;
|
||
}
|
||
|
||
span {
|
||
// font-size: 14px;
|
||
color: #6e7b84;
|
||
}
|
||
}
|
||
|
||
.qa-center {
|
||
position: relative;
|
||
// margin-top: 20px;
|
||
// width: 238px;
|
||
// height: 152px;
|
||
background: rgba($color: #04243c, $alpha: 0.04);
|
||
border-radius: 4px;
|
||
|
||
// padding: 20px;
|
||
.qa-views {
|
||
position: absolute;
|
||
color: #6e7b84;
|
||
// font-size: 14px;
|
||
// left: 20px;
|
||
// bottom: 20px;
|
||
}
|
||
}
|
||
|
||
.qa-char {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|