feat 决策

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

@@ -0,0 +1,947 @@
+<template>
+    <div id="outerDiv" class="development_stage">
+        <!--      <div style="z-index:9999;background: red;width: 1920px;height: 1080px">-->
+
+        <canvas id="myCanvas" width="1900" height="1080" style="background: #00ff00;z-index: 9999"></canvas>
+        <!--      </div>-->
+
+        <head-component :headinfo=headinfo></head-component>
+        <div id="cc"
+             style="position: absolute;width: 5px;height: 5px;background: #ff0000;margin: 0 auto;z-index: 99999"></div>
+
+
+        <div class="page-content">
+            <div style="display: flex;justify-content: center;width: 1890px;height: 912px;margin-top: 13px">
+                <div class="page-box">
+
+
+                    <!--<div style="width: 1px;height: 1700px;border: 1px solid red;position: absolute;left:916px;top: 0px"></div>-->
+                    <!--<div style="width: 850px;height: 1px;border: 1px solid green;position: absolute;left: 66px;top: 400px"></div>-->
+                    <!--<div style="width: 1700px;height: 1px;border: 1px solid white;position: absolute;left: 70px;top: 906px"></div>-->
+                    <FollowRingChart ref="followRingChart1" id="ring-chart1" class="ring-chart1"
+                                     :chartProps="chartPrpps1"/>
+                    <FollowRingChart ref="followRingChar2" id="ring-chart2" class="ring-chart2"
+                                     :chartProps="chartPrpps2"
+                                     style="z-index: 9999"/>
+                    <FollowRingChart ref="followRingChart3" id="ring-chart3" class="ring-chart3"
+                    :chartProps="chartPrpps3"/>
+                    <FollowRingChart ref="followRingChart4" id="ring-chart4" class="ring-chart4"
+                    :chartProps="chartPrpps4"/>
+                    <!--<FollowRingChart ref="followRingChart5" id="ring-chart5" class="ring-chart5"-->
+                    <!--:chartProps="chartPrpps5"/>-->
+                    <!--<FollowRingChart ref="followRingChart6" id="ring-chart6" class="ring-chart6"-->
+                    <!--:chartProps="chartPrpps6"/>-->
+                    <!--<FollowRingChart ref="followRingChart7" id="ring-chart7" class="ring-chart7"-->
+                    <!--:chartProps="chartPrpps7"/>-->
+                    <!--<FollowRingChart ref="followRingChart8" id="ring-chart8" class="ring-chart8"-->
+                    <!--:chartProps="chartPrpps8"/>-->
+                    <!--<FollowRingChart ref="followRingChart9" id="ring-chart9" class="ring-chart9"-->
+                    <!--:chartProps="chartPrpps9"/>-->
+                    <!--<FollowRingChart ref="followRingChart10" id="ring-chart10" class="ring-chart10"-->
+                    <!--:chartProps="chartPrpps10"/>-->
+                    <!--<FollowRingChart ref="followRingChart11" id="ring-chart11" class="ring-chart11"-->
+                    <!--:chartProps="chartPrpps11"/>-->
+                    <!--<FollowRingChart ref="followRingChart12" id="ring-chart12" class="ring-chart12"-->
+                    <!--:chartProps="chartPrpps12"/>-->
+
+                    <!--<FollowRingChart ref="followRingChart13" id="ring-chart13" class="ring-chart13"-->
+                    <!--:chartProps="chartPrpps13"/>-->
+                    <!--<FollowRingChart ref="followRingChart14" id="ring-chart14" class="ring-chart14"-->
+                    <!--:chartProps="chartPrpps14"/>-->
+                    <!--<FollowRingChart ref="followRingChart15" id="ring-chart15" class="ring-chart15"-->
+                    <!--:chartProps="chartPrpps15"/>-->
+                    <!--<FollowRingChart ref="followRingChart16" id="ring-chart16" class="ring-chart16"-->
+                    <!--:chartProps="chartPrpps16"/>-->
+
+                    <!--<FollowRingChart ref="followRingChart17" id="ring-chart17" class="ring-chart17"-->
+                    <!--:chartProps="chartPrpps17"/>-->
+                    <!--<FollowRingChart ref="followRingChart18" id="ring-chart18" class="ring-chart18"-->
+                    <!--:chartProps="chartPrpps18"/>-->
+                </div>
+            </div>
+
+            <!--<div id="eraser"-->
+            <!--@click="edit"-->
+            <!--:class="[chartPrpps1.status == 'edit'?'bg-color-style':'bg-color-style1']"-->
+            <!--&gt;-->
+            <!--橡皮-->
+            <!--</div>-->
+            <!--<div id="save"-->
+            <!--@click="save"-->
+            <!--style="position: absolute;top:80px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: green;border-radius: 50%">-->
+            <!--保存-->
+            <!--</div>-->
+        </div>
+
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:168px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ffff00;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:627px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:644px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:676px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:710px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:746px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:762px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:797px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:830px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:864px;border: 1px;width: 1000px;height: 1px;"></div>-->
+        <!---->
+    </div>
+
+</template>
+
+<script setup>
+    const raduis_half = [168, 204, 237, 272,
+        287, 322, 354, 390,
+        406, 440, 474, 508,
+        525, 558, 592, 627,
+        644, 676, 710, 746,
+        762, 797, 830, 864]
+
+    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()
+
+    const chartDivs = ref([])
+
+    const out_width = ref(1920)
+    const out_height = ref(1023)
+    const centerPoint = ref({})
+
+
+    function init() {
+        centerPoint.value.x = out_width.value / 2
+        centerPoint.value.y = out_height.value
+        console.log("圆心x:", centerPoint.value.x, "圆心y:", centerPoint.value.y)
+        let cc = document.getElementById("cc")
+        cc.style.left = centerPoint.value.x + "px"
+        cc.style.top = centerPoint.value.y + "px"
+
+        chartDivs.value = [
+            document.getElementById("ring-chart1"),
+            // document.getElementById("ring-chart2"),
+            // document.getElementById("ring-chart3"),
+            // document.getElementById("ring-chart4"),
+            // document.getElementById("ring-chart5"),
+            // document.getElementById("ring-chart6"),
+            // document.getElementById("ring-chart7"),
+            // document.getElementById("ring-chart8"),
+            // document.getElementById("ring-chart9"),
+            // document.getElementById("ring-chart10"),
+            // document.getElementById("ring-chart11"),
+            // document.getElementById("ring-chart12"),
+        ]
+
+        let outerDiv = document.getElementById("outerDiv")
+        outerDiv.addEventListener('touchstart', begin)
+        outerDiv.addEventListener('touchmove', moving)
+        outerDiv.addEventListener('touchend', stopMoving)
+    }
+
+    const followRingChart18 = ref(null)
+
+    function getDistance(event) {
+        let mouse_x = event.targetTouches[0].pageX;
+        let mouse_y = event.targetTouches[0].pageY;
+        console.log("touchX:", mouse_x, "touchY:", mouse_y)
+        let distance = Math.sqrt((Math.pow((centerPoint.value.x - mouse_x), 2) + Math.pow((centerPoint.value.y - mouse_y), 2)))
+
+        console.log("dis:", distance)
+        if (distance <= out_height.value - raduis_half[0] && distance > out_height.value - raduis_half[1]) {
+            console.log("t1")
+        } else if (distance <= out_height.value - raduis_half[1] && distance > out_height.value - raduis_half[2]) {
+            console.log("t2")
+        }else if (distance <= out_height.value - raduis_half[2] && distance > out_height.value - raduis_half[3]) {
+          console.log("t3")
+        }
+
+
+    }
+
+
+    function begin(event) {
+        getDistance(event)
+        // followRingChart18.value.finish()
+
+    }
+
+    function moving() {
+        // console.log("mmmmmm")
+    }
+
+    function stopMoving() {
+        // console.log("ssssss")
+    }
+
+
+    onMounted(() => {
+        setHeadinfo()
+        init()
+        settingChooseChart(1)
+        initCanvas()
+    })
+
+    function settingChooseChart(index) {
+        // chartDivs.value.forEach(function (item, index) {
+        //     item.style.zIndex = 1
+        // })
+        // chartDivs.value[index].style.zIndex = 99999
+    }
+
+
+    function setHeadinfo() {
+        headinfo.value = {
+            title: '生涯彩虹图',
+            user: {
+                avatar: '头像路径',
+                nickName: '张三'
+            },
+            backUrl: '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
+        }
+    }
+
+
+    const chartPrpps1 = ref({
+        top: 160,
+        left: 90,
+        width: 1700,
+        height: 1700,
+        borderColor: "#FFFF00",
+        color: "#ff00ff",
+        bncolor: "#ffffff",
+        radiusMax: '850px',
+        radiusMin: '816px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps2 = ref({
+        top: 228,
+        left: 158,
+        width: 1628,
+        height: 1628,
+        borderColor: "#00af3c",
+        color: "#00af3c",
+        bncolor: "#00af3c",
+        radiusMax: '816px',
+        radiusMin: '782px',
+        isFinish: false,
+        status: 'new',
+        power: true
+    })
+    const chartPrpps3 = ref({
+        top: 296,
+        left: 226,
+        width: 1562,
+        height: 1562,
+        borderColor: "pink",
+        color: "pink",
+        bncolor: "pink",
+        radiusMax: '782px',
+        radiusMin: '748px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps4 = ref({
+        top: 364,
+        left: 294,
+        width: 1465,
+        height: 1465,
+        borderColor: "#ffff00",
+        color: "#ffff00",
+        bncolor: "#ffff00",
+        radiusMax: '731px',
+        radiusMin: '697px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps5 = ref({
+        top: 483,
+        left: 413,
+        width: 1391,
+        height: 1391,
+        borderColor: "orange",
+        color: "orange",
+        bncolor: "orange",
+        radiusMax: '697px',
+        radiusMin: '663px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps6 = ref({
+        top: 551,
+        left: 481,
+        width: 1325,
+        height: 1325,
+        borderColor: "green",
+        color: "green",
+        bncolor: "green",
+        radiusMax: '663px',
+        radiusMin: '629px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+
+
+    const chartPrpps7 = ref({
+        top: 432,
+        left: 200,
+        width: 1400,
+        height: 1400,
+        borderColor: "pink",
+        color: "pink",
+        bncolor: "pink",
+        radiusMax: '612px',
+        radiusMin: '578px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps8 = ref({
+        top: 612,
+        left: 531,
+        width: 1271,
+        height: 1271,
+        borderColor: "green",
+        color: "green",
+        bncolor: "green",
+        radiusMax: '578px',
+        radiusMin: '544px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps9 = ref({
+        top: 612,
+        left: 531,
+        width: 1100,
+        height: 1100,
+        borderColor: "orange",
+        color: "orange",
+        bncolor: "orange",
+        radiusMax: '544px',
+        radiusMin: '510px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps10 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "green",
+        color: "green",
+        bncolor: "green",
+        radiusMax: '493px',
+        radiusMin: '459px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps11 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "pink",
+        color: "pink",
+        bncolor: "pink",
+        radiusMax: '459px',
+        radiusMin: '425px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps12 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "orange",
+        color: "orange",
+        bncolor: "orange",
+        radiusMax: '425px',
+        radiusMin: '391px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+
+    const chartPrpps13 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "green",
+        color: "green",
+        bncolor: "green",
+        radiusMax: '374px',
+        radiusMin: '340px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps14 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "blue",
+        color: "blue",
+        bncolor: "blue",
+        radiusMax: '340px',
+        radiusMin: '306px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps15 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "pink",
+        color: "pink",
+        bncolor: "pink",
+        radiusMax: '306px',
+        radiusMin: '272px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps16 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "orange",
+        color: "orange",
+        bncolor: "orange",
+        radiusMax: '255px',
+        radiusMin: '221px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps17 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "blue",
+        color: "blue",
+        bncolor: "blue",
+        radiusMax: '221px',
+        radiusMin: '187px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    const chartPrpps18 = ref({
+        top: 612,
+        left: 531,
+        width: 1272,
+        height: 1272,
+        borderColor: "green",
+        color: "green",
+        bncolor: "green",
+        radiusMax: '187px',
+        radiusMin: '153px',
+        isFinish: false,
+        status: 'new',
+        power: false
+    })
+    // const chartPrpps19= ref({
+    //   top: 612,
+    //   left: 531,
+    //   width: 1272,
+    //   height: 1272,
+    //   borderColor: "orange",
+    //   color: "orange",
+    //   bncolor: "orange",
+    //   radiusMax: '306px',
+    //   radiusMin: '272px',
+    //   isFinish: false,
+    //   status : 'new'
+    // })
+    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);
+    };
+
+
+    //编辑和保存
+    function save() {
+        status.value = 'save'
+        //保存
+
+    }
+
+    function edit() {
+        if (chartPrpps1.value.status == 'edit') {
+            chartPrpps1.value.status = 'new'
+        } else {
+            chartPrpps1.value.status = 'edit'
+        }
+    }
+
+    //
+    function initCanvas() {
+        const canvas = document.getElementById("myCanvas");
+        const ctx = canvas.getContext("2d");
+
+        // 圆心和半径
+        const centerX = 960;
+        const centerY = 1023;
+        const radius = 855;
+
+        // 绘制红色边框的圆
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+        ctx.strokeStyle = "red";
+        ctx.lineWidth = 5;
+        ctx.stroke();
+
+        // 填充半透明黄色
+        ctx.fillStyle = "rgba(255, 255, 0, 0.5)";
+        ctx.fill();
+    }
+
+
+</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: none;
+            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;
+            border: 1px pink solid;
+            position: absolute;
+            left: 14px;
+            top: 0px;
+            //background: #ffff00;
+        }
+
+        .ring-chart2 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            left: 48px;
+            top: 36px;
+        }
+
+        .ring-chart3 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            left: 81px;
+            top: 69px;
+        }
+
+        .ring-chart4 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            left: 130px;
+            top: 117px;
+        }
+
+        .ring-chart5 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            left: 154px;
+            top: 154px;
+        }
+
+        .ring-chart6 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 187px;
+            left: 187px;
+        }
+
+        .ring-chart7 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 150px;
+            left: 150px;
+        }
+
+        .ring-chart8 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 214px;
+            left: 214px;
+        }
+
+        .ring-chart9 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 299px;
+            left: 299px;
+        }
+
+        .ring-chart10 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart11 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart12 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart13 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart14 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart15 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart16 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart17 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+
+        .ring-chart18 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 213px;
+            left: 213px;
+        }
+    }
+
+    .bg-color-style {
+        color: black;
+        background: #ffff00;
+    }
+
+    #eraser {
+        position: absolute;
+        top: 10px;
+        text-align: center;
+        line-height: 50px;
+        left: 10px;
+        width: 50px;
+        height: 50px;
+        //background: #FFFFFF;
+        border: 1px solid #00afff;
+        border-radius: 50%
+    }
+
+    .bg-color-style1 {
+        background: #FFFFFF;
+    }
+</style>