mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 03:16:42 +08:00
2104 lines
62 KiB
Vue
2104 lines
62 KiB
Vue
<template>
|
||
<div>
|
||
<div class="course-banner">
|
||
<portal-header current="index" textColor="#000000" style="z-index:999; position: relative;"></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">
|
||
<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">
|
||
<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">
|
||
<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">
|
||
<router-link :to="'/course/studyindex?id='+lastStudy.courseId" >最近学习：{{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>h</p>
|
||
</router-link>
|
||
</li>
|
||
<!-- <li>
|
||
<span class="label">经验值等级</span>
|
||
<p><span>{{userData.level}}</span></p>
|
||
</li> -->
|
||
<li>
|
||
<router-link to="/user/ucurrency">
|
||
<span class="label">我的U币</span>
|
||
<p><span>{{userData.uvalue}}</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="jumUX()" 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 courseList.list" :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 :href="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" :href="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>
|
||
</a>
|
||
<div class="list-active">
|
||
<div class="list-content">
|
||
<div class="list-img">
|
||
<course-image :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">
|
||
<interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
|
||
</div>
|
||
</div>
|
||
|
||
</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>查看详情</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">
|
||
<author-img height="32px" width="32px" :avatar="article.authorInfo.avatar" :aid="article.authorInfo.aid"
|
||
:sex="article.authorInfo.sex"></author-img>
|
||
<span
|
||
style="color: #6E7B84;font-size: 14px;margin:6px 13px 0 10px;">{{article.authorInfo.name}}</span>
|
||
<interactBar :type="2" :readonly="true" :data="article" :views="false" :shares="false"></interactBar>
|
||
</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 == 'praises' ? 'current' : ''" @click="changeQaOrder('praises')">最热</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"></interest-Collection> <!-- 兴趣偏好 -->
|
||
<guide-box ref="guide" @close="closeGuide"></guide-box> <!-- 引导页 -->
|
||
<!--登录勋章-->
|
||
<el-dialog width="320px" class="medalbox" :visible.sync="showLoginMedal" :append-to-body="true" >
|
||
<div class="medal-img">
|
||
<!--登录勋章显示，根据UI显示修改-->
|
||
<img :src="`${webBaseUrl}/images/login_medal.png`" alt="">
|
||
</div>
|
||
</el-dialog>
|
||
</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 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 { 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,
|
||
courseImage,
|
||
InterestCollection,
|
||
GuideBox
|
||
},
|
||
created() {
|
||
this.$store.dispatch('refrashStudyTaskCount');
|
||
//判断是否弹出登录勋章，设置截止日期
|
||
var nowDate = new Date();
|
||
var endDate = new Date('2022-11-18');//先设置时间是11月18日
|
||
if(nowDate<endDate){
|
||
let $this=this;
|
||
apiStat.getUserLoginMedal().then(rs=>{
|
||
if(rs.status==200){
|
||
if(rs.result.show){
|
||
//弹出勋章
|
||
$this.showLoginMedal=true;
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
showLoginMedal:false,//是否显示登录勋章
|
||
lastStudy:{},
|
||
overlayShow:false,
|
||
userData: { uvalue:0, totalStudyHour:0 },
|
||
userHobby:{
|
||
needShow:false,
|
||
localKeyPre:'user-hobby-' //本地存储的key
|
||
},
|
||
needHobbyShow:false,//是否显示兴趣爱好
|
||
formatNum:formatUserNumber,
|
||
cutOrgNamePath:cutOrgNamePath,
|
||
// userInfo: {},
|
||
ankingList: [],
|
||
answersList: [],
|
||
Popularity: [],
|
||
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: []
|
||
},
|
||
caseList: {
|
||
num: 3,
|
||
orderType: 2,
|
||
list: []
|
||
},
|
||
articleList: {
|
||
num: 4,
|
||
orderType: 2,
|
||
first: {
|
||
id: '',
|
||
authorInfo: {}
|
||
},
|
||
list: []
|
||
},
|
||
qaList: {
|
||
num: 4,
|
||
orderType: 'praises',
|
||
list: []
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getCourseData(1);
|
||
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
|
||
}
|
||
},
|
||
methods: {
|
||
// 上次学习记录
|
||
getLastStudy() {
|
||
apicourseStudy.lastStudy().then(res => {
|
||
if (res.status === 200) {
|
||
this.lastStudy = res.result;
|
||
//console.log(this.lastStudy,'this.lastStudy');
|
||
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);
|
||
//console.log("=== "+localGuide);
|
||
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();}
|
||
}
|
||
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();}
|
||
}
|
||
|
||
//测试情况下
|
||
// this.$refs.guide.show();
|
||
},
|
||
closeGuide(){ //关闭引导页
|
||
if(this.userHobby.needShow){
|
||
//需要弹出兴趣收集页，弹出兴趣收集页
|
||
this.$refs.userCollection.show();
|
||
}
|
||
},
|
||
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).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;
|
||
|
||
// if (item.type == 10) {
|
||
// return this.webBaseUrl + '/course/micro?id=' + item.id;
|
||
// } else if (item.type == 20) {
|
||
// return this.webBaseUrl + '/course/detail?id=' + item.id;
|
||
// }
|
||
// return '';
|
||
},
|
||
orderTypeFilter(val) {
|
||
this.courseList.orderType = val;
|
||
this.pageIndex = 1;
|
||
this.getCourseData();
|
||
},
|
||
nextPage() {
|
||
this.pageIndex += 1;
|
||
if (this.isNext) {
|
||
this.getCourseData(this.pageIndex);
|
||
}
|
||
},
|
||
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.list.length > 0) {
|
||
let courseIds = [];
|
||
res.result.list.forEach(item => {
|
||
item.authorInfo = {
|
||
aid: '',
|
||
name: '',
|
||
orgInfo: '',
|
||
avatar: '',
|
||
code: '',
|
||
sex: null
|
||
};
|
||
courseIds.push(item.id);
|
||
});
|
||
this.loadCouserTeacher(res.result.list, courseIds);
|
||
this.courseList.list = res.result.list;
|
||
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.cases(this.caseList.orderType).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">
|
||
.medal-img{
|
||
text-align: center;
|
||
}
|
||
.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.2);
|
||
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: #333;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
p {
|
||
margin-top: 5px;
|
||
text-align: center;
|
||
color: #000;
|
||
span {
|
||
font-size: 22px;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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:-70px;
|
||
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: 35px;
|
||
|
||
.case-inter-left{
|
||
flex: 1;
|
||
// display: flex;
|
||
}
|
||
.interact-bar-index{
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.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 {
|
||
.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>
|