zhongde-website/pages/news/index.vue

<template>
	<section class="New-container">
        <div class="banner-img">
          <img src="http://res.training.luojigou.vip/FuUVL0GQcR7AOBVPqJ-NdPqk4yps?imageView2/0/q/50|imageslim" alt="">
          <div class="new-info">
            <div class="left">
              <img src="http://res.training.luojigou.vip/Fgfeo_GpH9h7tu1j3xfKnim_IlhF?imageView2/0/q/50|imageslim" alt="">
            </div>
            <div class="right">
              <div class="submit-area">
                <div class="label">
                  加盟申请
                </div>
                <div class="phone-num">
                  <img src="http://res.training.luojigou.vip/FmUjRlN7yn8o8HkXV21yOAJt-2C0?imageView2/0/q/50|imageslim" alt="">
                  <div class="num">
                    400-6807300
                  </div>
                </div>
                <div class="form">
                  <el-input placeholder="姓名"></el-input>
                  <el-input placeholder="手机号"></el-input>
                  <el-input placeholder="邮箱地址"></el-input>
                  <el-input placeholder="加盟城市"></el-input>
                  <img class="cp" src="http://res.training.luojigou.vip/Fk2Fz3gN8jDHAHiQaOBJI3KZSyHx?imageView2/0/q/50|imageslim" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 输出平台 -->
        <div class="education">
          <div class="top ">
            <img class="bg-img wow animate__animated animate__fadeInDown" src="http://res.training.luojigou.vip/Ft9M1i5hGV_NEYh-dvUhIhDvpMQ4?imageView2/0/q/50|imageslim" alt="">
            <div class="label wow animate__animated animate__fadeInDown">
              <img class="logo wow animate__animated animate__fadeInDown" src="http://res.training.luojigou.vip/Fmzni1iBgNG7OKMenDAm1JPkntZY?imageView2/0/q/50|imageslim" alt="">
              <section class="text wow animate__animated animate__fadeInDown">全国优质教育内容输出平台</section>
              <div class="line"></div>
              <img class="town wow animate__animated animate__fadeInDown" src="http://res.training.luojigou.vip/Fn5qkcUe3liE0XuppMhBYs5hItg5?imageView2/0/q/50|imageslim" alt="">
            </div>
          </div>
          <div class="bottom">
            <div class="text">
              逻辑狗·探索小镇是中德智慧教育集团旗下北京逻辑狗教育科技有限公司创立的培训机构思维教育品牌加盟。
              定位于专注3.4岁-12岁儿童优质思维能力养成的场景式、游戏化体验中心，为3岁~12岁儿童提供国际品质的全球同频思维训练课程与服务。
              16年品牌深耕、1100万中国家庭的选择标注化、精细化运营，赋能合作伙伴，共同成就具有影响力的儿童思维教育品牌。
            </div>
          </div>

        </div>
        <!-- 优势 -->
        <div class="advantage">
          <div class="label wow animate__animated animate__zoomInDown">
            逻辑狗·探索小镇的五大优势
          </div>
          <div class="advantage-show">
            <div :class="['advantage-item wow animate__animated', index < 2 ? 'animate__rotateInDownLeft' : index > 2 ? ' animate__rotateInDownRight' : '']" v-for="(imgurl, index ) in advantageImg" :key="imgurl"> 
                  <img :src="imgurl" alt="">
            </div>
          </div>
        </div>
        <!-- 体验 -->
        <div class="exprience">
            <div class="label wow animate__animated animate__fadeInDown">
              <div class="label-en">
                SERVICE
              </div>
              <div class="label-zn">
                体验店八项服务支持
              </div>
            </div>
            <div class="bg-img">
              <img src="http://res.training.luojigou.vip/Fgx5y0lTvWmAyzj29S0vIB1gteFW?imageView2/0/q/50|imageslim" alt="">
            </div>

            <div class="exprience-box">
                <div :class="['exprience-item wow animate__animated', item.id % 2 == 0 ? 'animate__lightSpeedInLeft' : 'animate__lightSpeedInRight']"
                :style="{'margin-top': item.id % 2 === 0 ? '49px' : ''}"
                   v-for="item in exprienceImg" :key="item.id">
                  <img :src="item.imgUrl" alt="">
                  <section>{{item.label}}</section>
                </div>
            </div>
        </div>
        <!-- 校区 -->
        <div class="campus">

        </div>
        <!-- 风采 -->
        <div class="show cp">
             <div class="label wow animate__animated animate__fadeInDown">
              <div class="label-en">
                SHOW
              </div>
              <div class="label-zn">
                校园风采
              </div>
            </div>
            <div class="show-box">
              <div class="show-item" v-for="item in showImg" :key="item.id">
                <div class="ani-box"> 
                  <img :src="item.imgUrl" alt="">
                  <div class="text">
                    {{item.label}}
                  </div>
                </div>
              </div>
            </div>
        </div>
        <!-- 加盟流程 -->
        <div class="join">
              <div class="label wow animate__animated animate__fadeInDown">
                <div class="label-en">
                  FLOW
                </div>
                <div class="label-zn">
                  加盟流程
                </div>
            </div>
            <div class="flow">
              <div class="line-box">
                <div class="line"></div>
                <div class="join-box">
                  <div class="join-box-item wow animate__animated animate__zoomInDown" v-for="item in joinData" :key="item.id">
             
                    <img 
                        
                          :style="{width: item.id === 0 ? '34px' : '22px', 
                                  height:  item.id === 0 ? '34px' : '22px',
                                  marginTop: item.id !== 0 ? '5px' : 0,
                                  marginBottom: item.id !== 0 ? '7px' : 0,
                                  }" 
                          :src="item.id === 0 ? joinImg.hot : joinImg.cold" alt="">
                    <div class="join-box-step" :style="{}">
                      <span class="join-box-step-num">{{item.id + 1}}</span>步
                    </div>
                    <div class="join-box-label">
                      {{item.label}}
                    </div>
                  </div>
                </div>
              </div>
              
            </div>
            <div class="join-btn cp">
              <img src="http://res.training.luojigou.vip/Fot92LmuZDqWjSXLQPWxln_-4DsH?imageView2/0/q/50|imageslim" alt="">
            </div>
        </div>
        <!-- 加入我们 -->
        <div class="join-us">
            <div class="label">
              <div class="label-en">
                JOIN US
              </div>
              <div class="label-zn">
                加入我们
              </div>
            </div>
            <div class="line"></div>
            <div class="join-us-form">
              <el-input placeholder="姓名:"></el-input>
              <el-input placeholder="手机号:"></el-input>
              <el-input placeholder="邮箱地址:"></el-input>
              <el-input placeholder="加盟城市:"></el-input>
              <img src="http://res.training.luojigou.vip/FipijbS16GJiwUe4oaWOBWjFxGLO?imageView2/0/q/50|imageslim" alt="">
              <div class="address">
                地址：北京市朝阳区高碑店乡西店记忆文创小镇E6号楼一层102号
              </div>
            </div>
        </div>
  </section>
