zhongde-website/components/products/teacher.vue

<template>
	<section class="Teacher-container">
    <div class="main-wrap">
      <slot></slot>
      <slot name="label"></slot>
      <div class="content">
        <div class="content-list">
          <div class="bgF8">
            <div class="content-list-one content-list-item w1200">           
              <div class="left">
                <img class="firstImg" :src="firstImg" alt="" >
              </div>
              <div class="right">
                <div class="label tr">记录成长过程，发现无限可能</div>
                <div class="desc content-desc tr">点击下方下载苹果端和安卓端APP,快去下载体验吧</div>
                <div class="download">
                  <el-popover
                    placement="right"
                    trigger="hover">
                    <img class="qr_img" width="200px" :src="qrImgParent" alt="" srcset="">
                    <img
                      slot="reference"
                      class="cp downloadBtn"
                      @click="handleDownload"
                      src="https://res.training.luojigou.vip/Fl_0R6Bwy75ByXLhmm2b1cpknZEv?imageView2/0/q/50|imageslim"
                      alt=""
                    >
                  </el-popover>
                  
                  <el-popover
                    placement="right"
                    trigger="hover">
                    <img class="qr_img" width="200px" :src="qrImgParent" alt="" srcset="">
                    <img
                      slot="reference"
                      class="cp downloadBtn"
                      @click="handleDownload"
                      src="https://res.training.luojigou.vip/FvhOJGHagsZ2wuo3Fc3YAuL_z_g0?imageView2/0/q/50|imageslim"
                      alt="">
                  </el-popover>

                  <!-- <img
                    class="cp"
                    @click="handleDownload"
                    src="http://res.training.luojigou.vip/Fl_0R6Bwy75ByXLhmm2b1cpknZEv?imageView2/0/q/50|imageslim"
                    alt="">
                  <img
                    class="cp"
                    @click="handleDownload"
                    src="http://res.training.luojigou.vip/FvhOJGHagsZ2wuo3Fc3YAuL_z_g0?imageView2/0/q/50|imageslim"
                    alt=""> -->
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="content-list-two content-list-item w1200">
              <div class="left">
               <div class="label">海量教育资源</div>
                <div class="desc content-desc">助力教师和家长，高效链接家长，实现家园共育</div>
              </div>
              <div class="right">
                 <img :src="secondImg" alt="" class="secondImg">
              </div>
            </div>
          </div>
          <!-- <div class="bgF8">
            <div class="content-list-three content-list-item w1200">
              <div class="left">
                <div class="label">教师端APP使教师更好管理</div>
                <div class="desc content-desc">点击下方下载苹果端和安卓端APP,快去下载体验吧</div>
              </div>
              <div class="right">
                <img :src="threeImg" alt="" >
              </div>
            </div>
          </div>
          <div>
            <div class="content-list-four content-list-item w1200">
              <div class="left">
                <img :src="fourImg" alt="" >
              </div>
              <div class="right">
                <div class="label">连接园所，记录孩子学习成长</div>
                <div class="desc content-desc">教师、家长、孩子连接在一起，更好地记录宝宝成长</div>
              </div>
            </div>
          </div>
          <div class="bgF8">
            <div class="content-list-five content-list-item w1200">
              <div class="left">
                <div class="label">查看更加便捷的学习方式</div>
                <div class="desc content-desc">课程下载到app，随时随地自由学习</div>
              </div>
              <div class="right">
                <img :src="fiveImg" alt="" >
              </div>
            </div>
          </div>
          <div class="content-list-six content-list-item w1200">
            <div class="left">
              <img :src="sixImg" alt="" >
            </div>
            <div class="right">
              <div class="label">连接园所，记录孩子学习成长</div>
              <div class="desc content-desc">教师、家长、孩子连接在一起，更好地记录宝宝成长</div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
	</section>
</template>

<script>
export default {
	name: "TeacherPage",
	data() {
    return {
      // showList,
      bannerImg: require('~/assets/images/products/banner-app2.png'),
      firstImg: require('~/assets/images/products/teach_img_first.png'),
      secondImg: require('~/assets/images/products/teach_img_second.png'),
      threeImg: require('~/assets/images/products/teach_img_three.png'),
      fourImg: require('~/assets/images/products/teach_img_four.png'),
      fiveImg: require('~/assets/images/products/teach_img_five.png'),
      sixImg: require('~/assets/images/products/teach_img_six.png'),
      qrImgClient: require('~/assets/images/course/qr_img_client.png'),
      qrImgParent: require('~/assets/images/course/qr_img_parent.png'),
    };
  },
  mounted() {
  },
  methods: {
    handleDownload() {
      // window.location.href = "https://android.myapp.com/myapp/detail.htm?apkName=com.luojigou.teacher";
      window.location.href = `https://sj.qq.com/myapp/detail.htm?apkName=com.zaojiao.app.parent`;
    }
  }
};
</script>
<style scoped lang="scss">
.Teacher-container {
  .content-list {
    .content-desc {
      margin-top: 48px;
    }

    .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .label {
        font-size: 26px;
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 500;
        color: #333333;
        line-height: 37px;
      }
      .desc {
        height: 30px;
        font-size: 14px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color:#646A7E;
        line-height: 30px;
      }
      .secondImg {
        width: 521px;
        height: 607px;
      }
      .download {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 50px;
        >span {
          margin-top: 18px;
        }
      }
      .downloadBtn{
        width: 161px;
        height: 41px;
      }
      .tr {
        text-align: right;
      }
    }
  
    .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .label {
        font-size: 26px;
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 500;
        color: #333333;
        line-height: 37px;
      }
      .desc {
        width: 388px;
        font-size: 14px;
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        color:#646A7E;
      }
      img {
        width: 666px;
        height: 642px;
        vertical-align: middle;
      }
      .firstImg {
        width: 667px;
        height: 618px;
      }
    }

    .content-list-item {
      padding: 45px 0;
      display: flex;
      justify-content: space-between;
    }
    .content-list-one {
      .left {
        .download {
          margin-top: 81px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          img {
            width: 161px;
            height: 41px;
          }
        }
        .download img:first-child {
          margin-bottom: 25px;
        }
      }
    }
  }
}

</style>