zhongde-website/components/products/teacher.vue

<template>
	<section class="Teacher-container">
		<div class="banner-img">
			<img
				:src="bannerImg"
				alt=""
			>
			<section class="label">教师APP</section>
		</div>
		<slot></slot>
		<slot name="label"></slot>
		<div class="content">
			<img
				class="bg-img"
				src="http://res.training.luojigou.vip/FptKxSHKx-s710eoLowQzeaOIDrZ?imageView2/0/q/50|imageslim"
				alt=""
			>
			<div class="content-list">
				<div class="content-list-one wow animate__animated animate__lightSpeedInRight">
					<div class="left">
						<div class="label">教师端APP使教师更好管 理，记录宝宝成长</div>
						<div class="desc">点击下方下载苹果端和安卓端app，立即体验</div>
						<div class="download">
							<img
								class="cp"
								src="http://res.training.luojigou.vip/Fl_0R6Bwy75ByXLhmm2b1cpknZEv?imageView2/0/q/50|imageslim"
								alt=""
							>
							<img
								class="cp"
								src="http://res.training.luojigou.vip/FvhOJGHagsZ2wuo3Fc3YAuL_z_g0?imageView2/0/q/50|imageslim"
								alt=""
							>
						</div>
					</div>
					<div class="right">
						<img
							src="http://res.training.luojigou.vip/FsvUZCVqc4Buqv5lzX-LvFfnNwip?imageView2/0/q/50|imageslim"
							alt=""
						>
					</div>
				</div>
				<div class="content-list-two wow animate__animated animate__lightSpeedInLeft">
					<div class="left">
						<img
							src="http://res.training.luojigou.vip/FizSPHT_QRzPSwGd9vTZzh40E_39?imageView2/0/q/50|imageslim"
							alt=""
						>
					</div>
					<div class="right">
						<div class="label">购买课程，更加便捷流畅的 抢课体验</div>
						<div class="desc">优化金刚区图标入口分类，丰富课程展现，节 省操作时间，提高用户体验</div>
					</div>
				</div>
				<div class="content-list-three wow animate__animated animate__lightSpeedInRight">
					<div class="left">
						<div class="label">购物商城，精简入口， 丰富内容</div>
						<div class="desc">更快速便捷购买到自己需要的书籍资料</div>
					</div>
					<div class="right">
						<img
							src="http://res.training.luojigou.vip/FuEKg4hF998JPuy742NZvgYoAiYt?imageView2/0/q/50|imageslim"
							alt=""
						>
					</div>
				</div>
				<div class="content-list-four wow animate__animated animate__lightSpeedInLeft">
					<div class="left">
						<img
							src="http://res.training.luojigou.vip/FrmwkZkCodJnyC1O8eyIUyRyZqjD?imageView2/0/q/50|imageslim"
							alt=""
						>
					</div>
					<div class="right">
						<div class="label">购物商城，展现逻辑狗的系 列产品</div>
						<div class="desc">精细的产品分类，你最短时间找到自己需要的 产品</div>
					</div>
				</div>
				<div class="content-list-five wow animate__animated animate__lightSpeedInRight">
					<div class="left">
						<div class="label">查看更加便捷的学习方式</div>
						<div class="desc">课程下载到app，随时随地自由学习</div>
					</div>
					<div class="right">
						<img
							src="http://res.training.luojigou.vip/Fr03YUbwfy49vSDg5gNyEgNMy9Th?imageView2/0/q/50|imageslim"
							alt=""
						>
					</div>
				</div>
			</div>
		</div>
	</section>
</template>

<script>
if (process.browser) {
  var { WOW } = require("wowjs");
}
export default {
	name: "TeacherPage",
	data() {
    return {
      // showList,
      bannerImg: require('~/assets/images/products/banner-app2.png')
    };
  },
  mounted() {
    if (process.browser) {
      new WOW({
        offset: 0,
        live: true,
      }).init();
    }
  },
};
</script>
<style scoped lang="scss">
.Teacher-container {
  .banner-img {
    position: relative;

    img {
      width: 100%;
      height: 595px;
    }
    .label {
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      font-size: 80px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .content {
    position: relative;
    z-index: 0;
    top: -653px;
    img {
      width: 100%;
      height: 5210px;
      object-fit: cover;
      // position: absolute;
      // z-index: 0;
    }
    .content-list {
      width: 100%;
      position: absolute;
      top: 883px;
      left: 0;
      padding: 0 344px;
      box-sizing: border-box;
      z-index: 2;
      .content-list-one {
        display: flex;
        justify-content: space-between;
        .right {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
          .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;
          }
        }
      }
      .content-list-two {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .left {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            width: 388px;
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
        }
      }
      .content-list-three {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .right {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            width: 388px;
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
        }
      }
      .content-list-four {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .left {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            width: 388px;
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
        }
      }
      .content-list-five {
        display: flex;
        justify-content: space-between;
        margin-top: 291px;
        .right {
          img {
            width: 601px;
            height: 586px;
          }
        }
        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .label {
            width: 369px;
            height: 84px;
            color: #262626;
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
          }
          .desc {
            width: 388px;
            margin-top: 42px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(58, 58, 58, 1);
          }
        }
      }
    }
  }
}

.cp {
  cursor: pointer;
}
</style>