jt360front/src/components/Homes.vue

<template>
  <div class="home">
    <!-- <div class="cover" @click="nextLead" v-if="step != 0">
        <img src="../../static/lead/1.png" class="img1" v-if="step == 1"/>
        <img src="../../static/lead/2.png" class="img2" v-if="step == 2"/>
        <img src="../../static/lead/3.png" class="img3" v-if="step == 3"/>
        <img src="../../static/lead/4.png" class="img4" v-if="step == 4"/>
        <img src="../../static/lead/5.png" class="img5" v-if="step == 5"/>
        <img src="../../static/lead/6.png" class="img6" v-if="step == 6"/>
        <img src="../../static/lead/7.png" class="img7" v-if="step == 7"/>
        <img src="../../static/lead/8.png" class="img8" v-if="step == 8"/>
        <img src="../../static/lead/9.png" class="img9" v-if="step == 9"/>
      </div> -->
    <common-top></common-top>
    <div class="all">
      <div class="top">
        <img :src="company.banner" alt="" class="tupian">
      </div>
      <div class="daohang">
        <div class="daohang1" @click="goUrl('/Exam')">
          <img src="../../static/img/kaoshi.png" alt="" class="tupian">
          <p>考试</p>
        </div>
        <div class="daohang1" @click="goUrl('/courseAll')">
          <img src="../../static/img/kecheng.png" alt="" class="tupian">
          <p>课程</p>
        </div>
        <div class="daohang1" @click="goUrl('/certificate')">
          <img src="../../static/img/shu1.png" alt="" class="tupian">
          <p>证书</p>
        </div>
        <div class="daohang1" @click="goUrl('/LiuYanList')">
          <img src="../../static/img/liuyan.png" alt="" class="tupian liuyan">
          <p>留言</p>
        </div>
      </div>
      <div class="kecheng">
        <div class="kecheng_biaoti">
          <p class="kecheng_biaotiL">课程展示</p>
          <p class="kecheng_biaotiR" @click="goUrl('/courseAll')">查看全部&emsp;<img class="fr"
              src="../../static/imgs/header_icon_right.svg" alt=""></p>
        </div>

        <div class="kechenginfo" v-for="(item, index) in course" :key="index">
          <img :src="item.thumbnail" alt="">
          <div class="kechenginfoR">
            <p class="kechenginfoR_bt">{{ item.name }}</p>
            <p class="kechenginfoR_xbt">{{ item.description }}</p>
            <div class="kechenginfoR_bot">
              <div class="kechenginfoR_botL"><img src="../../static/img/yanjing.png" alt=""
                  class="yanjing">{{ item.page_view }}人</div>
              <div class="kechenginfoR_botR" @click="goCourseDetail(item.id)">进入课程</div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import CommonTop from './common/CommonTop'
import CommonFooter from "./common/CommonFooter";
import { getStore, setStore } from '@/utils/storage'
import { Toast } from "mint-ui";
export default {
  name: "Homes",
  components: { CommonTop, CommonFooter },
  data() {
    return {
      company: {},
      course: [],
      step: 0
    }
  },
  created() {
  },
  mounted() {

    this.getPageData();
  },
  methods: {
    goCourseDetail(id) {
      this.$router.push({ path: '/courseDetail?id=' + id });
    },
    goUrl(url) {
      this.$router.push({ path: url });
    },
    getPageData() {
      let is_lead = getStore('is_lead1');
      // console.log(is_lead)
      if (is_lead == 0 || is_lead == null) {
        this.step = 1;
      }
      this.getData('/Home/home', { token: getStore('token') }).then(
        data => {
          if (data.code == 1) {
            this.company = data.data.company;
            //替换图片为https地址
            this.company.banner = this.company.banner.replace(
              "http://img",
              "https://imgs"
            );
            this.company.thumbnail = this.company.thumbnail.replace(
              "http://img",
              "https://imgs"
            );
            this.course = data.data.course;
            //替换图片为https地址
            for (let index = 0; index < this.course.length; index++) {
              this.course[index].thumbnail = this.course[index].thumbnail.replace(
                "http://img",
                "https://imgs"
              );
            }
            var courseName = this.course.map(v => { return v.name })
            //证书需要课程名称，所以用localStorage缓存
            localStorage.setItem("courseName", JSON.stringify(courseName));
          } else {
            Toast(data.msg);
          }
        },
        err => { })
    },
    nextLead() {
      if (this.step == 9) {
        this.step = 0
        // setStore('is_lead1', 1);
      } else {
        this.step++
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.all {
  padding: 5rem 0 6.5rem;
}

.top {
  width: 30rem;
  margin: auto;
  height: 18rem;
  display: flex;
  align-items: center;

  img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
  }
}

.daohang {
  width: 90%;
  height: 6rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .daohang1 {
    width: 25%;
    border-right: 1px solid #CCCCCC;
    font-size: 1.35rem;

    &:last-child {
      border: none;
    }
  }

  .liuyan1 {
    border-right: none;
  }

  .tupian {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.5rem;
  }
}

.kecheng {
  width: 90%;
  margin: auto;

  .kecheng_biaoti {
    margin: 1rem 0;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .kecheng_biaotiL {
    font-size: 1.56rem;
    font-family: MicrosoftYaHei;
    font-weight: bold;
  }

  .kecheng_biaotiR {
    font-size: 1.25rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #C5C5C5;

    .fr {
      width: 1rem;
      height: 1rem;
    }
  }

  .kechenginfo {
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #CCCCCC;

    >img {
      width: 13rem;
      height: 10rem;
      object-fit: cover;
      margin-right: 0.5rem;
    }
  }

  .kechenginfoR {
    width: 56%;
    height: 10rem;
    text-align: left;
    position: relative;
  }

  .kechenginfoR_bt {
    display: block;
    width: 100%;
    font-size: 1.67rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kechenginfoR_xbt {
    display: block;
    width: 100%;
    font-size: 1.25rem;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #5E5E5E;
    margin: 1rem 0;
    word-wrap: break-word;
  }

  .kechenginfoR_bot {
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

  .kechenginfoR_botL {
    color: #CCCCCC;
    font-size: 1.25rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .yanjing {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }

  .kechenginfoR_botR {
    width: 8rem;
    height: 3rem;
    background: #f2f2f2;
    border-radius: 2rem;
    text-align: center;
    line-height: 3rem;
    color: #D4A458;
    font-size: 1.25rem;
  }

}
</style>