[feat]彩虹图页面合并

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

@@ -156,6 +156,7 @@ p{
         height:850px;
         overflow:auto;
         margin-left: 26px;
+        scrollbar-color: #9be9fa #ffffff;
         .box-item{
           margin-top: 29px;
           width: 1786px;
@@ -188,6 +189,7 @@ p{
             height: 314px;
             .text-box{
               overflow:auto;
+              //scrollbar-color: #9be9fa #ffffff;
               height: 314px;
               //border: 1px solid;
               .text{
@@ -207,6 +209,9 @@ p{
             }
           }
         }
+        .box-item{
+          scrollbar-color: #9be9fa #ffffff;
+        }
       }
     }
   }

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

@@ -1,11 +1,111 @@
 <template>
-    生涯成熟度测评
+  <div class="maturity-game-page">
+    <head-component :headinfo=headinfo></head-component>
+    <div class="page-content">
+      <div></div>
+      <div>
+        <div class="content-img">
+          <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+        </div>
+        <div>
+          <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+          <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+          <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+          <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+          <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
+        </div>
+      </div>
+      <div></div>
+<!--      <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" >-->
+<!--        <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" >-->
+<!--      </div>-->
+    </div>
+  </div>
+
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+
+
+const router = useRouter()
+
+const headinfo = ref({})
+
+
+const draggedItem = ref(null);
+
+function dragStart(event) {
+  draggedItem.value = event.target;
+}
+
+function drop(event) {
+  event.preventDefault(); // 防止默认处理（例如打开链接）
+  if (event.target !== draggedItem.value) {
+    const target = event.target; // 获取放置的目标元素
+    const item = draggedItem.value; // 获取被拖拽的元素
+    // 交换位置或进行其他操作
+    item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
+  }
+}
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯成熟度测评',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/index'
+  }
+}
+
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+
 
 </script>
 
-<style scoped>
+
+<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;
+   .content-img{
+     width: 1187px;
+     height: 345px;
+     border: 1px solid;
+     img{
+       width: 1187px;
+       height: 345px;
+     }
+   }
+  }
+
+}
 
 </style>
+
+

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

@@ -1,11 +1,109 @@
 <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" >
+        <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/evaluation')">
+      </div>
+    </div>
+  </div>
+
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+
+
+const router = useRouter()
+
+const headinfo = ref({})
+
+
+const draggedItem = ref(null);
+
+function dragStart(event) {
+  draggedItem.value = event.target;
+}
+
+function drop(event) {
+  event.preventDefault(); // 防止默认处理（例如打开链接）
+  if (event.target !== draggedItem.value) {
+    const target = event.target; // 获取放置的目标元素
+    const item = draggedItem.value; // 获取被拖拽的元素
+    // 交换位置或进行其他操作
+    item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
+  }
+}
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/index'
+  }
+}
+
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+
 
 </script>
 
-<style scoped>
+
+<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/wakeup/career_maturity/maturity_game.vue

@@ -1,11 +1,109 @@
 <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" >
+              <img src="@/assets/images/wakeup/maturity/maturity-game-right.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/evaluation')">
+            </div>
+    </div>
+  </div>
+
 </template>
 
 <script setup>
+import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
+
+
+const router = useRouter()
+
+const headinfo = ref({})
+
+
+const draggedItem = ref(null);
+
+function dragStart(event) {
+  draggedItem.value = event.target;
+}
+
+function drop(event) {
+  event.preventDefault(); // 防止默认处理（例如打开链接）
+  if (event.target !== draggedItem.value) {
+    const target = event.target; // 获取放置的目标元素
+    const item = draggedItem.value; // 获取被拖拽的元素
+    // 交换位置或进行其他操作
+    item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
+  }
+}
+
+function setHeadinfo(){
+  headinfo.value = {
+    title: '生涯唤醒学习系统',
+    user: {
+      avatar: '头像路径',
+      nickName: '张三'
+    },
+    backUrl : '/index'
+  }
+}
+
+
+function jumpTo(path) {
+  router.push({
+    path: path,
+    query: {name: 123}
+  })
+}
+
+onMounted(() => {
+  setHeadinfo()
+})
+
+
 
 </script>
 
