[feat]彩虹图页面合并

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

@@ -6,12 +6,11 @@
         <p>{{exampleInfo.shortIntroduce}}</p>
         <p>{{exampleInfo.name}}：{{exampleInfo.type}}</p>
         <div class="left-main">
-          <div class="img-box">
-<!--            <img src="@/assets/images/wakeup/float-box.png" />-->
-            <img :src= "`${baseUrl}`+ exampleInfo.picPath" />
-          </div>
+<!--          <div class="img-box">-->
+<!--&lt;!&ndash;            <img src="@/assets/images/wakeup/float-box.png" />&ndash;&gt;-->
+<!--&lt;!&ndash;            <img :src= "`${baseUrl}`+ exampleInfo.picPath" />&ndash;&gt;-->
+<!--          </div>-->
           <div class="text-box" v-html="exampleInfo.introduce">
-
           </div>
         </div>
       </div>
@@ -167,12 +166,14 @@ p{
         color: #333333;
         line-height: 52px;
         margin-top: 28px;
+        background: #EAFAFF;
         margin-left: 52px;
       }
       p:nth-child(2){
         font-weight: bold;
         font-size: 32px;
         color: #333333;
+        //background: #EAFAFF;
         line-height: 52px;
         margin-left: 52px;
       }
@@ -182,7 +183,7 @@ p{
         .img-box{
           width: 361px;
           height: 459px;
-          border: 1px solid;
+          //border: 1px solid;
           margin-top: 26px;
           margin-left: 26px;
           img{
@@ -191,15 +192,17 @@ p{
           }
         }
         .text-box{
-          width: 789px;
+          width: 1290px;
           height: 777px;
           font-weight: 400;
           font-size: 30px;
           color: #333333;
           line-height: 52px;
-          border: 1px solid;
+          //border: 1px solid;
           text-indent: 2em;
           overflow: auto;
+          padding-right: 52px;
+          padding-left: 52px;
         }
       }
     }
@@ -231,6 +234,7 @@ p{
           color: #333333;
           line-height: 52px;
           padding-left: 10px;
+          //background: #EAFAFF;
         }
         div{
           font-weight: bold;

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

@@ -36,17 +36,8 @@
 <!--          <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 id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0;">Drag me!</div>-->
+      <div id="draggable" style="width: 100px; height: 100px; background-color: red; position: absolute;">拖拽我</div>
     </div>
   </div>
 
@@ -101,58 +92,32 @@
         })
     }
 
+    // onMounted(() => {
+    //
+    // })
     onMounted(() => {
-        setHeadinfo()
-    })
-
-    import { reactive, onMounted } from 'vue';
-
-    const position = reactive({ x: 100, y: 10 });
-    let isDragging = false;
-    let originX, originY;
-
-    const startDrag = (e) => {
-      console.log("e",e);
-      // let chartDiv = document.getElementById("ring-chart");
-
-      isDragging = true;
-      originX = e.clientX - position.x;
-      originY = e.clientY - position.y;
-      document.addEventListener('touchmove', onMouseMove);
-      document.addEventListener('touchend', stopDrag);
-    };
-
-    const onMouseMove = (e) => {
-      if (isDragging) {
-        position.x = e.clientX - originX;
-        position.y = e.clientY - originY;
-      }
-    };
-
-    const stopDrag = () => {
-      isDragging = false;
-      document.removeEventListener('touchmove', onMouseMove);
-      document.removeEventListener('touchend', stopDrag);
-    };
-    const draggableBox = ref(null);
-    let startX = 0;
-    let startY = 0;
-    let currentX = 0;
-    let currentY = 0;
-    const handleTouchStart = (event) => {
-      startX = event.touches[0].clientX - draggableBox.value.offsetLeft;
-      startY = event.touches[0].clientY - draggableBox.value.offsetTop;
-    };
-
-    const handleTouchMove = (event) => {
-      currentX = event.touches[0].clientX - startX;
-      currentY = event.touches[0].clientY - startY;
-      draggableBox.value.style.transform = `translate3D(${currentX}px, ${currentY}px, 0)`;
-    };
-
-    const handleTouchEnd = () => {
-      // 可以添加触摸结束后的处理逻辑，比如设置一个最终的拖拽位置等
-    };
+      setHeadinfo()
+      // let startPosX, startPosY, startTouchX, startTouchY;
+      //
+      // $('#draggable').on('touchstart', function(e) {
+      //   startPosX = $(this).position().left;
+      //   startPosY = $(this).position().top;
+      //   startTouchX = e.originalEvent.touches[0].pageX;
+      //   startTouchY = e.originalEvent.touches[0].pageY;
+      // });
+      //
+      // $('#draggable').on('touchmove', function(e) {
+      //   e.preventDefault(); // 阻止默认的滚动行为
+      //   const touchX = e.originalEvent.touches[0].pageX;
+      //   const touchY = e.originalEvent.touches[0].pageY;
+      //   const deltaX = touchX - startTouchX;
+      //   const deltaY = touchY - startTouchY;
+      //   $(this).css({
+      //     left: startPosX + deltaX,
+      //     top: startPosY + deltaY,
+      //   });
+      // });
+    });
 </script>
 
 

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

@@ -265,7 +265,7 @@
     .chart-container {
         position: relative;
         width: 100%;
-        height: 400px;
+        height: 910px;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -273,8 +273,8 @@
     }
 
     .ring-chart {
-        width: 100%;
-        height: 100%;
+        width: 1290px;
+        height: 910px;
         cursor: pointer;
          border: 1px solid white;
     }