|
|
@@ -1,215 +1,216 @@
|
|
|
-<template>
|
|
|
- <section class="XcxPage-container">
|
|
|
- <slot></slot>
|
|
|
- <slot name="label"></slot>
|
|
|
- <div class="xcx-content">
|
|
|
- <div class="content-first">
|
|
|
- <div class="content-first-info w1200">
|
|
|
- <div class="left">
|
|
|
- <img
|
|
|
- src="~/assets/images/products/xcx_img_first.png"
|
|
|
- alt="">
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <h4>轻松找到课堂入口 创造优质 学习体验</h4>
|
|
|
- <div class="desc">微信首页任务栏等60+小程序入口,让10亿用户 轻松发现你</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-seconed">
|
|
|
- <div class="content-seconed-info w1200">
|
|
|
- <div class="left">
|
|
|
- <h4>轻松找到课堂入口 创造优质 学习体验</h4>
|
|
|
- <div class="desc">微信首页任务栏小程序入口,让用户轻松发现你</div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <img
|
|
|
- src="~/assets/images/products/xcx_img_second.png"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="content-first">
|
|
|
- <div class="content-first-info w1200">
|
|
|
- <div class="left">
|
|
|
- <h4>轻松找到课堂入口 创造优质学习体验</h4>
|
|
|
- <div class="desc">微信首页任务栏等60+小程序入口,让10亿用户轻松发现你</div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <img src="~/assets/images/products/h5_img_first.png" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-seconed">
|
|
|
- <div class="content-seconed-info w1200">
|
|
|
- <div class="left">
|
|
|
- <img src="~/assets/images/products/h5_img_second.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <h4>一键转发,让课堂在微信中自由传播</h4>
|
|
|
- <div class="desc">课堂可分享至微信朋友圈、微信社群等等位置,便于用户分享好物,闲余赚取佣金</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- name: "XcxPage",
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
- components: {
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.XcxPage-container {
|
|
|
- .banner-img {
|
|
|
- position: relative;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 595px;
|
|
|
- }
|
|
|
- .label {
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
- font-size: 80px;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .xcx-content {
|
|
|
- width: 100%;
|
|
|
- h4 {
|
|
|
- font-size: 26px;
|
|
|
- font-family: PingFangSC-Medium, sans-serif;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- line-height: 37px;
|
|
|
- }
|
|
|
- .desc {
|
|
|
- margin-top: 44px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 28px;
|
|
|
- }
|
|
|
- .content-first {
|
|
|
- padding: 50px 0 50px 0;
|
|
|
- color: #262626;
|
|
|
- background: #F8FBFF;
|
|
|
- .content-first-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .left {
|
|
|
- img {
|
|
|
- width: 666px;
|
|
|
- height: 642px;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .content-seconed {
|
|
|
- padding: 50px 0 50px 0;
|
|
|
- color: #262626;
|
|
|
- .content-seconed-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- }
|
|
|
- .right {
|
|
|
- img {
|
|
|
- width: 666px;
|
|
|
- height: 642px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: 1792px;
|
|
|
- h4 {
|
|
|
- // font-size: 30px;
|
|
|
- font-size: 26px;
|
|
|
- font-family: PingFangSC-Medium, sans-serif;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- line-height: 37px;
|
|
|
- }
|
|
|
- .desc {
|
|
|
- margin-top: 54px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- font-weight: 400;
|
|
|
- color: #666666;
|
|
|
- line-height: 28px;
|
|
|
- }
|
|
|
- .content-first {
|
|
|
- padding: 136px 0 118px 0;
|
|
|
- color: #262626;
|
|
|
- background-color: #f7fbff;
|
|
|
- .content-first-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .right {
|
|
|
- img {
|
|
|
- width: 666px;
|
|
|
- height: 642px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- }
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .content-seconed {
|
|
|
- .content-seconed-info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- padding: 99px 0 201px 0;
|
|
|
- color: #262626;
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .left {
|
|
|
- img {
|
|
|
- width: 666px;
|
|
|
- height: 642px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <section class="XcxPage-container">
|
|
|
+ <slot></slot>
|
|
|
+ <slot name="label"></slot>
|
|
|
+ <div class="xcx-content">
|
|
|
+ <div class="content-first">
|
|
|
+ <div class="content-first-info w1200">
|
|
|
+ <div class="left">
|
|
|
+ <img
|
|
|
+ src="~/assets/images/products/xcx_img_first.png"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <h4>轻松找到课堂入口 创造优质 学习体验</h4>
|
|
|
+ <div class="desc">微信首页任务栏等60+小程序入口,让10亿用户 轻松发现你</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-seconed">
|
|
|
+ <div class="content-seconed-info w1200">
|
|
|
+ <div class="left">
|
|
|
+ <h4>轻松找到课堂入口 创造优质 学习体验</h4>
|
|
|
+ <div class="desc">微信首页任务栏小程序入口,让用户轻松发现你</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <img
|
|
|
+ src="~/assets/images/products/xcx_img_second.png"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="content-first">
|
|
|
+ <div class="content-first-info w1200">
|
|
|
+ <div class="left">
|
|
|
+ <h4>轻松找到课堂入口 创造优质学习体验</h4>
|
|
|
+ <div class="desc">微信首页任务栏等60+小程序入口,让10亿用户轻松发现你</div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <img src="~/assets/images/products/h5_img_first.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-seconed">
|
|
|
+ <div class="content-seconed-info w1200">
|
|
|
+ <div class="left">
|
|
|
+ <img src="~/assets/images/products/h5_img_second.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <h4>一键转发,让课堂在微信中自由传播</h4>
|
|
|
+ <div class="desc">课堂可分享至微信朋友圈、微信社群等等位置,便于用户分享好物,闲余赚取佣金</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "XcxPage",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.XcxPage-container {
|
|
|
+ .banner-img {
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 595px;
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ font-family: PingFangSC-Semibold, sans-serif;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 80px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .xcx-content {
|
|
|
+ width: 100%;
|
|
|
+ h4 {
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: PingFangSC-Medium, sans-serif;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 37px;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ margin-top: 44px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .content-first {
|
|
|
+ padding: 50px 0 50px 0;
|
|
|
+ color: #262626;
|
|
|
+ background: #F8FBFF;
|
|
|
+ .content-first-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ img {
|
|
|
+ width: 666px;
|
|
|
+ height: 642px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-seconed {
|
|
|
+ padding: 50px 0 50px 0;
|
|
|
+ color: #262626;
|
|
|
+ .content-seconed-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ img {
|
|
|
+ width: 666px;
|
|
|
+ height: 642px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 1792px;
|
|
|
+ h4 {
|
|
|
+ // font-size: 30px;
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: PingFangSC-Medium, sans-serif;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 37px;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ margin-top: 54px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, sans-serif;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 28px;
|
|
|
+ }
|
|
|
+ .content-first {
|
|
|
+ padding: 136px 0 118px 0;
|
|
|
+ color: #262626;
|
|
|
+ background-color: #f7fbff;
|
|
|
+ .content-first-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ img {
|
|
|
+ width: 666px;
|
|
|
+ height: 642px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-seconed {
|
|
|
+ .content-seconed-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ padding: 99px 0 201px 0;
|
|
|
+ color: #262626;
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ img {
|
|
|
+ width: 666px;
|
|
|
+ height: 642px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|