xjc-vue/src/layout/index.vue

<template>
    <div class="main home-login-page">
        <div class="page-left">
          <div class="page-left-style"></div>
          <div class="page-left-text">数字化生涯学习一体机</div>
          <div class="page-left-text-box">
            <p>数字资源智能交互</p>
            <p>唤醒学生生涯意识</p>
            <p>一体融合深入互动</p>
            <p>认知自我明晰路径</p>
            <p>体验平台加强探索</p>
            <p>助力学业稳步成功</p>
            <p>全程辅导精准决策</p>
            <p>规划行动促进成长</p>
          </div>
        </div>
        <div class="page-right">
          <div class="img-box">
            <img src="@/assets/images/login/wakeup.png" @click="indexJump('/xjc-integratedmachine/wakeup/index')">
          </div>
          <div class="img-box">
            <img src="@/assets/images/login/cognize.png" @click="indexJump('/xjc-integratedmachine/cognize/index')">
          </div>
          <div class="img-box">
            <img src="@/assets/images/login/environment.png" @click="indexJump('/xjc-integratedmachine/environment/index')">
          </div>
          <div class="img-box">
            <img src="@/assets/images/login/decision.png" @click="indexJump('/xjc-integratedmachine/decision/index')">
          </div>
          <div class="img-box">
            <img src="@/assets/images/login/plan.png"  @click="indexJump('/xjc-integratedmachine/plan/index')">
          </div>
        </div>
    </div>
</template>

<script setup>

    import {getBaseInfo} from '@/api/xjc-platform/xjc_index'

    const router = useRouter()

    function indexJump(path) {

        getBaseInfo().then(resp => {
            if (resp.loginUser.userName == 'xjc_customer') {
                //访客身份，直接去登录
                router.push({
                    path: '/xjc-integratedmachine/login/login_index',
                    query:{
                        modulePath : path
                    }
                })
            } else {
                router.push({
                    path: path,
                })
            }
        })
    }
</script>

<style lang="scss" scoped>

    body,html{
      margin: 0;
      padding: 0;
    }
    .home-login-page{
      width: 1920px;
      height: 1080px;
      background: url('@/assets/images/login/login-home-background.png') no-repeat;
      background-size: 100%;
      display: flex;
      .page-left{
        background: url('@/assets/images/login/home-login-left-background.png') no-repeat;
        background-size: 100%;
        width: 483px;
        height: 1080px;
        display: flex;
        justify-items: center;
        align-items: center;
        position: relative;
        .page-left-style{
          width: 24px;
          height: 596px;
          background: rgba(61,92,255,0.3);
          border-radius: 60px 60px 60px 60px;
          margin-left: 29px;
        }
        .page-left-text{
          font-weight: bold;
          width: 48px;
          font-size: 45px;
          color: #060606;
          letter-spacing: 4px;
          text-align: left;
          position: relative;
          left: -15px;
        }
      }
      .page-left-text-box{
        p{
          font-weight: 400;
          font-size: 32px;
          color: #333333;
          letter-spacing: 3px;
        }
      }
      .page-right{
        width: 70%;
        display: flex;
        justify-content:space-around;
        align-items: center;
        flex-wrap: wrap;
        .img-box{
          width: 330px;
          height: 400px;
          margin-left: 35px;
          margin-right: 35px;
          img{
            width: 330px;
            height: 400px;
          }

        }

      }
    }
</style>