Merge remote-tracking branch 'origin/master'

src/api/xjc-integratedmachine/plan/aim.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 目标管理素材
+export function getAimManagementMaterial(data) {
+    return request({
+        url: '/integratedmachine/aim/management/material/getTree',
+        method: 'get',
+        params : data
+    })
+}
+

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

@@ -1,5 +1,11 @@
 import request from "@/utils/request";
-
+export function integratedmachinetimemanagerlist(query) {
+  return request({
+    url: "/integratedmachine/timemanager/list",
+    method: "get",
+    params: query,
+  });
+}
 export function platformytjappraisalreport1061(query) {
   return request({
     url: "/platform/ytj/appraisal/report/1061",

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

@@ -1,11 +1,153 @@
 <template>
-    目标管理知识讲解
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="d fd">
+      <div class="d fd1" :style="fd1Style"></div>
+    </div>
+    <div class="wdiv"></div>
+    <div class="wdiv1" :style="wdiv1Style"></div>
+    <div class="wdiv2" @click="next()"></div>
+    <drag_component></drag_component>
+  </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from "vue";
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
+
+const headinfo = ref({});
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: "时间管理4D法",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl: "/xjc-integratedmachine/plan/aim/aim_management_index",
+    backUrlUse: true,
+  };
+}
+
+onMounted(() => {
+  setHeadinfo();
+});
+
+// fd1初始样式
+const fd1Style = ref({
+  background:
+    'url("/src/assets/images/timeManagement/know1.png") -177px -158px',
+  height: "1818px",
+});
+
+// wdiv1初始样式
+const wdiv1Style = ref({
+  top: "1752px",
+});
+
+function next() {
+  // 修改fd1样式
+  fd1Style.value.background =
+    'url("/src/assets/images/timeManagement/smart.png") -177px -137px';
+  fd1Style.value.height = "1594px";
+
+  // 修改wdiv1样式
+  wdiv1Style.value.top = "1515px"; // 滚动页面到顶部
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth", // 平滑滚动，可去掉改成 instant
+  });
+}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.wdiv {
+  width: 131px;
+  height: 200px;
+  background: #fff;
+  position: absolute;
+  top: 1695px;
+  left: 1712px;
+}
+.wdiv1 {
+  width: 131px;
+  height: 215px;
+  background: #fff;
+  position: absolute;
+  top: 1752px;
+  left: 1604px;
+}
+.wdiv2 {
+  width: 245px;
+  height: 71px;
+  position: absolute;
+  top: 1880px;
+  left: 843px;
+}
+.fd1 {
+  width: 100%;
+  height: 1818px;
+  background: url("/src/assets/images/timeManagement/know1.png") -177px -158px;
+}
+
+.fd1.changeBg {
+  background: url("/src/assets/images/timeManagement/smart.png") -177px -158px;
+}
+.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/aim/aim_management_index.vue

@@ -1,123 +1,22 @@
 <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 class="td"></div>
+    <div class="d fd">
       <div
-        style="
-          width: 100%;
-          height: 8px;
-          background: rgb(173 173 173);
-          border-top: 3px solid #fff;
+        class="d d1"
+        @click="
+          jumpTo('/xjc-integratedmachine/plan/aim/aim_explanation_knowledge')
         "
       ></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>
+        class="d d2"
+        @click="
+          jumpTo('/xjc-integratedmachine/plan/aim/aim_management_interaction')
+        "
+      ></div>
     </div>
+    <drag_component></drag_component>
   </div>
 </template>
 
