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

<template>
  <div class="development_stage">
    <head-component :headinfo=headinfo></head-component>
    <div class="page-content">
      <div style="display: flex;justify-content: center;width: 1890px;height: 912px;margin-top: 13px">
        <div class="page-box">
          <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
        </div>
      </div>

    </div>
  </div>

</template>

<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(){
  headinfo.value = {
    title: '生涯彩虹图',
    user: {
      avatar: '头像路径',
      nickName: '张三'
    },
    backUrl : '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
  }
}

const chartPrpps1 = ref({
  // left : 100,
  top : 106,
  width : 1700,
  height : 1700,
  borderColor : "#998877",
  color :"#ff00ff",
  bncolor : "#ffffff",
  radiusMax : '100%',
  radiusMin : '96%',
  isFinish : false
})
const position = reactive({ x: 10, y: 10 });
let isDragging = false;
let originX, originY;


function jumpTo(path) {
  console.log(path)
  router.push({
    path: path,
    query: {name: 123}
  })
}

const startDrag = (e) => {
  console.log("e",e)
  isDragging = true;
  originX = e.clientX - position.x;
  originY = e.clientY - position.y;
  console.log("originX",originX,originY,"originY")
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', stopDrag);
};

const onMouseMove = (e) => {
  if (isDragging) {
    position.x = e.clientX - originX;
    position.y = e.clientY - originY;
    console.log("position.x",position.x,"position.y",position.y)
  }
};

const stopDrag = () => {
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', stopDrag);
};
onMounted(() => {
  setHeadinfo()
})

</script>

<style scoped lang="scss">
//body,html{
//  overflow: hidden;
//}
p{
  margin: 0;
  padding: 0;
}
.development_stage{
  background: url('@/assets/images/login/login-home-background.png') no-repeat;
  background-size: 1920px 1080px;
  z-index:10;
  width: 100%;
  height: 1080px;
  .page-content {
    width: 1832px;
    height: 980px;
    position: absolute;
    top: 100px;
    //display: flex;
    //justify-content: ;
    bottom: 0;
  }
  .page-box{
    width: 1832px;
    height: 910px;
    background: black;
    border-radius: 35px 35px 35px 35px;
    //margin: 13px auto 0;
    /*padding-top: 25px;*/
    position: relative;

    .text-info{
      font-weight: bold;
      font-size: 28px;
      color: #333333;
      line-height: 46px;
      padding: 0 150px;
      //text-align: center;
      text-indent: 2em;
    }
    .page-main{
      width:1546px;
      height: 681px;
      //border: 1px solid;
      margin: 12px auto;
      background: url('@/assets/images/wakeup/rainbow/backgroud-rainbow.png') no-repeat;
      background-size: 1546px 681px;
      display: flex;
      justify-content: space-between;
      .page-left{
        width: 1273px;
        height: 571px;
        background: #000000;
        border-radius: 10px 10px 10px 10px;
        margin-left: 26px;
        //border: #FFFFFF 1px solid;
        margin-top: 95px;
        background: url('@/assets/images/wakeup/rainbow/rainbow-border.png') no-repeat;
        background-size:1200px 500px;
        //border: 1px solid #FFFFFF;


      }
      .page-right{
        width: 250px;
        height: 681px;
        //border: 1px solid #FFFFFF;
        margin-right: 26px;
        .page-right-top{
          width: 250px;
          height:260px;
          //border: 1px solid white;
          .color-box:nth-child(1){
            margin-top: 24px;
          }
          .color-box{
            //border: 1px solid white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
            .box-left{
              width: 53px;
              height: 25px;
              //background: #FFC300;
              border-radius: 10px 10px 10px 10px;
              //border: 1px solid white;
            }
            .box-label{
              width: 122px;
              font-weight: 400;
              font-size: 20px;
              color: #FFFFFF;
              margin-left: 10px;
            }
          }
        }
        .page-right-btn-group{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .img-btn{
            width: 170px;
            height: 54px;
            margin-top: 20px;
          }
          .eraser-box{
            width: 165px;
            height: 50px;
            background: url('@/assets/images/wakeup/rainbow/eraser-shadom.png') no-repeat;
            background-size: 163px 47px;
            position: relative;
            img{
              width: 165px;
              height: 83px;
              position: absolute;
              top: -33px;
              left: 10px;
            }
          }
        }
      }
    }
  }
  .img-box{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
    z-index:10;
    img{
      width: 244px;
      height: 92px;
      z-index:10;
    }
  }
  .fixed-box{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 125px;
  }
  .content-bottom{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    .draw{
      width: 109px;
      height: 170px;
      img{
        width: 109px;
        height: 170px;
      }
    }

    .ai-rabit{
      position: absolute;
      right: -27px;
      //top: -271px;
      display: flex;
      align-items: center;
      .ai-rabit-text{
        width: 345px;
        height: 89px;
        background: #E8EEF7;
        font-weight: 300;
        margin-bottom: 20px;
        font-size: 22px;
        color: #000000;
        padding:16px;
        border-radius: 24px 24px 24px 24px;
      }
      img{
        width: 178px;
        height: 270px;
      }
    }
  }
  .draggable-ball {
    position: absolute;
    cursor: pointer;
    user-select: none; /* 防止拖拽时选中文字 */
  }
  .ring-chart1 {
    width: 1832px;
    height: 800px;
    position: absolute;
    left: 0px;
    top : 0px;
    //background: #ffff00;
  }
}

</style>