<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(2)"
                        border="Border4">在建在售分析</dv-button>
                </div>
                <div class="cursor-pointer" style="margin-left: 10px">
                    <dv-button :fontColor="'#ffffff'" @click="dianji(1)" 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-box10 :color="state.datav3" :dur="5" style="height: 23vh;">
                    <div class="block">
                        <div class="oragedis">
                            <div class="top-block">
                                <div class="top">
                                    {{ proxy?.$method.numFormat(state.letTop.waitProjectTotal || '0') }}
                                    <span>个</span>
                                </div>
                                <div class="buttom">拿地未开工项目</div>
                            </div>
                            <div class="top-block">
                                <div class="top">{{ state.letTop.buildSaleCorpTotal || '0' }}
                                    <span>个</span>
                                </div>
                                <div class="buttom">在建在售企业</div>
                            </div>
                            <div class="top-block">
                                <div class="top">
                                  {{ proxy?.$method.numFormat(state.letTop.buildSaleProjectTotal || '0') }}
                                    <span>个</span>
                                </div>
                                <div class="buttom">在建在售项目</div>
                            </div>
                            <div class="top-block">
                                <div class="top">
                                    {{ proxy?.$method.numFormat(state.letTop.shutdownProjectTotal || '0') }}
                                    <span>个</span>
                                </div>

                                <div class="buttom">停工停建项目</div>
                            </div>
                            <div class="top-block">
                                <div class="top">
                                    {{ proxy?.$method.numFormat(state.letTop.waitAreaTotal || '0', 1) }}
                                    <span>万㎡</span>
                                </div>
                                <div class="buttom">拿地未开工面积</div>
                            </div>
                            <div class="top-block">
                                <div class="top">
                                    {{ proxy?.$method.numFormat(state.letTop.buildAreaTotal || '0', 1) }}
                                    <span>万㎡</span>
                                </div>
                                <div class="buttom">施工面积</div>
                            </div>
                            <div class="top-block">
                                <div class="top">
                                    {{ proxy?.$method.numFormat(state.letTop.saleAreaTotal || '0', 1) }}
                                    <span>万㎡</span>
                                </div>
                                <div class="buttom">在售面积</div>
                            </div>
                            <div class="top-block">
                                <div class="top">
                                    {{ proxy?.$method.numFormat(state.letTop.shutdownAreaTotal || '0', 1) }}
                                    <span>万㎡</span>
                                </div>
                                <div class="buttom">停工停建面积</div>
                            </div>
                        </div>
                    </div>
                </dv-border-box10>
                <dv-border-box10 :color="state.datav3" :dur="5" style="height: 34.5vh;">
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                在建在售商品房楼层分析
                            </div>
                        </div>
                        <div ref="homeEachrt3" v-if="state.determine" style="width: 100%;height: 28vh;margin-top: 10px">
                        </div>
                        <!-- <div ref="homeEachrt1" v-if="state.determine" style="width: 100%;height: 21vh;margin-top: 10px">
                        </div> -->
                    </div>
                </dv-border-box10>
                <dv-border-box10 :color="state.datav3" :reverse="true" :dur="5" style="height: 29.5vh">
                    <div class="block" style="margin-top: 10px">
                      
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                在建在售商品房面积段占比分析
                            </div>
                        </div>
                        <div>
                            <div ref="homeEachrt2" v-if="state.determine"
                                style="width: 100%;height: 22vh;margin-top: 10px"></div>
                        </div>
                    </div>
                </dv-border-box10>
            </el-col>
            <el-col :span="10">
                <div class="title" style="margin-top: 10px">
                    <div></div>
                    <div class="flex danxuan" style="align-items: center">
                        当前城市：<span style="color: #2DE6E1"></span>
                        <el-select style="width: 100px" v-model="state.select" :teleported="false" 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>

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

                <dv-border-box9 style="height: 29.5vh" :color="state.datav3">
                    <div class="block" style="margin-top: 10px;background: none">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                在建在售商品房面积段分析
                            </div>
                        </div>
                        <div>
                            <div ref="homeEachrt6" v-if="state.determine"
                                style="width: 100%;height: 22vh;margin-top: 10px"></div>
                        </div>
                    </div>
                </dv-border-box9>
            </el-col>
            <el-col :span="7">
                <dv-border-box10 :color="state.datav3" :dur="5" style="height: 29vh;">
                    <div class="block">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                年度新增商品房分析
                            </div>
                        </div>
                        <div ref="homeEachrt4" v-if="state.determine" style="width: 100%;height: 22vh;margin-top: 10px">
                        </div>
                    </div>
                </dv-border-box10>

                <dv-border-box10 :color="state.datav3" :reverse="true" :dur="5" style="height: 29vh">
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>在建在售商品房户型分析
                            </div>
                        </div>
                        <div v-if="state.determine">
                            <div ref="homeEachrt5" style="width: 100%;height: 22vh;margin-top: 10px"></div>
                        </div>
                    </div>
                </dv-border-box10>
                <!-- <dv-border-box10 :color="state.datav3" :reverse="true" :dur="5" style="height: 29vh">
                    <div class="block" style="margin-top: 10px">
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                年度新增商品房面积分析
                            </div>
                        </div>
                        <div ref="homeEachrt1" v-if="state.determine" style="width: 100%;height: 21vh;margin-top: 10px">
                        </div>
                    </div>
                </dv-border-box10> -->

                <dv-border-box10 :color="state.datav3" :reverse="true" :dur="5" style="height: 29.5vh">
                    <div class="block" style="margin-top: 10px">
                      
                        <div class="title">
                            <div>
                                <i class="iconfont icon-data-view"></i>
                                在建在售商品房面积分析
                            </div>
                        </div>
                        <div ref="homeEachrt9" v-if="state.determine" style="width: 100%;height: 21vh;margin-top: 10px">
                        </div>
                        
                    </div>
                </dv-border-box10>

            </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, fanChart6 } 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 homeEachrt6 = ref();
