master

分支 (1)

管理

管理

master

international-schools-mobile
/
quickPrivateSelection.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>

    <a slot="extra" href="quickSelection.html" class="btn">看国际学校</a>

    <div class="quick-module-1">
      <index-title title="优质私立院校推荐" bottom="0.44rem"></index-title>
      <div class="navs">
        <div class="nav-list">
          <div
            v-for="(item,index) in cityList"
            :key="index"
            class="item"
            :class="{ active: payload.cityId === item.value}"
            @click="payload.cityId = item.value"
          >
            {{item.label}}
          </div>
        </div>
      </div>
      <div class="lists">
        <div class="list">
          <div v-for="(item,index) in schoolTypeList" :key="index" class="item" :class="{ active: payload.schoolType === item.value }" @click="payload.schoolType = item.value">{{item.label}}</div>
        </div>
      </div>
      <div class="lists">
        <div class="list">
          <div v-for="(item,index) in courseList" :key="index" class="item" :class="{ active: payload.courseId === item.value }" @click="payload.courseId = item.value">{{item.label}}</div>
        </div>
      </div>
      <div class="lists">
        <div class="list">
          <div v-for="(item,index) in salaryList" :key="index" class="item" :class="{ active: payload.salaryId === item.value }" @click="payload.salaryId = item.value">{{item.label}}</div>
        </div>
      </div>
      <div class="school-list">
        <div v-for="(item,index) in schoolList" :key="index" class="item">
          <div class="image">
            <img :src="item.photo" alt="">
          </div>
          <div class="infos">
            <div class="name">{{item.name}}</div>
            <div class="signs">
              <span class="sign sign-1">小学</span>
              <span class="sign sign-2">初中</span>
              <span class="sign sign-3">高中</span>
              <span class="sign sign-4">幼儿园</span>
            </div>
            <div class="intro">{{item.intro}}</div>
          </div>
          <a :href="'schoolDetail.html?id=' + item.id" class="btn">进入学校</a>
        </div>
      </div>
      <div class="paginations">
        <div class="prev btn" @click="prev">
          <span></span>
        </div>
        <div class="pages">
          <div v-for="(item,index) in size" :key="index" class="page" :class="{ active: pageNo === (index + 1) }" @click="pageNo = index + 1">{{index + 1}}</div>
        </div>
        <div class="next btn" @click="next">
          <span></span>
        </div>
      </div>
    </div>

    <div class="quick-module-1 quick-module-2">
      <index-title title="最新资讯" bottom="0.5rem">有问必有答</index-title>
      <div class="news-wrapper">
        <div class="news-list">
          <div class="item item-1">
            <div class="head">
              <div class="rank">01</div>
              <div class="bt">择校必读</div>
            </div>
            <div class="box">
              <a class="sub" href="newsDetail.html?id=1"><span>【最新】</span>2023年秋季招生，耀华国际教育学校北京亦庄校区...</a>
              <a class="sub" href="newsDetail.html?id=2">【最新】2023年泛洋文华学校录取分数线是多少?</a>
              <a class="sub" href="newsDetail.html?id=3">【最新】北京新府学外国语学校排名怎么样?</a>
            </div>
          </div>
          <div class="item item-2">
            <div class="head">
              <div class="rank">02</div>
              <div class="bt">优质选校</div>
            </div>
            <div class="box">
              <a class="sub" href="newsDetail.html?id=4"><span>【最新】</span>2023年秋季招生，耀华国际教育学校北京亦庄校区...</a>
              <a class="sub" href="newsDetail.html?id=5">【最新】2023年泛洋文华学校录取分数线是多少?</a>
              <a class="sub" href="newsDetail.html?id=6">【最新】北京新府学外国语学校排名怎么样?</a>
            </div>
          </div>
          <div class="item item-3">
            <div class="head">
              <div class="rank">03</div>
              <div class="bt">百所院校</div>
            </div>
            <div class="box">
              <a class="sub" href="newsDetail.html?id=4"><span>【最新】</span>2023年秋季招生，耀华国际教育学校北京亦庄校区...</a>
              <a class="sub" href="newsDetail.html?id=5">【最新】2023年泛洋文华学校录取分数线是多少?</a>
              <a class="sub" href="newsDetail.html?id=6">【最新】北京新府学外国语学校排名怎么样?</a>
            </div>
          </div>
        </div>
      </div>
      <div class="list">
        <div v-for="(item,index) in newsList" :key="index" class="item" :style="{
          backgroundColor: item.bgColor,
          color: item.color
        }">
          <img :src="item.icon" alt="" class="icon">
          <div class="name">{{item.name}}</div>
        </div>
      </div>
    </div>

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

    <div class="index-card index-module-5" style="padding-top:0.45rem">
      <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.image" 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>

  </zb-main>
</div>

