master

分支 (1)

管理

管理

master

international-schools-mobile
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="icon" href="./favicon.ico" />
<title>首页</title>
<script src="./assets/js/global.js"></script>
</head>

<body>

<div v-cloak id="app">
  <zb-main>

    <!-- banner -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banners" :key="index">
        <img :src="item" alt="">
      </van-swipe-item>
    </van-swipe>

    <!-- 国际学校资讯 -->
    <div class="index-card index-module-1">
      <index-title title="国际学校资讯" top="0.38rem" bottom="0.32rem">专注国际教育，为3-17岁适龄学生提供择校服务</index-title>
      <div class="list">
        <div class="wrapper">
          <div v-for="(item,index) in internationalSchoolInfos" :key="index" class="item">
            <div class="sub">
              <div class="icon">
                <img :src="item.icon" alt="">
              </div>
              <div class="name">{{item.name}}</div>
            </div>
            <div class="sub">
              <div class="icon">
                <img :src="item.icon" alt="">
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
    </div>
    <div class="index-card index-module-2">
      <div class="wrapper">
        <div class="navs">
          <div v-for="(item,index) in internationalSchoolTypes" :key="index" class="item" @click="internationalActiveType = item.value" :class="{ active: item.value === internationalActiveType }">
            <div class="name">{{item.name}}</div>
          </div>
        </div>
        <div class="list">
          <div v-for="(item,index) in internationalSchoolList.filter(v => v.type === internationalActiveType)" :key="index" class="item">
            <div class="image">
              <img :src="item.image" alt="">
            </div>
            <div class="infos">
              <div class="title">{{item.title}}</div>
              <div class="box">
                <div v-for="(sub,idx) in item.list" :key="idx" class="sub">{{sub}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 私立学校资讯 -->
    <div class="index-card index-module-1">
      <index-title title="私立学校资讯" bottom="0.32rem">专业招生20年，业内前沿教育服务</index-title>
      <div class="list">
        <div class="wrapper">
          <div v-for="(item,index) in privateSchoolInfos" :key="index" class="item">
            <div class="sub">
              <div class="icon">
                <img :src="item.icon" alt="">
              </div>
              <div class="name">{{item.name}}</div>
            </div>
            <div class="sub">
              <div class="icon">
                <img :src="item.icon" alt="">
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
    </div>
    <div class="index-card index-module-2">
      <div class="wrapper">
        <div class="navs">
          <div v-for="(item,index) in privateSchoolTypes" :key="index" class="item" @click="privateActiveType = item.value" :class="{ active: item.value === privateActiveType }">
            <div class="name">{{item.name}}</div>
          </div>
        </div>
        <div class="list">
          <div v-for="(item,index) in privateSchoolList.filter(v => v.type === privateActiveType)" :key="index" class="item">
            <div class="image">
              <img :src="item.image" alt="">
            </div>
            <div class="infos">
              <div class="title">{{item.title}}</div>
              <div class="box">
                <div v-for="(sub,idx) in item.list" :key="idx" class="sub">{{sub}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="margin"></div>

    <!-- 选择国际学校 -->
    <div class="index-card index-module-3">
      <index-title title="选择国际学校" href="internationalSchool.html" type="2" top="0.3rem" bottom="0.32rem">查看更多国际学校招生</index-title>
      <div class="types">
        <div class="item" v-for="(item,index) in selectInternationalSchools.types" :key="index" :class="'item-' + (index + 1)" :style="{
          backgroundColor: item.color + '20'
        }">
          <a class="label" :href="item.href" :style="{ backgroundColor: item.color + '80' }">{{item.label}}</a>
          <a class="infos" :href="item.href">
            <div class="title"  :style="{ color: item.color }">{{item.title}}</div>
            <div class="times">
              <div class="sub">报名时间：{{item.registration}}</div>
              <div v-if="item.admission" class="sub">录取时间：{{item.admission}}</div>
            </div>
          </a>
          <a class="btn" href="evaluationApplication.html" :style="{ backgroundColor: item.color + 'aa' }">报 名</a>
        </div>
      </div>
      <div class="schools clearfix">
        <a v-for="(item,index) in selectInternationalSchools.schools" :key="index" class="item" href="schoolDetail.html">
          <img :src="item.icon" alt="" class="icon">
          <div class="name">{{item.name}}</div>
        </a>
      </div>
    </div>

    <!-- 选择私立学校 -->
    <div class="index-card index-module-3 index-module-4">
      <index-title title="选择私立学校" href="privateSchool.html" type="2" top="0.3rem" bottom="0.32rem">查看更多私立学校招生</index-title>
      <div class="types">
        <div class="item" v-for="(item,index) in selectPrivateSchools.types" :key="index" :class="'item-' + (index + 1)" :style="{
          backgroundColor: item.color + '20'
        }">
          <a class="label" :href="item.href" :style="{ backgroundColor: item.color + '80' }">{{item.label}}</a>
          <a class="infos" :href="item.href">
            <div class="title"  :style="{ color: item.color }">{{item.title}}</div>
            <div class="times">
              <div class="sub">报名时间：{{item.registration}}</div>
              <div v-if="item.admission" class="sub">录取时间：{{item.admission}}</div>
            </div>
          </a>
          <a href="evaluationApplication.html" class="btn" :style="{ backgroundColor: item.color + 'aa' }">报 名</a>
        </div>
      </div>
      <div class="schools clearfix">
        <a v-for="(item,index) in selectPrivateSchools.schools" :key="index" class="item" href="schoolDetail.html">
          <img :src="item.icon" alt="" class="icon">
          <div class="name">{{item.name}}</div>
        </a>
      </div>
    </div>
    <div class="margin"></div>

    <!-- 热门专题 -->
    <div class="index-card index-module-5">
      <index-title title="热门专题" top="0.26rem" bottom="0.34rem"></index-title>
      <div class="titles">
        <img src="./assets/images/index/tag.png" alt="" class="icon">
        <div class="bt">国际学校专题</div>
        <div class="content">大家都在找最好的学校，为孩子全力以赴</div>
      </div>
      <div class="banners">
        <van-swipe style="width:100%" indicator-color="#FF2E30">
          <van-swipe-item v-for="(item,index) in popularInternationalTopics" :key="index">
            <div class="list clearfix">
              <div v-for="(sub,idx) in item" :key="idx" class="item fl">
                <div class="image">
                  <img :src="sub.src" alt="">
                </div>
                <div class="name">{{sub.name}}</div>
                <div class="view">{{sub.view}}</div>
                <a class="btn"></a>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="titles">
        <img src="./assets/images/index/tag.png" alt="" class="icon">
        <div class="bt">私立学校专题</div>
        <div class="content">大家都在找最好的学校，为孩子全力以赴</div>
      </div>
      <div class="banners">
        <van-swipe style="width:100%" indicator-color="#FF2E30">
          <van-swipe-item v-for="(item,index) in popularPrivateTopics" :key="index">
            <div class="list clearfix">
              <div v-for="(sub,idx) in item" :key="idx" class="item fl">
                <div class="image">
                  <img :src="sub.src" alt="">
                </div>
                <div class="name">{{sub.name}}</div>
                <div class="view">{{sub.view}}</div>
                <a class="btn"></a>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 热门排行榜 -->
    <div class="index-module-6">
      <div class="titles">
        <div class="line"></div>
        <div class="bt">热门排行榜</div>
        <div class="tabs">
          <div class="item" :class="{ active: activeRank === 1 }" @click="activeRank = 1">
            国<template v-if="activeRank === 1">际</template>
          </div>
          <div class="item" :class="{ active: activeRank === 2 }" @click="activeRank = 2">
            私<template v-if="activeRank === 2">立</template>
          </div>
        </div>
      </div>
      <div class="rank-bts">
        <div v-if="activeRank === 1" class="rank-bt">
          <span class="t1">国际学校排行</span>
          <span class="dot"></span>
          <span class="t2">面向全国招生</span>
        </div>
        <div v-else class="rank-bt">
          <span class="t1">私立学校排行</span>
          <span class="dot"></span>
          <span class="t2">京籍非京籍可报</span>
        </div>
        <div class="rank">0{{activeRank}}</div>
      </div>
      <div class="rank-top">
        <a class="item" href="schoolDetail.html">
          <img :src="popularSchools[1].icon" alt="" class="icon">
          <div class="name">{{popularSchools[1].name}}</div>
        </a>
        <a class="item" href="schoolDetail.html">
          <img :src="popularSchools[0].icon" alt="" class="icon">
          <div class="name">{{popularSchools[0].name}}</div>
        </a>
        <a class="item" href="schoolDetail.html">
          <img :src="popularSchools[2].icon" alt="" class="icon">
          <div class="name">{{popularSchools[2].name}}</div>
        </a>
      </div>
      <div class="rank-bottom">
        <div class="head">
          <div class="t1">排名</div>
          <div class="t2">名称</div>
          <div class="dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="list">
          <a v-for="(item,index) in popularSchools.filter((v,i) => i > 2)" :key="index" class="item" href="schoolDetail.html">
            <div class="idx">{{index + 4}}</div>
            <div class="name">{{item.name}}</div>
          </a>
        </div>
      </div>
    </div>

    <!-- 快速申请通道 -->
    <quick-apply></quick-apply>

    <div v-if="modalVisible" class="modal-container">
      <div class="bg"></div>
      <div class="box">
        <img class="close" src="./assets/images/index/close.png" alt="" @click="closeModal">
        <img class="img" src="./assets/images/index/modal.png" alt="">
      </div>
    </div>

  </zb-main>
