zhongde-website/pages/merchants/campus/_id.vue

<template>
  <div class="container">
    <common-banner :img="bgImg" :height="718">
      <div class="content-wrap">
        <div class="content w1200">
          <div class="left title">中德校区详情</div>
          <div class="right">
            <no-ssr>
              <submit-form></submit-form>
            </no-ssr>
          </div>
        </div>
      </div>
    </common-banner>

    <!-- 校区 -->
    <div class="town one w1200">
      <div class="title-content">
        <h2 class="title">{{ getCity(type).name || '' }}校区</h2>
        <div class="title-sub">{{ getCity(type).pingy || '' }}</div>
      </div>
      <div class="town-content">
        <h3 class="town-title">逻辑狗·搜索小镇</h3>
        <div class="town-content-info">
          <div class="content-left">
            <img src="~/assets/images/campus/icon_adderss@2x.png" alt="" srcset="">
            <div class="content-left-info">
              <div class="info-address">
                <p class="area">{{ town.area }}</p>
                <p class="address">{{ town.address }}</p>
              </div>
              <p class="info-desc">
                {{ town.content }}
              </p>
              <div class="info-mission">
                <p class="text">教育使命</p>
                <p class="slogan">{{ town.mission1 }} </p>
                <p class="slogan">{{ town.mission2 }}</p>
              </div>
            </div>
          </div>
          <div class="content-right">
            <div class="town-img">
              <img :src="town.imgUrl" alt="">
            </div>
            <div class="circle_top_r">
              <img src="~/assets/images/campus/circle_big.png" alt="">
            </div>
            <div class="circle_bottom_l">
              <img src="~/assets/images/campus/circle_small.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 校区环境/精彩活动 -->
    <div class="main">
      <div class="environment">
        <div class="title-content">
          <div class="title-zh">校区环境</div>
        </div>
        <div class="main-wrap w1200">
          <div class="e-content">
            <div class="e-content-left">
              <img :src="environment[0].imgUrl" alt="" srcset="">
            </div>
            <div class="e-content-right">
              <div class="e-right-top">
                <div class="right-top-1"><img :src="environment[1].imgUrl" alt="" srcset=""></div>
                <div class="right-top-2"><img :src="environment[2].imgUrl" alt="" srcset=""></div>
              </div>
              <div class="e-right-bottom">
                <div class="right-bottom-1"><img :src="environment[3].imgUrl" alt="" srcset=""></div>
                <div class="right-bottom-2"><img :src="environment[4].imgUrl" alt="" srcset=""></div>
              </div>
            </div>
            <div class="circle">
              <img src="~/assets/images/campus/circle_active.png" alt="" srcset="">
            </div>
          </div>

          <!-- 精彩活动 -->
          <div class="active">
            <div class="title-content">
              <div class="title-zh">精彩活动</div>
            </div>
            <div class="active-content">
              <ul class="list">
                <li class="active-item" v-for="(item, index) in activeData" :key="index">
                  <img :src="item.imgUrl" alt="" srcset="">
                  <div class="info">
                    <p class="title">{{ item.title }}</p>
                    <p class="desc">{{ item.desc }}</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonBanner from '@/components/common/banner';
import SubmitForm from '@/components/common/form';