</template>

<script>
if (process.browser) { 
    var {WOW} = require('wowjs')
  }
const advantageImg = Object.freeze([
  'http://res.training.luojigou.vip/Fgzcc1GuXoorH_5NX1BmNQ8sCpMo?imageView2/0/q/50|imageslim',
  'http://res.training.luojigou.vip/FhtDRiZ4jCYsC2xCyV9uOilQRNqh?imageView2/0/q/50|imageslim',
  'http://res.training.luojigou.vip/Ftr-z7dlfG8WhtqYnzu08qlRz8sb?imageView2/0/q/50|imageslim',
  'http://res.training.luojigou.vip/FpQyT6VRsHQVGfmXSO1kuWrYx0Jh?imageView2/0/q/50|imageslim',
  'http://res.training.luojigou.vip/FrgZIm21VIRX62rYSg-5Osx32Jkx?imageView2/0/q/50|imageslim',
])

const exprienceImg = Object.freeze([
  {
    id: 0,
    imgUrl: 'http://res.training.luojigou.vip/FoHy9wMCaPPpgzaDmwQvFwRdM1Za?imageView2/0/q/50|imageslim',
    label: '中台技术支持'
  },
  {
    id: 1,
    imgUrl: 'http://res.training.luojigou.vip/FiumJtB1GJfyCphjUdlYrLTXYB6J?imageView2/0/q/50|imageslim',
    label: '品牌&产品培训'
  },
  {
    id: 2,
    imgUrl: 'http://res.training.luojigou.vip/FlhyrFbDqh4rUzE39K3O8tJ0RjdP?imageView2/0/q/50|imageslim',
     label: '人员招聘支持'
  },
  {
    id: 3,
    imgUrl: 'http://res.training.luojigou.vip/FgDk_mDwKmS97_IIzdGl0fNVTE4k?imageView2/0/q/50|imageslim',
    label: '市场物料支持'
  },
  {
    id: 4,
    imgUrl: 'http://res.training.luojigou.vip/Fm3NVf5OAfxaV3KUwoh25hSC0gim?imageView2/0/q/50|imageslim',
    label: '运营服务支持'
  },
  {
    id: 5,
    imgUrl: 'http://res.training.luojigou.vip/Fqhl44i_bmz2fslvMe-UcnhgPMFJ?imageView2/0/q/50|imageslim',
    label: '选址评估支持'
  },
  {
    id: 6,
    imgUrl: 'http://res.training.luojigou.vip/Fg9yIinUo_5yOjaqpRspcotcB92f?imageView2/0/q/50|imageslim',
    label: '售后服务支持'
  },
  {
    id: 7,
    imgUrl: 'http://res.training.luojigou.vip/Fixkl6HyDOOPy-1ZU1WN7wSTIXTl?imageView2/0/q/50|imageslim',
    label: '增值项目拓展'
  },
])

