<template>
  <div>
    <portal-header current="index" ></portal-header>
    <div class="portal-content xcontent" >
      <!-- 推荐课程 -->
      <div class="modules">
        <!--内容块-->
        <div class="modules-title">
          <!-- <img :src="`${webBaseUrl}/images/recommend_course.png`" class="recommend" /> -->
          <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">
            <!-- <span style="margin-right: 20px;cursor: pointer;" @click="nextPage()">换一换</span> -->
            <router-link to="/course">更多&nbsp;></router-link>
          </span>
        </div>
        <div class="modules-list xrow" style="height: 485px;overflow: hidden;">
          <!--一个固定内容-->
          <div class="xrow-course index-course">
            <el-card class="course-card" :body-style="{ padding: '0px' }">
              <a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
                <div class="course-image-box">
                  <el-image class="course-image" style="height: 130px;" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
                  <span class="course-type">录播课</span>
                </div>
                 <el-tooltip class="item"  content="高效谈判系列课" placement="bottom" effect="light">
              <div class="course-title one-line-ellipsis">高效谈判系列课</div>
            </el-tooltip>
                <div class="course-author">
                   <div class="course-author-left" > </div>
                  <div style="flex:1; text-align: center; ">
                    <span class="study-num">2324人学习</span>
                  </div>
                  <div style="padding-left:15px">
                    <div >
                      <span class="course-score-value">5</span>
                    </div>
                  </div>
                </div>
              </a>
            </el-card>
          </div>

          <!--内容列表内容-->
          <div  v-for="course in courseList.list" :key="course.id" class="xrow-course index-course">
            <el-card class="course-card" :body-style="{ padding: '0px' }">
              <a :href="toCourseDetail(course)">
                <div class="course-image-box">
                  <course-image height="130px" :course="course"></course-image>
                  <!-- <el-image class="course-image"  :src="fileBaseUrl+course.coverImg" fit="fit"></el-image> -->
                  <!-- <span v-if="course.type==10" class="course-type"></span>
                  <span v-if="course.type==20" class="course-type"></span> -->
                  <!-- <span v-if="course.type==10" class="course-type-title">微课</span> -->
                  <span v-if="course.type == 20 || 10" class="course-type">录播课</span>
                </div>

            <el-tooltip class="item"  :content="course.name" placement="bottom" effect="light">
                <div class="course-title one-line-ellipsis" >{{ course.name }}</div>
            </el-tooltip>

                <div class="course-author">
                  <!-- <div class="course-author-left"><authorInfo :avatar="course.authorInfo.avatar" :name="course.authorInfo.name"></authorInfo></div> -->
                   <div class="course-author-left" >
                    {{ course.authorInfo.name }}
                   </div>
                  <div style="flex:1; text-align: center; ">
                    <span class="study-num">{{ course.studys }}人学习</span>
                  </div>
                  <div style="padding-left:15px">
                    <div v-if="course.score">
                      <!-- <span><el-rate style="display: inline-block;" disabled v-model="course.score"></el-rate></span> -->
                      <span class="course-score-value">{{ toScore(course.score) }}</span>
                    </div>
                    <div v-else class="course-score-no">未评分</div>
                  </div>
                </div>
                <!-- <div class="course-score">



               </div> -->
              </a>
              <!-- 收藏位置 -->
              <div class="cor-praises"><interactBar :type="1" :data="course" :comments="false" :praises="false" :shares="false" :views="false"></interactBar></div>

              <!-- <a :href="toCourseDetail(course)">
              <div class="cor-icon"><i class="el-icon-caret-right"></i></div>
              </a> -->
              <!-- <div class="cardmark">
                <div class="cardmark-name" v-if="course.forUsers">目标学员</div>
                <div class="cardmark-info">{{course.forUsers}}</div>
                <div class="cardmark-name" v-if="course.value">课程价值</div>
                <div class="cardmark-info">{{course.value}}</div>
                <div class="cardmark-name" v-if="course.summary">课程介绍</div>
                <div class="cardmark-info">{{course.summary}}</div>
              </div> -->
            </el-card>
          </div>
        </div>
      </div>
        <!-- 推荐案例2版 -->
      <div class="modules">
         <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">更多&nbsp;></router-link></span>
      </div>
      <div class="modules-list xrow" style="height: 235px;overflow: hidden;">
         <div class="index-course xrow-course" v-for="ca in caseList.list" :key="ca.id">
         <div  class="casetwo" :body-style="{ padding: '0px' }">
             <!-- <div class="case-top"></div> -->
             <div class="case-conent">
                <!-- <div class="case-time">
                    {{ca.sysCreateTime.substring(0,10)}}
                </div> -->
                 <a :href="'case/detail?id='+ca.id" >
                <span class="case-title one-line-ellipsis">
                   {{ca.title}}
                </span>
                <div class="case-text three-line-ellipsis">
                    {{ca.summary}}
                </div>
                </a>
                <div class="case-inter">
                  <interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
                </div>
                <div style="height:40px;margin-top:10px">
                    <authorInfo :avatar="ca.authorInfo.avatar" :name="ca.authorInfo.name" :sex="ca.authorInfo.sex"></authorInfo></div>
                </div>
             </div>
      </div>
      </div>
      </div>
      <!-- 推荐案例 -->
      <!-- <div class="modules">

      <div class="modules-title">

      <span class="modules-text">推荐案例</span>
      <span class="quyer-tag">
      <a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
      <a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
      </span>
      <span class="more"><router-link to="/case">更多&nbsp;></router-link></span>
      </div>
      <el-row :gutter="15" class="modules-list">

      <el-col :span="12" v-for="ca in caseList.list" :key="ca.id">
      <el-card class="case-card" :body-style="{ padding: '16px' }">
      <div class="case-info-image-box" v-if="ca.coverUrl && ca.coverUrl.length > 0">
      <div class="case-info">
      <div class="case-info-title">
      <a :href="'case/detail?id='+ca.id" target="_blank">{{ca.title}}</a>
      <span class="case-info-time">{{ca.sysCreateTime.substring(0,10)}}</span>
      </div>
      <div class="case-info-summary">
      {{ca.content}}
      </div>
                </div>
                <img width="100%" :src="fileBaseUrl + ca.coverUrl"/>
              </div>
              <div class="case-info-box" v-else>
                <div class="case-info">
                  <div class="case-info-title">
                    <a :href="'case/detail?id='+ca.id" target="_blank">{{ca.title}}</a>
                    <span class="case-info-time">{{ca.sysCreateTime.substring(0,10)}}</span>
                  </div>
                  <div class="case-info-summary">
                     {{ca.content}}
                  </div>
                </div>
              </div>
              <div class="case-other-info">
                <div><authorInfo :avatar="ca.authorInfo.avatar" :name="ca.authorInfo.name" :info="ca.authorInfo.orgInfo" :sex="ca.authorInfo.sex"></authorInfo></div>
                <div><interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar> </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div> -->

      <!-- 推荐文章 -->
      <div class="modules">
        <!--内容块-->
        <div class="modules-title">
          <!-- <img :src="`${webBaseUrl}/images/recommend_article.png`" class="recommend" /> -->
          <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">更多&nbsp;></router-link></span>
        </div>
        <el-card class="modules-list" :body-style="{ padding: '16px' }">
          <div class="article-card" style="display: flex;">
            <!-- 首张 -->
            <div style="width: 430px;" 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="329px" width="440px" :article="articleList.first"></article-image>
                    <!-- <img style="width:100%;" :src="fileBaseUrl+articleList.first.coverurl" /> -->
                    <div class="article-info">
                      <div class="article-info-title " style="display:flex ;margin-top:7px">
                        <div class="one-line-ellipsis" style="flex:1;">
                          <span style="font-weight: 700;font-size: 20px;word-break:break-all;">{{ articleList.first.title }}</span>
                        </div>
                        <div style="flex:1;">
                          <span class="article-info-time ">{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
                        </div>
                        <!-- <a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" target="_blank" style="font-weight: 700;font-size: 20px;">{{articleList.first.title}} </a> -->
                      </div>
                      <div class="article-info-summary two-line-ellipsis" style="margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
                    </div>
                  </div>
                </a>
                <div class="article-other-info" style="margin-top:17px">
                  <div><authorInfo :avatar="articleList.first.authorInfo.avatar" :name="articleList.first.authorInfo.name" :sex="articleList.first.authorInfo.sex"></authorInfo></div>
                  <div><interactBar :type="2" :readonly="true" :data="articleList.first" :views="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="article.id">
                <div class="article-info-box">
                  <div class="article-info">
                    <div class="article-body" style="display:flex;">
                      <div style="flex: 1;">
                        <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
                          <div class="article-info-title" style="display:flex">
                            <div class="two-line-ellipsis" style="flex:1;">
                              <span style="font-weight: 700;font-size: 20px;">{{ article.title }}</span>
                            </div>
                            <div>
                              <span class="article-info-time">{{ article.sysCreateTime.substring(0, 10) }}</span>
                            </div>
                            <!-- <a :href="`${webBaseUrl}/article/detail?id=${article.id}`" target="_blank" style="font-weight: 700;font-size: 20px;"> {{article.title}} </a> -->
                          </div>
                          <div style="display:flex;justify-content: space-between;">
                            <div class="article-info-summary two-line-ellipsis">{{ article.summary }}</div>
                          </div>
                        </a>
                        <div class="article-other-info">
                          <div><authorInfo :avatar="article.authorInfo.avatar" :name="article.authorInfo.name" :sex="article.authorInfo.sex"></authorInfo></div>
                          <div><interactBar :type="2" :readonly="true" :data="article" :views="false"></interactBar></div>
                        </div>
                      </div>
                      <div v-if="article.coverurl != ''" class="article-image"><el-image style="width:100%;height:100%" :src="fileBaseUrl + article.coverurl"></el-image></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 推荐问答 -->
      <div class="modules">
        <!--内容块-->
        <div class="modules-title">
          <!-- <img :src="`${webBaseUrl}/images/recommend_qa.png`" class="recommend" /> -->
          <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">更多&nbsp;></router-link></span>
        </div>
        <el-row :gutter="15" class="modules-list">
          <!--内容列表内容-->
          <el-col :span="12" v-for="qa in qaList.list" :key="qa.id">
            <el-card class="qa-card" :body-style="{ padding: '16px' }">
              <div @click="jumpRouter(qa)" class="qa-info-box">
                <div class="qa-info">
                  <div class="qa-info-title">
                    <span class="one-line-ellipsis qa-info-shrink" style="font-weight: 700;font-size: 20px;">
                      <!-- <span class="qa-dai" >【待解决】</span> -->
                      <!-- <span v-if="qa.isResolve ==true" class="text-status1">【已解决】</span> -->
                      <span class="text-status3">【待解决】</span>
                      {{ qa.title }}
                    </span>
                    <span class="qa-info-time">{{ qa.sysCreateTime.substring(0, 10) }}</span>
                  </div>
                  <div class="qa-info-summary two-line-ellipsis">{{ qa.content }}</div>
                </div>
              </div>
              <div class="qa-other-info">
                <div><authorInfo :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></authorInfo></div>
                <div><interactBar :type="4" :readonly="true" :praises="true" :data="qa" :comments="false" :answers="true" :shares="true" :views="false"></interactBar></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div><a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">&nbsp;&nbsp;&nbsp;</a></div>
    <portal-footer></portal-footer>
    <portalFloatTools></portalFloatTools>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
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 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 interactRowBar from '@/components/Portal/interactRowBar.vue';
import courseImage from '@/components/Course/courseImage.vue';
import articleImage from '@/components/Article/articleImage.vue';
import { toScore} from '@/utils/tools.js';
export default {
  name: 'index',
  components: { portalHeader,ad, portalFooter, articleImage, portalFloatTools, authorInfo, interactRowBar, interactBar, courseImage },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      couname:'',
      isNext: true,
      pageIndex: 1,
      fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      toScore,
      courseList: {
        num: 12,
        orderType: 2,
        list: []
      },
      caseList: {
        num: 6,
        orderType: 2,
        list: []
      },
      articleList: {
        num: 4,
        orderType: 2,
        first: { id: '', authorInfo: {} },
        list: []
      },
      qaList: {
        num: 4,
        orderType: 'praises',
        list: []
      }
    };
  },
  mounted() {
    //console.log(this.$Constants.fileBaseUrl,'fileBaseUrl地址');
    this.getCourseData(1);
    this.getCaseData();
    this.getArticleData();
    this.getQaData();
  },
  methods: {
    jumUX(){
     window.open('https://m.qingxuetang.com/x/?appId=qxtcorp306130','_blank');
    },
    toCourseDetail(item) {

      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: num,
        device:1,
        orderField: orderType == 1 ? '' : 'studys',
        orderAsc: false,
        topOrder:true,
        pageIndex: pageIndex
      };

      apiCoursePortal.pageList(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() {
      let params = {
        pageSize: this.caseList.num,
        orderAsc: false,
        orderField: 'id'
      };
      if (this.caseList.orderType == 2) {
        params.orderField = 'praises';
      }
      apiCase.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 };

              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) {
                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 = [];
      apiArticle.portalList(this.articleList.num, 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);
              }
            });

            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];
                }
                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);
          //this.$message.error(res.message);
        }
      });
    },
    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);
          //this.$message.error(res.message);
        }
      });
    },
    jumpRouter(item) {
      // window.open(`${this.webBaseUrl}/qa/answer?id=${item.id}`)
      this.$router.push({ path: '/qa/answer', query: { id: item.id } });
    }
  }
};
</script>

