<template>
    <div style="padding: 10px" class="bg">
        <div class="big-title dis" style="justify-content: space-around">
            <div class="titles dis" style="width: 40%">
                <dv-decoration-9 style="width:30px;height:30px;"></dv-decoration-9>
                <div class="cursor-pointer">
                    <dv-button color="#1E9ADE" :fontColor="'#ffffff'" @click="dianji(1)" border="Border4">商品房销售</dv-button>
                </div>
                <div class="cursor-pointer" style="margin-left: 10px">
                    <dv-button :fontColor="'#ffffff'" @click="dianji(2)" border="Border4">商品房</dv-button>
                </div>
                <div class="cursor-pointer" style="margin-left: 10px">
                    <dv-button :fontColor="'#ffffff'" @click="dianji(3)" border="Border4">预警监测</dv-button>
                </div>
            </div>
            <div style="width: 20%">
                潍坊市房地产市场监控平台
                <dv-decoration5 :dur="2" style="width:100%;height:40px;" />
            </div>
            <div style="width: 40%;color:#ffffff;text-align: right;font-size: 16px;padding: 7px 10px 0px 0px">
                <div style="text-shadow: 0 0 20px #ffffff;">
                    {{state.daysins}}
                </div>
            </div>
        </div>
        <el-row :gutter="20">
            <el-col :span="7">
                <dv-border-box8 style="height: 23vh;" :color="state.datav3"  dur='10'>
                    <div class="block">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                累计销售情况
                            </div>
                        </div>
                        <div class="dis" style="justify-content: space-between;align-items: center">
                            <div style="width: 30%;border-right: 1px solid #385c6d">
                                <div class="top-block">
                                    <div class="top" style="margin-top: 10px">
                                        {{state.letTop.depletionCycle || '0'}}
                                        <span>月</span>
                                    </div>
                                    <div class="buttom">住宅去化周期</div>
                                </div>
                                <div class="top-block">
                                    <div class="top">
                                        {{proxy?.$method.numFormat(state.letTop.resInventoryTotalNum || '0')}}
                                        <span>套</span>
                                    </div>
                                    <div class="buttom">住宅累计库存</div>
                                </div>
                            </div>
                            <div class="dis" style="width: 70%;">
                                <div class="top-block xm">
                                    <div class="top">
                                        {{proxy?.$method.numFormat(state.letTop.saleTotalArea || '0',1)}}
                                        <span>万㎡</span>
                                    </div>
                                    <div class="buttom">销售总面积</div>
                                </div>
                                <div class="top-block xm">
                                    <div class="top">
                                        {{proxy?.$method.numFormat(state.letTop.resSaleTotalArea || '0',1)}}
                                        <span>万㎡</span>
                                    </div>
                                    <div class="buttom">住宅销售总面积</div>
                                </div>

                                <div class="top-block xm">
                                    <div class="top">
                                        {{proxy?.$method.numFormat(state.letTop.saleTotalNum || '0')}}
                                        <span>套</span>
                                    </div>
                                    <div class="buttom">销售总套数</div>
                                </div>
                                <div class="top-block xm">
                                    <div class="top">
                                        {{proxy?.$method.numFormat(state.letTop.resSaleTotalNum || '0')}}
                                        <span>套</span>
                                    </div>
                                    <div class="buttom">住宅销售总套数</div>
                                </div>

                            </div>
                        </div>
                    </div>
                </dv-border-box8>

                <dv-border-box8 style="height: 32vh;" :color="state.datav3"  dur='10'>
                <div class="block" style="margin-top: 10px" v-if="state.determine">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            最近8年住宅销售面积
                        </div>
                    </div>
                    <div ref="homeEachrt4"  style="width: 100%;height: 25vh;margin-top: 10px"></div>
                </div>
                </dv-border-box8>
                <dv-border-box8 style="height: 32vh;" :color="state.datav3"  dur='10'>
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                最近8年住宅销售套数
                            </div>
                        </div>
                        <div ref="homeEachrt1" v-if="state.determine" style="width: 100%;height: 22vh;margin-top: 10px"></div>
                    </div>
                </dv-border-box8>
            </el-col>
            <el-col :span="10">
                <dv-border-box8 style="height: 14vh;" :color="state.datav3"  dur='10'>
                    <div class="block dis" style="justify-content: space-around">
                        <div class="cen-block">
                            <div class="top">
                                {{proxy?.$method.numFormat(state.salePrice.saleArea || '0')}}
                                <span>㎡</span>
                            </div>
                            <div class="buttom">{{state.salePrice.yearMonth + '月 '}}销售面积</div>
                            <div class="dis tbyangshi" style="justify-content: space-around;">
                                <div>同比：
                                    <span>{{state.salePrice.saleAreaYoy}}%</span>
                                </div>
                                <div>环比：
                                    <span>{{state.salePrice.saleAreaQoq}}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="cen-block">
                            <div class="top">{{proxy?.$method.numFormat(state.salePrice.saleNum || '0')}}<span>套</span></div>
                            <div class="buttom">{{state.salePrice.yearMonth + '月 '}}销售套数</div>
                            <div class="dis tbyangshi" style="justify-content: space-around;">
                                <div>同比：
                                    <span>{{state.salePrice.saleNumYoy}}%</span>
                                </div>
                                <div>环比：
                                    <span>{{state.salePrice.saleNumQoq}}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="cen-block">
                            <div class="top">{{proxy?.$method.numFormat(state.salePrice.unitPrice || '0')}}<span>元/㎡</span></div>
                            <div class="buttom">{{state.salePrice.yearMonth + '月 '}}销售均价</div>
                            <div class="dis tbyangshi" style="justify-content: space-around;">
                                <div>同比：
                                    <span>{{state.salePrice.unitPriceYoy}}%</span>
                                </div>
                                <div>环比：
                                    <span>{{state.salePrice.unitPriceQoq}}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </dv-border-box8>
                <div class="title" style="margin-top: 10px">
                    <div class="dis">
                        <div class="selent">

                        </div>
                    </div>
                    <div class="flex" style="align-items: center">
                        <div class="danxuan">
                            当前城市：<span style="color: #2DE6E1"></span>
                            <el-select  class="danxuan"  style="width: 100px" v-model="state.select"  placeholder="选择城市" size="small" @change="selectChange">
                                <el-option
                                        label="潍坊市"
                                        value=""
                                ></el-option>
                                <el-option
                                        v-for="(item,index) in state.city"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                />
                            </el-select>
                        </div>
                    </div>
                </div>

                <dv-decoration-12 :color="['#133273','','#00ff2c']" style="width:100%;height:45vh;">
                    <div id="map_view" style="width: 100%;height: 45vh;z-index: 999"></div>
                </dv-decoration-12>

                <dv-border-box8 style="height: 25vh;" :color="state.datav3"  dur='10'>
                <div class="block" style="margin-top: 10px;">
                    <div class="title">
                        <div>
                            <i class="iconfont icon-data-view"></i>
                            月销售统计
                        </div>
                    </div>
                    <vue3-seamless-scroll class="seamlessCss3" :list="tableData" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
                        <table class="table">
                            <tr>
                                <td>日期</td>
                                <td>销售套数</td>
                                <td>环比</td>
                                <td>同比</td>
                                <td>销售面积(㎡)</td>
                                <td>环比</td>
                                <td>同比</td>
                                <td>销售单价(元/㎡)</td>
                                <td>环比</td>
                                <td>同比</td>
                            </tr>
                            <tr v-for="(item,index) in state.salemonth" :key="index">
                                <td>{{item.yearMonth}}</td>
                                <td>{{item.saleNum}}</td>
                                <td>{{item.saleNumQoq}}</td>
                                <td>{{item.saleNumYoy}}</td>
                                <td>
                                    {{proxy?.$method.numFormat(item.saleArea || '0')}}
                                </td>
                                <td>{{item.saleAreaQoq}}</td>
                                <td>{{item.saleAreaYoy}}</td>
                                <td>{{item.unitPrice}}</td>
                                <td>{{item.unitPriceQoq}}</td>
                                <td>{{item.unitPriceYoy}}</td>

                            </tr>
                        </table>
                    </vue3-seamless-scroll>
                </div>
                </dv-border-box8>
            </el-col>
            <el-col :span="7">

                <dv-border-box8  :color="state.datav3"  dur='10' style="height: 28vh;">
                    <div class="block">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                最近8年住宅销售均价
                            </div>
                        </div>
                        <div ref="homeEachrt2" v-if="state.determine" style="width: 100%;height: 21vh;margin-top: 10px"></div>
                    </div>
                </dv-border-box8>

                <dv-border-box8 style="height: 27vh;" :color="state.datav3"  dur='10'>
                    <div class="block" style="margin-top: 10px"  v-if="state.determine">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                购房人年龄分析
                            </div>
                            <div class="danxuan">
                                <el-date-picker
                                    style="width: 100px;"
                                    v-model="state.picker"
                                    type="year"
                                    size="small"
                                    format="YYYY"
                                    value-format="YYYY"
                                    placeholder="选择年"
                                    @change="pickerchange"
                                />
                            </div>
                        </div>
                        <div ref="homeEachrt3" style="width: 100%;height: 18vh;margin-top: 10px"></div>
                    </div>
                </dv-border-box8>
                <dv-border-box8 style="height: 32vh;" :color="state.datav3"  dur='10'>
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                购房人区域分析
                            </div>
                            <div class="danxuan">
                                <el-date-picker
                                        style="width: 100px"
                                        v-model="state.picker1"
                                        type="year"
                                        format="YYYY"
                                        value-format="YYYY"
                                        size="small"
                                        placeholder="选择年"
                                        @change="pickerchange"
                                />
                            </div>
                        </div>
                        <div v-if="state.determine">
                            <div ref="homeEachrt5"  style="width: 100%;height: 22vh;margin-top: 10px"></div>
                        </div>
                    </div>
                </dv-border-box8>

            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
    import {markRaw, onMounted, reactive, ref, defineComponent, defineAsyncComponent} from 'vue';
    import * as echarts from "echarts";
    import { useCurrentInstance } from '/@/method/get'
    const { proxy } = useCurrentInstance()
    import { useRouter } from "vue-router";
    let router = useRouter();
    import { NextLoading } from "/@/utils/loading";
    import "echarts-gl"; //3D地图插件
    import weifang from './weifang.json'
    const weifangMap:any = weifang
    import { fanChart1,fanChart2,fanChart3,fanChart4,fanChart5 } from "/@/views/LargeScreen/echart"
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
    import { dsjApi } from "/@/api/dsj";
    import { entApi } from "/@/api/ent";
    defineComponent({
        components: {
            Vue3SeamlessScroll,
        }
    })
    const homeEachrt1 = ref();//柱状图
    const homeEachrt2 = ref();//折线图
    const homeEachrt3 = ref();//折线图
    const homeEachrt4 = ref();
    const homeEachrt5 = ref();

    const tableData: any = ref([])
    const getData = () => {
        for (let i = 0; i < 40; i++) {
            tableData.value.push({
                type: `III级${i + 1}`,
                name: `寿光市全市范围内商品住宅网签备案成交均价连续三个月环比涨幅超过3%${i + 1}`,
                content: `多情键客无情键${i + 1}`
            })
        }
    }
    const state = reactive<any>({
        county:"潍坊市" as any,//区县
        radio2:"1",
        select:"",
        datav3:[],// '#1764B1','#1764B1'
        picker:"",
        picker1:"",
        daysins:"",
        determine:true,
        city:[] as any,
        global: {//图表
            homeChart1: null,
            homeChart2: null,
            homeChart3: null,
            homeChart4: null,
            homeChart5: null,
        },
        letTop:"",
        //图表数据
        saleArea:{//销售面积
            xAxis:[],//X轴
            saleAmount:[],//销售面积
        } as any,
        saleNumber:{//销售套数
            xAxis:[],//X轴
            saleAmount:[],//销售套数
        }as any,
        averagePrice:{//销售套数
            xAxis:[],//X轴
            saleAmount:[],//销售套数
        }as any,
        salePrice:{} as any,
        buyerarea:[] as any,//购房人区域
        saleage:[] as any,//购房人年龄
        salemonth:[] as any,

    });

    const axiosApi = async () => {

        state.saleArea={
            xAxis:[],//X轴
            saleAmount:[],//销售面积
        },
        state.saleNumber={
            xAxis:[],//X轴
            saleAmount:[],//销售面积
        },
        state.averagePrice={
            xAxis:[],//X轴
            saleAmount:[],//销售面积
        },
        state.salePrice={},
        state.buyerarea=[],//购房人区域
        state.saleage=[],//购房人年龄
        state.salemonth=[],

        state.determine = false


        let itemQx = await entApi().typeApi(); //区县数据
        state.city = itemQx.data;

        let item1 = await dsjApi().searchApi({
            district:state.select,//区县编码
        })
        state.letTop = item1.data

        let item2 = await dsjApi().saApi({
            district:state.select,//区县编码
        })
        item2.data.forEach((val:any,index:any)=>{
            if (index > 2){
                state.saleArea.xAxis.push(val.yearMonth)//面积
                state.saleArea.saleAmount.push(val.saleArea)
                state.saleNumber.xAxis.push(val.yearMonth)//套数
                state.saleNumber.saleAmount.push(val.saleNum)
                state.averagePrice.xAxis.push(val.yearMonth)//均价
                state.averagePrice.saleAmount.push(val.unitPrice)
            }
        })

        let item3 = await dsjApi().saApi1({
            district:state.select,//区县编码
        })
        state.salePrice = item3.data

        let item4 = await dsjApi().saApi2({
            district:state.select,//区县编码
            year:state.picker1,
        })
        let sum = 0
        let sum2 = 0
        let sum3 = 0
        let sum4 = 0
        let a
        let b
        let c
        let d
        item4.data.series.forEach((val:any,index:any)=>{
            sum += val.districtNum
            a =  {
                value: sum,
                name: '本区县'
            }
            sum2 += val.otherCityNum
            b =  {
                value: sum2,
                name: '本省其他'
            }
            sum3 += val.otherDistrictNum
            c =  {
                value: sum3,
                name: '本市其他'
            }
            sum4 += val.otherProvinceNum
            d =  {
                value: sum4,
                name: '外省'
            }
        })
        state.buyerarea.push(a,b,c,d)

        let item5 = await dsjApi().saApi3({//购房人年龄分析
            district:state.select,//区县编码
            year:state.picker,
        })
        item5.data.series.forEach((val)=>{
            let cons =  {
                value: val.num,
                name: val.name
            }
            state.saleage.push(cons)
        })

        let item6 = await dsjApi().saApi4({
            district:state.select,//区县编码
        })
        state.salemonth = item6.data

        state.determine = true

        setTimeout(() => {
            echartApi()
        }, 500);
    }
    const pickerchange = (val:any) =>{//选择器
        axiosApi()
    }
    const selectChange = (val:any) =>{//选择器
        axiosApi()
    }
    const dianji = (val:any) =>{//选择器
        if(val == 1){
            router.push({
                path:'/LargeScreen',
            });
        }else if(val == 2){
            router.push({
                path:'/LargeScreen/housing',
            });
        }else if(val == 3){
            router.push({
                path:'/LargeScreen/warning',
            });
        }else {

        }
    }

    const echartApi = () => {

        state.global.homeChart1 = markRaw(echarts.init(homeEachrt1.value));//最近10年住宅销售套数
        var option = fanChart1(state.saleNumber,'销售套数');
        state.global.homeChart1.setOption(option,false);

        state.global.homeChart2 = markRaw(echarts.init(homeEachrt2.value));//最近10年住宅销售均价
        var option2 = fanChart2(state.averagePrice,'销售均价');
        state.global.homeChart2.setOption(option2,true);

        state.global.homeChart3 = markRaw(echarts.init(homeEachrt3.value));//购房人年龄分析
        var option3 = fanChart5(state.saleage);
        state.global.homeChart3.setOption(option3,true);

        state.global.homeChart4 = markRaw(echarts.init(homeEachrt4.value));//最近10年住宅销售面积
        var option4 = fanChart4(state.saleArea,'销售面积');
        state.global.homeChart4.setOption(option4,true);

        state.global.homeChart5 = markRaw(echarts.init(homeEachrt5.value));//购房人区域分析
        var option5 = fanChart5(state.buyerarea);
        state.global.homeChart5.setOption(option5,true);
    }
    // 地图
    const getCodeApi = () => {
        const mapOption = {
            animation: true,
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            /*visualMap: {
                min: 5000,
                max: 50000,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                },
                textStyle: {
                    color: '#ffffff'
                },
            },*/
            series: [
                //配置数据的显示
                {
                    map: 'weifang',
                    type: "map",  //类型map
                    roam: true,// 允许缩放
                    zoom:1.2,
                    label: {//未点击字体颜色
                        show: true,
                        position: "top",
                        fontSize: 12,
                        color:'#ffffff',
                    },
                    select: {//点击后
                        itemStyle: {
                            borderColor: '#0692a4',
                            borderWidth: '1',
                            color:  "#142957",//设置地图点击后的颜色
                            fontcolor:"#ffffff"
                        },
                        label: {
                            fontSize: 12,
                            color:'#ffffff',
                        },
                    },
                    itemStyle: {//放入颜色
                        normal: {
                            areaColor: "#142957",
                            borderColor: "#0692a4",
                        },
                        emphasis: {
                            borderWidth:1,
                            borderColor:'#0b1c2d',
                            areaColor: '#0b1c2d',
                            label: {
                                color: '#fff'
                            }
                        },
                    },

                    /*data:[
                        {name: "寿光市",value: 60000},
                        {name: "青州市",value: 10515},
                        {name: "临朐县",value: 20211},
                        {name: "昌乐县",value: 30201},
                        {name: "寒亭区",value: 8000},
                        {name: "昌邑市",value: 3201},
                        {name: "潍城区",value: 15410},
                        {name: "奎文区",value: 17801},
                        {name: "坊子区",value: 34240},
                        {name: "安丘市",value: 44512},
                        {name: "高密市",value: 34841},
                        {name: "诸城市",value: 15451},
                    ],*/
                },
            ],
        }
        const mapChart = echarts.init(document.getElementById('map_view'));
        echarts.registerMap('weifang', weifangMap);
        mapChart.setOption(mapOption);
        mapChart.on('click', function (params:any) {
            state.city.forEach((item:any)=>{
                if (item.label == params.name){
                    state.select = item.value
                }
            })
            axiosApi()
        });
    };
    onMounted(() => {
        NextLoading.done();
        state.picker = new Date().getFullYear().toString()
        state.picker1 = new Date().getFullYear().toString()

        setInterval(() =>{
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
            const day = currentDate.getDate();
            const currentTime = new Date().toLocaleTimeString();
            state.daysins = year + "-" + month + "-" + day + "-" + currentTime
        },1000);

        axiosApi()
        setTimeout(() => {
            getCodeApi()
            getData()
        }, 500);
    })

