Merge remote-tracking branch 'origin/master'

package.json

@@ -47,7 +47,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "5.2.4",
     "less": "^4.4.0",
-    "sass-embedded": "1.89.1",
+    "sass": "^1.91.0",
     "unplugin-auto-import": "0.18.6",
     "unplugin-vue-setup-extend-plus": "1.0.1",
     "vite": "6.3.5",

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

@@ -0,0 +1,46 @@
+import request from "@/utils/request";
+
+export function platformytjappraisalreport1061(query) {
+  return request({
+    url: "/platform/ytj/appraisal/report/1061",
+    method: "post",
+    data: query,
+  });
+}
+export function platformytjappraisalcommon(query) {
+  return request({
+    url: "/platform/ytj/appraisal/common",
+    method: "post",
+    data: query,
+  });
+}
+
+export function platformytjappraisalinsertAppraisalAnswer(query) {
+  return request({
+    url: "/platform/ytj/appraisal/insertAppraisalAnswer",
+    method: "post",
+    data: query,
+  });
+}
+//成熟度测评题目
+export function maturityAppraisalList(query) {
+  return request({
+    url: "/platform/ytj/appraisal/common",
+    method: "post",
+    data: query,
+  });
+}
+export function insertAppraisalAnswer(query) {
+  return request({
+    url: "/platform/ytj/appraisal/insertAppraisalAnswer",
+    method: "post",
+    data: query,
+  });
+}
+export function maturityReport(query) {
+  return request({
+    url: "/platform/ytj/appraisal/report/3001",
+    method: "post",
+    data: query,
+  });
+}

src/api/xjc-integratedmachine/planTimeManegement/rainbow.js

@@ -0,0 +1,75 @@
+import request from '@/utils/request'
+
+// 查询彩虹图数据列表
+export function listRainbow(query) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询彩虹图数据详细
+export function getRainbow(id) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/' + id,
+    method: 'get'
+  })
+}
+
+// 新增彩虹图数据
+export function addRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改彩虹图数据
+export function updateRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除彩虹图数据
+export function delRainbow(id) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/' + id,
+    method: 'delete'
+  })
+}
+//
+export function newRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/newRainbow',
+    method: 'post',
+    data : data
+  })
+}
+export function saveRainbow(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/saveRainbow',
+    method: 'post',
+    data : data
+  })
+}
+export function finish(data) {
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/finish',
+    method: 'post',
+    data : data
+  })
+}
+
+export function sendRainbowMail(data) {
+  console.log("dddd",data)
+  return request({
+    url: '/integratedmachine/wakeup/rainbow/sendMail',
+    method: 'post',
+    data : data
+  })
+}

src/router/router_plan.js

@@ -1,175 +1,256 @@
 const router = [
-    //规划管理首页
-    {
-        path: '/xjc-integratedmachine/plan/index',
-        component: () => import('@/views/xjc-integratedmachine/plan/index'),
-    },
-    //制定生涯规划书1
-    {
-        path: '/xjc-integratedmachine/plan/develop_career_plan1',
-        component: () => import('@/views/xjc-integratedmachine/plan/develop_career_plan1.vue'),
-    },
-    //制定生涯规划书2
-    {
-        path: '/xjc-integratedmachine/plan/develop_career_plan2',
-        component: () => import('@/views/xjc-integratedmachine/plan/develop_career_plan2.vue'),
-    },
-    //制定生涯规划书评估信息
-    {
-        path: '/xjc-integratedmachine/plan/develop_careerplan_information',
-        component: () => import('@/views/xjc-integratedmachine/plan/develop_careerplan_information.vue'),
-    },
-    //目标管理首页
-    {
-        path: '/xjc-integratedmachine/plan/aim/aim_management_index',
-        component: () => import('@/views/xjc-integratedmachine/plan/aim/aim_management_index.vue'),
-    },
-    //目标管理知识讲解
-    {
-        path: '/xjc-integratedmachine/plan/aim/aim_explanation_knowledge',
-        component: () => import('@/views/xjc-integratedmachine/plan/aim/aim_explanation_knowledge.vue'),
-    },
-    //目标管理交互
-    {
-        path: '/xjc-integratedmachine/plan/aim/aim_management_interaction',
-        component: () => import('@/views/xjc-integratedmachine/plan/aim/aim_management_interaction.vue'),
-    },
-    //时间管理菜单页
-    {
-        path: '/xjc-integratedmachine/plan/time/time_management_menu',
-        component: () => import('@/views/xjc-integratedmachine/plan/time/time_management_menu.vue'),
-    },
-    //时间管理4D法首页
-    {
-        path: '/xjc-integratedmachine/plan/time/time_management_4d_index',
-        component: () => import('@/views/xjc-integratedmachine/plan/time/time_management_4d_index.vue'),
-    },
-    //时间管理4D法讲解
-    {
-        path: '/xjc-integratedmachine/plan/time/time_management_4d_explanation',
-        component: () => import('@/views/xjc-integratedmachine/plan/time/time_management_4d_explanation.vue'),
-    },
-    //时间管理测评首页
-    {
-        path: '/xjc-integratedmachine/plan/time/time_management_assessment_index',
-        component: () => import('@/views/xjc-integratedmachine/plan/time/time_management_assessment.vue'),
-    },
-    //时间管理测评知识讲解
-    {
-        path: '/xjc-integratedmachine/plan/time/time_management_assessment_explanation',
-        component: () => import('@/views/xjc-integratedmachine/plan/time/time_management_assessment_explanation.vue'),
-    },
-    //时间管理测评
-    {
-        path: '/xjc-integratedmachine/plan/time/time_management_assessment',
-        component: () => import('@/views/xjc-integratedmachine/plan/time/time_management_assessment.vue'),
-    },
-    //时间管理测评网页报告
-    {
-        path: '/xjc-integratedmachine/plan/time/time_management_assessment_webreport',
-        component: () => import('@/views/xjc-integratedmachine/plan/time/time_management_assessment_webreport.vue'),
-    },
-    //自控力测评首页
-    {
-        path: '/xjc-integratedmachine/plan/self_control/self_control/self_control_index',
-        component: () => import('@/views/xjc-integratedmachine/plan/self_control/self_control_index.vue'),
-    },
-    //自控力测评知识讲解
-    {
-        path: '/xjc-integratedmachine/plan/self_control/self_control_explanation',
-        component: () => import('@/views/xjc-integratedmachine/plan/self_control/self_control_explanation.vue'),
-    },
-    //自控力测评
-    {
-        path: '/xjc-integratedmachine/plan/self_control/self_control_assessment',
-        component: () => import('@/views/xjc-integratedmachine/plan/self_control/self_control_assessment.vue'),
-    },
-    //自控力测评网页报告
-    {
-        path: '/xjc-integratedmachine/plan/self_control/self_control_assessment_webreport',
-        component: () => import('@/views/xjc-integratedmachine/plan/self_control/self_control_assessment_webreport.vue'),
-    },
-    //生涯成熟度复测首页
-    {
-        path: '/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index',
-        component: () => import('@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index.vue'),
-    },
-    //生涯成熟度复测知识讲解
-    {
-        path: '/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_explanation',
-        component: () => import('@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_explanation.vue'),
-    },
-    //生涯成熟度复测测评
-    {
-        path: '/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment',
-        component: () => import('@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment.vue'),
-    },
-    //生涯成熟度复测测评网页报告
-    {
-        path: '/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment_webreport',
-        component: () => import('@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment_webreport.vue'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    },
-    //
-    {
-        path: '/xjc-integratedmachine/plan/',
-        component: () => import('@/views/xjc-integratedmachine/plan/'),
-    }
-]
+  //时间管理测评答题页
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_assessment_init",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_assessment_init"
+      ),
+  },
+  //时间管理测评首页
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_assessment_index",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_assessment_index"
+      ),
+  },
+  //时间管理4d开始测评
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_4d_evaluation",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_4d_evaluation"
+      ),
+  },
+  //规划管理首页
+  {
+    path: "/xjc-integratedmachine/plan/index",
+    component: () => import("@/views/xjc-integratedmachine/plan/index"),
+  },
+  //制定生涯规划书1
+  {
+    path: "/xjc-integratedmachine/plan/develop_career_plan1",
+    component: () =>
+      import("@/views/xjc-integratedmachine/plan/develop_career_plan1.vue"),
+  },
+  //制定生涯规划书2
+  {
+    path: "/xjc-integratedmachine/plan/develop_career_plan2",
+    component: () =>
+      import("@/views/xjc-integratedmachine/plan/develop_career_plan2.vue"),
+  },
+  //制定生涯规划书评估信息
+  {
+    path: "/xjc-integratedmachine/plan/develop_careerplan_information",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/develop_careerplan_information.vue"
+      ),
+  },
+  //目标管理首页
+  {
+    path: "/xjc-integratedmachine/plan/aim/aim_management_index",
+    component: () =>
+      import("@/views/xjc-integratedmachine/plan/aim/aim_management_index.vue"),
+  },
+  //目标管理知识讲解
+  {
+    path: "/xjc-integratedmachine/plan/aim/aim_explanation_knowledge",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/aim/aim_explanation_knowledge.vue"
+      ),
+  },
+  //目标管理交互
+  {
+    path: "/xjc-integratedmachine/plan/aim/aim_management_interaction",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/aim/aim_management_interaction.vue"
+      ),
+  },
+  //时间管理菜单页
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_menu",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_menu.vue"
+      ),
+  },
+  //时间管理4D法首页
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_4d_index",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_4d_index.vue"
+      ),
+  },
+  //时间管理4D法讲解
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_4d_explanation",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_4d_explanation.vue"
+      ),
+  },
+  //时间管理测评首页
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_assessment_index",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_assessment.vue"
+      ),
+  },
+  //时间管理测评知识讲解
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_assessment_explanation",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_assessment_explanation.vue"
+      ),
+  },
+  //时间管理测评
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_assessment",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_assessment.vue"
+      ),
+  },
+  //时间管理测评网页报告
+  {
+    path: "/xjc-integratedmachine/plan/time/time_management_assessment_webreport",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/time/time_management_assessment_webreport.vue"
+      ),
+  },
+  //自控力测评首页
+  {
+    path: "/xjc-integratedmachine/plan/self_control/self_control/self_control_index",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/self_control/self_control_index.vue"
+      ),
+  },
+  //自控力测评知识讲解
+  {
+    path: "/xjc-integratedmachine/plan/self_control/self_control_explanation",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/self_control/self_control_explanation.vue"
+      ),
+  },
+  //自控力测评
+  {
+    path: "/xjc-integratedmachine/plan/self_control/self_control_assessment",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/self_control/self_control_assessment.vue"
+      ),
+  },
+  //自控力测评网页报告
+  {
+    path: "/xjc-integratedmachine/plan/self_control/self_control_assessment_webreport",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/self_control/self_control_assessment_webreport.vue"
+      ),
+  },
+  //生涯成熟度复测首页
+  {
+    path: "/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_index.vue"
+      ),
+  },
+  //生涯成熟度复测知识讲解
+  {
+    path: "/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_explanation",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_explanation.vue"
+      ),
+  },
+  //生涯成熟度复测测评
+  {
+    path: "/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment.vue"
+      ),
+  },
+  //生涯成熟度复测测评网页报告
+  {
+    path: "/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment_webreport",
+    component: () =>
+      import(
+        "@/views/xjc-integratedmachine/plan/career_maturity/career_maturity_retest_assessment_webreport.vue"
+      ),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+  //
+  {
+    path: "/xjc-integratedmachine/plan/",
+    component: () => import("@/views/xjc-integratedmachine/plan/"),
+  },
+];
 export default {
-    router
-}
+  router,
+};

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

