gxytj/xztszzy/views/zhuanye.html

<template>
    <layout group="专业百科" title="专业百科" @search="search">
        <div class="c-page">
            <div class="c-card" v-for="item in model.list">
                <router-link  :to="'/views/zhuanye/categoryList?type='+item.major_name+'&id='+item.major_id"  style="background-image:url(images/titlebk1.jpg)">
                    <h2>{{item.major_name}}</h2>
                    <span>学历类别</span>
                    <div>
                        <img class="c-svg c-svg-click" src="images/click.svg" />
                        <div>点击前往</div>
                    </div>
                </router-link>
                <div class="c-body">
                    <p>{{item.text}}</p>
                </div>
            </div>
        </div>
    </layout>
</template>
<script>
    export default {
        data: function () {
            return {
                model:{
                    list:[]
                },
            };
        },
        mounted: function () {
            store.state.query = this.$route.query.query;
            this.load()
        },
        methods: {
            search: function () {
            },
            load:function () {
                var url ="/dsideal_yy/zygh/ytj/major/getYtjMajorTypeList" ;
                var parent=this;
                $.post(url, {}, function (response) {
                    if(response.success){
                        if(response.list.length!==0){
                            response.list.forEach((item)=>{
                                if(item.major_id===1){
                                    item.text=item.major_name+'教育（undergraduate education），是高等教育的中级层次教育，包括普通本科教育、职业本科教育、应用型本科教育等各类本科层次的教育。本科教育与专科教育、研究生教育构成高等教育内部的 3 个层次，为高等教育的主干部分。一般招收高中毕业生或具有同等学力者。实施本层次的通识教育及有关某一专门领域的基础和专业理论、知识和技能教育。修业年限一般为 4 年，某些专业如医科等为 5 年或 5 年以上。学完教学计划规定的全部课程，经考试或考核合格，准予毕业者，发给本科毕业证书或授予学士学位或第一专业学位。实施机构为大学和专门学院。'
                                }else {
                                    item.text=item.major_name+'是高等教育的一种，一般招收高中毕业生或具有同等学力者。专科教育的基本修业年限为二至三年（非全日制高等学历教育的修业年限应当适当延长）。专科教育分为学科教育（大学专科）与职业教育（高职专科），1999年以前实行的专科教育（中等专科和高等专科）是学科教育（专业教育）；1999年以后高等教育大众化，除了师范、医学、公安类的高等专科教育外，其他都是高等职业教育。学生毕业时可获相应层次的毕业证书。'
                                }
                            })
                        }
                        parent.model.list=response.list;
                    }
                });
            }
        }
    }
</script>
<style>
    .c-search {
        display: none;
    }

    .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: 40%;
        height: 50vh;
        background-color: #EEF8FF;
        border: .1vh solid #BEE1FF;
        position: relative;
    }

        .c-card h2 {
            box-sizing: border-box;
            height: 100%;
            font-size: 4vh;
            line-height: 8vh;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
            padding-left: 4vh;
            color: #fff;
            margin: 0 1vh 0 0;
            background-image: url(images/btnbk.png);
            background-repeat: no-repeat;
            background-position: right center;
            background-size: 11vh 11vh;
        }

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

        .c-card p {
            margin: 0;
        }

        .c-card a {
            display: block;
            box-sizing: border-box;
            text-decoration: none;
            color: #198BFD;
            height: 13vh;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            text-align: left;
        }

    .c-svg-click {
        width: auto;
        height: 4vh;
        margin: 0 auto;
    }

    .c-card a > div > div {
        position: absolute;
        top: 7.5vh;
        font-size: 1.2vh;
        color: #fff;
        text-align: center;
        width: 100%;
        overflow: hidden;
    }

    .c-card a > div {
        width: 13vh;
        height: 13vh;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        padding-top: 3vh;
    }

    .c-card a span {
        position: absolute;
        color: #fff;
        display: block;
        padding-left: 4vh;
        top: 7vh;
    }
</style>