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="login(1)">登录</a>
            <a @click="login(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')">
              <i class="el-icon-user-solid icon"></i>
            </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>
                <option value="1" selected>课程</option>
                <option value="2">题库</option>
              </select>
            </div>
            <div class="search__input">
              <input type="text" />
            </div>
            <div class="search__btn">搜索</div>
          </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"
              target="view_window"
              href="https://www.xyyxt.net/abount"
              >走进祥粤</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">
              <ul class="list">
                <li v-for="(item, index) in 5" :key="index">
                  <div class="text">
                    <div class="text__title">继续教育</div>
                    <div class="text__desc">
                      <a class="item">建造师-一级</a>
                      <a class="item">建造师-一级</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <div class="swiper">
            <swiper
              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="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">倪虹洁</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">
                  <img src="@/assets/tk.png" alt="" />
                  <div class="text">题库</div>
                </div>
                <div class="type-list__item">
                  <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.projectName + " - " + item.businessName }}
            </div>
          </div>
        </div>
        <div class="course__body">
          <ul class="list clearfix">
            <template v-for="(item, index) in goodsList1[active1].goodsList">
              <li class="course-item" v-if="index < 8" :key="index">
                <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">加购物车</a>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <div class="course__footer">
          <div class="btn">查看更多</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.projectName + " - " + item.businessName }}
            </div>
          </div>
        </div>
        <div class="bank__body">
          <ul class="list clearfix">
            <template v-for="(item, index) in goodsList2[active2].goodsList">
              <li class="bank-item" v-if="index < 8" :key="index">
                <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">加购物车</a>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <div class="bank__footer">
          <div class="btn">查看更多</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 {
      indexToken: "",
      indexUserAccount: "",
      colors: ["red", "green", "blue", "gray", "black"],
      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,
        speed: 300,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      bannerList: [],
      goodsList1: [{}], //推荐课程列表
      goodsList2: [{}], //推荐题库列表
      active1: 0, //推荐课程index
      active2: 0, //推荐题库index
    };
  },
  mounted() {
    this.getActivityList();
    // this.color = this.colors[0];
    this.advertisingList();
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    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;
        });
    },
    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) {
      this.$router.push({
        path,
      });
    },
    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.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">
.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;

          .icon {
            font-size: 20px;
          }
        }
      }
    }

    &__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 {
          text-align: center;
          width: 80px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          font-size: 14px;
          background: #3f8dfd;
        }
      }

      .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;
        .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 {
            height: 400px;
            background: rgba(0, 0, 0, 0.5);

            .list {
              padding-left: 16px;
              li {
                padding: 12px 0;
                height: 80px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.6);
                display: flex;

                .text {
                  &__title {
                    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;
          }
        }

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

          .no-login {
            .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 {
            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 {
          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;

              &: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;

        &: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 {
          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;

              &: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;

        &: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;
      }
    }
  }
}
</style>