@@ -1,13 +1,115 @@
 <template>
-    自我认知首页
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="page-content">
+      <!-- <div class="top">
+        <img src="@/assets/images/wakeup/maturity/maturity-game-title.png" />
+      </div> -->
+      <div class="bottom">
+        <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/maturity_game'
+            )
+          "
+        />
+      </div>
+      <drag_component></drag_component>
+    </div>
+  </div>
 </template>
 
-<script>
-    export default {
-        name: "index"
-    }
-</script>
+<script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted } from "vue";
+
+const router = useRouter();
+
+const headinfo = ref({});
+const draggedItem = ref(null);
+
+function dragStart(event) {
+  draggedItem.value = event.target;
+}
 
-<style scoped>
+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: "生涯唤醒学习系统",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrlUse: true,
+  };
+}
+onMounted(() => {
+  setHeadinfo();
+});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.maturity-game-page {
+  background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+    no-repeat;
+  background-size: 1920px 1080px;
+  z-index: 10;
+  width: 100%;
+  height: 1080px;
+  .page-content {
+    width: 100%;
+    position: absolute;
+    top: 123px;
+    bottom: 0;
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
 </style>

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

@@ -1,29 +1,34 @@
 <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
+        class="draw draggable"
+        ref="draggableRef"
+        :style="{ top: position.y - 360 + '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"/>
+        <img src="@/assets/images/wakeup/ai-rabit.png" />
       </div>
     </div>
   </div>
 </template>
 <script setup>
-import {ref, onMounted, onUnmounted} from 'vue';
+import { ref, onMounted, onUnmounted } from "vue";
 
 const draggableRef = ref(null);
-const position = ref({x: 0, y: 0});
+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);
+  document.addEventListener("mousemove", onMouseMove);
+  document.addEventListener("mouseup", onMouseUp);
 };
 
 const onTouchStart = (event) => {
@@ -31,8 +36,8 @@ const onTouchStart = (event) => {
     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});
+    document.addEventListener("touchmove", onTouchMove, { passive: true });
+    document.addEventListener("touchend", onTouchEnd, { passive: true });
   }
 };
 
@@ -52,35 +57,35 @@ const onTouchMove = (event) => {
 
 const onMouseUp = () => {
   dragging.value = false;
-  document.removeEventListener('mousemove', onMouseMove);
-  document.removeEventListener('mouseup', onMouseUp);
+  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});
+  document.removeEventListener("touchmove", onTouchMove);
+  document.removeEventListener("touchend", onTouchEnd);
 };
 
 onMounted(() => {
   const draggable = draggableRef.value;
-  draggable.addEventListener('mousedown', onMouseDown);
-  draggable.addEventListener('touchstart', onTouchStart, {passive: true});
+  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});
-// });
-
+onUnmounted(() => {
+  const draggable = draggableRef.value;
+  if (draggable) {
+    draggable.removeEventListener("mousedown", onMouseDown);
+    draggable.removeEventListener("touchstart", onTouchStart);
+  }
+  document.removeEventListener("mousemove", onMouseMove);
+  document.removeEventListener("mouseup", onMouseUp);
+  document.removeEventListener("touchmove", onTouchMove);
+  document.removeEventListener("touchend", onTouchEnd);
+});
 </script>
 
