xjc-vue/src/views/xjc-integratedmachine/wakeup/rainbow/index1.vue

<template>
  <div class="development_stage">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div class="page-box">
        <p class="text-info">请通过回顾过去和设想未来，绘制您自己的生涯彩虹图。请依次选择以下6种角色，并分别针对每种角色设置年龄段及在该年龄段的精力投入程度。</p>
        <div class="page-main">
          <div class="page-left">
          </div>
          <div class="page-right">
            <div class="page-right-top">
              <div class="color-box">
                <p class="box-left" style="background: #FFC300;"></p>
                <p class="box-label">子女身份</p>
              </div>
              <div class="color-box">
                <p class="box-left" style="background: #F72585"></p>
                <p class="box-label">学生身份</p>
              </div>
              <div class="color-box" >
                <p class="box-left" style="background: #4CC9F0"></p>
                <p class="box-label">休闲者身份</p>
              </div>
              <div class="color-box">
                <p class="box-left" style="background: #A000FF"></p>
                <p class="box-label">公民身份</p>
              </div>
              <div class="color-box">
                <p class="box-left" style="background: #FFC9F6"></p>
                <p class="box-label">工作者身份</p>
              </div>
              <div class="color-box">
                <p class="box-left" style="background: #9DE617"></p>
                <p class="box-label">持家者身份</p>
              </div>
            </div>
            <div class="page-right-btn-group">
              <div class="eraser-box">
<!--                <img src="@/assets/images/wakeup/rainbow/eraser-shadom.png">-->
                <img src="@/assets/images/wakeup/rainbow/eraser.png">
              </div>
              <img class="img-btn" src="@/assets/images/wakeup/rainbow/clear.png">
              <img class="img-btn" src="@/assets/images/wakeup/rainbow/Drawing-completed.png">
              <img class="img-btn" src="@/assets/images/wakeup/rainbow/seed-email.png">
              <img class="img-btn" src="@/assets/images/wakeup/rainbow/save-btn.png">
            </div>
          </div>
        </div>
        <!--        下一步-->
        <div class="img-box" >
          <img src="@/assets/images/wakeup/knowledge_explanation-button1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/index')">
        </div>
        <!--        机器人-->
        <div class="fixed-box">
          <div class="content-bottom">
            <div class="draw draggable-ball" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">
              <img src="@/assets/images/wakeup/float-box.png" />
            </div>
            <div class="ai-rabit">
              <img  src="@/assets/images/wakeup/ai-rabit.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
import {onMounted, reactive} from "vue";
const headinfo = ref({})
const router = useRouter()
function setHeadinfo(){
  headinfo.value = {
    title: '生涯彩虹图',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl : '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
  }
}
const position = reactive({ x: 10, y: 10 });
let isDragging = false;
let originX, originY;


function jumpTo(path) {
  console.log(path)
  router.push({
    path: path,
    query: {name: 123}
  })
}

const startDrag = (e) => {
  console.log("e",e)
  isDragging = true;
  originX = e.clientX - position.x;
  originY = e.clientY - position.y;
  console.log("originX",originX,originY,"originY")
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', stopDrag);
};

const onMouseMove = (e) => {
  if (isDragging) {
    position.x = e.clientX - originX;
    position.y = e.clientY - originY;
    console.log("position.x",position.x,"position.y",position.y)
  }
};

const stopDrag = () => {
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', stopDrag);
};
onMounted(() => {
  setHeadinfo()
})

</script>

<style scoped lang="scss">
p{
  margin: 0;
  padding: 0;
}
.development_stage{
  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%;
    height: 980px;
    position: absolute;
    top: 100px;
    bottom: 0;
  }
  .page-box{
    width: 1832px;
    height: 910px;
    background: #FFFFFF;
    border-radius: 35px 35px 35px 35px;
    margin: 13px auto 0;
    padding-top: 25px;
    position: relative;

    .text-info{
      font-weight: bold;
      font-size: 28px;
      color: #333333;
      line-height: 46px;
      padding: 0 150px;
      //text-align: center;
      text-indent: 2em;
    }
    .page-main{
      width:1546px;
      height: 681px;
      //border: 1px solid;
      margin: 12px auto;
      background: url('@/assets/images/wakeup/rainbow/backgroud-rainbow.png') no-repeat;
      background-size: 1546px 681px;
      display: flex;
      justify-content: space-between;
      .page-left{
        width: 1273px;
        height: 571px;
        background: #000000;
        border-radius: 10px 10px 10px 10px;
        margin-left: 26px;
        //border: #FFFFFF 1px solid;
        margin-top: 95px;
        background: url('@/assets/images/wakeup/rainbow/rainbow-border.png') no-repeat;
        background-size:1200px 500px;
        //border: 1px solid #FFFFFF;


      }
      .page-right{
        width: 250px;
        height: 681px;
        //border: 1px solid #FFFFFF;
        margin-right: 26px;
        .page-right-top{
          width: 250px;
          height:260px;
          //border: 1px solid white;
          .color-box:nth-child(1){
            margin-top: 24px;
          }
          .color-box{
            //border: 1px solid white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
            .box-left{
              width: 53px;
              height: 25px;
              background: #FFC300;
              border-radius: 10px 10px 10px 10px;
              //border: 1px solid white;
            }
            .box-label{
              width: 122px;
              font-weight: 400;
              font-size: 20px;
              color: #FFFFFF;
              margin-left: 10px;
            }
          }
        }
        .page-right-btn-group{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

          .img-btn{
            width: 170px;
            height: 54px;
            margin-top: 20px;
          }
          .eraser-box{
            width: 165px;
            height: 50px;
            background: url('@/assets/images/wakeup/rainbow/eraser-shadom.png') no-repeat;
            background-size: 163px 47px;
            position: relative;
            img{
              width: 165px;
              height: 83px;
              position: absolute;
              top: -33px;
              left: 10px;
            }
          }
        }
      }
    }
  }
  .img-box{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
    z-index:10;
    img{
      width: 244px;
      height: 92px;
      z-index:10;
    }
  }
  .fixed-box{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 125px;
  }
  .content-bottom{
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    .draw{
      width: 109px;
      height: 170px;
      img{
        width: 109px;
        height: 170px;
      }
    }

    .ai-rabit{
      position: absolute;
      right: -27px;
      //top: -271px;
      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;
      }
    }
  }
  .draggable-ball {
    position: absolute;
    cursor: pointer;
    user-select: none; /* 防止拖拽时选中文字 */
  }
}

</style>