<script type="text/babel">
  new Vue({
    el: '#app',
    data: {
      payload: {
        cityId: '',
        schoolType: '',
        courseId: '',
        salaryId: ''
      },
      cityList: [
        { label: '全部', value: '' },
        { label: '天津', value: '1' },
        { label: '河北', value: '2' },
        { label: '四川', value: '3' },
        { label: '广东', value: '4' },
        { label: '上海', value: '5' },
        { label: '江苏', value: '6' },
        { label: '河南', value: '7' },
        { label: '广西', value: '8' },
        { label: '安徽', value: '9' },
        { label: '北京', value: '10' }
      ],
      schoolTypeList: [
        { label: '全部', value: '' },
        { label: '幼儿班', value: '1' },
        { label: '学前班', value: '2' },
        { label: '小学', value: '3' },
        { label: '初中', value: '4' },
        { label: '高中', value: '5' },
        { label: '大学', value: '6' }
      ],
      courseList: [
        { label: '全部', value: '' },
        { label: '香港课程', value: '1' },
        { label: '日本课程', value: '2' },
        { label: '双语课程', value: '3' },
        { label: '艺术课程', value: '4' }
      ],
      salaryList: [
        { label: '全部', value: '' },
        { label: '5万元以下', value: '1' },
        { label: '5-10万元', value: '2' },
        { label: '10-15万元', value: '3' },
        { label: '15-20万元', value: '4' },
        { label: '20万元以上', value: '5' }
      ],
      schoolList: [
        {
          id: 1,
          photo: './assets/images/quickSelection/school-img.png',
          name: '北京爱迪国际学校',
          sign: [1,2,3,4],
          intro: '黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校...'
        }, {
          id: 2,
          photo: './assets/images/quickSelection/school-img.png',
          name: '北京爱迪国际学校',
          sign: [1,2,3,4],
          intro: '黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校...'
        }, {
          id: 3,
          photo: './assets/images/quickSelection/school-img.png',
          name: '北京爱迪国际学校',
          sign: [1,2,3,4],
          intro: '黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校...'
        }, {
          id: 4,
          photo: './assets/images/quickSelection/school-img.png',
          name: '北京爱迪国际学校',
          sign: [1,2,3,4],
          intro: '黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校...'
        },
      ],
      pageNo: 1,   // 页码
      pageSize: 4, // 每页数据条数
      total: 24,   // 数据总长度
      // 最新资讯
      newsList: [
        { icon: './assets/images/quickSelection/icon-1.png', name: '非京籍读国际学校', bgColor: '#e9fbf2', color: '#2ed28a' },
        { icon: './assets/images/quickSelection/icon-2.png', name: '国际学校入学条件', bgColor: '#EDF6FF', color: '#0679D4' },
        { icon: './assets/images/quickSelection/icon-3.png', name: '国际学校摇号', bgColor: '#FEF7EC', color: '#FF9D03' },
        { icon: './assets/images/quickSelection/icon-4.png', name: '国际学校开学时间', bgColor: '#FFF1EA', color: '#FE7153' },
        { icon: './assets/images/quickSelection/icon-5.png', name: '民办国际学校', bgColor: '#ECEEFD', color: '#2E5AF4' },
        { icon: './assets/images/quickSelection/icon-6.png', name: '外籍国际学校', bgColor: '#EDF6FF', color: '#0679D4' },
        { icon: './assets/images/quickSelection/icon-7.png', name: '国际学校好不好', bgColor: '#FEF7EC', color: '#FF9D03' },
        { icon: './assets/images/quickSelection/icon-8.png', name: '中国国际学校排名', bgColor: '#E9FBF2', color: '#009E59' },
        { icon: './assets/images/quickSelection/icon-9.png', name: '转国际学校', bgColor: '#FFF1EA', color: '#FE7153' },
        { icon: './assets/images/quickSelection/icon-10.png', name: '国际学校插班', bgColor: '#ECEEFD', color: '#2E5AF4' },
        { icon: './assets/images/quickSelection/icon-11.png', name: '如何选择国际学校', bgColor: '#EDF6FF', color: '#0679D4' },
        { icon: './assets/images/quickSelection/icon-12.png', name: '国际学校入学政策', bgColor: '#E9FBF2', color: '#009E59' },
        { icon: './assets/images/quickSelection/icon-13.png', name: '中考后读国际学校', bgColor: '#FFF1EA', color: '#FE7153' },
      ],
      // 热门国际学校专题
      popularInternationalTopics: [
        [
          { image: './assets/images/index/ico-4.png', name: '私立学校怎么选', view: '10586' },
          { image: './assets/images/index/ico-5.png', name: '艺术私立高中', view: '10500' },
          { image: './assets/images/index/ico-6.png', name: '非京籍入学四证', view: '9100' },
        ],
        [
          { image: './assets/images/index/ico-4.png', name: '私立学校怎么选', view: '10586' },
          { image: './assets/images/index/ico-5.png', name: '艺术私立高中', view: '10500' },
          { image: './assets/images/index/ico-6.png', name: '非京籍入学四证', view: '9100' },
        ],
        [
          { image: './assets/images/index/ico-4.png', name: '私立学校怎么选', view: '10586' },
          { image: './assets/images/index/ico-5.png', name: '艺术私立高中', view: '10500' },
          { image: './assets/images/index/ico-6.png', name: '非京籍入学四证', view: '9100' },
        ]
      ],
    },
    computed: {
      size() {
        return Math.ceil(this.total / this.pageSize)
      }
    },
    components: {

    },
    methods: {
      onlineService() {
        onlineService()
      },
      prev() {
        if (this.pageNo === 1) {
          this.pageNo = this.size
        } else {
          this.pageNo --
        }
      },
      next() {
        if (this.pageNo === this.size) {
          this.pageNo = 1
        } else {
          this.pageNo ++
        }
      }
    },
    mounted() {

    }
  })
</script>

</body>
</html>