const townList = [
  {
    area: '湖北省·襄阳市',
    address: '盈港东路8300弄佳乐苑社区商铺',
    content: '逻辑狗·探索小镇是襄阳市首家专注于儿童优质思维能力养成的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全球同频思维训练课程与服务。课程综合了以思维游戏、逻辑数学、探究科学为主的丰富内容。通过多种思维游戏体验帮助孩子获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生。',
    mission1: '让发现成为自然，让探索成为习惯',
    mission2: '培养思维能力，塑造学习品质',
    imgUrl: require('~/assets/images/campus/xq1-1.jpg')
  },
  {
    area: '湖北省·武汉市',
    address: '盈港东路8300弄佳乐苑社区商铺',
    content: '逻辑狗·探索小镇是专注于儿童优质思维能力养成的游戏式体验中心，坐落于武汉市中央文化区汉街旁，交通便利，环境优雅，课程内容非常丰富，有思维游戏、逻辑数学、探究科学等。在这里小朋友可以在安静的环境中学习，在快乐的氛围中游戏，在老师悉心的照料下茁壮成长！',
    mission1: '让发现成为自然，让探索成为习惯',
    mission2: '培养思维能力，塑造学习品质',
    imgUrl: require('~/assets/images/campus/xq2-1.jpg')
  },
  {
    area: '河北省·唐山市',
    address: '盈港东路8300弄佳乐苑社区商铺',
    content: '逻辑狗.探索小镇诞生于2018年9月15日，它是唐山市首家专注于儿童思维逻辑教育能力养成的游戏式体验中心。在开业初期就备受关注，从事幼儿（3-6）思维教育，侧重幼儿思维运用培养，帮助孩子在成长初期早接触，早锻炼，早养成好习惯。让幼儿思维具备敏锐性，深刻性，灵动性，批判性，独特性。逻辑狗.探索小镇有三大特色课程：思维游戏，探究科学，逻辑数学。通过丰富的游戏方案，情景式的参与互动课程，帮助孩子爱动脑，勤思考，深追究，从而养成思考的好习惯即良好的思维模式。',
    mission1: '让发现成为自然，让探索成为习惯',
    mission2: '培养思维能力，塑造学习品质',
    imgUrl: require('~/assets/images/campus/xq3-1.jpg')
  },
  {
    area: '福建省·莆田市',
    address: '盈港东路8300弄佳乐苑社区商铺',
    content: '逻辑狗探索小镇坐落在交通便利的中高档社区和商业中心附近，镇内设备均采用标准化配备，800平方以上的教学和游戏空间，配有专用的逻辑狗思维教室，科学实验室，机器人教室及绘本馆等。打造了结合西方理性思维与东方智慧的场景式、游戏化儿童思维养成中心，为3—12岁儿童提供具有国际品质的全球同频思维训练课程与服务，让孩子们在舒适、轻松的环境下体验，给孩子一颗强大的思维芯！',
    mission1: '让发现成为自然，让探索成为习惯',
    mission2: '培养思维能力，塑造学习品质',
    imgUrl: require('~/assets/images/campus/xq4-1.jpg')
  }
]
const environmentList = [
  {
    list: [
      {
        imgUrl: require('~/assets/images/campus/1-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/1-2.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/1-3.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/1-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/1-2.jpg'),
      }
    ]
  },
  {
    list: [
      {
        imgUrl: require('~/assets/images/campus/2-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/2-2.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/2-3.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/2-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/2-2.jpg'),
      }
    ]
  },
  {
    list: [
      {
        imgUrl: require('~/assets/images/campus/3-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/3-2.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/3-3.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/3-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/3-2.jpg'),
      }
    ]
  },
  {
    list: [
      {
        imgUrl: require('~/assets/images/campus/4-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/4-2.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/4-3.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/4-1.jpg'),
      },
      {
        imgUrl: require('~/assets/images/campus/4-2.jpg'),
      }
    ]
  }
]
const activeList = [
  {
    list: [
      {
        title: '见过超大只的逻辑狗吗？',
        desc: '想和他一起合影吗？那就来逻辑狗探索小镇吧',
        imgUrl: require('~/assets/images/campus/hc-1.jpg'),
      },
      {
        title: '万圣节是宝贝们喜欢的节日',
        desc: '他们可以变成自己喜欢的样子 在小镇度过这开心而又难忘的一天',
        imgUrl: require('~/assets/images/campus/hc-2.jpg'),
      },
      {
        title: '万圣节能变成自己喜欢的样子',
        desc: '和家长们一起做游戏可真开心 小镇的丰富的活动可真多啊',
        imgUrl: require('~/assets/images/campus/hc-3.jpg'),
      },
      {
        title: '幼儿园师资培训教师培训圆满结束',
        desc: '老师们都带着满满的收获准备回去啦 当然要留下这具有纪念意义的一刻',
        imgUrl: require('~/assets/images/campus/hc-4.jpg')
      },
      {
        title: '引流活动 家长微笑的看着宝贝',
        desc: '看来大家都做对咯 今天在逻辑狗的收获满满',
        imgUrl: require('~/assets/images/campus/hc-5.jpg')
      },
      {
        title: '引流活动',
        desc: '积极的举手回答问题认真的听题目 是在逻辑狗养成的良好学习习惯',
        imgUrl: require('~/assets/images/campus/hc-6.jpg')
      }
    ]
  },
  {
    list: [
      {
        title: '逻辑狗·探索小镇武汉中心一周岁',
        desc: '在周年庆典上小朋友玩的非常开心 会员小朋友收到了非常暖心的小礼物',
        imgUrl: require('~/assets/images/campus/hc-7.jpg')
      },
      {
        title: 'jingle bells, jingle bells, jingle all the way......',
        desc: '小朋友收到了最好的礼物！ 那就是爸爸妈妈亲手写的圣诞贺卡~',
        imgUrl: require('~/assets/images/campus/hc-8.jpg')
      },
      {
        title: '逻辑狗·探索小镇的圣诞活动来啦~',
        desc: '圣诞老爷爷背着大大的口袋来啦! 来给大家发礼物啦~',
        imgUrl: require('~/assets/images/campus/hc-9.jpg')
      },
      {
        title: '祝你生日快乐，祝你生日快乐~',
        desc: '逻辑狗·探索小镇的会员生日会来咯~ 在生日歌中，小朋许下了美好的愿望',
        imgUrl: require('~/assets/images/campus/hc-10.jpg')
      },
      {
        title: '武商亚贸广场的小小夏令营来啦~',
        desc: '参加小小夏令营的小朋友 从此就爱上了逻辑狗~',
        imgUrl: require('~/assets/images/campus/hc-11.jpg')
      },
      {
        title: '铛铛铛！我在小镇学习一年啦！',
        desc: '小会员在欢声笑语中迎来了毕业典礼 这里有奖状，期盼，还有美好的祝福',
        imgUrl: require('~/assets/images/campus/hc-12.jpg')
      }
    ]
  },
  {
    list: [
      {
        title: '简洁明亮的教室、实验室',
        desc: '舒适温馨的学习环境 学员的学习必定事半功倍',
        imgUrl: require('~/assets/images/campus/hc-13.jpg')
      },
      {
        title: '我们开业啦',
        desc: '小宝贝来和小魔女一起做游戏吧！开心！！！',
        imgUrl: require('~/assets/images/campus/hc-14.jpg')
      },
      {
        title: '多元化的课程，切合学员的不同需求~',
        desc: '确保最佳的师资力量提供服务 务求最完善的硬件设施及学习空间',
        imgUrl: require('~/assets/images/campus/hc-15.jpg')
      },
      {
        title: '丰富的玩教具~',
        desc: '锻炼小朋友的手眼脑口协调能力 增强趣味性，让孩子爱上小镇',
        imgUrl: require('~/assets/images/campus/hc-16.jpg')
      },
      {
        title: '万圣节活动~',
        desc: '看我们百变的灯笼 你也想拥有吗？~',
        imgUrl: require('~/assets/images/campus/hc-17.jpg')
      },
      {
        title: '祖国，生日快乐！',
        desc: '我们一起为祖国庆祝生日！和妈妈一起动手，好幸福！',
        imgUrl: require('~/assets/images/campus/hc-18.jpg')
      }
    ]
  },
  {
    list: [
      {
        title: '喜庆的万圣节',
        desc: '请把您的目光锁定在我们的舞台上 让我们来共享这奇妙的万圣夜之旅！',
        imgUrl: require('~/assets/images/campus/hc-19.jpg')
      },
      {
        title: '探索、求知、自主的游戏',
        desc: '早已让老师和孩子们身临其境到忘形 满脸的笑容，一定是爱上了逻辑思维~',
        imgUrl: require('~/assets/images/campus/hc-20.jpg')
      },
      {
        title: '圣诞老公公',
        desc: '给我们带来神秘的礼物哦 你们心动了吗？',
        imgUrl: require('~/assets/images/campus/hc-21.jpg')
      },
      {
        title: '逻辑狗外出活动啦！',
        desc: '粉丝们的热情挡不住呀！期待下次与你们相约在探索小镇哦！',
        imgUrl: require('~/assets/images/campus/hc-22.jpg')
      },
      {
        title: '母亲节，一个充满爱的节日',
        desc: '在小镇我们一起见证了 这份母爱的伟大！',
        imgUrl: require('~/assets/images/campus/hc-23.jpg')
      },
      {
        title: '全国思维能力挑战大赛开赛啦！',
        desc: '孩子们正在紧张认真的比拼中 当然要留下这激动人心的一幕',
        imgUrl: require('~/assets/images/campus/hc-24.jpg')
      }
    ]
  }
]
export default {
  data() {
    return {
      bgImg: require('@/assets/images/merchants/bg.png'),
      town: {
        area: '上海市·青浦区1',
        address: '盈港东路8300弄佳乐苑社区商铺',
        content: '逻辑狗·探索小镇是襄阳市首家专注于儿童优质思维能力养成 的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全 球同频思维训练课程与服务。通过多种思维游戏体验帮助孩子 获得卓越的思维能力，养成优秀的思维习惯，成就未来幸福人生',
        mission1: '让发现成为自然，让探索成为习惯',
        mission2: '培养思维能力，塑造学习品质',
        imgUrl: require('~/assets/images/campus/town_img.png')
      },
      environment: [],
      activeList: [
        {
          title: '逻辑狗·探索小镇武汉中心一周岁',
          desc: '在周年庆典上小朋友玩的非常开心 会员小朋友收到了非常暖心的小礼物',
          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
        },
        {
          title: 'jingle bells, jingle bells, jingle all the way......',
          desc: '小朋友收到了最好的礼物！ 那就是爸爸妈妈亲手写的圣诞贺卡~',
          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-2.jpg'
        },
        {
          title: '逻辑狗·探索小镇的圣诞活动来啦~',
          desc: '圣诞老爷爷背着大大的口袋来啦! 来给大家发礼物啦~',
          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
        },
        {
          title: '祝你生日快乐，祝你生日快乐~',
          desc: '逻辑狗·探索小镇的会员生日会来咯~ 在生日歌中，小朋许下了美好的愿望',
          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
        },
        {
          title: '武商亚贸广场的小小夏令营来啦~',
          desc: '参加小小夏令营的小朋友 从此就爱上了逻辑狗~',
          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
        },
        {
          title: '铛铛铛！我在小镇学习一年啦！',
          desc: '小会员在欢声笑语中迎来了毕业典礼 这里有奖状，期盼，还有美好的祝福',
          imgUrl: 'http://zaojiao.net/public/static/index/images/xq/hc-1.jpg'
        }
      ]
    }
  },
  components: {
    CommonBanner,
    SubmitForm
  },
  head() {
    return {
      title: "逻辑狗官网-中德智慧教育",
      meta: [
        {
          name: "keywords",
          hid: "keywords",
          content: `逻辑狗官网、逻辑狗教材、 幼儿园教材、逻辑狗课程、逻辑狗思维训练课程、儿童思维教育、0-12岁儿童`,
        },
        {
          name: "description",
          hid: "description",
          content: `逻辑狗官方网站，专为0-12岁儿童设计的思维训练课程，中德智慧教育，全球优质教育内容输出平台`,
        },
      ],
    };
  },
  asyncData({isDev, route, store, env, params, query, req, res, redirect, error}) {
    const type = params.id;
    const index = type - 1;
    const town = townList[index];
    const environment = environmentList[index].list;
    const activeData = activeList[index].list;
    return {
      type,
      town,
      environment,
      activeData
    }
  },
  mounted() {
    
  },
  methods: {
    getCity(type) {
      let key = parseInt(type);
      switch (key) {
        case 1:
          return {
            name: '襄阳',
            pingy: 'XIANGYANG'
          }
          break;

        case 2:
          return {
            name: '武汉',
            pingy: 'WUHAN'
          }
          break;

        case 3:
          return {
            name: '唐山',
            pingy: 'TANGSHAN'
          }
          break;

        case 4:
          return {
            name: '莆田',
            pingy: 'PUTIAN'
          }
          break;
      
        default:
          return ''
          break;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~static/common/style.sass";

.container {
  // background: #f0f2f5;
}

.title-zh {
  font-size: 46px;
  font-family: PingFangSC-Semibold, sans-serif;
  font-weight: 600;
  color: #333333;
  text-align: center;
}

.header {
  position: relative;
  // background: url('~assets/images/campus/detail_bg.png') 100% 100% no-repeat;
  background-image: url('~assets/images/campus/detail_bg.png');
  background-size: center center;
  background-repeat: no-repeat;
  height: 595px;
  h3 {
    height: 92px;
    font-size: 66px;
    font-family: PingFangSC-Semibold, sans-serif;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 92px;
  }
}

.town {
  // padding: 190px 0 142px;
  margin-top: 100px;
  .title-en {
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
  }
  .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;
    }
  }
  .town-content {
    margin-top: 38px;
    .town-title {
      width: 230px;
      height: 40px;
      line-height: 40px;
      font-size: 28px;
      font-family: PingFangSC-Semibold, sans-serif;
      font-weight: 600;
      color:#262626;
    }
    .town-content-info {
      display: flex;
      margin-top: 38px;
      .content-left {
        display: flex;
        margin-right: 50px;
        .content-left-info {
          margin-left: 23px;
        }
        .info-address {
          .area {
            font-size: 16px;
            font-family: PingFangSC-Medium, sans-serif;
            font-weight: 500;
            color: #747576;
          }
          .address {
            font-size: 16px;
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            color: #747576;
            line-height: 22px;
            margin-top: 8px;
          }
        }
        .info-desc {
          margin-top: 30px;
          font-size: 18px;
          width: 500px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          color: #262626;
          line-height:30px;
        }
        .info-mission {
          font-size: 18px;
          margin-top: 20px;
          .text {
            color: #262626;
            font-family:PingFangSC-Medium, sans-serif;
            font-weight:500;
            margin-bottom: 6px;
            font-size: 18px;
            line-height: 25px;
          }
          .slogan {
            font-family: PingFangSC-Regular, sans-serif;
            font-size: 18px;
            font-weight: 400;
            color: #3475FC;
            line-height: 30px;
            letter-spacing: 0.45px;
          }
        }
        img {
          width: 20px;
          height: 23px;
        }
      }
    }
    .content-right {
      position: relative;
      // background: url('~assets/images/campus/circle_big.png'),
      //             url('~assets/images/campus/circle_small.png');
      // background-position: top -88px right -28px, bottom -82px left 28px;
      // background-repeat: no-repeat no-repeat;
      .town-img {
        position: relative;
        z-index: 10;
        font-size: 0;
        img {
          border-radius: 10px;
        }
      }
      .circle_top_r {
        position: absolute;
        top: -62px;
        right: 0px;
      }
      .circle_bottom_l {
        position: absolute;
        bottom: -52px;
        left: 56px;
      }
    }
  }
}

.main {
  padding-bottom: 172px;
  .main-wrap {
    background: url('~assets/images/campus/content_bg.png') no-repeat;
  }
}

.environment {
  .e-content {
    position: relative;
    display: flex;
    margin-top: 146px;
    // background: url('~assets/images/campus/circle_active.png') no-repeat bottom -120px left -14px;
    img {
      object-fit: cover;
      height: 100%;
      width: 100%;
      border-radius: 10px;
    }
    .e-content-left {
      width: 577px;
      height: 433px;
      margin-right: 9px;
      z-index: 10;
      box-shadow: 0px 5px 21px 0px #E8F3F3;
    }
    .e-content-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .e-right-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right-top-1 {
          width: 385px;
          height: 217px;
          margin-right: 11px;
          box-shadow: 0px 5px 21px 0px #E8F3F3;
        }
        .right-top-2 {
          width: 217px;
          height: 225px;
          box-shadow: 0px 5px 21px 0px #E8F3F3;
        }
      }
      .e-right-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .right-bottom-1 {
          width: 307px;
          height: 204px;
          margin-right: 11px;
          box-shadow: 0px 5px 21px 0px #E8F3F3;
        }
        .right-bottom-2 {
          width: 293px;
          height: 204px;
          box-shadow: 0px 5px 21px 0px #E8F3F3;
        }
      }
    }
    .circle {
      position: absolute;
      bottom: -100px;
      left: -14px;
    }
  }
}

