zc_saas_pc/src/pages/home/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>
            <a
              @click="go('/person-center')"
              @mouseenter="mouseover"
              @mouseleave="mouseLeave"
            >
              <i class="el-icon-user-solid icon"></i>
              <transition name="fade">
                <ul class="modal-box" v-show="showBox">
                  <li @click.stop="go('/person-center/my-course')">我的课程</li>
                  <li @click.stop="go('/person-center/my-bank')">我的题库</li>
                  <li @click.stop="$tools.exit">退出登录</li>
                </ul>
              </transition>
            </a>
          </div>
        </div>
      </div>
      <div class="header__body">
        <div class="container clearfix">
          <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>
              </select>
            </div>
            <div class="search__input">
              <input v-model="searchKey" type="text" autocomplete="off" />
            </div>
            <el-button type="primary" @click="search" class="search__btn"
              >搜索</el-button
            >
          </div>
          <div class="contact" 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
            >
          </template>
        </div>
      </div>
      <div class="swiper-wrap" :style="{ background: color }">
        <div class="container">
          <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 }}
                      </div>
                    </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)">
                      {{ item.educationName }}
                    </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 }}</a
                      >
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <div class="swiper">
            <swiper
              v-if="bannerList.length > 1"
              ref="mySwiper"
              @slideChangeTransitionStart="slideChangeTransitionStart($event)"
              class=""
              v-bind:options="swiperOptions"
            >
              <swiper-slide
                v-for="(item, index) in bannerList"
                v-bind:key="index"
              >
                <img
                  :src="$tools.splitImgHost(item.adverUrl, true, 1272)"
                  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="off"
                        v-model="loginForm.account"
                        placeholder="请输入手机号或身份证号"
                      ></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="请输入密码"
                      ></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>
                </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="off"
                        v-model="loginSmsForm.tel"
                        placeholder="请输入手机号"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="input">
                    <el-form-item prop="code">
                      <el-input
                        autocomplete="off"
                        v-model="loginSmsForm.code"
                        placeholder="请输入验证码"
                      >
                        <span slot="suffix" @click="getLoginSms" 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>
                </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="" />
                  <div class="text">课程</div>
                </div>
                <div
                  class="type-list__item"
                  @click="go('/person-center/my-bank')"
                >
                  <img src="@/assets/tk.png" alt="" />
                  <div class="text">题库</div>
                </div>
                <div
                  class="type-list__item"
                  @click="go('/person-center/my-order')"
                >
                  <img src="@/assets/dd.png" alt="" />
                  <div class="text">订单</div>
                </div>
              </div>

              <div class="history">
                <div class="btn">上次播放</div>
                <div class="title">2022年二级建造师建设工程施工管理</div>
                <div class="progress">
                  <span>已学70%</span>
                  <span>2022-02-17</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="course">
      <div class="container">
        <div class="course__header">
          <div class="title">推荐课程</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>
        <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"
                v-if="index < 12"
                :key="index"
                @click="goodsDetail(item, 1)"
              >
                <div class="course-item__img">
                  <div class="note" v-if="item.year">{{ item.year }}</div>
                  <img
                    v-if="item.coverUrl"
                    :src="$tools.splitImgHost(item.coverUrl)"
                    alt=""
                  />
                </div>
                <div class="course-item__title">
                  {{ item.goodsName }}
                </div>
                <div class="course-item__desc">
                  <div class="price">￥{{ item.standPrice }}</div>
                  <a class="add" @click.stop="addCart(item)">加购物车</a>
                </div>
              </li>
            </template>
          </ul>
        </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="title">推荐题库</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>
        <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 < 12"
                :key="index"
                @click="goodsDetail(item, 2)"
              >
                <div class="bank-item__img">
                  <div class="note" v-if="item.year">{{ item.year }}</div>
                  <img
                    v-if="item.coverUrl"
                    :src="$tools.splitImgHost(item.coverUrl)"
                    alt=""
                  />
                </div>
                <div class="bank-item__title">
                  {{ item.goodsName }}
                </div>
                <div class="bank-item__desc">
                  <div class="price">￥{{ item.standPrice }}</div>
                  <a class="add" @click.stop="addCart(item)">加购物车</a>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <div class="bank__footer">
          <div class="btn" @click="go('/bank-list')">查看更多</div>
        </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">
            </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>
  </div>
