|
|
@@ -1,2606 +1,263 @@
|
|
|
<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 id="home_new">
|
|
|
+ <ul class="content_main ul_first">
|
|
|
+ <li class="main_li" v-for="(item, index) in workMsg" :key="index">
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
+ <div class="r_r">
|
|
|
+ <h4>{{ item.label }}</h4>
|
|
|
+ <span>{{ item.value }}</span>
|
|
|
</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>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="content_main div_second">
|
|
|
+ <div class="first">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
+ <!-- <p>课程试听</p> -->
|
|
|
</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>
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
+ <!-- <p>考试日历</p> -->
|
|
|
</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 == "继续教育"
|
|
|
- ? "继教"
|
|
|
- : 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>
|
|
|
- </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 == "继续教育"
|
|
|
- ? "继教"
|
|
|
- : item.educationName
|
|
|
- }}
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="swiper">
|
|
|
- <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, 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="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">
|
|
|
- <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">
|
|
|
- <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="" />
|
|
|
- <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" @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 class="second" style="background-color: rgb(114,177,255);">
|
|
|
+ <div class="lf">
|
|
|
+ <h1>课程</h1>
|
|
|
+ <p>精准课程过关VIP<br />任你挑选</p>
|
|
|
+ <i>GO ></i>
|
|
|
</div>
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
</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 class="second" style="background-color: rgb(63,218,233);">
|
|
|
+ <div class="lf">
|
|
|
+ <h1>题库</h1>
|
|
|
+ <p>一道好题胜百道<br />在线刷题</p>
|
|
|
+ <i>GO ></i>
|
|
|
</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> -->
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
</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 class="second" style="background-color: rgb(89,184,251);">
|
|
|
+ <div class="lf">
|
|
|
+ <h1>资料</h1>
|
|
|
+ <p>讲义资料助你一力<br />快速获取</p>
|
|
|
+ <i>GO ></i>
|
|
|
</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>
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
</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 class="content_main tj_main">
|
|
|
+ <div class="header_main">
|
|
|
+ <div class="hbox">
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
+ <h2>推荐课程</h2>
|
|
|
+ </div>
|
|
|
+ <i>更多 ></i>
|
|
|
</div>
|
|
|
+ <ul class="goods_main">
|
|
|
+ <li class="goods_li">
|
|
|
+ <img src="@/assets/basket.png" alt="" />
|
|
|
+ <p class="title">
|
|
|
+ 2023年一级建造师公路工程管理与实务（签约冲刺协议班）
|
|
|
+ </p>
|
|
|
+ <div>
|
|
|
+ <div>考前培训</div>
|
|
|
+ <div>一级建造师</div>
|
|
|
+ </div>
|
|
|
+ <div>￥3,000.00</div>
|
|
|
+ <div>原价：￥12345</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</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
|
|
|
+ workMsg: [
|
|
|
+ { label: "职业考证", value: "证越多 挣越多" },
|
|
|
+ { label: "职业技能", value: "晋升 涨薪 技能" },
|
|
|
+ { label: "师资团队", value: "教授 博士 工程师" },
|
|
|
+ { label: "产业合作", value: "团企培训解决方案" },
|
|
|
+ { label: "品牌实力", value: "办学许可 十年专注" }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
- 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);
|
|
|
- console.log(this.typeList, "this.typeList");
|
|
|
- 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, 6));
|
|
|
- } else {
|
|
|
- this.$set(this.typeList[index], "list", rows.slice(0, length));
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.$set(this.typeList[index], "list", rows);
|
|
|
- }
|
|
|
- console.log("this.typeList:", this.slideList, this.typeList);
|
|
|
- })
|
|
|
- .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
|
|
|
- });
|
|
|
- },
|
|
|
- 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();
|
|
|
- }
|
|
|
- }
|
|
|
+ methods: {}
|
|
|
};
|
|
|
</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);
|
|
|
+<style lang="scss" scoped>
|
|
|
+#home_new {
|
|
|
+ background-color: rgb(245, 247, 249);
|
|
|
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .content_main {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 24px auto 0px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
+ .ul_first {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100px;
|
|
|
+
|
|
|
+ & > li {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-right: 1px solid #eee;
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- 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);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ & > img {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ & > .r_r {
|
|
|
+ h4 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7f7f7f;
|
|
|
}
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .course {
|
|
|
- background: #f5f7fa;
|
|
|
- padding-top: 40px;
|
|
|
-
|
|
|
- &__header {
|
|
|
+ .div_second {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 24px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 270deg,
|
|
|
+ rgba(203, 244, 228, 1) 0%,
|
|
|
+ rgba(207, 240, 251, 1) 99%
|
|
|
+ );
|
|
|
+ & > .first {
|
|
|
+ width: 245px;
|
|
|
+ height: 160px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding-bottom: 15px;
|
|
|
- border-bottom: 1px solid #dcdcdc;
|
|
|
-
|
|
|
- .lefts {
|
|
|
+ background-color: rgb(236, 243, 252);
|
|
|
+ border-radius: 4px;
|
|
|
+ div {
|
|
|
+ user-select: none;
|
|
|
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;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ &:first-child {
|
|
|
+ border-right: 1px solid rgb(197, 219, 253);
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 57px;
|
|
|
+ height: 57px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #7f7f7f;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .tabs {
|
|
|
- margin-left: 28px;
|
|
|
+ & > .second {
|
|
|
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;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 14px 18px;
|
|
|
+ width: 285px;
|
|
|
+ user-select: none;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.04);
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .pagination {
|
|
|
- padding: 30px 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- &__body {
|
|
|
- .list {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .course-item {
|
|
|
- float: left;
|
|
|
+ & > .lf {
|
|
|
+ flex: 1;
|
|
|
+ h1 {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__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 {
|
|
|
+ p {
|
|
|
color: #fff;
|
|
|
- box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
|
|
|
- background: #3f8dfd;
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
+ i {
|
|
|
+ border-radius: 24px;
|
|
|
+ background-color: #fff;
|
|
|
+ color: skyblue;
|
|
|
+ padding: 0px 6px;
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > img {
|
|
|
+ width: 115px;
|
|
|
+ height: 132px;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .bank {
|
|
|
- background: #fff;
|
|
|
- padding-top: 40px;
|
|
|
-
|
|
|
- &__header {
|
|
|
+ .tj_main {
|
|
|
+ padding: 20px;
|
|
|
+ .header_main {
|
|
|
+ user-select: none;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- padding-bottom: 15px;
|
|
|
- border-bottom: 1px solid #dcdcdc;
|
|
|
-
|
|
|
- .lefts {
|
|
|
+ padding-bottom: 24px;
|
|
|
+ border-bottom: 1px dotted rgb(215, 215, 215);
|
|
|
+ & > .hbox {
|
|
|
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;
|
|
|
+ align-items: center;
|
|
|
+ & > img {
|
|
|
+ width: 27px;
|
|
|
+ height: 27px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .pagination {
|
|
|
- padding: 30px 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- &__body {
|
|
|
- .list {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .bank-item {
|
|
|
- float: left;
|
|
|
+ & > h2 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-style: italic;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- &__footer {
|
|
|
- overflow: hidden;
|
|
|
- flex-shrink: 0;
|
|
|
- .btn {
|
|
|
+ & > i {
|
|
|
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;
|
|
|
- }
|
|
|
+ font-style: normal;
|
|
|
+ color: #7f7f7f;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
+ .goods_main {
|
|
|
+ width: 282px;
|
|
|
+ height: 363px;
|
|
|
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%;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ & > img {
|
|
|
+ width: 264px;
|
|
|
+ height: 155px;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
-
|
|
|
- .bind-next {
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- color: #999;
|
|
|
- margin-top: 10px;
|
|
|
- cursor: pointer;
|
|
|
+ & > .title {
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.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>
|
