简历后台管理系统----主页界面

<template>
  <div>
<div class="box">
<div class="content">
  <div class="roat"></div>
  <h3 style="text-align: center;">飞行之星</h3>
  <a-button style="margin-left: 22px; margin-top: 15px;" v-for="(item,index) in list" :key="index" :type="item.type" @click="getrouter(item.path)">{{ item.title }} </a-button>
  
</div>
</div>
<div class="container">
  <div class="item" v-for="(item,index) in page" :key="index" >
  <div class="trem">
    <a-avatar :size="100" src="https://img0.baidu.com/it/u=3789930692,3582323862&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" style="margin-left: 100px;margin-top: 10px;"/>
    <h3 style="text-align: center; font-weight: bolder;">{{ item.name}}</h3>
    <p style="font-weight: bolder; margin-left: 20px;">{{ item.text1}}</p>
    <p style="font-weight: bolder; margin-left: 20px;">{{ item.text }}</p>
  </div>
  <div class="mainbody">
    <p>{{ item.note }}</p>
  </div>
  </div>
</div>
</div>
</template>
<script>
// import SidePage from '@/components/SidePage.vue';
export default {
  components:{
    // SidePage
  },
  data() {
     return{
     list:[
      {
        title:'首页',
        path:'/home',
        type:'primary'
      },
      {
        title:'经历',
        path:'/about',
        type:'primary'
      },
      {
        title:'简历下载',
        path:'/text',
        type:'primary'
      },
     ],

     page:[]

     }
     
  },
  methods:{
    getrouter(path){
      if (this.$route.path !== path) {
                this.$router.push(path);
            } else {
                this.$message.error('已在本页面，请勿重复点击');
            }
  },
  getaxios(){
    this.$http.get('http://localhost:3002/shouye/shouye').then(res=>{
      // console.log(res.data.data)
      this.page =res.data.data.slice(0,3)
      console.log(this.page)
    }).catch(err=>{
      console.log(err)
    })
  }
},
mounted(){
  this.getaxios()
}


}
</script>
<style scoped>
.box{
  width: 100vw;
  height: 100vh;
  background-image: url('https://cn.bing.com/th?id=OHR.MontBlancGlacier_ZH-CN2918240023_1920x1080.jpg');
  position: relative;
  overflow: hidden;
}
.content{
  width: 300px;
  height: 230px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 30px;
  position: absolute;
  left: 30px;
  top: -400px;
  transition: all 2s;
}
.roat{
  width: 100px;
  height: 100px;
  background-image: url('https://cn.bing.com/th?id=OHR.MontBlancGlacier_ZH-CN2918240023_1920x1080.jpg');
  background-position: center;
  /* background-color: black; */
  border-radius:100% ;
  margin-left: 100px;
  margin-top: 30px;
}
.container{
  width: 1400px;
  height:900px;
  position: absolute;
  left: 360px;
  top: 50px;
  background-color: rgba(255, 255, 255, 0.7) ;
  border-radius:30px ;
}
.item{
  display: flex;
  justify-content: space-around;
  width: 1300px;
  height: 280px;
  border-bottom: 1px solid #000;
  margin-left: 50px;
  margin-top: 20px;
}
.trem{
  width: 300px;
  height: 280px;
  border-bottom: 1px solid #000;
  float: left;
}
.mainbody{
  width: 1000px;
  height: 280px;
  border-bottom: 1px solid #000;
  margin-left: 10px;
}
.box:hover .content{
  top:35px;
}
</style>