fix

src/components/footer copy/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="footer">
+    <div class="container">
+      <div class="footer__header">
+        <div class="title">友情链接：</div>
+        <div class="links">
+          <a
+            v-for="(item, index) in showList(links)"
+            :key="index"
+            :href="item.url ? item.url : 'javascript:;'"
+            target="_blank"
+            >{{ item.name }}</a
+          >
+        </div>
+      </div>
+
+      <div class="footer__body">
+        <p v-for="(item, index) in footer" :key="index">{{ item.name }}</p>
+      </div>
+
+      <div class="footer__footer">
+        <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>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+// import config from "@/apis/config";
+export default {
+  name: "Footer",
+  data() {
+    return {
+    };
+  },
+  computed: {
+    ...mapGetters(["footer", "links","footerRecord"]),
+    showList: function() {
+      return function(list) {
+        let showList = [];
+        if (list) {
+          showList = list.filter(item => {
+            return item.status == 1;
+          });
+        }
+        return showList;
+      };
+    }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.footer {
+  background: #f8fafc;
+
+  &__header {
+    .title {
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #999999;
+      border-bottom: 1px solid #eeeeee;
+    }
+
+    .links {
+      padding-bottom: 14px;
+      border-bottom: 1px solid #eeeeee;
+
+      a {
+        line-height: 14px;
+        display: inline-block;
+        margin-top: 14px;
+        margin-right: 40px;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #999999;
+      }
+    }
+  }
+
+  &__body {
+    padding: 14px 0;
+    p {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #999999;
+      line-height: 24px;
+    }
+  }
+
+  &__footer {
+    padding: 22px 0;
+    p {
+      text-align: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #999999;
+      line-height: 24px;
+    }
+
+    a {
+      color: #999999;
+    }
+  }
+}
+</style>

src/components/footer/index.vue

@@ -1,24 +1,49 @@
 <template>
-  <div class="footer">
-    <div class="container">
-      <div class="footer__header">
-        <div class="title">友情链接：</div>
-        <div class="links">
-          <a
-            v-for="(item, index) in showList(links)"
-            :key="index"
-            :href="item.url ? item.url : 'javascript:;'"
-            target="_blank"
-            >{{ item.name }}</a
-          >
+  <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="footer__body">
+      <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="footer__footer">
+      <div class="f2">
         <p v-html="footerRecord.footerRecordNo"></p>
         <p v-html="footerRecord.footerTip"></p>
         <p v-if="footerRecord.tips1">{{ footerRecord.tips1 }}</p>
@@ -30,15 +55,30 @@
 
 <script>
 import { mapGetters } from "vuex";
-// import config from "@/apis/config";
 export default {
-  name: "Footer",
   data() {
     return {
+      valueList: [
+        {
+          imgUrl: "",
+          label: "人社批准",
+          value: "办学许可号：人社民4400003150014号"
+        },
+        {
+          imgUrl: "",
+          label: "十年专注",
+          value: "雄厚师资：教授、博士、工程师"
+        },
+        {
+          imgUrl: "",
+          label: "教学实力",
+          value: "服务5000余家企业，近50000余人次"
+        }
+      ]
     };
   },
   computed: {
-    ...mapGetters(["footer", "links","footerRecord"]),
+    ...mapGetters(["header","footer", "links", "footerRecord","mobile"]),
     showList: function() {
       return function(list) {
         let showList = [];
@@ -51,67 +91,114 @@ export default {
       };
     }
   },
+  methods: {}
 };
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.footer {
-  background: #f8fafc;
-
-  &__header {
-    .title {
-      height: 40px;
-      line-height: 40px;
-      font-size: 12px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #999999;
-      border-bottom: 1px solid #eeeeee;
+<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;
+          }
+        }
+      }
     }
-
-    .links {
-      padding-bottom: 14px;
-      border-bottom: 1px solid #eeeeee;
-
-      a {
-        line-height: 14px;
-        display: inline-block;
-        margin-top: 14px;
-        margin-right: 40px;
-        font-size: 12px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #999999;
+    & > .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;
 
-  &__body {
-    padding: 14px 0;
-    p {
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #999999;
-      line-height: 24px;
+    & > .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;
+        }
+      }
     }
   }
-
-  &__footer {
-    padding: 22px 0;
-    p {
-      text-align: center;
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #999999;
-      line-height: 24px;
+  & > .ftend {
+    display: flex;
+    color: #c9cdd150;
+    & > .f1 {
+      flex: 0.6;
+      & > p {
+        display: inline-block;
+        margin: 0px 24px 18px 0px;
+      }
     }
-
-    a {
-      color: #999999;
+    & > .f2 {
+      flex: 0.4;
     }
   }
 }
+.width_1200 {
+  width: 1200px;
+  padding: 36px 0px;
+  margin: 0px auto;
+}
+.fgx {
+  border-bottom: 1px dashed #c9cdd150;
+}
 </style>

src/components/goodsItem-new/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="goods_li" @click="goodsDetail(goodsItem)">
+    <img :src="$tools.splitImgHost(goodsItem.coverUrl)" alt="" />
+    <p class="title">
+      {{ goodsItem.goodsName }}
+    </p>
+    <div class="ic_l">
+      <div class="iy">{{ goodsItem.educationName }}</div>
+      <div class="iy">{{ goodsItem.businessName + goodsItem.projectName }}</div>
+      <div style="clear:both;"></div>
+    </div>
+    <div
+      class="price"
+      v-if="
+        !goodsItem.specTemplateId ||
+          (!goodsItem.maxPrice && !goodsItem.minPrice)
+      "
+    >
+      <span v-if="goodsItem.standPrice === 0">免费</span>
+      <template v-else> ￥<span>goodsItem.standPrice</span> </template>
+    </div>
+    <div class="price" v-else>
+      <span>{{ goodsItem.minPrice }}</span>
+      <template v-if="goodsItem.minPrice != goodsItem.maxPrice">
+        <i>-</i>
+        <span>{{ goodsItem.maxPrice }}</span>
+      </template>
+    </div>
+    <div class="price_del" v-if="goodsItem.linePrice">
+      原价：￥{{ goodsItem.linePrice }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    goodsItem: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * 查看商品详情
+     */
+    goodsDetail(res) {
+      if (res.goodsType === 1) {
+        this.$router.push({
+          path: "/course-detail/" + res.goodsId
+        });
+      }
+      if (res.goodsType === 2) {
+        this.$router.push({
+          path: "/bank-detail/" + res.goodsId
+        });
+      }
+
+      if (res.goodsType === 6) {
+        this.$router.push({
+          path: "/live-detail/" + res.goodsId
+        });
+      }
+      if (res.goodsType === 8) {
+        this.$router.push({
+          path: "/handout-detail/" + res.goodsId
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#goods_li {
+  margin: 0px 8px 8px 0px;
+  transition: all 0.2s;
+  cursor: pointer;
+  width: 282px;
+  height: 363px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 10px;
+  &:hover {
+    border-color: #409eff;
+  }
+  & > img {
+    width: 264px;
+    height: 155px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+  }
+  & > .title {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    margin-bottom: 20px;
+    height: 38px;
+  }
+  & > .ic_l {
+    margin-bottom: 10px;
+    & > .iy {
+      float: left;
+      color: rgb(85, 85, 85);
+      margin: 0px 4px 4px 0px;
+      background-color: rgb(235, 238, 245);
+      padding: 4px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+  }
+  & > .price {
+    color: red;
+    & > span {
+      font-size: 20px;
+      font-weight: bold;
+    }
+    margin-bottom: 20px;
+  }
+  & > .price_del {
+    text-decoration: line-through;
+    font-size: 12px;
+    color: #7f7f7f;
+  }
+}
+</style>

src/pages/home/index.vue

@@ -1,5 +1,6 @@
 <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="" />
@@ -20,7 +21,11 @@
           <!-- <p>考试日历</p> -->
         </div>
       </div>
-      <div class="second" style="background-color: rgb(114,177,255);">
+      <div
+        class="second"
+        style="background-color: rgb(114,177,255);"
+        @click="go('/course-list')"
+      >
         <div class="lf">
           <h1>课程</h1>
           <p>精准课程过关VIP<br />任你挑选</p>
@@ -28,7 +33,11 @@
         </div>
         <img src="@/assets/basket.png" alt="" />
       </div>
-      <div class="second" style="background-color: rgb(63,218,233);">
+      <div
+        class="second"
+        style="background-color: rgb(63,218,233);"
+        @click="go('/bank-list')"
+      >
         <div class="lf">
           <h1>题库</h1>
           <p>一道好题胜百道<br />在线刷题</p>
@@ -36,7 +45,11 @@
         </div>
         <img src="@/assets/basket.png" alt="" />
       </div>
-      <div class="second" style="background-color: rgb(89,184,251);">
+      <div
+        class="second"
+        style="background-color: rgb(89,184,251);"
+        @click="go('/handout-list')"
+      >
         <div class="lf">
           <h1>资料</h1>
           <p>讲义资料助你一力<br />快速获取</p>
@@ -51,28 +64,107 @@
           <img src="@/assets/basket.png" alt="" />
           <h2>推荐课程</h2>
         </div>
-        <i>更多 ></i>
+        <i @click="go('/course-list')">更多 ></i>
       </div>
       <ul class="goods_main">
-        <li class="goods_li">
+        <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="" />
-          <p class="title">
-            2023年一级建造师公路工程管理与实务（签约冲刺协议班）
-          </p>
-          <div>
-            <div>考前培训</div>
-            <div>一级建造师</div>
-          </div>
-          <div>￥3,000.00</div>
-          <div>原价：￥12345</div>
-        </li>
+          <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>
 </template>
 
 <script>
+import top from "./top.vue";
+import GoodsItemNew from "@/components/goodsItem-new/index";
+import Footer from "@/components/footer/index";
 export default {
+  components: { top, Footer, GoodsItemNew },
   data() {
     return {
       workMsg: [
@@ -81,10 +173,151 @@ export default {
         { 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: [], //推荐题库
     };
   },
-  methods: {}
+  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
+                );
+              });
+          }
+        });
+    }
+  }
 };
 </script>
 
@@ -223,7 +456,8 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding-bottom: 24px;
-      border-bottom: 1px dotted rgb(215, 215, 215);
+      border-bottom: 1px dashed rgb(215, 215, 215);
+      margin-bottom: 20px;
       & > .hbox {
         display: flex;
         align-items: center;
@@ -244,20 +478,68 @@ export default {
       }
     }
     .goods_main {
-      width: 282px;
-      height: 363px;
-      border: 1px solid #eee;
-      border-radius: 4px;
-      padding: 10px;
+      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: 264px;
-        height: 155px;
-        margin-bottom: 20px;
+        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;
+        }
       }
-      & > .title {
-        margin-bottom: 20px;
+    }
+    & > .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>

src/pages/home/top.vue

@@ -0,0 +1,368 @@
+<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>