const showImg = Object.freeze([
  {
    id: 0,
    imgUrl: 'http://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim',
    label: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱'
  },
  {
    id: 1,
    imgUrl: 'http://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim',
    label: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱'
  },
  {
    id: 2,
    imgUrl: 'http://res.training.luojigou.vip/FmWD-hqllLJjHbFlAT9QeoZUjKxd?imageView2/0/q/50|imageslim',
    label: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱'
  },
])
const joinImg = Object.freeze(
  {
    hot: 'http://res.training.luojigou.vip/Fv5jDvDdHaVLQThclUJhhoIL9ee8?imageView2/0/q/50|imageslim',
    cold: 'http://res.training.luojigou.vip/FisuM3wRDkZawF3sXOCzsyaIGCuA?imageView2/0/q/50|imageslim'
  }
)
const joinData = Object.freeze([
  {
    id: 0,
    label: '总部项目考察'
  },
  {
    id: 1,
    label: '签署合作协议'
  },
  {
    id: 2,
    label: '门店选址评估'
  },
  {
    id: 3,
    label: '人员招募筹备'
  },
  {
    id: 4,
    label: '门店选址评估'
  },
  {
    id: 5,
    label: '门店正式营业'
  },
  {
    id: 6,
    label: '总部运营支持'
  },
])
export default {
  name: 'NewContainer',
  mounted () {
    if (process.browser) { 
      new WOW({
          offset: 0,   
          live: true
      }).init()
    } 
  },
  data() {
    return {
      advantageImg,
      exprienceImg,
      showImg,
      joinImg,
      joinData,
    }
  },
  components: {
  },
  head() {
    return {
    };
  },
  async asyncData({ params, store }) {
    
  },
  methods: {
    
  },
};
</script>

<style scoped lang="scss">

