[feat] 封装生涯护照和机器人组件

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="fixed-box">
+    <div class="content-bottom">
+      <div class="draw draggable" ref="draggableRef" :style="{ top: position.y + 'px', left: position.x + '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>
+</template>
+<script setup>
+import {ref, onMounted, onUnmounted} from 'vue';
+
+const draggableRef = ref(null);
+const position = ref({x: 0, y: 0});
+const dragging = ref(false);
+const startX = ref(0);
+const startY = ref(0);
+const onMouseDown = (event) => {
+  dragging.value = true;
+  startX.value = event.clientX - position.value.x;
+  startY.value = event.clientY - position.value.y;
+  document.addEventListener('mousemove', onMouseMove);
+  document.addEventListener('mouseup', onMouseUp);
+};
+
+const onTouchStart = (event) => {
+  if (event.touches.length === 1) {
+    dragging.value = true;
+    startX.value = event.touches[0].clientX - position.value.x;
+    startY.value = event.touches[0].clientY - position.value.y;
+    document.addEventListener('touchmove', onTouchMove, {passive: true});
+    document.addEventListener('touchend', onTouchEnd, {passive: true});
+  }
+};
+
+const onMouseMove = (event) => {
+  if (dragging.value) {
+    position.value.x = event.clientX - startX.value;
+    position.value.y = event.clientY - startY.value;
+  }
+};
+
+const onTouchMove = (event) => {
+  if (dragging.value && event.touches.length === 1) {
+    position.value.x = event.touches[0].clientX - startX.value;
+    position.value.y = event.touches[0].clientY - startY.value;
+  }
+};
+
+const onMouseUp = () => {
+  dragging.value = false;
+  document.removeEventListener('mousemove', onMouseMove);
+  document.removeEventListener('mouseup', onMouseUp);
+};
+
+const onTouchEnd = () => {
+  dragging.value = false;
+  document.removeEventListener('touchmove', onTouchMove, {passive: true});
+  document.removeEventListener('touchend', onTouchEnd, {passive: true});
+};
+
+onMounted(() => {
+  const draggable = draggableRef.value;
+  draggable.addEventListener('mousedown', onMouseDown);
+  draggable.addEventListener('touchstart', onTouchStart, {passive: true});
+});
+
+// onUnmounted(() => {
+//   const draggable = draggableRef.value;
+//   draggable.removeEventListener('mousedown', onMouseDown);
+//   draggable.removeEventListener('touchstart', onTouchStart, {passive: true});
+//   document.removeEventListener('mousemove', onMouseMove);
+//   document.removeEventListener('mouseup', onMouseUp);
+//   document.removeEventListener('touchmove', onTouchMove, {passive: true});
+//   document.removeEventListener('touchend', onTouchEnd, {passive: true});
+// });
+
+</script>
+
+
+<style scoped lang="scss">
+.draggable {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  cursor: pointer;
+  user-select: none;
+}
+.fixed-box{
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  //bottom: 0px;
+  top: 678px;
+}
+.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: 0px;
+    bottom: 20px;
+    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/career_maturity/index.vue

@@ -9,6 +9,7 @@
         <img src="@/assets/images/wakeup/maturity/maturity-game-left.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/knowledge_explanation')">
         <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/evaluation')">
       </div>
+      <drag_component></drag_component>
     </div>
   </div>
 
@@ -16,6 +17,7 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
 
 const router = useRouter()

src/views/xjc-integratedmachine/wakeup/career_maturity/knowledge_explanation.vue

@@ -14,40 +14,25 @@
           本测评从<span class="center-text">生涯决策知识</span>和<span class="center-text">生涯决策态度</span>两方面评估中学生生涯成熟度的发展水平和特点，旨在帮助学生了解自己的生涯发展水平，认识到自己在生涯发展中的不足和长处，指导学生合理利用自身及外界发展资源，实现个人人生目标。
         </p>
         <div class="img-box">
-          <img src="@/assets/images/wakeup/maturity/structure-img.png" @click="selectBtn(questionAnswerA)">{{ questionAnswerA }}
+          <img src="@/assets/images/wakeup/maturity/structure-img.png">
          <div class="structure-box">
