fix

src/common/tools.js

@@ -151,7 +151,6 @@ export default {
 		} else {
 			return Y + M + D + h + m + s;
 		}
-
 	},
 
 	secondToDate(result) {

src/components/footer/index.vue

@@ -1,93 +1,37 @@
 <template>
-  <div id="footer_main">
-    <div class="width_1200 headers">
-      <div class="lf">
-        <h2>为什么选择{{header.companyName}}？</h2>
-        <div class="botm">
-          <div class="li" v-for="(item, index) in valueList" :key="index">
-            <img src="@/assets/img/tcs.png" alt="" />
-            <div class="r_li">
-              <p>{{ item.label }}</p>
-              <p>{{ item.value }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="rg">
-        <div v-if="mobile.smallQrCodeShow">
-          <p>扫码小程序</p>
-          <img :src="$tools.splitImgHost(mobile.mobileImage)" alt="" />
-        </div>
-        <div v-if="mobile.gzhImage">
-          <p>关注公众号</p>
-          <img :src="$tools.splitImgHost(mobile.gzhImage)" alt="" />
-        </div>
-      </div>
-    </div>
-    <div class="fgx"></div>
-    <div class="width_1200 yq">
-      <div class="lf">友情链接：</div>
-      <div class="rg">
-        <a
-          v-for="(item, index) in showList(links)"
-          :key="index"
-          :href="item.url ? item.url : 'javascript:;'"
-          target="_blank"
-          >{{ item.name }}</a
-        >
-        <div style="clear:both"></div>
-      </div>
-    </div>
-    <div class="fgx"></div>
-    <div class="width_1200 ftend">
-      <div class="f1">
-        <p v-for="(item, index) in footer" :key="index">{{ item.name }}</p>
-      </div>
-      <div class="f2">
-        <p v-html="footerRecord.footerRecordNo"></p>
-        <p v-html="footerRecord.footerTip"></p>
-        <p v-if="footerRecord.tips1">{{ footerRecord.tips1 }}</p>
-        <p v-if="footerRecord.tips2">{{ footerRecord.tips2 }}</p>
-      </div>
-    </div>
+  <div id="">
+    <component :is="currentComponent(header.templateStatus)"></component>
   </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+import footer1 from "../footer1/index.vue";
+import footer2 from "../footer2/index.vue";
 export default {
+  components: { footer1, footer2 },
   data() {
-    return {
-      valueList: [
-        {
-          imgUrl: "",
-          label: "人社批准",
-          value: "办学许可号：人社民4400003150014号"
-        },
-        {
-          imgUrl: "",
-          label: "十年专注",
-          value: "雄厚师资：教授、博士、工程师"
-        },
-        {
-          imgUrl: "",
-          label: "教学实力",
-          value: "服务5000余家企业，近50000余人次"
-        }
-      ]
-    };
+    return {};
   },
+  created() {},
   computed: {
-    ...mapGetters(["header","footer", "links", "footerRecord","mobile"]),
-    showList: function() {
-      return function(list) {
-        let showList = [];
-        if (list) {
-          showList = list.filter(item => {
-            return item.status == 1;
-          });
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "footer1";
+            break;
+          case 2:
+            str = "footer2";
+            break;
+
+          default:
+            str = "footer1";
+            break;
         }
-        return showList;
+        return str;
       };
     }
   },
@@ -95,110 +39,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-#footer_main {
-  background-color: rgb(31, 40, 51);
-  & > .headers {
-    display: flex;
-    align-items: center;
-    & > .lf {
-      flex: 1;
-      & > h2 {
-        font-size: 18px;
-        color: #f2f2f2;
-        margin-bottom: 30px;
-      }
-      & > .botm {
-        display: flex;
-        align-items: center;
-        & > .li {
-          display: flex;
-          align-items: center;
-          margin-right: 30px;
-          &:last-child {
-            margin-right: 0px;
-          }
-          & > img {
-            width: 40px;
-            height: 40px;
-            margin-right: 6px;
-          }
-          & > .r_li > p {
-            color: #c9cdd1;
-            font-size: 14px;
-          }
-        }
-      }
-    }
-    & > .rg {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      & > div {
-        &:first-child {
-          margin-right: 28px;
-        }
-        & > p {
-          text-align: center;
-          padding-bottom: 14px;
-          color: #c9cdd1;
-          font-size: 12px;
-        }
-        & > img {
-          width: 80px;
-          height: 80px;
-          border-radius: 4px;
-          overflow: hidden;
-          background-color: #fff;
-        }
-      }
-    }
-  }
-  & > .yq {
-    display: flex;
-    font-size: 14px;
-    color: #c9cdd150;
-
-    & > .lf {
-      width: 80px;
-      flex-shrink: 0;
-    }
-    & > .rg {
-      flex: 1;
-      & > a {
-        color: #c9cdd150;
-        user-select: none;
-        cursor: pointer;
-        float: left;
-        margin: 0px 0px 14px 14px;
-        transition: all 0.2s;
-        &:hover {
-          color: #c9cdd1;
-        }
-      }
-    }
-  }
-  & > .ftend {
-    display: flex;
-    color: #c9cdd150;
-    & > .f1 {
-      flex: 0.6;
-      & > p {
-        display: inline-block;
-        margin: 0px 24px 18px 0px;
-      }
-    }
-    & > .f2 {
-      flex: 0.4;
-    }
-  }
-}
-.width_1200 {
-  width: 1200px;
-  padding: 36px 0px;
-  margin: 0px auto;
-}
-.fgx {
-  border-bottom: 1px dashed #c9cdd150;
-}
-</style>
+<style lang="scss" scoped></style>

src/components/footer2/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div id="footer_main">
+    <div class="width_1200 headers">
+      <div class="lf">
+        <h2>为什么选择{{ header.companyName }}？</h2>
+        <div class="botm">
+          <div class="li" v-for="(item, index) in valueList" :key="index">
+            <img :src="item.imgUrl" alt="" />
+            <div class="r_li">
+              <p>{{ item.label }}</p>
+              <p>{{ item.value }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="rg">
+        <div v-if="mobile.smallQrCodeShow">
+          <p>扫码小程序</p>
+          <img :src="$tools.splitImgHost(mobile.mobileImage)" alt="" />
+        </div>
+        <div v-if="mobile.gzhImage">
+          <p>关注公众号</p>
+          <img :src="$tools.splitImgHost(mobile.gzhImage)" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="fgx"></div>
+    <div class="width_1200 yq">
+      <div class="lf">友情链接：</div>
+      <div class="rg">
+        <a
+          v-for="(item, index) in showList(links)"
+          :key="index"
+          :href="item.url ? item.url : 'javascript:;'"
+          target="_blank"
+          >{{ item.name }}</a
+        >
+        <div style="clear:both"></div>
+      </div>
+    </div>
+    <div class="fgx" style="width: 1200px;margin: 0px auto;"></div>
+    <div class="width_1200 ftend">
+      <div class="f1">
+        <p v-for="(item, index) in footer" :key="index">{{ item.name }}</p>
+        <p v-html="footerRecord.footerRecordNo"></p>
+        <p v-html="sty(footerRecord.footerTip)"></p>
+        <p v-if="footerRecord.tips1">{{ footerRecord.tips1 }}</p>
+        <p v-if="footerRecord.tips2">{{ footerRecord.tips2 }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {
+      valueList: [
+        {
+          imgUrl: require("@/assets/new1/人社批准.png"),
+          label: "人社批准",
+          value: "办学许可号：人社民4400003150014号"
+        },
+        {
+          imgUrl: require("@/assets/new1/十年专注.png"),
+          label: "十年专注",
+          value: "雄厚师资：教授、博士、工程师"
+        },
+        {
+          imgUrl: require("@/assets/new1/教学实力.png"),
+          label: "教学实力",
+          value: "服务5000余家企业，近50000余人次"
+        }
+      ]
+    };
+  },
+  computed: {
+    ...mapGetters(["header", "footer", "links", "footerRecord", "mobile"]),
+    showList: function() {
+      return function(list) {
+        let showList = [];
+        if (list) {
+          showList = list.filter(item => {
+            return item.status == 1;
+          });
+        }
+        return showList;
+      };
+    },
+    sty: function() {
+      return function(str) {
+        let a = str.replace(/<a/gi, '<a style="color:#e1e1e1;" target="_blank"');
+        
+        return a;
+      };
+    }
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+#footer_main {
+  background-color: rgb(31, 40, 51);
+  & > .headers {
+    display: flex;
+    align-items: center;
+    & > .lf {
+      flex: 1;
+      & > h2 {
+        font-size: 18px;
+        color: #f2f2f2;
+        margin-bottom: 30px;
+      }
+      & > .botm {
+        display: flex;
+        align-items: center;
+        & > .li {
+          display: flex;
+          align-items: center;
+          margin-right: 30px;
+          &:last-child {
+            margin-right: 0px;
+          }
+          & > img {
+            width: 40px;
+            height: 40px;
+            margin-right: 6px;
+          }
+          & > .r_li > p {
+            color: #c9cdd1;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+    & > .rg {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      & > div {
+        &:first-child {
+          margin-right: 28px;
+        }
+        & > p {
+          text-align: center;
+          padding-bottom: 14px;
+          color: #c9cdd1;
+          font-size: 12px;
+        }
+        & > img {
+          width: 80px;
+          height: 80px;
+          border-radius: 4px;
+          overflow: hidden;
+          background-color: #fff;
+        }
+      }
+    }
+  }
+  & > .yq {
+    display: flex;
+    font-size: 14px;
+    color: #e1e1e1;
+    opacity: 0.5;
+    & > .lf {
+      width: 80px;
+      flex-shrink: 0;
+    }
+    & > .rg {
+      flex: 1;
+      & > a {
+        color: #e1e1e1;
+        user-select: none;
+        cursor: pointer;
+        float: left;
+        margin: 0px 10px 14px 14px;
+        transition: all 0.2s;
+        &:hover {
+          color: rgb(0, 122, 255);
+        }
+      }
+    }
+  }
+  & > .ftend {
+    display: flex;
+    color: #e1e1e1 !important;
+    opacity: 0.5;
+    & > .f1 {
+      flex: 0.6;
+      & > p {
+        display: inline-block;
+        margin: 0px 24px 18px 0px;
+      }
+    }
+  }
+}
+.width_1200 {
+  width: 1200px;
+  padding: 40px 0px;
+  margin: 0px auto;
+}
+.fgx {
+  border-bottom: 1px dashed rgb(48, 56, 57);
+}
+</style>

src/components/goodsItem-new/index.vue

@@ -17,7 +17,7 @@
       "
     >
       <span v-if="goodsItem.standPrice === 0">免费</span>
-      <template v-else> ￥<span>goodsItem.standPrice</span> </template>
+      <template v-else> ￥<span>{{ goodsItem.standPrice }}</span> </template>
     </div>
     <div class="price" v-else>
       <span>{{ goodsItem.minPrice }}</span>
@@ -87,7 +87,7 @@ export default {
   border-radius: 4px;
   padding: 10px;
   &:hover {
-    border-color: #409eff;
+    border-color: rgb(1,123,255);
   }
   & > img {
     width: 264px;

src/components/header/index.vue

@@ -1,853 +1,65 @@
 <template>
-  <header class="header">
-    <div class="container clearfix dis_play">
-      <div class="logo logo--no" v-if="header.companyLogo">
-        <img
-          style="cursor: pointer; max-width: 100%; max-height: 100%"
-          :src="$tools.splitImgHost(header.companyLogo)"
-          alt=""
-          @click="go('/')"
-        />
-      </div>
-      <h1 class="logo" v-else @click="go('/')"></h1>
-      <nav class="nav">
-        <ul class="list">
-          <li v-for="(item, index) in showNav(header.Nav)" :key="index">
-            <a v-if="item.name == '首页'" @click="go('/index')">首页</a>
-            <a
-              v-if="item.name == '走进祥粤'"
-              @click="go('/about')"
-              :style="$route.path === '/about' ? 'color:red;' : ''"
-              >走进祥粤</a
-            >
-            <a
-              v-if="item.name == '课程'"
-              @click="go('/course-list')"
-              :style="$route.path === '/course-list' ? 'color:red;' : ''"
-              >课程</a
-            >
-            <a
-              v-if="item.name == '直播'"
-              @click="go('/live-list')"
-              :style="$route.path === '/live-list' ? 'color:red;' : ''"
-              >直播</a
-            >
-            <a
-              v-if="item.name == '题库'"
-              @click="go('/bank-list')"
-              :style="$route.path === '/bank-list' ? 'color:red;' : ''"
-              >题库</a
-            >
-            <a
-              v-if="item.name == '讲义资料'"
-              @click="go('/handout-list')"
-              :style="$route.path === '/handout-list' ? 'color:red;' : ''"
-              >讲义资料</a
-            >
-            <a
-              v-if="item.name == '积分商城'"
-              @click="go('/points-list')"
-              :style="$route.path === '/points-list' ? 'color:red;' : ''"
-              >积分商城</a
-            >
-          </li>
-        </ul>
-      </nav>
-
-      <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 type="text" v-model="searchKey" autocomplete="off" />
-          <input
-            type="password"
-            autocomplete="new-password"
-            style="display: none"
-          />
-        </div>
-        <el-button type="primary" @click="search" class="search__btn"
-          >搜索</el-button
-        >
-      </div>
-      <div class="userinfo" v-if="userInfo">
-        <!-- <a class="msg" @click="go('/person-center/my-message')">
-          <i class="pi" v-if="msgCount > 0"></i>
-          <i class="el-icon-message-solid icon"></i>
-          <div @click.stop="" class="popover_style">
-            {{ msgData.text }} <el-button style="float:right;" type="text">立即学习</el-button>
-          </div>
-        </a> -->
-
-        <!-- <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-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-dropdown @command="handleCommand">
-          <span
-            class="el-dropdown-link"
-            @click="go('/person-center/my-course')"
-            style="margin-left: 10px; cursor: pointer"
-          >
-            <img
-              style="width: 24px; vertical-align: middle"
-              :src="
-                userInfo
-                  ? userInfo.avatar
-                    ? $tools.splitImgHost(userInfo.avatar, true)
-                    : '@/assets/qrcode.png'
-                  : ''
-              "
-              alt=""
-            />
-            <span>{{ userInfo && userInfo.realname }}</span>
-          </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="4">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-      <div class="userinfo" v-else>
-        <div class="text-list" v-if="!userInfo">
-          <a @click="go('/login', { state: 1 })">登录</a>
-          <a @click="go('/login', { state: 2 })">注册</a>
-        </div>
-      </div>
-    </div>
-
-    <RebuildModal
-      ref="rebuildModal"
-      @rebuildSubmit="rebuildSubmit($event)"
-    ></RebuildModal>
-  </header>
+  <div id="">
+    <component
+      :is="currentComponent(header.templateStatus)"
+      :nav_beauf="nav_beauf"
+      :collapse="collapse"
+      @search="search"
+    ></component>
+  </div>
 </template>
 
 <script>
-import RebuildModal from "@/components/rebuildModal";
-import { mapGetters, mapMutations } from "vuex";
+import { mapGetters } from "vuex";
+import header1 from "../header1/index.vue";
+import header2 from "../header2/index.vue";
 export default {
-  name: "Header",
-  components: {
-    RebuildModal
+  components: { header1, header2 },
+  props: {
+    collapse: {
+      type: Boolean,
+      default: () => {
+        return true;
+      }
+    },
+    nav_beauf: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    }
   },
   data() {
-    return {
-      searchKey: "",
-      type: "1",
-      showBox: false,
-      timer: null,
-      msgData: {},
-      sysTime: 0,
-      msgShow: false
-    };
+    return {};
   },
+  created() {},
   computed: {
-    ...mapGetters(["header", "userInfo", "msgCount"]),
-    showNav: function() {
-      return function(list) {
-        var newList = [];
-        if (list) {
-          newList = list.filter(item => {
-            return item.status === 1;
-          });
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "header1";
+            break;
+          case 2:
+            str = "header2";
+            break;
+
+          default:
+            str = "header1";
+            break;
         }
-        return newList;
+        return str;
       };
     }
   },
-  mounted() {
-    if (this.$tools.isLogin()) {
-      // 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;
-      //   }
-      // });
-      this.getMsgCount();
-    }
-  },
   methods: {
-    ...mapMutations(["getMsgCount"]),
-    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);
-        });
-      });
-    },
-    /**
-     * 关闭消息
-     */
-    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;
-    },
-    /**
-     * 前往学习
-     */
-    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);
-          });
-      });
-    },
-    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;
-
-        default:
-          break;
-      }
-    },
-    go(path, query) {
-      if (path === this.$route.path) {
-        this.$router.push({
-          path: "refresh" //refresh路由地址和当前要刷新路由地址同级即可
-        });
-        return;
-      }
-      this.$router.push({
-        path,
-        query
-      });
-    },
-
-    search() {
-      if (!this.searchKey.trim()) {
-        this.$message({
-          type: "warning",
-          duration: 2000,
-          message: "请输入搜索内容"
-        });
-
-        return;
-      }
-      let type = this.type;
-      let path = this.$route.path;
-
-      if (path == "/bank-list") {
-        //在题库列表页面直接传参
-        if (type == "2") {
-          this.$emit("search", this.searchKey);
-        } else if (type == "6") {
-          this.$router.push({
-            path: "/live-list",
-            query: {
-              searchKey: this.searchKey
-            }
-          });
-        } else {
-          this.$router.push({
-            path: "/course-list",
-            query: {
-              searchKey: this.searchKey
-            }
-          });
-        }
-      } else if (path == "/course-list") {
-        //在课程列表页面直接传参
-        if (type == "1") {
-          this.$emit("search", 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
-            }
-          });
-        }
-      } else if (path == "/live-list") {
-        //在课程列表页面直接传参
-        if (type == "6") {
-          this.$emit("search", this.searchKey);
-        } else if (type == "1") {
-          this.$router.push({
-            path: "/course-list",
-            query: {
-              searchKey: this.searchKey
-            }
-          });
-        } else {
-          this.$router.push({
-            path: "/bank-list",
-            query: {
-              searchKey: this.searchKey
-            }
-          });
-        }
-      } else {
-        //根据类型跳转题库或者列表页面
-        console.log(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
-            }
-          });
-        }
-      }
-      this.searchKey = ''
-    },
-
-    mouseover() {
-      clearTimeout(this.timer);
-      this.showBox = true;
+    search(searchKey){
+      this.$emit("search", searchKey);
     },
-
-    mouseLeave() {
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        this.showBox = false;
-      }, 500);
-    }
   }
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.header {
-  position: relative;
-  background: #fff;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
-  .dis_play {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .container {
-    height: 80px;
-
-    .logo {
-      // margin-top: 23px;
-      // float: left;
-      cursor: pointer;
-      text-align: center;
-      max-width: 300px;
-      max-height: 61px;
-      background: url("~@/assets/logo.png") no-repeat center;
-
-      &--no {
-        background: none;
-      }
-    }
-
-    .nav {
-      // float: left;
-      // margin-top: 30px;
-
-      .list {
-        // margin-left: 146px;
-        display: flex;
-
-        li {
-          margin: 0 20px;
-
-          a {
-            color: #333;
-          }
-
-          a:hover {
-            color: #3f8dfd;
-          }
-        }
-      }
-    }
-
-    .search {
-      // float: right;
-      // margin-right: 12px;
-      // margin-top: 20px;
-      width: 324px;
-      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;
-      }
-    }
-
-    .userinfo {
-      // margin-top: 30px;
-      // float: right;
-      white-space: nowrap;
-
-      a {
-        display: inline-block;
-        margin-left: 20px;
-        vertical-align: middle;
-
-        &.msg {
-          position: relative;
-          margin-top: 2px;
-
-          .icon {
-            font-size: 20px;
-            color: #3f8dfd;
-          }
-
-          .pi {
-            display: inline-block;
-            width: 10px;
-            height: 10px;
-            background: #ff3b30;
-            border: 1px solid #ffffff;
-            border-radius: 10px;
-            position: absolute;
-            top: 0;
-            right: 0;
-          }
-
-          .popover_style {
-            position: absolute;
-            top: 150%;
-            left: -100px;
-            border-radius: 8px;
-            background-color: #fff;
-            border: 1px solid #333;
-            padding: 0px 6px;
-            width: 300px;
-            white-space: normal;
-          }
-        }
-
-        &.name {
-          position: relative;
-          z-index: 99;
-
-          img {
-            width: 24px;
-            vertical-align: middle;
-          }
-
-          .modal-box {
-            width: 162px;
-            background: #ffffff;
-            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
-            border-radius: 8px;
-            position: absolute;
-            top: 55px;
-            left: -40px;
-
-            li {
-              margin-left: 10px;
-              border-bottom: 1px solid #eeeeee;
-              height: 40px;
-              line-height: 40px;
-              cursor: pointer;
-              padding-left: 5px;
-
-              &:hover {
-                background: #eeeeee;
-                color: #3f8dfd;
-              }
-
-              &:nth-last-of-type(1) {
-                border: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .text-list {
-      text-align: right;
-      font-size: 0;
-
-      a {
-        display: inline-block;
-        margin: 0;
-        color: #3f8dfd;
-        font-size: 14px;
-        padding: 0 14px;
-
-        &:nth-last-of-type(1) {
-          padding-right: 0;
-          border-left: 1px solid #3f8dfd;
-        }
-      }
-    }
-  }
-}
-
-.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_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;
-}
-</style>
+<style lang="scss" scoped></style>

src/components/header1/index.vue

@@ -0,0 +1,853 @@
+<template>
+  <header class="header">
+    <div class="container clearfix dis_play">
+      <div class="logo logo--no" v-if="header.companyLogo">
+        <img
+          style="cursor: pointer; max-width: 100%; max-height: 100%"
+          :src="$tools.splitImgHost(header.companyLogo)"
+          alt=""
+          @click="go('/')"
+        />
+      </div>
+      <h1 class="logo" v-else @click="go('/')"></h1>
+      <nav class="nav">
+        <ul class="list">
+          <li v-for="(item, index) in showNav(header.Nav)" :key="index">
+            <a v-if="item.name == '首页'" @click="go('/index')">首页</a>
+            <a
+              v-if="item.name == '走进祥粤'"
+              @click="go('/about')"
+              :style="$route.path === '/about' ? 'color:red;' : ''"
+              >走进祥粤</a
+            >
+            <a
+              v-if="item.name == '课程'"
+              @click="go('/course-list')"
+              :style="$route.path === '/course-list' ? 'color:red;' : ''"
+              >课程</a
+            >
+            <a
+              v-if="item.name == '直播'"
+              @click="go('/live-list')"
+              :style="$route.path === '/live-list' ? 'color:red;' : ''"
+              >直播</a
+            >
+            <a
+              v-if="item.name == '题库'"
+              @click="go('/bank-list')"
+              :style="$route.path === '/bank-list' ? 'color:red;' : ''"
+              >题库</a
+            >
+            <a
+              v-if="item.name == '讲义资料'"
+              @click="go('/handout-list')"
+              :style="$route.path === '/handout-list' ? 'color:red;' : ''"
+              >讲义资料</a
+            >
+            <a
+              v-if="item.name == '积分商城'"
+              @click="go('/points-list')"
+              :style="$route.path === '/points-list' ? 'color:red;' : ''"
+              >积分商城</a
+            >
+          </li>
+        </ul>
+      </nav>
+
+      <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 type="text" v-model="searchKey" autocomplete="off" />
+          <input
+            type="password"
+            autocomplete="new-password"
+            style="display: none"
+          />
+        </div>
+        <el-button type="primary" @click="search" class="search__btn"
+          >搜索</el-button
+        >
+      </div>
+      <div class="userinfo" v-if="userInfo">
+        <!-- <a class="msg" @click="go('/person-center/my-message')">
+          <i class="pi" v-if="msgCount > 0"></i>
+          <i class="el-icon-message-solid icon"></i>
+          <div @click.stop="" class="popover_style">
+            {{ msgData.text }} <el-button style="float:right;" type="text">立即学习</el-button>
+          </div>
+        </a> -->
+
+        <!-- <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-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-dropdown @command="handleCommand">
+          <span
+            class="el-dropdown-link"
+            @click="go('/person-center/my-course')"
+            style="margin-left: 10px; cursor: pointer"
+          >
+            <img
+              style="width: 24px; vertical-align: middle"
+              :src="
+                userInfo
+                  ? userInfo.avatar
+                    ? $tools.splitImgHost(userInfo.avatar, true)
+                    : '@/assets/qrcode.png'
+                  : ''
+              "
+              alt=""
+            />
+            <span>{{ userInfo && userInfo.realname }}</span>
+          </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="4">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <div class="userinfo" v-else>
+        <div class="text-list" v-if="!userInfo">
+          <a @click="go('/login', { state: 1 })">登录</a>
+          <a @click="go('/login', { state: 2 })">注册</a>
+        </div>
+      </div>
+    </div>
+
+    <RebuildModal
+      ref="rebuildModal"
+      @rebuildSubmit="rebuildSubmit($event)"
+    ></RebuildModal>
+  </header>
+</template>
+
+<script>
+import RebuildModal from "@/components/rebuildModal";
+import { mapGetters, mapMutations } from "vuex";
+export default {
+  name: "Header",
+  components: {
+    RebuildModal
+  },
+  data() {
+    return {
+      searchKey: "",
+      type: "1",
+      showBox: false,
+      timer: null,
+      msgData: {},
+      sysTime: 0,
+      msgShow: false
+    };
+  },
+  computed: {
+    ...mapGetters(["header", "userInfo", "msgCount"]),
+    showNav: function() {
+      return function(list) {
+        var newList = [];
+        if (list) {
+          newList = list.filter(item => {
+            return item.status === 1;
+          });
+        }
+        return newList;
+      };
+    }
+  },
+  mounted() {
+    if (this.$tools.isLogin()) {
+      // 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;
+      //   }
+      // });
+      this.getMsgCount();
+    }
+  },
+  methods: {
+    ...mapMutations(["getMsgCount"]),
+    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);
+        });
+      });
+    },
+    /**
+     * 关闭消息
+     */
+    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;
+    },
+    /**
+     * 前往学习
+     */
+    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);
+          });
+      });
+    },
+    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;
+
+        default:
+          break;
+      }
+    },
+    go(path, query) {
+      if (path === this.$route.path) {
+        this.$router.push({
+          path: "refresh" //refresh路由地址和当前要刷新路由地址同级即可
+        });
+        return;
+      }
+      this.$router.push({
+        path,
+        query
+      });
+    },
+
+    search() {
+      if (!this.searchKey.trim()) {
+        this.$message({
+          type: "warning",
+          duration: 2000,
+          message: "请输入搜索内容"
+        });
+
+        return;
+      }
+      let type = this.type;
+      let path = this.$route.path;
+
+      if (path == "/bank-list") {
+        //在题库列表页面直接传参
+        if (type == "2") {
+          this.$emit("search", this.searchKey);
+        } else if (type == "6") {
+          this.$router.push({
+            path: "/live-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        } else {
+          this.$router.push({
+            path: "/course-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        }
+      } else if (path == "/course-list") {
+        //在课程列表页面直接传参
+        if (type == "1") {
+          this.$emit("search", 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
+            }
+          });
+        }
+      } else if (path == "/live-list") {
+        //在课程列表页面直接传参
+        if (type == "6") {
+          this.$emit("search", this.searchKey);
+        } else if (type == "1") {
+          this.$router.push({
+            path: "/course-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        } else {
+          this.$router.push({
+            path: "/bank-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        }
+      } else {
+        //根据类型跳转题库或者列表页面
+        console.log(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
+            }
+          });
+        }
+      }
+      this.searchKey = ''
+    },
+
+    mouseover() {
+      clearTimeout(this.timer);
+      this.showBox = true;
+    },
+
+    mouseLeave() {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.showBox = false;
+      }, 500);
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.header {
+  position: relative;
+  background: #fff;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
+  .dis_play {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .container {
+    height: 80px;
+
+    .logo {
+      // margin-top: 23px;
+      // float: left;
+      cursor: pointer;
+      text-align: center;
+      max-width: 300px;
+      max-height: 61px;
+      background: url("~@/assets/logo.png") no-repeat center;
+
+      &--no {
+        background: none;
+      }
+    }
+
+    .nav {
+      // float: left;
+      // margin-top: 30px;
+
+      .list {
+        // margin-left: 146px;
+        display: flex;
+
+        li {
+          margin: 0 20px;
+
+          a {
+            color: #333;
+          }
+
+          a:hover {
+            color: #3f8dfd;
+          }
+        }
+      }
+    }
+
+    .search {
+      // float: right;
+      // margin-right: 12px;
+      // margin-top: 20px;
+      width: 324px;
+      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;
+      }
+    }
+
+    .userinfo {
+      // margin-top: 30px;
+      // float: right;
+      white-space: nowrap;
+
+      a {
+        display: inline-block;
+        margin-left: 20px;
+        vertical-align: middle;
+
+        &.msg {
+          position: relative;
+          margin-top: 2px;
+
+          .icon {
+            font-size: 20px;
+            color: #3f8dfd;
+          }
+
+          .pi {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            background: #ff3b30;
+            border: 1px solid #ffffff;
+            border-radius: 10px;
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+
+          .popover_style {
+            position: absolute;
+            top: 150%;
+            left: -100px;
+            border-radius: 8px;
+            background-color: #fff;
+            border: 1px solid #333;
+            padding: 0px 6px;
+            width: 300px;
+            white-space: normal;
+          }
+        }
+
+        &.name {
+          position: relative;
+          z-index: 99;
+
+          img {
+            width: 24px;
+            vertical-align: middle;
+          }
+
+          .modal-box {
+            width: 162px;
+            background: #ffffff;
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            position: absolute;
+            top: 55px;
+            left: -40px;
+
+            li {
+              margin-left: 10px;
+              border-bottom: 1px solid #eeeeee;
+              height: 40px;
+              line-height: 40px;
+              cursor: pointer;
+              padding-left: 5px;
+
+              &:hover {
+                background: #eeeeee;
+                color: #3f8dfd;
+              }
+
+              &:nth-last-of-type(1) {
+                border: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .text-list {
+      text-align: right;
+      font-size: 0;
+
+      a {
+        display: inline-block;
+        margin: 0;
+        color: #3f8dfd;
+        font-size: 14px;
+        padding: 0 14px;
+
+        &:nth-last-of-type(1) {
+          padding-right: 0;
+          border-left: 1px solid #3f8dfd;
+        }
+      }
+    }
+  }
+}
+
+.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_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;
+}
+</style>

src/components/header2/index.vue

@@ -0,0 +1,501 @@
+<template>
+  <div id="" :class="collapse ? 'collapse' : ''">
+    <div class="header_style" :style="beauf_s(collapse, nav_beauf)">
+      <div class="margin_center">
+        <img
+          class="company_img"
+          :src="$tools.splitImgHost(beauf_imgUrl(collapse, nav_beauf))"
+          @click="go('/')"
+          alt=""
+        />
+        <div class="right_end">
+          <ul class="nav_ul">
+            <li
+              v-for="(item, index) in showNav(header.Nav)"
+              :key="index"
+              @click="go(item.url)"
+              :class="item.url == $route.path ? 'active' : ''"
+              :style="beauf_li(collapse, nav_beauf)"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+          <el-input
+            size="mini"
+            placeholder=""
+            v-model="searchKey"
+            class="input_top"
+            :class="
+              beauf_status(collapse, nav_beauf) ? 'input_top_status' : null
+            "
+          >
+            <template slot="prepend">
+              <el-select v-model="searchSelect" placeholder="请选择">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </template>
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="search"
+            ></el-button>
+          </el-input>
+          <template v-if="userInfo">
+            <el-dropdown @command="handleCommand">
+              <span
+                @click="go('/person-center/my-course')"
+                class="el-dropdown-link"
+                style="margin-left: 10px; cursor: pointer"
+              >
+                <img
+                  style="width: 24px; height: 24px; vertical-align: middle;margin-right: 10px;overflow: hidden;border-radius: 50%;"
+                  :src="
+                    userInfo
+                      ? userInfo.avatar
+                        ? $tools.splitImgHost(userInfo.avatar, true)
+                        : '@/assets/qrcode.png'
+                      : ''
+                  "
+                  alt=""
+                /><span :style="beauf_li(collapse, nav_beauf)">{{
+                  userInfo && userInfo.realname
+                }}</span>
+              </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="4">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+          <el-button
+            v-else
+            class="btn_logins"
+            :style="{
+              color: beauf_status(collapse, nav_beauf) ? '#fff' : '#000'
+            }"
+            type="text"
+            @click="$refs.login.openBox()"
+            >登录 / 注册</el-button
+          >
+        </div>
+      </div>
+    </div>
+    <login ref="login"></login>
+  </div>
+</template>
+
+<script>
+import login from "@/components/login";
+import { mapGetters } from "vuex";
+export default {
+  components: { login },
+  props: {
+    collapse: {
+      type: Boolean,
+      default: () => {
+        return true;
+      }
+    },
+    nav_beauf: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    }
+  },
+  data() {
+    return {
+      searchKey: "",
+      searchSelect: "1",
+      options: [
+        {
+          label: "课程",
+          value: "1"
+        },
+        {
+          label: "题库",
+          value: "2"
+        },
+        {
+          label: "直播",
+          value: "6"
+        }
+      ]
+    };
+  },
+  computed: {
+    ...mapGetters(["header", "userInfo", "msgCount"]),
+
+    showNav: function() {
+      return function(list) {
+        var newList = [];
+        if (list) {
+          newList = list
+            .filter(item => {
+              switch (item.name) {
+                case "首页":
+                  item.url = "/home";
+                  break;
+                case "走进祥粤":
+                  item.url = "/about";
+                  break;
+                case "课程":
+                  item.url = "/course-list";
+                  break;
+                case "题库":
+                  item.url = "/bank-list";
+                  break;
+                case "直播":
+                  item.url = "/live-list";
+                  break;
+                case "讲义资料":
+                  item.url = "/handout-list";
+                  break;
+                case "积分商城":
+                  item.url = "/points-list";
+                  break;
+
+                default:
+                  break;
+              }
+              return item.status === 1;
+            })
+            .sort((a, b) => a.sort - b.sort);
+        }
+        return newList;
+      };
+    },
+    beauf_s: function() {
+      return function(collapse, nav_beauf) {
+        if (!collapse && nav_beauf) {
+          return {
+            backgroundColor: "rgba(0,0,0,.1)",
+            backdropFilter: "blur(20px)"
+          };
+        } else {
+          return {
+            backgroundColor: "#fff"
+          };
+        }
+      };
+    },
+    beauf_li: function() {
+      return function(collapse, nav_beauf) {
+        if (!collapse && nav_beauf) {
+          return {
+            color: "#fff"
+          };
+        } else {
+          return {
+            color: "#000"
+          };
+        }
+      };
+    },
+    beauf_imgUrl: function() {
+      return function(collapse, nav_beauf) {
+        if (!collapse && nav_beauf) {
+          return this.header.undertone || "";
+        } else {
+          return this.header.companyLogo || "";
+        }
+      };
+    },
+    beauf_status: function() {
+      return function(collapse, nav_beauf) {
+        if (!collapse && nav_beauf) {
+          return true;
+        } else {
+          return false;
+        }
+      };
+    }
+  },
+  methods: {
+    search() {
+      if (!this.searchKey.trim()) {
+        this.$message({
+          type: "warning",
+          duration: 2000,
+          message: "请输入搜索内容"
+        });
+
+        return;
+      }
+      let path = this.$route.path;
+      let type = this.searchSelect;
+      if (path == "/bank-list") {
+        //在题库列表页面直接传参
+        if (type == "2") {
+          this.$emit("search", this.searchKey);
+        } else if (type == "6") {
+          this.$router.push({
+            path: "/live-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        } else {
+          this.$router.push({
+            path: "/course-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        }
+      } else if (path == "/course-list") {
+        //在课程列表页面直接传参
+        if (type == "1") {
+          this.$emit("search", 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
+            }
+          });
+        }
+      } else if (path == "/live-list") {
+        //在课程列表页面直接传参
+        if (type == "6") {
+          this.$emit("search", this.searchKey);
+        } else if (type == "1") {
+          this.$router.push({
+            path: "/course-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        } else {
+          this.$router.push({
+            path: "/bank-list",
+            query: {
+              searchKey: this.searchKey
+            }
+          });
+        }
+      } else {
+        //根据类型跳转题库或者列表页面
+        console.log(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
+            }
+          });
+        }
+      }
+      this.searchKey = "";
+    },
+    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;
+
+        default:
+          break;
+      }
+    },
+    go(path, query) {
+      if (path === this.$route.path) {
+        this.$router.push({
+          path: "refresh" //refresh路由地址和当前要刷新路由地址同级即可
+        });
+        return;
+      }
+      this.$router.push({
+        path,
+        query
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.collapse {
+  height: 70px;
+  background-color: #fff;
+}
+.header_style {
+  z-index: 100;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 70px;
+  width: 100%;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+  & > .margin_center {
+    width: 1400px;
+    margin: 0 auto;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    & > .company_img {
+      cursor: pointer;
+      text-align: center;
+      max-width: 300px;
+      max-height: 61px;
+      margin-right: 20px;
+    }
+  }
+}
+.right_end {
+  & > .nav_ul {
+    display: flex;
+    align-items: center;
+    height: 70px;
+    margin-right: 30px;
+    & > li {
+      font-weight: bold;
+      user-select: none;
+      font-size: 14px;
+      padding: 0px 24px;
+      height: 70px;
+      border-bottom: 2px solid transparent;
+      line-height: 68px;
+      cursor: pointer;
+      &:hover {
+        border-bottom: 2px solid rgb(0, 122, 255);
+      }
+    }
+    & > .active {
+      border-bottom: 2px solid rgb(0, 122, 255);
+    }
+  }
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+}
+.btn_logins {
+  border-radius: 0px;
+  height: 68px;
+  border-bottom: 2px solid transparent;
+  &:hover {
+    border-bottom: 2px solid rgb(0, 122, 255);
+  }
+}
+/deep/ .input_top {
+  height: 24px;
+  width: 150px;
+  margin-right: 30px;
+  border: 1px solid #333;
+  border-radius: 100px;
+  .el-input-group__prepend {
+    border-top-left-radius: 100px;
+    border-bottom-left-radius: 100px;
+    background-color: transparent;
+    border-color: transparent;
+    font-size: 12px;
+    color: #333;
+    & > .el-select {
+      width: 50px;
+      .el-input__inner {
+        padding: 0px;
+        font-size: 12px;
+        padding-left: 4px;
+        height: 24px;
+        line-height: 24px;
+      }
+      .el-input__suffix {
+        right: 5px;
+      }
+      .el-select__caret {
+        width: 14px;
+        font-size: 12px;
+        color: #333;
+      }
+    }
+  }
+  & > .el-input__inner {
+    border-color: transparent !important;
+    padding: 0px;
+    width: 70px;
+    height: 24px;
+    line-height: 24px;
+  }
+  .el-input-group__append {
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+    border-color: transparent;
+    background-color: transparent;
+    padding: 0px 8px;
+    color: #333;
+    .el-button {
+      padding: 0px 4px;
+    }
+  }
+}
+/deep/ .input_top_status {
+  border: 1px solid #fff;
+  border-radius: 100px;
+  .el-input-group__prepend {
+    border-top-left-radius: 100px;
+    border-bottom-left-radius: 100px;
+    background-color: transparent;
+    border-color: transparent;
+    color: #fff;
+    .el-select__caret {
+      width: 14px;
+      font-size: 12px;
+      color: #fff!important;
+    }
+  }
+  & > .el-input__inner {
+    border-color: transparent !important;
+    background-color: transparent;
+    color: #eee;
+    &:focus {
+      border-color: transparent;
+    }
+  }
+  .el-input-group__append {
+    border-top-right-radius: 100px;
+    border-bottom-right-radius: 100px;
+    border-color: transparent;
+    background-color: transparent;
+    color: #fff;
+  }
+}
+</style>

src/components/listOption/index.vue

@@ -1,401 +1,42 @@
 <template>
-  <div id="listOption">
-    <div class="container" style="padding: 10px 0px;">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
-        <el-breadcrumb-item>{{ computedName(goodsType) }}</el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
-    <div class="topBox">
-      <div class="container">
-        <div class="tabber">
-          <div class="left">关键词：</div>
-          <div class="right" style="align-self: center;margin-top: 10px;">
-            <el-input
-              clearable
-              v-model="params.goodsName"
-              :size="size"
-              placeholder="请输入关键词"
-              style="width:500px;"
-            ></el-input>
-            <el-button :size="size" @click="init">重置</el-button>
-          </div>
-        </div>
-        <div class="tabber">
-          <div class="left">教育类型：</div>
-          <div class="right">
-            <div
-              class="t-button"
-              v-for="(item, index) in educationList"
-              :key="index"
-              :class="params.educationId == item.id ? 'active' : null"
-              @click="activeEdu(item.id)"
-            >
-              {{ item.educationName }}
-            </div>
-          </div>
-        </div>
-        <div class="tabber" v-if="params.educationId">
-          <div class="left">培训项目：</div>
-          <div class="right">
-            <div
-              class="t-button"
-              v-for="(item, index) in businessList"
-              :key="index"
-              :class="params.businessId == item.id ? 'active' : null"
-              @click="activeBusiness(item.projectId, item.id)"
-            >
-              {{ item.aliasName }}
-            </div>
-          </div>
-        </div>
-        <div class="tabber" v-if="params.businessId">
-          <div class="left">科目分类：</div>
-          <div class="right">
-            <div
-              class="t-button"
-              v-for="(item, index) in subjectList"
-              :key="index"
-              :class="params.subjectId == item.id ? 'active' : null"
-              @click="activeSubject(item.id)"
-            >
-              {{ item.subjectName }}
-            </div>
-          </div>
-        </div>
-        <div class="tabber">
-          <div class="left">排序条件：</div>
-          <div class="right">
-            <div
-              class="t-button"
-              v-for="(item, index) in sort"
-              :key="index"
-              :class="params.sortType == item.value ? 'active' : null"
-              @click="activeSort(item.value)"
-            >
-              {{ item.label }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <el-main
-      v-loading="loading"
-      class="container"
-      style="width:1310px!important"
-    >
-      <ul class="list">
-        <el-empty
-          v-if="goodsList.length == 0"
-          description="暂无数据"
-        ></el-empty>
-        <li class="course-item" v-for="(item, index) in goodsList" :key="index">
-          <GoodsItem :item="item"></GoodsItem>
-        </li>
-        <div style="clear:both;"></div>
-      </ul>
-      <div class="pagination">
-        <el-pagination
-          @current-change="currentChange"
-          background
-          layout="prev, pager, next"
-          :total="total"
-          :pager-count="5"
-          :page-size="formData.pageSize"
-        >
-        </el-pagination>
-      </div>
-    </el-main>
+  <div id="">
+    <component :is="currentComponent(header.templateStatus)"></component>
   </div>
 </template>
 
 <script>
-import { cancel } from "@/apis/common.js";
-import GoodsItem from "@/components/goodsItem/index";
+import { mapGetters } from "vuex";
+import listOption1 from "../listOption1/index.vue";
+import listOption2 from "../listOption2/index.vue";
 export default {
-  components: { GoodsItem },
-  props: {
-    goodsType: {
-      type: Number
-    }
-  },
+  components: { listOption1, listOption2 },
   data() {
-    return {
-      size: "medium",
-      educationList: [],
-      businessList: [],
-      subjectList: [],
-      sort: [
-        {
-          label: "综合排序",
-          value: 1
-        },
-        {
-          label: "低价优先",
-          value: 2
-        },
-        {
-          label: "高价优先",
-          value: 3
-        }
-      ],
-      params: {
-        goodsName: ""
-      },
-      formData: {
-        pageNum: 1,
-        pageSize: 15
-      },
-      loading: false,
-      goodsList: [],
-      total: 0
-    };
-  },
-  watch: {
-    params: {
-      handler(newVal) {
-        if (cancel) {
-          cancel("取消请求");
-        }
-        this.search();
-      },
-      deep: true
-    }
-  },
-  created() {
-    this.params = {
-      goodsName: this.$route.query.searchKey || "",
-      educationId: this.$route.query.educationId || "",
-      projectId: this.$route.query.projectId || "",
-      businessId: this.$route.query.businessId || "",
-      subjectId: this.$route.query.subjectId || "",
-      sortType: 1,
-      showStatus: 1,
-      goodsStatus: 1
-    };
-  },
-  async mounted() {
-    await this.getEducationTypeList();
-    if (this.params.educationId) {
-      await this.getBusinessList();
-    }
-    if (this.params.businessId) {
-      await this.getSubjectList();
-    }
+    return {};
   },
-  methods: {
-    //获得商品类型
-    computedName(type) {
-      let name = "";
-      switch (type) {
-        case 1:
-          name = "课程";
-          break;
-        case 2:
-          name = "题库";
-          break;
-        case 6:
-          name = "直播";
-          break;
-        case 8:
-          name = "讲义资料";
-          break;
+  created() {},
+  computed: {
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "listOption1";
+            break;
+          case 2:
+            str = "listOption2";
+            break;
 
-        default:
-          break;
-      }
-      return name;
-    },
-    //重置
-    init() {
-      this.params = {
-        goodsName: "",
-        educationId: "",
-        projectId: "",
-        businessId: "",
-        subjectId: "",
-        sortType: 1,
-        showStatus: 1,
-        goodsStatus: 1
-      };
-      this.formData = {
-        pageNum: 1,
-        pageSize: 15
-      };
-    },
-    //搜索
-    search() {
-      this.loading = true;
-      this.$router.replace({ path: this.$route.path, query: this.params });
-      let data = Object.assign(this.params, this.formData);
-      data.educationTypeId = data.educationId;
-      data.goodsType = this.goodsType;
-      this.$request
-        .goodsList(data)
-        .then(res => {
-          this.goodsList = res.rows || [];
-          this.total = res.total || 0;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    //分页
-    currentChange(e) {
-      this.formData.pageNum = e;
-      this.search();
-    },
-    //排序
-    activeSort(id) {
-      this.params.sortType = id;
-    },
-    /**
-     * 获取教育类型
-     */
-    getEducationTypeList() {
-      return new Promise(resolve => {
-        this.$request
-          .educationTypeList({ status: 1 })
-          .then(res => {
-            let item = [
-              {
-                educationName: "全部",
-                id: "",
-                status: 1,
-                sort: 0
-              }
-            ];
-            this.educationList = item.concat(res.rows);
-          })
-          .finally(() => {
-            resolve();
-          });
-      });
-    },
-    //选中教育类型
-    async activeEdu(id) {
-      this.params.educationId = id;
-      this.params.projectId = "";
-      this.params.businessId = "";
-      this.params.subjectId = "";
-      if (id) {
-        await this.getBusinessList();
-        if (this.params.subjectId) {
-          await this.getSubjectList();
+          default:
+            str = "listOption1";
+            break;
         }
-      }
-    },
-    /**
-     * 获取业务层级
-     */
-    getBusinessList() {
-      return new Promise(resolve => {
-        this.$request
-          .businessList({ educationId: this.params.educationId, status: 1 })
-          .then(res => {
-            this.businessList = [
-              { id: "", projectId: "", aliasName: "全部" }
-            ].concat(res.rows);
-            console.log(this.businessList, "aa");
-          })
-          .finally(() => {
-            resolve();
-          });
-      });
-    },
-    //选中业务层级
-    async activeBusiness(projectId, id) {
-      this.params.projectId = projectId;
-      this.params.businessId = id;
-      this.params.subjectId = "";
-      if (id) {
-        await this.getSubjectList();
-      }
-    },
-    /**
-     * 获取科目分类
-     */
-    getSubjectList() {
-      return new Promise(resolve => {
-        this.$request
-          .subjectList({
-            educationId: this.params.educationId,
-            projectId: this.params.projectId,
-            businessId: this.params.businessId,
-            status: 1
-          })
-          .then(res => {
-            this.subjectList = [{ id: "", subjectName: "全部" }].concat(
-              res.rows
-            );
-          })
-          .finally(() => {
-            resolve();
-          });
-      });
-    },
-    //选中科目分类
-    activeSubject(id) {
-      this.params.subjectId = id;
+        return str;
+      };
     }
-  }
+  },
+  methods: {}
 };
 </script>
 
-<style lang="scss" scoped>
-#listOption {
-  .topBox {
-    background-color: #ebf2fc;
-    .tabber {
-      display: flex;
-      animation: t-tran 0.3s;
-      & > .left {
-        flex-shrink: 0;
-        margin-top: 10px;
-        padding: 8px 0;
-        width: 80px;
-        font-size: 16px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #333333;
-      }
-      & > .right {
-        flex: 1;
-        flex-wrap: wrap;
-        & > .t-button {
-          display: inline-block;
-          cursor: pointer;
-          border-radius: 8px;
-          margin: 10px;
-          padding: 8px 16px;
-          color: #666666;
-          font-size: 16px;
-          background: #f7f9fc;
-          color: #999;
-          transition: all 0.2s;
-          &.active {
-            color: #fff;
-            background: #3f8dfd;
-          }
-        }
-      }
-    }
-    @keyframes t-tran {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-  }
-  .course-item {
-    float: left;
-  }
-
-  .pagination {
-    padding: 30px 0;
-    text-align: center;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/components/listOption1/index.vue

@@ -0,0 +1,401 @@
+<template>
+  <div id="listOption">
+    <div class="container" style="padding: 10px 0px;">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ computedName(goodsType) }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="topBox">
+      <div class="container">
+        <div class="tabber">
+          <div class="left">关键词：</div>
+          <div class="right" style="align-self: center;margin-top: 10px;">
+            <el-input
+              clearable
+              v-model="params.goodsName"
+              :size="size"
+              placeholder="请输入关键词"
+              style="width:500px;"
+            ></el-input>
+            <el-button :size="size" @click="init">重置</el-button>
+          </div>
+        </div>
+        <div class="tabber">
+          <div class="left">教育类型：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in educationList"
+              :key="index"
+              :class="params.educationId == item.id ? 'active' : null"
+              @click="activeEdu(item.id)"
+            >
+              {{ item.educationName }}
+            </div>
+          </div>
+        </div>
+        <div class="tabber" v-if="params.educationId">
+          <div class="left">培训项目：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in businessList"
+              :key="index"
+              :class="params.businessId == item.id ? 'active' : null"
+              @click="activeBusiness(item.projectId, item.id)"
+            >
+              {{ item.aliasName }}
+            </div>
+          </div>
+        </div>
+        <div class="tabber" v-if="params.businessId">
+          <div class="left">科目分类：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in subjectList"
+              :key="index"
+              :class="params.subjectId == item.id ? 'active' : null"
+              @click="activeSubject(item.id)"
+            >
+              {{ item.subjectName }}
+            </div>
+          </div>
+        </div>
+        <div class="tabber">
+          <div class="left">排序条件：</div>
+          <div class="right">
+            <div
+              class="t-button"
+              v-for="(item, index) in sort"
+              :key="index"
+              :class="params.sortType == item.value ? 'active' : null"
+              @click="activeSort(item.value)"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-main
+      v-loading="loading"
+      class="container"
+      style="width:1310px!important"
+    >
+      <ul class="list">
+        <el-empty
+          v-if="goodsList.length == 0"
+          description="暂无数据"
+        ></el-empty>
+        <li class="course-item" v-for="(item, index) in goodsList" :key="index">
+          <GoodsItem :item="item"></GoodsItem>
+        </li>
+        <div style="clear:both;"></div>
+      </ul>
+      <div class="pagination">
+        <el-pagination
+          @current-change="currentChange"
+          background
+          layout="prev, pager, next"
+          :total="total"
+          :pager-count="5"
+          :page-size="formData.pageSize"
+        >
+        </el-pagination>
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script>
+import { cancel } from "@/apis/common.js";
+import GoodsItem from "@/components/goodsItem/index";
+export default {
+  components: { GoodsItem },
+  props: {
+    goodsType: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      size: "medium",
+      educationList: [],
+      businessList: [],
+      subjectList: [],
+      sort: [
+        {
+          label: "综合排序",
+          value: 1
+        },
+        {
+          label: "低价优先",
+          value: 2
+        },
+        {
+          label: "高价优先",
+          value: 3
+        }
+      ],
+      params: {
+        goodsName: ""
+      },
+      formData: {
+        pageNum: 1,
+        pageSize: 15
+      },
+      loading: false,
+      goodsList: [],
+      total: 0
+    };
+  },
+  watch: {
+    params: {
+      handler(newVal) {
+        if (cancel) {
+          cancel("取消请求");
+        }
+        this.search();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.params = {
+      goodsName: this.$route.query.searchKey || "",
+      educationId: this.$route.query.educationId || "",
+      projectId: this.$route.query.projectId || "",
+      businessId: this.$route.query.businessId || "",
+      subjectId: this.$route.query.subjectId || "",
+      sortType: 1,
+      showStatus: 1,
+      goodsStatus: 1
+    };
+  },
+  async mounted() {
+    await this.getEducationTypeList();
+    if (this.params.educationId) {
+      await this.getBusinessList();
+    }
+    if (this.params.businessId) {
+      await this.getSubjectList();
+    }
+  },
+  methods: {
+    //获得商品类型
+    computedName(type) {
+      let name = "";
+      switch (type) {
+        case 1:
+          name = "课程";
+          break;
+        case 2:
+          name = "题库";
+          break;
+        case 6:
+          name = "直播";
+          break;
+        case 8:
+          name = "讲义资料";
+          break;
+
+        default:
+          break;
+      }
+      return name;
+    },
+    //重置
+    init() {
+      this.params = {
+        goodsName: "",
+        educationId: "",
+        projectId: "",
+        businessId: "",
+        subjectId: "",
+        sortType: 1,
+        showStatus: 1,
+        goodsStatus: 1
+      };
+      this.formData = {
+        pageNum: 1,
+        pageSize: 15
+      };
+    },
+    //搜索
+    search() {
+      this.loading = true;
+      this.$router.replace({ path: this.$route.path, query: this.params });
+      let data = Object.assign(this.params, this.formData);
+      data.educationTypeId = data.educationId;
+      data.goodsType = this.goodsType;
+      this.$request
+        .goodsList(data)
+        .then(res => {
+          this.goodsList = res.rows || [];
+          this.total = res.total || 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    //分页
+    currentChange(e) {
+      this.formData.pageNum = e;
+      this.search();
+    },
+    //排序
+    activeSort(id) {
+      this.params.sortType = id;
+    },
+    /**
+     * 获取教育类型
+     */
+    getEducationTypeList() {
+      return new Promise(resolve => {
+        this.$request
+          .educationTypeList({ status: 1 })
+          .then(res => {
+            let item = [
+              {
+                educationName: "全部",
+                id: "",
+                status: 1,
+                sort: 0
+              }
+            ];
+            this.educationList = item.concat(res.rows);
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中教育类型
+    async activeEdu(id) {
+      this.params.educationId = id;
+      this.params.projectId = "";
+      this.params.businessId = "";
+      this.params.subjectId = "";
+      if (id) {
+        await this.getBusinessList();
+        if (this.params.subjectId) {
+          await this.getSubjectList();
+        }
+      }
+    },
+    /**
+     * 获取业务层级
+     */
+    getBusinessList() {
+      return new Promise(resolve => {
+        this.$request
+          .businessList({ educationId: this.params.educationId, status: 1 })
+          .then(res => {
+            this.businessList = [
+              { id: "", projectId: "", aliasName: "全部" }
+            ].concat(res.rows);
+            console.log(this.businessList, "aa");
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中业务层级
+    async activeBusiness(projectId, id) {
+      this.params.projectId = projectId;
+      this.params.businessId = id;
+      this.params.subjectId = "";
+      if (id) {
+        await this.getSubjectList();
+      }
+    },
+    /**
+     * 获取科目分类
+     */
+    getSubjectList() {
+      return new Promise(resolve => {
+        this.$request
+          .subjectList({
+            educationId: this.params.educationId,
+            projectId: this.params.projectId,
+            businessId: this.params.businessId,
+            status: 1
+          })
+          .then(res => {
+            this.subjectList = [{ id: "", subjectName: "全部" }].concat(
+              res.rows
+            );
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中科目分类
+    activeSubject(id) {
+      this.params.subjectId = id;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#listOption {
+  .topBox {
+    background-color: #ebf2fc;
+    .tabber {
+      display: flex;
+      animation: t-tran 0.3s;
+      & > .left {
+        flex-shrink: 0;
+        margin-top: 10px;
+        padding: 8px 0;
+        width: 80px;
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #333333;
+      }
+      & > .right {
+        flex: 1;
+        flex-wrap: wrap;
+        & > .t-button {
+          display: inline-block;
+          cursor: pointer;
+          border-radius: 8px;
+          margin: 10px;
+          padding: 8px 16px;
+          color: #666666;
+          font-size: 16px;
+          background: #f7f9fc;
+          color: #999;
+          transition: all 0.2s;
+          &.active {
+            color: #fff;
+            background: #3f8dfd;
+          }
+        }
+      }
+    }
+    @keyframes t-tran {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  }
+  .course-item {
+    float: left;
+  }
+
+  .pagination {
+    padding: 30px 0;
+    text-align: center;
+  }
+}
+</style>

src/components/listOption2/index.vue

@@ -0,0 +1,421 @@
+<template>
+  <div id="listOption">
+    <div class="container" style="padding: 20px 0px;width: 1200px;">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ computedName(goodsType) }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="content_tBox">
+      <div v-if="false" class="tabber">
+        <div class="left">关键词：</div>
+        <div class="right" style="align-self: center;margin-top: 10px;">
+          <el-input
+            clearable
+            v-model="params.goodsName"
+            :size="size"
+            placeholder="请输入关键词"
+            style="width:500px;"
+          ></el-input>
+          <el-button :size="size" @click="init">重置</el-button>
+        </div>
+      </div>
+      <div class="tabber">
+        <div class="left">教育类型：</div>
+        <div class="right">
+          <div
+            class="t-button"
+            v-for="(item, index) in educationList"
+            :key="index"
+            :class="params.educationId == item.id ? 'active' : null"
+            @click="activeEdu(item.id)"
+          >
+            {{ item.educationName }}
+          </div>
+        </div>
+      </div>
+      <div class="tabber" v-if="params.educationId">
+        <div class="left">培训项目：</div>
+        <div class="right">
+          <div
+            class="t-button"
+            v-for="(item, index) in businessList"
+            :key="index"
+            :class="params.businessId == item.id ? 'active' : null"
+            @click="activeBusiness(item.projectId, item.id)"
+          >
+            {{ item.aliasName }}
+          </div>
+        </div>
+      </div>
+      <div class="tabber" v-if="params.businessId">
+        <div class="left">科目分类：</div>
+        <div class="right">
+          <div
+            class="t-button"
+            v-for="(item, index) in subjectList"
+            :key="index"
+            :class="params.subjectId == item.id ? 'active' : null"
+            @click="activeSubject(item.id)"
+          >
+            {{ item.subjectName }}
+          </div>
+        </div>
+      </div>
+      <div class="tabber">
+        <div class="left">排序条件：</div>
+        <div class="right">
+          <div
+            class="t-button"
+            v-for="(item, index) in sort"
+            :key="index"
+            :class="params.sortType == item.value ? 'active' : null"
+            @click="activeSort(item.value)"
+          >
+            {{ item.label }}
+          </div>
+          <span
+            style="float: right;display: inline-block;height: 47px;line-height: 47px;color: #666;"
+            >共找到{{ total }}个结果</span
+          >
+        </div>
+      </div>
+      <el-main v-loading="loading">
+        <ul class="list">
+          <el-empty
+            v-if="goodsList.length == 0"
+            description="暂无数据"
+          ></el-empty>
+          <GoodsItemNew
+            v-for="(item, index) in goodsList"
+            :key="index"
+            :goodsItem="item"
+          ></GoodsItemNew>
+        </ul>
+        <div class="pagination">
+          <el-pagination
+            @current-change="currentChange"
+            background
+            layout="prev, pager, next"
+            :total="total"
+            :pager-count="5"
+            :page-size="formData.pageSize"
+          >
+          </el-pagination>
+        </div>
+      </el-main>
+    </div>
+  </div>
+</template>
+
+<script>
+import GoodsItemNew from "@/components/goodsItem-new/index";
+import { cancel } from "@/apis/common.js";
+export default {
+  components: { GoodsItemNew },
+  props: {
+    goodsType: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      size: "medium",
+      educationList: [],
+      businessList: [],
+      subjectList: [],
+      sort: [
+        {
+          label: "综合排序",
+          value: 1
+        },
+        {
+          label: "低价优先",
+          value: 2
+        },
+        {
+          label: "高价优先",
+          value: 3
+        }
+      ],
+      params: {
+        goodsName: ""
+      },
+      formData: {
+        pageNum: 1,
+        pageSize: 12
+      },
+      loading: false,
+      goodsList: [],
+      total: 0
+    };
+  },
+  watch: {
+    params: {
+      handler(newVal, oldVal) {
+        if (cancel) {
+          cancel("取消请求");
+        }
+        this.search();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.params = {
+      goodsName: this.$route.query.searchKey || "",
+      educationId: this.$route.query.educationId || "",
+      projectId: this.$route.query.projectId || "",
+      businessId: this.$route.query.businessId || "",
+      subjectId: this.$route.query.subjectId || "",
+      sortType: 1,
+      showStatus: 1,
+      goodsStatus: 1
+    };
+  },
+  async mounted() {
+    await this.getEducationTypeList();
+    if (this.params.educationId) {
+      await this.getBusinessList();
+    }
+    if (this.params.businessId) {
+      await this.getSubjectList();
+    }
+  },
+  methods: {
+    //获得商品类型
+    computedName(type) {
+      let name = "";
+      switch (type) {
+        case 1:
+          name = "课程";
+          break;
+        case 2:
+          name = "题库";
+          break;
+        case 6:
+          name = "直播";
+          break;
+        case 8:
+          name = "讲义资料";
+          break;
+
+        default:
+          break;
+      }
+      return name;
+    },
+    //重置
+    init() {
+      this.params = {
+        goodsName: "",
+        educationId: "",
+        projectId: "",
+        businessId: "",
+        subjectId: "",
+        sortType: 1,
+        showStatus: 1,
+        goodsStatus: 1
+      };
+      this.formData = {
+        pageNum: 1,
+        pageSize: 12
+      };
+    },
+    //搜索
+    search() {
+      this.loading = true;
+      this.$router.replace({ path: this.$route.path, query: this.params });
+      let data = Object.assign(this.params, this.formData);
+      data.educationTypeId = data.educationId;
+      data.goodsType = this.goodsType;
+      this.$request
+        .goodsList(data)
+        .then(res => {
+          this.goodsList = res.rows || [];
+          this.total = res.total || 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    //分页
+    currentChange(e) {
+      this.formData.pageNum = e;
+      this.search();
+    },
+    //排序
+    activeSort(id) {
+      this.params.sortType = id;
+    },
+    /**
+     * 获取教育类型
+     */
+    getEducationTypeList() {
+      return new Promise(resolve => {
+        this.$request
+          .educationTypeList({ status: 1 })
+          .then(res => {
+            let item = [
+              {
+                educationName: "全部",
+                id: "",
+                status: 1,
+                sort: 0
+              }
+            ];
+            this.educationList = item.concat(res.rows);
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中教育类型
+    async activeEdu(id) {
+      this.params.educationId = id;
+      this.params.projectId = "";
+      this.params.businessId = "";
+      this.params.subjectId = "";
+      if (id) {
+        await this.getBusinessList();
+        if (this.params.subjectId) {
+          await this.getSubjectList();
+        }
+      }
+    },
+    /**
+     * 获取业务层级
+     */
+    getBusinessList() {
+      return new Promise(resolve => {
+        this.$request
+          .businessList({ educationId: this.params.educationId, status: 1 })
+          .then(res => {
+            this.businessList = [
+              { id: "", projectId: "", aliasName: "全部" }
+            ].concat(res.rows);
+            console.log(this.businessList, "aa");
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中业务层级
+    async activeBusiness(projectId, id) {
+      this.params.projectId = projectId;
+      this.params.businessId = id;
+      this.params.subjectId = "";
+      if (id) {
+        await this.getSubjectList();
+      }
+    },
+    /**
+     * 获取科目分类
+     */
+    getSubjectList() {
+      return new Promise(resolve => {
+        this.$request
+          .subjectList({
+            educationId: this.params.educationId,
+            projectId: this.params.projectId,
+            businessId: this.params.businessId,
+            status: 1
+          })
+          .then(res => {
+            this.subjectList = [{ id: "", subjectName: "全部" }].concat(
+              res.rows
+            );
+          })
+          .finally(() => {
+            resolve();
+          });
+      });
+    },
+    //选中科目分类
+    activeSubject(id) {
+      this.params.subjectId = id;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#listOption {
+  .content_tBox {
+    margin: 0 auto 20px;
+    width: 1200px;
+    padding: 20px;
+    background: #fff;
+    border-radius: 4px;
+    & > .el-main {
+      padding: 0px;
+    }
+
+    .tabber {
+      display: flex;
+      animation: t-tran 0.3s;
+      padding: 20px 0px;
+      border-bottom: 1px dashed #eee;
+      &:first-child {
+        padding-top: 0px;
+      }
+      &:last-of-type {
+        border-bottom: none;
+      }
+      & > .left {
+        flex-shrink: 0;
+        margin-top: 10px;
+        padding: 8px 0;
+        width: 80px;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #666;
+      }
+      & > .right {
+        flex: 1;
+        flex-wrap: wrap;
+        & > .t-button {
+          user-select: none;
+          display: inline-block;
+          cursor: pointer;
+          border-radius: 100px;
+          margin: 10px;
+          padding: 4px 12px;
+          color: #666666;
+          font-size: 14px;
+          background: #f7f9fc;
+          color: #666;
+          transition: all 0.2s;
+          &.active {
+            color: #fff;
+            background: #3f8dfd;
+          }
+        }
+      }
+    }
+    @keyframes t-tran {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  }
+
+  .pagination {
+    padding: 30px 0;
+    text-align: center;
+  }
+}
+.list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.el-empty {
+  margin: 0 auto;
+}
+</style>

src/components/login/agree.vue

@@ -0,0 +1,637 @@
+<template>
+  <div id="">
+    <el-dialog
+      width="800px"
+      :title="status === 1 ? '用户使用协议' : '个人信息保护政策'"
+      :visible.sync="innerVisible"
+      append-to-body
+      custom-class="content_dialog"
+    >
+      <div class="content">
+        <div class="bold">欢迎注册成为“{{ companyName }}”用户！</div>
+
+        <div>
+          在您注册过程中,您需要完成我们的注册流程并通过点击“同意并继续”的形式在线签署以下协议及政策,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
+        </div>
+
+        <div>
+          <span class="bold">【请您注意】</span
+          >如果您不同意以下协议及政策全部或任何条款约定，请您停止注册。您停止注册后仅可以浏览我们的产品（或服务），但无法使用我们的产品（或服务）。如果您按照注册流程提示填写信息，阅读并点击同意上述协议及政策且完成全部注册流程后，即表示您也充分阅读、理解并接受协议及政策的全部内容，并表明您同意我们可以依照协议及政策内容来处理您的个人信息。如您对以下协议内容有任何疑问，请随时通过《个人信息保护政策》中的联系方式联系我们。
+        </div>
+
+        <div class="center bold">《用户使用协议》</div>
+
+        <div>
+          本《用户使用协议》（以下称“本协议”）是由您（以下称“用户”）与广东省祥粤建设职业培训学校（以下简称“祥粤”或“我们”）就用户使用祥粤提供的“{{
+            companyName
+          }}”互联网服务产品（包括但不限于：{{ companyName }}网站{{
+            locationName
+          }}、微信小程序等，以下简称“{{
+            companyName
+          }}”），包括但不限于注册、登录、使用等方面所订立的相关权利义务规范。本服务条款对用户和祥粤均具有法律效力。本协议连同所有更新材料、补充条款以及祥粤的其他规则和政策共同构成了用户与祥粤之间的协议。
+          我们在此特别提醒，在用户注册使用“{{
+            companyName
+          }}”服务前，请务必审慎阅读本协议的全部条款、充分理解各条款内容后再点击同意，特别是免除或者限制祥粤责任的条款、对用户权利限制的条款、法律适用和争议解决条款，这些条款将尽可能以加粗方式标识。如用户按照注册页面提示填写信息、点击同意本协议且完成全部注册流程，或者在我们更新本协议后继续使用“{{
+            companyName
+          }}”提供的服务，即表示用户已充分阅读、理解并接受本协议及祥粤的其他规则和政策的全部内容，成为具有法律约束力的本协议的一方。如果用户不同意本协议任何条款及/或修改后的内容，应立即停止注册程序或停止使用“{{
+            companyName
+          }}”的服务。 如对本协议内容有任何疑问、意见或建议，用户可通过“{{
+            companyName
+          }}”网站（{{ locationName }}）页面上的联系方式与我们联系。
+        </div>
+
+        <div class="bold">一、账号注册与使用</div>
+
+        <div>
+          1.用户在使用“{{
+            companyName
+          }}”服务时需要注册一个账号，账号注册成功后，将产生“{{
+            companyName
+          }}”账号及相应的用户名和密码等账号信息。用户所创建的“{{
+            companyName
+          }}”账号的所有权归祥粤所有，用户完成申请注册手续后，即获得“{{
+            companyName
+          }}”账号的使用权，该使用权仅属于初始申请注册人，禁止赠与、借用、租用、转让或售卖或以其他方式许可他人使用该账号，用户应谨慎合理地保存、使用其用户名和密码。如果我们发现或者有合理理由认为使用者并非账号初始注册人，为保障账号安全，我们有权立即暂停或终止向该注册账号提供服务，并有权永久禁用该账号。
+        </div>
+
+        <div>
+          2.您可以使用微信账号登录并使用“{{
+            companyName
+          }}”，但您需要将微信账号与“{{
+            companyName
+          }}”账号绑定，账号绑定后，您可以直接使用微信账号扫码登录并使用“{{
+            companyName
+          }}”的相关服务。
+        </div>
+
+        <div>
+          3.用户在注册及使用“{{
+            companyName
+          }}”服务时，必须提供真实、准确、完整、合法有效的资料，且有义务维持并及时更新相关资料。用户在账号注册及使用过程中需遵守相关法律法规，不得实施任何侵害国家利益、损害其他公民合法权益，有害社会道德风尚的行为。我们有权对用户提交的注册信息进行审核。如果用户提供的资料违反本款要求，用户需承担因此引起的相应责任及后果，并且我们保留终止用户使用“{{
+            companyName
+          }}”各项服务或采取其他处理措施的权利。
+        </div>
+
+        <div>
+          4.作为“{{ companyName }}”服务的提供者，为使用户更好地使用“{{
+            companyName
+          }}”的各项服务，保障用户的账号安全，我们有权要求用户按照我国法律规定完成实名认证。若用户提交的材料或提供的信息不准确、不真实、不规范、不合法或者我们有理由怀疑为错误、不实或不合法的资料，则我们有权拒绝为用户提供相关服务，用户可能无法使用“{{
+            companyName
+          }}”互联网服务或在使用过程中部分功能受到限制。
+        </div>
+
+        <div>
+          5.用户应当对以其用户账号进行的所有活动和事件负法律责任。用户同意在任何情况下不使用其他用户的账号或密码，不得冒充他人，也不得恶意使用注册账号导致其他用户误认，否则我们有权立即停止提供服务，收回其账号并由用户独自承担由此而产生的一切法律责任。在用户怀疑他人使用其账号或密码时，用户同意立即通知我们并按照要求提供相关身份证明文件等材料，同意授权我们采取一切合理措施以保证用户的利益不受损害，并认可该等措施所产生的法律效果归于用户自身。如用户丢失账号或遗忘密码，可通过平台页眉的联系方式及时申诉请求找回账号或密码。用户理解并认可，密码找回机制仅需要识别申诉提供资料与系统记录资料具有一致性，而无法识别申诉人是否系账号真正有权使用者。我们特别提醒用户应妥善保管账号和密码，当用户使用完毕后，应安全退出。因黑客行为、用户的保管疏忽或不可抗力因素等非祥粤的原因导致账号、密码遭他人非法使用、丢失的，我们不承担任何责任。
+        </div>
+
+        <div>
+          6.账号注销。在需要终止使用“{{
+            companyName
+          }}”账号服务时，符合以下条件的，用户可以申请注销其“{{
+            companyName
+          }}”账号：
+        </div>
+
+        <div>
+          （1）用户仅能申请注销用户本人的账号，并依照“{{
+            companyName
+          }}”的要求和流程进行注销；
+        </div>
+        <div>
+          （2）用户仍应对其在注销账号前且使用“{{
+            companyName
+          }}”服务期间的行为承担相应责任；
+        </div>
+        <div>（3）注销成功后，账号记录、功能等将无法恢复或提供。</div>
+        <div>
+          如用户需要注销“{{ companyName }}”账号，请打开“{{ companyName }}”网站{{
+            locationName
+          }}，如有疑问可联系客服。
+        </div>
+        <div>7. 用户必须自行准备如下设备和承担如下开支：</div>
+        <div>
+          （1）自行配备上网的所需设备，包括个人手机、平板电脑、调制解调器、路由器等；
+        </div>
+        <div>
+          （2）自行负担个人上网所支付的与此服务有关的电话费用、网络费用等。
+        </div>
+        <div class="bold">二、服务内容</div>
+        <div>
+          1.网上购物下单。使用“{{
+            companyName
+          }}”网站下订单，您应具备购买相关商品/服务的权利能力和行为能力，如果您在18周岁以下，您需要在监护人的监护参与下才能注册并使用本网站。在下订单的同时，即视为您满足上述条件，并对您在订单中提供的所有信息的真实性负责。
+        </div>
+
+        <div>
+          2.在线课程学习。您在购买课程后，可以在平台进行相应在线课程的学习。我们将尽最大努力保障在线课程的正常使用，如因网站维护、系统升级、课程更新等技术原因导致课程无法正常使用的，请您及时向我们反馈，我们将会尽快解决问题。如您购买的课程包含考试报名，我们会根据您提供的考试报名所需的个人信息，向相关考试机构提交报名信息，您应对提供的个人信息的真实性负责。
+        </div>
+
+        <div class="bold">三、用户个人信息保护及授权</div>
+
+        <div>
+          1.您知悉并同意，为方便您使用“{{
+            companyName
+          }}”相关服务，我们将视不同产品/服务，存储您在使用时的必要信息，包括但不限于您的真实姓名、身份证号码、手机号码、个人生物识别信息、学历信息等。除法律法规规定的情形外，未经您的许可，我们不会向第三方公开、透露您的个人信息。我们对相关信息采取专业加密存储与传输方式，利用合理措施保障用户个人信息的安全。
+        </div>
+
+        <div>2.您充分理解并同意：</div>
+        <div>
+          （1）同意通过短信、电话、站内私信等形式，接受“{{
+            companyName
+          }}”发送的多类通知，用于用户消息告知、身份验证、安全验证等用途；我们可能使用您的个人信息，通过我们的站内私信、电子邮件或其他方式向您提供或推广我们或第三方的商品和服务；
+        </div>
+
+        <div>
+          （2）为配合行政监管机关、司法机关执行工作，在法律规定范围内我们有权向上述行政、司法机关提供您在使用“{{
+            companyName
+          }}”时所储存的相关信息，包括但不限于您的注册信息等，或使用相关信息进行证据保全，包括但不限于公证、见证等；
+        </div>
+
+        <div>
+          （3）我们依法保障您在使用过程中的知情权和选择权，在您使用“{{
+            companyName
+          }}”服务过程中，涉及您设备自带功能的服务会提前征得您同意，您一经确认，我们有权开启包括但不限于使用摄像头、访问相册等提供服务必要的辅助功能。
+        </div>
+
+        <div>
+          （4）我们有权根据实际情况，在法律规定范围内自行决定单个用户在“{{
+            companyName
+          }}”及服务中数据的最长储存期限以及用户日志的储存期限，并在服务器上为其分配数据存储空间等。
+        </div>
+
+        <div class="bold">四、用户行为规范</div>
+
+        <div>1、您同意严格遵守法律法规规章规定，依法遵守以下义务：</div>
+        <div>
+          （1）不得制作、传输或发表以下违法信息资料：反对宪法所确定的基本原则，煽动抗拒、破坏宪法和法律法规实施的；危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的，煽动推翻社会主义制度的；损害国家荣誉和利益的；歪曲、丑化、亵渎、否定英雄烈士事迹和精神，侵害英雄烈士的姓名、肖像、名誉、荣誉的；宣扬或煽动实施恐怖主义、极端主义及其活动的；煽动民族仇恨、民族歧视、破坏民族团结的言论；破坏国家宗教政策，宣扬邪教和封建迷信的；散布谣言，扰乱经济秩序和社会秩序的；散布淫秽、色情、暴力或者教唆犯罪的；侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益的；法律、行政法规禁止的其他内容。
+        </div>
+
+        <div>
+          （2）防范和抵制制作、复制、发布含有下列内容的不良信息资料：标题严重夸张，发表内容与标题严重不符的；不当评述自然灾害、重大事故等灾难的；煽动人群歧视、地域歧视等的；宣扬低俗、庸俗、媚俗内容的；违反社会公德行为的；侵犯未成年人合法权益的；其他对网络生态造成不良影响的内容。
+        </div>
+
+        <div>
+          2、本协议依据国家相关法律法规规章制定，您亦同意严格遵守以下义务：
+        </div>
+        <div>（1）从中国大陆向境外传输资料信息时必须符合中国有关法规；</div>
+        <div>
+          （2）不得利用本网站从事洗钱、窃取商业秘密、窃取个人信息等违法犯罪活动；
+        </div>
+        <div>
+          （3）不得干扰本网站的正常运转，不得侵入本网站及国家计算机信息系统；
+        </div>
+        <div>
+          （4）不得传输或发表任何违法犯罪的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、伤害性的、庸俗的、不文明的等信息资料；
+        </div>
+        <div>
+          （5）不得教唆他人从事违法违规或本协议、平台规则所禁止的行为；
+        </div>
+        <div>（6）不得利用在本网站注册的账户进行牟利性经营活动；</div>
+        <div>
+          （7）不得发布任何侵犯他人个人信息、著作权、商标权等知识产权或合法权利的内容。
+        </div>
+        <div>
+          3、您须对自己在网上的言论和行为承担法律责任，您若在“{{
+            companyName
+          }}”上散布和传播反动、色情或其它违反国家法律的信息，“{{
+            companyName
+          }}”的系统记录有可能作为您违反法律的证据。
+        </div>
+
+        <div class="bold">五、知识产权</div>
+        <div>
+          “{{
+            companyName
+          }}”提供的网络服务中包含的任何文本、图片、图形、音频和/或视频资料均受版权、商标和/或其它财产所有权法律的保护，祥粤享有上述知识产权，但相关权利人依照法律规定应享有的权利除外。未经祥粤书面同意，用户均不得将上述资料在任何媒体直接或间接发布、播放、出于播放或发布目的而改写或再发行,或者被用于其他任何商业目的。所有以上资料或资料的任何部分仅可作为私人和非商业用途使用。
+        </div>
+
+        <div class="bold">六、协议修改</div>
+        <div>
+          1.
+          根据互联网的发展和有关法律、法规及规范性文件的变化，或者因业务发展、技术条件、产品功能等变化的需要，我们将在必要时对本协议的服务条款作出修改或变更。我们将会直接在“{{
+            companyName
+          }}”互联网服务产品上公布修改之后的协议内容，该公布行为视为祥粤已经通知用户修改内容，修改后的内容一经公布即有效替代原有服务条款。我们也可采用电子邮件或私信的传送方式，提示用户协议条款的修改、服务变更、或其它重要事项。
+          2. 用户可登录“{{
+            companyName
+          }}”互联网服务产品中查阅最新版本的相关协议条款。如果用户继续使用“{{
+            companyName
+          }}”提供的服务，即视为用户已经接受修改后的服务条款；如果用户不接受修改后的服务条款或对内容存在异议的，应当停止使用“{{
+            companyName
+          }}”提供的服务。
+        </div>
+
+        <div class="bold">七、免责声明</div>
+        <div>1．我们不保证（包括但不限于）：</div>
+        <div>
+          （1）“{{ companyName }}”的服务不受干扰，及时、安全、可靠或不出现错误；
+        </div>
+        <div>
+          （2）用户经由“{{
+            companyName
+          }}”取得的任何产品、服务或其他材料符合用户的期望。
+        </div>
+        <div>
+          2．用户使用经由“{{
+            companyName
+          }}”下载的或取得的任何资料，其风险自行负担。
+        </div>
+        <div>
+          3．由于地震、台风、洪水、火灾、战争、政府禁令以及其他不能预见并且对其发生和后果不能防止或避免的不可抗力或互联网上的黑客攻击事件，致使影响本服务条款的履行，祥粤不承担责任。
+        </div>
+
+        <div>
+          4．用户同意“{{
+            companyName
+          }}”因政策法规变化、教学需要等原因有权更新课程，包括但不限于变更在线课程的授课老师、讲义及课件内容等。
+        </div>
+        <div class="bold">八、法律适用及争议解决</div>
+        <div>
+          1.
+          本协议的成立、效力、履行、解释及纠纷的解决，适用于中华人民共和国法律。本协议之任何规定因与中华人民共和国法律抵触而无效，则这些条款应在不违反法律的前提下按照尽可能接近本协议原条文目的之原则进行重新解释和适用，且本协议其它规定仍应具有完整的效力及效果。
+        </div>
+        <div>
+          2.本协议的签署地点为中华人民共和国广州市天河区，若用户和祥粤之间发生任何纠纷或争议，首先应友好协商解决，协商不成的，用户同意将纠纷或争议提交协议签订地有管辖权的人民法院管辖。
+        </div>
+
+        <div class="bold center">《个人信息保护政策》</div>
+        <div>
+          广东省祥粤建设职业培训学校（注册地址：广东省广州市天河区燕岭路123号3楼）及其关联方（以下简称“祥粤”或“我们”）作为“{{
+            companyName
+          }}”互联网服务产品（包括但不限于{{ companyName }}网站{{
+            locationName
+          }}、微信小程序等，下称“{{
+            companyName
+          }}”）的运营者，深知个人信息对您的重要性，我们将按照法律法规的规定，保护您的个人信息安全。我们制定本“个人信息保护政策”并特别提示：希望您在使用“{{
+            companyName
+          }}”及相关服务前仔细阅读并理解本个人信息保护政策，以便做出适当的选择。本政策中涉及的相关术语，我们尽量以简明扼要的方式进行表述，以便您更好地理解。您使用或在我们更新本政策后（我们会及时提示您更新的情况并再次取得您对本政策更新版本的同意）继续使用我们的服务，即意味着您同意本政策(含更新版本)内容，并且同意我们按照本政策收集、使用、存储、传输、共享、转让和公开披露您的相关信息。
+        </div>
+
+        <div class="bold">本个人信息保护政策将帮助您了解：</div>
+        <div>
+          •
+          我们会遵循个人信息保护政策收集、使用您的信息，但不会仅因您同意本个人信息保护政策而采用强制捆绑的方式一揽子收集个人信息。
+        </div>
+        <div>
+          •
+          当您使用或开启相关功能或使用服务时，为实现功能、服务所必需，我们会收集、使用相关信息。除非是为实现基本业务功能或根据法律法规要求所必需的必要信息，您均可以拒绝提供且不影响其他功能或服务，对于前述您可以拒绝提供的信息，我们将在个人信息保护政策中进行说明。
+        </div>
+
+        <div>
+          •
+          地理位置、网络、通知、相机、摄像头、麦克风、相册等权限，均不会默认开启，只有经过您的明示授权才会在为实现特定功能或服务时使用，您也可以撤回授权。特别需要指出的是，即使经过您的授权，我们获得了这些敏感权限，也不会在相关功能或服务不需要时而收集您的信息。
+        </div>
+
+        <div>
+          •本个人信息保护政策适用于您通过“{{
+            companyName
+          }}”官方网站或微信小程序来访问和使用我们的产品和服务。
+        </div>
+
+        <div>
+          下文将帮您详细了解我们将如何收集、使用、存储、传输、共享、转让、公开披露和保护（如适用）您的个人信息，帮您了解查询、访问、删除、更正、撤回授权个人信息的方式。其中，有关您个人信息权益的条款重要内容我们已用加粗形式提示，请特别关注。请您了解并知悉，“{{
+            companyName
+          }}”未来有可能根据信息处理情境不时更新或修改本政策。
+        </div>
+
+        <div class="bold">一、我们如何收集和使用您的个人信息</div>
+        <div>
+          个人信息是指以电子或者其他方式记录的与已识别或者可识别的自然人有关的各种信息，不包括匿名化处理后的信息。个人敏感信息是指一旦泄露或者非法使用，容易导致自然人的人格尊严受到侵害或者人身、财产安全受到危害的个人信息，包括生物识别、宗教信仰、特定身份、医疗健康、金融账户、行踪轨迹等信息，以及不满十四周岁未成年人的个人信息。本政策中涉及的个人信息包括但不限于基本信息（包括个人姓名、生日、性别、住址、个人电话号码、电子邮箱、工作单位等）、个人身份信息（包括身份证、军官证、护照、驾驶证等）、个人生物识别信息（包括声纹、面部识别特征等）、网络身份标识信息（包括个人信息主体账号、IP地址、邮箱地址及与前述有关的密码、口令、口令保护答案等）、个人财产信息（包括交易和消费记录）、通讯录、个人上网记录（包括网站浏览记录、软件使用记录、点击记录等）、个人常用设备信息（如硬件序列号、设备MAC地址、软件列表、唯一设备识别码（如IMEI/Android
+          ID/IDFA/OPENUDID/GUID、SIM卡IMSI信息等）在内的描述个人常用设备基本情况的信息）及个人位置信息（包括行踪轨迹、精准定位信息、住宿信息、经纬度等）；其中，字体加粗部分为涉及的个人敏感信息。
+        </div>
+        <div class="bold">（一）我们收集和使用个人信息的功能和场景</div>
+        <div>
+          我们根据合法、正当、必要的原则，仅收集实现产品／服务功能所必要的信息用于实现明确、合理的处理目的。我们不会以欺诈、诱骗、误导的方式收集个人信息，也不会从非法渠道获取个人信息。
+        </div>
+        <div>我们提供如下功能和服务时，可能会处理下列与您有关的信息。</div>
+        <div>
+          如果您不提供相关信息，您可能无法注册成为我们的用户或无法享受我们提供的某些产品／服务，或者无法达到使用相关服务拟达到的效果。
+        </div>
+        <div class="bold">用户注册/登录</div>
+        <div>
+          您使用“{{ companyName }}”提供的服务，可以注册并登录经注册的“{{
+            companyName
+          }}”账号。当您注册“{{
+            companyName
+          }}”账号时，您需向我们提供您的移动电话号码，我们将通过发送短信验证码的方式来验证您的身份是否有效，验证无误后我们会为您创建账号；此外，您也可以使用微信账号登录并使用“{{
+            companyName
+          }}”，但您仍需要将微信账号与“{{
+            companyName
+          }}”账号绑定，账号绑定后，您可以直接使用微信账号扫码登录并使用本产品和相关服务。
+        </div>
+        <div>
+          为了满足相关法律法规的网络实名制要求，我们需要收集您的移动电话号码。如您拒绝提供移动电话号码或进行实名验证，在您同意接受本《个人信息保护政策》及《{{
+            companyName
+          }}用户使用协议》适用条款的前提下，您仍可浏览“{{
+            companyName
+          }}”网站的内容，但将无法使用课程购买、课程学习、考试预约等其他全部或部分“{{
+            companyName
+          }}”提供的服务。
+        </div>
+        <div class="bold">网上购物下单</div>
+        <div>
+          当您准备对您平台购物车内的产品／服务进行结算时，我们的网站系统会生成您购买该产品／服务的订单。针对不同的产品/服务，可能还需要您提供额外的个人信息，以完成下单。
+        </div>
+        <div>
+          （1）考前培训课程：您在登录个人账号后，如需要购买考前培训课程，无须提供额外的个人信息，便可完成下单。
+        </div>
+        <div>
+          （2）二级建造师继续教育：您在登录个人账号后，如需要购买二级建造师继续教育课程，根据广东省建设执业注册管理中心的要求，您需提供以下个人信息，以便完成下单：姓名、性别、身份证号码、移动电话号码、身份证照片、一寸照、证书名称/岗位、证书编号、证书有效期、工作单位。
+        </div>
+        <div>
+          （3）施工现场管理人员（七大员）新考证：您在登录个人账号后，如需要购买七大员新考的考试报名及考前培训课程，根据广州市建筑教育协会的要求，您需提供以下个人信息，以便完成下单：姓名、性别、身份证号码、移动电话号码、身份证照、承诺书照、一寸照、用户电子签名、学历信息、工作单位、工作年限。
+        </div>
+        <div>
+          （4）施工现场管理人员（七大员）继续教育：您在登录个人账号后，如需要购买七大员继续教育课程，根据广东省建筑教育协会的要求，您需提供以下个人信息，以便完成下单：姓名、身份证号码、移动电话号码、证书名称/岗位、证书编号、发证时间、证书有效期、工作单位。
+        </div>
+        <div>
+          上述所有信息构成您的“订单信息”，我们将使用您的订单信息来进行您的身份核验、确定交易、支付结算、为您查询订单以及提供客服咨询与售后服务；我们还会使用您的订单信息来判断您的交易是否存在异常以保护您的交易安全。
+        </div>
+        <div>
+          我们会收集您的交易记录信息，以便您查询您的交易记录及保障交易安全。
+        </div>
+        <div class="bold">支付</div>
+        <div>
+          在您使用消费功能并选择支付时，您可以使用微信支付所提供的支付服务。支付功能本身并不收集您的个人信息，但我们需要将您的订单号与交易金额信息与支付机构共享以实现其确认您的支付指令并完成支付。
+        </div>
+        <div class="bold">在线课程学习</div>
+        <div>
+          您在购买相应课程后，可以在平台进行在线课程学习，部分课程可能需额外获取您的个人信息。
+        </div>
+        <div>
+          （1）考前培训课程：您在登录个人账号后，即可进行在线学习，无须提供其他个人信息。
+        </div>
+        <div>
+          （2）施工现场管理人员（七大员）继续教育：您在登录个人账号后，即可进行在线学习，无须提供其他个人信息。我们会将您的以下个人信息提供予广东省建筑教育协会：姓名、身份证号码、移动电话号码、证书名称/岗位、证书编号。
+        </div>
+        <div>
+          （3）二级建造师继续教育：您在登录个人账号后，即可进行在线学习，根据广东省建设执业注册管理中心的要求，在您每一节在线课程的培训过程中，我们需要通过您设备上的摄像头随机拍摄三张照片，用于比对核实学习人员的身份。我们会将您的以下个人信息提供予广东省建设执业注册管理中心：姓名、性别、身份证号码、移动电话号码、身份证照片、一寸照、证书名称/岗位、证书编号、有效期、人脸照片、学习详细记录。
+        </div>
+        <div>
+          （4）施工现场管理人员（七大员）新考证：您在登录个人账号后，即可进行在线学习，根据广州市建筑教育协会的要求，在您每一节在线课程的培训过程中，我们需要通过您设备上的摄像头随机拍摄三张照片，用于比对核实学习人员的身份。我们会将您的以下个人信息提供予广州市建筑教育协会：姓名、性别、身份证号码、移动电话号码、身份证照、承诺书照、一寸照、用户电子签名、学历信息、工作年限、人脸照片、学习详细记录。
+        </div>
+        <div class="bold">商品或服务推荐</div>
+        <div>
+          为了改进我们的商业广告服务，将您可能感兴趣的商品或服务信息（包括但不限于课程等）展示给您，提升现有服务体验，我们可能会收集您的年龄、学历信息、工作年限等信息，并以此开展内部审计、进行数据分析、形成用户画像，以便为您提供个性化的商品或服务推荐。
+        </div>
+        <div class="bold">客服与发票功能</div>
+        <div>
+          在您与我们的在线客服／电话客服进行沟通时，为了及时有效地与您沟通，我们的在线客服／电话客服功能会使用您的账号信息、订单信息。
+        </div>
+        <div>
+          为保证您的账号安全，我们的在线客服/电话客服会使用您的账号信息与您核验您的身份。当您需要我们提供与您订单信息相关的客服与售后服务时，我们将会查询您的订单信息。若您需要开具发票，则需提供相应的开票信息。
+        </div>
+        <div class="bold">保障账号和服务安全</div>
+        <div>
+          为提高您使用我们的服务时系统的安全性并保障网站数据安全，更准确地预防钓鱼网站欺诈和保护账户安全，我们会收集您的有关信息对“{{
+            companyName
+          }}”系统问题进行分析、统计流量并排查可能存在的风险、在您选择向我们发送异常信息时予以排查。我们可能使用您的账户信息、服务日志信息以及我们关联方、合作方在获得您授权或依法可以共享的信息，用于判断账户安全、进行身份验证、检测及防范安全事件。尤其是在接到您有关账号安全方面的需求（如账号找回）时，我们可能会要求您再次提供相关信息（如移动电话号码等）用于安全验证，如您拒绝提供的，我们可能无法判断您账户的安全情况或无法为您进行与账号安全相关的操作。
+        </div>
+        <div class="bold">设备权限调用</div>
+        <div>
+          我们在提供服务的过程中，基于服务的具体场景和功能，可能需要您开启一些设备访问权限，例如相机（摄像头）、相册（图片库）等访问权限，以实现拍摄、上传图片等功能所涉及的信息收集和使用。您也可以在设备的设置功能中随时选择关闭部分或全部权限，从而撤回您授予我们某项权限的同意。在不同设备中，权限显示方式及关闭方式可能有所不同，具体请参考设备及系统开发方说明或指引。请您注意，您开启这些权限即代表您授权我们可以收集和使用这些个人信息来实现上述的功能，您关闭权限即代表您取消了这些授权，则我们将不再继续收集和使用您的这些个人信息，也无法为您提供与这些授权所对应的功能。您关闭权限的决定不会影响此前基于您的授权所进行的个人信息的处理。
+        </div>
+        <div class="bold">消息通知</div>
+        <div>
+          您知悉并同意，对于您在使用产品及/或服务的过程中提供的您的联系方式（例如：移动电话号码），我们在运营中可能会向其中的一种或多种发送多类通知，用于用户消息告知、身份验证、安全验证等用途；我们可能使用您的个人信息，通过我们的站内私信、电子邮件或其他方式向您提供或推广我们或第三方的商品和服务。如相关页面设置了“退订”或类似功能且您不希望我们通过上述方式向您发送商品或服务的相关信息，您可以按照页面提示的操作进行设置或联系我们进行反馈，要求全部或部分停止接收我们发送的相关推广信息。
+        </div>
+        <div class="bold">征得授权同意的例外</div>
+        <div>
+          根据相关法律法规的规定，以下情形中收集您的个人信息无需征得您的授权同意：
+        </div>
+        <div>（1）与我们履行法律法规规定的义务相关的；</div>
+        <div>（2）与国家安全、国防安全直接相关的；</div>
+        <div>（3）与公共安全、公共卫生、重大公共利益直接相关的；</div>
+        <div>（4）与刑事侦查、起诉、审判和判决执行等直接相关的；</div>
+        <div>
+          （5）出于维护您或其他个人的生命、财产等重大合法权益但又很难得到您本人同意的；
+        </div>
+        <div>（6）所收集的个人信息是您或您的监护人自行向社会公众公开的；</div>
+        <div>
+          （7）从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道；
+        </div>
+        <div>（8）根据您的要求签订和履行合同所必需的；</div>
+        <div>
+          （9）用于维护所提供的产品或服务的安全稳定运行所必需的，例如发现、处置产品或服务的故障；
+        </div>
+        <div>（10）为合法的新闻报道所必需的；</div>
+        <div>
+          （11）学术研究机构基于公共利益开展统计或学术研究所必要，且对外提供学术研究或描述的结果时，对结果中所包含的个人信息进行去标识化处理的；
+        </div>
+        <div>（12）法律法规规定的其他情形。</div>
+        <div class="bold">（二）您个人信息使用的规则</div>
+        <div>
+          1、我们会根据本政策的约定并为实现我们的服务功能对所收集的个人信息进行使用。
+        </div>
+        <div>
+          2、请您注意，您在使用我们的服务时所提供的所有个人信息，除非您删除或通过系统设置拒绝我们收集，否则将在您使用我们的服务期间持续授权我们使用。在您注销账号后，我们将停止为您提供服务，您的个人信息将在“{{
+            companyName
+          }}”全站匿名化处理，使您的账号处在不可被检索、访问的状态，并在符合相关法律法规规定的前提下删除您的个人信息。
+        </div>
+        <div>
+          3、当我们要将您的个人信息用于本政策未载明的其他用途时，或基于特定目的收集而来的信息用于其他目的时，会通过您主动做出勾选或其他合法形式事先征求您的同意。
+        </div>
+        <div>
+          4、根据法律法规的规定，经过处理无法识别特定个人且不能复原的信息不属于个人信息，我们有权自行决定收集、使用该部分信息，包括但不限于对该类信息进行分析并予以商业化的利用。
+        </div>
+        <div class="bold">二、我们会如何使用Cookies和同类技术</div>
+        <div>
+          您使用我们的服务时，我们会在您的计算机或移动设备上存储名为Cookies的小数据文件。Cookies通常包含标识符、站点名称以及一些号码和字符。我们使用该等信息判断注册用户是否已经登录，提升服务质量及优化用户体验。
+        </div>
+        <div>
+          我们不会将Cookies用于本政策所述目的之外的任何用途。您可根据自己的偏好管理或删除Cookies。您可以清除计算机上保存的所有Cookies，大部分网络浏览器都设有阻止Cookies的功能。但如果您这么做，您可能需要在每一次访问我们的网站时亲自更改用户设置，而且您之前所记录的相应信息也均会被删除，并且可能会对您所使用服务的安全性有一定影响。
+        </div>
+        <div class="bold">
+          三、我们会如何委托处理、共享、转让、公开披露您的个人信息
+        </div>
+        <div class="bold">（一）委托处理</div>
+        <div>
+          为了向您提供更完善、优质的产品／服务，某些功能可能由我们的服务合作方提供（如我们的第三方服务供应商、承包商、代理等），我们会委托服务合作方代表我们处理您的某些个人信息，例如委托第三方进行人脸识别等。
+        </div>
+        <div>
+          对接受我们的委托处理您个人信息的公司、组织和个人，我们会与其签署保密协定或数据处理协议，明确双方责任、处理事项和处理目的等，要求他们仅按照我们的要求、本政策以及相关的保密和安全措施来处理个人信息。如该等第三方要改变个人信息的处理目的，该等第三方应再次征求您的同意。如果您拒绝我们的服务合作方在提供服务时收集为提供服务所必需的个人信息，将可能导致您无法使用我们的产品／服务来享用该合作方提供的服务。
+        </div>
+        <div>委托处理您的个人信息的第三方SDK包括：</div>
+        <div>功能类型</div>
+        <div>第三方名称</div>
+        <div>获取信息目的</div>
+        <div>涉及个人信息范围</div>
+        <div>隐私政策链接</div>
+        <div>人脸识别</div>
+        <div>腾讯云</div>
+        <div>人脸比对</div>
+        <div>身份证照片</div>
+        <div>人脸照片</div>
+        <div class="bold">（二）共享</div>
+        <div>
+          我们不会在未经您同意或授权的情况下向任何公司、组织和个人分享您的个人信息，但是您在此同意，我们可在以下情况下共享您的个人信息：
+        </div>
+        <div>
+          1、在获取明确同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。
+        </div>
+        <div>
+          2、我们可能会根据法律法规规定，或按政府主管部门的强制性要求，对外共享您的个人信息。
+        </div>
+        <div>
+          3、与我们的关联公司共享：在本政策声明的使用目的范围内，您的个人信息可能会与我们的关联公司共享。作为一项政策，我们只会共享必要的信息。关联公司如要改变个人信息的处理目的，将再次征求您的授权同意。
+        </div>
+        <div>
+          4、与授权合作伙伴共享：仅为实现本政策中声明的目的，平台的某些服务将由平台和授权合作伙伴共同提供。平台可能会与合作伙伴共享您的某些个人信息，以提供更好的客户服务和用户体验。平台仅会出于合法、正当、必要、特定、明确的目的共享您的个人信息，并且只会共享提供服务所必要的个人信息。
+        </div>
+        <div>
+          如果为了向您提供服务而需要将您的信息共享至第三方，我们将评估该第三方收集信息的合法性、正当性、必要性。我们将要求第三方对您的信息采取保护措施，并且严格遵守相关法律法规与监管要求。平台的合作伙伴无权将共享的个人信息用于与产品或服务无关的其他用途。
+        </div>
+        <div>
+          5、{{
+            companyName
+          }}服务含有到其他网站的链接。除法律另有规定外，我们对其他网站的隐私保护措施不负任何责任。平台可能在任何需要的时候增加商业伙伴或共用品牌的网站，但是提供给他们的将仅是匿名化的信息，平台将不会公开您的身份。
+        </div>
+        <div class="bold">（三）转让</div>
+        <div>
+          我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：
+        </div>
+        <div>
+          1、在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息；
+        </div>
+        <div>
+          2、在涉及合并、收购或破产清算时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受本政策的约束，否则我们将要求该公司、组织重新向您征求授权同意。
+        </div>
+        <div class="bold">（四）公开披露</div>
+        <div>我们仅会在以下情况下，公开披露您的个人信息：</div>
+        <div>1、获得您明确同意后；</div>
+        <div>
+          2、基于法律的披露：在法律、法律程序、诉讼或政府主管部门强制性要求的情况下，我们可能会公开披露您的个人信息。
+        </div>
+        <div class="bold">四、我们会如何保护和保存您的个人信息</div>
+        <div class="bold">（一）我们保护您个人信息的技术与措施</div>
+        <div>
+          1、为保障您的信息安全，我们会在现有技术水平下努力采取合理必要的物理、技术和行政管理方面的安全措施来保护您的信息，以防止您的信息遭受丢失、误用、非授权访问、公开披露和更改，包括但不限于SSL、信息加密存储、数据中心的访问控制、专用的网络通道及代理。
+        </div>
+        <div>
+          互联网环境并非百分之百安全，我们将尽力确保或担保您发送给我们的任何信息的安全性。如果我们的物理、技术或管理防护设施遭到破坏，导致信息被非授权访问、公开披露、篡改或毁坏，导致您的合法权益受损，我们将承担相应的法律责任。
+        </div>
+        <div>
+          2、我们建立专门的管理制度、流程、组织并采取相应措施确保信息安全。例如，我们对可能接触到您的信息的员工或外包人员进行严格管理，包括但不限于根据岗位的不同采取不同的权限控制，与其签署保密协议，监控其操作情况等措施；组织对员工的数据安全或合规培训等。
+        </div>
+        <div>
+          3、若我们确认发生个人信息泄露等安全事件，我们会启动应急预案，阻止安全事件扩大，并以推送通知、公告等形式告知您。同时，我们还将按照监管部门要求上报个人信息安全事件及其处置情况。
+        </div>
+        <div class="bold">（二）我们如何保存您的个人信息</div>
+        <div>1、我们收集和产生的个人信息将存储在中华人民共和国境内。</div>
+        <div>
+          2、当我们的产品／服务发生停止运营的情况时，我们将及时停止继续收集您的个人信息，并将以推送通知或公告等形式通知您，且会对您的个人信息进行删除或匿名化处理，但国家法律法规、规章、规范性文件或政府的政策、命令等另有要求或为履行我们的合规义务而保留您的个人信息的除外。为免疑义，在产品／服务停止运营时，我们对您的个人信息删除或匿名化处理并不影响我们的关联公司基于您的同意而继续处理您的个人信息以及您届时相应地继续使用该等关联公司的服务。
+        </div>
+        <div>
+          3、我们仅会在达到本政策所述目的所必需的时限内保存您的个人信息，但为了遵守适用的法律法规、法院判决或裁定、其他有权机关的要求、维护公共利益等目的，我们可能会将个人信息保存时间予以适当延长。
+        </div>
+        <div class="bold">五、您的权利</div>
+        <div>
+          我们非常重视您对个人信息的关注，并尽全力保护您对于您个人信息访问、更正、删除以及注销账号的权利，以使您拥有充分的能力保障您的个人信息安全。您的权利包括：
+        </div>
+        <div>
+          1、您可以按照我们的相关政策及“{{
+            companyName
+          }}”网站页面提示，通过网站联系方式或“个人信息”功能界面等对您的个人信息进行查询、访问、更正及删除；具体权限及方式以“{{
+            companyName
+          }}”网站相关页面显示的操作要求及信息为准。同时，我们将尽一切可能采取适当的技术手段，保证收集到的有关于您的个人信息的准确性，并保证及时进行更新。
+        </div>
+        <div>
+          2、注销账户。您可注销您注册的“{{ companyName }}”账户，具体注销路径：
+        </div>
+        <div>3、响应您的请求</div>
+        <div>
+          如果您无法通过上述方式查询、访问、更正或删除您的个人信息，或您需要访问、更正或删除您在使用我们服务时所产生的其他个人信息，或您认为我们存在任何违反法律法规或与您关于个人信息的收集使用的约定，您均可以通过“{{
+            companyName
+          }}”网站页面上的联系方式与我们联系。为了保障安全，我们可能需要您提供书面请求，或以其他方式证明您的身份，我们将在收到您反馈并验证您的身份后的十五个工作日内答复您的请求。
+        </div>
+        <div class="bold">六、第三方提供商及其服务</div>
+        <div>
+          为确保流畅的浏览体验，您可能会收到来自“{{
+            companyName
+          }}”及其合作伙伴外部的第三方（以下简称“第三方”）提供的内容或网络链接。我们对此类第三方无控制权。您可选择是否访问第三方提供的链接、内容、产品和服务。
+        </div>
+        <div>
+          我们无法控制第三方的隐私和个人信息保护政策，此类第三方不受到本政策的约束。您在向第三方提交个人信息之前，请确保您阅读并认可这些第三方的个人信息保护政策或隐私政策。
+        </div>
+        <div class="bold">七、我们会如何处理未成年人的个人信息</div>
+        <div>
+          若您是未满18周岁的未成年人，在使用我们的产品和服务前，应事先取得您监护人的同意。但是，如果您确认自己能够完全理解本政策的全部内容且您为使用“{{
+            companyName
+          }}”服务所进行的相关操作行为与您的年龄、智力相适应的，则您可以独立进行相关操作（包括向我们提交您的个人信息）。
+        </div>
+        <div>
+          我们将根据国家相关法律法规的规定保护未成年的个人信息。如果我们发现在未事先获得可证实的父母或其他监护人同意的情况下收集了未成年人的个人信息，则会设法尽快删除相关信息。
+        </div>
+        <div class="bold">八、本政策如何更新及适用范围</div>
+        <div>
+          我们保留不时更新或修改本政策的权利，我们会在“{{
+            companyName
+          }}”网站页面上发布对本政策所做的任何变更。对于重大变更，我们还会提供更为显著的通知（包括对于某些服务，我们会通过电子邮件发送通知，说明个人信息保护政策的具体变更内容)。渠道向您发送变更通知，包括但不限于网站公示、私信通知、电子邮件通知等方式。
+        </div>
+        <div>本政策所指的重大变更包括但不限于：</div>
+        <div>
+          1、我们的服务模式发生重大变化。如处理个人信息的目的、处理的个人信息类型、个人信息的使用方式等；
+        </div>
+        <div>
+          2、我们在所有权结构、组织架构等方面发生重大变化。如业务调整、破产并购等引起的所有者变更等；
+        </div>
+        <div>3、个人信息共享、转让或公开披露的主要对象发生变化；</div>
+        <div>4、您参与个人信息处理方面的权利及其行使方式发生重大变化；</div>
+        <div>
+          5、我们负责处理个人信息安全的责任部门、联络方式及投诉渠道发生变化时；
+        </div>
+        <div>6、个人信息安全影响评估报告表明存在高风险时。</div>
+        <div>
+          若您不同意修改后的个人信息保护政策，您有权并应立即停止使用“{{
+            companyName
+          }}”的服务。
+        </div>
+        <div>
+          如果您继续使用“{{
+            companyName
+          }}”服务，则视为您接受我们对本政策相关条款所做的修改。
+        </div>
+        <div>
+          “{{
+            companyName
+          }}”的所有服务均适用本政策。但某些服务有其特定的个人信息保护政策，该等特定的个人信息保护政策更具体地说明我们在该服务中如何处理您的信息。如本政策与特定服务的个人信息保护政策有不一致之处，请以该特定个人信息保护政策为准。
+        </div>
+        <div class="bold">九、联系我们</div>
+        <div>
+          当您有个人信息相关问题或其他的投诉、建议等，可以通过如下方式与平台联系，平台将尽快审核所涉及内容，并于15个工作日内对于您的问题、投诉、建议进行回复：
+        </div>
+        <div>平台运营主体名称：广东省祥粤建设职业培训学校</div>
+        <div>注册地址：广东省广州市天河区燕岭路123号3楼</div>
+        <div>联系地址：广东省广州市天河区燕岭路123号3楼</div>
+        <div>联系电话：020-87085982、020-87085983</div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      companyName: this.$store.state.header.companyName,
+      locationName: location.host,
+      innerVisible: false,
+      status: 1
+    };
+  },
+  methods: {
+    openBox(status, innerVisible) {
+      this.status = status;
+      this.innerVisible = innerVisible;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-dialog{
+  margin-top: 3vh!important;
+  .content{
+    max-height: 80vh;
+    overflow: auto;
+  }
+}</style>

src/components/login/index.vue

@@ -0,0 +1,810 @@
+<template>
+  <div id="">
+    <el-dialog
+      title=""
+      width="675px"
+      :visible.sync="dialogVisible"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+    >
+      <div class="login_box">
+        <img class="left" src="@/assets/new1/登录广告.png" alt="" />
+        <div class="right">
+          <el-form
+            v-show="
+              activeName == 'generalLogin' ||
+                activeName == 'quickLogin' ||
+                activeName == 'wxLogin'
+            "
+            :model="ruleForm"
+            :rules="rules"
+            ref="ruleForm"
+            label-width="100px"
+            class="demo-ruleForm"
+            ><el-tabs stretch v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="普通登录" name="generalLogin">
+                <template v-if="activeName == 'generalLogin'">
+                  <el-form-item
+                    label=""
+                    prop="account"
+                    style="margin-top:20px;"
+                  >
+                    <el-input
+                      clearable
+                      class="input_300"
+                      placeholder="手机号码/身份证号"
+                      v-model="ruleForm.account"
+                    ></el-input> </el-form-item
+                  ><el-form-item label="" prop="pwd">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      show-password
+                      placeholder="密码"
+                      v-model="ruleForm.pwd"
+                    ></el-input>
+                  </el-form-item>
+                  <div class="find_res">
+                    <span @click="signIn">立即注册</span>
+                    <span @click="forget">找回密码</span>
+                  </div>
+                  <el-button
+                    class="submit"
+                    type="primary"
+                    :loading="islogin"
+                    round
+                    @click="login"
+                    >登录</el-button
+                  >
+                  <div class="wx_login" @click="login_open"></div>
+                </template>
+              </el-tab-pane>
+              <el-tab-pane label="手机快速登录" name="quickLogin">
+                <template v-if="activeName == 'quickLogin'">
+                  <el-form-item label="" prop="tel" style="margin-top:20px;">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      placeholder="手机号码"
+                      v-model="ruleForm.tel"
+                    ></el-input> </el-form-item
+                  ><el-form-item label="" prop="code">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      placeholder="短信验证码"
+                      v-model="ruleForm.code"
+                    >
+                      <template slot="append"
+                        ><span class="getCode" @click="loginSmsForm">{{
+                          registerCountDown == 0
+                            ? "获取验证码"
+                            : `${registerCountDown}秒重新获取`
+                        }}</span></template
+                      ></el-input
+                    >
+                  </el-form-item>
+                  <div class="find_res">
+                    <span @click="signIn">立即注册</span>
+                    <span @click="forget">找回密码</span>
+                  </div>
+                  <el-button
+                    class="submit"
+                    type="primary"
+                    :loading="islogin"
+                    round
+                    @click="login"
+                    >登录</el-button
+                  >
+                  <div class="wx_login" @click="login_open"></div>
+                </template>
+              </el-tab-pane>
+              <el-tab-pane label="微信登录" name="wxLogin">
+                <div class="dis_flex">
+                  <img
+                    :src="
+                      imgUrl && !scanningStatus
+                        ? imgUrl
+                        : require('@/assets/qrcode.png')
+                    "
+                    alt=""
+                  />
+                  <p v-if="scanningStatus" style="color: red">小程序已扫码</p>
+                  <p class="headerTitle">使用微信扫一扫快捷登录</p>
+                  <p class="clickFuncStyle">
+                    扫描即表示同意<br /><span @click="innerVisibleOpenFunc(1)"
+                      >《用户使用协议》</span
+                    >及<span @click="innerVisibleOpenFunc(2)"
+                      >《个人信息保护政策》</span
+                    >
+                  </p>
+                </div>
+              </el-tab-pane></el-tabs
+            ></el-form
+          >
+          <el-form
+            v-show="activeName == 'signIn' || activeName == 'forget'"
+            :model="bindForm"
+            :rules="binds"
+            ref="bindForm"
+            label-width="100px"
+            class="demo-ruleForm"
+            ><el-tabs stretch v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="账号注册" name="signIn">
+                <template v-if="activeName == 'signIn'">
+                  <el-form-item label="" prop="tel" style="margin-top:20px;">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      placeholder="手机号码"
+                      v-model="bindForm.tel"
+                    ></el-input> </el-form-item
+                  ><el-form-item label="" prop="code">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      placeholder="短信验证码"
+                      v-model="bindForm.code"
+                    >
+                      <template slot="append"
+                        ><span class="getCode" @click="loginSmsForm">{{
+                          registerCountDown == 0
+                            ? "获取验证码"
+                            : `${registerCountDown}秒重新获取`
+                        }}</span></template
+                      ></el-input
+                    > </el-form-item
+                  ><el-form-item label="" prop="pwd">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      show-password
+                      placeholder="设置密码"
+                      v-model="bindForm.pwd"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item prop="idcard" style="margin-bottom: 10px;">
+                    <el-input
+                      class="input_300"
+                      placeholder="身份证号码"
+                      v-model="bindForm.idcard"
+                      maxlength="18"
+                    >
+                    </el-input
+                  ></el-form-item>
+                  <el-form-item
+                    prop="read"
+                    style="margin-bottom: 0px;margin-top: 6px;"
+                  >
+                    <div
+                      class="find_res"
+                      style="margin-bottom: 0px;height: 24px;"
+                    >
+                      <el-checkbox v-model="bindForm.read"
+                        >我已认真阅读并同意</el-checkbox
+                      >
+                      <span @click="activeName = 'generalLogin'">前往登录</span>
+                    </div>
+                  </el-form-item>
+                  <p class="clickFuncStyle" style="margin-top: 20px;">
+                    <span @click="innerVisibleOpenFunc(1)"
+                      >《用户使用协议》</span
+                    >及<span @click="innerVisibleOpenFunc(2)"
+                      >《个人信息保护政策》</span
+                    >
+                  </p>
+                  <el-button
+                    class="submit"
+                    type="primary"
+                    :loading="islogin"
+                    round
+                    @click="register"
+                    >注册</el-button
+                  >
+                </template>
+              </el-tab-pane>
+              <el-tab-pane label="找回密码" name="forget"
+                ><template v-if="activeName == 'forget'">
+                  <el-form-item label="" prop="tel" style="margin-top:20px;">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      placeholder="手机号码"
+                      v-model="bindForm.tel"
+                    ></el-input> </el-form-item
+                  ><el-form-item label="" prop="code">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      placeholder="短信验证码"
+                      v-model="bindForm.code"
+                    >
+                      <template slot="append"
+                        ><span class="getCode" @click="loginSmsForm">{{
+                          registerCountDown == 0
+                            ? "获取验证码"
+                            : `${registerCountDown}秒重新获取`
+                        }}</span></template
+                      ></el-input
+                    > </el-form-item
+                  ><el-form-item label="" prop="pwd">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      show-password
+                      placeholder="设置密码"
+                      v-model="bindForm.pwd"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="" prop="pwdAgain">
+                    <el-input
+                      clearable
+                      class="input_300"
+                      show-password
+                      placeholder="再次输入密码"
+                      v-model="bindForm.pwdAgain"
+                    ></el-input>
+                  </el-form-item>
+                  <div class="find_res">
+                    <span @click="activeName = 'generalLogin'">前往登录</span>
+                  </div>
+                  <el-button
+                    class="submit"
+                    type="primary"
+                    :loading="islogin"
+                    round
+                    @click="forgetFunc"
+                    >确定</el-button
+                  >
+                </template></el-tab-pane
+              ></el-tabs
+            >
+          </el-form>
+        </div>
+        <i class="close_btn el-icon-circle-close" @click="closeTang"></i>
+      </div>
+    </el-dialog>
+    <agree ref="agree"></agree>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+import agree from "./agree.vue";
+export default {
+  components: { agree },
+  data() {
+    const pwdAgainCheck = async (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error("请再次输入新密码"));
+      } else if (this.bindForm.pwd != this.bindForm.pwdAgain) {
+        return callback(new Error("两次输入密码不一致！"));
+      } else {
+        callback();
+      }
+    };
+    const validatorTel = (rule, value, callback) => {
+      var reg = /^1[34578][0-9]{9}$/;
+      if (!reg.test(value)) {
+        return callback(new Error("请输入正确手机号码"));
+      } else {
+        callback();
+      }
+    };
+    var validateAccept = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("请勾选服务协议"));
+      } else {
+        callback();
+      }
+    };
+    const validateRegisAccept = (rule, value, callback) => {
+      let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
+      let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
+      if (!_IDRe18.test(value) && !_IDre15.test(value)) {
+        return callback(new Error("请输入正确身份证号码"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      checked: false,
+      islogin: false,
+      imgUrl: "",
+      scanningStatus: false, //扫码状态
+      interValTime: null,
+      interValupdate: null,
+      scanCode: "",
+      dialogVisible: false,
+      activeName: "generalLogin",
+      ruleForm: {},
+      bindForm: {
+        read: false
+      },
+      registerCountDown: 0,
+      getRegisterCodeLock: false,
+      registerCountDownTimer: null,
+      rules: {
+        account: [
+          { required: true, trigger: "blur", message: "请输入手机号/身份证号" }
+        ],
+        pwd: [{ required: true, trigger: "blur", message: "请输入密码" }],
+        tel: [
+          { required: true, trigger: "blur", message: "请输入手机号" },
+          { validator: validatorTel, trigger: "blur" }
+        ],
+        code: [{ required: true, trigger: "blur", message: "请输入验证码" }]
+      },
+      binds: {
+        tel: [{ validator: validatorTel, trigger: "blur" }],
+        pwd: [
+          { required: true, trigger: "blur", message: "请输入密码" },
+          { min: 8, max: 10, message: "要求长度8-10位", trigger: "blur" }
+        ],
+        pwdAgain: [
+          {
+            required: true,
+            validator: pwdAgainCheck,
+            trigger: "blur"
+          }
+        ],
+        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
+        idcard: [{ validator: validateRegisAccept, trigger: "blur" }],
+        read: [
+          {
+            required: true,
+            trigger: ["blur", "change"],
+            validator: validateAccept
+          }
+        ]
+      }
+    };
+  },
+  beforeDestroy() {
+    this.closeFunc();
+    console.log("销毁");
+  },
+  methods: {
+    ...mapMutations(["setUserInfo", "setCurrentRouter"]),
+    closeTang() {
+      this.closeFunc();
+      this.dialogVisible = false;
+    },
+    forgetFunc() {
+      this.$refs.bindForm.validate(valid => {
+        if (valid) {
+          this.islogin = true;
+          const { tel, code, pwd, pwdAgain } = this.bindForm;
+          this.$request
+            .forgetUser({ tel, code, pwd, pwdAgain })
+            .then(res => {
+              this.islogin = false;
+              this.$message({
+                message: "修改成功",
+                type: "success"
+              });
+              this.$refs.bindForm.resetFields();
+            })
+            .catch(err => {
+              this.islogin = false;
+              this.$message.warning(err.msg);
+            });
+        }
+      });
+    },
+
+    /**
+     * 注册
+     */
+    registerFunc() {
+      this.$refs.bindForm.validate(valid => {
+        if (valid) {
+          this.islogin = true;
+          const { tel, code, pwd, idcard } = this.bindForm;
+          this.$request
+            .registerUser({ tel, code, pwd, idcard })
+            .then(res => {
+              //自动登录
+              this.autoLogin();
+            })
+            .catch(err => {
+              this.islogin = false;
+              this.$message.warning(err.msg);
+            });
+        }
+      });
+    },
+    /**
+     * 注册后自动登录并跳转绑定身份信息
+     */
+    autoLogin() {
+      let loginForm = JSON.parse(JSON.stringify(this.bindForm));
+      var account = loginForm.tel;
+      var pwd = this.$tools.encryptor(loginForm.pwd);
+      this.$request
+        .login({
+          account,
+          pwd
+        })
+        .then(res => {
+          localStorage.setItem("user_account", res.data.user_account);
+          localStorage.setItem("token", res.data.token);
+          this.$tools.setUuid(new Date().valueOf() + "");
+          this.getInfo();
+          this.islogin = false;
+        })
+        .catch(err => {
+          this.islogin = false;
+          this.$message({
+            message: err.msg,
+            type: "error"
+          });
+        });
+    },
+    //注册
+    signIn() {
+      this.activeName = "signIn";
+    },
+    forget() {
+      this.activeName = "forget";
+    },
+    register() {
+      this.$refs.bindForm.validate(valid => {
+        if (valid) {
+          this.registerFunc()
+        }
+      });
+    },
+    login() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.islogin = true;
+          let loginForm = null;
+          const A = JSON.parse(JSON.stringify(this.ruleForm));
+          switch (this.activeName) {
+            case "generalLogin":
+              loginForm = {
+                account: A.account,
+                pwd: this.$tools.encryptor(A.pwd)
+              };
+              break;
+            case "quickLogin":
+              loginForm = {
+                tel: A.tel,
+                code: A.code
+              };
+              break;
+
+            default:
+              break;
+          }
+          if (!loginForm) {
+            this.$message({
+              message: "异常错误，请联系管理员",
+              type: "error"
+            });
+            return;
+          }
+          this.$request[
+            this.activeName == "generalLogin" ? "login" : "loginSms"
+          ](loginForm)
+            .then(res => {
+              localStorage.setItem("user_account", res.data.user_account);
+              localStorage.setItem("token", res.data.token);
+              this.$tools.setUuid(new Date().valueOf() + "");
+              this.getInfo();
+            })
+            .catch(err => {
+              this.islogin = false;
+              this.$message({
+                message: err.msg,
+                type: "error"
+              });
+            });
+        }
+      });
+    },
+    /**
+     * 查看协议
+     */
+    innerVisibleOpenFunc(int) {
+      this.$refs.agree.openBox(int, true);
+    },
+    /**
+     * 更新二维码
+     */
+    updateQRcode() {
+      this.$request.pc_login_url().then(res => {
+        if (res.code === 200) {
+          this.imgUrl = res.data.urlBase64;
+          this.scanCode = res.data.scanCode;
+        } else {
+          this.imgUrl = "";
+        }
+      });
+    },
+    /**
+     * 获取用户登录信息
+     */
+    getInfo() {
+      this.$request
+        .getInfo({ fromPlat: 2 })
+        .then(res => {
+          this.$store.commit("setUserInfo", res.data);
+          this.$message.success("登录成功");
+          this.closeFunc();
+          this.dialogVisible = false;
+        })
+        .catch(err => {
+          this.islogin = false;
+          this.$message({
+            message: err.msg,
+            type: "error"
+          });
+        });
+    },
+    /**
+     * 更新登入状态
+     */
+    updateBackApi() {
+      this.$request
+        .check_login_url({
+          scanCode: this.scanCode
+        })
+        .then(res => {
+          this.backData(res);
+          this.scanningStatus = false;
+        })
+        .catch(err => {
+          if (err.msg === "小程序已扫码" && this.interValTime !== null) {
+            clearInterval(this.interValTime);
+            this.interValTime = null;
+            this.scanningStatus = true;
+          } else if (err.msg === "暂未登录" && !this.interValTime) {
+            this.interValTime = setInterval(() => {
+              this.updateQRcode();
+            }, 60000);
+            this.scanningStatus = false;
+          }
+        });
+    },
+    /**
+     * 组件返回数据
+     */
+    async backData(res) {
+      localStorage.setItem("user_account", res.data.user_account);
+      localStorage.setItem("token", res.data.token);
+      this.$tools.setUuid(new Date().valueOf() + "");
+      this.getInfo();
+    },
+    /**
+     * 关闭方法合集
+     */
+    closeFunc() {
+      clearInterval(this.interValTime);
+      clearInterval(this.interValupdate);
+      this.interValTime = null;
+      this.interValupdate = null;
+      this.islogin = false;
+      this.scanCode = "";
+    },
+    login_open() {
+      this.activeName = "wxLogin";
+      this.updateQRcode();
+      this.interValTime = setInterval(() => {
+        this.updateQRcode();
+      }, 60000);
+      this.interValupdate = setInterval(() => {
+        this.updateBackApi();
+      }, 3000);
+    },
+    handleClick(e) {
+      if (e.name == "wxLogin") {
+        this.updateQRcode();
+        this.interValTime = setInterval(() => {
+          this.updateQRcode();
+        }, 60000);
+        this.interValupdate = setInterval(() => {
+          this.updateBackApi();
+        }, 3000);
+      } else {
+        if (
+          this.activeName == "generalLogin" ||
+          this.activeName == "quickLogin"
+        ) {
+          this.$nextTick(() => {
+            this.$refs.ruleForm.clearValidate();
+          });
+        }
+        if (this.activeName == "signIn" || this.activeName == "forget") {
+          this.$nextTick(() => {
+            this.$refs.bindForm.clearValidate();
+          });
+        }
+        this.closeFunc();
+      }
+    },
+    /**
+     * 获取验证码
+     */
+    loginSmsForm() {
+      var self = this;
+      this.$refs[
+        this.activeName == "quickLogin" ? "ruleForm" : "bindForm"
+      ].validateField("tel", valid => {
+        if (!valid) {
+          if (this.registerCountDown == 0) {
+            if (this.getRegisterCodeLock) {
+              return;
+            }
+            this.getRegisterCodeLock = true;
+            this.$request[
+              this.activeName == "quickLogin"
+                ? "getLoginSms"
+                : this.activeName == "signIn"
+                ? "getRegisterSms"
+                : "getRegisterSmsforget"
+            ]({
+              tel: this[
+                this.activeName == "quickLogin" ? "ruleForm" : "bindForm"
+              ].tel
+            })
+              .then(res => {
+                this.getRegisterCodeLock = false;
+                this.$message({
+                  message: `验证码已发送`,
+                  type: "success"
+                });
+                this.registerCountDown = 60;
+                this.registerCountDownTimer = setInterval(() => {
+                  self.registerCountDown--;
+                  if (self.registerCountDown == 0) {
+                    clearInterval(self.registerCountDownTimer);
+                  }
+                }, 1000);
+              })
+              .catch(err => {
+                this.$message({
+                  message: err.msg,
+                  type: "error"
+                });
+                this.getRegisterCodeLock = false;
+              });
+          }
+        }
+      });
+    },
+    openBox() {
+      this.islogin = false;
+      this.activeName = "generalLogin";
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .el-dialog {
+  background: transparent;
+}
+.dis_flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 30px;
+  img {
+    width: 184px;
+    height: 184px;
+  }
+  .headerTitle {
+    margin: 34px 0px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #000;
+  }
+}
+.clickFuncStyle {
+  text-align: center;
+  margin-bottom: 10px;
+  span {
+    user-select: none;
+    color: rgb(0,122,255);
+    cursor: pointer;
+  }
+}
+.getCode {
+  cursor: pointer;
+  user-select: none;
+  color: #409eff;
+}
+/deep/ .el-input-group__append {
+  background-color: #fff;
+}
+.el-tab-pane {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.find_res {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 300px;
+  margin-bottom: 20px;
+  user-select: none;
+  & > span {
+    cursor: pointer;
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+.submit {
+  width: 300px;
+  background-color: rgb(0,122,255);
+  &:hover{
+    background-color: rgb(51,149,255);
+  }
+}
+/deep/ .el-form-item__content {
+  margin-left: 0px !important;
+}
+.input_300 {
+  width: 300px;
+}
+/deep/ .el-dialog__header {
+  display: none;
+}
+
+/deep/ .el-dialog__body {
+  padding: 0;
+}
+.login_box {
+  border-radius: 8px;
+  position: relative;
+  width: 675px;
+  height: 450px;
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  .left {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    flex-shrink: 0;
+    width: 225px;
+    height: 100%;
+  }
+  .right {
+    flex: 1;
+    height: 100%;
+  }
+}
+.close_btn {
+  position: absolute;
+  left: 101%;
+  top: -27px;
+  color: #fff;
+  font-size: 32px;
+  cursor: pointer;
+  user-select: none;
+}
+.wx_login {
+  cursor: pointer;
+  margin: 30px auto 0px;
+  width: 48px;
+  height: 48px;
+  background: url("../../assets/new1/微信.png") no-repeat center center;
+  background-size: contain;
+  &:hover {
+    background: url("../../assets/new1/微信2.png") no-repeat center center;
+    background-size: contain;
+  }
+}
+/deep/ .el-tabs__item {
+  height: 50px;
+  line-height: 50px;
+}
+/deep/ .el-tabs__item{
+  padding: 0px!important;
+}
+</style>

src/components/toolbar/index.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="toolBar">
-    <div class="item" v-if="mobile.smallQrCodeShow">
-      <el-popover placement="left" width="170" trigger="hover">
-        <div>
-          <div
-            style="text-align: center; font-weight: bold; color: #222"
-            class="text"
-          >
-            扫码进入移动端
-          </div>
-          <img style="width: 150px; height: 150px" :src="$tools.splitImgHost(mobile.mobileImage)" alt="" />
+    <div class="item phs" v-if="mobile.smallQrCodeShow">
+      <div class="modu">
+        <img
+          style="width: 90px; height: 90px"
+          :src="$tools.splitImgHost(mobile.mobileImage)"
+          alt=""
+        />
+        <div
+          style="text-align: center;color: #222;margin-top: 6px;"
+          class="text"
+        >
+          扫码小程序
         </div>
-        <div slot="reference">
-          <img src="@/assets/qr.png" class="img" alt="" />
-          <div class="text">手机端</div>
-        </div>
-      </el-popover>
+      </div>
+      <img src="@/assets/new1/小程序.png" class="img" alt="" />
+      <div class="text">小程序</div>
     </div>
     <div class="item" v-if="userInfo" @click="go('/cart')">
       <el-badge :value="cartCount || ''">
@@ -26,29 +26,24 @@
     <div class="item">
       <el-popover placement="left" width="180" trigger="hover">
         <div>
-          <h2 style="font-size: 16px; color: #000">报名咨询</h2>
-          <p style="color: #999">{{ header.serviceTel.time }}</p>
+          <h2 style="font-size: 14px; color: #333;font-weight: 400;">
+            服务时间
+          </h2>
+          <p style="font-size: 12px;color: #999;margin-top: 4px">
+            {{ header.serviceTel.time }}
+          </p>
           <div
             v-for="(item, index) in getTel(header.serviceTel.tel)"
             :key="index"
-            style="margin-top: 16px"
+            style="font-size: 14px;margin-top: 6px"
           >
-            <i
-              class="el-icon-phone"
-              style="
-                border-radius: 50%;
-                border: 1px solid #000;
-                padding: 2px;
-                margin-right: 8px;
-              "
-            ></i>
             {{ item }}
           </div>
           <!-- {{header.serviceTel}} -->
         </div>
         <div slot="reference">
           <img src="@/assets/contact.png" class="img" alt="" />
-          <div class="text">报名咨询</div>
+          <div class="text">咨询热线</div>
         </div>
       </el-popover>
     </div>
@@ -102,25 +97,25 @@ import { mapGetters, mapMutations } from "vuex";
 export default {
   name: "ToolBar",
   computed: {
-    ...mapGetters(["userInfo", "cartCount", "header","mobile"]),
-    getTel: function () {
-      return function (tel) {
+    ...mapGetters(["userInfo", "cartCount", "header", "mobile"]),
+    getTel: function() {
+      return function(tel) {
         if (tel) {
           return tel.split(";");
         } else {
           return [];
         }
       };
-    },
+    }
   },
   data() {
     return {
-      scrollTimer: null,
+      scrollTimer: null
       // WEAPP_LOGO: require(process.env.WEAPP_LOGO),
     };
   },
   mounted() {
-    console.log(this.$store.state,"state")
+    console.log(this.$store.state, "state");
     if (this.$tools.isLogin()) {
       this.getCartCount();
     }
@@ -129,7 +124,7 @@ export default {
     ...mapMutations(["getCartCount"]),
     go(path) {
       this.$router.push({
-        path,
+        path
       });
     },
     scollTop() {
@@ -143,8 +138,8 @@ export default {
           clearInterval(this.scrollTimer);
         }
       }, 16);
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -152,11 +147,11 @@ export default {
 <style scoped lang="scss">
 .toolBar {
   border: 1px solid #eeeeee;
-  box-shadow: 0px 3px 6px 0px rgba(213, 218, 224, 0.8);
+  box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.5);
   border-radius: 10px;
   padding: 4px;
   position: fixed;
-  right: 0;
+  right: 10px;
   top: 380px;
   background: #fff;
   display: flex;
@@ -207,4 +202,21 @@ export default {
     }
   }
 }
+.phs {
+  position: relative;
+  &:hover .modu {
+    visibility: inherit;
+    opacity: 1;
+  }
+}
+.modu {
+  visibility: hidden;
+  transition: all 0.3s;
+  opacity: 0;
+  position: absolute;
+  background-color: #fff;
+  border-radius: 8px;
+  left: -124px;
+  padding: 10px;
+}
 </style>

src/pages/bank-list/index.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="payment">
     <Header @search="search($event)"></Header>
+    <div class="bgImg" v-if="header.templateStatus == 2">
+      <div class="tits">
+        <h1>精品题库</h1>
+        <p>高品质，高精准，助你过关，VIP课程 任你挑选</p>
+      </div>
+    </div>
     <section class="section">
-      <list-option :goodsType="2" ref="listOption"></list-option>
+      <component
+        :is="currentComponent(header.templateStatus)"
+        :goodsType="2"
+        ref="listOption"
+      ></component>
     </section>
     <ToolBar></ToolBar>
     <Footer></Footer>
@@ -10,14 +20,17 @@
 </template>
 
 <script>
-import listOption from "@/components/listOption/index";
+import { mapGetters } from "vuex";
+import listOption1 from "@/components/listOption1/index.vue";
+import listOption2 from "@/components/listOption2/index.vue";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 export default {
   name: "",
   components: {
-    listOption,
+    listOption1,
+    listOption2,
     Footer,
     Header,
     ToolBar
@@ -25,6 +38,27 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "listOption1";
+            break;
+          case 2:
+            str = "listOption2";
+            break;
+
+          default:
+            str = "listOption1";
+            break;
+        }
+        return str;
+      };
+    }
+  },
   methods: {
     search(key) {
       this.$refs.listOption.params.goodsName = key;
@@ -34,4 +68,29 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.payment {
+  background-color: rgb(245, 247, 249);
+}
+.bgImg {
+  position: relative;
+  height: 300px;
+  background: url("../../assets/new1/课程banner.png") no-repeat center center;
+  & > .tits {
+    position: absolute;
+    left: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 240px;
+    h1 {
+      font-size: 40px;
+      font-weight: bold;
+      color: #fff;
+      margin-bottom: 14px;
+    }
+    p {
+      color: #fff;
+    }
+  }
+}
+</style>

src/pages/course-list/index.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="payment">
     <Header @search="search($event)"></Header>
+    <div class="bgImg" v-if="header.templateStatus == 2">
+      <div class="tits">
+        <h1>精品课程</h1>
+        <p>高品质，高精准，助你过关，VIP课程 任你挑选</p>
+      </div>
+    </div>
     <section class="section">
-      <list-option :goodsType="1" ref="listOption"></list-option>
+      <component
+        :is="currentComponent(header.templateStatus)"
+        :goodsType="1"
+        ref="listOption"
+      ></component>
     </section>
     <ToolBar></ToolBar>
     <Footer></Footer>
@@ -10,14 +20,17 @@
 </template>
 
 <script>
-import listOption from "@/components/listOption/index";
+import { mapGetters } from "vuex";
+import listOption1 from "@/components/listOption1/index.vue";
+import listOption2 from "@/components/listOption2/index.vue";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 export default {
   name: "",
   components: {
-    listOption,
+    listOption1,
+    listOption2,
     Footer,
     Header,
     ToolBar
@@ -25,6 +38,27 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "listOption1";
+            break;
+          case 2:
+            str = "listOption2";
+            break;
+
+          default:
+            str = "listOption1";
+            break;
+        }
+        return str;
+      };
+    }
+  },
   methods: {
     search(key) {
       this.$refs.listOption.params.goodsName = key;
@@ -34,4 +68,29 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.payment {
+  background-color: rgb(245, 247, 249);
+}
+.bgImg {
+  position: relative;
+  height: 300px;
+  background: url("../../assets/new1/课程banner.png") no-repeat center center;
+  & > .tits {
+    position: absolute;
+    left: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 240px;
+    h1 {
+      font-size: 40px;
+      font-weight: bold;
+      color: #fff;
+      margin-bottom: 14px;
+    }
+    p {
+      color: #fff;
+    }
+  }
+}
+</style>

src/pages/handout-list/index.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="payment">
     <Header @search="search($event)"></Header>
+    <div class="bgImg" v-if="header.templateStatus == 2">
+      <div class="tits">
+        <h1>精品讲义</h1>
+        <p>高品质，高精准，助你过关，VIP课程 任你挑选</p>
+      </div>
+    </div>
     <section class="section">
-      <list-option :goodsType="8" ref="listOption"></list-option>
+      <component
+        :is="currentComponent(header.templateStatus)"
+        :goodsType="8"
+        ref="listOption"
+      ></component>
     </section>
     <ToolBar></ToolBar>
     <Footer></Footer>
@@ -10,14 +20,17 @@
 </template>
 
 <script>
-import listOption from "@/components/listOption/index";
+import { mapGetters } from "vuex";
+import listOption1 from "@/components/listOption1/index.vue";
+import listOption2 from "@/components/listOption2/index.vue";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 export default {
   name: "",
   components: {
-    listOption,
+    listOption1,
+    listOption2,
     Footer,
     Header,
     ToolBar
@@ -25,6 +38,27 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "listOption1";
+            break;
+          case 2:
+            str = "listOption2";
+            break;
+
+          default:
+            str = "listOption1";
+            break;
+        }
+        return str;
+      };
+    }
+  },
   methods: {
     search(key) {
       this.$refs.listOption.params.goodsName = key;
@@ -34,4 +68,28 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.payment {
+  background-color: rgb(245, 247, 249);
+}
+.bgImg {
+  position: relative;
+  height: 300px;
+  background: url("../../assets/new1/课程banner.png") no-repeat center center;
+  & > .tits {
+    position: absolute;
+    left: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 240px;
+    h1 {
+      font-size: 40px;
+      font-weight: bold;
+      color: #fff;
+      margin-bottom: 14px;
+    }
+    p {
+      color: #fff;
+    }
+  }
+}</style>

src/pages/home/index.vue

@@ -1,545 +1,42 @@
 <template>
-  <div id="home_new">
-    <top></top>
-    <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>
-      </li>
-    </ul>
-    <div class="content_main div_second">
-      <div class="first">
-        <div>
-          <img src="@/assets/basket.png" alt="" />
-          <!-- <p>课程试听</p> -->
-        </div>
-        <div>
-          <img src="@/assets/basket.png" alt="" />
-          <!-- <p>考试日历</p> -->
-        </div>
-      </div>
-      <div
-        class="second"
-        style="background-color: rgb(114,177,255);"
-        @click="go('/course-list')"
-      >
-        <div class="lf">
-          <h1>课程</h1>
-          <p>精准课程过关VIP<br />任你挑选</p>
-          <i>GO ></i>
-        </div>
-        <img src="@/assets/basket.png" alt="" />
-      </div>
-      <div
-        class="second"
-        style="background-color: rgb(63,218,233);"
-        @click="go('/bank-list')"
-      >
-        <div class="lf">
-          <h1>题库</h1>
-          <p>一道好题胜百道<br />在线刷题</p>
-          <i>GO ></i>
-        </div>
-        <img src="@/assets/basket.png" alt="" />
-      </div>
-      <div
-        class="second"
-        style="background-color: rgb(89,184,251);"
-        @click="go('/handout-list')"
-      >
-        <div class="lf">
-          <h1>资料</h1>
-          <p>讲义资料助你一力<br />快速获取</p>
-          <i>GO ></i>
-        </div>
-        <img src="@/assets/basket.png" alt="" />
-      </div>
-    </div>
-    <div class="content_main tj_main">
-      <div class="header_main">
-        <div class="hbox">
-          <img src="@/assets/basket.png" alt="" />
-          <h2>推荐课程</h2>
-        </div>
-        <i @click="go('/course-list')">更多 ></i>
-      </div>
-      <ul class="goods_main">
-        <el-empty
-          style="margin: 0 auto;"
-          description="暂无推荐课程"
-          v-if="!goodsList1.length"
-        ></el-empty>
-        <GoodsItemNew
-          v-for="(item, index) in goodsList1"
-          v-show="index < 4"
-          :key="index"
-          :goodsItem="item"
-        ></GoodsItemNew>
-      </ul>
-    </div>
-    <div class="content_main tj_main">
-      <div class="header_main">
-        <div class="hbox">
-          <img src="@/assets/basket.png" alt="" />
-          <h2>推荐题库</h2>
-        </div>
-        <i @click="go('/bank-list')">更多 ></i>
-      </div>
-      <ul class="goods_main">
-        <el-empty
-          style="margin: 0 auto;"
-          description="暂无推荐题库"
-          v-if="!goodsList2.length"
-        ></el-empty>
-        <GoodsItemNew
-          v-for="(item, index) in goodsList2"
-          v-show="index < 4"
-          :key="index"
-          :goodsItem="item"
-        ></GoodsItemNew>
-      </ul>
-    </div>
-    <div class="content_main tj_main">
-      <div class="header_main">
-        <div class="hbox">
-          <img src="@/assets/basket.png" alt="" />
-          <h2>师资团队</h2>
-        </div>
-      </div>
-      <el-carousel indicator-position="none" :autoplay="false" height="363px">
-        <el-carousel-item v-for="(item, index) in teacher" :key="index">
-          <div class="carousel_box">
-            <div v-for="(it, ix) in item" class="carousel_li" :key="ix">
-              <div class="header_teacher">
-                <img src="@/assets/basket.png" alt="" />
-                <div class="r">
-                  <h3>{{ it.name }}</h3>
-                  <p>{{ it.occupation }}</p>
-                </div>
-              </div>
-              <ul class="content_teacher">
-                <li v-for="(its, ixs) in it.remark" :key="ixs">{{ its }}</li>
-              </ul>
-            </div>
-          </div>
-        </el-carousel-item>
-      </el-carousel>
-    </div>
-    <div class="content_main tj_main">
-      <div class="header_main">
-        <div class="hbox">
-          <img src="@/assets/basket.png" alt="" />
-          <h2>资质证书</h2>
-        </div>
-      </div>
-      <el-carousel indicator-position="none" :autoplay="false" height="207px">
-        <el-carousel-item v-for="(item, index) in certificate" :key="index">
-          <div class="carousel_box">
-            <div
-              v-for="(it, ix) in item"
-              class="carousel_img"
-              :key="ix"
-              :style="{ width: it.width }"
-            >
-              <el-image
-                style="width: 100%; height: 100%"
-                src="@/assets/basket.png"
-                :preview-src-list="['@/assets/basket.png']"
-              >
-              </el-image>
-            </div>
-          </div>
-        </el-carousel-item>
-      </el-carousel>
-    </div>
-    <Footer></Footer>
+  <div id="">
+    <component :is="currentComponent(header.templateStatus)"></component>
   </div>
 </template>
 
 <script>
-import top from "./top.vue";
-import GoodsItemNew from "@/components/goodsItem-new/index";
-import Footer from "@/components/footer/index";
+import { mapGetters } from "vuex";
+import home1 from "../home1/index.vue";
+import home2 from "../home2/index.vue";
 export default {
-  components: { top, Footer, GoodsItemNew },
+  components: { home1, home2 },
   data() {
-    return {
-      workMsg: [
-        { label: "职业考证", value: "证越多 挣越多" },
-        { label: "职业技能", value: "晋升 涨薪 技能" },
-        { label: "师资团队", value: "教授 博士 工程师" },
-        { label: "产业合作", value: "团企培训解决方案" },
-        { label: "品牌实力", value: "办学许可 十年专注" }
-      ],
-      teacher: [
-        [
-          {
-            imgUrl: "",
-            name: "陈红",
-            occupation: "教授、高级工程师",
-            remark: [
-              "国务院安委会、咨询、建筑施工专业委员会专家",
-              "中国模板手脚架协会副秘书长",
-              "原中国建筑一局 (集团)有限公司工程技术部经理参编国家标准:",
-              "《建筑施工脚手架安全技术统一标准》",
-              "《建筑施工扣件式钢管脚手架安全技术规范》",
-              "《建筑施工临时支撑技术规范》"
-            ]
-          },
-          {
-            imgUrl: "",
-            name: "徐福康",
-            occupation: "教授、高级工程师",
-            remark: [
-              "上海市施工现场安全生产保证体系第一审核认证中心副主任、总工程师",
-              "上海市建设工程安全质量监督总站高级工程师",
-              "国家标准《建筑施工企业安全生产管理规范》主要起草人"
-            ]
-          },
-          {
-            imgUrl: "",
-            name: "马英明",
-            occupation: "教授、高级工程师",
-            remark: [
-              "中国矿业大学博士生导师",
-              "国家住建部全国地铁与轻轨建设专家组专家",
-              "广东省人民政府科技专家顾问委员会委员",
-              "原中国地下工程学会副主任"
-            ]
-          }
-        ],
-        [
-          {
-            imgUrl: "",
-            name: "胡欣欣",
-            occupation: "教授、硕士生导师",
-            remark: [
-              "二建考前名师",
-              "广东工业大学土木与交通工程学员硕士生导师",
-              "广东省工程造价协会专家库成员",
-              "广东省工程咨询协会专家库成员"
-            ]
-          },
-          {
-            imgUrl: "",
-            name: "邝穗春",
-            occupation: "工程师、高级讲师",
-            remark: [
-              "广州市建筑置业有限公司",
-              "生产技术部/工程部/资料管理部副部长",
-              "广州市市政集团培训中心高级进师",
-              "广州大学市政技术学院特聘进师",
-              "专业从事建筑工程竣工验收/技术资料管理",
-              "建筑工程施工安全资料管理"
-            ]
-          },
-          {
-            imgUrl: "",
-            name: "朱培浩",
-            occupation: "博士、教材主编",
-            remark: ["机电实务全国名师", "建造师相关教材主编、参编"]
-          }
-        ]
-      ],
-      certificate: [
-        [
-          { imgUrl: "", width: "290px" },
-          { imgUrl: "", width: "290px" },
-          { imgUrl: "", width: "147px" },
-          { imgUrl: "", width: "147px" },
-          { imgUrl: "", width: "147px" }
-        ],
-        [
-          { imgUrl: "", width: "290px" },
-          { imgUrl: "", width: "147px" },
-          { imgUrl: "", width: "147px" },
-          { imgUrl: "", width: "290px" },
-          { imgUrl: "", width: "147px" }
-        ]
-      ],
-      goodsList1: [], //推荐课程
-      goodsList2: [], //推荐题库
-    };
+    return {};
   },
-  mounted() {
-    this.courseLists();
-  },
-  methods: {
-    go(path, query) {
-      this.$router.push({
-        path,
-        query
-      });
-    },
-    //课程
-    courseLists() {
-      this.$request
-        .appCommonActivityRecommendList({ platform: 2, status: 1 })
-        .then(async res => {
-          if (res.code == 200 && res.rows.length) {
-            let list = res.rows || [];
-            //课程
-            var a = list.find(i => i.type == 1);
-            this.goodsList1 = a.goodsList
-              .sort((a, b) => a.sort - b.sort)
-              .map(i => {
-                return Object.assign(
-                  {
-                    businessId: a.businessId,
-                    businessName: a.businessName,
-                    educationName: a.educationName,
-                    educationTypeId: a.educationTypeId,
-                    projectName: a.projectName,
-                    projectId: a.projectId
-                  },
-                  i
-                );
-              });
-            var b = list.find(i => i.type == 2);
-            this.goodsList2 = b.goodsList
-              .sort((a, b) => a.sort - b.sort)
-              .map(i => {
-                return Object.assign(
-                  {
-                    businessId: b.businessId,
-                    businessName: b.businessName,
-                    educationName: b.educationName,
-                    educationTypeId: b.educationTypeId,
-                    projectName: b.projectName,
-                    projectId: b.projectId
-                  },
-                  i
-                );
-              });
-          }
-        });
+  created() {},
+  computed: {
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "home1";
+            break;
+          case 2:
+            str = "home2";
+            break;
+
+          default:
+            str = "home1";
+            break;
+        }
+        return str;
+      };
     }
-  }
+  },
+  methods: {}
 };
 </script>
 
-<style lang="scss" scoped>
-#home_new {
-  background-color: rgb(245, 247, 249);
-
-  .content_main {
-    width: 1200px;
-    margin: 24px auto 0px;
-    background-color: #fff;
-    border-radius: 4px;
-  }
-  .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;
-      }
-      & > img {
-        width: 48px;
-        height: 48px;
-        margin-right: 10px;
-      }
-      & > .r_r {
-        h4 {
-          margin: 0;
-          font-size: 18px;
-          font-weight: 400;
-          margin-bottom: 4px;
-        }
-        span {
-          font-size: 14px;
-          color: #7f7f7f;
-        }
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-      }
-    }
-  }
-  .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;
-      background-color: rgb(236, 243, 252);
-      border-radius: 4px;
-      div {
-        user-select: none;
-        display: flex;
-        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;
-        }
-      }
-    }
-    & > .second {
-      display: flex;
-      align-items: center;
-      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);
-      }
-      & > .lf {
-        flex: 1;
-        h1 {
-          font-size: 24px;
-          color: #fff;
-          font-weight: 500;
-          margin-bottom: 4px;
-        }
-        p {
-          color: #fff;
-          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;
-      }
-    }
-  }
-  .tj_main {
-    padding: 20px;
-    .header_main {
-      user-select: none;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-bottom: 24px;
-      border-bottom: 1px dashed rgb(215, 215, 215);
-      margin-bottom: 20px;
-      & > .hbox {
-        display: flex;
-        align-items: center;
-        & > img {
-          width: 27px;
-          height: 27px;
-          margin-right: 10px;
-        }
-        & > h2 {
-          font-size: 24px;
-          font-style: italic;
-        }
-      }
-      & > i {
-        cursor: pointer;
-        font-style: normal;
-        color: #7f7f7f;
-      }
-    }
-    .goods_main {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-.carousel_box {
-  width: 1050px;
-  margin: 0px auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  & > .carousel_li {
-    width: 330px;
-    height: 363px;
-    border-radius: 4px;
-    border: 1px solid #eee;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    transition: all 0.2s;
-    overflow: hidden;
-    &:hover {
-      border-color: #409eff;
-    }
-    & > .header_teacher {
-      height: 124px;
-      display: flex;
-      align-items: center;
-      background-color: #fff;
-      padding: 20px;
-      & > img {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        overflow: hidden;
-        margin-right: 20px;
-      }
-      & > .r {
-        flex: 1;
-        h3 {
-          font-size: 18px;
-          margin-bottom: 10px;
-        }
-        p {
-          font-size: 14px;
-        }
-      }
-    }
-    & > .content_teacher {
-      padding: 14px;
-      height: 1px;
-      flex: 1;
-      color: #fff;
-      background-color: rgb(51, 149, 255);
-      li {
-        padding-bottom: 8px;
-      }
-    }
-  }
-  & > .carousel_img {
-    border: 1px solid #eee;
-    height: 207px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/pages/home/top.vue

@@ -1,368 +0,0 @@
-<template>
-  <div id="top">
-    <div class="n_box">
-      <div class="left">
-        <div class="tab_main">
-          <header>
-            <div :class="active == 1 ? 'active_tab' : ''">课程导航</div>
-            <div :class="active == 2 ? 'active_tab' : ''">报考指导</div>
-          </header>
-          <div class="content_tab">
-            <div
-              class="tab_li"
-              v-for="(item, index) in typeList"
-              :key="index"
-              @mouseenter="handleMouseEnter(index)"
-            >
-              <div class="tops" @click="goCourse(item)">
-                <span>{{ item.educationName }}</span>
-                <i class="el-icon-arrow-right"></i>
-              </div>
-              <ul>
-                <li
-                  v-for="(items, indexs) in item.businessList"
-                  :key="indexs"
-                  v-show="indexs < 4"
-                  @click="goCourse(items)"
-                >
-                  {{ items.aliasName }}
-                </li>
-                <div style="clear:both;"></div>
-              </ul>
-              <div class="ri_p">
-                <h4>{{ typeList[eduIndex].educationName }}</h4>
-                <div class="fgx"></div>
-                <ul>
-                  <li
-                    v-for="(it, ix) in typeList[eduIndex].businessList"
-                    :key="ix"
-                  >
-                    {{ it.aliasName }}
-                  </li>
-                  <div style="clear:both;"></div>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="swiper">
-          <swiper
-            v-if="swiperOptions.bannerList.length > 0"
-            :options="swiperOptions"
-          >
-            <swiper-slide
-              v-for="(item, index) in swiperOptions.bannerList"
-              v-bind:key="index"
-              @click.native="swiperJump(item)"
-            >
-              <img
-                :src="$tools.splitImgHost(item.adverUrl, true, 880)"
-                alt=""
-              />
-            </swiper-slide>
-
-            <div class="swiper-pagination" slot="pagination"></div>
-          </swiper>
-        </div>
-      </div>
-      <div class="login">2</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { swiper, swiperSlide } from "vue-awesome-swiper";
-import "swiper/swiper-bundle.css";
-export default {
-  components: {
-    swiper,
-    swiperSlide
-  },
-  data() {
-    return {
-      active: 1,
-      eduIndex: 0,
-      typeList: [],
-      swiperOptions: {
-        bannerList: [],
-        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"
-        }
-      } //轮播
-    };
-  },
-  mounted() {
-    this.advertisingList();
-    this.educationTypeList();
-  },
-  methods: {
-    handleMouseEnter(index) {
-      this.eduIndex = index;
-    },
-    handleMouseLeave(item) {
-      console.log(item, "leave");
-    },
-    goCourse(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 : ""
-        }
-      });
-    },
-    educationTypeList() {
-      this.$request.educationTypeList().then(res => {
-        this.typeList = res.rows || [];
-        this.typeList.forEach(async (item, index) => {
-          const A = await this.$request.businessList({ educationId: item.id });
-          item.businessList = A.rows.filter(items => items.aliasName);
-        });
-      });
-    },
-    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
-        });
-      }
-    },
-    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(result => {
-                this.swiperOptions.autoplay.delay =
-                  res.data[0].intervalTime * 1000;
-                this.swiperOptions.bannerList = result.rows;
-              });
-          }
-        });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-#top {
-  height: 600px;
-  background-color: skyblue;
-  position: relative;
-  .n_box {
-    position: absolute;
-    width: 1200px;
-    height: 400px;
-    top: 126px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    & > .left {
-      flex: 1;
-      background-color: #fff;
-      border-radius: 4px;
-      overflow: hidden;
-      height: 100%;
-      position: relative;
-      .tab_main {
-        backdrop-filter: blur(10px);
-        width: 300px;
-        height: 400px;
-        z-index: 10;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-        & > header {
-          display: flex;
-          align-items: center;
-          height: 50px;
-          color: #fff;
-          user-select: none;
-          & > div {
-            font-size: 16px;
-            flex: 1;
-            text-align: center;
-            height: 48px;
-            line-height: 48px;
-            cursor: pointer;
-            font-weight: 400;
-            border-bottom: 2px solid #eeeeee50;
-            &:hover {
-              border-color: rgb(0, 122, 255);
-              font-weight: bold;
-            }
-            // border-bottom: 2px solid #eee;
-          }
-          & > .active_tab {
-            border-color: rgb(0, 122, 255);
-            font-weight: bold;
-          }
-        }
-        & > .content_tab {
-          height: 350px;
-          overflow: 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;
-          }
-          & > .tab_li {
-            padding: 16px 20px;
-            color: #fff;
-            border-bottom: 1px solid #eee;
-            & > .ri_p {
-              visibility: hidden;
-              position: absolute;
-              background-color: #fff;
-              top: 0px;
-              left: 300px;
-              width: 580px;
-              height: 400px;
-              transition: all 0.2s;
-              opacity: 0;
-              padding: 15px 30px 0px;
-              h4 {
-                font-weight: bold;
-                color: #409eff;
-                font-size: 16px;
-              }
-              .fgx {
-                margin: 15px 0px;
-                height: 1px;
-                background-color: #eee;
-              }
-              ul > li {
-                float: left;
-                margin: 0px 6px 6px 0px;
-                color: #000;
-              }
-            }
-            &:hover .ri_p {
-              visibility: visible;
-              opacity: 1;
-            }
-
-            &:last-child {
-              border-bottom: none;
-            }
-            & > .tops {
-              cursor: pointer;
-              user-select: none;
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              margin-bottom: 10px;
-            }
-            & > ul {
-              & > li {
-                margin: 0px 10px 6px 0px;
-                float: left;
-                cursor: pointer;
-                user-select: none;
-                color: #f7f7f79a;
-                transition: all 0.2s;
-                &:hover {
-                  color: #f7f7f7;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    & > .login {
-      margin-left: 20px;
-      border-radius: 4px;
-      overflow: hidden;
-      background-color: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(10px);
-      width: 300px;
-      height: 100%;
-    }
-  }
-}
-.swiper-slide {
-  cursor: pointer;
-  height: 400px;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-.swiper-pagination {
-  text-align: right;
-  padding-right: 24px;
-
-  /deep/ .swiper-pagination-bullet {
-    background: rgba(255, 255, 255, 0.4);
-
-    &-active {
-      background: rgba(255, 255, 255, 1);
-    }
-  }
-}
-</style>

src/pages/home-copy/index.vue → src/pages/home1/index.vue

@@ -167,11 +167,7 @@
                   :key="'type' + typeItem"
                 >
                   <div class="title" @click="goCourse(type)">
-                    {{
-                      type.educationName == "继续教育"
-                        ? "继教"
-                        : type.educationName
-                    }}
+                    {{ type.educationName }}
                   </div>
                   <ul class="nav">
                     <li
@@ -191,11 +187,7 @@
                 <li v-for="(item, index) in typeList" :key="index">
                   <div class="text">
                     <div class="text__title" @click="goCourse(item)">
-                      {{
-                        item.educationName == "继续教育"
-                          ? "继教"
-                          : item.educationName
-                      }}
+                      {{ type.educationName }}
                       <i
                         class="el-icon-arrow-right"
                         style="float: right;margin-right: 10px;"
@@ -785,7 +777,7 @@ export default {
       bankIndex: 0,
       courseId: "",
       bankId: "",
-      packPageStatus:false
+      packPageStatus: false
     };
   },
   created() {
@@ -822,7 +814,7 @@ export default {
   },
   methods: {
     closePackPage() {
-      this.packPageStatus = false
+      this.packPageStatus = false;
       this.$store.state.packPageStatus = false;
     },
     //课程
@@ -1472,8 +1464,11 @@ export default {
                 }
                 this.bannerList = res.rows;
                 this.colors = res.rows.map(item => {
-                  if(item.jumpUrl == "/packPage" && this.$store.state.packPageStatus){
-                    this.packPageStatus = true
+                  if (
+                    item.jumpUrl == "/packPage" &&
+                    this.$store.state.packPageStatus
+                  ) {
+                    this.packPageStatus = true;
                   }
                   return item.color ? item.color : "rgba(225,225,225,0.1)";
                 });

src/pages/home2/index.vue

@@ -0,0 +1,655 @@
+<template>
+  <div id="home_new">
+    <Header id="header" :nav_beauf="nav_beauf" :collapse="false"></Header>
+    <top></top>
+    <ul class="content_main ul_first">
+      <li class="main_li" v-for="(item, index) in workMsg" :key="index">
+        <img :src="item.imgUrl" alt="" />
+        <div class="r_r">
+          <h4>{{ item.label }}</h4>
+          <span>{{ item.value }}</span>
+        </div>
+      </li>
+    </ul>
+    <div class="content_main div_second">
+      <div class="first">
+        <div>
+          <img src="@/assets/new1/课程试听.png" alt="" />
+          <!-- <p>课程试听</p> -->
+        </div>
+        <div>
+          <img src="@/assets/new1/考试日历.png" alt="" />
+          <!-- <p>考试日历</p> -->
+        </div>
+      </div>
+      <div
+        class="second"
+        style="background-color: rgb(114,177,255);"
+        @click="go('/course-list')"
+      >
+        <div class="lf">
+          <h1>课程</h1>
+          <p>精准课程过关VIP<br />任你挑选</p>
+          <i>GO ></i>
+        </div>
+        <img src="@/assets/new1/课程.png" alt="" />
+      </div>
+      <div
+        class="second"
+        style="background-color: rgb(63,218,233);"
+        @click="go('/bank-list')"
+      >
+        <div class="lf">
+          <h1>题库</h1>
+          <p>一道好题胜百道<br />在线刷题</p>
+          <i>GO ></i>
+        </div>
+        <img src="@/assets/new1/题库.png" alt="" />
+      </div>
+      <div
+        class="second"
+        style="background-color: rgb(89,184,251);"
+        @click="go('/handout-list')"
+      >
+        <div class="lf">
+          <h1>资料</h1>
+          <p>讲义资料助你一力<br />快速获取</p>
+          <i>GO ></i>
+        </div>
+        <img src="@/assets/new1/资料.png" alt="" />
+      </div>
+    </div>
+    <div class="content_main tj_main">
+      <div class="header_main">
+        <div class="hbox">
+          <img src="@/assets/new1/推荐课程.png" alt="" />
+          <h2>推荐课程</h2>
+        </div>
+        <i @click="go('/course-list')">更多 ></i>
+      </div>
+      <ul class="goods_main">
+        <el-empty
+          style="margin: 0 auto;"
+          description="暂无推荐课程"
+          v-if="!goodsList1.length"
+        ></el-empty>
+        <GoodsItemNew
+          v-for="(item, index) in goodsList1"
+          v-show="index < 4"
+          :key="index"
+          :goodsItem="item"
+        ></GoodsItemNew>
+      </ul>
+    </div>
+    <div class="content_main tj_main">
+      <div class="header_main">
+        <div class="hbox">
+          <img src="@/assets/new1/推荐题库.png" alt="" />
+          <h2>推荐题库</h2>
+        </div>
+        <i @click="go('/bank-list')">更多 ></i>
+      </div>
+      <ul class="goods_main">
+        <el-empty
+          style="margin: 0 auto;"
+          description="暂无推荐题库"
+          v-if="!goodsList2.length"
+        ></el-empty>
+        <GoodsItemNew
+          v-for="(item, index) in goodsList2"
+          v-show="index < 4"
+          :key="index"
+          :goodsItem="item"
+        ></GoodsItemNew>
+      </ul>
+    </div>
+    <div class="content_main tj_main">
+      <div class="header_main">
+        <div class="hbox">
+          <img src="@/assets/new1/师资团队.png" alt="" />
+          <h2>师资团队</h2>
+        </div>
+      </div>
+      <el-carousel indicator-position="none" :autoplay="false" height="363px">
+        <el-carousel-item v-for="(item, index) in teacher" :key="index">
+          <div class="carousel_box">
+            <div v-for="(it, ix) in item" class="carousel_li" :key="ix">
+              <div class="header_teacher">
+                <img :src="it.imgUrl" alt="" />
+                <div class="r">
+                  <h3>{{ it.name }}</h3>
+                  <p>{{ it.occupation }}</p>
+                </div>
+              </div>
+              <ul class="content_teacher">
+                <li v-for="(its, ixs) in it.remark" :key="ixs">{{ its }}</li>
+              </ul>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="content_main tj_main" style="margin-bottom: 20px!important;">
+      <div class="header_main">
+        <div class="hbox">
+          <img src="@/assets/new1/常见问题.png" alt="" />
+          <h2>资质证书</h2>
+        </div>
+      </div>
+      <el-carousel indicator-position="none" :autoplay="false" height="207px">
+        <el-carousel-item v-for="(item, index) in certificate" :key="index">
+          <div class="carousel_box">
+            <div
+              v-for="(it, ix) in item"
+              class="carousel_img"
+              :key="ix"
+              :class="it.imgUrl ? 'carousel_hover' : ''"
+              :style="{
+                width: it.width,
+                borderColor: !it.imgUrl ? 'transparent' : '#eee'
+              }"
+            >
+              <el-image
+                v-if="it.imgUrl"
+                style="width: 100%; height: 100%"
+                :src="it.imgUrl"
+                :preview-src-list="[it.imgUrl]"
+              >
+              </el-image>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <Footer></Footer>
+    <ToolBar></ToolBar>
+  </div>
+</template>
+
+<script>
+import ToolBar from "@/components/toolbar/index";
+import Header from "@/components/header/index";
+import top from "./top.vue";
+import GoodsItemNew from "@/components/goodsItem-new/index";
+import Footer from "@/components/footer/index";
+export default {
+  components: { ToolBar, Header, top, Footer, GoodsItemNew },
+  data() {
+    return {
+      nav_beauf: true,
+      workMsg: [
+        {
+          label: "职业考证",
+          value: "证越多 挣越多",
+          imgUrl: require("@/assets/new1/职业考证.png")
+        },
+        {
+          label: "职业技能",
+          value: "晋升 涨薪 技能",
+          imgUrl: require("@/assets/new1/职业技能.png")
+        },
+        {
+          label: "师资团队",
+          value: "教授 博士 工程师",
+          imgUrl: require("@/assets/new1/师资团队1.png")
+        },
+        {
+          label: "产业合作",
+          value: "团企培训解决方案",
+          imgUrl: require("@/assets/new1/产业合作.png")
+        },
+        {
+          label: "品牌实力",
+          value: "办学许可 十年专注",
+          imgUrl: require("@/assets/new1/品牌实力.png")
+        }
+      ],
+      teacher: [
+        [
+          {
+            imgUrl: require("@/assets/new1/陈红.png"),
+            name: "陈红",
+            occupation: "教授、高级工程师",
+            remark: [
+              "国务院安委会、咨询、建筑施工专业委员会专家",
+              "中国模板手脚架协会副秘书长",
+              "原中国建筑一局 (集团)有限公司工程技术部经理参编国家标准:",
+              "《建筑施工脚手架安全技术统一标准》",
+              "《建筑施工扣件式钢管脚手架安全技术规范》",
+              "《建筑施工临时支撑技术规范》"
+            ]
+          },
+          {
+            imgUrl: require("@/assets/new1/徐福康.png"),
+            name: "徐福康",
+            occupation: "教授、高级工程师",
+            remark: [
+              "上海市施工现场安全生产保证体系第一审核认证中心副主任、总工程师",
+              "上海市建设工程安全质量监督总站高级工程师",
+              "国家标准《建筑施工企业安全生产管理规范》主要起草人"
+            ]
+          },
+          {
+            imgUrl: require("@/assets/new1/马英明.png"),
+            name: "马英明",
+            occupation: "教授、高级工程师",
+            remark: [
+              "中国矿业大学博士生导师",
+              "国家住建部全国地铁与轻轨建设专家组专家",
+              "广东省人民政府科技专家顾问委员会委员",
+              "原中国地下工程学会副主任"
+            ]
+          }
+        ],
+        [
+          {
+            imgUrl: require("@/assets/new1/胡欣欣.png"),
+            name: "胡欣欣",
+            occupation: "教授、硕士生导师",
+            remark: [
+              "二建考前名师",
+              "广东工业大学土木与交通工程学员硕士生导师",
+              "广东省工程造价协会专家库成员",
+              "广东省工程咨询协会专家库成员"
+            ]
+          },
+          {
+            imgUrl: require("@/assets/new1/邝穗春.png"),
+            name: "邝穗春",
+            occupation: "工程师、高级讲师",
+            remark: [
+              "广州市建筑置业有限公司",
+              "生产技术部/工程部/资料管理部副部长",
+              "广州市市政集团培训中心高级进师",
+              "广州大学市政技术学院特聘进师",
+              "专业从事建筑工程竣工验收/技术资料管理",
+              "建筑工程施工安全资料管理"
+            ]
+          },
+          {
+            imgUrl: require("@/assets/new1/朱培浩.png"),
+            name: "朱培浩",
+            occupation: "博士、教材主编",
+            remark: ["机电实务全国名师", "建造师相关教材主编、参编"]
+          }
+        ]
+      ],
+      certificate: [
+        [
+          {
+            imgUrl: require("@/assets/资质证书/祥粤学院-办学许可证-正本(新).jpg"),
+            width: "290px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/祥粤学院-登记证.jpg"),
+            width: "290px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/祥粤学校-环境管理体系认证.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/祥粤学校-职业健康安全管理体系认证.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/祥粤学校-质量管理体系认证.jpg"),
+            width: "147px"
+          }
+        ],
+        [
+          {
+            imgUrl: require("@/assets/资质证书/中正企业智慧教育系统软著证书.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/中正-人脸识别软著证书.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/中正云学堂平台软著证书1.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/中正云学堂平台软著证书2.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/中正智慧考场软著证书1.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/中正云学堂平台软著证书3.jpg"),
+            width: "147px"
+          }
+        ],
+        [
+          {
+            imgUrl: require("@/assets/资质证书/中正智慧考场软著证书2.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/中正智慧考场软著证书3.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: require("@/assets/资质证书/中正智慧证书软著证书.jpg"),
+            width: "147px"
+          },
+          {
+            imgUrl: "",
+            width: "147px"
+          },
+          {
+            imgUrl: "",
+            width: "147px"
+          },
+          {
+            imgUrl: "",
+            width: "147px"
+          }
+        ]
+      ],
+      goodsList1: [], //推荐课程
+      goodsList2: [] //推荐题库
+    };
+  },
+  mounted() {
+    this.courseLists();
+    window.addEventListener("scroll", this.scrollFunc);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.scrollFunc);
+  },
+  methods: {
+    scrollFunc() {
+      if (
+        document.getElementById("header").getBoundingClientRect().bottom <= -53
+      ) {
+        this.nav_beauf = false;
+      } else {
+        this.nav_beauf = true;
+      }
+    },
+    go(path, query) {
+      this.$router.push({
+        path,
+        query
+      });
+    },
+    //课程
+    courseLists() {
+      this.$request
+        .appCommonActivityRecommendList({ platform: 2, status: 1 })
+        .then(async res => {
+          if (res.code == 200 && res.rows.length) {
+            let list = res.rows || [];
+            //课程
+            var a = list.find(i => i.type == 1);
+            this.goodsList1 = a.goodsList
+              .sort((a, b) => a.sort - b.sort)
+              .map(i => {
+                return Object.assign(
+                  {
+                    businessId: a.businessId,
+                    businessName: a.businessName,
+                    educationName: a.educationName,
+                    educationTypeId: a.educationTypeId,
+                    projectName: a.projectName,
+                    projectId: a.projectId
+                  },
+                  i
+                );
+              });
+            var b = list.find(i => i.type == 2);
+            this.goodsList2 = b.goodsList
+              .sort((a, b) => a.sort - b.sort)
+              .map(i => {
+                return Object.assign(
+                  {
+                    businessId: b.businessId,
+                    businessName: b.businessName,
+                    educationName: b.educationName,
+                    educationTypeId: b.educationTypeId,
+                    projectName: b.projectName,
+                    projectId: b.projectId
+                  },
+                  i
+                );
+              });
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#home_new {
+  background-color: rgb(245, 247, 249);
+
+  .content_main {
+    width: 1200px;
+    margin: 20px auto 0px;
+    background-color: #fff;
+    border-radius: 4px;
+  }
+  .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;
+      }
+      & > img {
+        width: 48px;
+        height: 48px;
+        margin-right: 10px;
+      }
+      & > .r_r {
+        h4 {
+          margin: 0;
+          font-size: 18px;
+          font-weight: 400;
+          margin-bottom: 4px;
+        }
+        span {
+          font-size: 14px;
+          color: #7f7f7f;
+        }
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+    }
+  }
+  .div_second {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px;
+    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;
+      background-color: rgb(236, 243, 252);
+      border-radius: 4px;
+      div {
+        user-select: none;
+        display: flex;
+        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;
+        }
+      }
+    }
+    & > .second {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px 18px;
+      width: 283px;
+      user-select: none;
+      cursor: pointer;
+      transition: all 0.2s;
+      border: 1px solid transparent;
+      &:hover {
+        border: 1px solid rgb(1, 123, 255);
+      }
+      & > .lf {
+        flex: 1;
+        h1 {
+          font-size: 24px;
+          color: #fff;
+          font-weight: 500;
+          margin-bottom: 4px;
+        }
+        p {
+          color: #fff;
+          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;
+      }
+    }
+  }
+  .tj_main {
+    padding: 30px 20px 40px;
+    .header_main {
+      user-select: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 24px;
+      border-bottom: 1px dashed rgb(215, 215, 215);
+      margin-bottom: 20px;
+      & > .hbox {
+        display: flex;
+        align-items: center;
+        & > img {
+          width: 27px;
+          height: 27px;
+          margin-right: 10px;
+        }
+        & > h2 {
+          font-size: 24px;
+          font-style: italic;
+        }
+      }
+      & > i {
+        cursor: pointer;
+        font-style: normal;
+        color: #7f7f7f;
+        &:hover{
+          font-weight: bold;
+          color: rgb(0,122,255);
+        }
+      }
+    }
+    .goods_main {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.carousel_box {
+  width: 1050px;
+  margin: 0px auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  & > .carousel_li {
+    width: 330px;
+    height: 363px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    transition: all 0.2s;
+    overflow: hidden;
+    &:hover {
+      border-color: #409eff;
+    }
+    & > .header_teacher {
+      height: 124px;
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      padding: 20px;
+      & > img {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 20px;
+      }
+      & > .r {
+        flex: 1;
+        h3 {
+          font-size: 18px;
+          margin-bottom: 10px;
+        }
+        p {
+          font-size: 14px;
+        }
+      }
+    }
+    & > .content_teacher {
+      padding: 14px;
+      height: 1px;
+      flex: 1;
+      color: #fff;
+      background-color: rgb(51, 149, 255);
+      li {
+        padding-bottom: 8px;
+      }
+    }
+  }
+  & > .carousel_img {
+    border: 1px solid #eee;
+    height: 207px;
+  }
+}
+.carousel_hover:hover {
+  border-color: rgb(0, 122, 255) !important;
+}
+</style>

src/pages/home2/top.vue

@@ -0,0 +1,629 @@
+<template>
+  <div id="top">
+    <div class="n_box">
+      <div class="left">
+        <div class="tab_main">
+          <header>
+            <div :class="active == 1 ? 'active_tab' : ''">课程导航</div>
+            <!-- <div :class="active == 2 ? 'active_tab' : ''">报考指导</div> -->
+          </header>
+          <div class="content_tab scroll_style">
+            <div
+              class="tab_li"
+              v-for="(item, index) in typeList"
+              :key="index"
+              @mouseenter="handleMouseEnter(index)"
+            >
+              <div class="tops">
+                <span>{{ item.educationName }}</span>
+                <i class="el-icon-arrow-right"></i>
+              </div>
+              <ul>
+                <li
+                  v-for="(items, indexs) in item.businessList"
+                  :key="indexs"
+                  v-show="indexs < 4"
+                >
+                  {{ items.aliasName }}
+                </li>
+                <div style="clear:both;"></div>
+              </ul>
+              <div class="ri_p">
+                <h4>{{ typeList[eduIndex].educationName }}</h4>
+                <div class="fgx"></div>
+                <ul class="scroll_style">
+                  <li
+                    v-for="(it, ix) in typeList[eduIndex].businessList"
+                    :key="ix"
+                    @click="goCourse(it)"
+                  >
+                    {{ it.aliasName }}
+                  </li>
+                  <div style="clear:both;"></div>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="swiper">
+          <swiper
+            v-if="swiperOptions.bannerList.length > 0"
+            :options="swiperOptions"
+          >
+            <swiper-slide
+              v-for="(item, index) in swiperOptions.bannerList"
+              v-bind:key="index"
+              @click.native="swiperJump(item)"
+            >
+              <img
+                :src="$tools.splitImgHost(item.adverUrl, true, 880)"
+                alt=""
+              />
+            </swiper-slide>
+
+            <div class="swiper-pagination" slot="pagination"></div>
+          </swiper>
+        </div>
+      </div>
+      <div class="login">
+        <template v-if="!userInfo">
+          <h2 class="title">账号登录注册</h2>
+          <p class="value">获取海量优质课程</p>
+          <img class="ggImg" src="@/assets/new1/专属好课推荐.png" alt="" />
+          <div class="btn" @click="$refs.login.openBox()">登录/注册</div>
+        </template>
+        <template v-else>
+          <header class="header_user">
+            <div>
+              <img :src="$tools.splitImgHost(userInfo.avatar)" alt="" />
+              <span>{{ userInfo.realname }}</span>
+            </div>
+            <div>
+              <span
+                @click="go('/person-center/my-info')"
+                style="cursor: pointer;"
+                >个人中心</span
+              >
+              <i class="el-icon-arrow-right"></i>
+            </div>
+          </header>
+          <div class="header_li">
+            <div
+              @click="go('/person-center/my-course')"
+              style="cursor: pointer;"
+            >
+              <img src="@/assets/kc.png" alt="" />
+              <p>课程</p>
+            </div>
+            <div @click="go('/person-center/my-bank')" style="cursor: pointer;">
+              <img src="@/assets/tk.png" alt="" />
+              <p>题库</p>
+            </div>
+            <div
+              @click="go('/person-center/my-order')"
+              style="cursor: pointer;"
+            >
+              <img src="@/assets/dd.png" alt="" />
+              <p>订单</p>
+            </div>
+          </div>
+          <div class="fgx" style="width: 100%;opacity: 0.5;"></div>
+          <div class="f_box" v-if="recordList.goodsId">
+            <div class="btnsy">上次播放</div>
+            <div class="title" @click="goLast">{{ recordList.goodsName }}</div>
+            <div class="remark">
+              <span
+                >已学{{
+                  toFixed(
+                    (recordList.videoCurrentTime / recordList.durationTime) *
+                      100
+                  )
+                }}%</span
+              >
+              <span>{{ recordList.date }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <login ref="login"></login>
+  </div>
+</template>
+
+<script>
+import login from "@/components/login";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import "swiper/swiper-bundle.css";
+import { mapGetters } from "vuex";
+export default {
+  components: {
+    swiper,
+    swiperSlide,
+    login
+  },
+  data() {
+    return {
+      recordList: {},
+      active: 1,
+      eduIndex: 0,
+      typeList: [],
+      swiperOptions: {
+        bannerList: [],
+        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"
+        }
+      } //轮播
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+
+    toFixed: function() {
+      return function(num) {
+        if (num) {
+          let str = String(num).indexOf(".");
+
+          if (str != -1) {
+            return +num.toFixed(2);
+          } else {
+            return num;
+          }
+        } else {
+          return 0;
+        }
+      };
+    }
+  },
+  watch: {
+    userInfo: {
+      handler() {
+        if ((newVal, oldVal)) {
+          this.getRecord();
+        }
+      }
+    }
+  },
+  mounted() {
+    this.advertisingList();
+    this.educationTypeList();
+    if (this.userInfo) {
+      this.getRecord();
+    }
+  },
+  methods: {
+    /**
+     * 播放记录
+     */
+    getRecord() {
+      this.$request
+        .studRrecordListUserRecord({
+          pageNum: 1,
+          pageSize: 1
+        })
+        .then(res => {
+          if (res.rows.length) {
+            this.recordList = res.rows[0];
+          }
+        });
+    },
+    go(path, query) {
+      this.$router.push({
+        path,
+        query
+      });
+    },
+    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
+          }
+        });
+      }
+    },
+    handleMouseEnter(index) {
+      this.eduIndex = index;
+    },
+    handleMouseLeave(item) {
+      console.log(item, "leave");
+    },
+    goCourse(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 : ""
+        }
+      });
+    },
+    educationTypeList() {
+      this.$request.educationTypeList().then(res => {
+        this.typeList = res.rows || [];
+        this.typeList.forEach(async (item, index) => {
+          const A = await this.$request.businessList({ educationId: item.id });
+          item.businessList = A.rows.filter(items => items.aliasName);
+        });
+      });
+    },
+    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
+        });
+      }
+    },
+    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(result => {
+                this.swiperOptions.autoplay.delay =
+                  res.data[0].intervalTime * 1000;
+                this.swiperOptions.bannerList = result.rows;
+              });
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.scroll_style {
+  &::-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;
+  }
+}
+#top {
+  height: 600px;
+  background: url("../../assets/new1/banner.png");
+  position: relative;
+  .n_box {
+    position: absolute;
+    width: 1200px;
+    height: 400px;
+    top: 126px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    & > .left {
+      flex: 1;
+      background-color: #fff;
+      border-radius: 4px;
+      overflow: hidden;
+      height: 100%;
+      position: relative;
+      .tab_main {
+        backdrop-filter: blur(10px);
+        width: 300px;
+        height: 400px;
+        z-index: 10;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: rgba(0, 0, 0, 0.85);
+        & > header {
+          display: flex;
+          align-items: center;
+          height: 50px;
+          color: #fff;
+          user-select: none;
+          & > div {
+            font-size: 16px;
+            flex: 1;
+            text-align: center;
+            height: 48px;
+            line-height: 48px;
+            cursor: pointer;
+            font-weight: 400;
+            border-bottom: 2px solid #eeeeee50;
+            &:hover {
+              border-color: rgb(0, 122, 255);
+              font-weight: bold;
+            }
+            // border-bottom: 2px solid #eee;
+          }
+          & > .active_tab {
+            border-color: rgb(0, 122, 255);
+            font-weight: bold;
+          }
+        }
+        & > .content_tab {
+          height: 350px;
+          overflow: auto;
+          & > .tab_li {
+            padding: 16px 0px;
+            margin: 0px 20px;
+            color: #fff;
+            border-bottom: 1px solid rgb(86, 89, 92);
+            &:hover {
+              color: #007aff !important;
+            }
+            & > .ri_p {
+              visibility: hidden;
+              position: absolute;
+              background-color: #fff;
+              top: 0px;
+              left: 300px;
+              width: 580px;
+              height: 400px;
+              transition: all 0.3s;
+              opacity: 0;
+              padding: 15px 30px 0px;
+              display: flex;
+              flex-direction: column;
+              h4 {
+                font-weight: bold;
+                color: #007aff;
+                font-size: 16px;
+              }
+              ul {
+                overflow: auto;
+                > li {
+                  user-select: none;
+                  cursor: pointer;
+                  float: left;
+                  margin: 0px 20px 20px 0px;
+                  color: #007aff;
+                  &:hover {
+                    font-weight: bold;
+                  }
+                }
+              }
+            }
+            &:hover .ri_p {
+              visibility: visible;
+              opacity: 1;
+            }
+
+            &:last-child {
+              border-bottom: none;
+            }
+            & > .tops {
+              user-select: none;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin-bottom: 14px;
+              font-weight: bold;
+            }
+            & > ul {
+              & > li {
+                margin: 0px 10px 6px 0px;
+                float: left;
+                user-select: none;
+              }
+            }
+          }
+        }
+      }
+    }
+    & > .login {
+      margin-left: 20px;
+      border-radius: 4px;
+      overflow: hidden;
+      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(10px);
+      width: 300px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      & > .title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #fff;
+        margin-top: 50px;
+        margin-bottom: 20px;
+      }
+      & > .value {
+        font-size: 14px;
+        color: #fff;
+        margin-bottom: 20px;
+      }
+      & > .ggImg {
+        border-radius: 14px;
+        overflow: hidden;
+        margin-bottom: 20px;
+        width: 211px;
+        height: 120px;
+        background-color: #fff;
+      }
+      & > .btn {
+        user-select: none;
+        cursor: pointer;
+        width: 211px;
+        border-radius: 100px;
+        color: #fff;
+        background-color: rgb(0, 122, 255);
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        transition: all 0.2s;
+        &:hover {
+          background-color: rgb(2, 106, 244);
+        }
+      }
+      & > .header_user {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding: 30px;
+        & > div {
+          display: flex;
+          align-items: center;
+          & > img {
+            width: 40px;
+            height: 40px;
+            margin-right: 6px;
+            overflow: hidden;
+            border-radius: 50%;
+          }
+          & > span {
+            color: #fff;
+            margin-right: 6px;
+          }
+          & > i {
+            color: #fff;
+          }
+        }
+      }
+      & > .header_li {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0px 30px;
+        & > div {
+          color: #fff;
+          & > img {
+            width: 60px;
+            height: 60px;
+            overflow: hidden;
+            border-radius: 50%;
+            margin-bottom: 6px;
+          }
+          & > p {
+            text-align: center;
+          }
+        }
+      }
+      & > .f_box {
+        user-select: none;
+        padding: 10px;
+        color: #fff;
+        width: 100%;
+        & > .btnsy {
+          display: inline-block;
+          border-radius: 14px;
+          padding: 4px 8px;
+          border: 1px solid #fff;
+          margin-bottom: 6px;
+        }
+        & > .title {
+          margin-bottom: 6px;
+          cursor: pointer;
+          &:hover {
+            color: #409eff;
+          }
+        }
+        & > .remark {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 6px;
+        }
+      }
+    }
+  }
+}
+.swiper-slide {
+  cursor: pointer;
+  height: 400px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.swiper-pagination {
+  text-align: right;
+  padding-right: 24px;
+
+  /deep/ .swiper-pagination-bullet {
+    background: rgba(255, 255, 255, 0.4);
+
+    &-active {
+      background: rgba(255, 255, 255, 1);
+    }
+  }
+}
+.fgx {
+  margin: 15px 0px;
+  height: 1px;
+  background-color: #eee;
+}
+</style>

src/pages/live-list/index.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="payment">
     <Header @search="search($event)"></Header>
+    <div class="bgImg" v-if="header.templateStatus == 2">
+      <div class="tits">
+        <h1>精品直播</h1>
+        <p>高品质，高精准，助你过关，VIP课程 任你挑选</p>
+      </div>
+    </div>
     <section class="section">
-      <list-option :goodsType="6" ref="listOption"></list-option>
+      <component
+        :is="currentComponent(header.templateStatus)"
+        :goodsType="6"
+        ref="listOption"
+      ></component>
     </section>
     <ToolBar></ToolBar>
     <Footer></Footer>
@@ -10,14 +20,17 @@
 </template>
 
 <script>
-import listOption from "@/components/listOption/index";
+import { mapGetters } from "vuex";
+import listOption1 from "@/components/listOption1/index.vue";
+import listOption2 from "@/components/listOption2/index.vue";
 import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 export default {
   name: "",
   components: {
-    listOption,
+    listOption1,
+    listOption2,
     Footer,
     Header,
     ToolBar
@@ -25,6 +38,27 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["header"]),
+    currentComponent: function() {
+      return function(int) {
+        var str = "";
+        switch (int) {
+          case 1:
+            str = "listOption1";
+            break;
+          case 2:
+            str = "listOption2";
+            break;
+
+          default:
+            str = "listOption1";
+            break;
+        }
+        return str;
+      };
+    }
+  },
   methods: {
     search(key) {
       this.$refs.listOption.params.goodsName = key;
@@ -34,4 +68,29 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.payment {
+  background-color: rgb(245, 247, 249);
+}
+.bgImg {
+  position: relative;
+  height: 300px;
+  background: url("../../assets/new1/课程banner.png") no-repeat center center;
+  & > .tits {
+    position: absolute;
+    left: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 240px;
+    h1 {
+      font-size: 40px;
+      font-weight: bold;
+      color: #fff;
+      margin-bottom: 14px;
+    }
+    p {
+      color: #fff;
+    }
+  }
+}
+</style>

src/router/index.js

@@ -42,7 +42,7 @@ const router = new Router({
       name: '首页',
       component: resolve => require(['@/pages/home/index'], resolve),
       meta: {
-        title: '-建造师造价师在线教育培训平台报名报考',
+        title: ' ',
         content: {
           keywords: + '-一级建造师,二级建造师,造价工程师,一级消防工程师,BIM,在线教育,职业教育,报考条件,报名时间,建造师注册,建造工程师',
           description: + '-职业教育一站式学习平台，专注一建，二建，造价工程师，一级消防工程师，BIM等工程师技能知识培训服务热线：020-87085982'