'品牌故事'

components/common/titleContent.vue

@@ -25,7 +25,7 @@ export default {
 .title-content {
   .title {
     font-size: 34px;
-    font-family: PingFangSC-Semibold, PingFang SC;
+    font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 600;
     color: #262626;
   }

components/products/parent.vue

@@ -109,7 +109,7 @@ export default {
   },
   methods: {
     handleDownload() {
-      window.location.href = `https://sj.qq.com/myapp/detail.htm?apkName=com.zaojiao.app.parent`;
+      window.location.href = `https://sj.qq.com/myapp/detail.htm?apkName=com.zaojiao.app`;
     }
   }
 };

components/products/pc.vue

@@ -110,7 +110,7 @@ export default {
     .seconed {
       width: 100%;
       height: 607px;
-      background-color: #f7fbff;
+      background-color: #F7FBFF;
       padding-top: 52px;
       box-sizing: border-box;
       .label {

components/products/teacher.vue

@@ -106,7 +106,8 @@ export default {
   },
   methods: {
     handleDownload() {
-      window.location.href = "https://android.myapp.com/myapp/detail.htm?apkName=com.luojigou.teacher";
+      // 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`;
     }
   }
 };

pages/about/brand.vue

@@ -14,44 +14,103 @@
         <div class="info">
           <div class="name-en">PROFILE</div>
           <div class="name">公司简介</div>
-          <p>全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。</p>
-          <p>是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。</p>
+          <p>全球儿童思维教育专家，儿童思维教育领域中国开创者。率先创研和实践幼儿园及家庭思维游戏化教育体系，以德国优质思维教育内容为载体，填补中国思维教育领域空白，创立了行业领先的线上线下（OMO）交互的教育内容服务模式，是国际化科技思维教育的拓展者，打造具有成长型思维模式、全球胜任力的未来人才，是中国素质教育事业的发展者、创新者。</p>
+          <p>中德智慧教育围绕儿童思维策略形成期，高度整合幼儿园五大领域教育内容，通过提升幼儿思维能力，培养良好学习习惯，综合促进幼儿学习品质的发展。</p>
         </div>
         <img class="bgLogo" :src="bgLogo" alt="" srcset="">
       </div>
     </div>
 
-    <!-- <div class="company-intro">
-      <section class="company-intro-label">公司简介</section>
-      <div class="company-intro-text">
-        全球顶级儿童逻辑思维教育专家以国际教育理念为指导，推动中国学前教育事业发展填补了中国学前儿童思维教育领域空白率先领导和实践幼儿园思维游戏化教学，
-        用全球同频使用的优质思维教育内容，为0-12岁儿童培养优质思维模式，建构思维“芯”。
-        是国际化科技教育内容的创始者，以“让中国孩子幸福成长”为使命，始终以“走出去、
-        请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。
+    <!-- 思维教育 -->
+    <div class="education">
+      <title-content :title="'思维教育'" :titleSub="'THINKING EDUCATION'"></title-content>
+      <div class="e-content w1200">
+        <img src="~/assets/images/brand/eduction_img.png" alt="" srcset="">
       </div>
-    </div> -->
+    </div>
+
+    <!-- 五大领域 -->
+    <div class="field">
+      <title-content :title="'中德智慧国际思维教育五大领域'" :titleSub="'FIVE FIELDS OF SINO-GERMAN INTELLIGENT INTERNATIONAL THINKING EDUCATION'"></title-content>
+      <div class="f-content w1200">
+        <div class="fields">
+          <div class="field-container" @mouseenter="handleFieldEnter(item, index)" v-for="(item, index) in fieldData" :key="index">
+            <div :class="['field-item', index == currentFieldIndex ? 'active' : '']" :style="{'background': item.background}">
+              <img :src="item.imgUrl" alt="" :style="{ 'height': item.height + 'px', 'width': item.width + 'px'}" srcset="">
+            </div>
+          </div>
+        </div>
+        <div class="bar" :style="{'background': fieldData[currentFieldIndex].background}"></div>
+        <div class="content">
+          <div class="label" :style="{'background': fieldData[currentFieldIndex].background, 'width': fieldData[currentFieldIndex].labelWidth + 'px'}">{{fieldData[currentFieldIndex].label}}</div>
+          <div class="title" :style="{'color': fieldData[currentFieldIndex].background}">{{fieldData[currentFieldIndex].title}}</div>
+          <div class="detail" :style="{'background': fieldData[currentFieldIndex].lightBackground}">{{fieldData[currentFieldIndex].desc}}</div>
+        </div>
+        <div class="img-wrap">
+          <img v-show="index == currentFieldIndex" :src="item.fieldImg" alt="" srcset="" v-for="(item, index) in fieldData" :key="index" >
+        </div>
+      </div>
+    </div>
+
+    <!-- 35种能力提升方式  -->
+    <div class="ways">
+      <title-content :title="'35种能力提升方式'" :titleSub="'35WAYS TO IMPROVE YOUR ABILITY'"></title-content>
+      <div class="w-content w1200">
+        <div class="img-wrap">
+          <img src="~/assets/images/brand/ways_img.png" alt="" srcset="">
+        </div>
+      </div>
+    </div>
+
+    <!-- 中德国际思维教育三原则  -->
+    <div class="principles">
+      <div class="title-content">
+        <div class="title">中德国际思维教育三原则</div>
+        <div class="title-sub">THREE PRINCIPLES OF INTERNATIONAL THINKING EDUCATION BETWEEN CHINA AND GERMANY</div>
+      </div>
+      <div class="principles-box w1200">
+        <div class="principles-box-item" v-for="(item, index) in principlesData" :key="index">
+          <img :src="item.imgUrl" alt="">
+          <div class="principles-box-item-num">{{ item.number }}</div>
+          <div class="principles-box-item-label">{{ item.label }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 发展历程 -->
+    <div class="development">
+      <title-content :title="'发展历程'" :titleSub="'THE DEVELOPMENT COURSE'"></title-content>
+      <div class="d-event">
+        <div class="w1200">
+          <div class="title">
+            <img src="~/assets/images/brand/event_label.png" alt="" srcset="">
+          </div>
+          <div class="progress-bar">
+            <div class="node" data-year="2021" index="0"><div class="txt">现在</div><div class="core"></div></div>
+            <div class="line"></div>
+            <div class="node active" data-year="2016" index="1"><div class="txt">2017</div><div class="core"></div></div>
+            <div class="line"></div>
+            <div class="node" data-year="2012" index="2"><div class="txt">2012</div><div class="core"></div></div>
+            <div class="line"></div>
+            <div class="node" data-year="2007" index="3"><div class="txt">2007</div><div class="core"></div></div>
+            <div class="line"></div>
+            <div class="node" data-year="2003" index="4"><div class="txt">2003</div><div class="core"></div></div>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <!-- 大事记 -->
-    <div class="event">
+    <!-- <div class="event">
       <title-content :title="'大事记'" :titleSub="'MEMORABILIA'"></title-content>
       <div class="event-box w1200">
-        <!-- <img class="event-bgimg" src="http://res.training.luojigou.vip/Fhe0g5Z_6DRjLf3-lSDXKTff-A6Q?imageView2/0/q/50|imageslim" alt=""> -->
         <img class="event-bgimg" :src="eventImg" alt="" srcset="">
         <div
           :style="{top: 237 + 225 * item.site.y + 'px', left: 121 + 228 * item.site.x + 'px'}"
           :class="['event-box-item']"
           v-for="item in eventData"
           :key="item.id">
-          <!-- <img
-            @mouseenter="currentEventImg(item)"
-            class="yearImgurl cp"
-            :src="item.yearImgurl"
-            :srcset="`${item.yearImgurlSet[0]} 1x, ${item.yearImgurlSet[1]} 2x`"
-            alt=""> -->
             <div class="yearNumber" @mouseenter="currentEventImg(item)">{{item.id}}</div>
-            <!-- <div>{{item.eventList[0].month}}</div>
-            <div>{{item.eventList[0].thing}}</div> -->
-
             <img
               v-if="currentEventImgId === item.id"
               @mouseleave="currentEventImgId = ''"
@@ -59,20 +118,12 @@
               :src="item.eventImgurl"
               :style="{width: item.eventImgurlWidth + 'px', height:item.eventImgurlHeight + 'px'}"
               alt="">
-            <!-- <div
-              v-if="currentEventImgId === item.id"
-              :class="['color' + item.id, 'eventInfo']"
-              @mouseleave="currentEventImgId = ''">
-              <div class="eventItem" v-for="(ele, index) in item.eventList" :key="index">
-                <div class="month">{{ ele.month }} </div>
-                <div class="thing">{{ ele.thing }}</div>
-              </div>
-            </div> -->
         </div>
       </div>
-    </div>
+    </div> -->
+
     <!-- 核心团队 -->
-    <div class="kernel">
+    <!-- <div class="kernel">
       <title-content :title="'核心团队'" :titleSub="'THE CORE TEAM'"></title-content>
       <div class="kernel-box w1200">
         <div class="kernel-box-item item01">
@@ -111,9 +162,10 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
+
     <!-- 文化 -->
-    <div class="cultrue">
+    <!-- <div class="cultrue">
       <div class="title-content">
         <div class="title">我们努力践行的文化 </div>
         <div class="title-sub">THE CULTURE THAT WE TRY TO LIVE UP TO</div>
@@ -130,9 +182,10 @@
           src="http://res.training.luojigou.vip/Fj4XvDNdIw6iDP8gWQuRHKijlFwM?imageView2/0/q/50|imageslim"
           alt="">
       </div>
-    </div>
+    </div> -->
+
     <!-- 理念 -->
-    <div class="idea">
+    <!-- <div class="idea">
       <title-content :title="'我们始终秉承的理念'" :titleSub="'WE ALWAYS UPHOID THE CONCEPT'"></title-content>
       <div class="idea-box">
         <div
@@ -152,7 +205,8 @@
           </div>
         </div>
       </div>
-    </div>
+    </div> -->
+
   </div>
 </template>
 
@@ -241,7 +295,6 @@ const ideaData = Object.freeze([
       "我们把每一位客户都当作创业伙伴，期 盼在未来成长的道路上一路相伴，携手前行。",
   },
 ]);
-
 const eventData = Object.freeze([
   {
     id: 2003,
@@ -802,6 +855,93 @@ const eventData = Object.freeze([
     ]
   },
 ]);
+const fieldData = Object.freeze([
+  {
+    id: 1,
+    title: '逻辑思维',
+    label: '喜欢思考、爱上学习',
+    labelWidth: 154,
+    desc: '逻辑思维是理性认识的阶段，人运用概念、判断、推理等思维类型反映事物本质与规律的认识过程。中德智慧教育以完善的理念，独特的教学方法，运用思维启蒙、思考策略及思考技巧的阶梯式教育方式培养儿童优质思维能力。',
+    background: '#FC7E4D',
+    lightBackground: '#FEF4EB',
+    imgUrl: require('~/assets/images/brand/field_01.png'),
+    fieldImg: require('~/assets/images/brand/field_img_01.png'),
+    width: 100,
+    height: 19,
+  },
+  {
+    id: 2,
+    title: '科学探究',
+    label: '喜欢探索、热衷钻研',
+    labelWidth: 154,
+    desc: '科学是幼儿教育五大领域之一，科学的本质在于探究。中德智慧教育为学前儿童创设了国际优质的情境科学探究环境，激发幼儿探究兴趣，体验探究过程、发展初步的探究和解决问题的能力，并在探究中认识周围事物和现象，培养幼儿的科学精神和科学素养。',
+    background: '#FFC320',
+    lightBackground: '#FFF8EB',
+    imgUrl: require('~/assets/images/brand/field_02.png'),
+    fieldImg: require('~/assets/images/brand/field_img_02.png'),
+    width: 100,
+    height: 19
+  },
+  {
+    id: 3,
+    title: '语言表达',
+    label: '爱上表达、提升自信',
+    labelWidth: 154,
+    desc: '学前阶段是儿童口头语言发展的关键期，语言表达是幼儿教育五大领域的重要内容。中德智慧根据幼儿语言学习和思维发展的特点，将看、听、动、思、说五维结合，通过具象的趣味图片，让孩子对语言感兴趣。通过生活化的场景，让孩子动脑思考，动手操作，实现全景式、立体式、学习型的全新语言学习模式。',
+    background: '#11D60D',
+    lightBackground: '#F7FBF2',
+    imgUrl: require('~/assets/images/brand/field_03.png'),
+    fieldImg: require('~/assets/images/brand/field_img_03.png'),
+    width: 100,
+    height: 19
+  },
+  {
+    id: 4,
+    title: '社会与创造',
+    label: '热爱创造、追求卓越',
+    labelWidth: 154,
+    desc: '幼儿阶段是人社会性发展的重要时期。在这个时期，幼儿逐步认识周围的社会环境，内化社会行为规范；创造的一个最大的特点是有意识地对世界进行探索性劳动。中德智慧以孩子所熟悉的社会生活环境为教育内容，让教育自然的发生，关爱社会、关爱自然，发现身边的事物、现象，去适应社会生活、创新生活，促进社会性和创造力的发展。',
+    background: '#567FFF',
+    lightBackground: '#EFF4FF',
+    imgUrl: require('~/assets/images/brand/field_04.png'),
+    fieldImg: require('~/assets/images/brand/field_img_04.png'),
+    width: 125,
+    height: 19
+  },
+  {
+    id: 5,
+    title: '教育+互联+职能',
+    label: '喜欢探索、热衷钻研',
+    labelWidth: 154,
+    desc: '科学是幼儿教育五大领域之一，科学的本质在于探究。中德智慧教育为学前儿童创设了国际优质的情境科学探究环境，激发幼儿探究兴趣，体验探究过程、发展初步的探究和解决问题的能力，并在探究中认识周围事物和现象，培养幼儿的科学精神和科学素养。',
+    background: '#BC5ED1',
+    lightBackground: '#F9EFFB',
+    imgUrl: require('~/assets/images/brand/field_05.png'),
+    fieldImg: require('~/assets/images/brand/field_img_05.png'),
+    width: 185,
+    height: 19
+  }
+]);
+const principlesData = Object.freeze([
+  {
+    id: 1,
+    imgUrl: require("~/assets/images/brand/principles_01.png"),
+    number: 1,
+    label: "理解儿童，儿童视角",
+  },
+  {
+    id: 2,
+    imgUrl: require("~/assets/images/brand/principles_02.png"),
+    number: 2,
+    label: "多元化教学路径",
+  },
+  {
+    id: 3,
+    imgUrl: require("~/assets/images/brand/principles_03.png"),
+    number: 3,
+    label: "系统深度学习",
+  }
+])
 export default {
   name: "BrandPage",
   head() {
@@ -841,6 +981,9 @@ export default {
       cultrueData,
       ideaData,
       eventData,
+      fieldData,
+      principlesData,
+      currentFieldIndex: 0,
       currentEventImgId: 2003,
     };
   },
@@ -852,6 +995,9 @@ export default {
     currentEventImg(item) {
       this.currentEventImgId = item.id;
     },
+    handleFieldEnter(item, index) {
+      this.currentFieldIndex = index;
+    }
   },
 };
 </script>
@@ -961,6 +1107,236 @@ export default {
       width: 100%;
     }
   }
+  .education {
+    padding: 98px 0;
+    .e-content {
+      margin-top: 67px;
+      height: 760px;
+      background: url('~assets/images/brand/eduction_bg.png');
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 629px;
+        height: 629px;
+      }
+    }
+  }
+  .field {
+    padding: 98px 0;
+    background: #F8FBFF;
+    .f-content {
+      position: relative;
+      margin-top: 90px;
+      .fields {
+        height: 88px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .field-container {
+        width: 236px;
+        position: relative;
+      }
+      .field-item {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        border-radius: 16px 16px 0 0;
+        padding-top: 25px;
+        text-align: center;
+        height: 62px;
+        transition: bottom .3s ease 0s,height .3s ease 0s;
+        cursor: pointer;
+        &.active {
+          height: 88px;
+          bottom: -3px;
+        }
+      }
+      .bar {
+        margin-top: 3px;
+        width: 100%;
+        height: 8px;
+        transition: background .3s ease 0s;
+      }
+      .content {
+        width: 100%;
+        height: 357px;
+        background: #FFFFFF;
+        box-shadow: 7px 10px 46px 0px rgba(207, 222, 254, 0.49);
+        border-radius: 0px 0px 16px 16px;
+        padding: 45px 0 0 41px;
+        .label {
+          padding: 0 14px;
+          height: 32px;
+          line-height: 32px;
+          border-radius: 3px;
+          font-size: 14px;
+          color: #FFFFFF;
+          font-family: PingFangSC-Regular, PingFang SC;
+          transition: width .3s ease 0s,background .3s ease 0s;
+        }
+        .title {
+          margin-top: 10px;
+          height: 40px;
+          line-height: 40px;
+          font-size: 28px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          transition: color .3s ease 0s;
+        }
+        .detail {
+          margin-top: 6px;
+          padding: 18px 30px 0 16px;
+          border-radius: 10px;
+          height: 184px;
+          width: 731px;
+          font-size: 16px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #6A6978;
+          line-height: 22px;
+          transition: background .3s ease 0s;
+        }
+      }
+      .img-wrap {
+        position: absolute;
+        right: 140px;
+        bottom: 70px;
+        width: 190px;
+        height: 192px;
+        font-size: 0;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+  }
+  .ways {
+    margin: 100px 0 78px;
+    .w-content {
+      margin-top: 70px;
+    }
+    .img-wrap {
+      width: 1200px;
+      font-size: 0;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  .principles {
+    position: relative;
+    overflow: hidden;
+    padding: 95px 0 183px;
+    background: url('~assets/images/brand/cultrueBg.png');
+    background-color: #0D5CFA;
+    background-size: cover;
+    .title-content {
+      .title {
+        color: #ffffff;
+      }
+      .title-sub {
+        color: #ffffff;
+      }
+    }
+    .principles-box {
+      margin-top: 96px;
+      display: flex;
+      padding: 0 50px;
+      justify-content: space-between;
+    }
+    .principles-box-item {
+      img {
+        width: 170px;
+        height: 159px;
+      }
+      .principles-box-item-num {
+        font-size: 45px;
+        font-family: Nunito-Black, Nunito;
+        font-weight: 600;
+        color: #FFFFFF;
+        height: 57px;
+        letter-spacing: 2px;
+        text-align: center;
+        margin: 14px 0 42px;
+      }
+      .principles-box-item-label {
+        font-size: 16px;
+        font-family: PingFangSC-Regular, sans-serif;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 22px;
+        text-align: center;
+      }
+    }
+  }
+  .development {
+    padding-top: 100px;
+    .d-event {
+      padding-top: 133px;
+      margin-top: 72px;
+      height: 364px;
+      background-size: cover;
+      background-image: url('~assets/images/brand/event_bg.png');
+      background-position: center;
+      color: #fff;
+      .title {
+        font-size: 0;
+        text-align: center;
+        img {
+          width: 77px;
+          height: 29px;
+        }
+      }
+      .progress-bar{ 
+        width: 530px; 
+        margin: auto; 
+        padding-top: 70px;
+        .node{ 
+          width:24px ; 
+          height: 24px;  
+          float: left; 
+          position: relative; 
+          border-radius: 50%; 
+          background:rgba(255,255,255,0.5);
+          cursor: pointer;
+          &.active {
+            .core{  
+              background: #fff;
+            }
+          }
+        }
+        .txt{ 
+          position: absolute; 
+          font-size: 16px; 
+          top: -30px; 
+          width: 200px; 
+          text-align: center; 
+          left: 50%;  
+          margin-left: -100px;
+        }
+        .core{ 
+          width:18px; 
+          height: 18px; 
+          position: absolute; 
+          top:3px;  
+          left:3px;  
+          border-radius: 50%; 
+        }
+        .line{ 
+          float: left; 
+          height: 2px;
+          background:rgba(255,255,255,0.5); 
+          width:100px; 
+          margin-top: 11px;
+        }
+      }
+    }
+  }
   .event {
     position: relative;
     margin-top: 100px;

pages/merchants/campus/_id.vue

@@ -477,23 +477,23 @@ export default {
   // background: #f0f2f5;
 }
 
-.title-content {
-  .title {
-    font-size: 34px;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    font-weight: 600;
-    color: #262626;
-  }
-  .title-sub {
-    text-align: center;
-    margin-top: 10px;
-    font-size: 16px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #646A7E;
-    line-height: 26px;
-  }
-}
+// .title-content {
+//   .title {
+//     font-size: 34px;
+//     font-family: PingFangSC-Semibold, PingFang SC;
+//     font-weight: 600;
+//     color: #262626;
+//   }
+//   .title-sub {
+//     text-align: center;
+//     margin-top: 10px;
+//     font-size: 16px;
+//     font-family: PingFangSC-Regular, PingFang SC;
+//     font-weight: 400;
+//     color: #646A7E;
+//     line-height: 26px;
+//   }
+// }
 
 .title-zh {
   font-size: 46px;

pages/merchants/campus/index.vue

@@ -116,23 +116,23 @@ export default {
 .campus {
   .campus-main {
     margin-top: 100px;
-    .title-content {
-      .title {
-        font-size: 34px;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        font-weight: 600;
-        color: #262626;
-      }
-      .title-sub {
-        text-align: center;
-        margin-top: 10px;
-        font-size: 16px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #646A7E;
-        line-height: 26px;
-      }
-    }
+    // .title-content {
+    //   .title {
+    //     font-size: 34px;
+    //     font-family: PingFangSC-Semibold, PingFang SC;
+    //     font-weight: 600;
+    //     color: #262626;
+    //   }
+    //   .title-sub {
+    //     text-align: center;
+    //     margin-top: 10px;
+    //     font-size: 16px;
+    //     font-family: PingFangSC-Regular, PingFang SC;
+    //     font-weight: 400;
+    //     color: #646A7E;
+    //     line-height: 26px;
+    //   }
+    // }
   }
   .c-content {
     margin-top: 64px;