|
|
@@ -0,0 +1,315 @@
|
|
|
+<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>
|
byq