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

<template>
    <div id="outerDiv" class="development_stage" v-loading="loadingInfo.isLoading">
        <head-component :headinfo=headinfo></head-component>
        <div class="page-content page-background">
            <canvas width="1920" height="980" style="background-color: #000000;"
                    id="can"></canvas>
        </div>
        <div style="position: absolute;top:150px;right: 150px" v-show="!loading">
            <el-button @click="changePaintState">{{paintStateFlagText}}</el-button>
            <el-button @click="clear">清空</el-button>
            <el-button @click="save(null)">保存</el-button>
            <el-button @click="finishRepaint('new')">绘制完成</el-button>
        </div>
    </div>

</template>

<script setup>
    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
    import {newRainbow, saveRainbow, finish} from '@/api/xjc-integratedmachine/wakeup/rainbow.js'

    const loading = ref(true)
    const headinfo = ref({})

    import {onMounted} from 'vue'
    import * as echarts from "echarts";
    import html2canvas from 'html2canvas';
    import {ElMessage} from 'element-plus'

    const backgroundImage = new Image();
    // backgroundImage.src = 'http://192.168.3.100/screenshot.png'; // 替换为你的背景图片路径

    let CENTER_X = 960;
    let CENTER_Y = 980;
    let startMouse = {x: 0, y: 0};
    let moveMouse = {x: 0, y: 0};

    // 画笔橡皮擦状态，true画笔，false橡皮
    let paintStateFlag = true;
    let paintStateFlagText = ref('画笔');

    // 第一个职业
    let startAngle11 = 0;
    let startAngle12 = 0;
    let startAngle13 = 0;

    // 第二个职业
    let startAngle21 = 0;
    let startAngle22 = 0;
    let startAngle23 = 0;

    // 第三个职业
    let startAngle31 = 0;
    let startAngle32 = 0;
    let startAngle33 = 0;

    // 第四个职业
    let startAngle41 = 0;
    let startAngle42 = 0;
    let startAngle43 = 0;

    // 第五个职业
    let startAngle51 = 0;
    let startAngle52 = 0;
    let startAngle53 = 0;

    // 第六个职业
    let startAngle61 = 0;
    let startAngle62 = 0;
    let startAngle63 = 0;

    // 第七个职业
    let startAngle71 = 0;
    let startAngle72 = 0;
    let startAngle73 = 0;

    let raduisColor = ["#000000",
        "#ffc300", "#f72585", "#4cc9f0", "#a000ff", "#ffc9f6", "#9de617"
    ]

    let radiusHalf = new Map(
        [
            ["startAngle11", [10, 50]],
            ["startAngle12", [50, 90]],
            ["startAngle13", [90, 130]],

            ["startAngle21", [145, 185]],
            ["startAngle22", [185, 225]],
            ["startAngle23", [225, 265]],

            ["startAngle31", [280, 320]],
            ["startAngle32", [320, 360]],
            ["startAngle33", [360, 400]],

            ["startAngle41", [415, 455]],
            ["startAngle42", [455, 495]],
            ["startAngle43", [495, 535]],

            ["startAngle51", [550, 590]],
            ["startAngle52", [590, 630]],
            ["startAngle53", [630, 670]],

            ["startAngle61", [685, 725]],
            ["startAngle62", [725, 765]],
            ["startAngle63", [765, 805]]
        ]
    )


    // 所有轨道绘画限制
    let paintFlagList = [
        false, false, false,
        false, false, false,
        false, false, false,
        false, false, false,
        false, false, false,
        false, false, false]

    let undoList = []; // 用于保存所有操作，用于撤销和重做
    let redoList = []; // 用于保存所有撤销的操作，用于重做

    function changes() {
        can.addEventListener('touchstart', function (el) {
            let rect = el.target.getBoundingClientRect();
            startMouse.x = el.touches[0].pageX - rect.left;
            startMouse.y = el.touches[0].pageY - rect.top;
            calcStartRadius();
            can.addEventListener('touchmove', function (e) {
                moveMouse.x = startMouse.x;
                moveMouse.y = startMouse.y;
                startMouse.x = e.targetTouches[0].pageX - this.offsetLeft;
                startMouse.y = e.targetTouches[0].pageY - this.offsetTop;
                if (startMouse.x !== moveMouse.x && startMouse.y !== moveMouse.y) {
                    return;
                }
                calcEndRadius();
                //计算是否超出本轨道
                let sum = Math.pow(moveMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - moveMouse.y, 2);
                let key = form.value.picData[form.value.picData.length - 1].angle
                let value = radiusHalf.get(key)
                let min = Math.pow(value[0], 2)
                let max = Math.pow(value[1], 2)
                if (sum < min || sum > max) {
                    recordEnd()
                    return;
                }
            })
        })
        can.addEventListener('touchend', function (e) {
            can.onmousemove = null;
            //获取结束点
            recordEnd()
        })
    }

    function recordEnd() {
        let endAngle = calcEndRadius();
        form.value.picData[form.value.picData.length - 1].endAngle = endAngle;
    }

    /*计算起始点*/
    function calcStartRadius() {
        let data = {startAngle: 0, angle: ''}
        data.paintStateFlag = paintStateFlag
        let sum = Math.pow(startMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - startMouse.y, 2);
        // 第一个职业
        if (sum < Math.pow(50, 2) && sum > Math.pow(10, 2)) {
            startAngle11 = calcAngle();
            data.startAngle = startAngle11
            data.angle = 'startAngle11'
            calcPaintCircleFlag(0)
        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
            startAngle12 = calcAngle();
            data.startAngle = startAngle12
            data.angle = 'startAngle12'
            calcPaintCircleFlag(1)
        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
            startAngle13 = calcAngle();
            data.startAngle = startAngle13
            data.angle = 'startAngle13'
            calcPaintCircleFlag(2)
        }
        // 第二个职业
        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
            startAngle21 = calcAngle();
            data.startAngle = startAngle21
            data.angle = 'startAngle21'
            calcPaintCircleFlag(3)
        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
            startAngle22 = calcAngle();
            data.startAngle = startAngle22
            data.angle = 'startAngle22'
            calcPaintCircleFlag(4)
        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
            startAngle23 = calcAngle();
            data.startAngle = startAngle23
            data.angle = 'startAngle23'
            calcPaintCircleFlag(5)
        }
        // 第三个职业
        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
            startAngle31 = calcAngle();
            data.startAngle = startAngle31
            data.angle = 'startAngle31'
            calcPaintCircleFlag(6)
        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
            startAngle32 = calcAngle();
            data.startAngle = startAngle32
            data.angle = 'startAngle32'
            calcPaintCircleFlag(7)
        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
            startAngle33 = calcAngle();
            data.startAngle = startAngle33
            data.angle = 'startAngle33'
            calcPaintCircleFlag(8)
        }
        // 第四个职业
        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
            startAngle41 = calcAngle();
            data.startAngle = startAngle41
            data.angle = 'startAngle41'
            calcPaintCircleFlag(9)
        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
            startAngle42 = calcAngle();
            data.startAngle = startAngle42
            data.angle = 'startAngle42'
            calcPaintCircleFlag(10)
        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
            startAngle43 = calcAngle();
            data.startAngle = startAngle43
            data.angle = 'startAngle43'
            calcPaintCircleFlag(11)
        }
        // 第五个职业
        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
            startAngle51 = calcAngle();
            data.startAngle = startAngle51
            data.angle = 'startAngle51'
            calcPaintCircleFlag(12)
        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
            startAngle52 = calcAngle();
            data.startAngle = startAngle52
            data.angle = 'startAngle52'
            calcPaintCircleFlag(13)
        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
            startAngle53 = calcAngle();
            data.startAngle = startAngle53
            data.angle = 'startAngle53'
            calcPaintCircleFlag(14)
        }
        // 第六个职业
        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
            startAngle61 = calcAngle();
            data.startAngle = startAngle61
            data.angle = 'startAngle61'
            calcPaintCircleFlag(15)
        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
            startAngle62 = calcAngle();
            data.startAngle = startAngle62
            data.angle = 'startAngle62'
            calcPaintCircleFlag(16)
        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
            startAngle63 = calcAngle();
            data.startAngle = startAngle63
            data.angle = 'startAngle63'
            calcPaintCircleFlag(17)
        }
        if(data.startAngle == 0){
            alert("起点角度记录不完整")
        }else if(data.angle == ''){
            alert("起点轨道记录不完整")
        }else{
            form.value.picData.push(data)
        }

    }

    /**
     * 只有起始点所在轨道可以绘制
     **/
    function calcPaintCircleFlag(index) {
        paintFlagList = [
            false, false, false,
            false, false, false,
            false, false, false,
            false, false, false,
            false, false, false,
            false, false, false]
        paintFlagList[index] = true
    }

    /*计算终点*/
    function calcEndRadius() {
        let sum = Math.pow(moveMouse.x - CENTER_X, 2) + Math.pow(CENTER_Y - moveMouse.y, 2);
        let ret = calcAngle();
        // 第一个职业
        if (sum < Math.pow(50, 2) && sum > Math.pow(10, 2)) {
            if (paintFlagList[0]) {
                if (paintStateFlag) {
                    paint(raduisColor[1], 30, startAngle11, ret);
                } else {
                    paint(raduisColor[0], 30, startAngle11, ret);
                    paint(raduisColor[0], 70, startAngle11, ret);
                    paint(raduisColor[0], 110, startAngle11, ret);
                }
            }
        } else if (sum < Math.pow(90, 2) && sum > Math.pow(50, 2)) {
            if (paintFlagList[1]) {
                if (paintStateFlag) {
                    paint(raduisColor[1], 30, startAngle12, ret);
                    paint(raduisColor[1], 70, startAngle12, ret);
                } else {
                    paint(raduisColor[0], 70, startAngle12, ret);
                    paint(raduisColor[0], 110, startAngle12, ret);
                }
            }
        } else if (sum < Math.pow(130, 2) && sum > Math.pow(90, 2)) {
            if (paintFlagList[2]) {
                if (paintStateFlag) {
                    paint(raduisColor[1], 30, startAngle13, ret);
                    paint(raduisColor[1], 70, startAngle13, ret);
                    paint(raduisColor[1], 110, startAngle13, ret);
                } else {
                    paint(raduisColor[0], 110, startAngle13, ret);
                }
            }
        }
        // 第二个职业
        else if (sum < Math.pow(185, 2) && sum > Math.pow(145, 2)) {
            if (paintFlagList[3]) {
                if (paintStateFlag) {
                    paint(raduisColor[2], 165, startAngle21, ret);
                } else {
                    paint(raduisColor[0], 165, startAngle21, ret);
                    paint(raduisColor[0], 205, startAngle21, ret);
                    paint(raduisColor[0], 245, startAngle21, ret);
                }
            }
        } else if (sum < Math.pow(225, 2) && sum > Math.pow(185, 2)) {
            if (paintFlagList[4]) {
                if (paintStateFlag) {
                    paint(raduisColor[2], 165, startAngle22, ret);
                    paint(raduisColor[2], 205, startAngle22, ret);
                } else {
                    paint(raduisColor[0], 205, startAngle22, ret);
                    paint(raduisColor[0], 245, startAngle22, ret);
                }
            }
        } else if (sum < Math.pow(265, 2) && sum > Math.pow(225, 2)) {
            if (paintFlagList[5]) {
                if (paintStateFlag) {
                    paint(raduisColor[2], 165, startAngle23, ret);
                    paint(raduisColor[2], 205, startAngle23, ret);
                    paint(raduisColor[2], 245, startAngle23, ret);
                } else {
                    paint(raduisColor[0], 245, startAngle23, ret);
                }
            }
        }
        //第三个职业
        else if (sum < Math.pow(320, 2) && sum > Math.pow(280, 2)) {
            if (paintFlagList[6]) {
                if (paintStateFlag) {
                    paint(raduisColor[3], 300, startAngle31, ret);
                } else {
                    paint(raduisColor[0], 300, startAngle31, ret);
                    paint(raduisColor[0], 340, startAngle31, ret);
                    paint(raduisColor[0], 380, startAngle31, ret);
                }
            }
        } else if (sum < Math.pow(360, 2) && sum > Math.pow(320, 2)) {
            if (paintFlagList[7]) {
                if (paintStateFlag) {
                    paint(raduisColor[3], 300, startAngle31, ret);
                    paint(raduisColor[3], 340, startAngle31, ret);
                } else {
                    paint(raduisColor[0], 340, startAngle32, ret);
                    paint(raduisColor[0], 380, startAngle32, ret);
                }
            }
        } else if (sum < Math.pow(400, 2) && sum > Math.pow(360, 2)) {
            if (paintFlagList[8]) {
                if (paintStateFlag) {
                    paint(raduisColor[3], 300, startAngle33, ret);
                    paint(raduisColor[3], 340, startAngle33, ret);
                    paint(raduisColor[3], 380, startAngle33, ret);
                } else {
                    paint(raduisColor[0], 380, startAngle33, ret);
                }
            }
        }
        //第四个职业
        else if (sum < Math.pow(455, 2) && sum > Math.pow(415, 2)) {
            if (paintFlagList[9]) {
                if (paintStateFlag) {
                    paint(raduisColor[4], 435, startAngle41, ret);
                } else {
                    paint(raduisColor[0], 435, startAngle41, ret);
                    paint(raduisColor[0], 475, startAngle41, ret);
                    paint(raduisColor[0], 515, startAngle41, ret);
                }
            }
        } else if (sum < Math.pow(495, 2) && sum > Math.pow(455, 2)) {
            if (paintFlagList[10]) {
                if (paintStateFlag) {
                    paint(raduisColor[4], 435, startAngle42, ret);
                    paint(raduisColor[4], 475, startAngle42, ret);
                } else {
                    paint(raduisColor[0], 475, startAngle42, ret);
                    paint(raduisColor[0], 515, startAngle42, ret);
                }
            }
        } else if (sum < Math.pow(535, 2) && sum > Math.pow(495, 2)) {
            if (paintFlagList[11]) {
                if (paintStateFlag) {
                    paint(raduisColor[4], 435, startAngle43, ret);
                    paint(raduisColor[4], 475, startAngle43, ret);
                    paint(raduisColor[4], 515, startAngle43, ret);
                } else {
                    paint(raduisColor[0], 515, startAngle43, ret);
                }
            }
        }

        //第五个职业
        else if (sum < Math.pow(590, 2) && sum > Math.pow(550, 2)) {
            if (paintFlagList[12]) {
                if (paintStateFlag) {
                    paint(raduisColor[5], 570, startAngle51, ret);
                } else {
                    paint(raduisColor[0], 570, startAngle51, ret);
                    paint(raduisColor[0], 610, startAngle51, ret);
                    paint(raduisColor[0], 650, startAngle51, ret);
                }
            }
        } else if (sum < Math.pow(630, 2) && sum > Math.pow(590, 2)) {
            if (paintFlagList[13]) {
                if (paintStateFlag) {
                    paint(raduisColor[5], 570, startAngle52, ret);
                    paint(raduisColor[5], 610, startAngle52, ret);
                } else {
                    paint(raduisColor[0], 610, startAngle52, ret);
                    paint(raduisColor[0], 650, startAngle52, ret);
                }
            }
        } else if (sum < Math.pow(670, 2) && sum > Math.pow(630, 2)) {
            if (paintFlagList[14]) {
                if (paintStateFlag) {
                    paint(raduisColor[5], 570, startAngle53, ret);
                    paint(raduisColor[5], 610, startAngle53, ret);
                    paint(raduisColor[5], 650, startAngle53, ret);
                } else {
                    paint(raduisColor[0], 650, startAngle53, ret);
                }
            }
        }

        //第六个职业
        else if (sum < Math.pow(725, 2) && sum > Math.pow(685, 2)) {
            if (paintFlagList[15]) {
                if (paintStateFlag) {
                    paint(raduisColor[6], 705, startAngle61, ret);
                } else {
                    paint(raduisColor[0], 705, startAngle61, ret);
                    paint(raduisColor[0], 745, startAngle61, ret);
                    paint(raduisColor[0], 785, startAngle61, ret);
                }
            }
        } else if (sum < Math.pow(765, 2) && sum > Math.pow(725, 2)) {
            if (paintFlagList[16]) {
                if (paintStateFlag) {
                    paint(raduisColor[6], 705, startAngle62, ret);
                    paint(raduisColor[6], 745, startAngle62, ret);
                } else {
                    paint(raduisColor[0], 745, startAngle62, ret);
                    paint(raduisColor[0], 785, startAngle62, ret);
                }
            }
        } else if (sum < Math.pow(805, 2) && sum > Math.pow(765, 2)) {
            if (paintFlagList[17]) {
                if (paintStateFlag) {
                    paint(raduisColor[6], 705, startAngle63, ret);
                    paint(raduisColor[6], 745, startAngle63, ret);
                    paint(raduisColor[6], 785, startAngle63, ret);
                } else {
                    paint(raduisColor[0], 785, startAngle63, ret);
                }
            }
        }
        return ret;
    }

    /*计算角度0-180度*/
    function calcAngle() {
        let number = Math.atan2(Math.abs(CENTER_Y - startMouse.y), CENTER_X - startMouse.x);
        let ret = number * 180 / Math.PI; //弧度转角度，方便调试
        if (ret > 360) {
            ret -= 360;
        }
        if (ret < 0) {
            ret += 450;
        }
        let num = ret * Math.PI / 180 + Math.PI;
        return num;
    }

    let can = "";
    let context = "";

    function init() {
        can = document.getElementById('can');
        context = can.getContext('2d');
    }

    function arc(num) {
        context.lineWidth = 1;
        context.setLineDash([]);
        context.strokeStyle = '#ffffff'
        context.beginPath();
        context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
        context.stroke();
    }

    function arcDashed(num) {
        context.lineWidth = 1;
        context.setLineDash([]);
        context.strokeStyle = '#ffffff'
        context.beginPath();
        context.arc(CENTER_X, CENTER_Y, num, Math.PI, 2 * Math.PI, false);
        context.stroke();
    }


    function paint(color, radius, startAngle, endAngle) {
        // 结束角度不能小于起始角度
        if (endAngle <= startAngle) {
            // ElMessage.error("只能顺时针画")
            return;
        }
        context.setLineDash([]);
        context.lineWidth = 37;
        context.strokeStyle = color;
        context.beginPath();
        context.arc(CENTER_X, CENTER_Y, radius, startAngle, endAngle, false);
        context.stroke();
    }

    function reset() {
        paintStateFlag = true;
        paintStateFlagText.value = '画笔'
    }

    function changePaintState() {
        if (paintStateFlag) {
            paintStateFlag = false;
            paintStateFlagText.value = '橡皮擦'
        } else {
            paintStateFlag = true;
            paintStateFlagText.value = '画笔'
        }
    }

    function eraserState() {
        paintStateFlag = false;
    }

    function clear() {
        context.clearRect(0, 0, can.width, can.height);
        drawBackground();
    }

    function drawBackground() {
        let radius = 10;
        arc(radius);
        for (let i = 1; i < 24; i++) {
            radius = drawBackgroundOne(radius, i);
            // arc(radius);
            if (i % 4 == 0) {
                arc(radius);
            } else {
                arcDashed(radius)
            }
        }
    }

    function drawBackgroundOne(innerRadius, i) {
        if (i % 4 == 0) {
            return innerRadius + 15;
        } else {
            return innerRadius + 40;
        }
    }

    // function save() {
    //     html2canvas(can).then(canvas => {
    //         const link = document.createElement('a');
    //         link.download = 'screenshot.png';
    //         link.href = canvas.toDataURL();
    //         link.click();
    //         document.body.removeChild(link); // 清理创建的链接
    //     });
    //     // capturePage()
    // }

    const content = ref(null);
    const canvas = ref(null);

    import {uploadFile} from '@/utils/request.js'

    async function capturePage(type) {
        const element = document.getElementById('can');
        await html2canvas(element, {
            allowTaint: true,
            useCORS: true,
            scale: 1, // 缩放比例，可以设置为更高分辨率
            logging: true, // 启用日志
            backgroundColor: '#ffffff' // 背景颜色
        }).then(canvas => {
            canvas.toBlob(async blob => {
                const formData = new FormData();
                formData.append('file', blob, 'screenshot.png');
                await uploadFile('/file/upload', formData).then(resp => {
                    form.value.picUrl = resp.url
                    saveAllData(type)
                })
            })
        })
    }

    const form = ref({})

    function initRainbow(rFrom) {
        loading.value = true
        newRainbow(rFrom).then(resp => {
            form.value.id = resp.id
            if (resp.picData != null && resp.picData != '') {
                form.value.picData = JSON.parse(resp.picData);
            } else {
                form.value.picData = []
            }
            loading.value = false
            backShow(form.value.picData)
        })
    }

    function backShow(picData) {
        if (picData.length == 0) {
            //清空

        } else {
            //根据数据重绘
            picData.forEach(function (item, index) {
                repaint(item)
            })
        }
    }

    function repaint(item) {
        let  paintStateFlag = item.paintStateFlag
        //第几职业
        let angleNum = item.angle.substr(10, 1)
        let color = raduisColor[parseInt(angleNum)]
        //第几轨道
        let angleCount = item.angle.substr(11, 1)

        let startAngle = item.startAngle;
        let endAngle = item.endAngle;


        let radius = radiusHalf.get(item.angle);
        let min = radius[0];
        let max = radius[1];
        let middle = min + (max - min) / 2
        // console.log(item.angle,"=======",radius,"mmmmm",middle)
        // console.log("count:",angleCount,"middle:",middle)
        if(paintStateFlag == true){
            if(angleCount == 1){
                paint(color, middle, startAngle, endAngle);
            }else if(angleCount == 2){
                paint(color, middle, startAngle, endAngle);
                paint(color, middle-40, startAngle, endAngle);
            }else if(angleCount == 3){
                paint(color, middle, startAngle, endAngle);
                paint(color, middle-40, startAngle, endAngle);
                paint(color, middle-80, startAngle, endAngle);
            }
        }else{
            if(angleCount == 1){
                paint(raduisColor[0], middle, startAngle, endAngle);
                paint(raduisColor[0], middle+40, startAngle, endAngle);
                paint(raduisColor[0], middle+80, startAngle, endAngle);
            }else if(angleCount == 2){
                paint(raduisColor[0], middle, startAngle, endAngle);
                paint(raduisColor[0], middle+40, startAngle, endAngle);
            }else if(angleCount == 3){
                paint(raduisColor[0], middle, startAngle, endAngle);
            }
        }




    }

    function saveAllData(type) {
        if (form.value.picData.length > 0) {
            form.value.picDataArray = form.value.picData
            form.value.picData = null
            saveRainbow(form.value).then(resp => {
                loadingInfo.value.isLoading = false
                initRainbow({
                    type: type
                });
            })
        } else {
            loadingInfo.value.isLoading = false
        }
    }

    const loadingInfo = ref({
        isLoading: false,
        text: ' '
    })

    function save(type) {
        loadingInfo.value.isLoading = true
        loadingInfo.value.text = "正在保存图片"
        //截屏
        capturePage(type)
        reset()
    }

    function finishRepaint(type) {
        save(type)
    }

    onMounted(() => {
        init();
        changes();
        initRainbow({type: null});
        drawBackground();
    });


</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 {
        display: flex;
        justify-content: center;
        padding-top: 100px;
    }

    .page-background {
        /*padding-top: 100px;*/
        /*margin-top: 60px;*/
        /*height: 980px;*/
        width: 100%;
        /*background-color: #000000;*/
        /*border: solid red 1px;*/
    }


    .bg-color-style1 {
        background: #FFFFFF;
    }
</style>