-<!--           <div class="top">-->
-<!--              <p>1</p>-->
-<!--           </div>-->
-<!--           <div>-->
-<!--             <p>1</p><p>1</p>-->
-<!--           </div>-->
-
              <div class="left">
-               <p @click="describe('职业世界认知： 个体对职业的意义、职业的发展前景、从业要求、实现途径、工作职责、社会地位等的了解程度。')">1</p>
-               <p @click="describe('职业自我认知：个体对自己的职业能力、气质、性格、兴趣、价值观等的了解程度。')">1</p>
+               <p @click="describe('职业世界认知： 个体对职业的意义、职业的发展前景、从业要求、实现途径、工作职责、社会地位等的了解程度。')"></p>
+               <p @click="describe('职业自我认知：个体对自己的职业能力、气质、性格、兴趣、价值观等的了解程度。')"></p>
              </div>
              <div class="right">
-               <p @click="describe('主动性反映的是个体积极参与生涯决策过程的程度。')">1</p>
-               <p @click="describe('独立性反映的是个体不盲目依赖他人而独立作出生涯决策的程度。')">1</p>
-               <p @click="describe('自信心反映的是个体对自己生涯决策知识与能力的信心程度。')">1</p>
-               <p @click="describe('功利性反映的是个体根据自身特点还是根据待遇收入等功利性因素来选择职业的程度。')">1</p>
-               <p @click="describe('稳定性反映的是不同时期个体对将来想从事的职业领域的一致性程度。')">1</p>
+               <p @click="describe('主动性反映的是个体积极参与生涯决策过程的程度。')"></p>
+               <p @click="describe('独立性反映的是个体不盲目依赖他人而独立作出生涯决策的程度。')"></p>
+               <p @click="describe('自信心反映的是个体对自己生涯决策知识与能力的信心程度。')"></p>
+               <p @click="describe('功利性反映的是个体根据自身特点还是根据待遇收入等功利性因素来选择职业的程度。')"></p>
+               <p @click="describe('稳定性反映的是不同时期个体对将来想从事的职业领域的一致性程度。')"></p>
              </div>
 
          </div>
         </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>
+      <drag_component></drag_component>
     </div>
     <el-dialog v-model="centerDialogVisible" :show-close="false" width="500" center>
     <span>
