xjc-vue/src/views/xjc-integratedmachine/environment/index.vue

<template>
  <div class="wake-up-page">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="page-img-box">
        <div class="img-box">
          <img src="@/assets/images/environment/card1.png" @click="jumpTo('/xjc-integratedmachine/environment/query_universitydb_conditions')">
          <img src="@/assets/images/environment/card2.png" @click="jumpTo('/xjc-integratedmachine/environment/prodb_search_undergraduate')">
          <img src="@/assets/images/environment/card3.png" @click="jumpTo('/xjc-integratedmachine/environment/occdb_search_industry')">
          <img src="@/assets/images/environment/card4.png" @click="jumpTo('/xjc-integratedmachine/environment/studyocc_information')">
        </div>
        <div class="bottom-img common-img-button">
          <img src="@/assets/images/environment/ai-img.png" @click="jumpTo('/xjc-integratedmachine/environment/ai_career_interview')">
        </div>
      </div>
      <drag_component></drag_component>
    </div>
  </div>

</template>

<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";

const router = useRouter()

const headinfo = ref({})

function setHeadinfo(){
  headinfo.value = {
    title: '环境探索学习系统',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl : '/index',
    isHome:true,
    backUrlUse:true,
  }
}


function jumpTo(path) {
  router.push({
    path: path,
    query: {name: 123}
  })
}
onMounted(() => {
  setHeadinfo()
})
</script>


<style scoped lang="scss">
.wake-up-page{
  background: url('@/assets/images/login/login-home-background.png') no-repeat;
  background-size: 1920px 1080px;
  z-index:10;
  width: 100%;
  height: 1080px;
  .page-content{
    width: 100%;
    position: absolute;
    top: 123px;
    bottom: 0;
    p{
      padding-left: 44px;
      padding-right: 44px;
      font-weight: 400;
      font-size: 30px;
      color: #333333;
      line-height: 52px;
      letter-spacing: 3px;
      text-indent: 2em;
    }
  }
  .content-text-box{
    width: 100%;
    height: 126px;
    background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
    background-size: 1920px 126px;
    margin-top:23px;
    display: flex;
    align-items: center;
  }
  .page-img-box{
    width: 100%;
    display: flex;
    justify-content:space-around;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    .img-box{
      width: 1520px;
      display: flex;
      justify-content: space-around;
      img{
        width: 350px;
        height: 500px;
      }
    }
    .bottom-img{
      width: 1520px;
      height: 316px;
      margin-top: 63px;
      img{
        width: 1520px;
        height: 316px;
      }
    }
  }

  .content-bottom{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    .draw{
      width: 109px;
      height: 170px;
      margin-left: 100px;
      img{
        width: 109px;
        height: 170px;
      }
    }

    .ai-rabit{
      position: absolute;
      right: 100px;
      top: -50px;
      display: flex;
      align-items: center;
      .ai-rabit-text{
        width: 345px;
        height: 89px;
        background: #E8EEF7;
        font-weight: 300;
        margin-bottom: 20px;
        font-size: 22px;
        color: #000000;
        padding:16px;
        border-radius: 24px 24px 24px 24px;
      }
      img{
        width: 178px;
        height: 270px;
      }
    }
  }

}
.temp{
  width:20vw;
  height: 10vh;
  background: #85eff5;
  border: solid 1px #a2fffc;
  border-radius: 10px;
  cursor: pointer;
}

</style>