-<style scoped>
+
+<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/wakeup/index.vue

@@ -13,7 +13,7 @@
           <img src="@/assets/images/wakeup/card1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_recognize/index')">
         </div>
         <div class="img-box">
-          <img src="@/assets/images/wakeup/card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/paint')">
+          <img src="@/assets/images/wakeup/card2.png" @click="jumpTo('/xjc-integratedmachine/wakeup/career_maturity/index')">
         </div>
         <div class="img-box">
           <img src="@/assets/images/wakeup/card3.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1')">
@@ -25,15 +25,26 @@
           <img src="@/assets/images/wakeup/card5.png"  @click="jumpTo('/xjc-integratedmachine/wakeup/career_cinema/index')">
         </div>
       </div>
-      <div class="content-bottom">
-        <div class="draw draggable-ball" ref="draggableBox" @touchstart.native="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">
-          <img src="@/assets/images/wakeup/float-box.png" />
-        </div>
-        <div class="ai-rabit">
-          <div class="ai-rabit-text">
-            你好，同学欢迎进入生涯学习系统
-          </div>
-          <img  src="@/assets/images/wakeup/ai-rabit.png" />
+<!--      <div class="content-bottom">-->
+<!--        <div class="draw draggable-ball" ref="draggableBox" @touchstart.native="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">-->
+<!--          <img src="@/assets/images/wakeup/float-box.png" />-->
+<!--        </div>-->
+<!--        <div class="ai-rabit">-->
+<!--          <div class="ai-rabit-text">-->
+<!--            你好，同学欢迎进入生涯学习系统-->
+<!--          </div>-->
+<!--          <img  src="@/assets/images/wakeup/ai-rabit.png" />-->
+<!--        </div>-->
+<!--      </div>-->
+      <div class="container">
+        <div
+            class="draggable"
+            draggable="true"
+            @dragstart="dragStart"
+            @dragover.prevent
+            @drop="drop"
+        >
+          拖拽我
         </div>
       </div>
     </div>
@@ -53,7 +64,24 @@
     const offset = ref({ x: 0, y: 0 })
     // const startX = ref(0)
     // const startY = ref(0)
+///
+
+    const draggedItem = ref(null);
+
+    function dragStart(event) {
+      draggedItem.value = event.target;
+    }
 
