[feat][生涯唤醒]认识生涯

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

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

src/layout/index.vue

@@ -72,7 +72,6 @@
       background: url('@/assets/images/login/login-home-background.png') no-repeat;
       background-size: 100%;
       display: flex;
-      //justify-content: space-between;
       .page-left{
         background: url('@/assets/images/login/home-login-left-background.png') no-repeat;
         background-size: 100%;
@@ -115,7 +114,6 @@
       .page-right{
         margin-left: 30px;
         width: 70%;
-        //border: 1px solid;
         display: flex;
         justify-content:space-around;
         align-items: center;
@@ -129,24 +127,13 @@
             width: 330px;
             height: 400px;
           }
-
         }
-        //.img-box:nth-child(1),.img-box:nth-child(2),.img-box:nth-child(3){
-        //   margin-top: 20px;
-        //}
-        //.img-box:nth-child(4){
-        //   margin-left: 90px;
-        //   //margin-right: 90px;
-        //   //border: 1px solid;
-        //  border: #00afff 1px solid;
-        //  //margin-bottom: 30px;
-        //}
-        //.img-box:nth-child(5){
-        //  //margin-left: 90px;
-        //  margin-right: 90px;
-        //  //margin-bottom: 30px;
-        //  border: #00afff 1px solid;
-        //}
+        .img-box:nth-child(4){
+           margin-left: 210px;
+        }
+        .img-box:nth-child(5){
+          margin-right: 210px;
+        }
       }
     }
 </style>

src/router/router_wakeup.js

@@ -42,11 +42,7 @@ const router = [
         path: '/xjc-integratedmachine/wakeup/instructions',
         component: () => import('@/views/xjc-integratedmachine/wakeup/instructions.vue'),
     },
-//生涯唤醒首页使用说明
-    {
-        path: '/xjc-integratedmachine/wakeup/career_recognize/recognize',
-        component: () => import('@/views/xjc-integratedmachine/wakeup/career_recognize/recognize.vue'),
-    },
+
     //生涯发展阶段
     {
         path: '/xjc-integratedmachine/wakeup/career_recognize/development_stage',
@@ -59,8 +55,8 @@ const router = [
     },
 //生涯规划步骤
     {
-        path: '/xjc-integratedmachine/wakeup/career_recognize/development_stage',
-        component: () => import('@/views/xjc-integratedmachine/wakeup/career_recognize/development_stage.vue'),
+        path: '/xjc-integratedmachine/wakeup/career_recognize/plan_steps',
+        component: () => import('@/views/xjc-integratedmachine/wakeup/career_recognize/plan_steps.vue'),
     },
     //彩虹图知识讲解1
     {

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

@@ -1,12 +1,19 @@
 <template>
     <div class="contenter">
-      <img  class="head-icon" src="@/assets/images/login/login-return.png" @click="backTo" alt="404">
-
+      <div class="head-left">
+        <img  class="head-icon" src="@/assets/images/login/login-return.png" @click="backTo" alt="404">
+      </div>
 <!-- 等UI图更新继续画     <div>-->
-<!--        <div>{{headInfo.title}}</div>-->
-<!--        <div>头像</div>-->
-        <el-button @click="exit">退出</el-button>
-<!--        <el-button>使用说明</el-button>-->
+      <div class="head-title">
+        <div v-if="headinfo.title">{{headinfo.title}}</div>
+      </div>
+      <div class="head-right" v-if="!headinfo.isLogin">
+        <div class="right-user">
+          <img  src="@/assets/images/wakeup/user.png" @click="backTo" alt="404">
+        </div>
+        <el-button class="head-right-btn1" >使用说明</el-button>
+        <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
+      </div>
 <!--      </div>-->
     </div>
 
@@ -47,14 +54,55 @@
       top: 0;
       left: 0;
       width:100%;
-      height: 123px;
-      background: #FFFFFF;
+      height: 100px;
       display: flex;
       align-items: center;
+      background-color: rgba(251,252,253,0.5);
+      justify-content: space-between;
+      .head-left{
+        width: 464px;
+      }
       .head-icon{
         width: 74px;
         height: 74px;
         margin-left: 74px;
       }
+      .head-title{
+        width: 464px;
+        font-weight: bold;
+        font-size: 48px;
+        color: #060606;
+      }
+      .head-right{
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          width: 464px;
+         .head-right-btn1{
+           width: 136px;
+           height: 74px;
+           background: #2BC17B;
+           border-radius: 10px 10px 10px 10px;
+           font-weight: 400;
+           font-size: 24px;
+           color: #FFFFFF;
+        }
+        .head-right-btn2{
+          width: 136px;
+          height: 74px;
+          background: #FB5451;
+          border-radius: 10px 10px 10px 10px;
+          font-weight: 400;
+          font-size: 24px;
+          color: #FFFFFF;
+        }
+        .right-user{
+
+          img{
+            width: 85px;
+            height: 85px;
+          }
+        }
+      }
     }
 </style>

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

@@ -90,9 +90,6 @@ function jumpReturn(path) {
     }
     .content-left{
       width: 600px;
-      //height: 100px;
-      //height: 1000px;
-      //border: 1px solid;
       margin-left: 274px;
       margin-top: 70px;
       .content-form{

src/views/xjc-integratedmachine/login/student_forgetpass.vue

@@ -30,6 +30,7 @@
                   placeholder="请输入新密码"
                   show-password
                   class="form-box-input1"
+                  @blur="checkPass"
               >
                 <template #prefix>
                   <svg-icon icon-class="password_login" class="el-input__icon input-icon"/>
@@ -42,6 +43,7 @@
                   v-model.trim="form.reppassword"
                   placeholder="请确认新密码"
                   show-password
+                  @blur="checkPass"
                   class="form-box-input1"
               >
                 <template #prefix>
@@ -94,6 +96,8 @@
         secretQuestion: '',
         secretAnswer: '',
     })
+    const checkPassWord = ref(false)
+
     const headinfo = ref({
       backUrl:'/xjc-integratedmachine/login/student_login',
       isLogin:true,
@@ -105,6 +109,8 @@
             })
         }
     }