-
 <style scoped lang="scss">
 .draggable {
   width: 100px;
@@ -92,55 +97,62 @@ onMounted(() => {
   cursor: pointer;
   user-select: none;
 }
-.fixed-box{
+
+.fixed-box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  height: 100px;
-  position: absolute;
-  //bottom: 0px;
-  top: 678px;
+  height: auto;
+  pointer-events: none; /* 让背景不阻挡其他元素的点击 */
+  z-index: 9999; /* 确保在最上层显示 */
 }
-.content-bottom{
+
+.content-bottom {
   width: 100%;
-  height: 270px;
+  height: 0px; /* 给容器一个明确的高度 */
   display: flex;
   justify-content: space-between;
   position: relative;
-  align-items: center;
-  .draw{
+  align-items: flex-end;
+  pointer-events: auto; /* 恢复子元素的点击事件 */
+
+  .draw {
     width: 109px;
     height: 170px;
-    img{
+    pointer-events: auto;
+    position: absolute;
+
+    img {
       width: 109px;
       height: 170px;
     }
   }
 
-  .ai-rabit{
+  .ai-rabit {
     position: absolute;
     right: 0px;
-    bottom: 20px;
+    bottom: 0px;
     display: flex;
-    align-items: center;
-    .ai-rabit-text{
+    align-items: flex-end;
+    pointer-events: auto;
+
+    .ai-rabit-text {
       width: 345px;
       height: 89px;
-      background: #E8EEF7;
+      background: #e8eef7;
       font-weight: 300;
       margin-bottom: 20px;
       font-size: 22px;
       color: #000000;
-      padding:16px;
+      padding: 16px;
       border-radius: 24px 24px 24px 24px;
     }
-    img{
+
+    img {
       width: 178px;
       height: 270px;
     }
   }
 }
-.draggable-ball {
-  position: absolute;
-  cursor: pointer;
-  user-select: none; /* 防止拖拽时选中文字 */
-}
-</style>
+</style>

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

@@ -1,199 +1,235 @@
 <template>
-    <div class="contenter">
-      <div class="head-left">
-        <img  class="head-icon" src="@/assets/images/login/login-return.png" @click="backTo" alt="404">
-      </div>
-<!-- 等UI图更新继续画     <div>-->
-      <div class="head-title">
-        <div v-if="headinfo.title">{{headinfo.title}}</div>
-      </div>
-      <div class="contrast-box"  >
-        <img class="contrast" v-show="headinfo.contrast" src="@/assets/images/environment/contrast-btn.png"
-             @click="contrastTo">
-        <p class="text" v-show="headinfo.contrast">{{contrastSize}}</p>
-      </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" v-if="headinfo.isHome">使用说明</el-button>
-        <el-button class="head-right-btn1" v-else @click="homeUrlTo">首页</el-button>
-        <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
+  <div class="contenter">
+    <div class="head-left">
+      <img
+        class="head-icon"
+        src="@/assets/images/login/login-return.png"
+        @click="backTo"
+        alt="404"
+      />
+    </div>
+    <!-- 等UI图更新继续画     <div>-->
+    <div class="head-title">
+      <div v-if="headinfo.title">{{ headinfo.title }}</div>
+    </div>
+    <div class="contrast-box">
+      <img
+        class="contrast"
+        v-show="headinfo.contrast"
+        src="@/assets/images/environment/contrast-btn.png"
+        @click="contrastTo"
+      />
+      <p class="text" v-show="headinfo.contrast">{{ contrastSize }}</p>
+    </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" v-if="headinfo.isHome"
+        >使用说明</el-button
+      >
+      <el-button class="head-right-btn1" v-else @click="homeUrlTo"
+        >首页</el-button
+      >
+      <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
+    </div>
+  </div>
+  <!-- 等UI图更新继续画     <div>-->
+  <div class="head-title">
+    <div v-if="headinfo.title">{{ headinfo.title }}</div>
+  </div>
+  <div class="contrast-box">
+    <img
+      v-show="headinfo.contrast"
+      class="contrast"
+      src="@/assets/images/environment/contrast-btn.png"
+      @click="contrastTo"
+    />
+  </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" v-if="headinfo.isHome"
+      >使用说明</el-button
+    >
+    <el-button class="head-right-btn1" v-else @click="homeUrlTo"
+      >首页</el-button
+    >
+    <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
+  </div>
 </template>
 
 <script setup>
-    import {ElMessage} from "element-plus";
-    import {getCompareSize} from '@/api/xjc-integratedmachine/environment/common.js'
-    import {defineEmits} from "vue";
-    const {proxy} = getCurrentInstance()
-    const router = useRouter()
-    const props = defineProps({
-      headinfo: {}
-    })
-    const contrastSize = ref(null);
-    const emit = defineEmits(['childEvent']);
-    function backTo() {
-      clear()
-      if(props.headinfo.backUrlUse){
-        router.push({
-            path: props.headinfo.backUrl,
-            query:{
-             code : props.headinfo.backQuery
-          }
-        })
-      }else {
-        router.go(-1);
-      }
-      emit('childEvent')
-    }
-    function clear(){
-      if(props.headinfo.contrastPage){
-        // clearData()
-      }
-    }
-    function homeUrlTo() {
-        router.push({
-          path: props.headinfo.homeUrl
-        })
-    }
-    //跳转对比页面
-    function contrastTo(){
-      console.log('contrastSize.value',contrastSize.value)
-      if(contrastSize.value === 2){
-       console.log("props.headinfo.contrastType",props.headinfo.contrastType)
-        if(props.headinfo.contrastType === 2){
-          router.push({
-            path: '/xjc-integratedmachine/environment/contrast_major'
-          })
-        }else if(props.headinfo.contrastType === 1){
-          router.push({
-            path: '/xjc-integratedmachine/environment/contrast_university'
-          })
-        }else if(props.headinfo.contrastType === 3){
-          router.push({
-            path: '/xjc-integratedmachine/environment/contrast_career'
-          })
-        }
-      }else {
-        ElMessage({
-          type: 'info',
-          message: '对比列表不满两组数据',
-        })
-        return;
-      }
-    }
-
-    function exit() {
-        proxy.$modal.confirm('您确认退出吗').then(function () {
-            router.push({
-                path: '/xjc_login'
-            })
-        }).then(() => {
-        }).catch(() => {
-        })
+import { ElMessage } from "element-plus";
+import { getCompareSize } from "@/api/xjc-integratedmachine/environment/common.js";
+import { defineEmits } from "vue";
+const { proxy } = getCurrentInstance();
+const router = useRouter();
+const props = defineProps({
+  headinfo: {},
+});
+const contrastSize = ref(null);
+const emit = defineEmits(["childEvent"]);
+function backTo() {
+  clear();
+  if (props.headinfo.backUrlUse) {
+    router.push({
+      path: props.headinfo.backUrl,
+      query: {
+        code: props.headinfo.backQuery,
+      },
+    });
+  } else {
+    router.go(-1);
+  }
+  emit("childEvent");
+}
+function clear() {
+  if (props.headinfo.contrastPage) {
+    // clearData()
+  }
+}
+function homeUrlTo() {
+  router.push({
+    path: props.headinfo.homeUrl,
+  });
+}
+//跳转对比页面
+function contrastTo() {
+  console.log("contrastSize.value", contrastSize.value);
+  if (contrastSize.value === 2) {
+    console.log("props.headinfo.contrastType", props.headinfo.contrastType);
+    if (props.headinfo.contrastType === 2) {
+      router.push({
+        path: "/xjc-integratedmachine/environment/contrast_major",
+      });
+    } else if (props.headinfo.contrastType === 1) {
+      router.push({
+        path: "/xjc-integratedmachine/environment/contrast_university",
+      });
+    } else if (props.headinfo.contrastType === 3) {
+      router.push({
+        path: "/xjc-integratedmachine/environment/contrast_career",
+      });
     }
-    //拿到对比数量
-   function getCompareSizeData (num){
-      console.log("num",num)
-     setTimeout(() => {
-       getCompareSize({
-         type:props.headinfo.contrastType || num
-       }).then(resp => {
-         contrastSize.value =  resp.data
-       })
-     }, 500)
+  } else {
+    ElMessage({
+      type: "info",
+      message: "对比列表不满两组数据",
+    });
+    return;
+  }
+}
 
-   }
-    onMounted(() => {
-      // getCompareSizeData()
+function exit() {
+  proxy.$modal
+    .confirm("您确认退出吗")
+    .then(function () {
+      router.push({
+        path: "/xjc_login",
+      });
     })
-    defineExpose({
-      getCompareSizeData
+    .then(() => {})
+    .catch(() => {});
+}
+//拿到对比数量
+function getCompareSizeData(num) {
+  console.log("num", num);
+  setTimeout(() => {
+    getCompareSize({
+      type: props.headinfo.contrastType || num,
+    }).then((resp) => {
+      contrastSize.value = resp.data;
     });
+  }, 500);
+}
+onMounted(() => {
+  // getCompareSizeData()
+});
+defineExpose({
+  getCompareSizeData,
+});
 </script>
 
-<style scoped lang='scss'>
-    .contenter{
+<style scoped lang="scss">
+.contenter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  background-color: rgba(251, 252, 253, 0.5);
+  justify-content: space-between;
+  .head-left {
+    width: 750px;
+  }
+  .head-icon {
+    width: 74px;
+    height: 74px;
+    margin-left: 74px;
+  }
+  .head-title {
+    width: 464px;
+    //margin: ;
+    text-align: center;
+    font-weight: bold;
+    font-size: 48px;
+    color: #060606;
+  }
+  .contrast-box {
+    width: 209px;
+    height: 80px;
+    position: relative;
+    img {
+      width: 209px;
+      height: 80px;
+    }
+    .text {
       position: absolute;
-      top: 0;
-      left: 0;
-      width:100%;
-      height: 100px;
-      display: flex;
-      align-items: center;
-      background-color: rgba(251,252,253,0.5);
-      justify-content: space-between;
-      .head-left{
-        width: 750px;
-      }
-      .head-icon{
-        width: 74px;
-        height: 74px;
-        margin-left: 74px;
-      }
-      .head-title{
-        width: 464px;
-        //margin: ;
-        text-align: center;
-        font-weight: bold;
-        font-size: 48px;
-        color: #060606;
-      }
-      .contrast-box{
-        width: 209px;
-        height: 80px;
-        position: relative;
-        img{
-          width: 209px;
-          height: 80px;
-        }
-        .text{
-          position: absolute;
-          bottom: 3px;
-          left: 107px;
-          font-size: 20px;
-          color: #2BC17B;
-          font-size: 20px;
-          color: #2BC17B;
-          line-height: 31px;
-          bottom: -7px;
-        }
-      }
-      .head-right{
-          width:750px;
-          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;
-          margin-right: 48px;
-        }
-        .right-user{
-
-          img{
-            width: 85px;
-            height: 85px;
-          }
-        }
-
+      bottom: 3px;
+      left: 107px;
+      font-size: 20px;
+      color: #2bc17b;
+      font-size: 20px;
+      color: #2bc17b;
+      line-height: 31px;
+      bottom: -7px;
+    }
+  }
+  .head-right {
+    width: 750px;
+    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;
+      margin-right: 48px;
+    }
+    .right-user {
+      img {
+        width: 85px;
+        height: 85px;
       }
     }
+  }
+}
 </style>

src/views/xjc-integratedmachine/plan/aim/aim_management_index.vue

@@ -1,11 +1,990 @@
 <template>
-    目标管理首页
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="page-content">
+      <div class="pyramid-container">
+        <div class="lbline l1"></div>
+        <div class="lbline l2"></div>
+        <div class="lbline l3"></div>
+        <div class="lbline l4"></div>
+        <div class="lbline l5"></div>
+        <div class="lbline l6"></div>
+        <div class="lbline l7"></div>
+        <div class="lbline l8"></div>
+        <div class="lbline l9"></div>
+        <div class="lbline l10"></div>
+        <div class="lbline l11"></div>
+        <div class="lbline l12"></div>
+        <div class="lbline l13"></div>
+        <div class="lbline l14"></div>
+        <!-- 长期目标层 -->
+        <div class="pyramid-layer layer-1">
+          <div
+            class="goal-box"
+            :class="longTermGoal ? 'filled' : 'empty'"
+            @dragover.prevent
+            @drop="onDrop('longTerm', $event)"
+            :data-drop-target="'longTerm'"
+          >
+            {{ longTermGoal || "长期目标" }}
+          </div>
+        </div>
+
+        <!-- 中期目标层 -->
+        <div class="pyramid-layer layer-2">
+          <div
+            v-for="(goal, index) in midTermGoals"
+            :key="'mid-' + index"
+            class="goal-box"
+            :class="goal ? 'filled' : 'empty'"
+            @dragover.prevent
+            @drop="onDrop('midTerm' + (index + 1), $event)"
+            :data-drop-target="'midTerm' + (index + 1)"
+          >
+            {{ goal || `中期目标${index + 1}` }}
+          </div>
+        </div>
+
+        <!-- 短期目标层 -->
+        <div class="pyramid-layer layer-3">
+          <div
+            v-for="(goal, index) in shortTermGoals"
+            :key="'short-' + index"
+            class="goal-box"
+            :class="goal ? 'filled' : 'empty'"
+            @dragover.prevent
+            @drop="onDrop('shortTerm' + (index + 1), $event)"
+            :data-drop-target="'shortTerm' + (index + 1)"
+          >
+            {{ goal || `短期目标${index + 1}` }}
+          </div>
+        </div>
+
+        <!-- 小目标层 -->
+        <div class="pyramid-layer layer-4">
+          <div
+            v-for="(goal, index) in smallGoals"
+            :key="'small-' + index"
+            class="goal-box"
+            :class="goal ? 'filled' : 'empty'"
+            @dragover.prevent
+            @drop="onDrop('small' + (index + 1), $event)"
+            :data-drop-target="'small' + (index + 1)"
+          >
+            {{ goal || `小目标${index + 1}` }}
+          </div>
+        </div>
+      </div>
+      <div
+        style="
+          width: 100%;
+          height: 8px;
+          background: rgb(173 173 173);
+          border-top: 3px solid #fff;
+        "
+      ></div>
+      <div class="action-row">
+        <el-button type="success">返回上一级</el-button>
+        <p class="instruction">
+          请选择一项你想实现的长期目标，并将其拖拽到目标金字塔中相应位置。
+        </p>
+      </div>
+
+      <div class="goal-options">
+        <div
+          v-for="(option, index) in goalOptions"
+          :key="'goal-option-' + index"
+          class="goal-btn"
+          :class="{ dragging: isDragging && currentDragItem === option.text }"
+          draggable="true"
+          @dragstart="onDragStart($event, option.text)"
+          @touchstart="onTouchStart($event, option.text, option)"
+          @touchmove="onTouchMove($event)"
+          @touchend="onTouchEnd($event, option)"
+        >
+          {{ option.text }}
+        </div>
+      </div>
+
+      <!-- 拖拽时的虚拟图 -->
+      <div
+        v-if="isDragging"
+        class="drag-ghost"
+        :style="ghostStyle"
+        ref="dragGhost"
+      >
+        {{ currentDragItem }}
+      </div>
+
+      <drag_component></drag_component>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted, watch, nextTick } from "vue";
+
+const router = useRouter();
+
+const headinfo = ref({});
+const draggedItem = ref(null);
+
+// 移动端拖拽相关状态
+const isDragging = ref(false);
+const currentDragItem = ref(null);
+const dragStartPos = ref({ x: 0, y: 0 });
+const currentDropTarget = ref(null);
+const dragGhost = ref(null);
+const ghostStyle = ref({
+  position: "fixed",
+  left: "0px",
+  top: "0px",
+  transform: "translate(-50%, -50%)",
+  zIndex: 9999,
+  pointerEvents: "none",
+});
+
+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: "目标管理",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrlUse: true,
+  };
+}
+onMounted(() => {
+  setHeadinfo();
+});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+
+// lb
+const longTermGoal = ref("");
+const midTermGoals = ref(["", ""]);
+const shortTermGoals = ref(["", "", "", ""]);
+const smallGoals = ref(["", "", "", "", "", "", "", ""]);
+
+// 目标选项数据
+const goalOptions = ref([
+  {
+    id: 1,
+    text: "考上国内双一流A类高校",
+    category: "education",
+  },
+  {
+    id: 2,
+    text: "健康生活模式",
+    category: "health",
+  },
+  {
+    id: 3,
+    text: "留学",
+    category: "education",
+  },
+  {
+    id: 4,
+    text: "创业成功",
+    category: "career",
+  },
+  {
+    id: 5,
+    text: "学会一门新技能",
+    category: "personal",
+  },
+  {
+    id: 6,
+    text: "财务自由",
+    category: "financial",
+  },
+]);
+
+// 桌面端拖拽
+const onDragStart = (event, goalText) => {
+  event.dataTransfer.setData("text/plain", goalText);
+};
+
+// 移动端触摸拖拽
+const onTouchStart = (event, goalText, obj) => {
+  console.log(event, obj, 33);
+  event.preventDefault();
+  isDragging.value = true;
+  currentDragItem.value = goalText;
+
+  const touch = event.touches[0];
+  dragStartPos.value = {
+    x: touch.clientX,
+    y: touch.clientY,
+  };
+
+  // 初始化虚拟图位置
+  ghostStyle.value.left = touch.clientX + "px";
+  ghostStyle.value.top = touch.clientY + "px";
+
+  // 添加视觉反馈
+  event.currentTarget.style.opacity = "0.5";
+  event.currentTarget.style.transform = "scale(0.95)";
+};
+
+const onTouchMove = (event) => {
+  if (!isDragging.value) return;
+
+  event.preventDefault();
+  const touch = event.touches[0];
+
+  // 更新虚拟图位置
+  ghostStyle.value.left = touch.clientX + "px";
+  ghostStyle.value.top = touch.clientY + "px";
+
+  // 获取触摸点下的元素
+  const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+
+  // 清除之前的高亮
+  document.querySelectorAll(".goal-box.drop-highlight").forEach((el) => {
+    el.classList.remove("drop-highlight");
+  });
 
+  // 检查是否是有效的放置目标
+  if (
+    elementBelow &&
+    elementBelow.classList.contains("goal-box") &&
+    elementBelow.dataset.dropTarget
+  ) {
+    elementBelow.classList.add("drop-highlight");
+    currentDropTarget.value = elementBelow.dataset.dropTarget;
+  } else {
+    currentDropTarget.value = null;
+  }
+};
+
+const onTouchEnd = (event, obj) => {
+  console.log(obj, 22);
+  if (!isDragging.value) return;
+
+  event.preventDefault();
+
+  // 恢复原始样式
+  event.currentTarget.style.opacity = "";
+  event.currentTarget.style.transform = "";
+
+  // 清除高亮
+  document.querySelectorAll(".goal-box.drop-highlight").forEach((el) => {
+    el.classList.remove("drop-highlight");
+  });
+
+  // 如果有有效的放置目标，执行放置逻辑
+  if (currentDropTarget.value && currentDragItem.value) {
+    handleDrop(currentDropTarget.value, currentDragItem.value);
+  }
+
+  // 重置状态
+  isDragging.value = false;
+  currentDragItem.value = null;
+  currentDropTarget.value = null;
+};
+
+const handleDrop = (target, goalText) => {
+  console.log(target, goalText, "mobile drop");
+  switch (target) {
+    case "longTerm":
+      longTermGoal.value = goalText;
+      document.querySelector(".l1").style.border = "2px solid #00754d";
+      document.querySelector(".l2").style.border = "2px solid #00754d";
+      break;
+    case "midTerm1":
+      midTermGoals.value[0] = goalText;
+      document.querySelector(".l3").style.border = "2px solid #00754d";
+      document.querySelector(".l4").style.border = "2px solid #00754d";
+      break;
+    case "midTerm2":
+      midTermGoals.value[1] = goalText;
+      document.querySelector(".l5").style.border = "2px solid #00754d";
+      document.querySelector(".l6").style.border = "2px solid #00754d";
+      break;
+    case "shortTerm1":
+      shortTermGoals.value[0] = goalText;
+      document.querySelector(".l7").style.border = "2px solid #00754d";
+      document.querySelector(".l8").style.border = "2px solid #00754d";
+      break;
+    case "shortTerm2":
+      shortTermGoals.value[1] = goalText;
+      document.querySelector(".l9").style.border = "2px solid #00754d";
+      document.querySelector(".l10").style.border = "2px solid #00754d";
+      break;
+    case "shortTerm3":
+      shortTermGoals.value[2] = goalText;
+      document.querySelector(".l11").style.border = "2px solid #00754d";
+      document.querySelector(".l12").style.border = "2px solid #00754d";
+      break;
+    case "shortTerm4":
+      shortTermGoals.value[3] = goalText;
+      document.querySelector(".l13").style.border = "2px solid #00754d";
+      document.querySelector(".l14").style.border = "2px solid #00754d";
+      break;
+    default:
+      if (target.startsWith("small")) {
+        const index = parseInt(target.replace("small", "")) - 1;
+        smallGoals.value[index] = goalText;
+      }
+  }
+  // 输出当前状态
+  console.log("长期目标:", longTermGoal.value);
+  console.log("中期目标:", midTermGoals.value);
+  console.log("短期目标:", shortTermGoals.value);
+  console.log("小目标:", smallGoals.value);
+};
+
+const onDrop = (target, event) => {
+  const goalText = event.dataTransfer.getData("text/plain");
+  handleDrop(target, goalText);
+};
+// ed
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+/* lb */
+.action-row {
+  display: flex;
+  align-items: center; // 垂直居中
+  justify-content: flex-start; // 左对齐，可改为 space-between
+  gap: 20px; // 元素之间的间距
+  margin: 30px 0;
+
+  .el-button {
+    margin-left: 32px;
+    padding: 25px 25px;
+    border-radius: 12px;
+    font-size: 20px; // 按钮字体变大
+  }
+
+  .instruction {
+    margin: 0; // 去掉段落默认 margin
+    font-weight: bold;
+    margin-left: 410px;
+
+    font-size: 22px;
+    color: #00a524;
+  }
+}
+
+.layer-1 .goal-box.empty {
+  border: 4px dashed #e8d344;
+}
+.layer-1 .goal-box.filled {
+  border: 4px solid #e8d344;
+}
+
+.layer-2 .goal-box.empty {
+  border: 4px dashed #00754d;
+}
+.layer-2 .goal-box.filled {
+  border: 4px solid #e8d344;
+}
+
+.layer-3 .goal-box.empty {
+  border: 4px dashed #00754d;
+}
+.layer-3 .goal-box.filled {
+  border: 4px solid #e8d344;
+}
+
+.layer-4 .goal-box.empty {
+  border: 4px dashed #00754d;
+}
+.layer-4 .goal-box.filled {
+  border: 4px solid #3ff032;
+}
+
+// 移动端拖拽相关样式
+.goal-box.drop-highlight {
+  background: rgba(255, 255, 0, 0.3) !important;
+  border-color: #ffeb3b !important;
+  transform: scale(1.02);
+}
+
+.goal-btn.dragging {
+  opacity: 0.7;
+  transform: scale(1.05);
+}
+
+// 增强移动端触摸体验
+.goal-btn {
+  touch-action: none; // 防止页面滚动
+  user-select: none; // 防止文本选择
+}
+
+.goal-box {
+  touch-action: none;
+  user-select: none;
+}
+
+/* 拖拽虚拟图样式 */
+.drag-ghost {
+  padding: 15px 20px;
+  border: 3px solid #4caf50;
+  border-radius: 25px;
+  background: rgba(76, 175, 80, 0.9);
+  color: white;
+  font-size: 18px;
+  font-weight: bold;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  animation: ghostPulse 1s ease-in-out infinite alternate;
+  white-space: nowrap;
+  max-width: 250px;
+  text-align: center;
+}
+
+@keyframes ghostPulse {
+  0% {
+    transform: translate(-50%, -50%) scale(0.95);
+    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.05);
+    box-shadow: 0 12px 35px rgba(76, 175, 80, 0.6);
+  }
+}
+
+.lbline {
+  width: 130px;
+  border-top: 4px dashed #00754d;
+  /* transition: revert; */
+  position: absolute;
+}
+.l1 {
+  transform: rotate(-16deg);
+  top: 103px;
+  left: 720px;
+}
+.l2 {
+  transform: rotate(16deg);
+  top: 103px;
+  left: 1050px;
+}
+.l3 {
+  transform: rotate(-16deg);
+  top: 275px;
+  left: 239px;
+}
+.l4 {
+  transform: rotate(16deg);
+  top: 273px;
+  left: 640px;
+}
+.l5 {
+  transform: rotate(-16deg);
+  top: 273px;
+  left: 1140px;
+}
+.l6 {
+  transform: rotate(16deg);
+  top: 273px;
+  left: 1490px;
+}
+.l7 {
+  transform: rotate(-16deg);
+  top: 445px;
+  left: 101px;
+}
+.l8 {
+  transform: rotate(16deg);
+  top: 444px;
+  left: 268px;
+}
+.l9 {
+  transform: rotate(-16deg);
+  top: 444px;
+  left: 568px;
+}
+.l10 {
+  transform: rotate(16deg);
+  top: 444px;
+  left: 737px;
+}
+.l11 {
+  transform: rotate(-16deg);
+  top: 444px;
+  left: 1041px;
+}
+.l12 {
+  transform: rotate(16deg);
+  top: 444px;
+  left: 1208px;
+}
+.l13 {
+  transform: rotate(-16deg);
+  top: 444px;
+  left: 1496px;
+}
+.l14 {
+  transform: rotate(16deg);
+  top: 444px;
+  left: 1673px;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Arial", "Microsoft YaHei", sans-serif;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Arial", "Microsoft YaHei", sans-serif;
+}
+
+body {
+  background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  margin: 0; // 确保没有默认边距
+}
+
+// 全局背景覆盖
+html,
+body {
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  min-height: 100vh;
+}
+
+.container {
+  width: 100%;
+  max-width: 900px;
+  background: white;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+}
+
+.title {
+  text-align: center;
+  color: #2c3e50;
+  margin-bottom: 30px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+/* 金字塔容器 */
+.pyramid-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 0px;
+  position: relative;
+}
+
+/* 金字塔层 */
+.pyramid-layer {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 32px;
+  position: relative;
+}
+
+/* 长期目标层 - 页面宽度的三分之一 */
+.layer-1 .goal-box.empty {
+  height: 88px;
+}
+.layer-1 .goal-box.filled {
+  height: 88px;
+}
+.layer-1 {
+  width: 33.33%;
+}
+
+/* 中期目标层 - 页面宽度的二分之一 */
+.layer-2 {
+  width: 85%;
+  justify-content: space-between;
+}
+
+/* 短期目标层 - 页面宽度的四分之三 */
+.layer-3 {
+  width: 98%;
+  justify-content: space-between;
+}
+
+/* 小目标层 - 页面宽度的90% */
+.layer-4 {
+  width: 98%;
+  justify-content: space-between;
+}
+
+/* 目标框样式 */
+.goal-box {
+  border-radius: 33px;
+  background: rgba(255, 255, 255, 0.9);
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  color: #555;
+  height: 140px;
+  z-index: 2;
+}
+
+.goal-box:hover {
+  background: rgba(236, 252, 237, 0.9);
+  transform: translateY(-2px);
+}
+
+.goal-box.empty {
+  margin: 0px 9px;
+  color: #95a5a6;
+  border-style: dashed;
+  width: 100%;
+}
+.layer-2 .goal-box.filled {
+  margin: 0px 9px;
+  width: 100%;
+  color: #fff;
+  border-style: solid;
+  background: #00d89c;
+  font-weight: bold;
+}
+.layer-3 .goal-box.filled {
+  margin: 0px 9px;
+  width: 100%;
+  color: #fff;
+  border-style: solid;
+  background: #00d89c;
+  font-weight: bold;
+}
+.layer-4 .goal-box.filled {
+  margin: 0px 9px;
+  width: 100%;
+  color: #fff;
+  border-style: solid;
+  background: #00d89c;
+  font-weight: bold;
+}
+.goal-box.filled {
+  margin: 0px 9px;
+  width: 100%;
+  color: #fff;
+  border-style: solid;
+  background: #303030;
+  font-weight: bold;
+}
+
+/* 连接线容器 */
+.connections {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* 连接线 */
+.connection {
+  position: absolute;
+  background: transparent;
+  border-left: 4px dashed #2c8f30;
+}
+
+/* 长期目标到中期目标的连线 */
+.long-to-mid-1,
+.long-to-mid-2 {
+  height: 60px;
+  top: 60px;
+  left: 50%;
+}
+
+.long-to-mid-1 {
+  transform: translateX(-100%) rotate(-30deg);
+  transform-origin: top center;
+}
+
+.long-to-mid-2 {
+  transform: translateX(0) rotate(30deg);
+  transform-origin: top center;
+}
+
+/* 中期目标到短期目标的连线 */
+.mid-to-short-1,
+.mid-to-short-2,
+.mid-to-short-3,
+.mid-to-short-4 {
+  height: 60px;
+  top: 180px;
+}
+
+.mid-to-short-1 {
+  left: 25%;
+  transform: translateX(-150%) rotate(-20deg);
+  transform-origin: top center;
+}
+
+.mid-to-short-2 {
+  left: 25%;
+  transform: translateX(-50%) rotate(20deg);
+  transform-origin: top center;
+}
+
+.mid-to-short-3 {
+  left: 75%;
+  transform: translateX(-150%) rotate(-20deg);
+  transform-origin: top center;
+}
+
+.mid-to-short-4 {
+  left: 75%;
+  transform: translateX(-50%) rotate(20deg);
+  transform-origin: top center;
+}
+
+/* 短期目标到小目标的连线 */
+.short-to-small-1,
+.short-to-small-2,
+.short-to-small-3,
+.short-to-small-4,
+.short-to-small-5,
+.short-to-small-6,
+.short-to-small-7,
+.short-to-small-8 {
+  height: 60px;
+  top: 300px;
+}
+
+.short-to-small-1 {
+  left: 12.5%;
+  transform: translateX(-175%) rotate(-15deg);
+  transform-origin: top center;
+}
+
+.short-to-small-2 {
+  left: 12.5%;
+  transform: translateX(-75%) rotate(15deg);
+  transform-origin: top center;
+}
+
+.short-to-small-3 {
+  left: 37.5%;
+  transform: translateX(-175%) rotate(-15deg);
+  transform-origin: top center;
+}
+
+.short-to-small-4 {
+  left: 37.5%;
+  transform: translateX(-75%) rotate(15deg);
+  transform-origin: top center;
+}
+
+.short-to-small-5 {
+  left: 62.5%;
+  transform: translateX(-175%) rotate(-15deg);
+  transform-origin: top center;
+}
+
+.short-to-small-6 {
+  left: 62.5%;
+  transform: translateX(-75%) rotate(15deg);
+  transform-origin: top center;
+}
+
+.short-to-small-7 {
+  left: 87.5%;
+  transform: translateX(-175%) rotate(-15deg);
+  transform-origin: top center;
+}
+
+.short-to-small-8 {
+  left: 87.5%;
+  transform: translateX(-75%) rotate(15deg);
+  transform-origin: top center;
+}
+
+/* 底部按钮区域 */
+.goal-options {
+  display: flex;
+  flex-wrap: wrap; // 允许换行
+  justify-content: flex-start;
+  height: 191px;
+  overflow-y: auto;
+  gap: 20px;
+  margin-top: 40px;
+  padding: 20px;
+
+  // 可选：自适应居中
+  justify-content: center;
+}
+
+.goal-btn {
+  flex: 0 0 calc(33.33% - 13.33px); // 每行3个，减去gap平均值
+  min-width: 200px; // 保持最小宽度
+  padding: 60px 25px;
+  border: 4px solid #95a5a6;
+  border-radius: 40px;
+  background: #fff;
+  color: #95a5a6;
+  font-size: 22px;
+  text-align: center;
+  cursor: grab;
+  box-sizing: border-box;
+}
+
+.goal-btn:hover {
+  border: 4px solid #a2d532;
+  color: #2c3e50;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.goal-btn:active {
+  cursor: grabbing;
+}
+
+.instruction {
+  text-align: center;
+  margin: 30px 0;
+  color: #00a524;
+  font-weight: bold;
+  font-size: 22px;
+}
+
+/* 装饰元素 */
+.decoration {
+  position: absolute;
+}
+
+.cartoon {
+  top: 20px;
+  left: 20px;
+  width: 80px;
+  height: 80px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="40" r="30" fill="%23FFD54F"/><circle cx="40" cy="35" r="5" fill="white"/><circle cx="60" cy="35" r="5" fill="white"/><path d="M35 55 Q50 65 65 55" stroke="%23E57373" stroke-width="3" fill="none"/></svg>')
+    no-repeat center;
+  background-size: contain;
+}
+
+.robot {
+  bottom: 20px;
+  right: 20px;
+  width: 80px;
+  height: 126px;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="20" fill="%234caf50"/><rect x="30" y="50" width="40" height="40" rx="5" fill="%234caf50"/><circle cx="40" cy="60" r="5" fill="white"/><circle cx="60" cy="60" r="5" fill="white"/></svg>')
+    no-repeat center;
+  background-size: contain;
+}
+
+@media (max-width: 768px) {
+  .goal-options {
+    padding: 15px;
+    gap: 15px;
+
+    // 移动端滚动条隐藏
+    scrollbar-width: none; // Firefox
+    -ms-overflow-style: none; // IE
+
+    &::-webkit-scrollbar {
+      display: none; // Chrome/Safari
+    }
+  }
+
+  .goal-btn {
+    width: 30%; // 移动端也保持原来的宽度
+    min-width: 200px; // 保持原来的最小宽度
+    padding: 40px 20px;
+    font-size: 18px;
+  }
+
+  .layer-2,
+  .layer-3,
+  .layer-4 {
+    flex-wrap: wrap;
+    height: auto;
+    justify-content: center;
+  }
+
+  .goal-box {
+    flex: 1;
+    min-width: 120px;
+  }
+
+  .connections {
+    display: none;
+  }
+}
+/*ed*/
+
+.maturity-game-page {
+  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+  //     no-repeat;
+  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  .page-content {
+    width: 100%;
+    position: relative;
+    padding-top: 123px;
+    min-height: calc(100vh - 123px);
+    padding-bottom: 0px; // 添加底部内边距防止内容贴边
 
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
 </style>

src/views/xjc-integratedmachine/plan/time/time_management_4d_evaluation.vue

@@ -0,0 +1,764 @@
+<template>
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="container">
+      <!-- 左侧窗口区域 -->
+      <div class="left-panel">
+        <div
+          v-for="window in windows"
+          :key="window.id"
+          :class="[
+            'window',
+            `window-${window.id}`,
+            { 'drag-over': window.dragOver },
+          ]"
+          @drop="onDrop($event, window.id)"
+          @dragover="onDragOver($event, window.id)"
+          @dragleave="onDragLeave(window.id)"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+        >
+          <div class="window-title">{{ window.title }}</div>
+          <div v-for="item in window.items" :key="item.id" class="dropped-item">
+            <span>{{ item.text }}</span>
+            <button class="remove-btn" @click="removeItem(window.id, item.id)">
+              ×
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧拖拽项目区域 -->
+      <div class="right-panel">
+        <h3 class="h3t">请拖放到对应事件中一归类，根据您安预的时感选出中</h3>
+        <div
+          v-for="item in draggableItems"
+          :key="item.id"
+          :class="[
+            'draggable-item',
+            {
+              special: item.special,
+              dragging: item.dragging,
+              'touch-dragging': item.touchDragging,
+            },
+          ]"
+          :style="item.dragStyle"
+          :draggable="true"
+          @dragstart="onDragStart($event, item)"
+          @dragend="onDragEnd(item)"
+          @drag="onDrag($event, item)"
+          @touchstart="onTouchStart($event, item)"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+        >
+          {{ item.text }}
+          <div v-if="item.icon" class="robot-icon">🤖</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 移动端拖拽时的克隆元素 -->
+    <div v-if="dragClone.visible" class="drag-clone" :style="dragClone.style">
+      {{ dragClone.text }}
+      <div v-if="dragClone.icon" class="robot-icon">🤖</div>
+    </div>
+
+    <drag_component></drag_component>
+    <el-dialog
+      v-model="centerDialogVisible"
+      title=""
+      width="30%"
+      align-center
+      style="padding: 40px; top: 300px; border-radius: 20px"
+      class="custom-dialog"
+    >
+      <span>当前活动尚未完成，退出后进度将不会保存，是否确认退出？</span>
+      <template #footer>
+        <span class="dialog-footer" style="">
+          <el-button @click="centerDialogVisible = false">继续体验</el-button>
+          <el-button type="primary" @click="centerDialogVisible = false">
+            确定退出
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted, watch, nextTick, reactive, ref } from "vue";
+import { ElMessageBox } from "element-plus";
+
+const centerDialogVisible = ref(true);
+
+const handleClose = (done) => {
+  ElMessageBox.confirm("Are you sure to close this dialog?")
+    .then(() => {
+      done();
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+// 窗口数据
+const windows = reactive([
+  { id: "b", title: "B类：重要但不紧急", items: [], dragOver: false },
+  { id: "a", title: "A类：重要且紧急", items: [], dragOver: false },
+  { id: "d", title: "D类：不重要也不紧急", items: [], dragOver: false },
+  { id: "c", title: "C类：不重要但紧急", items: [], dragOver: false },
+]);
+
+// 可拖拽项目数据
+const draggableItems = reactive([
+  {
+    id: 1,
+    text: "做好人生规划",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  },
+  {
+    id: 2,
+    text: "做好人生规划",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  },
+  {
+    id: 3,
+    text: "健身锻炼身体",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  },
+  {
+    id: 4,
+    text: "去健身房运动",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  },
+  {
+    id: 14,
+    text: "去健身2房运动",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  },
+  {
+    id: 24,
+    text: "去健身房2运动",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  },
+  {
+    id: 5,
+    text: "教会小孩教育群体",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+    icon: true,
+  },
+  {
+    id: 6,
+    text: "教会小孩教育群体",
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  },
+]);
+
+// 拖拽克隆元素（移动端使用）
+const dragClone = reactive({
+  visible: false,
+  text: "",
+  icon: false,
+  style: {},
+});
+
+// 当前拖拽的项目
+let currentDragItem = null;
+let touchStartPos = { x: 0, y: 0 };
+let isDragging = false;
+let dragOffset = { x: 0, y: 0 };
+let dragStarted = false;
+
+// PC端拖拽开始
+const onDragStart = (event, item) => {
+  currentDragItem = item;
+  item.dragging = true;
+  event.dataTransfer.effectAllowed = "move";
+
+  // 设置拖拽图像为透明，这样我们可以用自定义样式
+  const emptyImg = new Image();
+  emptyImg.src =
+    "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+  event.dataTransfer.setDragImage(emptyImg, 0, 0);
+
+  dragStarted = true;
+};
+
+// PC端拖拽过程
+const onDrag = (event, item) => {
+  if (!dragStarted) return;
+
+  // 获取鼠标位置
+  if (event.clientX !== 0 && event.clientY !== 0) {
+    item.dragStyle = {
+      position: "fixed",
+      left: `${event.clientX - 75}px`,
+      top: `${event.clientY - 75}px`,
+      zIndex: 1000,
+      pointerEvents: "none",
+      transform: "rotate(5deg) scale(1.1)",
+      opacity: 0.8,
+    };
+  }
+};
+
+// PC端拖拽结束
+const onDragEnd = (item) => {
+  item.dragging = false;
+  item.dragStyle = {};
+  windows.forEach((window) => (window.dragOver = false));
+  dragStarted = false;
+};
+
+// 移动端触摸开始
+const onTouchStart = (event, item) => {
+  event.preventDefault();
+  currentDragItem = item;
+  const touch = event.touches[0];
+  const rect = event.target.getBoundingClientRect();
+
+  touchStartPos = { x: touch.clientX, y: touch.clientY };
+  dragOffset = {
+    x: touch.clientX - rect.left - rect.width / 2,
+    y: touch.clientY - rect.top - rect.height / 2,
+  };
+
+  // 延迟启动拖拽，避免误触
+  setTimeout(() => {
+    if (currentDragItem === item) {
+      item.touchDragging = true;
+      isDragging = true;
+
+      // 创建拖拽克隆
+      dragClone.visible = true;
+      dragClone.text = item.text;
+      dragClone.icon = item.icon;
+      updateDragClonePosition(touch.clientX, touch.clientY);
+    }
+  }, 150);
+};
+
+// 更新拖拽克隆位置
+const updateDragClonePosition = (x, y) => {
+  dragClone.style = {
+    position: "fixed",
+    left: `${x - dragOffset.x}px`,
+    top: `${y - dragOffset.y}px`,
+    zIndex: 1001,
+    pointerEvents: "none",
+    transform: "rotate(-3deg) scale(1.05)",
+    opacity: 0.9,
+  };
+};
+
+// 移动端触摸移动
+const onTouchMove = (event) => {
+  if (!isDragging || !currentDragItem) return;
+
+  event.preventDefault();
+  const touch = event.touches[0];
+
+  // 更新拖拽克隆位置
+  updateDragClonePosition(touch.clientX, touch.clientY);
+
+  const element = document.elementFromPoint(touch.clientX, touch.clientY);
+
+  // 清除所有窗口的dragOver状态
+  windows.forEach((window) => (window.dragOver = false));
+
+  // 检查是否在窗口上
+  if (element && element.closest(".window")) {
+    const windowElement = element.closest(".window");
+    const windowId = windowElement.className.match(/window-([abcd])/)?.[1];
+    if (windowId) {
+      const window = windows.find((w) => w.id === windowId);
+      if (window) {
+        window.dragOver = true;
+      }
+    }
+  }
+};
+
+// 移动端触摸结束
+const onTouchEnd = (event) => {
+  if (!isDragging || !currentDragItem) {
+    currentDragItem = null;
+    return;
+  }
+
+  event.preventDefault();
+  const touch = event.changedTouches[0];
+  const element = document.elementFromPoint(touch.clientX, touch.clientY);
+
+  if (element && element.closest(".window")) {
+    const windowElement = element.closest(".window");
+    const windowId = windowElement.className.match(/window-([abcd])/)?.[1];
+    if (windowId) {
+      addItemToWindow(windowId, currentDragItem);
+    }
+  }
+
+  // 清理状态
+  currentDragItem.touchDragging = false;
+  windows.forEach((window) => (window.dragOver = false));
+  dragClone.visible = false;
+  currentDragItem = null;
+  isDragging = false;
+};
+
+// PC端拖拽悬停
+const onDragOver = (event, windowId) => {
+  event.preventDefault();
+  const window = windows.find((w) => w.id === windowId);
+  if (window) {
+    window.dragOver = true;
+  }
+};
+
+// PC端拖拽离开
+const onDragLeave = (windowId) => {
+  const window = windows.find((w) => w.id === windowId);
+  if (window) {
+    window.dragOver = false;
+  }
+};
+
+// PC端放置
+const onDrop = (event, windowId) => {
+  event.preventDefault();
+  if (currentDragItem) {
+    addItemToWindow(windowId, currentDragItem);
+  }
+
+  windows.forEach((window) => (window.dragOver = false));
+};
+
+// 添加项目到窗口
+const addItemToWindow = (windowId, item) => {
+  const window = windows.find((w) => w.id === windowId);
+  if (window) {
+    // 检查是否已经存在
+    const exists = window.items.some(
+      (existingItem) => existingItem.id === item.id
+    );
+    if (!exists) {
+      window.items.push({
+        id: item.id,
+        text: item.text,
+        originalId: item.id,
+      });
+
+      // 从可拖拽列表中移除
+      const index = draggableItems.findIndex((i) => i.id === item.id);
+      if (index > -1) {
+        draggableItems.splice(index, 1);
+      }
+    }
+  }
+};
+
+// 移除项目
+const removeItem = (windowId, itemId) => {
+  const window = windows.find((w) => w.id === windowId);
+  if (window) {
+    const itemIndex = window.items.findIndex((item) => item.id === itemId);
+    if (itemIndex > -1) {
+      const item = window.items[itemIndex];
+      window.items.splice(itemIndex, 1);
+
+      // 重新添加到可拖拽列表
+      draggableItems.push({
+        id: item.originalId,
+        text: item.text,
+        special: false,
+        dragging: false,
+        touchDragging: false,
+        dragStyle: {},
+      });
+    }
+  }
+};
+
+const router = useRouter();
+
+const headinfo = ref({});
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: "时间管理4D法",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrlUse: true,
+  };
+}
+onMounted(() => {
+  setHeadinfo();
+});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+
+// lb
+
+// ed
+</script>
+
+<style scoped lang="scss">
+::v-deep .dialog-footer button:first-child {
+  margin-right: 102px !important;
+}
+::v-deep .el-dialog__footer {
+  text-align: center;
+}
+/* 穿透修改对话框内容 */
+::v-deep .custom-dialog .el-dialog__body span {
+  margin-bottom: 40px;
+  font-size: 24px;
+  display: block;
+  text-align: center;
+}
+/* 修改按钮样式 */
+::v-deep .dialog-footer .el-button {
+  font-size: 18px;
+  padding: 12px 24px;
+}
+::v-deep .dialog-footer .el-button--primary {
+  background-color: #ff0000 !important;
+  border-color: #ff0000 !important;
+  height: 48px;
+  border-radius: 12px;
+}
+::v-deep .dialog-footer .el-button:not(.el-button--primary) {
+  background-color: #2ac17a !important;
+  color: #fff !important;
+  height: 48px;
+  border-radius: 12px;
+}
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+.h3t {
+  font-size: 24px !important;
+  color: #01764f !important;
+  font-weight: 900;
+  border-radius: 14px;
+  width: 628px;
+  height: 47px;
+  line-height: 47px;
+  position: absolute;
+  background: #ade0f8;
+  top: -25px;
+  left: 1228px;
+  z-index: 1;
+}
+.container {
+  position: absolute;
+  top: 126px;
+  left: 30px;
+  display: flex;
+  gap: 15px;
+  width: 97%;
+  margin: 0 auto;
+  height: calc(100vh - 144px);
+}
+
+.left-panel {
+  flex: 2;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 32px;
+}
+
+.window {
+  border-radius: 35px;
+  padding: 0px;
+  min-height: 200px;
+  position: relative;
+  transition: all 0.3s ease;
+  border: 2px dashed transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+.window-b .window-title {
+  background: linear-gradient(135deg, #ff8a65, #ff5722);
+}
+.window-a .window-title {
+  background: linear-gradient(135deg, #42a5f5, #1976d2);
+}
+.window-c .window-title {
+  background: linear-gradient(135deg, #66bb6a, #388e3c);
+}
+.window-d .window-title {
+  background: linear-gradient(135deg, #424242, #212121);
+}
+.window-b {
+  background: #fff;
+}
+
+.window-a {
+  background: #fff;
+}
+
+.window-d {
+  background: #fff;
+}
+
+.window-c {
+  background: #fff;
+}
+.window-title {
+  color: white;
+  font-weight: bold;
+  font-size: 24px;
+  margin-bottom: 15px;
+  text-align: center;
+  padding: 8px 12px;
+  border-radius: 35px 35px 0px 0px;
+  width: 100%;
+}
+
+.window.drag-over {
+  border-color: #ffeb3b;
+  transform: scale(1.02);
+  box-shadow: 0 8px 25px rgba(255, 235, 59, 0.4);
+}
+
+.right-panel {
+  flex: 1;
+  background: linear-gradient(135deg, #b3e5fc, #81d4fa);
+  border-radius: 12px;
+  padding: 15px;
+  overflow-y: auto;
+  padding-top: 59px;
+}
+
+.right-panel h3 {
+  color: #0277bd;
+  margin-bottom: 15px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.draggable-item {
+  background: white;
+  border-radius: 28px;
+  border: 4px solid #c7c7c7;
+  padding: 15px;
+  margin-bottom: 10px;
+  cursor: grab;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 150px;
+  font-size: 24px;
+  color: #666;
+  position: relative;
+}
+
+.draggable-item:active {
+  cursor: grabbing;
+}
+
+.draggable-item.dragging {
+  opacity: 0.3;
+  transform: scale(0.95);
+  z-index: 1000;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+  border-color: #4caf50;
+}
+
+.draggable-item.touch-dragging {
+  opacity: 0.3;
+  transform: scale(0.95);
+}
+
+.draggable-item.special {
+  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
+  border: 2px solid #ffcc02;
+}
+
+// 拖拽克隆元素样式
+.drag-clone {
+  background: white;
+  border-radius: 28px;
+  border: 4px solid #4caf50;
+  padding: 15px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 150px;
+  font-size: 24px;
+  color: #666;
+  position: fixed;
+  pointer-events: none;
+  z-index: 1001;
+  transition: transform 0.1s ease-out;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: -5px;
+    right: -5px;
+    bottom: -5px;
+    background: linear-gradient(45deg, #4caf50, #81c784);
+    border-radius: 32px;
+    z-index: -1;
+    animation: glow 1.5s ease-in-out infinite alternate;
+  }
+}
+
+@keyframes glow {
+  from {
+    box-shadow: 0 0 10px #4caf50;
+  }
+  to {
+    box-shadow: 0 0 20px #4caf50, 0 0 30px #4caf50;
+  }
+}
+
+.dropped-item {
+  background: white;
+  width: 98%;
+  height: 50px;
+  border-radius: 18px;
+  padding: 12px;
+  margin: 8px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  font-size: 18px;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.remove-btn {
+  background: #f44336;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.robot-icon {
+  width: 40px;
+  height: 40px;
+  margin-left: 10px;
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .left-panel {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, 150px);
+    order: 2;
+  }
+
+  .right-panel {
+    order: 1;
+    flex: none;
+    height: 400px;
+    margin-bottom: 20px;
+  }
+
+  .window {
+    min-height: 120px;
+    padding: 15px;
+    overflow: auto;
+  }
+
+  .window-title {
+    font-size: 12px;
+    padding: 6px 10px;
+  }
+}
+.maturity-game-page {
+  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+  //     no-repeat;
+  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  .page-content {
+    width: 100%;
+    position: relative;
+    padding-top: 123px;
+    min-height: calc(100vh - 123px);
+    padding-bottom: 0px; // 添加底部内边距防止内容贴边
+
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
+</style>

src/views/xjc-integratedmachine/plan/time/time_management_4d_explanation.vue

@@ -1,11 +1,113 @@
 <template>
-    时间管理4D法知识讲解
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="d fd">
+      <div class="d fd1"></div>
+      <div class="d fd2"></div>
+    </div>
+    <drag_component></drag_component>
+  </div>
 </template>
 
 <script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted, watch, nextTick } from "vue";
 
+const router = useRouter();
+
+const headinfo = ref({});
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: "时间管理4D法",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrlUse: true,
+  };
+}
+onMounted(() => {
+  setHeadinfo();
+});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+
+// lb
+
+// ed
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.fd1 {
+  width: 100%;
+  height: 1030px;
+  background: url("/src/assets/images/timeManagement/3-2.png")-177px -173px;
+}
+.fd2 {
+  width: 100%;
+  height: 1030px;
+  background: url("/src/assets/images/timeManagement/3-1.png") 245px 20px
+    no-repeat;
+}
+.fd {
+  width: 1832px;
+  height: 2096px;
+  box-sizing: border-box;
+  padding: 30px 140px;
+  background-color: #fff;
+  position: absolute;
+  border-radius: 42px;
+  top: 124px;
+  left: 42px;
+}
+.maturity-game-page {
+  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+  //     no-repeat;
+  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 100vh;
+  height: 2256px;
+  position: relative;
+
+  .page-content {
+    width: 100%;
+    position: relative;
+    padding-top: 123px;
+    min-height: calc(100vh - 123px);
+    padding-bottom: 0px; // 添加底部内边距防止内容贴边
 
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
 </style>

src/views/xjc-integratedmachine/plan/time/time_management_4d_index.vue

@@ -1,11 +1,119 @@
 <template>
-    时间管理4D法首页
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="td"></div>
+    <div class="d fd">
+      <div
+        class="d d1"
+        @click="
+          jumpTo(
+            '/xjc-integratedmachine/plan/time/time_management_4d_explanation'
+          )
+        "
+      ></div>
+      <div
+        class="d d2"
+        @click="
+          jumpTo(
+            '/xjc-integratedmachine/plan/time/time_management_4d_evaluation'
+          )
+        "
+      ></div>
+    </div>
+    <drag_component></drag_component>
+  </div>
 </template>
 
 <script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted, watch, nextTick } from "vue";
 
+const router = useRouter();
+
+const headinfo = ref({});
+
+onMounted(() => {});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+
+// lb
+
+// ed
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.td {
+  width: 864px;
+  height: 181px;
+  position: absolute;
+  background: url("@/assets/images/timeManagement/2-1.png") 93% 81%;
+  top: 240px;
+  left: 524px;
+}
+.fd {
+  width: 1360px;
+  position: absolute;
+  top: 500px;
+  left: 482px;
+}
+.d1,
+.d2 {
+  width: 398px;
+  height: 248px;
+  float: left;
+}
+.d1 {
+  margin-right: 150px;
+  background: url("@/assets/images/timeManagement/2-2.png") 100% 100%;
+}
+.d2 {
+  background: url("@/assets/images/timeManagement/2-3.png") 100% 100%;
+}
+.maturity-game-page {
+  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+  //     no-repeat;
+  background: url("@/assets/images/timeManagement/bg.png") 100% 100%;
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  .page-content {
+    width: 100%;
+    position: relative;
+    padding-top: 123px;
+    min-height: calc(100vh - 123px);
+    padding-bottom: 0px; // 添加底部内边距防止内容贴边
 
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
 </style>

src/views/xjc-integratedmachine/plan/time/time_management_assessment_index.vue

@@ -1,11 +1,119 @@
 <template>
-    时间管理测评首页
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="td"></div>
+    <div class="d fd">
+      <div
+        class="d d1"
+        @click="
+          jumpTo(
+            '/xjc-integratedmachine/plan/time/time_management_assessment_explanation'
+          )
+        "
+      ></div>
+      <div
+        class="d d2"
+        @click="
+          jumpTo(
+            '/xjc-integratedmachine/plan/time/time_management_assessment_init'
+          )
+        "
+      ></div>
+    </div>
+    <drag_component></drag_component>
+  </div>
 </template>
 
 <script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted, watch, nextTick } from "vue";
 
+const router = useRouter();
+
+const headinfo = ref({});
+
+onMounted(() => {});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+
+// lb
+
+// ed
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.td {
+  width: 864px;
+  height: 181px;
+  position: absolute;
+  background: url("@/assets/images/timeManagement/2-1.png") 93% 81%;
+  top: 240px;
+  left: 524px;
+}
+.fd {
+  width: 1360px;
+  position: absolute;
+  top: 500px;
+  left: 482px;
+}
+.d1,
+.d2 {
+  width: 398px;
+  height: 248px;
+  float: left;
+}
+.d1 {
+  margin-right: 150px;
+  background: url("@/assets/images/timeManagement/2-2.png") 100% 100%;
+}
+.d2 {
+  background: url("@/assets/images/timeManagement/test1-1.png") 100% 100%;
+}
+.maturity-game-page {
+  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+  //     no-repeat;
+  background: url("@/assets/images/timeManagement/bg.png") 100% 100%;
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  .page-content {
+    width: 100%;
+    position: relative;
+    padding-top: 123px;
+    min-height: calc(100vh - 123px);
+    padding-bottom: 0px; // 添加底部内边距防止内容贴边
 
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
 </style>

src/views/xjc-integratedmachine/plan/time/time_management_assessment_init.vue

@@ -0,0 +1,853 @@
+<template>
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <!-- 结果页面 -->
+    <div v-if="showResult" class="bg-gradient container">
+      <div class="glass-card result-card">
+        <div class="result-emoji">🎉</div>
+        <h2 class="result-title">测试完成！</h2>
+        <p class="result-score">
+          您的得分：<span class="score-highlight">{{ score }}</span> /
+          {{ questions.length }}
+        </p>
+        <p class="result-percentage">
+          正确率：{{ Math.round((score / questions.length) * 100) }}%
+        </p>
+        <button @click="resetQuiz" class="btn-primary">重新开始</button>
+      </div>
+
+      <div class="floating-decoration float-1"></div>
+      <div class="floating-decoration float-2"></div>
+      <div class="floating-decoration float-3"></div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-else-if="loading" class="bg-gradient container">
+      <div class="glass-card quiz-card">
+        <div class="loading-content">
+          <div class="loading-spinner"></div>
+          <p>加载题目中...</p>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="bg-gradient container">
+      <!-- 背景装饰云朵 -->
+      <div class="cloud cloud-1"></div>
+      <div class="cloud cloud-2"></div>
+      <div class="cloud cloud-3"></div>
+      <div class="cloud cloud-4"></div>
+
+      <!-- 顶部控制栏 -->
+      <div class="top-controls">
+        <button
+          @click="previousQuestion"
+          :disabled="currentQuestion === 0"
+          class="btn-secondary"
+        ></button>
+      </div>
+
+      <!-- 主要内容区域 -->
+      <div class="glass-card quiz-card">
+        <!-- 问题卡片 -->
+        <div class="question-card">
+          <h2 class="question-text">
+            {{ currentQuestionData?.questionTitle || "" }}
+          </h2>
+        </div>
+
+        <!-- 答案选项 -->
+        <div class="options-grid">
+          <button
+            v-for="option in currentQuestionData?.options || []"
+            :key="option.id"
+            @click="selectAnswer(currentQuestionData, option.score, option.id)"
+            :class="[
+              'option-btn',
+              option.colorClass,
+              { selected: selectedAnswer === option.id },
+            ]"
+          >
+            {{ option.text }}
+          </button>
+        </div>
+
+        <!-- 进度条 -->
+        <div class="progress-container">
+          <div class="progress-header">
+            <span>进度</span>
+            <span>{{ Math.round(progress) }}%</span>
+          </div>
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+          </div>
+        </div>
+
+        <div class="question-counter">
+          <span style="color: rgb(101 255 165)">{{ currentQuestion + 1 }}</span
+          >/{{ questions.length }}
+        </div>
+        <div class="countdown">
+          <span class="time">
+            <span class="icon">⏰</span>
+            {{ timeStr }}
+          </span>
+        </div>
+
+        <!-- 下一步按钮 -->
+        <div
+          style="
+            text-align: center;
+            background: ('/src/assets/images/timeManagement/testSubmit.png');
+          "
+        >
+          <button
+            @click="submit"
+            v-show="currentQuestion === questions.length - 1"
+            class="btn-primary"
+          >
+            提交答案
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <drag_component></drag_component>
+  </div>
+</template>
+
+<script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted, watch, nextTick } from "vue";
+import {
+  platformytjappraisalcommon,
+  platformytjappraisalinsertAppraisalAnswer,
+} from "@/api/xjc-integratedmachine/planTimeManegement/index.js";
+
+// 响应式数据
+const currentQuestion = ref(0);
+const selectedAnswer = ref(null);
+const score = ref(0);
+const showResult = ref(false);
+const loading = ref(true); // 添加加载状态
+
+// 题目数据
+const questions = ref([]);
+
+// 计算属性
+const currentQuestionData = computed(() => {
+  if (
+    questions.value.length === 0 ||
+    currentQuestion.value >= questions.value.length
+  ) {
+    return null;
+  }
+  return questions.value[currentQuestion.value];
+});
+
+const progress = computed(() => {
+  if (questions.value.length === 0) return 0;
+  return ((currentQuestion.value + 1) / questions.value.length) * 100;
+});
+
+const selectAnswer = (obj, score, answerId) => {
+  console.log(obj, score, 88);
+  obj.score = score;
+  selectedAnswer.value = answerId;
+
+  // 如果不是最后一题，自动跳转到下一题
+  if (currentQuestion.value < questions.value.length - 1) {
+    nextQuestion();
+  }
+  // 如果是最后一题，不自动跳转，等待用户点击"完成测试"按钮
+};
+
+const nextQuestion = () => {
+  if (!selectedAnswer.value) return;
+
+  // 检查答案是否正确
+  if (selectedAnswer.value === currentQuestionData.value.correctAnswer) {
+    score.value++;
+  }
+
+  // 移动到下一题
+  currentQuestion.value++;
+  selectedAnswer.value = null;
+};
+
+const previousQuestion = () => {
+  console.log(111);
+  if (currentQuestion.value > 0) {
+    currentQuestion.value--;
+    selectedAnswer.value = null;
+  }
+};
+
+const resetQuiz = () => {
+  currentQuestion.value = 0;
+  selectedAnswer.value = null;
+  score.value = 0;
+  showResult.value = false;
+};
+function extractScores(data) {
+  return data.map((item) => item.score).join("|") + "|";
+}
+const submit = () => {
+  //if (!selectedAnswer.value) return;
+
+  // 检查最后一题的答案
+  if (selectedAnswer.value === currentQuestionData.value.correctAnswer) {
+    score.value++;
+  }
+  function timeToSeconds(timeStr) {
+    const [hh, mm, ss] = timeStr.split(":").map(Number);
+    return hh * 3600 + mm * 60 + ss;
+  }
+  //showResult.value = true;
+  let obj = {
+    itemScore: extractScores(questions.value),
+    useTime: timeToSeconds(timeStr.value),
+    sourceType: "1",
+    appraisalId: appraisalId,
+  };
+
+  console.log(obj, timeStr, 22);
+  platformytjappraisalinsertAppraisalAnswer(obj)
+    .then((res) => {
+      console.log(res, 11111);
+      appraisalAnswerId = res.data.appraisalAnswerId;
+      jumpTo(
+        "/xjc-integratedmachine/plan/time/time_management_assessment_webreport"
+      );
+    })
+    .catch((err) => {
+      console.log("error", err);
+      loading.value = false; // 即使出错也要停止加载状态
+    });
+};
+let appraisalAnswerId = "";
+const router = useRouter();
+
+const headinfo = ref({});
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: "时间管理评测",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrlUse: true,
+  };
+}
+
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+
+const timeStr = ref("00:00:00");
+let seconds = 0;
+let id = null;
+
+function updateStr() {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = seconds % 60;
+  timeStr.value = `${pad(h)}:${pad(m)}:${pad(s)}`;
+}
+
+// 固定映射表
+const optionMap = {
+  非常不符合: { id: "a", colorClass: "option-red" },
+  不符合: { id: "b", colorClass: "option-yellow" },
+  不确定: { id: "c", colorClass: "option-purple" },
+  符合: { id: "d", colorClass: "option-blue" },
+  完全符合: { id: "e", colorClass: "option-green" },
+};
+
+function transformQuestions(questionList) {
+  return questionList.map((q) => {
+    const items = q.questionItems.split(";"); // ["非常不符合","不符合",...]
+    const items1 = q.questionAnswer.split(";"); // ["非常不符合","不符合",...]
+    const options = items.map((text, i) => ({
+      id: optionMap[text].id,
+      text,
+      colorClass: optionMap[text].colorClass,
+      score: items1[i],
+    }));
+
+    return {
+      id: q.questionId,
+      questionTitle: q.questionTitle,
+      options,
+    };
+  });
+}
+let appraisalId = "";
+onMounted(() => {
+  platformytjappraisalcommon({ appraisalCode: "1061" })
+    .then((res) => {
+      appraisalId = res.data.appraisalId;
+      questions.value = transformQuestions(res.data.questionList);
+      loading.value = false; // 数据加载完成
+      console.log(questions.value, res, 2222);
+    })
+    .catch((err) => {
+      console.log("error", err);
+      loading.value = false; // 即使出错也要停止加载状态
+    });
+
+  updateStr();
+  id = setInterval(() => {
+    seconds += 1;
+    updateStr();
+  }, 1000);
+  setHeadinfo();
+});
+
+onUnmounted(() => {
+  if (id) clearInterval(id);
+});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { appraisalAnswerId: appraisalAnswerId },
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.countdown {
+  position: absolute;
+  top: 108px;
+  left: 1294px;
+  font-size: 40px;
+  font-weight: 100;
+  color: #fff;
+}
+
+/* 加载状态样式 */
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  color: #666;
+  font-size: 18px;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #3498db;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* 毛玻璃效果 */
+.glass-card {
+  //   background: rgba(255, 255, 255, 0.9);
+  //   backdrop-filter: blur(10px);
+  //   border-radius: 24px;
+  //   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
+  //   border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 问题卡片 */
+.question-card {
+  //   background: linear-gradient(135deg, #e6f3ff 0%, #f0fff0 100%);
+  border-radius: 16px;
+  padding: 24px;
+  margin-bottom: 32px;
+  //   border: 2px solid rgba(255, 255, 255, 0.5);
+  text-align: center;
+  margin-top: 158px;
+}
+
+.question-card h2 {
+  font-size: 40px;
+}
+
+.question-text {
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+  line-height: 1.6;
+}
+
+/* 答案选项样式 */
+.options-grid {
+  //   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
+  margin-bottom: 32px;
+  position: absolute;
+  /* margin-top: 20px; */
+  top: 550px;
+  width: 1500px;
+  left: 15px;
+}
+
+.option-btn {
+  font-size: 30px;
+  margin-right: 40px;
+  width: 200px;
+  height: 100px;
+  float: left;
+  padding: 16px 12px;
+  border-radius: 16px;
+  font-weight: 400;
+  color: #1f2937;
+  border: none;
+  cursor: pointer;
+  transform: scale(1);
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.option-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.option-btn:active {
+  transform: scale(0.95);
+}
+
+.option-btn.selected {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 4px #60a5fa;
+}
+
+/* 选项颜色 */
+.option-red {
+  background: linear-gradient(180deg, rgba(255, 227, 87, 0) 0%, #ffa154 100%),
+    #ffcfa9;
+  box-shadow: 0px 3px 5px 0px rgba(255, 94, 0, 0.15),
+    0px 9px 9px 0px rgba(255, 94, 0, 0.13),
+    0px 20px 13px 0px rgba(255, 94, 0, 0.08),
+    0px 37px 14px 0px rgba(255, 94, 0, 0.02),
+    0px 57px 17px 0px rgba(255, 94, 0, 0);
+  border-radius: 25px 25px 25px 25px;
+  border: 1px solid rgba(255, 98, 0, 0.4);
+  color: #e45f11;
+}
+.option-red:hover {
+  background: #fecaca;
+}
+
+.option-yellow {
+  background: linear-gradient(180deg, rgba(255, 227, 87, 0) 0%, #ffe357 100%),
+    #fffcc5;
+  border-radius: 25px 25px 25px 25px;
+  color: #e1ae1c;
+}
+.option-yellow:hover {
+  background: #fde68a;
+}
+
+.option-purple {
+  background: linear-gradient(180deg, rgba(228, 194, 255, 0) 0%, #e1c2ff 100%),
+    #f4e8ff;
+  border-radius: 25px 25px 25px 25px;
+  color: #7b00ff;
+}
+.option-purple:hover {
+  background: #ddd6fe;
+}
+
+.option-blue {
+  background: linear-gradient(180deg, rgba(127, 217, 240, 0) 0%, #7fd8f0 100%),
+    #c5f3ff;
+  border-radius: 25px 25px 25px 25px;
+  color: #006eff;
+}
+.option-blue:hover {
+  background: #bfdbfe;
+}
+
+.option-green {
+  background: linear-gradient(180deg, rgba(119, 240, 176, 0) 0%, #77f0b0 100%),
+    #c0ffe4;
+  border-radius: 25px 25px 25px 25px;
+  color: #0bc063;
+}
+.option-green:hover {
+  background: #a7f3d0;
+}
+
+/* 进度条 */
+.progress-container {
+  margin-bottom: 24px;
+  position: absolute;
+  bottom: -139px;
+  width: 1118px;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #6b7280;
+  margin-bottom: 8px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 12px;
+  background: #e5e7eb;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  //   background: linear-gradient(90deg, #10b981, #3b82f6);
+
+  background: #63ffa4;
+  transition: width 0.5s ease;
+  border-radius: 6px;
+}
+
+/* 按钮样式 */
+.btn-primary {
+  background: linear-gradient(135deg, rgb(109, 237, 106), rgb(10, 202, 98));
+  color: white;
+  padding: 12px 32px;
+  border-radius: 14px;
+  font-weight: 600;
+  border: none;
+  position: absolute;
+  top: 190px;
+  right: -350px;
+  box-shadow: 1px 1px 10px #777;
+  font-size: 24px;
+  width: 244px;
+  height: 77px;
+  cursor: pointer;
+  transform: scale(1);
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: scale(1.05);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.btn-primary:disabled {
+  background: #9ca3af;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-secondary {
+  background: url(/src/assets/images/timeManagement/test-prev.png) 47% 22%;
+  width: 244px;
+  height: 77px;
+  color: #000;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-secondary:hover:not(:disabled) {
+  //   background: #65a30d;
+}
+
+.btn-secondary:disabled {
+  //   background: #9ca3af;
+  cursor: not-allowed;
+}
+
+/* 布局 */
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 16px;
+  position: relative;
+  top: -218px;
+}
+
+.quiz-card {
+  background: url(/src/assets/images/timeManagement/test2-1.png) 47% 22%
+    no-repeat;
+  width: 1187px;
+  height: 830px;
+  padding: 32px;
+  position: absolute;
+  top: 109px;
+}
+
+.result-card {
+  max-width: 400px;
+  width: 100%;
+  padding: 32px;
+  text-align: center;
+}
+
+/* 顶部控制栏 */
+.top-controls {
+  position: absolute;
+  top: 126px;
+  right: 16px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  z-index: 10;
+}
+
+.question-counter {
+  width: 20px;
+  /* background: rgba(0, 0, 0, 0.7); */
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 22px;
+  font-weight: 900;
+  position: absolute;
+  right: 9px;
+  top: 916px;
+}
+
+/* 装饰元素 */
+.cloud {
+  position: absolute;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 50px;
+}
+
+.cloud-1 {
+  top: 40px;
+  left: 40px;
+  width: 80px;
+  height: 48px;
+}
+.cloud-2 {
+  top: 80px;
+  left: 128px;
+  width: 64px;
+  height: 40px;
+}
+.cloud-3 {
+  top: 128px;
+  right: 80px;
+  width: 96px;
+  height: 56px;
+}
+.cloud-4 {
+  bottom: 80px;
+  left: 64px;
+  width: 72px;
+  height: 44px;
+}
+
+.decoration {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.robot {
+  bottom: 32px;
+  right: 32px;
+  width: 64px;
+  height: 64px;
+  background: rgba(255, 255, 255, 0.8);
+  font-size: 24px;
+}
+
+.book {
+  bottom: 32px;
+  left: 32px;
+  width: 48px;
+  height: 48px;
+  background: rgba(59, 130, 246, 0.6);
+  border-radius: 8px;
+  font-size: 20px;
+}
+
+/* 结果页面 */
+.result-emoji {
+  font-size: 64px;
+  margin-bottom: 16px;
+}
+
+.result-title {
+  font-size: 28px;
+  font-weight: bold;
+  color: #1f2937;
+  margin-bottom: 8px;
+}
+
+.result-score {
+  font-size: 18px;
+  color: #6b7280;
+  margin-bottom: 8px;
+}
+
+.result-percentage {
+  font-size: 14px;
+  color: #9ca3af;
+  margin-bottom: 24px;
+}
+
+.score-highlight {
+  font-weight: bold;
+  color: #3b82f6;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .options-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .quiz-card {
+    padding: 24px;
+  }
+
+  .question-text {
+    font-size: 18px;
+  }
+}
+
+/* 动画 */
+@keyframes bounce {
+  0%,
+  20%,
+  53%,
+  80%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  40%,
+  43% {
+    transform: translate3d(0, -30px, 0);
+  }
+  70% {
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0, -4px, 0);
+  }
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
+.floating-decoration {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.float-1 {
+  top: 80px;
+  left: 80px;
+  width: 64px;
+  height: 64px;
+  animation: bounce 2s infinite;
+}
+
+.float-2 {
+  bottom: 80px;
+  right: 80px;
+  width: 48px;
+  height: 48px;
+  animation: bounce 2.5s infinite;
+}
+
+.float-3 {
+  top: 33%;
+  right: 40px;
+  width: 32px;
+  height: 32px;
+  animation: bounce 3s infinite;
+}
+.countdown .time {
+  display: flex; /* 横向排列 */
+  align-items: center; /* 垂直居中 */
+  gap: 8px; /* 图标和时间之间留点间距 */
+  font-size: 40px;
+  font-weight: 100;
+  color: #fff;
+}
+
+.countdown .icon {
+  margin-top: 0; /* 去掉原来的 -10px */
+  font-size: 40px; /* 保证和数字一样大 */
+}
+
+.maturity-game-page {
+  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+  //     no-repeat;
+  background: linear-gradient(rgb(0 123 255 / 6%), rgba(0, 123, 255, 0.5)),
+    url(/src/assets/images/timeManagement/bg.png) 100% 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  .page-content {
+    width: 100%;
+    position: relative;
+    padding-top: 123px;
+    min-height: calc(100vh - 123px);
+    padding-bottom: 0px; // 添加底部内边距防止内容贴边
+
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
+</style>

src/views/xjc-integratedmachine/plan/time/time_management_menu.vue

@@ -1,11 +1,108 @@
 <template>
-    时间管理菜单页
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="d fd">
+      <div
+        class="d d1"
+        @click="
+          jumpTo('/xjc-integratedmachine/plan/time/time_management_4d_index')
+        "
+      ></div>
+      <div
+        class="d d2"
+        @click="
+          jumpTo(
+            '/xjc-integratedmachine/plan/time/time_management_assessment_index'
+          )
+        "
+      ></div>
+    </div>
+    <drag_component></drag_component>
+  </div>
 </template>
 
 <script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { onMounted, watch, nextTick } from "vue";
 
+const router = useRouter();
+
+const headinfo = ref({});
+
+onMounted(() => {});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+
+// lb
+
+// ed
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.fd {
+  width: 1360px;
+  position: absolute;
+  top: 200px;
+  left: 282px;
+}
+.d1,
+.d2 {
+  width: 600px;
+  height: 600px;
+  float: left;
+}
+.d1 {
+  margin-right: 150px;
+  background: url("@/assets/images/timeManagement/1-1.png") 100% 100%;
+}
+.d2 {
+  background: url("@/assets/images/timeManagement/1-2.png") 100% 100%;
+}
+.maturity-game-page {
+  //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
+  //     no-repeat;
+  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+
+  .page-content {
+    width: 100%;
+    position: relative;
+    padding-top: 123px;
+    min-height: calc(100vh - 123px);
+    padding-bottom: 0px; // 添加底部内边距防止内容贴边
 
+    .top {
+      width: 100%;
+      height: 212px;
+      display: flex;
+      justify-content: center;
+      margin-top: 104px;
+      img {
+        width: 864px;
+        height: 212px;
+      }
+    }
+    .bottom {
+      width: 100%;
+      height: 248px;
+      display: flex;
+      justify-content: space-around;
+      margin-top: 186px;
+      img {
+        width: 398px;
+        height: 248px;
+      }
+    }
+  }
+}
 </style>