</script>

<style scoped lang="scss">
    .ys-block{
        width: 33%;
        margin-top: 40px;
        text-align: center;
        .ys-top{
            font-size: 24px;
            color:#00ffe9;
            font-weight: bold;
        }
        .ys-but{
            margin-top: 10px;
        }
    }
    .seamlessCss1{
        height: 5vh;
        overflow: hidden;
    }
    .seamlessCss{
        height: 16vh;
        overflow: hidden;
        margin-top: 20px;
    }
    .seamlessCss3{
        height: 15.5vh;
        overflow: hidden;
        margin-top: 20px;
    }
    .imgs{
        margin-top: 10px;
        width: 90px;
        height: 70px;
        margin-right: 20px;
    }
    .tbyangshi{
        margin-top: 7px;
        span{
            color: #2DDBD1;
        }
    }
    .text-block{
        margin-top: 10px;
        .text{
            font-size: 15px;
            font-weight: bold;
        }
        .hs{
            color:#FDEE7A;
        }
        .ls{
            color:#00ffe9;
        }
        .moth{
            .top{
                font-size: 12px;
            }
            .bottom{
                font-size: 24px;
                span{
                    font-size: 12px;
                }
            }
        }
        .mosy{
            font-size: 12px;
            span{
                margin-right: 7px;
                font-size: 24px;
            }
        }
    }
    /*.text-block{
        margin-top: 10px;
        .text{
            font-size: 15px;
            font-weight: bold;
            margin-top: 10px;
        }
        .hs{
            color:#FDEE7A;
        }
        .ls{
            color:#00ffe9;
        }
        .moth{
            .top{
                font-size: 12px;
                margin-top: 7px;
            }
            .bottom{
                margin-top: 7px;
                font-size: 24px;
                span{
                    font-size: 12px;
                }
            }
        }
        .mosy{
            font-size: 12px;
            margin-top: 15px;
            span{
                margin-right: 7px;
                font-size: 24px;
            }
        }
    }*/
    .table{
        margin-top: 10px;
        width: 100%;
        cellpadding:0;
        border-collapse:collapse;
        tr{
            td{
                padding: 7px 3px;
                text-align: center;
            }
            &:first-child{
                /*background-color: rgba(239, 239, 239, 0.52);*/
                color: #00ffe9;
            }
        }

    }
    .selent{
        ::v-deep .el-input__wrapper{
            background-color: #e7e7e7;
        }
    }
    .danxuan {
        :deep .el-input__wrapper{
            background-color: rgb(17, 184, 227,0.1);
            border: 1px solid #009778;
            color: #ffffff;
            &:hover{
                color: #ffffff;
            }
        }
        :deep .el-popper{
            background-color: red;
        }
        :deep .el-input__inner{
            color: #ffffff;
        }
    }
    .danxuans {
        :deep .el-radio-button__original-radio:checked+.el-radio-button__inner{
            background-color: #219783;
            border: 1px solid #009778;
            &:hover{
                color: #ffffff;
            }
        }
        :deep .el-radio-button__inner{
            &:hover{
                color: #009778;
            }
        }
    }
    .icon-data-view{
        color: #00ffe3;
    }
    .mapdibu{
        /*background: url('../../assets/dsj/mapButtom.gif');*/
        background-size: cover;
        height: 200px;
        width: 300px;
        z-index: 1;
        margin: 0px auto;
    }
    .dis{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .xm{
        width: 49%;
    }
    .cen-block{
        width: 30%;
        text-align: center;
        .top{
            color: #fff600;
            font-size: 24px;
            font-weight: bold;
            span{
                font-size: 12px;
                color: #ffffff;
                margin-left: 3px;
            }
        }
        .buttom{
            margin-top: 7px;
            font-size: 14px;
        }
    }
    .top-block{
        text-align: center;
        margin-top: 22px;
        .top{
            color:#46B8FF;
            font-size: 24px;
            font-weight: bold;
            span{
                font-size: 12px;
                color: #ffffff;
            }
        }
        .buttom{
            margin-top: 7px;
            font-size: 14px;
        }
    }
    .bg{
        background: url('../../assets/dsj/dsj.png');
        /*background: #000000;*/
        background-size: 100% 100%;
        height: 100vh;
        width: 100vw;
    }
    .big-title{
        font-size: 26px;
        text-align: center;
        font-weight: bold;
        color: #ffffff;
        .titles{
            .cursor-pointer{
                margin-left: 200px;
                padding: 0px 10px;
                height: 30px;
                line-height: 30px;
              /*  border-image-source: radial-gradient(60% 60%, transparent 0px, transparent 100%, cyan 100%);
                border-image-slice: 1;
                border-width: 1px;
                border-style: solid;*/
                font-size: 18px;
                /*color: cyan;*/
                &:hover{

                }
            }
        }
    }
    .title{
        font-weight: bold;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        color: #ffffff;
    }
    .block{
        padding: 20px;
        color: #e5e5e5;
        &:hover{

        }
    }
</style>