+    function checkPass() {
+    }
 
     const loginRules = {
       userName: [{required: true, trigger: "blur", message: "请输入您的身份证号"}],
@@ -117,18 +123,22 @@
       proxy.$refs.loginRef.validate(valid => {
         if (valid) {
           loading.value = true
-          changPasswordBySecret(form.value).then(resp =>{
-            proxy.$modal.msgSuccess("修改密码成功")
-            //跳转到主页
-            router.push({
-              path : '/xjc-integratedmachine/login/student_login',
-              query :{
-                userName : form.value.userName,
-                password : form.value.password,
-                modulePath : params.modulePath
-              }
+          if(form.value.password != form.value.reppassword){
+            proxy.$modal.msgError("密码不一致")
+          }else {
+            changPasswordBySecret(form.value).then(resp => {
+              proxy.$modal.msgSuccess("修改密码成功")
+              //跳转到主页
+              router.push({
+                path: '/xjc-integratedmachine/login/student_login',
+                query: {
+                  userName: form.value.userName,
+                  password: form.value.password,
+                  modulePath: params.modulePath
+                }
+              })
             })
-          })
+          }
         }
       })
 
@@ -220,11 +230,20 @@
             height: 65px;
             background: #F5F9FA;
             border-radius: 5px 5px 5px 5px;
-            margin-top: 20px;
+            margin-top: 30px;
             ::v-deep .el-input__wrapper{
               background: #F5F9FA;
               box-shadow: none;
             }
+
+          }
+          ::v-deep .el-form-item__error{
+            font-size: 14px !important;
+            margin-top: 3px;
+            margin-bottom: 3px;
+          }
+          ::v-deep .el-input__inner{
+            font-size: 16px !important;
           }
           .form-box-text{
             font-weight: 400;
@@ -236,7 +255,7 @@
             font-weight: 400;
             font-size: 16px;
             color: #5956E9;
-            margin-top: 12px;
+            margin-top: 20px;
           }
 
           .form-box-btn1{
@@ -244,7 +263,7 @@
             height: 65px;
             background-color: #5956E9;
             border-radius: 33px 33px 33px 33px;
-            margin:16px auto 26px;
+            margin:24px auto 26px;
             font-weight: 500;
             font-size: 18px;
             color: #FFFFFF;

src/views/xjc-integratedmachine/login/student_login.vue

@@ -197,18 +197,26 @@
             height: 65px;
             background: #F5F9FA;
             border-radius: 5px 5px 5px 5px;
-            margin-top: 20px;
+            margin-top: 30px;
             ::v-deep .el-input__wrapper{
               background: #F5F9FA;
               box-shadow: none;
             }
 
           }
+          ::v-deep .el-form-item__error{
+            font-size: 14px !important;
+            margin-top: 3px;
+            margin-bottom: 3px;
+          }
+          ::v-deep .el-input__inner{
+            font-size: 16px !important;
+          }
           .form-box-text{
             font-weight: 400;
             font-size: 16px;
             color: #979797;
-            margin-top: 6px;
+            margin-top: 28px;
             text-align: center;
           }
           .form-box-text1{

src/views/xjc-integratedmachine/login/visitor_login.vue

@@ -45,7 +45,7 @@
                   <el-button  v-show="seconds === 60" class="form-box-btn2"  @click="getCheckCode">
                     发送验证码
                   </el-button>
-                  <el-button class="form-box-btn2" v-show="seconds < 60 && seconds >=0" @click="getCheckCode">
+                  <el-button class="form-box-btn2" v-show="seconds < 60 && seconds >=0" style="background: #DCDCDD;" @click="getCheckCode">
                     剩余{{seconds}}秒
                   </el-button>
                 </template>
@@ -312,15 +312,16 @@ function registHandler() {
         regist(loginForm.value).then(resp =>{
           proxy.$modal.msgSuccess("注册成功")
           clearFrom()
+          step.value = 4
           //跳转到主页
-          router.push({
-            path : '/xjc_login',
-            query :{
-              userName : loginForm.value.userName,
-              password : loginForm.value.password,
-              modulePath : params.modulePath
-            }
-          })
+          // router.push({
+          //   path : '/xjc_login',
+          //   query :{
+          //     userName : loginForm.value.userName,
+          //     password : loginForm.value.password,
+          //     modulePath : params.modulePath
+          //   }
+          // })
         })
       }
     }
@@ -427,25 +428,36 @@ div,p,input{
             height: 65px;
             background: #F5F9FA;
             border-radius: 5px 5px 5px 5px;
-            margin-top: 20px;
+            margin-top: 30px;
             ::v-deep .el-input__wrapper{
               background: #F5F9FA;
               box-shadow: none;
             }
+
+          }
+          ::v-deep .el-form-item__error{
+            font-size: 14px !important;
+            margin-top: 3px;
+            margin-bottom: 3px;
+          }
+          ::v-deep .el-input__inner{
+            font-size: 16px !important;
           }
           .form-box-select {
             width: 446px;
             height: 65px;
             background: #F5F9FA;
             border-radius: 5px 5px 5px 5px;
-            margin-top: 20px;
+            margin-top: 30px;
 
             ::v-deep .el-select__wrapper {
               height: 65px;
               background: #F5F9FA;
               box-shadow: none;
             }
-
+            ::v-deep .el-input__inner{
+              font-size: 16px !important;
+            }
             ::v-deep .el-select-dropdown__item {
               text-align: left; /* 或者 center，根据需要调整 */
               padding-left: 30px !important;
@@ -453,12 +465,25 @@ div,p,input{
             ::v-deep .el-select-dropdown__item {
               text-align: center !important; /* 使用 !important 来确保样式覆盖 */
             }
+            ::v-deep.el-form-item__error{
+              font-size: 14px !important;
+              margin-top: 3px;
+            }
+            ::v-deep .el-select__placeholder{
+              font-size: 16px;
+            }
+            ::v-deep .el-select__selected-item>span{
+              font-size: 16px;
+            }
+            ::v-deep .el-select-dropdown__item{
+              font-size: 16px;
+            }
           }
           .form-box-text{
             font-weight: 400;
             font-size: 16px;
             color: #979797;
-            margin-top: 10px;
+            margin-top: 30px;
             text-align: center;
           }
           .form-box-text1{
@@ -473,7 +498,7 @@ div,p,input{
             height: 65px;
             background-color: #5956E9;
             border-radius: 33px 33px 33px 33px;
-            margin:16px auto 26px;
+            margin:24px auto 26px;
             font-weight: 500;
             font-size: 18px;
             color: #FFFFFF;

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

@@ -1,11 +1,201 @@
 <template>
-    生涯成熟度知识讲解
+  <div class="wake-up-page">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/recognize-card1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/development_stage')">
+        </div>
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/recognize-card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/plan_steps')">
+        </div>
+        <div class="img-box">
+          <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" @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>
+    </div>
+  </div>
+
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_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: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/wakeup/index'
+  }
+}
+
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+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>
 
-<style scoped>
+
+<style scoped lang="scss">
+.wake-up-page{
+  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%;
+    position: absolute;
+    top: 123px;
+    bottom: 0;
+    p{
+      padding-left: 44px;
+      padding-right: 44px;
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      letter-spacing: 3px;
+      text-indent: 2em;
+    }
+  }
+  .content-text-box{
+    width: 100%;
+    height: 126px;
+    background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
+    background-size: 1920px 126px;
+    margin-top:23px;
+    display: flex;
+    align-items: center;
+  }
+  .page-img-box{
+    width: 100%;
+    display: flex;
+    justify-content:space-around;
+    align-items: center;
+    margin-top: 40px;
+    .img-box{
+      width: 476px;
+      height: 692px;
+      img{
+        width: 476px;
+        height: 692px;
+      }
+    }
+  }
+
+  .content-bottom{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    .draw{
+      width: 109px;
+      height: 170px;
+      margin-left: 100px;
+      img{
+        width: 109px;
+        height: 170px;
+      }
+    }
+
+    .ai-rabit{
+      position: absolute;
+      right: 100px;
+      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;
+      }
+    }
+  }
+
+}
+.temp{
+  width:20vw;
+  height: 10vh;
+  background: #85eff5;
+  border: solid 1px #a2fffc;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.draggable-ball {
+  position: absolute;
+  cursor: pointer;
+  user-select: none; /* 防止拖拽时选中文字 */
+}
+
 
 </style>
+

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

@@ -1,11 +1,175 @@
 <template>
-    生涯发展阶段
+  <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">
+      人们的兴趣和能力、人们生活和工作的处境以及由此形成的自我概念，会在青少年晚期（21-22岁）之后越来越稳定，在生涯选择和适应上持续发挥影响力，促进青少年不断淬炼出“我要做好自己”的意识。</p>
+    <p  class="title"> 2.生涯发展具有阶段性特点</p>
+    <p class="answer">生涯发展分成长、探索、建立、成熟、衰退五个连续的发展阶段，每个阶段都有其特定的任务，初中生、高中生处于生涯探索阶段，主要任务是自我认知、了解世界、发展兴趣、逐步明确发展方向。</p>
+    <p  class="title">3.生涯发展是一个逐渐发展的过程</p>
+    <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>
+  </div>
+      </div>
+  </div>
+
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+import {onMounted, reactive} from "vue";
+const headinfo = ref({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    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()
+})
 
 </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;
+    .text-info{
+      font-weight: bold;
+      font-size: 32px;
+      color: #333333;
+      line-height: 52px;
+      padding: 0 150px;
+    }
+    .title{
+      font-weight: bold;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      margin-top: 10px;
+      padding: 0 150px;
+    }
+
+    .answer{
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      text-indent: 2em;
+      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

@@ -1,11 +1,201 @@
 <template>
-    认识生涯
+  <div class="wake-up-page">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-img-box">
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/recognize-card1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/development_stage')">
+        </div>
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/recognize-card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/plan_steps')">
+        </div>
+        <div class="img-box">
+          <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>
+    </div>
+  </div>
+
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_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: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/xjc-integratedmachine/wakeup/index'
+  }
+}
+
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+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>
 
-<style scoped>
+
+<style scoped lang="scss">
+.wake-up-page{
+  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%;
+    position: absolute;
+    top: 123px;
+    bottom: 0;
+    p{
+      padding-left: 44px;
+      padding-right: 44px;
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      letter-spacing: 3px;
+      text-indent: 2em;
+    }
+  }
+  .content-text-box{
+    width: 100%;
+    height: 126px;
+    background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
+    background-size: 1920px 126px;
+    margin-top:23px;
+    display: flex;
+    align-items: center;
+  }
+  .page-img-box{
+    width: 100%;
+    display: flex;
+    justify-content:space-around;
+    align-items: center;
+    margin-top: 40px;
+    .img-box{
+      width: 476px;
+      height: 692px;
+      img{
+        width: 476px;
+        height: 692px;
+      }
+    }
+  }
+
+  .content-bottom{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    .draw{
+      width: 109px;
+      height: 170px;
+      margin-left: 100px;
+      img{
+        width: 109px;
+        height: 170px;
+      }
+    }
+
+    .ai-rabit{
+      position: absolute;
+      right: 100px;
+      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;
+      }
+    }
+  }
+
+}
+.temp{
+  width:20vw;
+  height: 10vh;
+  background: #85eff5;
+  border: solid 1px #a2fffc;
+  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

@@ -1,11 +1,160 @@
 <template>
-    生涯规划意义
+  <div class="plan_significance">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div class="page-box">
+        <p class="text-info title-text">
+          生涯规划是一个人规划生涯发展的行为，在综合考虑个人兴趣、性格、能力、价值观及环境因素的基础上，对未来发展道路进行合理安排，进而主动定位自己在人生中的角色与方向，以期达到自我实现的目标。这需要我们持续更新对自我与外部世界的认知，通过不断反馈与灵活调整，使规划始终适配自身成长与环境变化。
+        </p>
+        <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>
+        </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({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    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()
+})
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+p{
+  margin: 0;
+  padding: 0;
+}
+.plan_significance{
+  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;
+    .text-info{
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      padding: 0 150px;
+      text-indent: 2em;
+    }
+    .title-text{
+      margin-top: 100px;
+    }
+  }
+  .content-bottom{
+    width: 100%;
+    display: flex;
+    justify-content: right;
+    //position: relative;
+    position: fixed;
+    bottom: 3px;
+    right: 20px;
+    .draw{
+      width: 109px;
+      height: 170px;
+      margin-left: -18px;
+      img{
+        width: 109px;
+        height: 170px;
+      }
+    }
+
+    .ai-rabit{
+      //position: absolute;
+      //right: 6px;
+      //top: -50px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .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

@@ -1,11 +1,185 @@
 <template>
-    生涯规划步骤
+  <div class="plan_steps">
+    <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">
+          关注未来发展方向，适应当下生活学业，思考要走哪条路、成为什么样的人。</p>
+        <p  class="title"> 2.自我认知（知己）——推荐使用“自我认知学习系统”</p>
+        <p class="answer"> 探索与认识自己的兴趣、能力、性格、价值观，评估学业状况、健康状况等，清晰定位“我是怎样一个人？我要做什么？”</p>
+        <p  class="title">3.环境探索（知彼）——推荐使用“环境探索学习系统”</p>
+        <p class="answer">外在世界给我的机会是什么？包括对升学路径、大学专业、未来职业发展与工作内容、产业结构变迁等的探索和体验，对家庭资源的探索，对社会环境状况的了解，分析自身与环境的关系。</p>
+        <p  class="title">4.确立目标（决策）——推荐使用“生涯决策学习系统”</p>
+        <p class="answer">通过对自我认知与环境探索的组合分析，发展决策能力，做出生涯决策，确立自己的人生目标、职业目标、学业目标，同时根据长远目标，分解出中期目标和短期目标。</p>
+        <p  class="title">5.规划行动（实践）——推荐使用“规划管理学习系统”</p>
+        <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>
+        </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({})
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    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()
+})
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+p{
+  margin: 0;
+  padding: 0;
+}
+.plan_steps{
+  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;
+    .text-info{
+      font-weight: bold;
+      font-size: 32px;
+      color: #333333;
+      line-height: 42px;
+      padding: 0 150px;
+    }
+    .title{
+      font-weight: bold;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      margin-top: 6px;
+      padding: 0 150px;
+    }
+
+    .answer{
+      font-size: 30px;
+      color: #333333;
+      line-height: 42px;
+      text-indent: 2em;
+      padding: 0 150px;
+    }
+  }
+  .content-bottom{
+    width: 100%;
+    display: flex;
+    justify-content: right;
+    //position: relative;
+    position: fixed;
+    bottom: 3px;
+    right: 20px;
+    .draw{
+      width: 109px;
+      height: 170px;
+      margin-left: -18px;
+      img{
+        width: 109px;
+        height: 170px;
+      }
+    }
+
+    .ai-rabit{
+      //position: absolute;
+      //right: 6px;
+      //top: -50px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .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/recognize.vue

@@ -1,11 +0,0 @@
-<template>
-    认识生涯
-</template>
-
-<script setup>
-
-</script>
-
-<style scoped>
-
-</style>

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

@@ -1,22 +1,44 @@
 <template>
+  <div class="wake-up-page">
     <head-component :headinfo=headinfo></head-component>
-    <div style="display: flex;flex-direction: row;margin-top: 130px">
-        <div class="temp" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/index')">
-            认识生涯
+    <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>
+      </div>
+      <div class="page-img-box">
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/card1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/index')">
         </div>
-        <div class="temp" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/paint')">
-            生涯彩虹图
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/paint')">
         </div>
-        <div class="temp" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/index')">
-            生涯成熟度测评
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/card3.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/index')">
         </div>
-        <div class="temp" @click="jumpTo('/xjc-integratedmachine/wakeup/career_example/index')">
-            生涯榜样
+        <div class="img-box">
+          <img src="@/assets/images/wakeup/card4.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_example/index')">
         </div>
-        <div class="temp" @click="jumpTo('/xjc-integratedmachine/wakeup/career_cinema/index')">
-            生涯影院
+        <div class="img-box">
+          <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>
+  </div>
+
 </template>
 
 <script setup>
@@ -26,6 +48,12 @@
     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: '生涯唤醒学习系统',
@@ -39,7 +67,6 @@
 
 
     function jumpTo(path) {
-        console.log("path:",path)
         router.push({
             path: path,
             query: {name: 123}
@@ -50,11 +77,159 @@
         setHeadinfo()
     })
 
+    import { reactive, onMounted } from 'vue';
+
+    const position = reactive({ x: 100, y: 10 });
+    let isDragging = false;
+    let originX, originY;
+
+    const startDrag = (e) => {
+      console.log("e",e);
+      // let chartDiv = document.getElementById("ring-chart");
+
+      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);
+    };
+
+    const onMouseMove = (e) => {
+      if (isDragging) {
+        position.x = e.clientX - originX;
+        position.y = e.clientY - originY;
+      }
+    };
+
+    const stopDrag = () => {
+      isDragging = false;
+      document.removeEventListener('touchmove', onMouseMove);
+      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;
+    };
 
+    const handleTouchMove = (event) => {
+      currentX = event.touches[0].clientX - startX;
+      currentY = event.touches[0].clientY - startY;
+      draggableBox.value.style.transform = `translate3D(${currentX}px, ${currentY}px, 0)`;
+    };
+
+    const handleTouchEnd = () => {
+      // 可以添加触摸结束后的处理逻辑，比如设置一个最终的拖拽位置等
+    };
 </script>
 
 
-<style scoped>
+<style scoped lang="scss">
+.wake-up-page{
+  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%;
+    position: absolute;
+    top: 123px;
+    bottom: 0;
+    p{
+      padding-left: 44px;
+      padding-right: 44px;
+      font-weight: 400;
+      font-size: 30px;
+      color: #333333;
+      line-height: 52px;
+      letter-spacing: 3px;
+      text-indent: 2em;
+    }
+    }
+  .content-text-box{
+    width: 100%;
+    //height: 126px;
+    background: url('@/assets/images/wakeup/background-content-style.png') no-repeat;
+    background-size: 1920px 126px;
+    margin-top:23px;
+    display: flex;
+    align-items: center;
+  }
+  .page-img-box{
+      width: 100%;
+      display: flex;
+      justify-content:space-around;
+      align-items: center;
+      margin-top: 49px;
+      .img-box{
+        width: 366px;
+        height: 501px;
+        img{
+          width: 350px;
+          height: 501px;
+        }
+      }
+    }
+
+  .content-bottom{
+    width: 100%;
+    //height: 37px;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    .draw{
+      width: 109px;
+      height: 170px;
+      margin-left: -76px;
+      img{
+        width: 109px;
+        height: 170px;
+      }
+    }
+
+    .ai-rabit{
+      //width: 178px;
+      //height: 274px;
+      position: absolute;
+      right: 45px;
+      top: -50px;
+      display: flex;
+      //justify-content: space-between;
+      align-items: center;
+      .ai-rabit-text{
+        width: 345px;
+        height: 89px;
+        //border: 1px solid;
+        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;
+      }
+    }
+  }
+
+}
     .temp{
        width:20vw;
         height: 10vh;
@@ -63,4 +238,15 @@
         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; /* 防止拖拽时选中文字 */
+}
 </style>
+