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

<template>
  <div class="wake-up-page">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="content-text-box">
        <p>
          生涯是个人有目的、连续不断的生活模式，由我们选择扮演的各种生活角色、所从事的活动组成。生涯不仅仅是职业，对我们每个人而言，最大的幸福不只是在职业上的成功，更在于一生中是否能拥有一个多彩、平衡、充盈的生涯。
        </p>
      </div>
      <div class="page-img-box">
        <div class="img-box">
          <img src="@/assets/images/wakeup/card1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/index')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/index')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card3.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card4.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_example/index')">
        </div>
        <div class="img-box">
          <img src="@/assets/images/wakeup/card5.png"  @click="jumpTo('/xjc-integratedmachine/wakeup/career_cinema/index')">
        </div>
      </div>
     <drag_component></drag_component>
<!--     <ai_rabit_component></ai_rabit_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";
    // import ai_rabit_component from "@/views/xjc-integratedmachine/components/ai_rabit_component.vue";

    const router = useRouter()
    const headinfo = ref({})
    import { ref, onMounted, onUnmounted } from 'vue';


    function setHeadinfo(){
        headinfo.value = {
            title: '生涯唤醒学习系统',
            user: {
                avatar: '头像路径',
                nickName: '张三'
            },
            backUrl : '/index',
          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 182px;
    margin-top:23px;
    display: flex;
    align-items: center;
  }
  .page-img-box{
      width: 100%;
      display: flex;
      justify-content:space-around;
      align-items: center;
      margin-top: 49px;
      .img-box{
        width: 366px;
        height: 501px;
        img{
          width: 350px;
          height: 501px;
        }
      }
    }

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

    .ai-rabit{
      //width: 178px;
      //height: 274px;
      position: absolute;
      right: 45px;
      top: -50px;
      display: flex;
      //justify-content: space-between;
      align-items: center;
      .ai-rabit-text{
        width: 345px;
        height: 89px;
        //border: 1px solid;
        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>