'品牌故事'

components/common/banner.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="common-banner" :style="{'height': height + 'px'}">
     <img class="bg-img" :src="img" :style="{'height': height + 'px', 'max-height': height + 'px'}" alt="" srcset="">
+    <!-- <img class="bg-img" :src="img" alt="" srcset=""> -->
     <div class="bg-content">
       <slot></slot>
     </div>
@@ -34,7 +35,8 @@ export default {
   margin: 0 auto;
   overflow: hidden;
   text-align: center;
-  max-width: 1920px;
+  max-width: 2560px;
+  // max-width: 1920px;
   .bg-img {
     position: absolute;
     top: 0px;
@@ -44,7 +46,7 @@ export default {
     z-index: 1;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
-    max-width: 1920px;
+    max-width: 2560px;
     // max-height: 521px;
     // height: 521px;
     display: block;

components/products/h5.vue

@@ -1,12 +1,12 @@
 <template>
   <section class="H5-container">
-    <div class="banner-img">
+    <!-- <div class="banner-img">
       <img
         :src="bannerImg"
         alt=""
       >
       <section class="label">微信H5课堂</section>
-    </div>
+    </div> -->
     <slot></slot>
     <slot name="label"></slot>
     <div class="content">

components/products/label.vue

@@ -1,7 +1,6 @@
 <template>
   <section class="Label-container">
-    <div class="label-item wow animate__animated animate__fadeInDown">
-      <img :src="labelProps.imgUrl" alt="">
+    <div class="label-item">
       <section class="label">{{labelProps.label}}</section>
       <section class="first-desc">{{labelProps.firstText}}</section>
       <section class="secoend-desc">{{labelProps.secoendText}}</section>
@@ -10,9 +9,7 @@
 </template>
 
 <script>
-if (process.browser) {
-  var { WOW } = require("wowjs");
-}
+
 export default {
   name: "LabelPage",
   props: {
@@ -21,20 +18,13 @@ export default {
       required: true,
     },
   },
-
   mounted() {
-    if (process.browser) {
-      new WOW({
-        offset: 0,
-        live: true,
-      }).init();
-    }
   },
 };
 </script>
 <style scoped lang="scss">
 .Label-container {
-  margin-top: 106px;
+  margin: 100px 0 70px;
   display: flex;
   justify-content: center;
   .label-item {
@@ -42,28 +32,18 @@ export default {
     font-size: 16px;
     font-family: PingFangSC-Regular, sans-serif;
     font-weight: 400;
-    color: #666666;
+    color: #646A7E;
     line-height: 22px;
-
-
-    img {
-      // width: 298px;
-      // height: 56px;
-      position: absolute;
-      transform: translateX(-36%);
-    }
+    text-align: center;
     .label {
-      height: 65px;
-      font-size: 46px;
       font-family: PingFangSC-Semibold, sans-serif;
-      font-weight: 600;
       color: #333333;
-      line-height: 65px;
-      letter-spacing: 1px;
+      font-size: 34px;
+      font-weight: 600;
+      line-height: 48px;
     }
     .first-desc {
-      margin-top: 40px;
-      margin-bottom: 18px;
+      margin: 30px 0 5px;
       text-align: center;
     }
     .secoend-desc {

components/products/parent.vue

@@ -1,12 +1,12 @@
 <template>
   <section class="Parent-container">
-    <div class="banner-img">
+    <!-- <div class="banner-img">
       <img
         src="http://res.training.luojigou.vip/FlpLqC_a2wOuyJqG7LiOb2tbmUZP?imageView2/0/q/50|imageslim"
         alt=""
       >
       <section class="label">家长端APP</section>
-    </div>
+    </div> -->
     <div class="main-wrap">
       <slot></slot>
       <slot name="label"></slot>

components/products/pc.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="pc-container">
-    <div class="banner-img">
+    <!-- <div class="banner-img">
       <img
         :src="bannerImg"
         alt=""
       >
       <section class="label">PC端独立课堂</section>
-    </div>
+    </div> -->
     <slot></slot>
     <slot name="label"></slot>
     <div class="content">

components/products/teacher.vue

@@ -1,12 +1,12 @@
 <template>
 	<section class="Teacher-container">
-		<div class="banner-img">
+		<!-- <div class="banner-img">
 			<img
 				:src="bannerImg"
 				alt=""
 			>
 			<section class="label">教师APP</section>
-		</div>
+		</div> -->
     <div class="main-wrap">
       <slot></slot>
       <slot name="label"></slot>

components/products/xcx.vue

@@ -1,19 +1,14 @@
 <template>
   <section class="XcxPage-container">
-    <div class="banner-img">
-      <img :src="bannerImg" alt="">
-      <section class="label">微信小程序</section>
-    </div>
     <slot></slot>
     <slot name="label"></slot>
-    <div class="content">
+    <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=""
-            >
+              alt="">
           </div>
           <div class="right">
             <h4>轻松找到课堂入口 创造优质</h4>
@@ -44,24 +39,16 @@
 </template>
 
 <script>
-if (process.browser) {
-  var { WOW } = require("wowjs");
-}
 export default {
   name: "XcxPage",
   data() {
     return {
-      bannerImg: require("~/assets/images/products/banner-xcx.png"),
+      
     };
   },
-  mounted() {
-    if (process.browser) {
-      new WOW({
-        offset: 0,
-        live: true,
-      }).init();
-    }
+  components: {
   },
+  mounted() {},
 };
 </script>
 <style scoped lang="scss">
@@ -83,14 +70,15 @@ export default {
       transform: translate(-50%, -50%);
     }
   }
-  .content {
+
+  .xcx-content {
     width: 100%;
     height: 1792px;
 
     .content-first {
       padding: 173px 0 138px 0;
       color: #262626;
-      background-color: #f7fbff;
+      background: #F8FBFF;
       .content-first-info {
         display: flex;
         justify-content: space-between;

pages/about/brand.vue

@@ -1,12 +1,24 @@
 <template>
   <div class="Brand-container">
-    <common-banner :img="bgImg" :height="718">
+    <common-banner :img="bgImg" :height="643">
       <h2>品牌故事</h2>
     </common-banner>
 
     <!-- 公司简介 -->
     <div class="company-intro">
-      <img :src="companyImg" alt="" srcset="">
+      <div class="left">
+        <img :src="companyLeft" alt="" srcset="">
+      </div>
+      <div class="right">
+        <img :src="companyRight" alt="" srcset="">
+        <div class="info">
+          <div class="name-en">PROFILE</div>
+          <div class="name">公司简介</div>
+          <p>全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。</p>
+          <p>是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。</p>
+        </div>
+        <img class="bgLogo" :src="bgLogo" alt="" srcset="">
+      </div>
     </div>
 
     <!-- <div class="company-intro">
@@ -66,26 +78,6 @@
         <div class="kernel-box-item item05">
           <img class="team05" :src="kernelData[1].imgUrl" alt="" srcset="">
         </div>
-        <!-- <div
-          :class="['kernel-box-item']"
-          v-for="item in  kernelData"
-          :key="item.id">
-          <div class="top">
-            <img class="people-img" :src="item.imgUrl" alt="">
-            <div class="people-intro">
-              <div class="name">{{item.name}}</div>
-              <div class="position">{{item.position}}</div>
-            </div>
-            <div
-              class="intro"
-            >
-              <div class="intro-label">简历介绍</div>
-              <div class="resume">{{item.resume}}</div>
-            </div>
-            <div class="mask"></div>
-          </div>
-          <div class="bottom"></div>
-        </div> -->
       </div>
     </div>
     <!-- 文化 -->
@@ -110,10 +102,6 @@
     <!-- 理念 -->
     <div class="idea">
       <title-content :title="'我们始终秉承的理念'" :titleSub="'WE ALWAYS UPHOID THE CONCEPT'"></title-content>
-      <!-- <div class="label">
-        <div class="label-en wow animate__animated animate__fadeInDown">THE PHILOSPHY</div>
-        <div class="label-zn wow animate__animated animate__fadeInDown">我们始终秉承的理念</div>
-      </div> -->
       <div class="idea-box">
         <div
           class="idea-box-item"
@@ -532,8 +520,11 @@ export default {
   data() {
     return {
       companyImg: require('@/assets/images/brand/company.png'),
+      companyLeft: require('@/assets/images/brand/companyImg.png'),
+      companyRight: require('@/assets/images/brand/profileImg.png'),
+      bgLogo: require('@/assets/images/brand/bgLogo.png'),
       eventImg: require('@/assets/images/brand/eventImg.png'),
-      bgImg: require('@/assets/images/contact/contact_bg.png'),
+      bgImg: require('@/assets/images/brand/brandBg.png'),
       bannerImg: require('~/assets/images/about/about_brand.png'),
       kernelData,
       currentMouserEnter: false,
@@ -597,8 +588,68 @@ export default {
     }
   }
   .company-intro {
+    display: flex;
+    margin: 0 auto;
+    max-width: 2560px;
+    .left {
+      flex: 1;
+    }
+    .right {
+      position: relative;
+      flex: 1;
+      .info {
+        margin: 73px 0 0 39px;
+        max-width: 520px;;
+        position: absolute;
+        top: 0;
+        .name-en {
+          font-size: 50px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #FFFFFF;
+          letter-spacing: 1px;
+          opacity: 0.1;
+        }
+        .name {
+          position: relative;
+          font-size: 40px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #FFFFFF;
+          letter-spacing: 1px;
+          transform: translateY(-44px);
+          &::after {
+            position: absolute;
+            content: '';
+            width: 47px;
+            height: 2px;
+            border-radius: 200px;
+            background: #FFFFFF;
+            left: 6px;
+            bottom: -17px;
+            opacity: 0.8;
+          }
+        }
+        p {
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 36px;
+          margin-bottom: 50px;
+        }
+      }
+      .bgLogo {
+        position: absolute;
+        z-index: 10;
+        width: 103px;
+        height: 132px;
+        right: 187px;
+        bottom: 32px;
+      }
+    }
     img {
-      height: 662px;
+      width: 100%;
     }
   }
   .event {

pages/product/course.vue

@@ -1,12 +1,22 @@
 <template>
   <section class="Course-container">
-    <!-- <div  class="wow wow animate__animated animate__fadeInUp"> -->
-      <!-- animate__delay-.2s -->
-      <!-- class="wow animate__animated animate__rotateIn " -->
+    <common-banner
+      :img="bgImg"
+      :height="595">
+      <div class="course-header">
+        <div class="content w1200">
+          <div class="left">
+            <div class="title">全渠道经营</div>
+            <div class="subTitle">覆盖全渠道经营场景，占据每个流量入口，流量快速高效</div>
+          </div>
+          <img class="bg-logo" :src="bgLogo" alt="" srcset="">
+        </div>
+      </div>
+    </common-banner>
+
     <component :is="comName" >
       <div class="course-change">
         <div class="tabs">
-          <!-- <img src="http://res.training.luojigou.vip/FhHOYFM_rwtBGKZ9OCDgGs0PvGNw?imageView2/0/q/50|imageslim" alt=""> -->
           <div class="tags-box">
             <div :class="['tabs-item', currentTabId === tab.id ? 'active' : '']"
               @click="changeTabgs(tab)"
@@ -18,14 +28,10 @@
             </div>
           </div>
         </div>
-        <!-- <div class="line" >
-          <img :style="lineStyle" src="http://res.training.luojigou.vip/FrCpRmLbuGygO2NdcTJrbFGMSqYS?imageView2/0/q/50|imageslim" alt="">
-        </div> -->
       </div>
       <!-- <Label class="label" :labelProps="labelProps" v-solt:label /> -->
       <Label class="label" :labelProps="labelProps" />
     </component>
-   <!-- </div>  -->
   </section>
 </template>
 
@@ -36,10 +42,8 @@ import H5 from '@/components/products/h5'
 import Pc from '@/components/products/pc'
 import Parent from '@/components/products/parent'
 import Teacher from '@/components/products/teacher'
+import CommonBanner from "@/components/common/banner";
 
-if (process.browser) { 
-    var {WOW} = require('wowjs')
-  }
 // console.log(Xcx);
 const tabsData = Object.freeze([
   {
@@ -156,16 +160,10 @@ export default {
     H5,
     Pc,
     Parent,
-    Teacher
-  },
-  mounted () {
-    if (process.browser) { 
-      new WOW({
-        offset: 0,   
-        live: true
-      }).init()
-    } 
+    Teacher,
+    CommonBanner
   },
+  mounted () {},
   computed: {
     lineStyle () {
       let site = 250 * this.currentTabId  
@@ -180,6 +178,9 @@ export default {
   },
   data () {
     return {
+      bgImg: require("~/assets/images/course/banner-xcx.png"),
+      bgLogo: require("~/assets/images/course/bgLogo.png"),
+
       tabsData,
       currentTabId: 0,
       comName: 'Xcx',
@@ -217,6 +218,40 @@ export default {
 @import "~static/common/style.sass";
 
 .Course-container {
+  .course-header {
+    height: 100%;
+    padding-top: 170px;
+    .content {
+      height: 100%;
+      position: relative;
+      .left {
+        text-align: left;
+      }
+      .title {
+        font-size: 66px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 92px;
+      }
+      .subTitle {
+        margin-top: 39px;
+        font-size: 20px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 28px;
+      }
+      .bg-logo {
+        position: absolute;
+        bottom: 20px;
+        right: 46px;
+        width: 168px;
+        height: 129px;
+      }
+    }
+  }
+
   .course-change {
     position: relative;
     .tabs {
@@ -225,7 +260,7 @@ export default {
       position: relative;
       z-index: 3;
       // margin-top: 106px;
-      padding-top: 123px;
+      padding-top: 100px;
         img {
           width: 1200px;
           height: 179px;
@@ -281,11 +316,6 @@ export default {
         }
     }
   }
-  .label {
-    margin-top: 130px;
-    margin-bottom: 55px;
-  }
-
 }
 
 .cp {