</template>

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

    showNav: function () {
      return function (list) {
        var newList = [];
        if (list) {
          newList = list.filter((item) => {
            return item.status === 1;
          });
        }
        return newList;
      };
    },
  },
  data() {
    return {
      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: 1,
      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",
    };
  },
  mounted() {
    this.getActivityList();
    // this.color = this.colors[0];
    this.advertisingList();
    this.educationTypeList();
    this.advertisingHomeLocation();
  },
  methods: {
    ...mapMutations(["setUserInfo"]),

    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 {
        this.$router.push({
          path: "/bank-list",
          query: {
            searchKey: this.searchKey,
          },
        });
      }
    },
    advertisingHomeLocation() {
      this.$request.advertisingHomeLocation().then((res) => {
        this.swiperOptions.autoplay.delay = res.data.intervalTime * 1000;
      });
    },
    /**
     * 查看商品详情
     */
    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) => {
        this.$set(this.slideList, index, res.rows);
        if (res.rows.length >= 2) {
          let newRows = res.rows.slice(0, 2);
          let length = 0;
          newRows.forEach((row) => {
            let str = row.projectName + "-" + row.businessName;
            length = length + str.length;
          });

          if (length >= 17) {
            this.$set(this.typeList[index], "list", res.rows.slice(0, 1));
          } else {
            this.$set(this.typeList[index], "list", res.rows.slice(0, 2));
          }
        }
      });
    },

    /**
     * 加入购物车
     */
    addCart(item) {
      this.$request
        .addCart({ goodsId: item.goodsId })
        .then((res) => {
          if (res) {
            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;
          this.goodsList2 = goodsList2;
        });
    },
    goCourse(item) {
      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) => {
          /**
           * 如果存在-调用轮播图列表
           */
          if (res.data.length) {
            this.$request
              .advertisingList({ locationId: res.data[0].locationId })
              .then((res) => {
                this.bannerList = res.rows;
                this.colors = res.rows.map((item) => {
                  return item.color ? item.color : "rgba(225,225,225,0.1)";
                });
                this.color = this.colors[0];
              });
          }
        });
    },
    go(path, query) {
      this.$router.push({
        path,
        query,
      });
    },
    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;
          this.$request
            .login(this.loginForm)
            .then((res) => {
              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() {
      this.$refs.loginSmsForm.validateField("tel", (valid) => {
        if (!valid) {
          if (this.countDown == 0) {
            if (this.getLoginCodeLock) {
              return;
            }
            this.getLoginCodeLock = true;
            this.$request
              .getLoginSms({ tel: 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.getLoginCodeLock = false;
              });
          }
        }
      });
    },
    /**
     * 手机号登录
     */
    loginSms() {
      this.$refs.loginSmsForm.validate((valid) => {
        if (valid) {
          this.isloginSms = true;
          this.$request
            .loginSms(this.loginSmsForm)
            .then((res) => {
              this.isloginSms = false;
              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.bindShow = true;
              }
            })
            .catch((err) => {
              this.isloginSms = false;
              this.$message({
                message: err.msg,
                type: "error",
              });
            });
        }
      });
    },
    /**
     * 获取用户登录信息
     */
    getInfo() {
      this.$request
        .getInfo()
        .then((res) => {
          this.loginForm = {};
          this.loginSmsForm = {};
          this.isLogin = false;
          this.isloginSms = false;
          this.setUserInfo(res.data);
        })
        .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.getInfo();
            })
            .catch((err) => {
              this.isBind = false;
              this.$message({
                message: err.msg,
                type: "error",
              });
            });
        }
      });
    },

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

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.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: 40px;
        line-height: 40px;
        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: 40px;
        line-height: 40px;
        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: 40px;
              line-height: 40px;
              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;
      .logo {
        float: left;
        img {
          width: 162px;
          height: 33px;
        }
        h1 {
          background: url("~@/assets/logo.png") no-repeat center;
          width: 162px;
          height: 33px;
        }
      }

      .search {
        float: left;
        margin-left: 160px;
        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: 40px;

    .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 {
              opacity: 0;
              transition: all 0.3s;
              width: 672px;
              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;
              li {
                padding: 12px 0;
                height: 80px;
                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 {
                    margin-top: 16px;
                    .item {
                      font-size: 14px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #ffffff;
                      margin-right: 30px;
                    }
                  }
                }
              }
            }
          }
        }

        .swiper {
          .swiper-slide {
            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 {
                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;

      .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);
      }

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

        .tab {
          cursor: pointer;
          user-select: none;
          // width: 88px;
          padding: 0px 6px;
          height: 24px;
          border: 1px solid #f84e05;
          border-radius: 12px;
          text-align: center;
          line-height: 24px;
          color: #f84e05;
          font-size: 14px;
          margin: 0 4px;

          &.active {
            color: #fff;
            background: #f84e05;
          }
        }
      }
    }

    &__body {
      .list {
        width: 100%;

        .course-item {
          cursor: pointer;
          float: left;
          margin: 100px 9px 0;
          width: 300px;
          height: 178px;
          background: #ffffff;
          box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
          border-radius: 10px;
          position: relative;
          background: #fff;
          padding-top: 100px;

          &__img {
            width: 280px;
            height: 178px;
            background: #ffffff;
            box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            position: absolute;
            left: 10px;
            top: -78px;
            background: rgba(122, 136, 246, 1);
            overflow: hidden;
            .note {
              position: absolute;
              top: 0px;
              left: 0px;
              z-index: 2;
              width: 80px;
              height: 24px;
              background: #d94404;
              box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
              border-radius: 10px 0px 20px 0px;
              text-align: center;
              line-height: 24px;
              color: #fff;
            }
            img {
              width: 100%;
              height: 100%;
            }
          }

          &__title {
            margin: 0 8px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 24px;
          }

          &__desc {
            height: 32px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin-left: 8px;
            display: flex;
            justify-content: space-between;

            .price {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ff2d55;
              line-height: 32px;
            }

            .add {
              display: block;
              width: 118px;
              height: 32px;
              line-height: 30px;
              background: #f2f4f7;
              border-radius: 10px 0px 10px 0px;
              font-size: 16px;
              color: #3f8dfd;
              text-align: center;
              transition: all 0.2s;
              &:hover {
                background: #3f8dfd;
                color: #f2f4f7;
              }
            }
          }
        }
      }
    }

    &__footer {
      overflow: hidden;
      .btn {
        cursor: pointer;
        width: 146px;
        height: 40px;
        background: #e3eaf7;
        border-radius: 8px;
        margin: 20px auto 40px;
        color: #3f8dfd;
        text-align: center;
        line-height: 40px;
        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;

      .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);
      }

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

        .tab {
          cursor: pointer;
          user-select: none;
          padding: 0px 6px;
          // width: 88px;
          height: 24px;
          border: 1px solid #437cff;
          border-radius: 12px;
          text-align: center;
          line-height: 24px;
          color: #437cff;
          font-size: 14px;
          margin: 0 4px;

          &.active {
            color: #fff;
            background: #437cff;
          }
        }
      }
    }

    &__body {
      .list {
        width: 100%;

        .bank-item {
          cursor: pointer;
          float: left;
          margin: 100px 9px 0;
          width: 300px;
          height: 178px;
          background: #ffffff;
          box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
          border-radius: 10px;
          position: relative;
          background: #fff;
          padding-top: 100px;

          &__img {
            width: 280px;
            height: 178px;
            background: #ffffff;
            box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            position: absolute;
            left: 10px;
            top: -78px;
            background: rgba(122, 136, 246, 1);
            overflow: hidden;

            .note {
              position: absolute;
              top: 0px;
              left: 0px;
              z-index: 2;
              width: 80px;
              height: 24px;
              background: #437cff;
              box-shadow: 0px 1px 1px 0px rgba(56, 104, 217, 0.4);
              border-radius: 10px 0px 20px 0px;
              text-align: center;
              line-height: 24px;
              color: #fff;
            }
            img {
              width: 100%;
              height: 100%;
            }
          }

          &__title {
            margin: 0 8px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 24px;
          }

          &__desc {
            height: 32px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin-left: 8px;
            display: flex;
            justify-content: space-between;

            .price {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ff2d55;
              line-height: 32px;
            }

            .add {
              display: block;
              width: 118px;
              height: 32px;
              line-height: 30px;
              background: #f2f4f7;
              border-radius: 10px 0px 10px 0px;
              font-size: 16px;
              color: #3f8dfd;
              text-align: center;
              transition: all 0.2s;

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

    &__footer {
      overflow: hidden;
      .btn {
        cursor: pointer;
        width: 146px;
        height: 40px;
        background: #e3eaf7;
        border-radius: 8px;
        margin: 20px auto 40px;
        color: #3f8dfd;
        text-align: center;
        line-height: 40px;
        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;
}
</style>