const homeEachrt7 = ref();
const homeEachrt9 = 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: "",
    picker: "",
    picker1: "",
    daysins: "",
    datav3: ['#1764B1', '#1764B1'],//
    determine: true,
    city: [] as any,
    global: {//图表
        homeChart1: null,
        homeChart2: null,
        homeChart3: null,
        homeChart4: null,
        homeChart5: null,
        homeChart6: null,
        homeChart7: null,
    },
    letTop: "",
    //图表数据
    saleArea: {//年度新增商品房套数
        xAxis: [],//X轴
        saleAmount: [],//销售面积
    } as any,
    saleNumber: {//
        xAxis: [],//X轴
        saleAmount: [],//销售套数
    } as any,
    averagePrice: {//面段柱状图
        xAxis: [],//X轴
        saleAmount: [],//销售套数
        saleAmount1: [],
    } as any,
    buyerarea: {//楼层
        xAxis: [],//X轴
        saleAmount: [],//销售套数
        xAxis1: [],//X轴
        saleAmount1: [],//销售套数
    } as any,
    saleage: {//户型
        xAxis: [],//X轴
        saleAmount: [],//销售套数
        saleAmount1: [],//销售套数
    } as any,
    salemonth: [] as any,
    //新房数据图表
    qualifications: [] as any,
    option9fans: [] as any
});

