gxytj/xztszzy/views/gaoxiao.html

<template>
    <layout group="高校探索" title="高校探索" @search="search">
        <div class="c-page">
            <div class="c-card">
                <h2 style="background: #00ACFC;"> 高校信息大全</h2>
                <div class="c-body">
                    <p>具有招生资格高校自寻大全</p>
                    <p>全面掌握大学信息，</p>
                    <p>助力学子金榜题名！</p>
                </div>
                <router-link to="/views/school/list">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
            <div class="c-card">
                <h2 style="background: #027EFB;">“985工程”大学名单</h2>
                <div class="c-body">
                    <p>
                        985工程是指为创建世界一流大学和高水平大学而实施的工程，截至2013年年末，“985工程”共有39所高校，教育部表示“985工程”的规模已经稳定，将不会再新增高校，引入动态竞争机制，在一流的行业特色型大学中遴选实施“985工程优势学科创新平台”项目以重点打造世界一流学科群。
                    </p>
                </div>
                <router-link to="/views/school/list1">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
            <div class="c-card">
                <h2 style="background: #00ACFC;">“211”工程高校名单</h2>
                <div class="c-body">
                    <p>
                        211工程，是为了面向21世纪，迎接世界新技术革命的挑战，中国政府集中中央、地方各方面的力量，重点建设100所左右的高等学校和一批重点学科、专业使其达到世界一流大学的水平的建设工程。全国入选“211工程”高校一共有116所。
                    </p>
                </div>
                <router-link to="/views/school/list2">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
            <div class="c-card">
                <h2 style="background: #027EFB;">“双一流”高校大全</h2>
                <div class="c-body">
                    <p>
                        双一流是世界一流大学和一流学科建设，教育部印发的《教育部2016年工作要点》中要求，加快世界一流大学和一流学科建设，制订“双一流”实施办法。专家认为，启动实施的“统筹推进两个一流”战略，是中国大学冲刺国际前列、打造顶尖学府的“冲锋号”。以下是教育部公布的双一流建设高校和建设学科名单。
                    </p>
                </div>
                <router-link to="/views/school/list3">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
            <div class="c-card">
                <h2 style="background: #00ACFC;">中央部委直属高校</h2>
                <div class="c-body">
                    <p>
                        国务院部门直属高等学校，简称“中央部属高校”，是指国务院组成部门及其直属机构在全国范围内直属管理一批高等院校。我国中央部属高校共116所。其中，教育部直属高校有75所，工业和信息化部有8所，国家民族事务委员会有6所，公安部5所，民用航空总局4所，其它大多部委都是1所高校。
                    </p>
                </div>
                <router-link to="/views/school/list4">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
            <div class="c-card">
                <h2 style="background: #027EFB;">教育部直属高校</h2>
                <div class="c-body">
                    <p>
                        中华人民共和国教育部直属高等学校指由中华人民共和国教育部直属管理的一批高等学校，是中央部门直属高等学校的重要组成部分。教育部直属的普通高校共有75所。其中北京市最多，共有24所， 以下是具体名单。
                    </p>
                </div>
                <router-link to="/views/school/list5">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
            <div class="c-card">
                <h2 style="background: #00ACFC;">中外合作办学</h2>
                <div class="c-body">
                    <p>
                        中外合作办学大学，是指中国教育机构与外国教育机构合作办学的大学，以“中外合作办学”模式办学的大学。目前我国中外合作办学机构和项目已达2282个，其中本科以上机构和项目1196个。目前本站主要展示介绍我国已有具独立法人资格的中外合作办学大学。
                    </p>
                </div>
                <router-link to="/views/school/list6">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
            <div class="c-card">
                <h2 style="background: #027EFB;">示范性高职</h2>
                <div class="c-body">
                    <p>
                        国家示范性高等职业院校建设计划是为了提升高等职业院校的办学水平，中华人民共和国教育部启动了被称为“高职211”的“百所示范性高等职业院校建设工程”。首批立项建设有28所院校，第二批立项建设的有42所院校，第三批立项建设的有30所院校，共100所。这些示范性高职是一个省高职院校的典范，也基本上是一个省的最强高职。
                    </p>
                </div>
                <router-link to="/views/school/list7">
                    <img class="c-svg c-svg-click" src="images/click.svg" />
                    <div>点击前往</div>
                </router-link>
            </div>
        </div>
        <div>
            <message type="warning" v-if="isShow" v-model:info="info"  @ok="closeTip"/>
        </div>
    </layout>
</template>
<script>
    export default {
        data: function () {
            return {
                isShow:false,
                info:'请输入搜索关键字！',
                url: '/Site/GetSchoolTags',
                model: {
                    pageIndex: parseInt(this.$route.query.pageIndex) || 1,
                    pageSize: parseInt(this.$route.query.pageSize) || 20,
                }
            };
        },
        mounted: function () {
//            store.state.query = this.$route.query.query;
        },
        methods: {
            closeTip:function (status) {
                this.isShow=  status;
            },
            search: function () {
                if(store.state.query!==''){
                    this.$router.push('/views/school/list?query=' + store.state.query);
                }else {
                    this.isShow=true;
                }

            }
        }
    }
</script>
<style>
    .c-page {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-content: space-evenly;
    }
    .c-card {
        box-sizing: border-box;
        width: 23%;
        height: 30.2vh;
        background-color: #EEF8FF;
        border: .1vh solid #BEE1FF;
        position: relative;
        padding-bottom: 8vh;
    }

        .c-card h2 {
            display: inline-block;
            box-sizing: border-box;
            width:100%;
            font-size: 2vh;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            padding: 0 2vh;
            line-height: 6vh;
            color: #fff;
            margin: 0;
        }

        .c-card .c-body {
            box-sizing: border-box;
            position: absolute;
            top: 6vh;
            bottom: 8vh;
            left: 0;
            right: 0;
            height: 16vh;
            padding:1vh 2vh 0 2vh;
            line-height:3vh;
            text-indent: 2rem;
            font-size: 1.6vh;
            text-align: left;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box !important;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            white-space: normal;
        }

        .c-card p {
            margin:0;
        }

        .c-card a {
            display: block;
            box-sizing:border-box;
            position: absolute;
            bottom: 1vh;
            right: 2vh;
            height:6vh;
            text-align: center;
            text-decoration: none;
            color: #198BFD;
            font-size:1.6vh;
        }

    .c-svg-click {
        width: auto;
        height: 3vh;
        filter: invert(40%) sepia(56%) saturate(3654%) hue-rotate(197deg) brightness(105%) contrast(98%);
    }
</style>