.New-container {
  width: 100%;
  .banner-img {
        position: relative;
        img {
             width: 100%;
            height: 851px;
        }
        .new-info {
          width: 1194px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .left {
            img {
              width: 469px;
              height: 76px;
            }
          }
          .right {
            width: 327px;
            height: 450px;
            background-color: #fff;
            padding: 34px 38px 12px 39px;
            .submit-area {
              .label {
                font-size:14px;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(91,95,93,1);
                margin-bottom: 7px;
              }
              .phone-num {
                display: flex;
                align-items: center;
                img {
                  width: 22px;
                  height: 22px;
                  display: block;
                  margin-right: 15px;
                }
                .num {
                  font-size: 26px;
                  font-family: PingFangSC-Medium,PingFang SC;
                  font-weight: bold;
                  color:rgba(0,0,0,1);
                }
              }
              .form {
                margin-top: 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                .el-input {
                  width: 250px;
                  height: 44px;
                  margin-bottom: 23px;
                }
                img {
                  width: 176px;
                  height: 55px;

                }
              }
            }
          }
      }
    }

    .education {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-top: 60px;
      padding-top: 106px;
      padding-bottom: 96px;
      box-sizing: border-box;
      position: relative;
      height: 488px;
      .top {
        position: relative;
        // display: flex;
        width: 100%;
        height: 134px;
        border-bottom: 1px solid rgba(216,216,216,1);
        .bg-img {
          width: 449px;
          height: 59px;
          position: absolute;
          left: 502px;
          // transform: translateX(-50%);
        }
        .label {
          position: absolute;
          top: 10px;
          left: 548px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 946px;
          height: 81px;
          .logo {
            width: 40px;
            height: 40px;
            display: block;
          }
          .text {
            font-size:58px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(38,38,38,1);
            margin-left: 10px;
          }
          .line {
            width:1px;
            height:54px;
            background:rgba(153,153,153,1);
            opacity:0.4146;
            margin-left: 30px;
            margin-right: 37px;
          }
          .town {
            width: 93px;
            height: 63px;
          }
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .text {
          text-indent: 2em;
          width: 1200px;
          font-size:22px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(110,111,117,1);
        }
      }
    }
    .advantage {
      width: 100%;
      height:625px;
      background:rgba(247,251,255,1);
      padding: 73px 340px 143px;
      .label {
        font-size:58px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:rgba(35,106,250,1);
        text-align: center;
      }
      .advantage-show {
        margin-top: 48px;
        display: flex;
        .advantage-item {
          width: 272px;
          height: 280px;
          margin-left: -30px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .exprience {
      width: 100%;
      height: 746px;
      padding-top: 80px;
      position: relative;
      box-sizing: border-box;
      .label {
        position: absolute;
        width: 600px;
        left: 662px;
        .label-en {
          font-size:78px;
          font-family:PingFangSC-Semibold,PingFang SC;
          font-weight:600;
          color:rgba(35,106,250,1);
          opacity: 0.16;
        }
        .label-zn {
          font-size:58px;
          font-family:PingFangSC-Semibold,PingFang SC;
          font-weight:600;
          color:rgba(38,38,38,1);
          position: absolute;
          top: 45px;
          left: 8px;
        }
      }
      .bg-img {
       
        img {
          width: 710px;
          height: 320px;
          position: absolute;
          left: 850px;
          bottom: 0;
          z-index: -1;
        }
      }
      .exprience-box {
        display: flex;
        position: absolute;
        top: 321px;
        left: 344px;
        .exprience-item {
          height: 176px;
          position: relative;
          img {
            width: 160px;
            height: 172px;
            object-fit: cover;
          }
          section {
            width: 160px;
            font-size:18px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight: bold;
            color:#000;
            position: absolute;
            top: 86%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            letter-spacing: .5px;
          }
        }
      }

    }
    .campus {
      height: 2052px;
      background:rgba(240,255,246,1);
      opacity:0.24;
    }
    .show {
      width: 100%;
      position: relative;
      height: 672px;
      background:rgba(247,251,255,1);
      padding-top: 70px;
      box-sizing: border-box;
      .label {
        position: absolute;
        width: 600px;
        left: 763px;
        .label-en {
          font-size:78px;
          font-family:PingFangSC-Semibold,PingFang SC;
          font-weight:600;
          color:rgba(35,106,250,1);
          opacity: 0.16;
        }
        .label-zn {
          font-size:58px;
          font-family:PingFangSC-Semibold,PingFang SC;
          font-weight:600;
          color:rgba(38,38,38,1);
          position: absolute;
          top: 45px;
          left: 32px;
        }
      }
      .show-box {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 281px;
        left: 50%;
        transform: translateX(-50%);
        .show-item {
          .ani-box {
            width: 396px;
            height: 327px;
            border-radius: 20px;
            padding: 18px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: transparent;
            box-sizing: border-box;
            img {
              width: 360px;
              height: 191px;
            }
            .text {
              margin-top: 30px;
              width: 340px;
              font-size:20px;
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight:400;
              color:rgba(51,51,51,1);
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
          
        }
        .ani-box:hover {
          background-color: #fff;
          transition: background-color 4s;
          box-shadow:0px 4px 20px 0px rgba(150,150,150,0.22);
          border-bottom: 1px solid blue;
          box-sizing: border-box;
        }
      }
    }
    .join {
        width: 100%;
        height: 700px;
        padding-top: 70px;
        box-sizing: border-box;
        position: relative;
        .label {
            position: absolute;
            width: 600px;
            left: 763px;
          .label-en {
            font-size:78px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(35,106,250,1);
            opacity: 0.16;
          }
          .label-zn {
            font-size:58px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(38,38,38,1);
            position: absolute;
            top: 45px;
            left: 32px;
          }
        }
        .flow {
          width: 100%;
          position: absolute;
          top: 254px;
          .line-box {
            position: relative;
            .line {
              width: 100%;
              height: 2px;
              background-color: #D8D8D8;
            }
            .join-box {
              width: 1118px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: absolute;
              top: -16px;
              left: 50%;
              transform: translateX(-50%);
              .join-box-item {
                height: 145px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                img {

                }
                .join-box-step {
                  color: #999999;
                  font-size: 20px;
                  margin-bottom: 16px;
                  .join-box-step-num {
                    color: #262626;
                    font-size: 50px;
                    margin-right: 5px;
                  }
                }
                .join-box-label {
                  font-size:18px;
                  font-family:PingFangSC-Regular,PingFang SC;
                  font-weight:400;
                  color:rgba(153,153,153,1);
                }
              }
            }
          }
        }
        .join-btn {
          position: absolute;
          bottom: 126px;
          left: 50%;
          transform: translateX(-50%);
          img {
            width: 373px;
            height: 68px;
          }
        }
    }
    .join-us {
      height: 936px;
      background: url('http://res.training.luojigou.vip/FhPOU-rQqK2TdIDILiLM5f17xb2V?imageView2/0/q/50|imageslim') no-repeat;
      background-size: 100% 100%;
      position: relative;
        .label {
            position: absolute;
            width: 600px;
            top: 80px;
            left: 763px;
          .label-en {
           font-size:78px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(255,255,255,1);
            opacity: .16;
          }
          .label-zn {
            font-size:58px;
            font-family:PingFangSC-Semibold,PingFang SC;
            font-weight:600;
            color:rgba(255,255,255,1);
            position: absolute;
            top: 45px;
            left: 32px;
          }
        }
        .line {
          width: 1200px;
          height: 1px;
          background:rgba(216,216,216,1);
          position: absolute;
          top: 240px;
          left: 50%;
          transform: translateX(-50%);
        }
        .join-us-form {
          width: 700px;
          position: absolute;
          top: 284px;
          left: 50%;
          transform: translateX(-50%);
          .el-input {
            width: 700px;
            height: 80px;
            margin-bottom: 32px;
            /deep/ .el-input__inner {
              height: 70px;
            }
          }
          img {
            width: 700px;
            height: 68px;
            margin-top: 41px;
            margin-bottom: 27px;
          }
          .address {
            font-size:22px;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(255,255,255,1);
            text-align: center;
          }
        }
    }
}

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