@@ -129,51 +28,8 @@ 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();
-});
+onMounted(() => {});
 
 function jumpTo(path) {
   router.push({
@@ -183,773 +39,43 @@ function jumpTo(path) {
 }
 
 // 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 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 {
+.td {
+  width: 864px;
+  height: 181px;
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  pointer-events: none;
+  background: url("@/assets/images/timeManagement/managementbyobjectives.png")
+    93% 81%;
+  top: 240px;
+  left: 524px;
 }
-
-/* 连接线 */
-.connection {
+.fd {
+  width: 1360px;
   position: absolute;
-  background: transparent;
-  border-left: 4px dashed #2c8f30;
+  top: 500px;
+  left: 482px;
 }
-
-/* 长期目标到中期目标的连线 */
-.long-to-mid-1,
-.long-to-mid-2 {
-  height: 60px;
-  top: 60px;
-  left: 50%;
+.d1,
+.d2 {
+  width: 398px;
+  height: 248px;
+  float: left;
 }
-
-.long-to-mid-1 {
-  transform: translateX(-100%) rotate(-30deg);
-  transform-origin: top center;
+.d1 {
+  margin-right: 150px;
+  background: url("@/assets/images/timeManagement/2-2.png") 100% 100%;
 }
-
-.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;
+.d2 {
+  background: url("@/assets/images/timeManagement/2-3.png") 100% 100%;
 }
-
-.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: url("@/assets/images/timeManagement/bg.png") 100% 100%;
   background-attachment: fixed;
   z-index: 10;
   width: 100%;

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

@@ -30,7 +30,7 @@
 
       <!-- 右侧拖拽项目区域 -->
       <div class="right-panel">
-        <h3 class="h3t">请拖放到对应事件中一归类，根据您安预的时感选出中</h3>
+        <h3 class="h3t">请拖放到对应事件逐一归类，拖拽到左侧的时间象限图中</h3>
         <div
           v-for="item in draggableItems"
           :key="item.id"
@@ -64,6 +64,8 @@
     </div>
 
     <drag_component></drag_component>
+
+    <!-- 未完成退出确认对话框 -->
     <el-dialog
       v-model="centerDialogVisible"
       title=""
@@ -71,17 +73,72 @@
       align-center
       style="padding: 40px; top: 300px; border-radius: 20px"
       class="custom-dialog"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
     >
       <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 @click="handleContinue">继续体验</el-button>
+          <el-button type="primary" @click="handleConfirmExit">
             确定退出
           </el-button>
         </span>
       </template>
     </el-dialog>
+
+    <!-- 完成退出对话框 -->
+    <el-dialog
+      v-model="centerDialogVisible1"
+      title=""
+      width="30%"
+      align-center
+      style="padding: 40px; top: 300px; border-radius: 20px"
+      class="custom-dialog"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <span>恭喜您完成本次探索，收获满满！</span>
+      <template #footer>
+        <span class="dialog-footer" style="">
+          <el-button
+            style="margin-right: 0px !important"
+            class="button1"
+            @click="handleKnowExit"
+          >
+            我知道了
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 类型不匹配提示对话框 -->
+    <el-dialog
+      v-model="centerDialogVisible2"
+      title=""
+      width="30%"
+      align-center
+      style="padding: 40px; top: 300px; border-radius: 20px"
+      class="custom-dialog"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <span>不属于此区域，请重新选择！</span>
+      <template #footer>
+        <span class="dialog-footer" style="">
+          <el-button
+            style="margin-right: 0px !important"
+            class="button1"
+            @click="handleTypeError"
+          >
+            我知道了
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -90,8 +147,14 @@ import headComponent from "@/views/xjc-integratedmachine/components/head_compone
 import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
 import { onMounted, watch, nextTick, reactive, ref } from "vue";
 import { ElMessageBox } from "element-plus";
+import { integratedmachinetimemanagerlist } from "@/api/xjc-integratedmachine/planTimeManegement/index.js";
+import { onBeforeRouteLeave } from "vue-router";
 
-const centerDialogVisible = ref(true);
+const centerDialogVisible = ref(false);
+const centerDialogVisible1 = ref(false);
+const centerDialogVisible2 = ref(false);
+// 用于控制页面离开的变量
+let pendingRouteCallback = null;
 
 const handleClose = (done) => {
   ElMessageBox.confirm("Are you sure to close this dialog?")
@@ -102,6 +165,39 @@ const handleClose = (done) => {
       // catch error
     });
 };
+
+// 继续体验按钮处理
+const handleContinue = () => {
+  centerDialogVisible.value = false;
+  if (pendingRouteCallback) {
+    pendingRouteCallback(false); // 阻止离开
+    pendingRouteCallback = null;
+  }
+};
+
+// 确定退出按钮处理
+const handleConfirmExit = () => {
+  centerDialogVisible.value = false;
+  if (pendingRouteCallback) {
+    pendingRouteCallback(true); // 允许离开
+    pendingRouteCallback = null;
+  }
+};
+
+// 我知道了按钮处理
+const handleKnowExit = () => {
+  centerDialogVisible1.value = false;
+  if (pendingRouteCallback) {
+    pendingRouteCallback(true); // 允许离开
+    pendingRouteCallback = null;
+  }
+};
+
+// 处理类型不匹配错误提示
+const handleTypeError = () => {
+  centerDialogVisible2.value = false;
+};
+
 // 窗口数据
 const windows = reactive([
   { id: "b", title: "B类：重要但不紧急", items: [], dragOver: false },
@@ -120,63 +216,6 @@ const draggableItems = reactive([
     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: {},
-  },
 ]);
 
 // 拖拽克隆元素（移动端使用）
@@ -358,10 +397,20 @@ const onDrop = (event, windowId) => {
   windows.forEach((window) => (window.dragOver = false));
 };
 
-// 添加项目到窗口
+// 添加项目到窗口 - 新增类型匹配检查
 const addItemToWindow = (windowId, item) => {
   const window = windows.find((w) => w.id === windowId);
   if (window) {
+    // 检查类型是否匹配
+    const itemType = item.type ? item.type.toLowerCase() : "";
+    const targetType = windowId.toLowerCase();
+
+    if (itemType !== targetType) {
+      // 类型不匹配，显示错误提示对话框
+      centerDialogVisible2.value = true;
+      return;
+    }
+
     // 检查是否已经存在
     const exists = window.items.some(
       (existingItem) => existingItem.id === item.id
@@ -371,6 +420,7 @@ const addItemToWindow = (windowId, item) => {
         id: item.id,
         text: item.text,
         originalId: item.id,
+        type: item.type, // 保存类型信息
       });
 
       // 从可拖拽列表中移除
@@ -395,6 +445,7 @@ const removeItem = (windowId, itemId) => {
       draggableItems.push({
         id: item.originalId,
         text: item.text,
+        type: item.type, // 恢复类型信息
         special: false,
         dragging: false,
         touchDragging: false,
@@ -415,12 +466,65 @@ function setHeadinfo() {
       avatar: "头像路径",
       nickName: "张三",
     },
-    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrl: "/xjc-integratedmachine/plan/time/time_management_4d_index",
     backUrlUse: true,
   };
 }
+
+function transformRows(rows) {
+  return rows.map((item) => ({
+    id: item.id,
+    des: item.des,
+    type: item.type,
+    text: item.nevent,
+    special: false,
+    dragging: false,
+    touchDragging: false,
+    dragStyle: {},
+  }));
+}
+
 onMounted(() => {
   setHeadinfo();
+  integratedmachinetimemanagerlist({ pageNum: 100 })
+    .then((res) => {
+      let restrans = transformRows(res.rows);
+      console.log(restrans, res, 2222);
+      draggableItems.splice(0, draggableItems.length, ...restrans);
+    })
+    .catch((err) => {
+      console.log("error", err);
+      //loading.value = false; // 即使出错也要停止加载状态
+    });
+});
+watch(
+  () => draggableItems.length,
+  (newVal) => {
+    if (newVal === 0) {
+      centerDialogVisible1.value = true;
+    }
+  }
+);
+
+onBeforeRouteLeave((to, from, next) => {
+  console.log(draggableItems.length, 99);
+
+  // 保存next回调函数
+  pendingRouteCallback = next;
+
+  if (draggableItems.length == 0) {
+    // 任务完成，显示完成对话框
+    // centerDialogVisible1.value = true;
+  } else {
+    // 任务未完成，显示确认对话框
+    centerDialogVisible.value = true;
+  }
+
+  // 不直接调用next()，等待用户在对话框中选择
+});
+
+onBeforeUnmount(() => {
+  console.log(draggableItems, "组件即将卸载，可以清理定时器/事件监听等");
 });
 
 function jumpTo(path) {
@@ -503,12 +607,12 @@ function jumpTo(path) {
 }
 
 .window {
-  border-radius: 35px;
+  border-radius: 45px;
   padding: 0px;
   min-height: 200px;
   position: relative;
   transition: all 0.3s ease;
-  border: 2px dashed transparent;
+  border: 0px dashed transparent;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -656,8 +760,8 @@ function jumpTo(path) {
 }
 
 .dropped-item {
-  background: white;
-  width: 98%;
+  background: #f1f1f1;
+  width: 93%;
   height: 50px;
   border-radius: 18px;
   padding: 12px;
@@ -678,7 +782,7 @@ function jumpTo(path) {
   width: 24px;
   height: 24px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -723,7 +827,8 @@ function jumpTo(path) {
 .maturity-game-page {
   //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
   //     no-repeat;
-  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  background: url("@/assets/images/login/login-home-background.png") no-repeat;
+  background-size: 1920px 1080px;
   background-attachment: fixed;
   z-index: 10;
   width: 100%;

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

@@ -25,7 +25,7 @@ function setHeadinfo() {
       avatar: "头像路径",
       nickName: "张三",
     },
-    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrl: "/xjc-integratedmachine/plan/time/time_management_4d_index",
     backUrlUse: true,
   };
 }

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

@@ -1,13 +1,267 @@
 <template>
-    时间管理测评知识讲解
+  <div class="maturity-game-page">
+    <head-component :headinfo="headinfo"></head-component>
+    <div class="wdiv wdiv1"></div>
+    <div class="wdiv wdiv2"></div>
+    <div class="d fd">
+      <div class="d fd1"></div>
+      <div class="d fd2"></div>
+    </div>
+    <!-- 点击 a1 a2 a3 打开不同对话框 -->
+    <div class="a a1" @click="openDialog(0)"></div>
+    <div class="a a2" @click="openDialog(1)"></div>
+    <div class="a a3" @click="openDialog(2)"></div>
+
+    <drag_component></drag_component>
+
+    <!-- 时间价值感 -->
+    <el-dialog
+      v-model="centerDialogVisible"
+      title=""
+      width="36%"
+      align-center
+      style="padding: 30px 30px 14px 30px; top: 300px; border-radius: 20px"
+      class="custom-dialog"
+    >
+      <span style="font-size: 32px">
+        <strong>时间价值感：</strong>
+        个体对时间的功能和价值的稳定的态度和观念，它通常使人充满情感，促使人朝着一定的目标而行动，对个体驾驭时间具有动力或导向作用。时间价值感是个体时间管理的基础。
+      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="centerDialogVisible = false"
+            >关闭</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 时间监控观 -->
+    <el-dialog
+      v-model="centerDialogVisible1"
+      title=""
+      width="36%"
+      align-center
+      style="padding: 30px 30px 14px 30px; top: 300px; border-radius: 20px"
+      class="custom-dialog"
+    >
+      <span style="font-size: 32px">
+        <strong>时间监控观：</strong>
+        个体利用和运筹时间的观念和能力，它是通过一系列外显的活动来体现，例如计划安排、目标设置、时间分配、结果检查等一系列监控活动。
+      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="centerDialogVisible1 = false"
+            >关闭</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 时间效能感 -->
+    <el-dialog
+      v-model="centerDialogVisible2"
+      title=""
+      width="36%"
+      align-center
+      style="padding: 30px 30px 14px 30px; top: 300px; border-radius: 20px"
+      class="custom-dialog"
+    >
+      <span style="font-size: 32px">
+        <strong>时间效能感：</strong>
+        个体对自己利用和运筹时间的信念和预期，反映了个体对时间管理的信心以及对时间管理行为能力的估计，它是制约时间监控的一个重要的因素。
+      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="centerDialogVisible2 = false"
+            >关闭</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
-<script>
-    export default {
-        name: "time_management_knowledge"
-    }
+<script setup>
+import headComponent from "@/views/xjc-integratedmachine/components/head_component.vue";
+import drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+const headinfo = ref({});
+const centerDialogVisible = ref(false);
+const centerDialogVisible1 = ref(false);
+const centerDialogVisible2 = ref(false);
+
+function setHeadinfo() {
+  headinfo.value = {
+    title: "时间管理测评",
+    user: {
+      avatar: "头像路径",
+      nickName: "张三",
+    },
+    backUrl:
+      "/xjc-integratedmachine/plan/time/time_management_assessment_index",
+    backUrlUse: true,
+  };
+}
+
+onMounted(() => {
+  setHeadinfo();
+});
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: { name: 123 },
+  });
+}
+
+// 点击a元素时打开对应对话框
+function openDialog(index) {
+  if (index === 0) centerDialogVisible.value = true;
+  if (index === 1) centerDialogVisible1.value = true;
+  if (index === 2) centerDialogVisible2.value = true;
+}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+::v-deep .dialog-footer button:first-child {
+  margin-right: -7px !important;
+}
+::v-deep .el-dialog__footer {
+  text-align: center;
+}
+/* 穿透修改对话框内容 */
+::v-deep .custom-dialog .el-dialog__body span {
+  margin-bottom: 20px;
+  font-size: 24px;
+  display: block;
+  text-align: left;
+}
+/* 修改按钮样式 */
+::v-deep .dialog-footer .el-button {
+  font-size: 18px;
+  padding: 12px 24px;
+}
+::v-deep .dialog-footer .el-button--primary {
+  width: 112px;
+  background-color: #ff5959 !important;
+  border-color: #ff5959 !important;
+  height: 60px;
+  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;
+}
+.a {
+  width: 81px;
+  height: 310px;
+  position: absolute;
+  top: 762px;
+}
+.a1 {
+  left: 698px;
+}
+.a2 {
+  left: 924px;
+}
+.a3 {
+  left: 1151px;
+}
+.wdiv {
+  background: #fff;
+  width: 200px;
+  height: 200px;
+  position: absolute;
+}
+.wdiv1 {
+  background: #fff;
+  width: 200px;
+  height: 200px;
+  top: 756px;
+  left: 163px;
+  z-index: 1;
+}
+.wdiv2 {
+  background: #fff;
+  width: 200px;
+  height: 300px;
+  top: 825px;
+  right: 163px;
+  z-index: 1;
+}
+.fd1 {
+  width: 100%;
+  height: 967px;
+  background: url("/src/assets/images/timeManagement/timetestex.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: 1043px;
+  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: url("@/assets/images/login/login-home-background.png") no-repeat;
+  background-size: 1920px 1080px;
+  background-attachment: fixed;
+  z-index: 10;
+  width: 100%;
+  min-height: 109vh;
+  height: 1080px;
+  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

@@ -89,7 +89,7 @@
         </div>
         <div class="countdown">
           <span class="time">
-            <span class="icon">⏰</span>
+            <span class="icon"></span>
             {{ timeStr }}
           </span>
         </div>
@@ -238,7 +238,8 @@ function setHeadinfo() {
       avatar: "头像路径",
       nickName: "张三",
     },
-    backUrl: "/xjc-integratedmachine/wakeup/index",
+    backUrl:
+      "/xjc-integratedmachine/plan/time/time_management_assessment_index",
     backUrlUse: true,
   };
 }
@@ -585,12 +586,15 @@ function jumpTo(path) {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 100vh;
+  pointer-events: none;
+  min-height: 99vh;
   padding: 16px;
   position: relative;
   top: 9px;
 }
-
+.container > * {
+  pointer-events: auto; /* 子元素恢复点击 */
+}
 .quiz-card {
   background: url(/src/assets/images/timeManagement/test2-1.png) 47% 22%
     no-repeat;
@@ -801,8 +805,11 @@ function jumpTo(path) {
 }
 
 .countdown .icon {
+  width: 43px;
+  height: 43px;
   margin-top: 0; /* 去掉原来的 -10px */
   font-size: 40px; /* 保证和数字一样大 */
+  background: url(/src/assets/images/timeManagement/time.png);
 }
 
 .maturity-game-page {

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

@@ -826,7 +826,8 @@ strong {
 .maturity-game-page {
   //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
   //     no-repeat;
-  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  background: url("@/assets/images/login/login-home-background.png") no-repeat;
+  background-size: 1920px 1080px;
   background-attachment: fixed;
   z-index: 10;
   width: 100%;

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

@@ -67,7 +67,8 @@ function jumpTo(path) {
 .maturity-game-page {
   //   background: url("@/assets/images/wakeup/maturity/maturity-game-bg.png")
   //     no-repeat;
-  background: linear-gradient(to right, #bef3fc, #3dd3f5);
+  background: url("@/assets/images/login/login-home-background.png") no-repeat;
+  background-size: 1920px 1080px;
   background-attachment: fixed;
   z-index: 10;
   width: 100%;