+    function drop(event) {
+      event.preventDefault(); // 防止默认处理（例如打开链接）
+      if (event.target !== draggedItem.value) {
+        const target = event.target; // 获取放置的目标元素
+        const item = draggedItem.value; // 获取被拖拽的元素
+        // 交换位置或进行其他操作
+        item.parentNode.insertBefore(item, target); // 将被拖拽的元素插入到目标元素之前
+      }
+    }
+    /////
     function setHeadinfo(){
         headinfo.value = {
             title: '生涯唤醒学习系统',
@@ -240,6 +268,15 @@
   user-select: none; /* 防止拖拽时选中文字 */
 }
 
-
+.draggable {
+  width: 100px;
+  height: 100px;
+  background-color: lightblue;
+  margin: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ccc;
+}
 </style>
 

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

@@ -273,9 +273,10 @@
     }
 
     .ring-chart {
-        width: 1000px;
-        height: 1000px;
+        width: 100%;
+        height: 100%;
         cursor: pointer;
+         border: 1px solid white;
     }
 
     .instructions {

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

@@ -3,64 +3,7 @@
     <head-component :headinfo=headinfo></head-component>
     <div class="page-content">
       <div class="page-box">
-<!--        <p class="text-info">请通过回顾过去和设想未来，绘制您自己的生涯彩虹图。请依次选择以下6种角色，并分别针对每种角色设置年龄段及在该年龄段的精力投入程度。</p>-->
-<!--        <div class="page-main">-->
-<!--          <div class="page-left">-->
-<!--          </div>-->
-<!--          <div class="page-right">-->
-<!--            <div class="page-right-top">-->
-<!--              <div class="color-box">-->
-<!--                <p class="box-left" style="background: #FFC300;"></p>-->
-<!--                <p class="box-label">子女身份</p>-->
-<!--              </div>-->
-<!--              <div class="color-box">-->
-<!--                <p class="box-left" style="background: #F72585"></p>-->
-<!--                <p class="box-label">学生身份</p>-->
-<!--              </div>-->
-<!--              <div class="color-box" >-->
-<!--                <p class="box-left" style="background: #4CC9F0"></p>-->
-<!--                <p class="box-label">休闲者身份</p>-->
-<!--              </div>-->
-<!--              <div class="color-box">-->
-<!--                <p class="box-left" style="background: #A000FF"></p>-->
-<!--                <p class="box-label">公民身份</p>-->
-<!--              </div>-->
-<!--              <div class="color-box">-->
-<!--                <p class="box-left" style="background: #FFC9F6"></p>-->
-<!--                <p class="box-label">工作者身份</p>-->
-<!--              </div>-->
-<!--              <div class="color-box">-->
-<!--                <p class="box-left" style="background: #9DE617"></p>-->
-<!--                <p class="box-label">持家者身份</p>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--            <div class="page-right-btn-group">-->
-<!--              <div class="eraser-box">-->
-<!--                &lt;!&ndash;                <img src="@/assets/images/wakeup/rainbow/eraser-shadom.png">&ndash;&gt;-->
-<!--                <img src="@/assets/images/wakeup/rainbow/eraser.png">-->
-<!--              </div>-->
-<!--              <img class="img-btn" src="@/assets/images/wakeup/rainbow/clear.png">-->
-<!--              <img class="img-btn" src="@/assets/images/wakeup/rainbow/Drawing-completed.png">-->
-<!--              <img class="img-btn" src="@/assets/images/wakeup/rainbow/seed-email.png">-->
-<!--              <img class="img-btn" src="@/assets/images/wakeup/rainbow/save-btn.png">-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--        &lt;!&ndash;        下一步&ndash;&gt;-->
-<!--        <div class="img-box" >-->
-<!--          <img src="@/assets/images/wakeup/knowledge_explanation-button1.png" @click="jumpTo('/xjc-integratedmachine/wakeup/rainbow/index')">-->
-<!--        </div>-->
-<!--        &lt;!&ndash;        机器人&ndash;&gt;-->
-<!--        <div class="fixed-box">-->
-<!--          <div class="content-bottom">-->
-<!--            <div class="draw draggable-ball" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">-->
-<!--              <img src="@/assets/images/wakeup/float-box.png" />-->
-<!--            </div>-->
-<!--            <div class="ai-rabit">-->
-<!--              <img  src="@/assets/images/wakeup/ai-rabit.png" />-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
+        <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
       </div>
     </div>
   </div>
@@ -70,6 +13,8 @@
 <script setup>
 import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
 import {onMounted, reactive} from "vue";
+// import FollowRingChart from "@/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue";
+import FollowRingChart from './FollowRingChart.vue'
 const headinfo = ref({})
 const router = useRouter()
 function setHeadinfo(){
@@ -82,6 +27,19 @@ function setHeadinfo(){
     backUrl : '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
   }
 }
+
+const chartPrpps1 = ref({
+  left : 0,
+  top : 0,
+  width : 800,
+  height : 800,
+  borderColor : "#998877",
+  color :"#ff00ff",
+  bncolor : "#ffffff",
+  radiusMax : '85%',
+  radiusMin : '80%',
+  isFinish : false
+})
 const position = reactive({ x: 10, y: 10 });
 let isDragging = false;
 let originX, originY;

vite.config.js

@@ -46,8 +46,8 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://localhost:8080',
-          // target: 'http://192.168.3.100:8080',
+          // target: 'http://localhost:8080',
+          target: 'http://192.168.3.100:8080',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }