简历后台管理系统----学校简介页面

<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; "></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>