<style scoped lang="scss">
.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;
}
.casetwo{
  border: 1px solid #F0F0F0;
  width: 100%;
  height: 220px;
  margin-bottom:15px;
 position: relative;
  background-color: #fff;
  .case-top{
    height: 70px;
     background-image: linear-gradient(to right , #b8c7e2, #d0dcf3);
  }
  .case-conent{
    width: 100%;
    height: 100%;
    // box-shadow: 1px 1px 15px #ccc;
    // position: absolute;
    // top: 5%;
    background-color: #fff;
    // left: 4%;
    padding: 16px;
    .case-time{
      font-size: 12px;
      color: #999999;
      text-align: right;
    }
    .case-title{
      margin-top: 10px;
      font-size: 16px;
      color: #333;
      font-weight: bold;
      margin-bottom:10px;
    }
    .case-text{
      height: 55px;
      font-size: 14px;
    color: #888888;
    line-height: 18px;
    margin-bottom:12px;
    }
   ::v-deep .case-inter{
      width: 100%;
      padding-bottom: 10px;
      border-bottom: 1px solid #f3f3f3;
      .interact-bar-btns{
        justify-content: space-between !important;
        .interact-bar-btn{
          margin: 0 0 0 0;
        }
      }

    }

  }
}
// .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 {
  // width: 290px;
  margin-bottom: 15px;
  box-sizing: border-box;
  position: relative;
  background-color: #ffffff;
  ::v-deep .cor-praises {
    position: absolute;
    left: 0;
    top: 0;
    .interact-bar-btn{
      .interact-bar-value{
        display: none;
      }
    }
  }
  .cor-icon {
    position: absolute;
    left: 100px;
    top: 54px;
    border-radius: 50%;
    background: rgba(88, 138, 252, 0.37);

    .el-icon-caret-right {
      font-size: 36px;
      color: #588afc;
    }
  }
  .course-image-box {
    position: relative;
    // width: 362px;
    // height: 165px;
    width: 100%;
    .course-image {
      width: 100%;
      height: 100%;
      // width: 288px;
      // height: 165px;
    }
    .course-type {
      position: absolute;
      top: 5px;
      right: 0px;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: #292828;
      opacity: 0.4;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
      color: #ffffff;
    }
    .course-type-title {
      position: absolute;
      top: 5px;
      right: 0px;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #ffffff;
    }
    .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 {
    padding: 10px 15px;
    font-size: 18px;
    font-weight: 600;
    color: #343434;
  }
  .course-author {
    margin: 5px 15px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .course-author-left {

        font-size: 12px;
        line-height: 30px;
        color: #666;

      // flex: 1;
    }
  }

  .study-num {
    line-height: 30px;
    font-size: 12px;
    color: #8590a6;
  }
  .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;
    }
  }
}
.course-score-no {
  text-align: right;
  font-size: 12px;
  color: #ffb30f;
  line-height: 30px;
}
.course-score-value {
  font-size: 14px;
  //  margin-top: 5px;
  margin-left: 32px;
  line-height: 30px;
  color: #ffb30f;
  font-family: 'Arial';
  // font-size: 30px;
}
.cardmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(101, 101, 101, 0.8);
  pointer-events: none;
  border-radius: 5px;
  padding: 10px;
  opacity: 0;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
  .cardmark-name {
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
    color: #fff;
  }
  .cardmark-info {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }
}
.course-card:hover .cardmark {
  opacity: 1;
}
.modules {
  margin-top: 20px;
  width: 100%;
  .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: #343434;
        font-size: 14px;
        margin: 0 15px;
        display: inline-block;
        text-decoration: none;
        outline: none;
      }
      .current {
        color: #5da1ff;
      }
      .current::after {
        content: '';
        width: 18px;
        height: 2px;
        background-color: #5da1ff;
        margin: 0 auto;
        display: block;
      }
    }
    .more {
      float: right;
      margin-top: 7px;
      color: #666666;
      font-size: 14px;
    }
  }

  .modules-list {
    margin-top: 15px;
    margin-bottom: 15px;
    .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 {
      // height: 483px;
      //  height: 425px;
      .article-card-left {
        float: left;
        width: 30%;
        .article-card-box {
          .article-info-image-box {
            .article-info {
              .article-info-title {
                font-size: 20px;
                color: #343434;
                margin-bottom: 5px;
                margin-top: 5px;

                .article-info-time {
                  font-size: 12px;
                  color: #999999;
                  float: right;
                  margin-top: 8px;
                  font-weight: 500;
                }
              }
              .article-info-summary {
                // padding-top: 30px;
                font-size: 14px;
                color: #666666;
                // height: 28px;
                line-height: 18px;
                font-weight: 500;
              }
            }
            img {
              width: 470px;
              height: 330px;
              //  width: 100%;
              // height: 100%;
            }
          }
        }
      }

      .article-card-right {
        // float: right;
        // width: 68%;
        flex: 1;
        margin-left: 20px;
        .article-card-box {
          // height: 160px;
          margin-bottom: 8px;
          padding-bottom: 8px;
          .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 {
        // height: 40px;
        // margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }

    .qa-card {
      // width: 593px;
      margin-bottom: 15px;
      .qa-info-box {
        cursor: pointer;
        .qa-info {
          .qa-info-title {
            font-size: 18px;
            color: #343434;
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .qa-info-shrink {
              flex-shrink: 10000;
            }
            .qa-info-time {
              font-size: 12px;
              color: #999999;
              float: right;
              margin-top: 8px;
            }
          }
          .qa-info-summary {
            font-size: 14px;
            color: #666666;
            height: 37px;
            overflow: hidden;
            line-height: 18px;
            margin-bottom: 10px;
          }
        }
      }
      .qa-other-info {
        height: 40px;
        // margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