const axiosApi = async () => {
    state.saleArea = {
        xAxis: [],
        saleAmount: [],
    }
    state.saleNumber = {
        xAxis: [],//X轴
        saleAmount: [],
    }
    state.averagePrice = {
        xAxis: [],
        saleAmount: [],
        saleAmount1: [],
    }
    state.buyerarea = {
        xAxis: [],
        saleAmount: [],
        xAxis1: [],//X轴
        saleAmount1: [],//销售套数
    }
    state.saleage = {
        xAxis: [],
        saleAmount: [],
        saleAmount1: [],
    }//购房人年龄
    state.qualifications = []
    state.salemonth = []
    state.option9fans = []

    state.determine = false


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

    let item1 = await dsjApi().houseApi1({//累计销售情况
        district: state.select,//区县编码
    })
    state.letTop = item1.data

    state.option9fans = [
        { value: item1.data.buildAreaTotal, name: '施工面积' },
        { value: item1.data.waitAreaTotal, name: '拿地未开工面积' },
        { value: item1.data.shutdownAreaTotal, name: '停工停建面积' },
    ]

    let item2 = await dsjApi().houseApi4({//企业资质饼状图
        district: state.select,//区县编码
        houseContrast: 1,
    })

    item2.data.series.forEach((item: any) => {
        let cons = {
            value: item.area,
            name: item.name
        }
        state.qualifications.push(cons)
    })


    let item3 = await dsjApi().houseApi3({
        district: state.select,//区县编码
    })
    item3.data.forEach((item: any) => {
        state.saleArea.xAxis.push(item.year)
        state.saleArea.saleAmount.push(item.totalNum)

        state.saleNumber.xAxis.push(item.year)
        state.saleNumber.saleAmount.push(item.totalArea)

    })

    // let item4 = await dsjApi().houseApi4({
    //     district: state.select,//区县编码.
    //     houseContrast: 1,
    // })
    item2.data.series.forEach((item: any) => {
        state.averagePrice.xAxis.push(item.name)
        state.averagePrice.saleAmount.push(item.area)
        state.averagePrice.saleAmount1.push(item.num)
    })

    let item5 = await dsjApi().houseApi4({
        district: state.select,//区县编码.
        houseContrast: 2,
    })
    item5.data.series.forEach((item: any) => {
        state.buyerarea.xAxis.push(item.name)
        state.buyerarea.saleAmount.push(item.area)
        state.buyerarea.saleAmount1.push(item.num)
    })


    let item6 = await dsjApi().houseApi4({
        district: state.select,//区县编码.
        houseContrast: 3,
    })
    item6.data.series.forEach((item: any) => {
        state.saleage.xAxis.push(item.name)
        state.saleage.saleAmount.push(item.area)
        state.saleage.saleAmount1.push(item.num)
    })

    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));//年度新增商品房面积
    // var option = fanChart4(state.saleNumber, '新增面积');
    // state.global.homeChart1.setOption(option, false);

    state.global.homeChart4 = markRaw(echarts.init(homeEachrt4.value));//年度新增商品房套数折线图
    var option4 = fanChart1(state.saleArea, '新增套数', state.saleNumber, '新增面积');
    state.global.homeChart4.setOption(option4, true);

    state.global.homeEachrt9 = markRaw(echarts.init(homeEachrt9.value));//商品房面积分析
    var option9 = fanChart5(state.option9fans, 1, ['#75bedc', '#f9c956', '#EF6567']);
    state.global.homeEachrt9.setOption(option9, true);


    state.global.homeChart2 = markRaw(echarts.init(homeEachrt2.value));//在建在售企业资质等级分析
    var option2 = fanChart5(state.qualifications);
    state.global.homeChart2.setOption(option2, true);

    state.global.homeChart3 = markRaw(echarts.init(homeEachrt3.value));//楼层柱状图
    var option3 = fanChart6(state.buyerarea, ['面积', '套数']);
    state.global.homeChart3.setOption(option3, true);

    state.global.homeChart5 = markRaw(echarts.init(homeEachrt5.value));//户型柱状图
    var option5 = fanChart6(state.saleage, ['面积', '套数']);
    state.global.homeChart5.setOption(option5, true);

    state.global.homeChart6 = markRaw(echarts.init(homeEachrt6.value));//面段柱状图
    var option6 = fanChart6(state.averagePrice, ['面积', '套数']);
    state.global.homeChart6.setOption(option6, 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'
            },
        },*/
        zoom: 0.9,
        series: [
            //配置数据的显示
            {
                map: 'weifang',
                // type: "map3D",  //类型map
                type: "map",  //类型map
                selectedMode: 'single',
                roam: true,// 允许缩放
                zoom: 1.2,
                regionHeight: 4, //模型的高度
                boxWidth: 90, //三维地图在三维场景中的宽度
                boxDepth: 90, //三维地图在三维场景中的深度
                viewControl: {
                    beta: 0, //x轴旋转
                    alpha: 90, //Y轴旋转
                    // panMouseButton: 'center', //平移操作使用的鼠标按键
                    rotateMouseButton: 'left', //旋转操作使用的鼠标按键
                },
                itemStyle: {//放入颜色
                    normal: {
                        areaColor: "#142957",
                        borderColor: "#0692a4",
                    },
                    emphasis: {
                        borderWidth: 1,
                        borderColor: '#0b1c2d',
                        areaColor: '#0b1c2d',
                        label: {
                            color: '#fff'
                        }
                    },
                },
                label: {
                    show: true,
                    position: "top",
                    color: '#fff',
                    fontSize: 12,
                },
                emphasis: {// 选中状态下的多边形和标签样式
                    itemStyle: {
                        color: '#0b1c2d', //地图背景色
                    },
                    label: {
                        color: '#fff'
                    }
                },
                groundPlane: {// 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                    show: false,// 是否显示地面。[ default: false ]
                    color: '#aaa'// 地面颜色。[ default: '#aaa' ]
                },
                select: {
                    label: {
                        // 选中区域的label(文字)样式
                        color: '#fff'
                    },
                    itemStyle: {
                        color: '#0b1c2d',
                        areaColor: "#175888",
                        // 选中区域边框
                        borderColor: "#0CDEFF",
                        borderWidth: 1,
                    },
                },
                /*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;
    }
}

.oragedis {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .top-block {
        width: 25%;
    }
}

.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;
            }
        }
    }*/




::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
    border-radius: 10px;
    color: #fff;
    //border: 1px solid green;
    border-radius: 0px;
    border-color: #151733;
}

::v-deep .el-select-dropdown {
    //rgba(87,133,87,0.8)
    background: #151733;
    //margin: 0px;
    border: 1px solid #151733;
    //border-radius: 0px;
    //left: 0px !important;
}

::v-deep .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
    display: none;
}

::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
    color: #e5e5e5;
    background: #151733;
}

::v-deep .el-select-dropdown__item.selected {
    color: #e5e5e5;
}

.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-input__inner {
        color: #ffffff;
    }

    :deep .el-radio-button__original-radio:checked+.el-radio-button__inner {
        background-color: rgba(25, 172, 208, 0.27);
        border: 1px solid #009778;

        &:hover {
            color: #ffffff;
        }
    }

    :deep .el-radio-button.el-radio-button--small span {
        &:hover {
            color: #009778;
        }
    }
}

.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: 33.3%;
}

.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 {
        padding-top: 5px;

        .cursor-pointer {
            margin-left: 250px;
            padding: 0px 10px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;

            &:hover {}
        }
    }
}

.title {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.block {
    padding: 20px;
    /*background-color: rgba(255, 255, 255, 0.1);*/
    color: #e5e5e5;

    &:hover {}
}
</style>
