saas_pc/src/pages/home1/index.vue

<template>
  <div class="home">
    <header class="header">
      <div class="header__header">
        <div class="container">
          <div class="text-list" v-if="!userInfo">
            <a @click="go('/login', { state: 1 })">登录</a>
            <a @click="go('/login', { state: 2 })">注册</a>
          </div>

          <div class="icon-list" v-else>
            <!-- <a @click="go('/person-center/my-message')">
              <i class="el-icon-message-solid icon"></i>
            </a> -->
            <el-badge
              :is-dot="msgCount > 0 ? true : false"
              class="item"
              style="vertical-align: baseline"
            >
              <el-button
                style="font-size: 20px; padding: 0px"
                icon="el-icon-message-solid"
                type="text"
                @click="go('/person-center/my-message')"
              ></el-button>
            </el-badge>
            <!-- <el-tooltip placement="bottom-end" v-model="msgShow" :hide-after="0" manual popper-class="tooltipStyle">
              <el-badge :is-dot="msgCount > 0 ? true : false" class="item" style="vertical-align: baseline">
                <el-button style="font-size: 20px; padding: 0px" icon="el-icon-message-solid" type="text"
                  @click="go('/person-center/my-message')"></el-button>
              </el-badge>
              <div slot="content" class="dis_plays">
                <p style="max-width: 247px">{{ msgData.text }}</p>
                <div class="toolbth" @click="newGoToStudy">立即学习</div>
                <i style="font-size: 18px;cursor:pointer;" class="el-icon-close" @click="clearMsg"></i>
              </div>
            </el-tooltip> -->
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <i
                  class="el-icon-user-solid"
                  style="
                    font-size: 20px;
                    color: #3f8dfd;
                    cursor: pointer;
                    margin-left: 20px;
                  "
                  @click="go('/person-center/my-course')"
                ></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">我的课程</el-dropdown-item>
                <el-dropdown-item command="2">我的题库</el-dropdown-item>
                <el-dropdown-item command="3">个人中心</el-dropdown-item>
                <!-- <el-dropdown-item command="5">跳小程序</el-dropdown-item> -->
                <el-dropdown-item command="4">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div class="header__body">
        <div class="container clearfix topBoxy">
          <a class="logo">
            <img
              v-if="header.companyLogo"
              :src="$tools.splitImgHost(header.companyLogo)"
              alt=""
            />
            <h1 v-else></h1>
          </a>
          <div class="search">
            <div class="search__select">
              <select v-model="type">
                <option value="1">课程</option>
                <option value="2">题库</option>
                <option value="6">直播</option>
              </select>
            </div>
            <div class="search__input">
              <input
                v-model="searchKey"
                type="text"
                autocomplete="new-password"
              />
            </div>
            <el-button type="primary" @click="search" class="search__btn"
              >搜索</el-button
            >
          </div>
          <div
            class="contact"
            v-show="false"
            v-if="header.serviceTel.status == 1"
          >
            <div class="contact__phone">{{ header.serviceTel.tel }}</div>
            <div class="contact__time">
              {{ header.serviceTel.time }}
            </div>
          </div>
        </div>
      </div>
    </header>

    <section class="section">
      <div class="container">
        <div class="tabs">
          <template v-for="(item, index) in showNav(header.Nav)">
            <a v-if="item.name === '首页'" :key="index" class="tab active"
              >首页</a
            >
            <a
              v-if="item.name === '关于我们'"
              :key="index"
              class="tab"
              @click="go('/about')"
              >关于我们</a
            >
            <a
              v-if="item.name === '课程'"
              :key="index"
              class="tab"
              @click="go('/course-list')"
              >课程</a
            >
            <a
              v-if="item.name === '题库'"
              :key="index"
              class="tab"
              @click="go('/bank-list')"
              >题库</a
            >
            <a
              v-if="item.name === '直播'"
              :key="index"
              class="tab"
              @click="go('/live-list')"
              >直播</a
            >
            <a
              v-if="item.name === '资料'"
              :key="index"
              class="tab"
              @click="go('/handout-list')"
              >资料</a
            >
            <a
              v-if="item.name === '积分'"
              :key="index"
              class="tab"
              @click="go('/points-list')"
              >积分</a
            >
          </template>
        </div>
      </div>
      <div class="swiper-wrap" :style="{ background: color }">
        <div class="container" style="width:1180px;">
          <div class="left-box">
            <div class="left-box__header">课程导航</div>
            <div class="left-box__body">
              <div class="bg"></div>
              <div class="slide-list">
                <div
                  class="slide-list__item"
                  v-for="(type, typeItem) in typeList"
                  :key="'type' + typeItem"
                >
                  <div class="title" @click="goCourse(type)">
                    {{ type.educationName }}
                  </div>
                  <ul class="nav">
                    <li
                      v-for="(slideItem, slideIndex) in slideList[typeItem]"
                      :key="'item' + slideIndex"
                      @click="goCourse(slideItem)"
                    >
                      <div class="text">
                        <!-- {{ slideItem.projectName }}-{{ slideItem.businessName }} -->
                        {{ slideItem.aliasName }}
                      </div>
                    </li>
                    <li
                      v-if="$store.state.TENANT_NANE == '680980002459417532'"
                      @click="goLink('https://cranesystem.gdcic.net:8080/')"
                    >
                      <span class="text"
                        >建筑施工特种作业人员
                        <span v-if="type.educationName == '考前培训'"
                          >（建筑电工、司索工、施工升降机）</span
                        >
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
              <ul class="list">
                <li v-for="(item, index) in typeList" :key="index">
                  <div class="text">
                    <div class="text__title" @click="goCourse(item)">
                      <span>{{ item.educationName }}</span>
                      <i
                        class="el-icon-arrow-right"
                        style="float: right;margin-right: 10px;"
                      ></i>
                    </div>
                    <div class="text__desc">
                      <a
                        @click="goCourse(aItem)"
                        class="item"
                        v-for="(aItem, aIndex) in item.list"
                        :key="'aItem' + aIndex"
                      >
                        <!-- {{ aItem.projectName }}-{{ aItem.businessName }} -->
                        {{ aItem.aliasName }}
                      </a>
                      <a
                        v-if="$store.state.TENANT_NANE == '680980002459417532'"
                        @click="goLink('https://cranesystem.gdcic.net:8080/')"
                        class="item"
                        >建筑施工特种作业人员<span
                          v-if="item.educationName == '考前培训'"
                          >（建筑电工、司索工、施工升降机）</span
                        ></a
                      >
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <div class="swiper" style="width:880px;">
            <swiper
              v-if="bannerList.length > 0"
              ref="mySwiper"
              @slideChangeTransitionStart="slideChangeTransitionStart($event)"
              class=""
              v-bind:options="swiperOptions"
            >
              <swiper-slide
                v-for="(item, index) in bannerList"
                v-bind:key="index"
                @click.native="swiperJump(item)"
              >
                <img :src="$tools.splitImgHost(item.adverUrl)" alt="" />
              </swiper-slide>

              <div class="swiper-pagination" slot="pagination"></div>
              <!-- <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div> -->
            </swiper>
          </div>

          <div class="right-box">
            <div class="bg"></div>
            <div class="no-login" v-if="!userInfo">
              <template v-if="loginType == 1">
                <el-form :model="loginForm" ref="loginForm" :rules="loginRules">
                  <div class="input">
                    <el-form-item prop="account">
                      <el-input
                        autocomplete="new-password"
                        v-model="loginForm.account"
                        @keyup.enter.native="login"
                        :placeholder="
                          dualStatus ? '请输入手机号' : '请输入手机号或身份证号'
                        "
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="pwd">
                      <el-input
                        autocomplete="new-password"
                        type="password"
                        v-model="loginForm.pwd"
                        placeholder="请输入密码"
                        @keyup.enter.native="login"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="input" v-if="dualStatus">
                    <el-form-item prop="code">
                      <el-input
                        autocomplete="new-password"
                        v-model="loginForm.code"
                        placeholder="请输入验证码"
                      >
                        <span
                          slot="suffix"
                          @click="getLoginSms(1)"
                          class="btn"
                          >{{
                            countDown == 0
                              ? "获取验证码"
                              : `${countDown}秒重新获取`
                          }}</span
                        >
                      </el-input>
                    </el-form-item>
                  </div>
                  <el-button
                    type="primary"
                    class="submit"
                    @click="login()"
                    :loading="isLogin"
                    >登录</el-button
                  >
                  <div class="bottom-text">
                    <a class="text" @click="loginType = 2">手机验证码登录</a>
                    <a class="text" @click="go('/login?state=2')">注册</a>
                  </div>
                  <div class="dis_flex" v-if="mobile.smallQrCodeShow && false">
                    <div class="dis_flex_wxloginImg">
                      <img src="@/assets/wx.png" alt="" @click="wxLoginFunc" />
                    </div>
                  </div>
                </el-form>
              </template>

              <template v-if="loginType == 2">
                <el-form
                  :model="loginSmsForm"
                  ref="loginSmsForm"
                  :rules="loginSmsRules"
                >
                  <div class="input">
                    <el-form-item prop="tel">
                      <el-input
                        autocomplete="new-password"
                        v-model="loginSmsForm.tel"
                        placeholder="请输入手机号"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="code">
                      <el-input
                        autocomplete="new-password"
                        v-model="loginSmsForm.code"
                        placeholder="请输入验证码"
                      >
                        <span
                          slot="suffix"
                          @click="getLoginSms(2)"
                          class="btn"
                          >{{
                            countDown == 0
                              ? "获取验证码"
                              : `${countDown}秒重新获取`
                          }}</span
                        >
                      </el-input>
                    </el-form-item>
                  </div>
                  <el-button
                    type="primary"
                    class="submit"
                    :loading="isloginSms"
                    @click="loginSms()"
                    >登录</el-button
                  >
                  <div class="bottom-text">
                    <a class="text" @click="loginType = 1">账号密码登录</a>
                    <a class="text" @click="go('/login?state=2')">注册</a>
                  </div>
                  <div class="dis_flex" v-if="mobile.smallQrCodeShow && false">
                    <div class="dis_flex_wxloginImg">
                      <img src="@/assets/wx.png" alt="" @click="wxLoginFunc" />
                    </div>
                  </div>
                </el-form>
              </template>
            </div>

            <div class="has-login" v-else>
              <div class="userinfo">
                <img src="@/assets/ava.png" class="avatar" alt="" />
                <div class="nickname">{{ userInfo && userInfo.realname }}</div>
              </div>

              <div class="type-list">
                <div
                  class="type-list__item"
                  @click="go('/person-center/my-course')"
                >
                  <img
                    src="@/assets/kc.png"
                    alt=""
                    style="width:64px;height:64px;"
                  />
                  <div class="text">课程</div>
                </div>
                <div
                  class="type-list__item"
                  @click="go('/person-center/my-bank')"
                >
                  <img
                    src="@/assets/tk.png"
                    alt=""
                    style="width:64px;height:64px;"
                  />
                  <div class="text">题库</div>
                </div>
                <div
                  class="type-list__item"
                  @click="go('/person-center/my-order')"
                >
                  <img
                    src="@/assets/dd.png"
                    alt=""
                    style="width:64px;height:64px;"
                  />
                  <div class="text">订单</div>
                </div>
              </div>

              <div class="history">
                <div class="btn">上次播放</div>
                <div class="title" @click="goLast">
                  {{ recordList.goodsName }}
                </div>
                <div class="progress">
                  <span
                    >已学{{
                      toFixed(
                        (recordList.videoCurrentTime /
                          recordList.durationTime) *
                          100
                      )
                    }}%</span
                  >
                  <span>{{ recordList.date }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="course">
      <div class="container">
        <div class="course__header">
          <div class="lefts">
            <div class="title">推荐课程</div>
            <div class="tabs">
              <template v-for="(item, index) in courseName">
                <div
                  v-if="index <= 7"
                  :key="index"
                  class="tab"
                  :class="couIndex === index ? 'active' : ''"
                  @click="changeCou(item.recommendId, index)"
                >
                  {{ item.name }}
                </div>
              </template>
            </div>
          </div>
          <div class="course__footer">
            <div class="btn" @click="go('/course-list')">查看<br />更多</div>
          </div>
        </div>
        <!-- <div class="tabs">
          <div
            v-for="(item, index) in goodsList1"
            :key="index"
            class="tab"
            :class="active1 === index ? 'active' : ''"
            @click="active1 = index"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="course__body">
          <p
            v-if="
              !goodsList1[active1] ||
              !goodsList1[active1].goodsList ||
              goodsList1[active1].goodsList.length === 0
            "
            class="text_align"
          >
            该培训项目无推荐课程
          </p>
          <ul v-else class="list clearfix">
            <template v-for="(item, index) in goodsList1[active1].goodsList">
              <li class="course-item" :key="index" v-if="index < 15">
                <GoodsItem :item="item"></GoodsItem>
              </li>
            </template>
          </ul>
        </div> -->

        <div class="course__body">
          <p v-if="!goodsList1.length" class="text_align">
            该培训项目无推荐课程
          </p>
          <ul v-else class="list clearfix">
            <template v-for="(item, index) in goodsList1">
              <li class="course-item" :key="index">
                <GoodsItem :item="item"></GoodsItem>
              </li>
            </template>
          </ul>
        </div>

        <div class="pagination">
          <el-pagination
            @current-change="currentChangeCou"
            background
            layout="prev, pager, next"
            :total="paramList[0].total"
            :current-page.sync="paramList[0].currentPage"
            :page-size="paramList[0].pageSize"
          >
          </el-pagination>
        </div>

        <!-- <div class="course__footer">
          <div class="btn" @click="go('/course-list')">查看更多</div>
        </div> -->
      </div>
    </section>

    <section class="bank">
      <div class="container">
        <div class="bank__header">
          <div class="lefts">
            <div class="title">推荐题库</div>
            <div class="tabs">
              <template v-for="(item, index) in bankName">
                <div
                  v-if="index <= 7"
                  :key="index"
                  class="tab"
                  :class="bankIndex === index ? 'active' : ''"
                  @click="changebank(item.recommendId, index)"
                >
                  {{ item.name }}
                </div></template
              >
            </div>
          </div>
          <div class="bank__footer">
            <div class="btn" @click="go('/bank-list')">查看<br />更多</div>
          </div>
        </div>
        <!-- <div class="tabs">
          <div
            v-for="(item, index) in goodsList2"
            :key="index"
            class="tab"
            :class="active2 === index ? 'active' : ''"
            @click="active2 = index"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="bank__body">
          <p
            v-if="
              !goodsList2[active2] ||
              !goodsList2[active2].goodsList ||
              goodsList2[active2].goodsList.length === 0
            "
            class="text_align"
          >
            该培训项目无推荐题库
          </p>
          <ul v-else class="list clearfix">
            <template v-for="(item, index) in goodsList2[active2].goodsList">
              <li
                class="bank-item"
                v-if="index < 15"
                :key="index"
                @click="goodsDetail(item, 2)"
              >
                <GoodsItem :item="item"></GoodsItem>
              </li>
            </template>
          </ul>
        </div> -->

        <div class="bank__body">
          <p v-if="!goodsList2.length" class="text_align">
            该培训项目无推荐题库
          </p>
          <ul v-else class="list clearfix">
            <template v-for="(item, index) in goodsList2">
              <!-- @click="goodsDetail(item, 2)" -->
              <li class="bank-item" :key="index">
                <GoodsItem :item="item"></GoodsItem>
              </li>
            </template>
          </ul>
        </div>

        <div class="pagination">
          <el-pagination
            @current-change="currentChangeBank"
            background
            layout="prev, pager, next"
            :total="paramList[1].total"
            :current-page.sync="paramList[1].currentPage"
            :page-size="paramList[1].pageSize"
          >
          </el-pagination>
        </div>
      </div>
    </section>

    <el-dialog
      :visible.sync="bindShow"
      width="348px"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="bind"
    >
      <a class="bind__close" @click="bindNext">X</a>
      <div class="bind__header">关联学员身份</div>
      <div class="bind__body">
        <el-form
          class="bind-form"
          ref="bindForm"
          :model="bindForm"
          :rules="bindForm"
        >
          <el-form-item prop="realname"
            ><el-input placeholder="真实姓名" v-model="bindForm.realname">
            </el-input
          ></el-form-item>
          <el-form-item prop="idCard">
            <el-input
              placeholder="身份证号码"
              v-model="bindForm.idCard"
              maxlength="18"
            >
            </el-input
          ></el-form-item>
          <el-button
            class="submit"
            type="primary"
            :loading="isBind"
            round
            @click="bind()"
            >确定</el-button
          >
          <div class="bind-next" @click="bindNext">下次再关联</div>
        </el-form>
      </div>
    </el-dialog>

    <ToolBar></ToolBar>
    <Footer></Footer>
    <wx-login ref="wxLogin" @wxLoginBack="wxLoginBack"></wx-login>

    <RebuildModal
      ref="rebuildModal"
      @rebuildSubmit="rebuildSubmit($event)"
    ></RebuildModal>
    <div id="packPageDialog" v-if="packPageStatus">
      <div class="img-box">
        <img
          src="@/assets/img/tcs.png"
          alt=""
          @click="swiperJump({ jumpType: 2, jumpUrl: '/packPage' })"
        />
        <i class="el-icon-circle-close" @click="closePackPage"></i>
      </div>
    </div>
  </div>
</template>

<script>
import RebuildModal from "@/components/rebuildModal";
import wxLogin from "@/components/wxLogin/index";
import Footer from "@/components/footer/index";
import ToolBar from "@/components/toolbar/index";
import GoodsItem from "@/components/goodsItem/index";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { mapGetters, mapMutations } from "vuex";
import { checkFunc } from "@/router";
import "swiper/swiper-bundle.css";
export default {
  name: "Home",
  components: {
    swiper,
    swiperSlide,
    Footer,
    GoodsItem,
    ToolBar,
    wxLogin,
    RebuildModal
  },
  computed: {
    ...mapGetters(["userInfo", "token", "header", "msgCount", "mobile"]),

    showNav: function() {
      return function(list) {
        var newList = [];
        if (list) {
          newList = list.filter(item => {
            return item.status === 1;
          });
        }
        return newList;
      };
    }
  },
  data() {
    return {
      dualStatus: false, //是否双重校验
      msgShow: false,
      msgData: {},
      showBox: false,
      indexToken: "",
      indexUserAccount: "",
      colors: [],
      color: "",
      countDown: 0,
      countDownTimer: null,
      loginRules: {
        account: [
          { required: true, trigger: "blur", message: "请输入手机号/身份证号" }
        ],
        pwd: [{ required: true, trigger: "blur", message: "请输入密码" }]
      },
      loginSmsRules: {
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        tel: [{ required: true, trigger: "blur", message: "请输入手机号" }]
      },
      bindRules: {
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        tel: [{ required: true, trigger: "blur", message: "请输入手机号" }],
        pwd: [{ required: true, trigger: "blur", message: "请输入密码" }],
        read: [{ required: true, trigger: "blur", message: "请勾选服务协议" }]
      },
      bindShow: false,
      loginType: 2,
      loginForm: {},
      loginSmsForm: {},
      bindForm: {},
      isLogin: false,
      isLoginSms: false,
      isBind: false,
      getLoginCodeLock: false,

      isloginSms: false,
      swiperOptions: {
        loop: true,
        observer: true,
        observeParents: true,
        speed: 300,
        autoplayDisableOnInteraction: false,
        autoplayStopOnLast: false,
        autoplay: {
          delay: 1000,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      bannerList: [],
      goodsList1: [{}], //推荐课程列表
      goodsList2: [{}], //推荐题库列表
      typeList: [],
      slideList: [],
      active1: 0, //推荐课程index
      active2: 0, //推荐题库index
      searchKey: "",
      type: "1",
      recordList: {},
      params: {
        pageNum: 1,
        pageSize: 10
      },
      paramList: [
        {
          pageNum: 1,
          pageSize: 15,
          total: 0
        },
        {
          pageNum: 1,
          pageSize: 15,
          total: 0
        }
      ],
      total1: 0,
      total2: 0,
      courseName: [],
      bankName: [],
      couIndex: 0,
      bankIndex: 0,
      courseId: "",
      bankId: "",
      packPageStatus: false
    };
  },
  created() {
    this.goodsList1 = [];
    this.goodsList2 = [];
    this.courseLists();
  },
  mounted() {
    //双重校验
    this.$request.dualAuth().then(res => {
      this.dualStatus = res.data === "1" ? true : false;
      if (this.dualStatus) {
        this.loginRules["account"][0].message = "请输入手机号";
      }
    });
    if (this.userInfo) {
      this.getRecord();
      // this.getmsg();
      this.getMsgCount();
    }
    // this.getActivityList();
    // this.color = this.colors[0];
    this.advertisingList();
    this.educationTypeList();
  },
  watch: {
    userInfo(val) {
      if (val) {
        this.getRecord();
        // this.getmsg();
        this.getMsgCount();
      }
    }
  },
  methods: {
    closePackPage() {
      this.packPageStatus = false;
      this.$store.state.packPageStatus = false;
    },
    //课程
    courseLists() {
      this.$request
        .appCommonActivityRecommendList({ platform: 2, status: 1 })
        .then(async res => {
          if (res.code == 200) {
            let list = res.rows || [];
            //课程
            this.courseName = list
              .filter(x => x.type == 1)
              .sort((a, b) => a.sort - b.sort)
              .map(x => {
                return {
                  name: x.name,
                  recommendId: x.recommendId
                };
              });
            console.log("couIndex", this.couIndex, this.courseName);
            //题库
            this.bankName = list
              .filter(x => x.type == 2)
              .sort((a, b) => a.sort - b.sort)
              .map(x => {
                return {
                  name: x.name,
                  recommendId: x.recommendId
                };
              });
            if (this.courseName.length) {
              this.courseId = this.courseName[0].recommendId;
              let list1 = await this.getGoodsList(
                this.courseName[0].recommendId,
                0
              );
              console.log(list1, "list1");
              this.goodsList1.push(...list1);
            }

            if (this.bankName.length) {
              this.bankId = this.bankName[0].recommendId;
              let list2 = await this.getGoodsList(
                this.bankName[0].recommendId,
                1
              );
              this.goodsList2.push(...list2);
            }
          }
        });
    },
    getGoodsList(recommendId, num) {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: `/app/common/activity/recommend/goodsList`,
          method: "get",
          params: {
            pageNum: this.paramList[num].pageNum,
            pageSize: this.paramList[num].pageSize,
            recommendId: recommendId
          },
          noToken: true
        }).then(res => {
          if (res.code == 200) {
            this.paramList[num].total = res.total;
            resolve(res.rows);
          }
        });
      });
    },
    async currentChangeCou(val) {
      console.log("vallll", val);
      this.paramList[0].pageNum = val;
      this.goodsList1 = [];
      let list1 = await this.getGoodsList(this.courseId, 0);
      this.goodsList1.push(...list1);
    },
    async changeCou(recommendId, index) {
      this.couIndex = index;
      this.courseId = recommendId;
      this.paramList[0].pageNum = 1;
      this.paramList[0].currentPage = 1;
      this.goodsList1 = [];
      let list1 = await this.getGoodsList(recommendId, 0);
      this.goodsList1.push(...list1);
    },
    async currentChangeBank(val) {
      console.log("val--", val);
      this.paramList[1].pageNum = val;
      this.goodsList2 = [];
      let list2 = await this.getGoodsList(this.bankId, 1);
      this.goodsList2.push(...list2);
    },
    async changebank(recommendId, index) {
      this.bankIndex = index;
      this.bankId = recommendId;
      this.paramList[1].pageNum = 1;
      this.paramList[1].currentPage = 1;
      this.goodsList2 = [];
      let list2 = await this.getGoodsList(recommendId, 1);
      this.goodsList2.push(...list2);
    },
    /**
     * 关闭消息
     */
    clearMsg() {
      let ary = {
        userId: this.msgData.userId,
        msgId: this.msgData.id,
        updateTime: new Date(new Date().toLocaleDateString()).getTime()
      };
      localStorage.setItem("msg", JSON.stringify(ary));
      this.msgShow = false;
    },
    rebuildSubmit(item) {
      this.$router.push({
        path: `/my-course-detail/${item.goodsId}`,
        query: {
          gradeId: item.gradeId,
          orderGoodsId: item.orderGoodsId,
          rebuild: 1
        }
      });
    },
    getGoodsData() {
      return new Promise((resolve, reject) => {
        this.$request.goodsDetail(this.msgData.goodsId).then(res => {
          resolve(res.data);
        });
      });
    },
    /**
     * 前往学习
     */
    async newGoToStudy() {
      let item = await this.getGoodsData();
      if (item.goodsType == 1) {
        this.sysTime = this.$tools.timest();
        item.orderGoodsId = this.msgData.orderGoodsId;
        this.canJump(item).then(res => {
          this.clearMsg();
          this.$router.push({
            path: `/my-course-detail/${item.goodsId}`,
            query: {
              gradeId: item.gradeId,
              orderGoodsId: item.orderGoodsId,
              courseId: res.rows[0].courseId || ""
            }
          });
        });

        // arsty = '立刻学习';

        //题库
      } else if (item.goodsType == 2) {
        this.clearMsg();
        this.$router.push({
          path: "/person-center/my-bank/bank-detail/" + item.goodsId,
          query: {
            orderGoodsId: item.orderGoodsId
          }
        });
      }
    },
    canJump(item) {
      return new Promise(resolve => {
        this.$request
          .orderInfo({
            orderGoodsId: item.orderGoodsId
          })
          .then(async res => {
            let items = res.data;
            let currentTime = this.$tools.timest();
            if (items.interfaceAccountId > 0) {
              //学习账号已开通

              if (items.learnStatus == 1) {
                //跳转第三方h5

                const confirmText = [
                  "您的学习账号已经开通，请按照步骤操作，进行学习。",
                  "1.点击【跳转学习网址】按钮",
                  "2.打开学习网址后，选择【个人用户】进行登录",
                  "(1)账号：您个人的身份证号码",
                  "(2)密码：身份证号码，再加111111"
                ];
                const newDatas = [];
                const h = this.$createElement;
                for (const i in confirmText) {
                  newDatas.push(h("p", null, confirmText[i]));
                }
                this.$confirm(h("div", null, newDatas), "温馨提示", {
                  confirmButtonText: "跳转学习网址",
                  cancelButtonText: "关闭",
                  closeOnClickModal: false,
                  closeOnPressEscape: false,
                  distinguishCancelAndClose: false,
                  showClose: false
                })
                  .then(_ => {
                    window.open("http://admin.zhujianpeixun.com/", "_blank");
                  })
                  .catch(_ => {});

                return;
              } else {
                this.$message({
                  type: "warning",
                  message:
                    "您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！"
                });
                return;
              }
            }
            // //内部系统
            // if (items.interfacePushId > 0 && items.officialStatus != 1) {
            //   this.$message({
            //     type: "warning",
            //     message:
            //       "机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！",
            //   });
            //   return;
            // }
            if (items.goodsType !== 6) {
              if (
                this.sysTime <= items.serviceStartTime ||
                this.sysTime >= items.serviceEndTime
              ) {
                this.$message({
                  type: "warning",
                  message: "不在学习服务期，不能进入学习"
                });
                return;
              }

              if (
                (items.classStartTime &&
                  this.sysTime <= items.classStartTime) ||
                (items.classEndTime && this.sysTime >= items.classEndTime)
              ) {
                this.$message({
                  type: "warning",
                  message: "不在班级有效期，不能进入学习"
                });
                return;
              }

              if (items.learningStatus == 2) {
                this.$message({
                  type: "warning",
                  message: "开放学习时间待定，不能进入学习"
                });
                return;
              }

              if (items.classStatus == 0) {
                this.$message({
                  type: "warning",
                  message: "尚未开班，不能进入学习"
                });
                return;
              }
              if (
                items.learningStatus == 3 &&
                this.sysTime < items.learningTimeStart
              ) {
                this.$message({
                  type: "warning",
                  message: "不在开放学习时间,不能进入学习"
                });
                return;
              }

              let rebuildStatus = await this.courseGoodsRebuildStatus(
                items.goodsId,
                items.gradeId
              );

              if (rebuildStatus == 0) {
                this.$refs.rebuildModal.showModal(items);
                return;
              }
            }

            // if (item.educationName == "继续教育") {
            this.$request
              .lockLockStatus({
                action: "jxjy"
              })
              .then(res => {
                //有其他端在操作，不能学习
                this.$message({
                  type: "warning",
                  message: res.msg
                });
              })
              .catch(err => {
                //可以学习
                this.$request
                  .courseCourseList({
                    pageNum: 1,
                    pageSize: 1,
                    goodsId: items.goodsId,
                    gradeId: items.gradeId
                  })
                  .then(res => {
                    if (res.rows.length) {
                      resolve(res);
                    } else {
                      this.$message({
                        type: "warning",
                        message: "课程内暂无可以学习的科目"
                      });
                    }
                  });
              });

            // } else {
            //   this.$request
            //     .courseCourseList({
            //       pageNum: 1,
            //       pageSize: 1,
            //       goodsId: items.goodsId,
            //       gradeId: items.gradeId,
            //     })
            //     .then((res) => {
            //       if (res.rows.length) {
            //         resolve(res);
            //       } else {
            //         this.$message({
            //           type: "warning",
            //           message: "课程内暂无可以学习的科目",
            //         });
            //       }
            //     });
            // }
          });
      });
    },

    /**
     * @param {Object} goodsId 商品id
     * 查询商品重修状态
     */
    courseGoodsRebuildStatus(goodsId, gradeId) {
      return new Promise(resolve => {
        this.$request
          .courseGoodsRebuildStatus({
            goodsId: goodsId,
            gradeId: gradeId
          })
          .then(res => {
            resolve(res.data);
          });
      });
    },
    /**
     * 微信登入
     */
    wxLoginFunc() {
      this.$refs.wxLogin.openBoxs();
    },
    /**
     * 微信登入—返回数据
     */
    wxLoginBack(res) {
      localStorage.setItem("user_account", res.data.user_account);
      localStorage.setItem("token", res.data.token);
      if (res.data.full_info) {
        this.getInfo();
      } else {
        this.indexUserAccount = res.data.user_account;
        this.indexToken = res.data.token;
        this.isLogin = false;
        // 弹窗
        this.bindShow = true;
      }
    },
    goLast() {
      if (this.recordList.goodsType == 6) {
        this.go("/my-live-detail/" + this.recordList.goodsId, {
          gradeId: this.recordList.gradeId,
          orderGoodsId: this.recordList.orderGoodsId,
          courseId: this.recordList.courseId
        });
      } else if (this.recordList.goodsType == 1) {
        this.$router.push({
          path: `/my-course-detail/${this.recordList.goodsId}`,
          query: {
            gradeId: this.recordList.gradeId,
            orderGoodsId: this.recordList.orderGoodsId,
            courseId: this.recordList.courseId,
            chapterId: this.recordList.chapterId,
            moduleId: this.recordList.moduleId,
            sectionId: this.recordList.sectionId,
            recordingUrl: this.recordList.recordingUrl,
            liveUrl: this.recordList.liveUrl,
            sectionType: this.recordList.sectionType,
            liveStartTime: this.recordList.liveStartTime,
            liveEndTime: this.recordList.liveEndTime
          }
        });
      }
    },
    swiperJump(swiper) {
      if (swiper.jumpType == 1) {
        //无跳转
        return;
      } else if (swiper.jumpType == 2) {
        //url
        window.open(swiper.jumpUrl, "_blank");
      } else if (swiper.jumpType == 3) {
        //内部接口
        this.$router.push({
          path: swiper.jumpUrl
        });
      }
    },
    handleCommand(command) {
      switch (command) {
        case "1":
          this.go("/person-center/my-course");
          break;
        case "2":
          this.go("/person-center/my-bank");
          break;

        case "3":
          this.go("/person-center/my-info");
          break;
        case "4":
          this.$tools.exit();
          break;
        case "5":
          console.log("------command:", command);
          break;
        default:
          break;
      }
    },
    toFixed(num) {
      if (num) {
        let str = String(num).indexOf(".");

        if (str != -1) {
          return +num.toFixed(2);
        } else {
          return num;
        }
      } else {
        return 0;
      }
    },
    ...mapMutations(["setUserInfo", "getMsgCount"]),
    /**
     * 播放记录
     */
    getRecord() {
      this.$request
        .studRrecordListUserRecord({
          pageNum: 1,
          pageSize: 1
        })
        .then(res => {
          if (res.rows.length) {
            this.recordList = res.rows[0];
          }
        });
    },
    search() {
      if (!this.searchKey.trim()) {
        this.$message({
          type: "warning",
          duration: 2000,
          message: "请输入搜索内容"
        });

        return;
      }
      let type = this.type;

      //根据类型跳转题库或者列表页面
      if (type == "1") {
        this.$router.push({
          path: "/course-list",
          query: {
            searchKey: this.searchKey
          }
        });
      } else if (type == "6") {
        this.$router.push({
          path: "/live-list",
          query: {
            searchKey: this.searchKey
          }
        });
      } else {
        this.$router.push({
          path: "/bank-list",
          query: {
            searchKey: this.searchKey
          }
        });
      }
    },
    /**
     * 查看商品详情
     */
    goodsDetail(item, type) {
      if (type === 1) {
        this.$router.push({
          path: "/course-detail/" + item.goodsId
        });
      }
      if (type === 2) {
        this.$router.push({
          path: "/bank-detail/" + item.goodsId
        });
      }
    },
    educationTypeList() {
      this.$request.educationTypeList().then(res => {
        this.typeList = res.rows.slice(0, 5);
        this.typeList.forEach((typeItem, index) => {
          this.businessList(typeItem.id, index);
        });
      });
    },

    businessList(educationId, index) {
      this.$request
        .businessList({ educationId })
        .then(res => {
          let rows = res.rows.filter(item => item.aliasName);
          this.$set(this.slideList, index, rows);
          if (rows.length >= 2) {
            let newRows = rows.slice(0, 2);
            let length = 0;
            newRows.forEach(row => {
              let str = row.projectName + "-" + row.businessName;
              length = length + str.length;
            });

            if (length >= 7) {
              this.$set(this.typeList[index], "list", rows.slice(0, 5));
            } else {
              this.$set(this.typeList[index], "list", rows.slice(0, length));
            }
          } else {
            this.$set(this.typeList[index], "list", rows);
          }
        })
        .catch(err => {
          console.log(err, "err");
        });
    },

    /**
     * 加入购物车
     */
    addCart(item) {
      this.$request
        .addCart({ goodsId: item.goodsId })
        .then(res => {
          if (res) {
            this.getCartCount();
            this.$message({
              message: "加入购物车成功",
              type: "success"
            });
          }
        })
        .catch(err => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning"
            });
          }
        });
    },
    /**
     * 获取推荐商品
     */
    getActivityList() {
      this.$request
        .appCommonActivityRecommendList({ platform: 2, status: 1 })
        .then(res => {
          let goodsList1 = []; //推荐视频商品
          let goodsList2 = []; //推荐题库商品
          res.rows.forEach(item => {
            if (item.type === 1) {
              goodsList1.push(item);
            }
            if (item.type === 2) {
              goodsList2.push(item);
            }
          });
          this.goodsList1 = goodsList1.sort((a, b) => a.sort - b.sort);
          this.goodsList2 = goodsList2.sort((a, b) => a.sort - b.sort);
        });
    },
    goCourse(item) {
      console.log("sdsf", item);
      if (item.topicId) {
        this.$router.push({
          path: "/goodsTopic",
          query: {
            topicId: item.topicId
          }
        });
        return;
      }

      this.$router.push({
        path: "/course-list",
        query: {
          educationId: item.educationId ? item.educationId : item.id || "",
          projectId: item.projectId || "",
          businessId: item.educationId ? item.id : ""
        }
      });
    },
    slideChangeTransitionStart(e) {
      this.color = this.colors[this.$refs.mySwiper.swiper.realIndex];
    },
    advertisingList() {
      this.$request
        .advertisinghomeLocationList({
          platform: 2, //1小程序2PC网站
          status: 1,
          locationKey: "home-banner" //首页轮播KEY
        })
        .then(res => {
          this.swiperOptions.autoplay.delay = res.data[0].intervalTime * 1000;
          /**
           * 如果存在-调用轮播图列表
           */
          if (res.data.length) {
            this.$request
              .advertisingList({ locationId: res.data[0].locationId })
              .then(res => {
                if (res.rows.length < 2) {
                  this.swiperOptions.loop = false;
                }
                this.bannerList = res.rows;
                this.colors = res.rows.map(item => {
                  if (
                    item.jumpUrl == "/packPage" &&
                    this.$store.state.packPageStatus
                  ) {
                    this.packPageStatus = true;
                  }
                  return item.color ? item.color : "rgba(225,225,225,0.1)";
                });
                this.color = this.colors[0];
              });
          }
        });
    },
    go(path, query) {
      this.$router.push({
        path,
        query
      });
    },
    goLink(path) {
      window.open(path);
    },
    mouseover() {
      clearTimeout(this.timer);
      this.showBox = true;
    },

    mouseLeave() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.showBox = false;
      }, 500);
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.isLogin = true;
          let loginForm = JSON.parse(JSON.stringify(this.loginForm));
          loginForm.pwd = this.$tools.encryptor(loginForm.pwd);
          console.log(this.loginForm);
          if (this.dualStatus) {
            loginForm.tel = loginForm.account;
          }
          this.$request
            .login(loginForm)
            .then(res => {
              localStorage.setItem("user_account", res.data.user_account);
              localStorage.setItem("token", res.data.token);
              if (res.data.full_info) {
                // localStorage.setItem("user_account", res.data.user_account);
                // localStorage.setItem("token", res.data.token);

                this.getInfo();
              } else {
                this.indexUserAccount = res.data.user_account;
                this.indexToken = res.data.token;
                this.isLogin = false;
                // 弹窗
                this.bindShow = true;
              }
            })
            .catch(err => {
              this.isLogin = false;
              this.$message({
                message: err.msg,
                type: "error"
              });
            });
        }
      });
    },
    /**
     * 获取登录短信
     */
    getLoginSms(int) {
      this.$refs[int === 1 ? "loginForm" : "loginSmsForm"].validateField(
        int === 1 ? "account" : "tel",
        valid => {
          if (!valid) {
            if (this.countDown == 0) {
              if (this.getLoginCodeLock) {
                return;
              }
              this.getLoginCodeLock = true;
              this.$request
                .getLoginSms({
                  tel:
                    int === 1 ? this.loginForm.account : this.loginSmsForm.tel
                })
                .then(res => {
                  this.getLoginCodeLock = false;
                  this.$message({
                    message: `验证码已发送`,
                    type: "success"
                  });
                  this.countDown = 60;
                  this.countDownTimer = setInterval(() => {
                    if (this.countDown == 0) {
                      clearInterval(this.countDownTimer);
                    } else {
                      this.countDown--;
                    }
                  }, 1000);
                })
                .catch(err => {
                  this.$message.error(err.msg);
                  this.getLoginCodeLock = false;
                });
            }
          }
        }
      );
    },
    /**
     * 手机号登录
     */
    loginSms() {
      this.$refs.loginSmsForm.validate(valid => {
        if (valid) {
          this.isloginSms = true;
          this.$request
            .loginSms(this.loginSmsForm)
            .then(res => {
              this.isloginSms = false;
              localStorage.setItem("user_account", res.data.user_account);
              localStorage.setItem("token", res.data.token);
              this.$tools.setUuid(new Date().valueOf() + "");
              if (res.data.full_info) {
                this.getInfo();
              } else {
                this.indexUserAccount = res.data.user_account;
                this.indexToken = res.data.token;
                this.bindShow = true;
              }
            })
            .catch(err => {
              this.isloginSms = false;
              this.$message({
                message: err.msg,
                type: "error"
              });
            });
        }
      });
    },
    /**
     * 消息提示
     */
    getmsg() {
      this.$request.informUserselectLastUnStudyMsg().then(res => {
        if (res.data && res.data.id) {
          let today = new Date(new Date().toLocaleDateString()).getTime();
          if (localStorage.getItem("msg")) {
            let ary = JSON.parse(localStorage.getItem("msg"));
            if (ary.updateTime === today) {
              this.msgShow = false;
              return;
            }
          }
          this.$nextTick(() => {
            this.msgData = res.data;
            this.msgShow = true;
          });
        } else {
          this.msgShow = false;
        }
      });
    },
    /**
     * 获取用户登录信息
     */
    getInfo() {
      this.$request
        .getInfo({ fromPlat: 2 })
        .then(res => {
          this.loginForm = {};
          this.loginSmsForm = {};
          this.isLogin = false;
          this.isloginSms = false;
          this.setUserInfo(res.data);
          checkFunc();
          // this.getmsg();
        })
        .catch(err => {
          this.isLogin = false;
          this.isloginSms = false;
          this.$message({
            message: err.msg,
            type: "error"
          });
        });
    },
    bind() {
      this.$refs.bindForm.validate(valid => {
        if (valid) {
          this.isBind = true;
          let bindForm = JSON.parse(JSON.stringify(this.bindForm));
          bindForm.token = this.indexToken;
          this.$request
            .bindIdCard(bindForm)
            .then(res => {
              this.isBind = false;
              this.bindShow = false;
              this.$message({
                message: "关联成功",
                type: "success"
              });
              localStorage.setItem("user_account", this.indexUserAccount);
              localStorage.setItem("token", this.indexToken);
              this.$tools.setUuid(new Date().valueOf() + "");
              this.getInfo();
            })
            .catch(err => {
              this.isBind = false;
              this.$message({
                message: err.msg,
                type: "error"
              });
            });
        }
      });
    },

    bindNext() {
      this.bindShow = false;
      this.indexToken = "";
      this.indexUserAccount = "";
      this.getInfo();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
/deep/ .el-input__inner::placeholder {
  color: #777 !important;
}
.text_align {
  text-align: center;
  font-size: 18px;
  margin: 40px 0px;
}

.home {
  .header {
    background: #ffffff;

    &__header {
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);

      .text-list {
        height: 26px;
        line-height: 26px;
        text-align: right;
        font-size: 0;

        a {
          color: #3f8dfd;
          font-size: 14px;
          padding: 0 14px;

          &:nth-last-of-type(1) {
            padding-right: 0;
            border-left: 1px solid #3f8dfd;
          }
        }
      }

      .icon-list {
        height: 26px;
        line-height: 26px;
        text-align: right;
        font-size: 0;

        a {
          color: #3f8dfd;
          font-size: 14px;
          padding: 0 14px;
          position: relative;

          .icon {
            font-size: 20px;
          }

          .modal-box {
            width: 162px;
            background: #ffffff;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            position: absolute;
            top: 34px;
            left: -40px;

            li {
              margin-left: 10px;
              border-bottom: 1px solid #eeeeee;
              height: 26px;
              line-height: 26px;
              cursor: pointer;
              padding-left: 5px;
              color: #666666;
              text-align: left;

              &:hover {
                background: #eeeeee;
                color: #3f8dfd;
              }

              &:nth-last-of-type(1) {
                border: 0;
              }
            }
          }
        }
      }
    }

    &__body {
      margin-top: 16px;
      .topBoxy {
        display: flex;
        align-items: center;
        .logo {
          width: 300px;
          // float: left;

          img {
            max-width: 300px;
            // height: 33px;
          }

          h1 {
            background: url("~@/assets/logo.png") no-repeat center;
            width: 162px;
            height: 33px;
          }
        }

        .search {
          flex-shrink: 0;
          // float: left;
          margin-left: 30px;
          width: 648px;
          background: #fafbfc;
          border: 1px solid #3f8dfd;
          border-radius: 8px;
          display: flex;
          overflow: hidden;

          &__select {
            width: 76px;
            border-right: 1px solid #fff;

            select {
              text-align: center;
              width: 100%;
              height: 100%;
              border: 0;
              outline: none;
            }
          }

          &__input {
            flex: 1;

            input {
              width: 100%;
              height: 100%;
            }
          }

          &__btn {
            padding: 0;
            text-align: center;
            width: 80px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border-radius: 0;
          }
        }

        .contact {
          // float: right;
          padding-left: 45px;
          background: url("~@/assets/cus.png") no-repeat left top;

          &__phone {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #666666;
          }

          &__time {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #666666;
          }
        }
      }
    }
  }

  .section {
    margin-top: 10px;

    .tabs {
      margin-left: 324px;

      .tab {
        display: inline-block;
        width: 138px;
        height: 40px;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        color: #333;

        &.active {
          color: #3f8dfd;
          background: #f0f5fc;
        }
      }
    }

    .swiper-wrap {
      transition: background 0.3s;
      height: 400px;
      position: relative;

      .container {
        position: relative;
        height: 400px;

        .left-box {
          position: absolute;
          top: -40px;
          left: 0;
          height: 440px;
          width: 300px;
          z-index: 10;

          &__header {
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-size: 16px;
            background: #3f8dfd;
            text-align: center;
          }

          &__body {
            position: relative;
            height: 400px;
            background: rgba(0, 0, 0, 0.5);
            overflow: hidden;

            &:hover {
              overflow: visible;

              .slide-list {
                opacity: 1;
                left: 100%;
              }
            }

            .slide-list {
              height: 100%;
              opacity: 0;
              transition: all 0.3s;
              width: 580px;
              padding: 0;
              background: rgba(255, 255, 255, 1);
              position: absolute;
              top: 0;
              left: 0;
              padding-left: 24px;
              z-index: 10;

              &__item {
                min-height: 80px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ddd;

                &:nth-last-of-type(1) {
                  border: 0;
                }

                .title {
                  cursor: pointer;
                  color: #fff;
                  width: 120px;
                  height: 28px;
                  border: 1px solid #ffffff;
                  border-radius: 14px;
                  background: #3f8dfd;
                  line-height: 26px;
                  text-align: center;
                  border-radius: 15px;
                  margin-right: 10px;
                }

                .nav {
                  flex: 1;
                  display: flex;
                  flex-wrap: wrap;

                  li {
                    margin: 9px 24px 9px 0;
                    display: flex;

                    .text {
                      cursor: pointer;
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #666;
                    }
                  }
                }
              }
            }

            .bg {
              backdrop-filter: blur(10px);
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 12;
            }

            .list {
              position: relative;
              z-index: 22;
              padding-left: 16px;
              height: 100%;
              overflow-y: auto;
              &::-webkit-scrollbar {
                width: 5px;
                height: 9px;
              }

              /*定义滚动条轨道 内阴影+圆角*/
              &::-webkit-scrollbar-track {
                background-color: inherit;
                border: none;
                /* margin: 6px; */
                border-radius: 10px;
                /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; */
              }

              /*定义滑块 内阴影+圆角*/
              &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                position: relative;
                right: 2px;
                /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
                background-color: #c6c6cd;
                width: 6px;
              }
              li {
                padding: 12px 0;
                min-height: 80px;
                max-height: 200px;
                // overflow-y: auto;
                border-bottom: 1px solid rgba(255, 255, 255, 0.6);
                display: flex;

                &:nth-last-of-type(1) {
                  border: 0;
                }

                .text {
                  flex: 1;

                  &__title {
                    cursor: pointer;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                  }

                  &__desc {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-top: 16px;

                    .item {
                      // flex-shrink: 0;
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: rgba(225, 225, 225, 0.8);
                      margin-right: 30px;
                      margin-bottom: 10px;
                      &:hover {
                        color: #fff;
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .swiper {
          .swiper-slide {
            cursor: pointer;
            height: 400px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .swiper-pagination {
            text-align: right;
            padding-right: 324px;

            /deep/ .swiper-pagination-bullet {
              background: rgba(255, 255, 255, 0.4);

              &-active {
                background: rgba(255, 255, 255, 1);
              }
            }
          }
        }

        .right-box {
          width: 300px;
          background: rgba(0, 0, 0, 0.5);
          position: absolute;
          right: 0;
          bottom: 0;
          top: 0;
          z-index: 10;

          .bg {
            backdrop-filter: blur(10px);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
          }

          .no-login {
            position: relative;
            z-index: 10;

            .input {
              margin: 16px;
              height: 40px;
              background: #ffffff;
              border-radius: 8px;

              input {
                padding: 0 16px;
                width: 100%;
                height: 100%;
                font-size: 14px;
                color: #333;

                &::placeholder {
                  color: #999;
                }
              }

              .btn {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #3f8dfd;
                white-space: nowrap;
                cursor: pointer;
              }
            }

            .submit {
              margin: 16px;
              font-size: 16px;
              margin-top: 16px;
              box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
              display: block;
              width: 268px;
            }

            .bottom-text {
              margin: 16px;
              display: flex;
              justify-content: space-between;

              .text {
                color: #fff;
              }
            }
          }

          .has-login {
            position: relative;
            z-index: 10;
            padding: 14px 0 0 14px;

            .userinfo {
              display: flex;
              align-items: center;

              .avatar {
                width: 40px;
                height: 40px;
              }

              .nickname {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #ffffff;
                margin-left: 7px;
              }
            }

            .type-list {
              display: flex;
              margin-top: 28px;
              padding-bottom: 14px;
              border-bottom: 1px solid #fff;

              &__item {
                cursor: pointer;
                margin-right: 38px;

                .img {
                  width: 64px;
                  height: 64px;
                }

                .text {
                  text-align: center;
                  margin-top: 10px;
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #ffffff;
                }

                &:nth-last-of-type(1) {
                  margin-right: 0;
                }
              }
            }

            .history {
              border-bottom: 1px solid #fff;
              padding-bottom: 15px;

              .btn {
                margin-top: 15px;
                width: 64px;
                height: 24px;
                border: 1px solid #ffffff;
                border-radius: 8px;
                text-align: center;
                line-height: 24px;
                color: #fff;
              }

              .title {
                cursor: pointer;
                margin-top: 15px;
                padding-right: 15px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
              }

              .progress {
                margin-top: 15px;
                display: flex;
                justify-content: space-between;
                padding-right: 15px;

                span {
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
    }
  }

  .course {
    background: #f5f7fa;
    padding-top: 40px;

    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid #dcdcdc;

      .lefts {
        display: flex;
      }

      .title {
        background: url("~@/assets/video.png") no-repeat left center;
        padding-left: 36px;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #333333;
        text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
        flex-shrink: 0;
      }
    }

    .tabs {
      margin-left: 28px;
      display: flex;
      align-items: center;

      .tab {
        cursor: pointer;
        color: #888888;
        font-size: 14px;
        margin-right: 32px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;

        &.active {
          font-weight: 600;
          color: #222222;
        }
      }
    }

    .pagination {
      padding: 30px 0;
      text-align: center;
    }

    &__body {
      .list {
        width: 100%;

        .course-item {
          float: left;
        }
      }
    }

    &__footer {
      overflow: hidden;
      flex-shrink: 0;

      .btn {
        cursor: pointer;
        width: 72px;
        // height: 28px;
        line-height: 28px;
        background: #d5e4ff;
        border-radius: 4px;
        // margin: 20px auto 40px;
        color: #3f8dfd;
        text-align: center;
        transition: all 0.2s;

        &:hover {
          color: #fff;
          box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
          background: #3f8dfd;
        }
      }
    }
  }

  .bank {
    background: #fff;
    padding-top: 40px;

    &__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid #dcdcdc;

      .lefts {
        display: flex;
      }

      .title {
        background: url("~@/assets/exercise.png") no-repeat left center;
        padding-left: 36px;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #333333;
        text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
        flex-shrink: 0;
      }
    }
    .tabs {
      margin-left: 40px;
      display: flex;
      align-items: center;

      .tab {
        cursor: pointer;
        color: #888888;
        font-size: 14px;
        margin-right: 32px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        &.active {
          font-weight: 600;
          color: #222222;
        }
      }
    }
    .pagination {
      padding: 30px 0;
      text-align: center;
    }

    &__body {
      .list {
        width: 100%;

        .bank-item {
          float: left;
        }
      }
    }

    &__footer {
      overflow: hidden;
      flex-shrink: 0;
      .btn {
        cursor: pointer;
        width: 72px;
        // height: 28px;
        line-height: 28px;
        background: #d5e4ff;
        border-radius: 4px;
        // margin: 20px auto 40px;
        color: #3f8dfd;
        text-align: center;
        transition: all 0.2s;

        &:hover {
          color: #fff;
          box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
          background: #3f8dfd;
        }
      }
    }
  }

  .bind {
    /deep/ .el-dialog__header {
      display: none;
    }

    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-bottom: 1px solid #eeeeee;
    }

    &__body {
      height: 248px;
      padding: 24px;
      position: relative;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;

      .submit {
        width: 100%;
      }

      .bind-next {
        font-size: 14px;
        text-align: center;
        color: #999;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  height: 0;
}

.fade-enter-to,
.fade-leave {
  opacity: 1;
  height: 122px;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.dis_flex {
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;

  .dis_flex_wxloginImg {
    cursor: pointer;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    line-height: 76px;
    text-align: center;

    img {
      vertical-align: middle;
      width: 40px;
      height: 40px;
    }
  }
}

/deep/ .el-badge__content.is-fixed {
  top: 7px;
}

.dis_plays {
  display: flex;
  align-items: center;
}

.toolbth {
  border-radius: 55px;
  background-color: #fff;
  color: #3f8dfd;
  font-size: 14px;
  padding: 5px 14px;
  margin-right: 16px;
  user-select: none;
  cursor: pointer;
}
</style>
<style lang="scss">
.tooltipStyle {
  background-color: #3f8dfd !important;
  color: #fff;
}

.tooltipStyle .popper__arrow {
  border-bottom-color: #3f8dfd !important;
}

.tooltipStyle .popper__arrow::after {
  border-bottom-color: #3f8dfd !important;
}
#packPageDialog {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  & > .img-box {
    position: relative;
    text-align: center;
    & > img {
      cursor: pointer;
    }
    & > i {
      vertical-align: top;
      color: #fff;
      cursor: pointer;
      font-size: 40px;
    }
  }
}
</style>