.active {
  margin-top: 192px;
  .active-content {
    margin-top: 160px;
  }
  .list {
    .active-item {
      width: 373px;
      font-size: 0;
      margin: 0 40px 42px 0;
      display: inline-block;
      box-shadow: 0px 5px 21px 0px #E8F3F3;
      transition: transform .3s ease-in-out;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:hover {
        transform: translate3d(0,-8px,0);
      }
      img {
        border-radius: 10px 10px 0px 0px;
        object-fit: cover;
        width: 100%;
      }
      .info {
        background-color: #ffffff;
        background-image: url('~assets/images/campus/active_bg_01.png'),
                          url('~assets/images/campus/active_bg_02.png');
        background-repeat: no-repeat no-repeat;
        background-position: left 34px top 80px, left 210px top 54px;
        border-radius: 0 0 10px 10px;
        padding: 33px 36px 64px;
        height: 174px;
        .title {
          font-size: 20px;
          font-family: PingFangSC-Medium, sans-serif;
          font-weight: 500;
          color: #1F241E;
          line-height: 28px;
          overflow: hidden;//超出一行文字自动隐藏 
          text-overflow: ellipsis;//文字隐藏后添加省略号
          white-space: nowrap;//强制不换行
        }
        .desc {
          margin-top: 10px;
          font-size: 14px;
          font-family: PingFangSC-Regular, sans-serif;
          font-weight: 400;
          color: #333333;
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

</style>