@@ -68,6 +53,7 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {onMounted, reactive} from "vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 const headinfo = ref({})
 const describeInfo = ref('')
 function setHeadinfo(){
@@ -167,20 +153,16 @@ p{
       img{
         width: 1525px;
         height: 770px;
-        //border: 1px solid;
       }
     }
     .structure-box{
       position: absolute;
       top: 387px;
-      border: #1ab394 solid 1px ;
       width: 1525px;
       height: 314px;
       display: flex;
-      //justify-content: space-around;
      .left{
        margin-left: 280px;
-       border: 1px solid pink;
        width: 334px;
        height: 314px;
        display: flex;
@@ -188,12 +170,10 @@ p{
        p{
          width: 89px;
          height: 314px;
-         border: 1px solid green;
        }
      }
       .right{
         margin-left: 89px;
-        border: 1px solid pink;
         width: 541px;
         height: 314px;
         display: flex;
@@ -201,7 +181,6 @@ p{
         p{
           width: 89px;
           height: 314px;
-          border: 1px solid green;
         }
       }
     }
@@ -215,55 +194,6 @@ p{
       line-height: 52px;
     }
   }
-  .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;
-      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; /* 防止拖拽时选中文字 */
-  }
   ::v-deep .el-dialog{
     width: 632px;
     height: 343px;

src/views/xjc-integratedmachine/wakeup/career_maturity/maturity_game.vue

@@ -2,36 +2,51 @@
   <div class="maturity-game-page" v-loading="pageLoading">
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
-      <div class="content-left"></div>
-      <div class="content-center">
-        <div class="content-img">
-          <img  src="@/assets/images/wakeup/maturity/shadow-bg.png" >
-          <div v-for="(item,index) in maturityAppraisalData">
-            <p v-show="index===0?true:false">{{item.questionTitle}}</p>
+      <div class="page-box">
+        <div class="content-left"></div>
+        <div class="content-center">
+          <div class="content-img">
+            <img src="@/assets/images/wakeup/maturity/shadow-bg.png">
+            <div v-for="(item,index) in maturityAppraisalData">
+              <p v-show="index===0?true:false">{{ item.questionTitle }}</p>
+            </div>
           </div>
-        </div>
-        <div class="group-btn">
-          <img src="@/assets/images/wakeup/maturity/btn1.png" @click="selectBtn(questionAnswerA)">{{ questionAnswerA }}
-          <img src="@/assets/images/wakeup/maturity/btn2.png" @click="selectBtn(questionAnswerB)">{{ questionAnswerB }}
-          <img src="@/assets/images/wakeup/maturity/btn3.png" @click="selectBtn(questionAnswerC)">{{ questionAnswerC }}
-          <img src="@/assets/images/wakeup/maturity/btn4.png" @click="selectBtn(questionAnswerD)">{{ questionAnswerD }}
-          <img src="@/assets/images/wakeup/maturity/btn5.png" @click="selectBtn(questionAnswerE)">{{ questionAnswerE }}
-        </div>
-        <div class="progress-container">
-          <div class="progress-bar" :style="{ width: progress + '%' }">
+          <div class="group-btn">
+            <img src="@/assets/images/wakeup/maturity/btn1.png" @click="selectBtn(questionAnswerA)">{{
+              questionAnswerA
+            }}
+            <img src="@/assets/images/wakeup/maturity/btn2.png" @click="selectBtn(questionAnswerB)">{{
+              questionAnswerB
+            }}
+            <img src="@/assets/images/wakeup/maturity/btn3.png" @click="selectBtn(questionAnswerC)">{{
+              questionAnswerC
+            }}
+            <img src="@/assets/images/wakeup/maturity/btn4.png" @click="selectBtn(questionAnswerD)">{{
+              questionAnswerD
+            }}
+            <img src="@/assets/images/wakeup/maturity/btn5.png" @click="selectBtn(questionAnswerE)">{{
+              questionAnswerE
+            }}
           </div>
-          <div class="progress-info">
-            {{ newData.length }} / {{ questionSize }}
+          <div class="progress-container">
+            <div class="progress-bar" :style="{ width: progress + '%' }">
+            </div>
+            <div class="progress-info">
+              {{ newData.length }} / {{ questionSize }}
+            </div>
           </div>
         </div>
-      </div>
-      <div class="content-right">
-        <img class="btn-img" v-show="newData.length>0" @click="previousQuestion" src="@/assets/images/wakeup/maturity/pre-qustion.png" >
-        <div class="time">
-          <img src="@/assets/images/wakeup/maturity/time.png" >
-          <p> {{ formattedTime(elapsedTime) }}</p>
+        <div class="content-right">
+          <img class="btn-img" v-show="newData.length>0" @click="previousQuestion"
+               src="@/assets/images/wakeup/maturity/pre-qustion.png">
+          <div class="time">
+            <img src="@/assets/images/wakeup/maturity/time.png">
+            <p> {{ formattedTime(elapsedTime) }}</p>
+          </div>
+          <img class="btn-img" @click="submitAnswer" v-show="newData.length >= questionSize"
+               src="@/assets/images/wakeup/maturity/submit.png">
         </div>
-        <img class="btn-img" @click="submitAnswer" v-show="newData.length >= questionSize" src="@/assets/images/wakeup/maturity/submit.png" >
+        <drag_component></drag_component>
       </div>
     </div>
   </div>
@@ -40,8 +55,9 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-import { insertAppraisalAnswer, maturityAppraisalList} from "@/api/xjc-integratedmachine/wakeup/index.js";
+import {insertAppraisalAnswer, maturityAppraisalList} from "@/api/xjc-integratedmachine/wakeup/index.js";
 import {ElMessageBox} from "element-plus";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
 
 const router = useRouter()
@@ -50,17 +66,18 @@ const headinfo = ref({})
 // const progress = ref(0)
 const draggedItem = ref(null);
 const maturityAppraisalData = ref([])
-const questionAnswerA =  ref(null)
-const questionAnswerB =  ref(null)
-const questionAnswerC =  ref(null)
-const questionAnswerD =  ref(null)
-const questionAnswerE =  ref(null)
+const questionAnswerA = ref(null)
+const questionAnswerB = ref(null)
+const questionAnswerC = ref(null)
+const questionAnswerD = ref(null)
+const questionAnswerE = ref(null)
 
 const itemScore = ref('')
 const newData = ref([])
 const appraisalId = ref(null)
 const questionSize = ref(null);
 const useTime = ref(0);
+
 function dragStart(event) {
   draggedItem.value = event.target;
 }
@@ -75,14 +92,14 @@ function drop(event) {
   }
 }
 
-function setHeadinfo(){
+function setHeadinfo() {
   headinfo.value = {
     title: '生涯成熟度测评',
     user: {
       avatar: '头像路径',
       nickName: '张三'
     },
-    backUrl : '/index'
+    backUrl: '/index'
   }
 }
 
@@ -97,11 +114,11 @@ function jumpTo(path) {
 function getMaturityAppraisalList() {
   pageLoading = true;
   let appraisalCode = "3001"
-  maturityAppraisalList({appraisalCode:appraisalCode}).then(res => {
-    if(res.data.questionList.length > 0){
-      res.data.questionList.map((item,index) =>{
+  maturityAppraisalList({appraisalCode: appraisalCode}).then(res => {
+    if (res.data.questionList.length > 0) {
+      res.data.questionList.map((item, index) => {
         item.questionAnswer = item.questionAnswer.split(';');
-        if(index === 0){
+        if (index === 0) {
           //给第一道题的选项进行赋值；
           questionAnswerA.value = item.questionAnswer[0];
           questionAnswerB.value = item.questionAnswer[1];
@@ -116,11 +133,12 @@ function getMaturityAppraisalList() {
     appraisalId.value = res.data.appraisalId;
     questionSize.value = res.data.questionSize;
     pageLoading = false;
-  }).catch((err)=>{
+  }).catch((err) => {
     console.log("error")
     pageLoading = false;
   })
 }
+
 //计时器
 const elapsedTime = ref(0);
 const timerId = ref(null);
@@ -153,7 +171,7 @@ const formattedTime = (ms) => {
   const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
   const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
   const seconds = String(totalSeconds % 60).padStart(2, '0');
-  useTime.value =  totalSeconds;
+  useTime.value = totalSeconds;
   return `${hours}:${minutes}:${seconds}`;
 };
 
@@ -185,12 +203,12 @@ const updateCurrent = (newCurrent) => {
 const selectBtn = (val) => {
   //将当前题目加入新数组，
   // 拼接选项数据
-  if(newData.value.length != questionSize.value ){
+  if (newData.value.length != questionSize.value) {
     itemScore.value += val + '|'
     newData.value.push(maturityAppraisalData.value[0]);
   }
   //更换题卡；
-  if(maturityAppraisalData.value.length >1 ){
+  if (maturityAppraisalData.value.length > 1) {
     maturityAppraisalData.value.splice(0, 1);
     //给按钮赋值；
     questionAnswerValue();
@@ -207,13 +225,15 @@ const previousQuestion = (val) => {
   //返回上一题后要更新按钮赋值；
   questionAnswerValue();
 };
-function questionAnswerValue(){
-  questionAnswerA.value =  maturityAppraisalData.value[0].questionAnswer[0]
-  questionAnswerB.value =  maturityAppraisalData.value[0].questionAnswer[1]
-  questionAnswerC.value =  maturityAppraisalData.value[0].questionAnswer[2]
-  questionAnswerD.value =  maturityAppraisalData.value[0].questionAnswer[3]
-  questionAnswerE.value =  maturityAppraisalData.value[0].questionAnswer[4]
+
+function questionAnswerValue() {
+  questionAnswerA.value = maturityAppraisalData.value[0].questionAnswer[0]
+  questionAnswerB.value = maturityAppraisalData.value[0].questionAnswer[1]
+  questionAnswerC.value = maturityAppraisalData.value[0].questionAnswer[2]
+  questionAnswerD.value = maturityAppraisalData.value[0].questionAnswer[3]
+  questionAnswerE.value = maturityAppraisalData.value[0].questionAnswer[4]
 }
+
 function submitAnswer() {
   ElMessageBox.confirm('确定提交生成报告', '提示', {
     confirmButtonText: '确定',
@@ -226,13 +246,13 @@ function submitAnswer() {
       "itemScore": itemScore.value,
       "useTime": useTime.value,
       "sourceType": "1",
-      "appraisalId":appraisalId.value,
+      "appraisalId": appraisalId.value,
       "ytjType": "wakeup"
     }
     insertAppraisalAnswer(params).then(res => {
       console.log(res);
       pageLoading = false;
-    }).catch((err)=>{
+    }).catch((err) => {
       console.log("error")
       pageLoading = false;
     })
@@ -245,41 +265,48 @@ function submitAnswer() {
 
 
 <style scoped lang="scss">
-p{
+p {
   margin: 0;
-  padding:0;
+  padding: 0;
 }
-.maturity-game-page{
+
+.maturity-game-page {
   background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
   background-size: 1920px 1080px;
-  z-index:10;
+  z-index: 10;
   width: 100%;
   height: 1080px;
-  .page-content{
+
+  .page-content {
     width: 100%;
     position: absolute;
     top: 123px;
     bottom: 0;
     display: flex;
     justify-content: space-around;
-    .content-left{
+
+    .content-left {
       width: 244px;
     }
-    .content-center{
-      height:910px;
+
+    .content-center {
+      height: 910px;
       display: flex;
       flex-direction: column;
-      .content-img{
+
+      .content-img {
         width: 1187px;
         height: 424px;
         //border: 1px solid;
         margin-top: 40px;
         position: relative;
-        img{
+
+        img {
           width: 1187px;
           height: 424px;
         }
-        p{
+
+        p {
           width: 930px;
           position: absolute;
           top: 150px;
@@ -291,6 +318,7 @@ p{
           text-align: center;
         }
       }
+
       .progress-container {
         width: 100%;
         //background-color: #f3f3f3;
@@ -320,28 +348,33 @@ p{
         margin-left: 20px;
       }
     }
-    .content-right{
+
+    .content-right {
       display: flex;
       flex-direction: column;
       align-items: center;
-      .btn-img{
+
+      .btn-img {
         width: 244px;
         height: 77px;
         margin-top: 20px;
       }
-      .time{
-        width:220px;
+
+      .time {
+        width: 220px;
         height: 50px;
         //border: 1px solid;
         display: flex;
         justify-content: center;
         margin-top: 20px;
-        img{
+
+        img {
           width: 42px;
           height: 42px;
           //border: 1px solid;
         }
-        p{
+
+        p {
           width: 150px;
           font-weight: 300;
           font-size: 32px;
@@ -351,18 +384,21 @@ p{
       }
     }
   }
-  .group-btn{
+
+  .group-btn {
     display: flex;
     justify-content: space-around;
     margin-top: 80px;
-    img{
+
+    img {
       width: 200px;
       height: 135px;
     }
   }
 }
-.el-message-box{
-  max-width:none;
+
+.el-message-box {
+  max-width: none;
   width: 632px;
   height: 289px;
 }

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

@@ -13,17 +13,7 @@
     <p class="answer">从幼年到老年，随着生理的成熟、经验能力和自我概念的发展，个人对工作情况的认识和判断、对职业的选择及决定，也在不断地适应和发展。</p>
     <p  class="title">4.生涯发展是一个适应的过程</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>
-    </div>
+    <drag_component></drag_component>
   </div>
       </div>
   </div>
@@ -31,8 +21,9 @@
 </template>
 
 <script setup>
+import {onMounted} from "vue";
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-import {onMounted, reactive} from "vue";
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 const headinfo = ref({})
 
 function setHeadinfo(){
@@ -45,33 +36,7 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
-const position = reactive({ x: 100, y: 10 });
-let isDragging = false;
-let originX, originY;
 
-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()
 })
@@ -103,6 +68,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;
@@ -127,49 +93,7 @@ p{
       padding: 0 150px;
     }
   }
-  .content-bottom{
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    .draw{
-      width: 109px;
-      height: 170px;
-      margin-left: 34px;
-      img{
-        width: 109px;
-        height: 170px;
-      }
-    }
 
-    .ai-rabit{
-      position: absolute;
-      right: 6px;
-      top: -50px;
-      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/career_recognize/index.vue

@@ -13,17 +13,7 @@
           <img src="@/assets/images/wakeup/recognize-card3.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/plan_significance')">
         </div>
       </div>
-      <div class="content-bottom">
-        <div class="draw draggable-ball" @touchstart.native="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>
-      </div>
+      <drag_component></drag_component>
     </div>
   </div>
 
@@ -31,17 +21,12 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
 const router = useRouter()
 
 const headinfo = ref({})
 
-// const isDragging = ref(false)
-const offset = ref({ x: 0, y: 0 })
-const startX = ref(0)
-const startY = ref(0)
-
 function setHeadinfo(){
   headinfo.value = {
     title: '生涯唤醒学习系统',
@@ -63,34 +48,6 @@ function jumpTo(path) {
 onMounted(() => {
   setHeadinfo()
 })
-
-import { reactive, onMounted } from 'vue';
-
-const position = reactive({ x: 100, y: 10 });
-let isDragging = false;
-let originX, originY;
-
-const startDrag = (e) => {
-  isDragging = true;
-  originX = e.clientX - position.x;
-  originY = e.clientY - position.y;
-  document.addEventListener('mousemove', onMouseMove);
-  document.addEventListener('mouseup', stopDrag);
-};
-
-const onMouseMove = (e) => {
-  if (isDragging) {
-    position.x = e.clientX - originX;
-    position.y = e.clientY - originY;
-  }
-};
-
-const stopDrag = () => {
-  isDragging = false;
-  document.removeEventListener('mousemove', onMouseMove);
-  document.removeEventListener('mouseup', stopDrag);
-};
-
 </script>
 
 
@@ -190,12 +147,6 @@ const stopDrag = () => {
   border-radius: 10px;
   cursor: pointer;
 }
-.draggable-ball {
-  position: absolute;
-  cursor: pointer;
-  user-select: none; /* 防止拖拽时选中文字 */
-}
-
 
 </style>
 

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

@@ -9,16 +9,7 @@
         <p class="text-info">
           对高中生而言，做好生涯规划可以使我们以明确的人生目标为导向，激发自身潜能、发挥个人特长，增强克服困难的勇气与毅力，在实现学业与人生阶段性价值的同时，为未来的幸福生活奠定基础。
         </p>
-        <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>
+        <drag_component></drag_component>
       </div>
     </div>
   </div>
@@ -27,7 +18,8 @@
 
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-import {onMounted, reactive} from "vue";
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import {onMounted} from "vue";
 const headinfo = ref({})
 
 function setHeadinfo(){
@@ -40,33 +32,6 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/wakeup/career_recognize/index'
   }
 }
-const position = reactive({ x: 10, y: 10 });
-let isDragging = false;
-let originX, originY;
-
-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()
 })
@@ -111,55 +76,6 @@ p{
       margin-top: 100px;
     }
   }
-  .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;
-      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/career_recognize/plan_steps.vue

@@ -19,16 +19,7 @@
         <p class="answer">通过对自我认知与环境探索的组合分析，发展决策能力，做出生涯决策，确立自己的人生目标、职业目标、学业目标，同时根据长远目标，分解出中期目标和短期目标。</p>
         <p  class="title">6.反思改进（评估）</p>
         <p class="answer">行动的结果如何？是否适合我？坚持省察与批判的态度，评估目标的达成度、计划的可行性等，根据环境和自身的发展，适当调整和修正目标，让生涯历程既有规划又有变通，即人和环境均衡协调。</p>
-        <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>
+        <drag_component></drag_component>
       </div>
     </div>
   </div>
@@ -38,6 +29,7 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {onMounted, reactive} from "vue";
+import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 const headinfo = ref({})
 
 function setHeadinfo(){
@@ -133,56 +125,6 @@ p{
       padding: 0 150px;
     }
   }
-  .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/index.vue

@@ -3,7 +3,6 @@
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
       <div class="content-text-box">
-<!--         <img  class="head-icon" src="@/assets/images/wakeup/background-content-style.png" alt="404">-->
         <p>
           生涯是个人有目的、连续不断的生活模式，由我们选择扮演的各种生活角色、所从事的活动组成。生涯不仅仅是职业，对我们每个人而言，最大的幸福不只是在职业上的成功，更在于一生中是否能拥有一个多彩、平衡、充盈的生涯。
         </p>
@@ -25,54 +24,18 @@
           <img src="@/assets/images/wakeup/card5.png"  @click="jumpTo('/xjc-integratedmachine/wakeup/career_cinema/index')">
         </div>
       </div>
-<!--      <div class="content-bottom">-->
-<!--        <div class="draw draggable-ball" ref="draggableBox" @touchstart.native="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>-->
-<!--      </div>-->
-<!--      <div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0;">Drag me!</div>-->
-      <div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute;">拖拽我</div>
+     <drag_component></drag_component>
     </div>
   </div>
-
 </template>
 
 <script setup>
     import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
-
-
     const router = useRouter()
-
     const headinfo = ref({})
+    import { ref, onMounted, onUnmounted } from 'vue';
+    import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 
-    // const isDragging = ref(false)
-    const offset = ref({ x: 0, y: 0 })
-    // const startX = ref(0)
-    // const startY = ref(0)
-///
-
-    const draggedItem = ref(null);
-
-    function dragStart(event) {
-      draggedItem.value = event.target;
-    }
-
-    function drop(event) {
-      event.preventDefault(); // 防止默认处理（例如打开链接）
-      if (event.target !== draggedItem.value) {
-        const target = event.target; // 获取放置的目标元素
-        const item = draggedItem.value; // 获取被拖拽的元素
-        // 交换位置或进行其他操作
-        item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
-      }
-    }
-    /////
     function setHeadinfo(){
         headinfo.value = {
             title: '生涯唤醒学习系统',
@@ -92,32 +55,8 @@
         })
     }
 
-    // onMounted(() => {
-    //
-    // })
-    onMounted(() => {
-      setHeadinfo()
-      // let startPosX, startPosY, startTouchX, startTouchY;
-      //
-      // $('#draggable').on('touchstart', function(e) {
-      //   startPosX = $(this).position().left;
-      //   startPosY = $(this).position().top;
-      //   startTouchX = e.originalEvent.touches[0].pageX;
-      //   startTouchY = e.originalEvent.touches[0].pageY;
-      // });
-      //
-      // $('#draggable').on('touchmove', function(e) {
-      //   e.preventDefault(); // 阻止默认的滚动行为
-      //   const touchX = e.originalEvent.touches[0].pageX;
-      //   const touchY = e.originalEvent.touches[0].pageY;
-      //   const deltaX = touchX - startTouchX;
-      //   const deltaY = touchY - startTouchY;
-      //   $(this).css({
-      //     left: startPosX + deltaX,
-      //     top: startPosY + deltaY,
-      //   });
-      // });
-    });
+
+
 </script>
 
 
@@ -133,7 +72,7 @@
     position: absolute;
     top: 123px;
     bottom: 0;
-    p{
+       p{
       padding-left: 44px;
       padding-right: 44px;
       font-weight: 400;
@@ -222,26 +161,6 @@
         border-radius: 10px;
         cursor: pointer;
     }
-.draggable-ball {
-  touch-action: none;
-  position: absolute;
-  //width: 50px;
-  //height: 50px;
-  //background-color: blue;
-  //border-radius: 50%;
-  cursor: pointer;
-  user-select: none; /* 防止拖拽时选中文字 */
-}
 
-.draggable {
-  width: 100px;
-  height: 100px;
-  background-color: lightblue;
-  margin: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #ccc;
-}
 </style>