简历后台管理项目--学校介绍页面代码

<template>
    <div>
        <SidePage></SidePage>
        <div class="box"></div>
        <h1 style="text-align: center;margin-top: 10px; font-size: 40px; font-weight: bold;-webkit-text-stroke-width: 3px;-webkit-text-stroke-color: brown; color: white;">About schools</h1>
        <!-- schools 关于学校 -->
        <div class="school">
            <!-- <div class="title" style="float: right;"><a href="/school">查看详情</a></div> -->
            <div class="pic">
          <div class="item" v-for="(item,index) in pic" :key="index">
          <img :src="item.src" width="300px" height="295px">

          </div> </div>
          <div class="text" >      
           <p style="line-height: 30px; text-indent: 2em;margin-top: 5px; ">山东理工职业学院位于山东省济宁市，是一所公立高等职业院校，创办于1950年。学院占地2300余亩，总建筑面积60余万平方米，拥有固定资产总值12.07亿元，教学仪器设备总值4.38亿元。学院设有15个教学单位，开设13个专业集群，共57个高职专业，拥有校内外专任教师1600余人，全日制高职在校生2.7万余人。12

学院坚持产教融合和校企合作，牵头成立了省级新能源产教融合共同体等多个产教融合共同体，推动产业链、教育链、创新链的有机衔接。学院还坚持开放办学，与70余所海外高校和科研院所建立友好合作关系，获批山东省与缅甸交流合作研究中心等。

此外，学院设有多个校区，包括济宁校区、嘉祥校区、鱼台校区、兖州校区和曲阜校区，分别位于济宁市的不同区域。学院注重国际化办学，先后入选“高等职业院校国际影响力50强”和“亚太职业院校影响力50强”，并与澳大利亚、泰国等地建立了海外分校。</p>
        </div></div> 
        <h1 style="text-align: center;margin-top: 10px; font-size: 40px; font-weight: bold;-webkit-text-stroke-width: 3px;-webkit-text-stroke-color: brown; color: white;">Regarding the experience</h1> 
      <div class="experience">
    <div class="row" v-for="(item,index) in experience" :key="index">
        <div class="tu">
            <img src="" alt="">
        </div>
        <div class="wenzi">
            <h1>{{ item.roleS }}</h1>
            <p>
              {{ item.text }}
            </p>
        </div>
    </div>
      </div>
    </div>
</template>
<script>
import SidePage from '@/components/SidePage.vue'
export default {
    components:{
        SidePage
    },
    data(){
        return{
            pic:[
                {
                    src:'https://img2.baidu.com/it/u=3784333616,1631661194&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=3067708895,1799465716&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
                },
                {
                    src:'https://img2.baidu.com/it/u=3952964989,36936153&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=449'
                },
            ],
            newsText:'About schools',
            newsText2:'Regarding the experience',
            experience:[]
        }
    },
    methods:{
        getabout(){
            this.$http.get('http://localhost:3002/jingli/jingli').then(res=>{
                console.log(res.data)
                this.experience= res.data.data.slice(0,4)
            })
        }
     
    },
    mounted(){
        this.getabout()
    }
}
</script>

<style scoped>
.box{
    width: 99vw;
    height: 300px;
    /* border: 2px solid black; */
    background-image: url('https://cn.bing.com/th?id=OHR.MontBlancGlacier_ZH-CN2918240023_1920x1080.jpg');
background-position: center left;
}
.school{
    width: 99vw;
    height: 400px;
    /* border: 2px solid black; */
}
/* .pic{
    display: flex;
    justify-content: space-around;
} */
.item{
    float: left;
    margin-right: 10px;
    width: 300px;
    height: 295px;
    /* border: 2px solid black; */
    overflow: hidden;
}
.experience{
    width: 99vw;
    height: 900px;
    /* border: 2px solid black; */
}
.row{
    display: flex;
    justify-content: space-around;
    width: 99vw;
    height: 300px;
    /* border: 2px solid black; */
}
.tu{
    width: 500px;
    height: 290px;
    margin-top: 3px;
    overflow: hidden;
    background-image: url('https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00479-2654.jpg');
}
.wenzi{
    width: 1200px;
    height: 290px;
    margin-top: 3px;
    /* border: 2px solid black; */
}
</style>