[feat]彩虹图页面合并

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

@@ -16,8 +16,10 @@
       </div>
 
       <div class="content-right">
-          <div class="item-box" v-for="(item,index) in exampleData" @click="showInfo(item)">
+          <div v-for="(item,index) in exampleData" class="item-box" :class="{ 'active-button': isActive }" @click="showInfo(item,index)">
             <img :src= "`${baseUrl}`+ item.picPath" />
+          {{exampleId===item.id}}---
+            {{item.id}}
             <div>{{item.name}}</div>
             <p >{{item.type}}</p>
             <p >{{item.shortIntroduce}}</p>
@@ -77,6 +79,8 @@ let pageLoading = ref(false)
 let exampleInfo = ref({
 
 })
+let isActive = ref(false)
+let exampleId = ref(null)
 // const isDragging = ref(false)
 const offset = ref({ x: 0, y: 0 })
 const startX = ref(0)
@@ -111,7 +115,7 @@ function getExampleList() {
   exampleList().then(res => {
     // console
     if(res.exampleList.length > 0){
-      exampleInfo = res.exampleList[0];
+      exampleInfo.value = res.exampleList[0];
     }
     exampleData.value = res.exampleList;
     pageLoading = false;
@@ -131,7 +135,15 @@ function dialogBeforeClose(){
 
 
 function showInfo(val){
-  exampleInfo.value = val;
+  console.log("11111111",val)
+  exampleId.value = val.id
+  isActive = !isActive;
+  console.log("exampleId0".exampleId,"val.id",val.id)
+  exampleInfo.value = val
+  // exampleData[index].selected.value = true;
+
+  console.log("11111111",exampleInfo)
+
 }
 
 </script>
@@ -250,14 +262,57 @@ p{
       .item-box:hover{
         background: #EAFAFF;
       }
-
+      //.active-button{
+      //  background: red;
+      //}
     }
   }
 }
 //{
 //  background: #EAFAFF;
 //}
+.bg-item{
+   background: red;
 
+    width: 470px;
+    height: 370px;
+    //border: 1px solid;
+    background: #F8F8F8;
+    margin: 17px auto;
+    border-radius: 35px 35px 35px 35px;
+    img{
+      width: 115px;
+      height: 115px;
+      border-radius: 50%;
+      //border: 1px solid;
+      margin-left: 192px;
+      margin-top: 28px;
+    }
+    p
+    {
+      font-weight: bold;
+      font-size: 32px;
+      color: #333333;
+      line-height: 52px;
+      padding-left: 10px;
+      //background: #EAFAFF;
+    }
+    div{
+      font-weight: bold;
+      font-size: 32px;
+      color: #333333;
+      line-height: 52px;
+      text-align: center;
+    //p:nth-child(1){
+    //  text-align:center;
+    //}
+  }
+  .button-group input[type="radio"]:checked + label {
+    background-color: #fff; /* 选中时的背景颜色 */
+    color: #0D8EFF; /* 选中时的文本颜色 */
+    border-color: #0D8EFF; /* 选中时的边框颜色 */
+  }
+}
 
 </style>
 

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

@@ -7,15 +7,22 @@
         <div class="content-img">
           <img src="@/assets/images/wakeup/maturity/shadow-bg.png" >
         </div>
-        <div>
+        <div class="group-btn">
           <img src="@/assets/images/wakeup/maturity/btn1.png" >
           <img src="@/assets/images/wakeup/maturity/btn2.png" >
           <img src="@/assets/images/wakeup/maturity/btn3.png" >
           <img src="@/assets/images/wakeup/maturity/btn4.png" >
-<!--          <img src="@/assets/images/wakeup/maturity/btn5.png" >-->
+          <img src="@/assets/images/wakeup/maturity/btn5.png" >
         </div>
       </div>
-      <div></div>
+      <div class="content-right">
+        <img class="btn-img" src="@/assets/images/wakeup/maturity/pre-qustion.png" >
+        <div class="time">
+          <img src="@/assets/images/wakeup/maturity/time.png" >
+          <p> {{ formattedTime(elapsedTime) }}</p>
+        </div>
+        <img class="btn-img"  src="@/assets/images/wakeup/maturity/submit.png" >
+      </div>
 <!--      <div class="top">-->
 <!--        <img src="@/assets/images/wakeup/maturity/maturity-game-title.png" >-->
 <!--      </div>-->
@@ -72,16 +79,60 @@ function jumpTo(path) {
   })
 }
 
