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;
                  this.course = data.data.course;
                  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>