</div>

<script type="text/babel">
  new Vue({
    el: '#app',
    data: {
      banners: [
        './assets/images/index/banner-1.png',
        './assets/images/index/banner-2.png',
        './assets/images/index/banner-3.png',
        './assets/images/index/banner-4.png',
      ],
      // 国际学校资讯
      internationalSchoolInfos: [
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
      ],
      // 国际学校类别
      internationalSchoolTypes: [
        { name: '国际幼儿园', value: 1 },
        { name: '国际小学', value: 2 },
        { name: '国际初中', value: 3 },
        { name: '国际高中', value: 4 },
      ],
      // 国际学校列表
      internationalSchoolList: [
        { type: 1, image: './assets/images/index/cover-1.png', title: '北京幼儿园2023年招生进度: 复审面试...', list: ['朝阳区哪些民办幼儿园硬件好?', '大兴区非京籍北京上幼儿园哪家比较好?'] },
        { type: 1, image: './assets/images/index/cover-2.png', title: '北京幼儿园2023年招生进度: 复审面试...', list: ['朝阳区哪些民办幼儿园硬件好?', '大兴区非京籍北京上幼儿园哪家比较好?'] },
        { type: 1, image: './assets/images/index/cover-3.png', title: '北京幼儿园2023年招生进度: 复审面试...', list: ['朝阳区哪些民办幼儿园硬件好?', '大兴区非京籍北京上幼儿园哪家比较好?'] },
        { type: 1, image: './assets/images/index/cover-4.png', title: '北京幼儿园2023年招生进度: 复审面试...', list: ['朝阳区哪些民办幼儿园硬件好?', '大兴区非京籍北京上幼儿园哪家比较好?'] },
        { type: 2, image: './assets/images/index/inter-1.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 2, image: './assets/images/index/inter-2.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 2, image: './assets/images/index/inter-3.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 2, image: './assets/images/index/inter-4.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 3, image: './assets/images/index/inter-5.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 3, image: './assets/images/index/inter-6.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 3, image: './assets/images/index/inter-7.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 3, image: './assets/images/index/inter-8.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 4, image: './assets/images/index/inter-9.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
        { type: 4, image: './assets/images/index/inter-10.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
        { type: 4, image: './assets/images/index/inter-11.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
        { type: 4, image: './assets/images/index/inter-12.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
      ],
      // 当前选中的国际学校类别
      internationalActiveType: 1,
      // 私立学校资讯
      privateSchoolInfos: [
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
        { icon: './assets/images/index/icon-0.png', name: '北京外国语大学国际院校' },
      ],
      // 私立学校类别
      privateSchoolTypes: [
        { name: '私立学校', value: 1 },
        { name: '私立小学', value: 2 },
        { name: '私立初中', value: 3 },
        { name: '私立高中', value: 4 },
      ],
      // 私立学校列表
      privateSchoolList: [
        { type: 1, image: './assets/images/index/cover-5.png', title: '北京学校2023年招生进度: 复审面试...', list: ['朝阳区哪些民办学校硬件好?', '大兴区非京籍北京上学校哪家比较好?'] },
        { type: 1, image: './assets/images/index/cover-6.png', title: '北京学校2023年招生进度: 复审面试...', list: ['朝阳区哪些民办学校硬件好?', '大兴区非京籍北京上学校哪家比较好?'] },
        { type: 1, image: './assets/images/index/cover-7.png', title: '北京学校2023年招生进度: 复审面试...', list: ['朝阳区哪些民办学校硬件好?', '大兴区非京籍北京上学校哪家比较好?'] },
        { type: 1, image: './assets/images/index/cover-8.png', title: '北京学校2023年招生进度: 复审面试...', list: ['朝阳区哪些民办学校硬件好?', '大兴区非京籍北京上学校哪家比较好?'] },
        { type: 2, image: './assets/images/index/private-1.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 2, image: './assets/images/index/private-2.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 2, image: './assets/images/index/private-3.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 2, image: './assets/images/index/private-4.png', title: '北京小学2023年招生进度: 复审面试...', list: ['朝阳区哪些民办小学硬件好?', '大兴区非京籍北京上小学哪家比较好?'] },
        { type: 3, image: './assets/images/index/private-5.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 3, image: './assets/images/index/private-6.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 3, image: './assets/images/index/private-7.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 3, image: './assets/images/index/private-8.png', title: '北京初中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办初中硬件好?', '大兴区非京籍北京上初中哪家比较好?'] },
        { type: 4, image: './assets/images/index/private-9.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
        { type: 4, image: './assets/images/index/private-10.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
        { type: 4, image: './assets/images/index/private-11.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
        { type: 4, image: './assets/images/index/private-12.png', title: '北京高中2023年招生进度: 复审面试...', list: ['朝阳区哪些民办高中硬件好?', '大兴区非京籍北京上高中哪家比较好?'] },
      ],
      // 当前选中的私立学校类别
      privateActiveType: 1,
      // 选择国际学校
      selectInternationalSchools: {
        types: [
          { label: '小学', title: '国际小学（可少量插班）', registration: '4-5月政策发布，提交申请材料', admission: '6-7月公布录取结果自行到校报到', color: '#3D4431', href: 'internationalPrimarySchool.html' },
          { label: '初中', title: '国际初中（可少量插班）', registration: '4-5月政策发布，提交申请材料', admission: '6-7月公布录取结果自行到校报到', color: '#476A8E', href: 'internationalMiddleSchool.html' },
          { label: '高中', title: '国际高中（全年均可插班）', registration: '6-7月报名最高峰，学校为自主招生', admission: '6-7月公布录取结果自行到校报到', color: '#D09E3A', href: 'internationalHighSchool.html' },
          { label: '幼儿园', title: '国际幼儿园', registration: '1-12月全年均可咨询入学', admission: '', color: '#497E70', href: 'internationalKindergartenSchool.html' },
        ],
        schools: [
          { icon: './assets/images/index/sh-1.png', name: '北京德闳学校' },
          { icon: './assets/images/index/sh-2.png', name: '北京市朝阳区赫德学校' },
          { icon: './assets/images/index/sh-3.png', name: '北京市朝阳区凯文学校' },
          { icon: './assets/images/index/sh-4.png', name: '哈罗北京' },
          { icon: './assets/images/index/sh-5.png', name: '北京市朝阳区北外同文外国语' },
          { icon: './assets/images/index/sh-6.png', name: '青苗学校' },
          { icon: './assets/images/index/sh-7.png', name: '北京爱迪国际学校' },
          { icon: './assets/images/index/sh-8.png', name: '北京外国语大学国际课程中心' },
          { icon: './assets/images/index/sh-9.png', name: '领科教育北京校区' },
        ]
      },
      // 选择私立学校
      selectPrivateSchools: {
        types: [
          { label: '小学', title: '私立小学（可少量插班）', registration: '4-5月政策发布，提交申请材料', admission: '6-7月公布录取结果自行到校报到', color: '#3D4431', href: 'privatePrimarySchool.html' },
          { label: '初中', title: '私立初中（可少量插班）', registration: '4-5月政策发布，提交申请材料', admission: '6-7月公布录取结果自行到校报到', color: '#476A8E', href: 'privateMiddleSchool.html' },
          { label: '高中', title: '私立高中（全年均可插班）', registration: '6-7月报名最高峰，学校为自主招生', admission: '6-7月公布录取结果自行到校报到', color: '#5B5B91', href: 'privateHighSchool.html' }
        ],
        schools: [
          { icon: './assets/images/index/sh-1.png', name: '北京东方红学校' },
          { icon: './assets/images/index/sh-2.png', name: '北京市通州区私立树人学校' },
          { icon: './assets/images/index/sh-3.png', name: '北京中加学校' },
          { icon: './assets/images/index/sh-4.png', name: '北京新府学外国语学校' },
          { icon: './assets/images/index/sh-5.png', name: '北京市忠德学校' },
          { icon: './assets/images/index/sh-6.png', name: '北京市私立汇佳学校' },
          { icon: './assets/images/index/sh-7.png', name: '北京市丰台区新北赋学校...' },
          { icon: './assets/images/index/sh-8.png', name: '北京市实验外国语学校' },
          { icon: './assets/images/index/sh-9.png', name: '北京怀柔索兰诺中学' },
        ]
      },
      // 热门国际学校专题
      popularInternationalTopics: [
        [
          {id:1, name:"国际学校怎么选", src:"./assets/images/home/gj-zt1.png", view:"10586"},
          {id:2, name:"艺术国际高中", src:"./assets/images/home/gj-zt2.png", view:"10586"},
          {id:3, name:"非京籍入学四证", src:"./assets/images/home/gj-zt3.png", view:"10586"},
        ],
        [
          {id:4, name:"北京国际学校排名", src:"./assets/images/home/gj-zt4.png", view:"10586"},
          {id:5, name:"国际学校入学条件", src:"./assets/images/home/gj-zt5.png", view:"10586"},
          {id:6, name:"国际学校怎么选", src:"./assets/images/home/gj-zt6.png", view:"10586"},
        ],
        [
          {id:7, name:"艺术国际高中", src:"./assets/images/home/gj-zt7.png", view:"10586"},
          {id:8, name:"非京籍入学四证", src:"./assets/images/home/gj-zt8.png", view:"10586"},
          {id:9, name:"北京国际学校排名", src:"./assets/images/home/gj-zt9.png", view:"10586"},
        ],
        [
          {id:10, name:"国际学校入学条件", src:"./assets/images/home/gj-zt10.png", view:"10586"}
        ]

      ],
      // 热门国际学校专题
      popularPrivateTopics: [
        [
          {id:1, name:"私立学校学费", src:"./assets/images/home/sl-zt1.png", view:"10586"},
          {id:2, name:"私立学校排名", src:"./assets/images/home/sl-zt2.png", view:"10586"},
          {id:3, name:"非京籍在北京上高中", src:"./assets/images/home/sl-zt3.png", view:"10586"},
        ],
        [
          {id:4, name:"私立学校和公立学校区别", src:"./assets/images/home/sl-zt4.png", view:"10586"},
          {id:5, name:"民办学校是什么意思", src:"./assets/images/home/sl-zt5.png", view:"10586"},
        ],
      ],
      // 热门排行榜
      activeRank: 1,
      // 热门排行学校列表
      popularSchoolList: [
        { icon: './assets/images/index/sh-icon-1.png', name: '青苗学校' },
        { icon: './assets/images/index/sh-icon-2.png', name: '北京爱迪国际学校' },
        { icon: './assets/images/index/sh-icon-3.png', name: '北京市朝阳区凯文学校' },
        { icon: '', name: '北京市朝阳区凯文学校' },
        { icon: '', name: '北京市朝阳区北外同文外国语学校' },
        { icon: '', name: '珠海科技学院' },
        { icon: '', name: '南宁理工学院（原桂林理工大学博文...' },
        { icon: '', name: '西安外国语大学国际学院' },
        { icon: '', name: '南京工业大学继续教育学院' },
        { icon: '', name: '哈尔滨工程大学青岛职业教育基地' },
      ],
      // 热门排行私立学校列表
      popularPrivateSchoolList: [
        { icon: './assets/images/index/sh-icon-4.png', name: '北京市丰台区新北赋学校' },
        { icon: './assets/images/index/sh-icon-5.png', name: '北京海淀区尚丽外国语学校' },
        { icon: './assets/images/index/sh-icon-6.png', name: '北京东方红学校' },
        { icon: '', name: '北京市朝阳区博雅学校' },
        { icon: '', name: '北京市实验外国语学校' },
        { icon: '', name: '三河市燕桥学校' },
        { icon: '', name: '北京市通州区私立树人学校' },
        { icon: '', name: '河北怀来闻道高级中学' },
        { icon: '', name: '益田翰德学校' },
        { icon: '', name: '北京市看谊中学' },
      ],
      modalVisible: false,
    },
    computed: {
      popularSchools() {
        return this.activeRank === 1 ? this.popularSchoolList : this.popularPrivateSchoolList
      }
    },
    methods: {
      onlineService() {
        onlineService()
      },
      closeModal() {
        this.modalVisible = false
        document.documentElement.style.overflow = ''
      }
    },
    mounted() {
      // 模拟定时展示弹窗
      setTimeout(() => {
        this.modalVisible = true
        document.documentElement.style.overflow = 'hidden'
      }, 1000)
    }
  })
</script>

</body>
</html>