省 市 区县首页

ruoyi-ui/src/views/shijihome/index.vue

@@ -0,0 +1,919 @@
+<template>
+    <div class="app-container home">
+        <div class="flex ">
+            <div class="flex topleft padding flex-direction">
+                <div class="flex topleftbox boxClass flex-direction">
+                    <div class="flex">
+                        <div class="titleImg">
+                        </div>
+                        <div class="titleFont">
+                            我的待办
+                        </div>
+                    </div>
+                    <div class="flex box2 padding0">
+                        <div class="topleftimg">
+                            <img src="../../assets/images/shijihome/img_12.png" />
+                        </div>
+                        <div class="flex topleftwz">
+                            <div class="topleftwz1">
+                                机构备案
+                            </div>
+                            <div class="topleftwz2">待办：</div>
+                            <div class="topleftwz3">1</div>
+                        </div>
+                    </div>
+                    <div class="flex box2 padding0">
+                        <div class="topleftimg">
+                            <img src="../../assets/images/shijihome/img_13.png" />
+                        </div>
+                        <div class="flex topleftwz">
+                            <div class="topleftwz1">
+                                联合惩戒
+                            </div>
+                            <div class="topleftwz2">待办：</div>
+                            <div class="topleftwz3">1</div>
+                        </div>
+                    </div>
+                    <div class="flex box2 padding0">
+                        <div class="topleftimg">
+                            <img src="../../assets/images/shijihome/img_14.png" />
+                        </div>
+                        <div class="flex topleftwz">
+                            <div class="topleftwz1">
+                                等级评定
+                            </div>
+                            <div class="topleftwz2">待办：</div>
+                            <div class="topleftwz3">1</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="topleftgg flex boxClass flex-direction">
+                    <div class="flex box2" style=" position:relative;">
+                        <div class="titleImg">
+                        </div>
+                        <div class="titleFont">
+                            通知公告
+                        </div>
+                        <div class="topleftbtn">
+                            <el-button type="primary" plain size="mini">管理</el-button>
+                        </div>
+                    </div>
+                    <div class="flex flex_wrap topleftnew">
+                        <div class="topleftnews">
+                            <div class="topleftnewsp">养老机构消防安全检查操作手册</div>
+                            <div class="topleftnewsspan">2022-06-09</div>
+                        </div>
+                        <div class="topleftnews">
+                            <div class="topleftnewsp">养老机构消防安全检查操作手册</div>
+                            <div class="topleftnewsspan">2022-06-09</div>
+                        </div>
+                        <div class="topleftnews">
+                            <div class="topleftnewsp">养老机构消防安全检查操作手册</div>
+                            <div class="topleftnewsspan">2022-06-09</div>
+                        </div>
+
+                    </div>
+                </div>
+
+            </div>
+            <div class="flex topmid padding">
+                <div class="flex topmidbox  boxClass flex-direction">
+                    <div class="flex box2">
+                        <div class="titleImg">
+                        </div>
+                        <div class="titleFont">
+                            覆盖地区
+                        </div>
+
+                    </div>
+                    <div id="main" style="height:500px;width:100%"></div>
+                </div>
+            </div>
+            <div class="flex topright padding flex_wrap">
+                <div class="flex toprightbox  boxClass  flex_wrap">
+                    <div class="flex box2">
+                        <div class="titleImg">
+                        </div>
+                        <div class="titleFont">
+                            养老机构
+                        </div>
+
+                    </div>
+                    <div class="flex padding0 topmidzs1">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                    <div class="flex padding0 topmidzs2">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                    <div class="flex padding0 topmidzs3">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                    <div class="flex padding0 topmidzs4">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex toprightbox  boxClass  flex_wrap">
+                    <div class="flex box2">
+                        <div class="titleImg">
+                        </div>
+                        <div class="titleFont">
+                            社区养老服务机构和设施
+                        </div>
+
+                    </div>
+                    <div class="flex padding0 topmidzs1">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                    <div class="flex padding0 topmidzs2">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                    <div class="flex padding0 topmidzs3">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                    <div class="flex padding0 topmidzs4">
+                        <div class="topmidzstit">
+                            <div class="topmidzsnub">
+                                4276
+                                <span>家</span>
+                            </div>
+                            <div class="topmidzsnubzs">总数</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+        <div class="flex padding20">
+            <div class=" flex  box2 boxClass flex_wrap">
+                <div class="flex box2">
+                    <div class="titleImg">
+                    </div>
+                    <div class="titleFont">
+                        养老机构运营状态统计
+                    </div>
+
+                </div>
+                <div class="flex box2 ">
+                    <el-radio v-model="radio" label="1">正常营业</el-radio>
+                    <el-radio v-model="radio" label="2">注销</el-radio>
+                    <el-radio v-model="radio" label="3">取缔</el-radio>
+                    <el-radio v-model="radio" label="4">停业整顿</el-radio>
+                    <el-radio v-model="radio" label="5">事实处于未开展服务</el-radio>
+                    <el-radio v-model="radio" label="6">关停</el-radio>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div id="mychart" :style="myChartStyle"></div>
+            </div>
+        </div>
+        <div class="flex padding20">
+            <div class=" flex  box2 boxClass flex_wrap" style="margin-top: 20px;">
+                <div class="flex box2">
+                    <div class="titleImg">
+                    </div>
+                    <div class="titleFont">
+                        社区养老服务机构和设施运营状态统计
+                    </div>
+
+                </div>
+                <div class="flex box2 ">
+                    <el-radio v-model="radio" label="1">正常营业</el-radio>
+                    <el-radio v-model="radio" label="2">注销</el-radio>
+                    <el-radio v-model="radio" label="3">取缔</el-radio>
+                    <el-radio v-model="radio" label="4">停业整顿</el-radio>
+                    <el-radio v-model="radio" label="5">事实处于未开展服务</el-radio>
+                    <el-radio v-model="radio" label="6">关停</el-radio>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div id="sqmychart" :style="myChartStyle"></div>
+            </div>
+        </div>
+
+
+
+    </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Vue from 'vue'
+Vue.prototype.$axios = axios
+import * as echarts from "echarts";
+require("echarts/theme/macarons");
+
+export default {
+    data() {
+        return {
+            xData: ["长春市", "吉林市", "通化市", "延边朝鲜族自治州", "白城市", "辽源市", "松原市", "白山市", "四平市", "长白山保护开发区管理委员会"], //横坐标
+            datasj: [1209, 1715, 2408, 1308, 1308, 1145, 2408, 1308, 1308, 1145], //数据
+            databj: [4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000],
+            xData1: ["长春市", "吉林市", "通化市", "延边朝鲜族自治州", "白城市", "辽源市", "松原市", "白山市", "四平市", "长白山保护开发区管理委员会"], //横坐标
+            datasj1: [1209, 1715, 2408, 1308, 1308, 1145, 2408, 1308, 1308, 1145], //数据
+            databj1: [4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000],
+            myChartStyle: { width: "100%", height: "250px" },//图表样式,
+            radio: '1',
+            options: [{
+                value: '选项1',
+                label: '从小到大'
+            }, {
+                value: '选项2',
+                label: '从大到小'
+            }, {
+                value: '选项3',
+                label: '从大到小'
+            },],
+            value: ''
+
+        };
+    },
+    mounted() {
+        this.initEcharts();
+        this.initSqEcharts();
+        this.getArea();
+
+    },
+    methods: {
+        initEcharts() {
+            // 基本柱状图
+            const option = {
+                grid: {
+                    x: 60,
+                    y: 20,
+                    x2: 60,
+                    y2: 50,
+                },
+                tooltip: { trigger: 'axis' },
+                legend: {
+                    orient: 'horizontal',
+                    x: 'right',
+                    y: 'top',
+                },
+                // grid: {
+                //     top: '16%',
+                //     left: '8%',
+                //     right: '8%',
+                //     bottom: '3%',
+                //     containLabel: true
+                // },
+                xAxis: {
+                    data: this.xData,
+                    axisLabel: {
+                        // 可以设置成 0 强制显示所有标签
+                        interval: 0,
+                        textStyle: {
+                            color: " #606266",
+                            fontSize: 12,
+                        },
+                        margin: 15, //刻度标签与轴线之间的距离。
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                        },
+                    },
+                },
+                yAxis: {
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                            opacity: 0.9,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#7089ba",
+                            fontSize: 12,
+                        },
+                    },
+                },
+                series: [{
+                    type: 'line',
+                    smooth: true,
+                    symbolSize: 15,
+                    symbol: 'circle',
+                    data: this.datasj,
+                    itemStyle: {
+                        normal: {
+                            color: "#FF9C00", //拐点颜色
+                            borderColor: '#56DBD9',
+                            borderWidth: 3,
+                            lineStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                                    {
+                                        offset: 1, color: '#00B0E4' // 0% 处的颜色
+                                    },
+
+                                    {
+                                        offset: 0.1, color: '#6FF2CB' // 100% 处的颜色
+                                    }
+                                ]
+                                ),  //背景渐变色 
+
+                                width: 5,
+                            }
+                        }
+                    },
+                    areaStyle: {
+                        /*normal: { origin: 'start', color: 'rgba(57,127,255,.1)', opacity: 1 },*/
+                        normal: {
+                            color: {
+                                type: 'linear',//设置线性渐变
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: 'rgba(57,127,255,.1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: '#fff' // 100% 处的颜色
+                                }],
+                                globalCoord: false // 缺省为 false
+                            },
+
+                        }
+                    },
+
+                },
+
+
+                ]
+            };
+            const myChart = echarts.init(document.getElementById("mychart"));
+            myChart.setOption(option);
+            //随着屏幕大小调节图表
+            window.addEventListener("resize", () => {
+                myChart.resize();
+            });
+        },
+        initSqEcharts() {
+            // 基本柱状图
+            const option = {
+                grid: {
+                    x: 60,
+                    y: 20,
+                    x2: 60,
+                    y2: 50,
+                },
+                xAxis: {
+                    data: this.xData1,
+                    // 坐标轴刻度相关设置
+                    axisTick: {
+                        show: false,
+                    },
+                    // 坐标轴线的相关设置
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                        },
+                    },
+                    // 坐标轴刻度标签的相关设置
+                    axisLabel: {
+                        // 可以设置成 0 强制显示所有标签
+                        interval: 0,
+                        textStyle: {
+                            color: " #606266",
+                            fontSize: 12,
+                        },
+                        margin: 15, //刻度标签与轴线之间的距离。
+                    },
+
+                },
+                yAxis: {
+                    // 坐标轴在grid区域中的分隔线
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                            opacity: 0.9,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#7089ba",
+                            fontSize: 12,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '',
+                        type: 'pictorialBar', // 设置类型为象形柱状图
+                        symbol: 'Rect', // 图形类型矩形
+                        barWidth: '11%', // 柱图宽度
+                        barMaxWidth: '20%', // 最大宽度
+                        symbolMargin: '3', // 图形垂直间隔
+                        slient: true,
+                        itemStyle: {
+                            normal: {
+                                color: function (params) {
+                                    var colorList = ['#35B3F6', '#44A9FF', '#0E7FD6', '#DDFEA2', '#F8FA98', '#FFD279', '#F7A876', '#ED5E7A', '#F46487', '#FF828A'];
+                                    return colorList[params.dataIndex]
+                                }
+                            },
+                        },
+                        color: '#41A2F6',
+                        z: 1,
+                        symbolRepeat: true, // 图形是否重复
+                        symbolSize: [25, 8], // 图形元素的尺寸
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'top',
+                                formatter: '{c}',
+                                textStyle: {
+                                    color: '#409EFF',
+                                    fontSize: 14,
+                                },
+                            },
+                        },
+                        // data: ["132.5", "428.4", "487.2", "2983", "104", "81"], // Y轴数据
+                        data: this.datasj1,
+                        animationEasing: 'elasticOut', // 动画效果
+                    },
+                    {
+                        name: '外框',
+                        type: 'bar',
+                        barGap: '-120%', // 设置外框粗细
+                        slient: true,
+                        data: this.databj1,
+                        barWidth: 25,
+                        color: 'red',
+                        itemStyle: {
+                            normal: {
+                                // color: 'transparent', // 填充色
+                                color: 'rgba(255, 133, 141, 0.1)', // 填充色
+                                barBorderWidth: 1, // 边框宽度
+                                label: {
+                                    // 标签显示位置
+                                    show: false,
+                                    position: 'top', // insideTop 或者横向的 insideLeft
+                                },
+                            },
+                        },
+                        z: 0,
+                    },
+                ],
+
+            };
+            const myChart1 = echarts.init(document.getElementById("sqmychart"));
+            myChart1.setOption(option);
+            //随着屏幕大小调节图表
+            window.addEventListener("resize", () => {
+                myChart1.resize();
+            });
+        },
+        getArea() {
+            const myChartMap = echarts.init(document.getElementById('main'))
+            var url = "changchun.json";
+            this.$axios.get(url).then(ret => {
+                echarts.registerMap('changchun', ret.data)
+                var option = {
+                    visualMap: { // 视觉映射组件
+
+                        // type: 'continuous', 如果需要渐变色，设置type为连续
+                        show: true,
+                        // inverse: true, // 反转
+                        top: '70%',
+                        bottom: '0%',
+                        left: '2%',
+                        textStyle: {
+                            fontsize: 12
+                        },
+
+                        splitList: [ // 自定义范围
+                            { start: 0, end: 100 },
+                            { start: 100, end: 300 },
+                            { start: 300, end: 500 },
+                            { start: 500, end: 1000 },
+                            { start: 1000 }
+                        ],
+                        color: ['#2198FC', '#6EBCFE', '#A1D3FD', '#D1EAFE', '#F5FBFF',] //自定义范围的颜色
+                    },
+                    tooltip: { // 悬浮框
+                        trigger: 'item', // 触发条件
+                        backgroundColor: 'RGBA(136, 123, 135, 0.8)',
+                        formatter: '{b}<br/>占用数{c}', // 自定义显示数据
+                        textStyle: {
+                            color: '#ffffff'
+                        }
+                    },
+                    series: [
+                        {
+                            type: 'map',
+                            map: 'changchun',
+                            zoom: 1.2,
+                            top: '10%',
+                            x: 'center',
+                            label: {
+                                show: true // 显示               
+                            },
+                            itemStyle: {
+                                normal: { // 静态的时候显示的默认样式
+                                    // areaColor: '#F3D7D9', // 地图颜色
+                                    borderColor: '#fff', // 边框颜色
+                                    areaColor: 'transparent',
+                                    borderWidth: 2,
+                                    shadowColor: 'rgba(33,152,252, 0.5)',
+                                    shadowBlur: 10
+                                },
+                                emphasis: { // 鼠标移入动态的时候显示的默认样式
+                                    borderWidth: 2, // 边框宽度
+                                    areaColor: '#ffffff' // 地图颜色
+                                }
+                            },
+                            // 数据
+                            data: [
+                                {
+                                    name: '朝阳区',
+                                    value: '1202'
+                                },
+                                {
+                                    name: '榆树市',
+                                    value: '396'
+                                },
+                                {
+                                    name: '德惠市',
+                                    value: '1125'
+                                },
+                                {
+                                    name: '农安县',
+                                    value: '635'
+                                },
+                                {
+                                    name: '白山市',
+                                    value: '586'
+                                },
+                                {
+                                    name: '九台区',
+                                    value: '360'
+                                },
+                                {
+                                    name: '宽城区',
+                                    value: '231'
+                                },
+                                {
+                                    name: '绿园区',
+                                    value: '196'
+                                },
+                                {
+                                    name: '南关区',
+                                    value: '80'
+                                },
+                                {
+                                    name: '双阳区',
+                                    value: '80'
+                                }
+                                ,
+                                {
+                                    name: '公主岭市',
+                                    value: '550'
+                                },
+                                {
+                                    name: '二道区',
+                                    value: '556'
+                                }
+                            ]
+                        }
+
+                    ]
+                }
+                myChartMap.setOption(option)
+            })
+
+        }
+
+
+    }
+};
+
+
+</script>
+
+<style scoped lang="scss">
+.home {
+    background: #F5F5F5;
+    padding: 0;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex_wrap {
+    flex-wrap: wrap;
+}
+
+.flex-direction {
+    flex-direction: column;
+}
+
+.padding {
+    padding: 0px 10px
+}
+
+.padding20 {
+    padding: 0px 20px
+}
+
+.padding0 {
+    padding: 0px
+}
+
+.boxClass {
+    background: #FFFFFF;
+    border-radius: 15px;
+    /*border: #13ce66 solid 1px;*/
+}
+
+.box {
+    width: 50%;
+}
+
+.box2 {
+    width: 100%;
+}
+
+.boxMargin {
+    margin-right: 20px;
+}
+
+.titleImg {
+    width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    background: #FFFFFF;
+    border: 4px #FFBF00 solid;
+    background-size: 100% 100%;
+}
+
+.titleFont {
+    height: 17px;
+    line-height: 17px;
+    margin-left: 10px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #409EFF;
+}
+
+.topleft {
+    width: 26%;
+    height: 540px;
+}
+
+.topleftbox {
+    width: 100%;
+    height: 330px;
+    align-items: flex-start;
+}
+
+.topleftimg {
+    width: 20%;
+    margin-left: 10px;
+    height: auto;
+}
+
+.topleftimg img {
+    width: 100%;
+    height: 100%;
+    display: block;
+    margin: 0 auto;
+}
+
+.topleftwz {
+    width: 70%;
+    height: 75px;
+    background: #f8f8f8;
+    margin-left: 15px;
+    border-radius: 10px;
+    margin: 7.5px auto;
+}
+
+.topleftwz1 {
+    flex-grow: 3;
+    font-size: 18px;
+    font-weight: 400;
+    color: #606266;
+    line-height: 75px;
+}
+
+.topleftwz2 {
+    font-size: 16px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 75px;
+
+}
+
+.topleftwz3 {
+    flex-grow: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #EC3A56;
+    line-height: 20px;
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 12px;
+}
+
+.topleftgg {
+    width: 100%;
+    height: 200px;
+    margin-top: 15px;
+}
+
+.topleftbtn {
+    position: absolute;
+    right: 5px
+}
+
+.topleftnew {
+    width: 100%;
+    height: 140px
+}
+
+.topleftnews {
+    width: 100%;
+    display: flex;
+    height: 40px;
+    border-bottom: 1px dashed #DFE6EC;
+}
+
+.topleftnewsp {
+    width: 70%;
+    height: 40px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #606266;
+    line-height: 40px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.topleftnewsspan {
+    width: 30%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #999999;
+    text-align: right;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.topmid {
+    width: 42%;
+    height: 540px;
+
+}
+
+.topmidbox {
+    width: 100%;
+    height: 545px;
+    align-items: flex-start;
+}
+
+.topmidzs1 {
+    width: 48%;
+    height: 90px;
+    background: url("../../assets/images/shijihome/img_20.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 1.5%;
+}
+
+.topmidzs2 {
+    width: 48%;
+    height: 90px;
+    background: url("../../assets/images/shijihome/img_21.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 1.5%;
+}
+
+.topmidzs3 {
+    width: 48%;
+    height: 90px;
+    background: url("../../assets/images/shijihome/img_22.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 1.5%;
+}
+
+.topmidzs4 {
+    width: 48%;
+    height: 90px;
+    background: url("../../assets/images/shijihome/img_23.png") no-repeat;
+    background-size: 100% 100%;
+    margin-left: 1.5%;
+}
+
+.topmidzstit {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    padding-left: 15px;
+}
+
+.topmidzsnub {
+    font-size: 24px;
+    height: 40px;
+    font-weight: 400;
+    color: #606266;
+    line-height: 40px;
+}
+
+.topmidzsnub span {
+    font-size: 16px;
+}
+
+.topmidzsnubzs {
+    font-size: 16px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 20px;
+}
+
+
+.topright {
+    width: 32%;
+    height: 550px;
+
+}
+
+.toprightbox {
+    width: 100%;
+    height: 265px;
+    align-items: flex-start;
+}
+
+.topTjbox {
+    width: 100%;
+    height: 350px;
+    align-items: flex-start;
+}
+</style>
+

ruoyi-ui/src/views/sjhome/index.vue

@@ -0,0 +1,969 @@
+<template>
+    <div class="app-container home">
+        <div class="flex">
+            <div class="flex box boxClass boxMargin">
+                <div class="topDbimg">
+                    <div class="topDbimg1" />
+                    <p>我的待办</p>
+                </div>
+                <div class="flex topDbclass1">
+                    <div class="topDbtitle">机构备案</div>
+                    <div class="topDbp">待办:</div>
+                    <div class="topDbnub">1</div>
+                </div>
+                <div class="flex topDbclass2">
+                    <div class="topDbtitle">联合惩戒</div>
+                    <div class="topDbp">待办:</div>
+                    <div class="topDbnub">1</div>
+                </div>
+                <div class="flex topDbclass3">
+                    <div class="topDbtitle">等级评定</div>
+                    <div class="topDbp">待办:</div>
+                    <div class="topDbnub">1</div>
+                </div>
+            </div>
+            <div class="flex box boxClass">
+                <div class="topDbimg">
+                    <div class="topDbimg2" />
+                    <p>通知公告</p>
+                </div>
+                <div class="topTz">
+                    <div class="topTzp topTzx">
+                        养老机构消防安全检查操作手册
+                        <span>2022-06-09</span>
+                    </div>
+                    <div class="topTzp">
+                        养老机构消防安全检查操作手册
+                        <span>2022-06-09</span>
+                    </div>
+                </div>
+                <div class="topTzbtn">
+                    <el-button type="primary" plain>管理</el-button>
+                </div>
+
+            </div>
+
+        </div>
+        <div class="flex">
+            <div class="flex box flex_wrap padding">
+                <div class="titleImg">
+                </div>
+                <div class="titleFont">
+                    覆盖地区
+                </div>
+                <div class="flex box2 padding0">
+                    <div class="titleBorder"></div>
+                    <div class="titleBorderimg"></div>
+                </div>
+
+            </div>
+            <div class="flex box flex_wrap padding">
+                <div class="titleImg">
+                </div>
+                <div class="titleFont">
+                    社区养老服务机构和设施
+                </div>
+                <div class="flex box2 padding0">
+                    <div class="titleBorder"></div>
+                    <div class="titleBorderimg"></div>
+
+                </div>
+            </div>
+        </div>
+        <div class="flex">
+            <div class="flex box boxClass boxMargin mapBox">
+                <div id="main" style="height:400px;width:100%"></div>
+            </div>
+            <div class="flex box  mapBox padding0 flex_wrap">
+                <div class="flex mapRight mapRight_R">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg1"></div>
+                </div>
+                <div class="flex mapRight">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg2"></div>
+                </div>
+                <div class="flex mapRight mapRight_R">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg3"></div>
+                </div>
+                <div class="flex mapRight">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg4"></div>
+                </div>
+                <div class="flex box2 flex_wrap padding " style="margin-bottom:15px">
+                    <div class="titleImg">
+                    </div>
+                    <div class="titleFont">
+                        养老机构
+                    </div>
+                    <div class="flex box2 padding0">
+                        <div class="titleBorder"></div>
+                        <div class="titleBorderimg"></div>
+
+                    </div>
+                </div>
+                <div class="flex mapRight mapRight_R">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg1"></div>
+                </div>
+                <div class="flex mapRight">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg2"></div>
+                </div>
+                <div class="flex mapRight mapRight_R">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg3"></div>
+                </div>
+                <div class="flex mapRight">
+                    <div class="mapRighttit">
+                        <div class="mapRightnub">
+                            4276
+                            <span>家</span>
+                        </div>
+                        <div class="mapRightzs">总数</div>
+                    </div>
+                    <div class="mapRightimg4"></div>
+                </div>
+
+
+            </div>
+        </div>
+        <div class="flex box2 flex_wrap padding">
+            <div class="titleImg">
+            </div>
+            <div class="titleFont">
+                养老机构运营状态统计
+            </div>
+            <div class="flex box2 padding0">
+                <div class="titleBorder"></div>
+                <div class="titleBorderimg"></div>
+
+            </div>
+
+        </div>
+        <div class="flex">
+            <div class="box2 boxClass">
+                <div class="flex">
+                    <el-radio v-model="radio" label="1">正常营业</el-radio>
+                    <el-radio v-model="radio" label="2">注销</el-radio>
+                    <el-radio v-model="radio" label="3">取缔</el-radio>
+                    <el-radio v-model="radio" label="4">停业整顿</el-radio>
+                    <el-radio v-model="radio" label="5">事实处于未开展服务</el-radio>
+                    <el-radio v-model="radio" label="6">关停</el-radio>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div id="mychart" :style="myChartStyle"></div>
+            </div>
+        </div>
+        <div class="flex box2 flex_wrap padding">
+            <div class="titleImg">
+            </div>
+            <div class="titleFont">
+                社区养老服务机构和设施运营状态统计
+            </div>
+            <div class="flex box2 padding0">
+                <div class="titleBorder"></div>
+                <div class="titleBorderimg"></div>
+
+            </div>
+
+
+        </div>
+        <div class="flex">
+            <div class="box2 boxClass">
+                <div class="flex">
+                    <el-radio v-model="radio" label="1">正常营业</el-radio>
+                    <el-radio v-model="radio" label="2">注销</el-radio>
+                    <el-radio v-model="radio" label="3">取缔</el-radio>
+                    <el-radio v-model="radio" label="4">停业整顿</el-radio>
+                    <el-radio v-model="radio" label="5">事实处于未开展服务</el-radio>
+                    <el-radio v-model="radio" label="6">关停</el-radio>
+                    <el-select v-model="value" placeholder="请选择">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </div>
+                <div id="sqmychart" :style="myChartStyle"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Vue from 'vue'
+Vue.prototype.$axios = axios
+import * as echarts from "echarts";
+require("echarts/theme/macarons");
+
+export default {
+    data() {
+        return {
+            xData: ["长春市", "吉林市", "通化市", "延边朝鲜族自治州", "白城市", "辽源市", "松原市", "白山市", "四平市", "长白山保护开发区管理委员会"], //横坐标
+            datasj: [1209, 1715, 2408, 1308, 1308, 1145, 2408, 1308, 1308, 1145], //数据
+            databj: [4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000],
+            xData1: ["长春市", "吉林市", "通化市", "延边朝鲜族自治州", "白城市", "辽源市", "松原市", "白山市", "四平市", "长白山保护开发区管理委员会"], //横坐标
+            datasj1: [1209, 1715, 2408, 1308, 1308, 1145, 2408, 1308, 1308, 1145], //数据
+            databj1: [4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000, 4000],
+            myChartStyle: { width: "100%", height: "250px" },//图表样式,
+            radio: '1',
+            options: [{
+                value: '选项1',
+                label: '从小到大'
+            }, {
+                value: '选项2',
+                label: '从大到小'
+            }, {
+                value: '选项3',
+                label: '从大到小'
+            },],
+            value: ''
+        };
+    },
+    mounted() {
+        this.initEcharts();
+        this.initSqEcharts();
+        this.getArea();
+    },
+    methods: {
+        initEcharts() {
+            // 基本柱状图
+            const option = {
+                grid: {
+                    x: 60,
+                    y: 20,
+                    x2: 60,
+                    y2: 50,
+                },
+                xAxis: {
+                    data: this.xData,
+                    // 坐标轴刻度相关设置
+                    axisTick: {
+                        show: false,
+                    },
+                    // 坐标轴线的相关设置
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                        },
+                    },
+                    // 坐标轴刻度标签的相关设置
+                    axisLabel: {
+                        // 可以设置成 0 强制显示所有标签
+                        interval: 0,
+                        textStyle: {
+                            color: " #606266",
+                            fontSize: 12,
+                        },
+                        margin: 15, //刻度标签与轴线之间的距离。
+                    },
+                },
+                yAxis: {
+                    // 坐标轴在grid区域中的分隔线
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                            opacity: 0.9,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#7089ba",
+                            fontSize: 12,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        //三个最低下的圆片
+                        // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
+                        name: "",
+                        type: "pictorialBar",
+                        symbolSize: [20, 10],
+                        symbolOffset: [0, 5],
+                        z: 12,
+                        // 图形样式
+                        itemStyle: {
+                            opacity: 1,
+                            normal: {
+                                show: true,
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: "#1E80E4",//0%处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#16BBED",//100%处的颜色
+                                    },
+                                ]),
+                                barBorderRadius: 0,
+                                borderWidth: 0,
+                            },
+                        },
+                        data: this.datasj
+                    },
+                    //下半截柱状图
+                    {
+                        name: "2020",
+                        type: "bar",
+                        barWidth: 20,
+                        barGap: "100%",
+                        itemStyle: {
+                            //lenged文本
+                            opacity: 0.1,
+                            normal: {
+                                show: true,
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                                    {
+                                        offset: 0,
+                                        color: "#51b1f9",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#2f6ef6",
+                                    },
+                                ]),
+                                barBorderRadius: 0,
+                                borderWidth: 0,
+                            },
+                        },
+                        label: {
+                            show: true,
+                            position: "top",
+                            distance: 10,
+                            color: " #1E78E1",
+                        },
+
+                        data: this.datasj,
+                    },
+                    {
+                        name: "", //头部
+                        type: "pictorialBar",
+                        symbolSize: [20, 10],
+                        symbolOffset: [0, -5],
+                        z: 12,
+                        symbolPosition: "end",
+                        itemStyle: {
+                            color: "#d9e9ff",
+                            opacity: 0.9,
+                        },
+                        data: this.databj,
+                    },
+
+                    {
+                        name: "",
+                        type: "pictorialBar",
+                        // 图形的大小
+                        symbolSize: [20, 10],
+                        // 图形相对于原本位置的偏移
+                        symbolOffset: [0, -5],
+                        z: 12,
+                        itemStyle: {
+                            opacity: 1,
+                            normal: {
+                                show: true,
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: "#16BBED",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#16BBED",
+                                    },
+                                ]),
+                                barBorderRadius: 0,
+                                borderWidth: 0,
+                            },
+                        },
+                        // 图形的定位位置
+                        symbolPosition: "end",
+                        data: this.datasj,
+                    },
+
+                    {
+                        name: "2019",
+                        type: "bar",
+                        barWidth: 20,
+                        // 如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
+                        barGap: "-100%",
+                        z: 0,
+                        itemStyle: {
+                            color: "#1BDFFC",
+                            opacity: 0.1,
+                        },
+                        data: this.databj,
+                    },
+                ]
+            };
+            const myChart = echarts.init(document.getElementById("mychart"));
+            myChart.setOption(option);
+            //随着屏幕大小调节图表
+            window.addEventListener("resize", () => {
+                myChart.resize();
+            });
+        },
+        initSqEcharts() {
+            // 基本柱状图
+            const option = {
+                grid: {
+                    x: 60,
+                    y: 20,
+                    x2: 60,
+                    y2: 50,
+                },
+                xAxis: {
+                    data: this.xData1,
+                    // 坐标轴刻度相关设置
+                    axisTick: {
+                        show: false,
+                    },
+                    // 坐标轴线的相关设置
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                        },
+                    },
+                    // 坐标轴刻度标签的相关设置
+                    axisLabel: {
+                        // 可以设置成 0 强制显示所有标签
+                        interval: 0,
+                        textStyle: {
+                            color: " #606266",
+                            fontSize: 12,
+                        },
+                        margin: 15, //刻度标签与轴线之间的距离。
+                    },
+                },
+                yAxis: {
+                    // 坐标轴在grid区域中的分隔线
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "#eeeeee",
+                            opacity: 0.9,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#7089ba",
+                            fontSize: 12,
+                        },
+                    },
+                },
+                series: [
+
+                    //下半截柱状图
+                    {
+                        name: 'hill',
+                        type: 'pictorialBar',
+                        //位置偏移
+                        barCategoryGap: '-10%',
+                        //图形宽度
+                        barWidth: 80,
+                        //图形形状
+                        symbol: 'path://M150 50 L130 130 L170 130  Z',
+                        z: 10,
+
+                        itemStyle: {
+                            //lenged文本
+                            normal: {
+                                show: true,
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    {
+                                        offset: 0,
+                                        color: "#91D154",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(150,211,93,0.0)'
+                                    },
+                                ]),
+                                barBorderRadius: 0,
+                                borderWidth: 0,
+                            },
+                        },
+                        label: {
+                            show: true,
+                            position: "top",
+                            distance: 10,
+                            color: " #62B337",
+                        },
+
+                        data: this.datasj1,
+                    },
+                    {
+                        name: "2019",
+                        type: "bar",
+                        barWidth: 80,
+                        // 如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。
+                        barGap: "-100%",
+                        z: 0,
+                        itemStyle: {
+                            color: "#59AAD9",
+                            opacity: 0.1,
+                        },
+                        data: this.databj1,
+                    },
+                ]
+            };
+            const myChart1 = echarts.init(document.getElementById("sqmychart"));
+            myChart1.setOption(option);
+            //随着屏幕大小调节图表
+            window.addEventListener("resize", () => {
+                myChart1.resize();
+            });
+        },
+        getArea() {
+            const myChartMap = echarts.init(document.getElementById('main'))
+            var url = "jilin.json";
+            this.$axios.get(url).then(ret => {
+                echarts.registerMap('jilin', ret.data)
+                var option = {
+                    visualMap: { // 视觉映射组件
+
+                        // type: 'continuous', 如果需要渐变色，设置type为连续
+                        show: true,
+                        // inverse: true, // 反转
+                        top: '70%',
+                        bottom: '0%',
+                        left: '2%',
+                        textStyle: {
+                            fontsize: 12
+                        },
+
+                        splitList: [ // 自定义范围
+                            { start: 0, end: 100 },
+                            { start: 100, end: 300 },
+                            { start: 300, end: 500 },
+                            { start: 500, end: 1000 },
+                            { start: 1000 }
+                        ],
+                        color: ['#FBC00A', '#FACF4B', '#FBE08E', '#FEF3D0', '#FDFAEF',] //自定义范围的颜色
+                    },
+                    tooltip: { // 悬浮框
+                        trigger: 'item', // 触发条件
+                        backgroundColor: 'RGBA(136, 123, 135, 0.8)',
+                        formatter: '{b}<br/>占用数{c}', // 自定义显示数据
+                        textStyle: {
+                            color: '#ffffff'
+                        }
+                    },
+                    series: [
+                        {
+                            type: 'map',
+                            map: 'jilin',
+                            zoom: 1.2,
+                            top: '10%',
+                            x: 'center',
+                            label: {
+                                show: true // 显示               
+                            },
+                            itemStyle: {
+                                normal: { // 静态的时候显示的默认样式
+                                    // areaColor: '#F3D7D9', // 地图颜色
+                                    borderColor: '#fff', // 边框颜色
+                                    areaColor: 'transparent',
+                                    borderWidth: 2,
+                                    shadowColor: 'rgba(251,192,10, 0.5)',
+                                    shadowBlur: 10
+                                },
+                                emphasis: { // 鼠标移入动态的时候显示的默认样式
+                                    borderWidth: 2, // 边框宽度
+                                    areaColor: '#ffffff' // 地图颜色
+                                }
+                            },
+                            // 数据
+                            data: [
+                                {
+                                    name: '长春市',
+                                    value: '1202'
+                                },
+                                {
+                                    name: '吉林市',
+                                    value: '396'
+                                },
+                                {
+                                    name: '通化市',
+                                    value: '1125'
+                                },
+                                {
+                                    name: '四平市',
+                                    value: '635'
+                                },
+                                {
+                                    name: '白山市',
+                                    value: '586'
+                                },
+                                {
+                                    name: '辽源市',
+                                    value: '360'
+                                },
+                                {
+                                    name: '白城市',
+                                    value: '231'
+                                },
+                                {
+                                    name: '延边朝鲜族自治州',
+                                    value: '196'
+                                },
+                                {
+                                    name: '松原市',
+                                    value: '80'
+                                }
+                            ]
+                        }
+
+                    ]
+                }
+                myChartMap.setOption(option)
+            })
+
+        }
+    }
+};
+
+
+</script>
+
+<style scoped lang="scss">
+.home {
+    background: #F5F5F5;
+    padding: 0;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex_wrap {
+    flex-wrap: wrap;
+}
+
+.padding {
+    padding: 0px 10px
+}
+
+.padding0 {
+    padding: 0px
+}
+
+.boxClass {
+    background: #FFFFFF;
+    border-radius: 15px;
+    /*border: #13ce66 solid 1px;*/
+}
+
+.box {
+    width: 50%;
+}
+
+.box2 {
+    width: 100%;
+}
+
+.boxMargin {
+    margin-right: 20px;
+}
+
+.topDbimg {
+    display: flex;
+    flex-direction: column;
+    width: 18%;
+    height: 100px;
+    margin: 1%;
+    border-right: 1px #DFE6EC solid;
+}
+
+.topDbimg1 {
+    width: 4.5vw;
+    height: 4.5vw;
+    margin: 0 auto;
+    background: url("../../assets/images/sjhome/img_01.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+.topDbimg2 {
+    width: 4.5vw;
+    height: 4.5vw;
+    margin: 0 auto;
+    background: url("../../assets/images/sjhome/img_02.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+
+.topDbimg p {
+    text-align: center;
+    font-size: 14px;
+    line-height: 30px;
+    font-weight: 500;
+    color: #606266;
+    margin: 0;
+}
+
+.topDbclass1 {
+    flex-wrap: wrap;
+    width: 26%;
+    height: 100px;
+    margin: 1%;
+    background: url("../../assets/images/sjhome/img_03.png") no-repeat;
+    background-position: 90% 90%;
+    background-color: #fbfbfb;
+    border-radius: 10px;
+    padding: 10px 20px;
+}
+
+.topDbclass2 {
+    flex-wrap: wrap;
+    width: 26%;
+    height: 100px;
+    margin: 1%;
+    background: url("../../assets/images/sjhome/img_04.png") no-repeat;
+    background-color: #fbfbfb;
+    background-position: 90% 90%;
+    border-radius: 10px;
+    padding: 10px 20px;
+}
+
+.topDbclass3 {
+    flex-wrap: wrap;
+    width: 26%;
+    height: 100px;
+    margin: 1%;
+    background: url("../../assets/images/sjhome/img_05.png") no-repeat;
+    background-color: #fbfbfb;
+    background-position: 90% 90%;
+    border-radius: 10px;
+    padding: 10px 20px;
+}
+
+.topDbtitle {
+    width: 100%;
+    font-size: 18px;
+    font-weight: 400;
+    color: #606266;
+    line-height: 45px;
+}
+
+.topDbp {
+    font-size: 16px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40px;
+    margin-right: 10px;
+}
+
+.topDbnub {
+    display: block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #EC3A56;
+    line-height: 20px;
+    text-align: center;
+    color: #FFFFFF;
+    font-size: 12px;
+}
+
+.topTz {
+    width: 60%;
+    height: 100px;
+    padding: 0px 10px;
+}
+
+.topTzp {
+    line-height: 55px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #606266;
+}
+
+.topTzp span {
+    font-size: 16px;
+    font-weight: 400;
+    color: #999999;
+    float: right;
+}
+
+.topTzx {
+
+    border-bottom: 1px dashed #DFE6EC;
+}
+
+.topTzbtn {
+    width: 18%;
+    height: 100px;
+    margin: 1%;
+    border-left: 1px #DFE6EC solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.titleImg {
+    width: 24px;
+    height: 22px;
+    background: url("../../assets/images/sjhome/img_10.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+.titleFont {
+    height: 17px;
+    line-height: 17px;
+    margin-left: 10px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #409EFF;
+}
+
+.titleBorder {
+    width: 100%;
+    height: 5px;
+    border-bottom: 1px #409EFF solid;
+}
+
+.titleBorderimg {
+    width: 40px;
+    height: 10px;
+    background: url("../../assets/images/sjhome/img_11.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+.mapBox {
+    height: 460px;
+}
+
+.mapRight {
+    width: 48%;
+    height: 95px;
+    background: #FFFFFF;
+    border-radius: 15px;
+    margin-bottom: 10px;
+}
+
+.mapRight_R {
+    margin-right: 3%;
+}
+
+.mapRighttit {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    padding-left: 15px;
+}
+
+.mapRightimg1 {
+    width: 30%;
+    height: 100px;
+    background: url("../../assets/images/sjhome/img_06.png") no-repeat;
+    background-size: 60%;
+    background-position: 50% 50%;
+}
+
+.mapRightimg2 {
+    width: 30%;
+    height: 100px;
+    background: url("../../assets/images/sjhome/img_07.png") no-repeat;
+    background-size: 60%;
+    background-position: 50% 50%;
+}
+
+.mapRightimg3 {
+    width: 30%;
+    height: 100px;
+    background: url("../../assets/images/sjhome/img_08.png") no-repeat;
+    background-size: 60%;
+    background-position: 50% 50%;
+}
+
+.mapRightimg4 {
+    width: 30%;
+    height: 100px;
+    background: url("../../assets/images/sjhome/img_09.png") no-repeat;
+    background-size: 60%;
+    background-position: 50% 50%;
+}
+
+.mapRightnub {
+    font-size: 24px;
+    height: 40px;
+    font-weight: 400;
+    color: #606266;
+    line-height: 50px;
+}
+
+.mapRightnub span {
+    font-size: 16px;
+}
+
+.mapRightzs {
+    font-size: 16px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 30px;
+}
+</style>
+