+
+//计时器
+const elapsedTime = ref(0);
+const timerId = ref(null);
+const isRunning = ref(false);
+
+const startTimer = () => {
+  if (!isRunning.value) {
+    isRunning.value = true;
+    timerId.value = setInterval(() => {
+      elapsedTime.value += 1000;
+    }, 1000);
+  }
+};
+
+const stopTimer = () => {
+  if (isRunning.value) {
+    isRunning.value = false;
+    clearInterval(timerId.value);
+    timerId.value = null;
+  }
+};
+
+const resetTimer = () => {
+  stopTimer();
+  elapsedTime.value = 0;
+};
+
+const formattedTime = (ms) => {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
+  const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
+  const seconds = String(totalSeconds % 60).padStart(2, '0');
+  return `${hours}:${minutes}:${seconds}`;
+};
+
 onMounted(() => {
+  // 可以在这里自动开始计时器，如果需要的话
+  startTimer();
   setHeadinfo()
-})
-
+});
 
+// onUnmounted(() => {
+  stopTimer();
+// });
 
 </script>
 
 
 <style scoped lang="scss">
+p{
+  margin: 0;
+  padding:0;
+}
 .maturity-game-page{
   background: url('@/assets/images/wakeup/maturity/maturity-game-bg.png') no-repeat;
   background-size: 1920px 1080px;
@@ -99,13 +150,52 @@ onMounted(() => {
      width: 1187px;
      height: 424px;
      border: 1px solid;
+     margin-top: 80px;
      img{
        width: 1187px;
        height: 424px;
      }
    }
+    .content-right{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .btn-img{
+         width: 244px;
+         height: 77px;
+         margin-top: 20px;
+       }
+      .time{
+        width:220px;
+        height: 50px;
+        //border: 1px solid;
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        img{
+          width: 42px;
+          height: 42px;
+          //border: 1px solid;
+        }
+        p{
+          width: 150px;
+          font-weight: 300;
+          font-size: 32px;
+          color: #FFFFFF;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+  .group-btn{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 80px;
+    img{
+      width: 200px;
+      height: 135px;
+    }
   }
-
 }
 
 </style>

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

@@ -1,7 +1,12 @@
 <template>
     <div class="chart-container">
-        <div id="ring-chart" ref="chart" class="ring-chart"></div>
-        <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>
+      <div id="eraser" style="position: absolute;top:10px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: #FFFFFF;border-radius: 50%">橡皮</div>
+      <div id="eraser" style="position: absolute;top:80px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: green;border-radius: 50%">保存</div>
+      <div id="ring-chart" ref="chart" class="ring-chart"></div>
+<!--      //圆心-->
+<!--        <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>-->
+
+
 
         <!--<div id="ring-chart" ref="chart" class="ring-chart"-->
         <!--@mousedown="begin" @mousemove="moving" @mouseup="stopMoving"-->
@@ -13,7 +18,7 @@
     import {ref, onMounted, onBeforeUnmount} from 'vue'
     import * as echarts from 'echarts'
 
-    document.body.style.overflow = 'hidden';
+    // document.body.style.overflow = 'hidden';
     const props = defineProps({
         chartProps: {}
     })
@@ -164,7 +169,7 @@
 
     function init() {
         //
-        var cc = document.getElementById("cc");
+        // var cc = document.getElementById("cc");
         // console.log("cccccc", "top:", top, "left:", left, "width:", width, "height:", height, "center_y:", center_y, "center_x", center_x)
         // cc.style.top = center_y + "px"
         // cc.style.left = center_x + "px"
@@ -310,4 +315,9 @@
         font-size: 16px;
         color: #666;
     }
+    .eraser{
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
 </style>