会议页面

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <dv-full-screen-container class="layout_wrapper">
+    <dv-full-screen-container>
         <div class="app">
             <div :class="classObj" class="app-wrapper">
                 <logo :collapse="isCollapse" class="fixed-header" />
@@ -60,29 +60,12 @@ const settingRef = ref(null);
 function setLayout() {
     settingRef.value.openSetting();
 }
-
-const viewportWidth = ref(0);
-const viewportHeight = ref(0);
-
-const updateViewportSize = () => {
-    viewportWidth.value = window.innerWidth;
-    viewportHeight.value = window.innerHeight;
-    console.log(viewportWidth.value,viewportHeight.value,22223);
-};
-
-onMounted(() => {
-    updateViewportSize();
-    window.addEventListener('resize', updateViewportSize);
-});
-
-onUnmounted(() => {
-    window.removeEventListener('resize', updateViewportSize);
-});
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/styles/mixin.scss";
 @import "@/assets/styles/variables.module.scss";
+
 .app {
     position: relative;
     height: 100%;

src/views/system/entranceguard/index.vue

@@ -29,6 +29,9 @@
             </div>
             <div class="flex_spection">
                 <HeadlineTag type="right" value="实时告警与通知"></HeadlineTag>
+                <div class="box_arch">
+                    <inform></inform>
+                </div>
             </div>
         </div>
     </div>
@@ -40,6 +43,7 @@ import alleyway from './alleyway'
 import equipment from './equipment'
 import inbreak from './inbreak'
 import passable from './passable'
+import inform from './inform'
 </script>
 
 <style scoped lang="scss">
@@ -47,7 +51,7 @@ import passable from './passable'
     position: relative;
     width: 100%;
     padding-top: 45px;
-    height: 100vh;
+    height: 100%;
     overflow: hidden;
 }
 

src/views/system/entranceguard/inform.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="person_box">
+        <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+    </div>
+</template>
+
+<script setup>
+const config = ref({
+    headerBGC: '#10285c',
+    oddRowBGC: '#10285c7f',
+    evenRowBGC: '#10285c00',
+    header: ['告警内容', '地点', '时间', '状态'],
+    data: [
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+        ['行1列1', '行1列2', '行1列3', '行1列3'],
+    ]
+})
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/entranceguard/passable.vue

@@ -55,7 +55,7 @@ const initAccess = () => {
                     shape: {
                         x: 0, // 矩形的 x 坐标
                         y: 0, // 矩形的 y 坐标
-                        width: 28, // 矩形的宽度
+                        width: 22, // 矩形的宽度
                         height: 3, // 矩形的高度
                     },
                     style: {
@@ -67,7 +67,7 @@ const initAccess = () => {
                     zlevel: 101,
                     type: 'text',
                     left: 'center',
-                    top: 410,
+                    top: 110,
                     style: {
                         text: '完成率',
                         textAlign: 'center',
@@ -81,8 +81,8 @@ const initAccess = () => {
             {
                 title: {
                     show: false,
-                    offsetCenter: [0, '60%'],
-                    padding: [5, 10],
+                    offsetCenter: [0, '10%'],
+                    padding: [0, 0],
                     fontSize: 12,
                     color: '#E9F7FF',
                 },
@@ -109,7 +109,7 @@ const initAccess = () => {
                 },
                 progress: {
                     show: true,
-                    width: 13,
+                    width: 5,
                     roundCap: false,
                 },
                 axisLine: {
@@ -128,7 +128,7 @@ const initAccess = () => {
                 axisLabel: {
                     textStyle: {
                         color: '#75AFFC',
-                        fontSize: 20,
+                        fontSize: 12,
                     },
                 },
                 pointer: {
@@ -139,11 +139,8 @@ const initAccess = () => {
                 },
                 detail: {
                     valueAnimation: true,
-                    // width: '60%',
-                    // lineHeight: 1,
-                    // borderRadius: 8,
                     offsetCenter: [0, '-3%'],
-                    fontSize: 24,
+                    fontSize: 20,
                     color: '#E9F7FF',
                     textStyle: {
                         fontFamily: 'MyFont2',
@@ -155,15 +152,14 @@ const initAccess = () => {
                     rich: {
                         a: {
                             color: '#E9F7FF',
-                            fontSize: 19,
-                            padding: [6, 0, 0, 0],
+                            fontSize: 10,
+                            padding: [10, 0, 0, 0],
                         },
                     },
                 },
-                offsetCenter: [0, 10],
                 markPoint: {
                     symbol: 'circle',
-                    symbolSize: 80,
+                    symbolSize: 0,
                     data: [
                         {
                             x: 'center',
@@ -336,6 +332,8 @@ window.addEventListener('resize', () => {
     // padding: 0px;
     display: flex;
     align-items: center;
+    padding-top: 10px;
+    padding-right: 10px;
 }
 
 .box_monitoring {
@@ -385,21 +383,33 @@ window.addEventListener('resize', () => {
 
 .img_camera {
     position: absolute;
-    width: 120px;
-    height: 120px;
-    top: calc(50% - 60px);
-    left: calc(50% - 60px);
+    width: 200px;
+    height: 200px;
+    top: calc(50% - 100px);
+    left: calc(50% - 100px);
     border-radius: 50%;
     border: 1px solid rgb(15, 39, 66);
-    box-shadow: inset 0px 0px 20px 2px rgb(78, 207, 220);
+    // box-shadow: inset 0px 0px 20px 2px rgb(78, 207, 220);
 }
 
 .flex_spection {
     flex: 1;
 }
 
+.box_tion_zx {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.box_tion_lx {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .camera {
-    width: 190px;
+    width: 260px;
     height: 100%;
     display: flex;
     position: relative;
@@ -418,7 +428,7 @@ window.addEventListener('resize', () => {
 
     .entry-box-item {
         width: 100%;
-        height: 180px;
+        height: 100%;
         color: #fff;
         display: flex;
         justify-content: center;
@@ -429,30 +439,30 @@ window.addEventListener('resize', () => {
                 rgba(51, 149, 233, 0) 100px);
 
         .item-center-line {
-            width: 180px;
-            height: 180px;
+            width: 260px;
+            height: 260px;
             background-color: transparent;
             border-top: 3px solid rgb(22, 110, 191);
             border-bottom: 3px solid rgb(22, 110, 191);
             border-radius: 50%;
             box-sizing: border-box;
             position: absolute;
-            top: calc(50% - 90px);
-            left: calc(50% - 90px);
+            top: calc(50% - 130px);
+            left: calc(50% - 130px);
             animation: rotate 8s infinite linear;
         }
 
         .item-center-pie {
-            width: 150px;
-            height: 150px;
+            width: 230px;
+            height: 230px;
             background-color: transparent;
             border-top: 2px solid rgb(22, 110, 191);
             border-bottom: 2px solid rgb(22, 110, 191);
             border-radius: 50%;
             box-sizing: border-box;
             position: absolute;
-            top: calc(50% - 75px);
-            left: calc(50% - 75px);
+            top: calc(50% - 115px);
+            left: calc(50% - 115px);
             animation: rotate1 8s infinite linear;
         }
     }

src/views/system/inspection/index.vue

@@ -203,7 +203,7 @@ window.addEventListener('resize', () => {
   position: relative;
   width: 100%;
   padding-top: 45px;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 }
 

src/views/system/intruderalarm/index.vue

@@ -580,7 +580,7 @@ window.addEventListener('resize', () => {
     position: relative;
     width: 100%;
     padding-top: 45px;
-    height: 100vh;
+    height: 100%;
     overflow: hidden;
 }
 

src/views/system/passageway/index.vue

@@ -254,7 +254,7 @@ window.addEventListener('resize', () => {
   position: relative;
   width: 100%;
   padding-top: 45px;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 }
 

src/views/system/passengerFlow/index.vue

@@ -223,7 +223,7 @@ window.addEventListener('resize', () => {
   position: relative;
   width: 100%;
   padding-top: 45px;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 }
 

src/views/system/receptiondesk/conference.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="person_box">
+        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartDistrict = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    let MaxTemArray = [10, 3, 13, 11, 12, 12, 9];
+    const dotColorsDic = ['blue', 'red']; // 点的颜色字典
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        title: {
+            text: '未来一周气温变化',
+            subtarget: 'blank',
+            x: 'center',
+            top: '2%',
+            textStyle: {
+                fontSize: 15,
+                color: "rgba(254, 254, 254, 1)"
+            },
+        },
+        legend: {
+            top: '2%',
+            right: '0%',
+            textStyle: {
+                color: "rgba(254, 254, 254, 1)"
+            },
+        },
+        grid: {
+            top: '12%',
+            bottom: '12%',
+            left: '14%',
+            right: '2%'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                lineStyle: {
+                    color: '#C0C4CC',
+                    width: 2
+                }
+            },
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                formatter: '{value} °C'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#C0C4CC',
+                    width: 2
+                }
+            },
+        },
+        series: [{
+            name: '最高气温',
+            type: 'line',
+            color: '#ff6b93', // 定义legend图例中线颜色
+            symbol: "circle",
+            lineStyle: {
+                // 线的颜色
+                color: "rgba(28, 193, 91, 1)",
+                cap: "round"
+            },
+            itemStyle: {
+                normal: {
+                    color: (params) => {
+                        if (params.data > 10) {
+                            return dotColorsDic[1]
+                        } else {
+                            return dotColorsDic[0]
+                        }
+                    }
+                }
+            },
+            symbolSize: 6,
+            label: {
+                show: false
+            },
+            markLine: {
+                data: [{
+                    type: 'average',
+                    name: '最高气温平均值',
+                    lineStyle: {
+                        color: '#0ED638'
+                    },
+                    label: {
+                        formatter: "{b}{c}°C",
+                        color: '#0ED638'
+                    }
+                },
+                {
+                    name: '阈值',
+                    yAxis: 12,
+                    lineStyle: {
+                        color: '#FF6464'
+                    },
+                    label: {
+                        formatter: "{b}{c}°C",
+                        color: '#FF6464'
+                    }
+                }
+                ]
+            },
+            data: MaxTemArray
+        },]
+    };
+    chartDom.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/receptiondesk/feedback.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="person_box">
+        <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+    </div>
+</template>
+
+<script setup>
+const config = ref({
+    headerBGC: '#10285c',
+    oddRowBGC: '#10285c7f',
+    evenRowBGC: '#10285c00',
+    header: ['名称', '位置', '列3'],
+    data: [
+        ['行1列1', '行1列2', '行1列3'],
+        ['行2列1', '行2列2', '行2列3'],
+        ['行3列1', '行3列2', '行3列3'],
+        ['行4列1', '行4列2', '行4列3'],
+        ['行5列1', '行5列2', '行5列3'],
+        ['行6列1', '行6列2', '行6列3'],
+        ['行7列1', '行7列2', '行7列3'],
+        ['行8列1', '行8列2', '行8列3'],
+        ['行9列1', '行9列2', '行9列3'],
+        ['行10列1', '行10列2', '行10列3']
+    ]
+})
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/receptiondesk/formerly.vue

@@ -0,0 +1,321 @@
+<template>
+    <div class="person_box">
+        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartDistrict = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    let dataArray = {
+        xdataName: ['美国', '英国', '日本', '俄罗斯', '加拿大', '德国', '法国', '法国1', '法国2', '法国3', '法国4', '法国5'],
+        contractnum: [9999, 8888, 7777, 6666, 5555, 4444, 3333, 6333, 5333, 5333, 6333, 5333]
+    }
+    let color2 = [
+        [{
+            offset: 0,
+            color: '#ff8881'
+        }, {
+            offset: 0.15,
+            color: '#ff564c'
+        }, {
+            offset: 1,
+            color: 'rgba(255,86,76, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#fff9e1'
+        }, {
+            offset: 0.15,
+            color: '#ffe376'
+        }, {
+            offset: 1,
+            color: 'rgba(255,209,26, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#f7ff98'
+        }, {
+            offset: 0.15,
+            color: '#efff37'
+        }, {
+            offset: 1,
+            color: 'rgba(239,255,55, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#32ffee'
+        }, {
+            offset: 0.15,
+            color: '#cdfffb'
+        }, {
+            offset: 1,
+            color: 'rgba(50,255,238, 0.1)'
+        }],
+        [{
+            offset: 0,
+            color: '#ff8881'
+        }, {
+            offset: 0.15,
+            color: '#ff564c'
+        }, {
+            offset: 1,
+            color: 'rgba(255,86,76, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#fff9e1'
+        }, {
+            offset: 0.15,
+            color: '#ffe376'
+        }, {
+            offset: 1,
+            color: 'rgba(255,209,26, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#f7ff98'
+        }, {
+            offset: 0.15,
+            color: '#efff37'
+        }, {
+            offset: 1,
+            color: 'rgba(239,255,55, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#32ffee'
+        }, {
+            offset: 0.15,
+            color: '#cdfffb'
+        }, {
+            offset: 1,
+            color: 'rgba(50,255,238, 0.1)'
+        }],
+        [{
+            offset: 0,
+            color: '#ff8881'
+        }, {
+            offset: 0.15,
+            color: '#ff564c'
+        }, {
+            offset: 1,
+            color: 'rgba(255,86,76, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#fff9e1'
+        }, {
+            offset: 0.15,
+            color: '#ffe376'
+        }, {
+            offset: 1,
+            color: 'rgba(255,209,26, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#f7ff98'
+        }, {
+            offset: 0.15,
+            color: '#efff37'
+        }, {
+            offset: 1,
+            color: 'rgba(239,255,55, 0.08)'
+        }],
+        [{
+            offset: 0,
+            color: '#32ffee'
+        }, {
+            offset: 0.15,
+            color: '#cdfffb'
+        }, {
+            offset: 1,
+            color: 'rgba(50,255,238, 0.1)'
+        }],
+    ]
+    // tooltip
+    let tooltip = {
+        trigger: 'axis',
+        textStyle: {
+            fontSize: 18
+        },
+        axisPointer: {
+            type: 'cross',
+            label: {
+                backgroundColor: '#283b56'
+            }
+        },
+        formatter: v => {
+            let [a] = v
+            return `
+            <div class='u-p-2'>
+                <div>${a.name}：${a.value}</div>
+            </div>
+        `
+        }
+    }
+    // grid
+    let grid = {
+        top: '10%',
+        left: '10%',
+        right: '3%',
+        bottom: '10%'
+    }
+    // xAxis
+    let xAxis = {
+        type: 'category',
+        boundaryGap: true,
+        data: dataArray.xdataName,
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisLabel: {
+            textStyle: {
+                fontSize: 12,
+                color: '#fff'
+            },
+            rotate: 0
+        },
+        axisTick: {
+            show: false
+        }, //坐标轴刻度
+    }
+    // yAxis
+    let yAxis = {
+        type: 'value',
+        scale: true,
+        min: 0,
+        name: '人数/地图',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 12,
+            padding: [0, 0, 0, 10]
+        },
+        splitLine: {
+            show: false
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        },
+        axisLabel: {
+            textStyle: {
+                fontSize: 12,
+                color: '#fff'
+            }
+        }
+    }
+    let dataZoom = [ //给x轴设置滚动条
+        {
+            start: 0, //默认为0
+            end: 50, //默认为100
+            type: 'slider',
+            show: false,
+            xAxisIndex: [0],
+            handleSize: 10, //滑动条的 左右2个滑动条的大小
+            height: 0, //组件高度
+
+        },
+        //下面这个属性是里面拖到
+        {
+            type: 'inside',
+            show: true,
+            xAxisIndex: [0],
+            start: 0, //默认为1
+            end: 50 // 100 - 1500 / 31, //默认为100
+        },
+    ]
+
+    // series
+    let series = [{
+        name: '中高风险地区',
+        type: 'pictorialBar',
+        barWidth: 40,
+        // 三角矢量柱状图
+        symbol: 'path://M-0.000,431.000 C59.528,394.477 61.000,-0.000 61.000,-0.000 C61.000,-0.000 62.472,394.477 122.000,431.000 L-0.000,431.000 Z',
+        // 是否裁剪图形
+        symbolClip: false,
+        data: dataArray.contractnum,
+        itemStyle: {
+            color: params => {
+                return new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[params.dataIndex])
+            }
+        },
+        label: {
+            show: true,
+            position: 'top',
+            formatter: params => {
+                return params.name
+
+            },
+            textStyle: {
+                fontSize: 16,
+                color: '#fff'
+            }
+        },
+    }]
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        tooltip,
+        grid,
+        xAxis,
+        yAxis,
+        series,
+        dataZoom,
+    }
+    //自己滚动图表
+    var timeOut = null
+    chartDom.on('mouseover', stop);
+    chartDom.on('mouseout', goMove);
+    autoMove()
+    function autoMove() {
+        timeOut = setInterval(() => {
+            if (Number(option.dataZoom[0].end) > 100) {
+                option.dataZoom[0].end = 50;
+                option.dataZoom[0].start = 0;
+            } else {
+                option.dataZoom[0].end = option.dataZoom[0].end + 1 * (100 / option.series[0].data.length);
+                option.dataZoom[0].start = option.dataZoom[0].start + 1 * (100 / option.series[0].data.length);
+            }
+            chartDom.setOption(option)
+        }, 2500);
+    }
+    //鼠标按住停止滚动
+    function stop() {
+        clearInterval(timeOut)
+    }
+    //鼠标松开继续滚动
+    function goMove() {
+        autoMove()
+
+    }
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/receptiondesk/gambit.vue

@@ -0,0 +1,457 @@
+<template>
+    <div class="person_box">
+        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartDistrict = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    let angle = 0; //角度，用来做简单的动画效果的
+    let value = 80;
+    var timerId;
+    var outerRidus1 = 0.8
+    var outerRidus2 = 0.85
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        legend: {
+            orient: 'vertical',
+            show: true,
+            right: '5%',
+            y: 'center',
+            icon: 'pin',
+            itemGap: 30,
+            textStyle: {
+                color: '#FFFFFF',
+                fontSize: 12,
+                lineHeight: 20,
+            },
+        },
+        tooltip: {
+            show: true,
+        },
+        series: [
+            // 最外层圆
+            {
+                type: 'pie',
+                radius: ['75%', '55%'],
+                center: ['50%', '50%'],
+                hoverAnimation: false,
+                data: [
+                    {
+                        value: 30,
+                        name: '运行中',
+                        itemStyle: {
+                            normal: {
+                                color: {
+                                    // 完成的圆环的颜色
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: '#0060FF', // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: '#00EFFE', // 100% 处的颜色
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                    },
+                    {
+                        value: 30,
+                        name: '已停止',
+                        itemStyle: {
+                            normal: {
+                                color: {
+                                    // 完成的圆环的颜色
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: '#44D7B6', // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: '#6DD400', // 100% 处的颜色
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                    },
+                    {
+                        value: 40,
+                        name: '未上线',
+                        itemStyle: {
+                            normal: {
+                                color: {
+                                    // 完成的圆环的颜色
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: '#FFA600', // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: '#FEDB65', // 100% 处的颜色
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                    },
+                ],
+                label: {
+                    show: true,
+                    position: 'outside',
+                    formatter: '{d}%',
+                    color: '#FFFFFF',
+                },
+                labelLine: {
+                    normal: {
+                        length: 80,
+                        lineStyle: {
+                            width: 1,
+                        },
+                    },
+                },
+            },
+            // 内圆 + 中间文字
+            {
+                type: 'pie',
+                radius: ['60%', '40%'],
+                center: ['50%', '50%'],
+                hoverAnimation: false,
+                z: 10,
+                label: {
+                    position: 'center',
+                    formatter: () => {
+                        return '佣金总额\r\n{total|100} 个';
+                    },
+                    rich: {
+                        total: {
+                            fontSize: 24,
+                            color: '#FFFFFF',
+                        },
+                    },
+                    color: '#FFFFFF',
+                    fontSize: 16,
+                    lineHeight: 30,
+                },
+                data: [
+                    {
+                        value: 30,
+                        name: '运行中',
+                        itemStyle: {
+                            normal: {
+                                color: {
+                                    // 完成的圆环的颜色
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: '#0060FF', // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: '#00EFFE', // 100% 处的颜色
+                                        },
+                                    ],
+                                },
+                                opacity: 0.5,
+                            },
+                        },
+                    },
+                    {
+                        value: 30,
+                        name: '已停止',
+                        itemStyle: {
+                            normal: {
+                                color: {
+                                    // 完成的圆环的颜色
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: '#44D7B6', // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: '#6DD400', // 100% 处的颜色
+                                        },
+                                    ],
+                                },
+                                opacity: 0.5,
+                            },
+                        },
+                    },
+                    {
+                        value: 40,
+                        name: '未上线',
+                        itemStyle: {
+                            normal: {
+                                color: {
+                                    // 完成的圆环的颜色
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: '#FFA600', // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: '#FEDB65', // 100% 处的颜色
+                                        },
+                                    ],
+                                },
+                                opacity: 0.5,
+                            },
+                        },
+                    },
+                ],
+                labelLine: {
+                    show: false,
+                },
+            },
+
+            // 紫色线1 + 点
+            {
+                name: 'ring5',
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    return {
+                        type: 'arc',
+                        shape: {
+                            cx: api.getWidth() / 2,
+                            cy: api.getHeight() / 2,
+                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,// 180,
+                            startAngle: ((0 + angle) * Math.PI) / 180,
+                            endAngle: ((90 + angle) * Math.PI) / 180,
+                        },
+                        style: {
+                            stroke: '#8383FA',
+                            fill: 'transparent',
+                            lineWidth: 1.5,
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+            // 紫色线1点
+            {
+                name: 'ring5', //紫点
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    let x0 = api.getWidth() / 2;
+                    let y0 = api.getHeight() / 2;
+                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
+                    let point = getCirlPoint(x0, y0, r, 0 + angle);
+                    return {
+                        type: 'circle',
+                        shape: {
+                            cx: point.x,
+                            cy: point.y,
+                            r: 4,
+                        },
+                        style: {
+                            stroke: '#8450F9', //绿
+                            fill: '#8450F9',
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+            // 蓝色
+            {
+                name: 'ring5',
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    return {
+                        type: 'arc',
+                        shape: {
+                            cx: api.getWidth() / 2,
+                            cy: api.getHeight() / 2,
+                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,// 180,
+                            startAngle: ((180 + angle) * Math.PI) / 180,
+                            endAngle: ((270 + angle) * Math.PI) / 180,
+                        },
+                        style: {
+                            stroke: '#4386FA',
+                            fill: 'transparent',
+                            lineWidth: 1.5,
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+            {
+                name: 'ring5', // 蓝色
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    let x0 = api.getWidth() / 2;
+                    let y0 = api.getHeight() / 2;
+                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1// 180
+                    let point = getCirlPoint(x0, y0, r, 180 + angle);
+                    return {
+                        type: 'circle',
+                        shape: {
+                            cx: point.x,
+                            cy: point.y,
+                            r: 4,
+                        },
+                        style: {
+                            stroke: '#4386FA', //绿
+                            fill: '#4386FA',
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+            // 橘色
+            {
+                name: 'ring5',
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    return {
+                        type: 'arc',
+                        shape: {
+                            cx: api.getWidth() / 2,
+                            cy: api.getHeight() / 2,
+                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,// 200,
+                            startAngle: ((250 + -angle) * Math.PI) / 180,
+                            endAngle: ((10 + -angle) * Math.PI) / 180,
+                        },
+                        style: {
+                            stroke: '#0CD3DB',
+                            fill: 'transparent',
+                            lineWidth: 1.5,
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+            {
+                name: 'ring5', //绿点
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    let x0 = api.getWidth() / 2;
+                    let y0 = api.getHeight() / 2;
+                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2 // 200;
+                    let point = getCirlPoint(x0, y0, r, 250 + -angle);
+                    return {
+                        type: 'circle',
+                        shape: {
+                            cx: point.x,
+                            cy: point.y,
+                            r: 4,
+                        },
+                        style: {
+                            stroke: '#0CD3DB', //绿
+                            fill: '#0CD3DB',
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+            // 粉色
+            {
+                name: 'ring5',
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    return {
+                        type: 'arc',
+                        shape: {
+                            cx: api.getWidth() / 2,
+                            cy: api.getHeight() / 2,
+                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,// 200,,
+                            startAngle: ((70 + -angle) * Math.PI) / 180,
+                            endAngle: ((200 + -angle) * Math.PI) / 180,
+                        },
+                        style: {
+                            stroke: '#FF8E89',
+                            fill: 'transparent',
+                            lineWidth: 1.5,
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+            //粉色点
+            {
+                name: 'ring5',
+                type: 'custom',
+                coordinateSystem: 'none',
+                renderItem: function (params, api) {
+                    let x0 = api.getWidth() / 2;
+                    let y0 = api.getHeight() / 2;
+                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2// 200,;
+                    let point = getCirlPoint(x0, y0, r, 70 + -angle);
+                    return {
+                        type: 'circle',
+                        shape: {
+                            cx: point.x,
+                            cy: point.y,
+                            r: 4,
+                        },
+                        style: {
+                            stroke: '#FF8E89', //粉
+                            fill: '#FF8E89',
+                        },
+                        silent: true,
+                    };
+                },
+                data: [0],
+            },
+        ],
+    };
+
+    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
+    function getCirlPoint(x0, y0, r, angle) {
+        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
+        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
+        return {
+            x: x1,
+            y: y1,
+        };
+    }
+
+    chartDom.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/receptiondesk/index.vue

@@ -1,18 +1,42 @@
 <template>
-  <div>
-    <div style="width: 400px;padding-top: 50px;">
-      <HeadlineTag value="会议系统"></HeadlineTag>
-      <div className='wrap'>
-        <div className='planet'>
-          <div className='top_ball center_in'>
-            <div>
-              <span>测试</span>
-              <span>123</span>
-            </div>
-          </div>
-          <div className='right_ball center_in'>2</div>
-          <div className='bottom_ball center_in'>3</div>
-          <div className='left_ball center_in'>4</div>
+  <div class="tiondesk">
+    <div class="left_tiondesk">
+      <div class="flex_spection">
+        <HeadlineTag value="会议议程"></HeadlineTag>
+        <div class="box_arch">
+          <conference></conference>
+        </div>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="学员反馈"></HeadlineTag>
+        <div class="box_arch">
+          <gambit></gambit>
+        </div>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag value="会议话题总数"></HeadlineTag>
+        <div class="box_arch">
+          <feedback></feedback>
+        </div>
+      </div>
+    </div>
+    <div class="right_tiondesk">
+      <div class="flex_spection">
+        <HeadlineTag type="right" value="竞争对手"></HeadlineTag>
+        <div class="box_arch">
+          <wordcloud></wordcloud>
+        </div>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag type="right" value="过去30天会议"></HeadlineTag>
+        <div class="box_arch">
+          <formerly></formerly>
+        </div>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag type="right" value="课程满意度评分条形图"></HeadlineTag>
+        <div class="box_arch">
+          <satisfaction></satisfaction>
         </div>
       </div>
     </div>
@@ -21,94 +45,50 @@
 
 <script setup>
 import HeadlineTag from '@/components/HeadlineTag'
-const type = 'right'
+import conference from './conference'
+import feedback from './feedback'
+import gambit from './gambit'
+import wordcloud from './wordcloud'
+import formerly from './formerly'
+import satisfaction from './satisfaction'
 </script>
 
 <style scoped lang="scss">
-.wrap {
-  display: flex;
-  width: 600px;
-  height: 600px;
-  align-items: center;
-  justify-content: center;
-}
-
-.planet {
-  position: absolute;
-  border: 2px solid #fff;
-  transform-style: preserve-3d;
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-  transform: scaleY(0.5) rotateZ(198deg);
-  animation: planet-rotate 20s linear infinite;
-}
-
-.top_ball {
-  width: 50px;
-  height: 50px;
-  position: absolute;
-  border-radius: 50%;
-  background-color: yellowgreen;
-  left: calc(50% - 25px);
-  top: -25px;
-  transform: rotateZ(-198deg) scaleY(2);
-  animation: self-rotate 20s linear infinite;
-}
-
-.right_ball {
-  width: 50px;
-  height: 50px;
-  position: absolute;
-  border-radius: 50%;
-  background-color: yellowgreen;
-  right: -25px;
-  top: calc(50% - 25px);
-  transform: rotateZ(-198deg) scaleY(2);
-  animation: self-rotate 20s linear infinite;
+.tiondesk {
+  position: relative;
+  width: 100%;
+  padding-top: 45px;
+  height: 100%;
+  overflow: hidden;
 }
 
-.bottom_ball {
-  width: 50px;
-  height: 50px;
+.left_tiondesk {
   position: absolute;
-  border-radius: 50%;
-  background-color: yellowgreen;
-  bottom: -25px;
-  left: calc(50% - 25px);
-  transform: rotateZ(-198deg) scaleY(2);
-  animation: self-rotate 20s linear infinite;
+  left: 0;
+  width: 25%;
+  height: calc(100% - 45px);
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
 }
 
-.left_ball {
-  width: 50px;
-  height: 50px;
+.right_tiondesk {
   position: absolute;
-  border-radius: 50%;
-  background-color: yellowgreen;
-  left: -25px;
-  top: calc(50% - 25px);
-  transform: rotateZ(-198deg) scaleY(2);
-  animation: self-rotate 20s linear infinite;
+  right: 0;
+  width: 25%;
+  height: calc(100% - 45px);
+  display: flex;
+  flex-direction: column;
 }
 
-@keyframes planet-rotate {
-  0% {
-    transform: rotate(198deg) scaleY(0.5) rotate(0);
-  }
-
-  100% {
-    transform: rotate(198deg) scaleY(0.5) rotate(360deg);
-  }
+.flex_spection {
+  flex: 1;
+  color: #fff;
 }
 
-@keyframes self-rotate {
-  0% {
-    transform: rotate(0) scaleY(2) rotate(-198deg);
-  }
-
-  100% {
-    transform: rotate(-360deg) scaleY(2) rotate(-198deg);
-  }
+.box_arch {
+  display: flex;
+  align-items: center;
+  height: calc(100% - 40px);
 }
 </style>

src/views/system/receptiondesk/satisfaction.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="person_box">
+        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartDistrict = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a}<br/>{b}:{c}千万元',
+        },
+        title: {
+            show: true,
+            text: '南丁格尔玫瑰图',
+            left: 'center',
+            top: 10,
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        legend: {
+            show: true,
+            icon: 'circle',
+            x: 'center',
+            y: '15%',
+            data: ['医疗业务成本', '财政项目补助支出', '科教项目支出', '管理费用', '其他支出'],
+            textStyle: {
+                color: '#fff',
+            },
+        },
+        series: [
+            {
+                name: '总支出',
+                type: 'pie',
+                radius: [37, 155],
+                avoidLabelOverlap: false,
+                startAngle: 0,
+                center: ['50.1%', '35%'],
+                roseType: 'area',
+                selectedMode: 'single',
+                label: {
+                    normal: {
+                        show: true,
+                        formatter: '{c}千万元',
+                    },
+                    emphasis: {
+                        show: true,
+                    },
+                },
+                labelLine: {
+                    normal: {
+                        show: true,
+                        smooth: false,
+                        length: 20,
+                        length2: 10,
+                    },
+                    emphasis: {
+                        show: true,
+                    },
+                },
+                data: [
+                    {
+                        value: 600.58,
+                        name: '医疗业务成本',
+                        itemStyle: {
+                            normal: {
+                                color: '#f845f1',
+                            },
+                        },
+                        label: {
+                            color: '#f845f1',
+                        },
+                    },
+                    {
+                        value: 1100.58,
+                        name: '财政项目补助支出',
+                        itemStyle: {
+                            normal: {
+                                color: '#ad46f3',
+                            },
+                        },
+                        label: {
+                            color: '#ad46f3',
+                        },
+                    },
+                    {
+                        value: 1200.58,
+                        name: '科教项目支出',
+                        itemStyle: {
+                            normal: {
+                                color: '#5045f6',
+                            },
+                        },
+                        label: {
+                            color: '#5045f6',
+                        },
+                    },
+                    {
+                        value: 1300.58,
+                        name: '管理费用',
+                        itemStyle: {
+                            normal: {
+                                color: '#4777f5',
+                            },
+                        },
+                        label: {
+                            color: '#4777f5',
+                        },
+                    },
+                    {
+                        value: 1400.58,
+                        name: '其他支出',
+                        itemStyle: {
+                            normal: {
+                                color: '#44aff0',
+                            },
+                        },
+                        label: {
+                            color: '#44aff0',
+                        },
+                    },
+                    {
+                        value: 0,
+                        name: '',
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        value: 0,
+                        name: '',
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        value: 0,
+                        name: '',
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        value: 0,
+                        name: '',
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                        },
+                    },
+                    {
+                        value: 0,
+                        name: '',
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                        },
+                    },
+                ],
+            },
+        ],
+    };
+    chartDom.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/receptiondesk/wordcloud.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="person_box">
+        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
+})
+const chartDistrict = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
+    const indicator = [
+        {
+            text: '文明村',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '卫生村',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '森林村庄',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '全面小康',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '景区村庄',
+            min: 0,
+            max: 100
+        }
+    ]
+    const Data = [80, 61, 70, 86, 77]
+
+    function setData() {
+        return [
+            {
+                value: Data,
+                itemStyle: {
+                    normal: {
+                        lineStyle: {
+                            color: '#4BFFFC',
+                            shadowColor: '#4BFFFC',
+                            shadowBlur: 5
+                        },
+                        shadowColor: '#4BFFFC',
+                        shadowBlur: 5
+                    }
+                },
+                areaStyle: {
+                    normal: {
+                        // 单项区域填充样式
+                        color: {
+                            type: 'radial',
+                            x: 0.5, //右
+                            y: 0.5, //下
+                            r: 1,
+                            colorStops: [
+                                {
+                                    offset: 1,
+                                    color: '#4BFFFC'
+                                },
+                                {
+                                    offset: 0,
+                                    color: 'rgba(0,0,0,0)'
+                                }
+                            ],
+                            globalCoord: false
+                        },
+                        opacity: 0.8 // 区域透明度
+                    }
+                }
+            }
+        ]
+    }
+
+    function setgauge(i) {
+        return {
+            type: 'gauge',
+            detail: false,
+            splitNumber: 10, //刻度数量
+            radius: '80%', //图表尺寸
+            center: ['50%', '50%'],
+            startAngle: 90 + 72 * i + 18, //开始刻度的角度
+            endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: true,
+                lineStyle: {
+                    color: '#66ccff',
+                    width: 1
+                },
+                length: 6,
+                splitNumber: 1
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            }
+        }
+    }
+    function setSpot() {
+        var scatterData = []
+        Data.map((o, i) => {
+            scatterData.push({
+                value: [o, i],
+                itemStyle: {
+                    normal: {
+                        color: color[i],
+                        borderColor: '#fff',
+                        borderWidth: 1,
+                        shadowColor: color[i],
+                        shadowBlur: 8
+                    }
+                }
+            })
+        })
+        return scatterData
+    }
+
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        polar: {
+            center: ['50%', '50%'],
+            radius: '60%'
+        },
+        radar: {
+            shape: 'circle',
+            center: ['50%', '50%'],
+            radius: '60%',
+            indicator: indicator,
+            axisName: {
+                color: '#b7e9fd',
+                fontSize: 24,
+                padding: -10
+            },
+            nameGap: 45,
+            splitNumber: 4,
+            splitArea: {
+                // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+                show: true,
+                areaStyle: {
+                    // 分隔区域的样式设置。
+                    color: ['rgba(27, 50, 66, 0.4)']
+                }
+            },
+            axisLine: {
+                //指向外圈文本的分隔线样式
+                lineStyle: {
+                    color: '#5aa3d0'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(99,192,251,0.2)', // 分隔线颜色
+                    width: 2 // 分隔线线宽
+                }
+            }
+        },
+        angleAxis: {
+            type: 'category',
+            data: name,
+            minInterval: 1,
+            boundaryGap: false,
+            clockwise: false,
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            axisLine: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            }
+        },
+        radiusAxis: {
+            min: 0,
+            max: 100,
+            interval: 25,
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                //指向外圈文本的分隔线样式
+                lineStyle: {
+                    color: '#5aa3d0'
+                }
+            },
+            axisLabel: {
+                fontSize: 12,
+                color: '#5aa3d0',
+                align: 'left',
+                margin: -5
+            }
+        },
+        series: [
+            setgauge(0),
+            setgauge(1),
+            setgauge(2),
+            setgauge(3),
+            setgauge(4),
+            {
+                type: 'radar',
+                silent: true,
+                lineStyle: {
+                    color: '#66ffff'
+                },
+                areaStyle: {
+                    color: 'rgba(102, 255, 255, 0.31)'
+                },
+                data: setData()
+            },
+            {
+                type: 'scatter',
+                coordinateSystem: 'polar',
+                symbolSize: 20,
+                data: setSpot()
+            }
+        ]
+    };
+    chartDom.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+</style>

src/views/system/visitor/index.vue

@@ -321,7 +321,7 @@ window.addEventListener('resize', () => {
   position: relative;
   width: 100%;
   padding-top: 45px;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
 }
 

src/views/system/visitor/starView.vue

@@ -112,7 +112,7 @@
     width: 90px;
     height: 90px;
     border-radius: 50%;
-    top: calc(50% - 28px);
+    top: calc(50% - 60px);
     border: 1px solid rgb(156, 192, 218);
     background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(30, 144, 255, 0.7));
     border-radius: 50%;