[feat][生涯唤醒]彩虹图静态页面|生涯影院

src/api/xjc-integratedmachine/wakeup/index.js

@@ -1,9 +1,9 @@
 import request from '@/utils/request'
 
-export function universityList(query) {
+export function cinemaList(query) {
     return request({
-        url: '/integratedmachine/tsytj/university/universityList',
-        method: 'get',
+        url: '/integratedmachine/wakeup/cinema/cinemaList',
+        method: 'post',
         params: query
     })
 }

src/router/router_wakeup.js

@@ -68,6 +68,12 @@ const router = [
         path: '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_2',
         component: () => import('@/views/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_2.vue'),
     },
+    //彩虹图绘制页面
+    {
+        path: '/xjc-integratedmachine/wakeup/rainbow/index',
+        component: () => import('@/views/xjc-integratedmachine/wakeup/rainbow/index.vue'),
+    },
+
     //生涯成熟度游戏
     {
         path: '/xjc-integratedmachine/wakeup/career_maturity/maturity_game',

src/views/xjc-integratedmachine/components/head_component.vue

@@ -69,6 +69,8 @@
       }
       .head-title{
         width: 464px;
+        //margin: ;
+        text-align: center;
         font-weight: bold;
         font-size: 48px;
         color: #060606;

src/views/xjc-integratedmachine/wakeup/career_recognize/plan_significance.vue

@@ -9,12 +9,14 @@
         <p class="text-info">
           对高中生而言，做好生涯规划可以使我们以明确的人生目标为导向，激发自身潜能、发挥个人特长，增强克服困难的勇气与毅力，在实现学业与人生阶段性价值的同时，为未来的幸福生活奠定基础。
         </p>
-        <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 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>
@@ -38,7 +40,7 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
-const position = reactive({ x: 100, y: 10 });
+const position = reactive({ x: 10, y: 10 });
 let isDragging = false;
 let originX, originY;
 
@@ -96,6 +98,7 @@ p{
     border-radius: 35px 35px 35px 35px;
     margin: 13px auto 0;
     padding-top: 25px;
+    position: relative;
     .text-info{
       font-weight: 400;
       font-size: 30px;
@@ -108,18 +111,22 @@ p{
       margin-top: 100px;
     }
   }
+  .fixed-box{
+    width: 100%;
+    height: 100px;
+    position: absolute;
+    bottom: 125px;
+  }
   .content-bottom{
     width: 100%;
+    height: 270px;
     display: flex;
-    justify-content: right;
-    //position: relative;
-    position: fixed;
-    bottom: 3px;
-    right: 20px;
+    justify-content: space-between;
+    position: relative;
+    align-items: center;
     .draw{
       width: 109px;
       height: 170px;
-      margin-left: -18px;
       img{
         width: 109px;
         height: 170px;
@@ -127,12 +134,10 @@ p{
     }
 
     .ai-rabit{
-      //position: absolute;
-      //right: 6px;
-      //top: -50px;
+      position: absolute;
+      right: -27px;
       display: flex;
       align-items: center;
-      justify-content: space-between;
       .ai-rabit-text{
         width: 345px;
         height: 89px;

src/views/xjc-integratedmachine/wakeup/career_recognize/plan_steps.vue

@@ -19,15 +19,14 @@
         <p class="answer">通过对自我认知与环境探索的组合分析，发展决策能力，做出生涯决策，确立自己的人生目标、职业目标、学业目标，同时根据长远目标，分解出中期目标和短期目标。</p>
         <p  class="title">6.反思改进（评估）</p>
         <p class="answer">行动的结果如何？是否适合我？坚持省察与批判的态度，评估目标的达成度、计划的可行性等，根据环境和自身的发展，适当调整和修正目标，让生涯历程既有规划又有变通，即人和环境均衡协调。</p>
-        <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">
-<!--            <div class="ai-rabit-text">-->
-<!--              你好，同学欢迎进入生涯学习系统-->
-<!--            </div>-->
-            <img  src="@/assets/images/wakeup/ai-rabit.png" />
+        <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>
@@ -51,7 +50,7 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
-const position = reactive({ x: 100, y: 10 });
+const position = reactive({ x: 10, y: 10 });
 let isDragging = false;
 let originX, originY;
 
@@ -109,6 +108,7 @@ p{
     border-radius: 35px 35px 35px 35px;
     margin: 13px auto 0;
     padding-top: 25px;
+    position: relative;
     .text-info{
       font-weight: bold;
       font-size: 32px;
@@ -133,18 +133,22 @@ p{
       padding: 0 150px;
     }
   }
+  .fixed-box{
+    width: 100%;
+    height: 100px;
+    position: absolute;
+    bottom: 125px;
+  }
   .content-bottom{
     width: 100%;
+    height: 270px;
     display: flex;
-    justify-content: right;
-    //position: relative;
-    position: fixed;
-    bottom: 3px;
-    right: 20px;
+    justify-content: space-between;
+    position: relative;
+    align-items: center;
     .draw{
       width: 109px;
       height: 170px;
-      margin-left: -18px;
       img{
         width: 109px;
         height: 170px;
@@ -152,12 +156,11 @@ p{
     }
 
     .ai-rabit{
-      //position: absolute;
-      //right: 6px;
-      //top: -50px;
+      position: absolute;
+      right: -27px;
+      //top: -271px;
       display: flex;
       align-items: center;
-      justify-content: space-between;
       .ai-rabit-text{
         width: 345px;
         height: 89px;

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

@@ -16,7 +16,7 @@
           <img src="@/assets/images/wakeup/card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/paint')">
         </div>
         <div class="img-box">
-          <img src="@/assets/images/wakeup/card3.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/index')">
+          <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')">
@@ -90,12 +90,6 @@
       isDragging = true;
       originX = e.clientX - position.x;
       originY = e.clientY - position.y;
-      // let chartDiv = document.getElementById("ring-chart");
-      // console.log("sss",chartDiv)
-      // chartDiv.addEventListener('touchstart',begin)
-      // chartDiv.addEventListener('touchmove',moving)
-      // chartDiv.addEventListener('touchend',stopMoving)
-      // console.log(center_x, "***", center_y)
       document.addEventListener('touchmove', onMouseMove);
       document.addEventListener('touchend', stopDrag);
     };
@@ -113,13 +107,10 @@
       document.removeEventListener('touchend', stopDrag);
     };
     const draggableBox = ref(null);
-
     let startX = 0;
     let startY = 0;
     let currentX = 0;
     let currentY = 0;
-    // const startX = ref(0)
-    // const startY = ref(0)
     const handleTouchStart = (event) => {
       startX = event.touches[0].clientX - draggableBox.value.offsetLeft;
       startY = event.touches[0].clientY - draggableBox.value.offsetTop;
@@ -248,5 +239,7 @@
   cursor: pointer;
   user-select: none; /* 防止拖拽时选中文字 */
 }
+
+
 </style>
 

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

@@ -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>

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

@@ -1,11 +1,218 @@
 <template>
-    彩虹图知识讲解1
+  <div class="development_stage">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-box">
+        <p class="text-info">生涯彩虹图是舒伯生涯发展理论的核心视觉化工具，将人一生的生涯历程比喻成一道跨越天际的彩虹，其中不同的颜色象征人一生中所扮演的不同角色，提供了一个更全面、更动态的生涯发展视角。</p>
+        <p class="title">1.生活广度（横向层面）——五个生涯阶段 </p>
+        <p class="answer"><span>成长期（0-14岁）：</span>发展自我形象，形成对工作世界的正确态度，了解工作的意义。</p>
+        <p class="answer"><span>探索期（15-24岁）：</span>职业兴趣具体化，初步确定职业选择，并尝试将它作为长期职业。</p>
+        <p class="answer"><span>建立期（25-44岁）：</span>找到自己想要做的事，学习和他人建立关系，在一个稳固的职位上发展、精进、专业化。</p>
+        <p class="answer"><span>维持期（45-64岁）：</span>维持既有的成就与地位，接受自身条件的限制，找出工作中遇到的新难题，发展新的技能。</p>
+        <p class="answer"><span>衰退期（65岁及以后）：</span>发展非职业角色，做想做而未做的事，淡泊名利，与世无争。</p>
+        <p class="title">2.生活空间（纵向层面）——六大关键角色 子女：主要指个体在家庭中作为孩子或晚辈的身份，强调对父母或其他家庭成员的尊重与赡养责任。</p>
+        <p class="answer"> <span>学生：</span>聚焦于知识技能的学习过程，贯穿从基础教育到终身学习的各个阶段。</p>
+        <p class="answer"> <span>休闲者：</span>平衡生活压力的重要角色，强调通过兴趣爱好、娱乐活动实现身心放松。</p>
+        <p class="answer"> <span>公民：</span>涉及社会参与和法律义务，涵盖投票选举、社区服务、遵守公共秩序等行为。</p>
+        <p class="answer"> <span>工作者：</span>职业发展相关的核心角色，包含正式就业、自由职业等多种劳动形式。</p>
+        <p class="answer"><span>持家者：</span> 聚焦家庭内部管理的角色，包括家务分工、育儿养老、财务管理等日常事务，与子女角色形成互补。</p>
+        <p class="title"> 3.角色投入（角色宽度）——三种投入程度：高、中、低 个体在不同生命阶段，对每个角色的时间、情感、精力投入是不同的。</p>
+        <p class="answer">每种角色对应的色带越宽，代表个体对该角色投入的时间、情感、精力越多。</p>
+
+        <div class="img-box" >
+          <img src="@/assets/images/wakeup/knowledge_explanation-button1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_2')">
+        </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 router = useRouter()
+const headinfo = ref({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯彩虹图',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
+  }
+}
+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>
+<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;
+    }
+    .title{
+      font-weight: bold;
+      font-size: 26px;
+      color: #333333;
+      line-height: 46px;
+      padding: 0 150px;
+    }
+
+    .answer{
+      font-size: 26px;
+      color: #333333;
+      line-height: 44px;
+      text-indent: 2em;
+      padding: 0 150px;
+      span{
+        font-size: 28px;
+        color: #333333;
+        line-height: 46px;
+        font-weight: bold;
+      }
+    }
+  }
+  .img-box{
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    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>

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

@@ -1,11 +1,253 @@
 <template>
-    彩虹图知识讲解2
+  <div class="development_stage">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-box">
+        <p class="text-info">案例页</p>
+        <div class="page-main">
+          <div class="page-left">
+
+          </div>
+          <div class="page-right">
+                    <p class="title">仔细观察这幅生涯彩虹图，你觉得这是一个什么样的人？ </p>
+            <p class="answer"><span>思考1：</span> 在中年期和老年期仍花费一定时间在学习上，应该是进修吧。</p>
+            <p class="answer"><span>思考2：</span>工作时间很长，60岁以后仍花很多精力在工作上，可见退休后仍在发光发热。</p>
+            <p class="answer"><span>思考3：</span>在公民这个角色上特别突出，应该是一个对社会有杰出贡献的人。</p>
+            <p class="answer-info">他就是钟南山。2003年冲在“非典”第一线的钟院士，
+              2020年新冠疫情突如其来时，他再次义无反顾奔赴第一线。在两次疫情中，他始终以妙手仁心、敢医敢言的态度，用学问、智慧和担当让全国人民在恐慌中看到希望，堪称“全民偶像”。
+              <span>观看他的视频</span>
+            </p>
+          </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>
+<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;
+    }
+    .page-main{
+      margin-top: 71px;
+      display: flex;
+      justify-content: space-between;
+      .page-left{
+        width: 775px;
+        height: 577px;
+        background: #000000;
+        border-radius: 10px 10px 10px 10px;
+        margin-left: 65px;
+      }
+      .page-right{
+        margin-right: 45px;
+        width: 821px;
+        height: 577px;
+        //border:  1px solid;
+      }
+    }
+
+    .title{
+      font-weight: bold;
+      font-size: 26px;
+      color: #333333;
+      line-height: 46px;
+      //padding: 0 150px;
+    }
+
+    .answer{
+      font-size: 26px;
+      color: #333333;
+      line-height: 44px;
+      //text-indent: 2em;
+      //padding: 0 150px;
+      span{
+        font-size: 28px;
+        color: #B530C9;
+        line-height: 46px;
+        font-weight: bold;
+      }
+    }
+    .answer-info{
+      text-indent: 2em;
+      font-weight: 400;
+      font-size: 32px;
+      color: #333333;
+      line-height: 52px;
+      span{
+        color: #56B5FF;
+
+      }
+    }
+  }
+  .img-box{
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 56px;
+    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>