tenant-Platform/src/views/index.vue

<route lang="yaml">
name: home
meta:
  title: 主页
  icon: ant-design:home-twotone
</route>

<script setup lang="ts">
import * as echarts from 'echarts'
import api from '@/api'

import { useRouter } from 'vue-router'

import up from '@/assets/images/home/up.png'
import down from '@/assets/images/home/down.png'
import cxcd from '@/assets/images/home/cxcd.png'
import bldd from '@/assets/images/home/bldd.png'
import ddcx from '@/assets/images/home/ddcx.png'
import xygl from '@/assets/images/home/xygl.png'
import fygl from '@/assets/images/home/fygl.png'
import bxgs from '@/assets/images/home/bxgs.png'
import bxgszh from '@/assets/images/home/bxgszh.png'
import ywygl from '@/assets/images/home/ywygl.png'

import chinaMap from '@/assets/json/china.Json';
import anhui from '@/assets/json/anhui.json'
import aomen from '@/assets/json/aomen.json'
import beijing from '@/assets/json/beijing.json'
import chongqing from '@/assets/json/chongqing.json'
import fujian from '@/assets/json/fujian.json'
import gansu from '@/assets/json/gansu.json'
import guangdong from '@/assets/json/guangdong.json'
import guangxi from '@/assets/json/guangxi.json'
import guizhou from '@/assets/json/guizhou.json'
import hainan from '@/assets/json/hainan.json'
import hebei from '@/assets/json/hebei.json'
import heilongjiang from '@/assets/json/heilongjiang.json'
import henan from '@/assets/json/henan.json'
import hubei from '@/assets/json/hubei.json'
import hunan from '@/assets/json/hunan.json'
import jiangsu from '@/assets/json/jiangsu.json'
import jiangxi from '@/assets/json/jiangxi.json'
import jilin from '@/assets/json/jilin.json'
import liaoning from '@/assets/json/liaoning.json'
import neimenggu from '@/assets/json/neimenggu.json'
import ningxia from '@/assets/json/ningxia.json'
import qinghai from '@/assets/json/qinghai.json'
import shandong from '@/assets/json/shandong.json'
import shanghai from '@/assets/json/shanghai.json'
import shanxi from '@/assets/json/shanxi.json'
import shanxi1 from '@/assets/json/shanxi1.json'
import sichuan from '@/assets/json/sichuan.json'
import tianjin from '@/assets/json/tianjin.json'
import xianggang from '@/assets/json/xianggang.json'
import xinjiang from '@/assets/json/xinjiang.json'
import xizang from '@/assets/json/xizang.json'
import yunnan from '@/assets/json/yunnan.json'
import zhejiang from '@/assets/json/zhejiang.json'

echarts.registerMap('china', chinaMap)
echarts.registerMap('安徽', anhui)
echarts.registerMap('澳门', aomen)
echarts.registerMap('北京', beijing)
echarts.registerMap('重庆', chongqing)
echarts.registerMap('福建', fujian)
echarts.registerMap('甘肃', gansu)
echarts.registerMap('广东', guangdong)
echarts.registerMap('广西', guangxi)
echarts.registerMap('贵州', guizhou)
echarts.registerMap('海南', hainan)
echarts.registerMap('河北', hebei)
echarts.registerMap('黑龙江', heilongjiang)
echarts.registerMap('河南', henan)
echarts.registerMap('湖北', hubei)
echarts.registerMap('湖南', hunan)
echarts.registerMap('江苏', jiangsu)
echarts.registerMap('江西', jiangxi)
echarts.registerMap('吉林', jilin)
echarts.registerMap('辽宁', liaoning)
echarts.registerMap('内蒙', neimenggu)
echarts.registerMap('宁夏', ningxia)
echarts.registerMap('青海', qinghai)
echarts.registerMap('山东', shandong)
echarts.registerMap('上海', shanghai)
echarts.registerMap('山西', shanxi)
echarts.registerMap('陕西', shanxi1)
echarts.registerMap('四川', sichuan)
echarts.registerMap('天津', tianjin)
echarts.registerMap('香港', xianggang)
echarts.registerMap('新疆', xinjiang)
echarts.registerMap('西藏', xizang)
echarts.registerMap('云南', yunnan)
echarts.registerMap('浙江', zhejiang)

let myRouter = useRouter()

function open(url: string) {
  window.open(url, '_blank')
}

// 常用功能
let functionList = ref([
    {
        id: 1,
        name: '车险出单',
        icon: cxcd
    },
    {
        id: 2,
        name: '补录订单',
        icon: bldd
    },
    {
        id: 3,
        name: '订单查询',
        icon: ddcx
    },
    {
        id: 4,
        name: '协议管理',
        icon: xygl
    },
    {
        id: 5,
        name: '费用管理',
        icon: fygl
    },
    {
        id: 6,
        name: '保险公司',
        icon: bxgs
    },
    {
        id: 7,
        name: '保险公司账号',
        icon: bxgszh
    },
    {
        id: 8,
        name: '业务员管理',
        icon: ywygl
    },
])

// 地图
let ChinaMap = ref()
const initChinaMap = () => {
    const myChart = echarts.init(ChinaMap.value)
    let option = {
        tooltip: {
            formatter: function(e, t, n) {
                // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                return e.name + "<br />" +
                    "业务员数量：" + e.value + "<br />" +
                    "个代业务员数量：" + e.data.personalAgentCount + "<br />" +
                    "渠道业务员数量：" + e.data.channelSalesmanCount
            }
        },
        visualMap: {
            min: 0,
            max: 1000,
            left: 26,
            bottom: 40,
            showLabel: !0,
            text: ["高", "低"],
            pieces: [{
                gt: 150,
                label: ">150",
                color: "#0485FF"
            }, {
                gte: 100,
                lte: 150,
                label: "100-150",
                color: "#2E9AFF"
            }, {
                gte: 50,
                lt: 100,
                label: "50-100",
                color: "#81C2FF"
            }, {
                gt: 0,
                lt: 50,
                label: "<50",
                color: "#BCDFFF"
            }, {
                value: 0,
                color: "#DCEEFF"
            }],
            show: !0
        },
        geo: {
            map: "china",
            roam: !1,
            scaleLimit: {
                min: 1,
                max: 2
            },
            zoom: 1.23,
            top: 120,
            label: {
                normal: {
                    show: false,
                    fontSize: "14",
                    color: "rgba(0,0,0,0.7)"
                }
            },
            itemStyle: {
                normal: {
                    //shadowBlur: 50,
                    //shadowColor: 'rgba(0, 0, 0, 0.2)',
                    borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                    areaColor: "#f2d5ad",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    borderWidth: 0
                }
            }
        },
        series: [{
            name: "",
            type: "map",
            geoIndex: 0,
            data: chinaMapData.value
        }]
    };
    myChart.setOption(option)
    myChart.on('click', function (a) {
        provinceStr.value = a.data.code
        provinceName.value = a.name
        initBusinessDistribution()
    })
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

// 市级地图
let CityMap = ref()
const initCityMap = (name) => {
    let str = ''
    if(name.length == 3) {
        str = name.substring(0,2)
        initMap(str)
    } else if(name.length == 4) {
        str = name.substring(0,3)
        initMap(str)
    } else if(name.length > 4) {
        str = name.substring(0,2)
        initMap(str)
    }
}

const initMap = (str) => {
    const myChart = echarts.init(CityMap.value)
    let option = {
        tooltip: {
            formatter: function(e, t, n) {
                // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                return e.name + "<br />" +
                    "业务员数量：" + e.value + "<br />" +
                    "个代业务员数量：" + e.data.personalAgentCount + "<br />" +
                    "渠道业务员数量：" + e.data.channelSalesmanCount
            }
        },
        geo: {
            map: str,
            roam: !1,
            scaleLimit: {
                min: 1,
                max: 2
            },
            zoom: 1,
            top: 30,
            label: {
                normal: {
                    show: true,
                    fontSize: "14",
                    color: "rgba(0,0,0,0.7)"
                }
            },
            itemStyle: {
                normal: {
                    //shadowBlur: 50,
                    //shadowColor: 'rgba(0, 0, 0, 0.2)',
                    borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                    areaColor: "#f2d5ad",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    borderWidth: 0
                }
            }
        },
        series: [{
            name: "",
            type: "map",
            geoIndex: 0,
            data: subMapData.value
        }]
    };
    myChart.setOption(option)
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

// 出单趋势
let TrendRef = ref()
const initTrend = () => {
    const myChart = echarts.init(TrendRef.value)
    let option = {
        grid: {
            left: '20',
            right: '20',
            top:'20%',
            bottom: '15%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            show:true,
            right:'10',
            top:'10',
            icon: 'stack',
            itemWidth:10,
            itemHeight:10,
            textStyle:{
                color:'#333333'
            },
            data:['订单数','保费']
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                axisLabel:{
                    color: '#666666'
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:'#999999'
                    }
                },
                axisTick:{
                    show:false,
                },
                data : orderTrend.value.xAxis
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '信息量',
                min:0,
                max:1000,
                axisLabel : {
                    formatter: '{value}',
                    textStyle:{
                        color:'#666666'
                    }
                },
                axisTick:{
                    show:false,
                }
            }
        ],
        series : [
            {
                name:'订单数',
                type:'line',
                stack: '总量',
                symbol:'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color:'#15EB87',
                        lineStyle: {
                            color: "#15EB87",
                            width:1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(21,235,135,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(21,235,135,0.1)'
                            }]),
                        }
                    }
                },
                markPoint:{
                    itemStyle:{
                        normal:{
                            color:'red'
                        }
                    }
                },
                data:orderTrend.value.orderCount
            },
            {
                name:'保费',
                type:'line',
                stack: '总量',
                symbol:'circle',
                symbolSize: 8,
                itemStyle: {
                    normal: {
                        color:'#14D5E1',
                        lineStyle: {
                            color: "#14D5E1",
                            width:1
                        },
                        areaStyle: {
                            //color: '#94C9EC'
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(20,213,225,0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(20,213,225,0.1)'
                            }]),
                        }
                    }
                },
                data:orderTrend.value.premium
            }
        ]
    };
    myChart.setOption(option)
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

// 业务漏斗
let FunnelRef = ref()
const initFunnel = () => {
    const myChart = echarts.init(FunnelRef.value)
    let colors=['#20c8ff','#2cb7ff','#1785ef'];
    let option = {
        backgroundColor:'#ffffff',
        color:colors,
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                label: {
                    backgroundColor: "red"
                },
                lineStyle: {
                    color: "#9eb2cb"
                }
            }
        },

        legend: {
            show:false,
            top: "top",
            left: "2%",
            textStyle: {
                color: "#000"
            },
            itemHeight: 2,
            data:  ['报价订单','核保订单','承保订单']
        },
        grid: {
            top: 24,
            left: "2%",
            right: 20,
            bottom: 30,
            containLabel: true,
            borderWidth: 0.5
        },
        series: [
            {
                top:40,
                type: 'funnel',
                left: '10%',
                width: '80%',
                bottom: 0,
                gap: 16,
                minSize: 150,
                maxSize: 410,
                label: {
                    show: true,
                    color: '#ffffff',
                    position: 'inside',
                    formatter: '{c}%'
                },
                data: businessFunnelRadio.value
            },
            {
                top:40,
                type: 'funnel',
                left: '10%',
                width: '80%',
                gap: 16,
                bottom: 0,
                z:1,
                minSize: 150,
                maxSize: 150,
                label: {
                    normal: {
                        color: '#333333',
                        position: 'right',
                        formatter: '{b}{c}'
                    },
                },
                //右侧的百分比显示的地方
                labelLine: {
                    show:true,
                    normal: {
                        length: 200,
                        position: 'right',
                        lineStyle: {
                            width: 1,
                            color:'#999999',
                            type:'solid'
                        },
                    },
                },
                //主体是透明的
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderWidth:0,
                        opacity: 1
                    }
                },
                data: businessFunnel.value
            }
        ]
    };
    myChart.setOption(option)
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

// 业务类型分布
let PieRef = ref()
const initPie = () => {
    const myChart = echarts.init(PieRef.value)
    let option = {
        legend: {
            top: 'bottom'
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [40, 100],
                center: ['50%', '50%'],
                roseType: 'area',
                color: ["#3BD5DC", "#26A8FF", "#FFC61B"],
                data: distributionData.value,
                label: {
                    show: true,
                    formatter: '{b}{c}%'
                }
            }
        ]
    };
    myChart.setOption(option)
    window.addEventListener('resize', () => {
        myChart.resize()
    })
}

// 今日数据
let dailyData = ref({
    insuranceIssuersCount: '',
    insuranceIssuersCountChange: '',
    orderQuantity: '',
    orderQuantityChange: '',
    premium: '',
    premiumChange: '',
    quoteCount: '',
    quoteCountChange: ''
})
const initDailyData = () => {
    api.homeApi.dailyData().then((res: any) => {
        if(res.code == 200) {
            dailyData.value = res.data
        } else {
            dailyData.value = {
                insuranceIssuersCount: '',
                insuranceIssuersCountChange: '',
                orderQuantity: '',
                orderQuantityChange: '',
                premium: '',
                premiumChange: '',
                quoteCount: '',
                quoteCountChange: ''
            }
        }
    })
}


let orderTrend = ref({
    xAxis: [],
    orderCount: [],
    premium: []
})
const initOrderTrend = () => {
    api.homeApi.orderTrend().then((res: any) => {
        if(res.code == 200) {
            res.data?.forEach(item => {
                orderTrend.value.xAxis.push(`${item.month}月`)
                orderTrend.value.orderCount.push(item.orderCount)
                orderTrend.value.premium.push(item.premium)
            })
        } else {
            orderTrend.value = {
                xAxis: [],
                orderCount: [],
                premium: []
            }
        }
        initTrend()
    })
}

let businessFunnel = ref([])
let businessFunnelRadio = ref([])
const initBusinessFunnel = () => {
    api.homeApi.businessFunnel().then((res: any) => {
        if(res.code == 200) {
            businessFunnel.value = [
                {
                    value: res.data.quoteCount,
                    name: '报价订单'
                },{
                    value: res.data.underwriteCount,
                    name: '核保订单'
                },{
                    value: res.data.orderCount,
                    name: '承保订单'
                },
            ]
            businessFunnelRadio.value = [
                {
                    value: res.data.quoteToUnderwriteRatio,
                    name: '报价订单'
                },{
                    value: res.data.underwriteToOrderRatio,
                    name: '核保订单'
                },{
                    value: res.data.quoteToOrderRatio,
                    name: '承保订单'
                },
            ]
        } else {
            businessFunnel.value = []
            businessFunnelRadio.value = []
        }
        initFunnel();
    })
}

let distributionData = ref([])
const initDistribution = () => {
    api.homeApi.distribution().then((res: any) => {
        if(res.code == 200) {
            distributionData.value = [
                {
                    name: '交强险',
                    value: res.data.ciProportion || 0
                },{
                    name: '商业险',
                    value: res.data.biProportion || 0
                },{
                    name: '驾意险',
                    value: res.data.niProportion || 0
                },
            ]
        } else {
            distributionData.value = []
        }
        initPie()
    })
}

let chinaMapData = ref([])
let subMapData = ref([])
let provinceStr = ref('')
let provinceName = ref('')
const initBusinessDistribution = () => {
    api.homeApi.businessDistribution(provinceStr.value).then((res: any) => {
        if(!provinceStr.value) {
            if(res.code == 200) {
                chinaMapData.value = res.data?.map(item => {
                    return {
                        name: item.areaCname,
                        code: item.areaCode,
                        value: item.totalSalesmanCount,
                        personalAgentCount: item.personalAgentCount,
                        channelSalesmanCount: item.channelSalesmanCount
                    }
                })
            } else {
                chinaMapData.value = []
            }
            initChinaMap()
        } else {
            if(res.code == 200) {
                subMapData.value = res.data?.map(item => {
                    return {
                        name: item.areaCname,
                        code: item.areaCode,
                        value: item.totalSalesmanCount,
                        personalAgentCount: item.personalAgentCount,
                        channelSalesmanCount: item.channelSalesmanCount
                    }
                })
            } else {
                subMapData.value = []
            }
            initCityMap(provinceName.value)
        }
    })
}

let functionsList = ref([])
const initCommonFunctions = () => {
    api.homeApi.commonFunctions().then((res:any) => {
        if(res.code == 200) {
            functionsList.value = res.data
        } else {
            functionsList.value = []
        }
    })
}
const handleRouterChange = (item, index) => {
    myRouter.push({
        name: item.name,
    })
}

onMounted(() => {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    if(userInfo?.province) {
        initCityMap(userInfo?.province);
    }
    initDailyData();
    initOrderTrend();
    initBusinessFunnel();
    initDistribution();
    initBusinessDistribution();
    initCommonFunctions();
    // initChinaMap();
    // initTrend();
    // initFunnel();
    // initPie();
})

</script>

<template>
  <div>
<!--    <PageHeader>
      <template #title>
        <div class="flex items-center gap-4">
          欢迎使用 Fantastic-admin
        </div>
      </template>
      <template #content>
        <div class="text-sm/6">
          <div>
            这是一款<b class="text-emphasis">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护
          </div>
          <div>
            注：在作者就职过的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行
          </div>
        </div>
      </template>
      <HButton outline @click="open('https://fantastic-admin.hurui.me')">
        <SvgIcon name="i-ri:file-text-line" />
        开发文档
      </HButton>
      <HDropdownMenu
        :items="[
          [
            { label: 'Gitee', handle: () => open('https://gitee.com/fantastic-admin/basic') },
            { label: 'Github', handle: () => open('https://github.com/fantastic-admin/basic') },
          ],
        ]"
      >
        <HButton class="ml-2">
          <SvgIcon name="i-ri:code-s-slash-line" />
          代码仓库
          <SvgIcon name="i-ep:arrow-down" />
        </HButton>
      </HDropdownMenu>
    </PageHeader>-->
    <div class="w-full">
        <PageMain class="ecology">
            <div class="title">今日数据</div>
            <div class="dataList">
                <div class="item">
                    <div class="name">
                        今日保费(万元)
                    </div>
                    <div class="data">
                      <span class="number">
                        {{ dailyData.premium }}
                      </span>
                        <span class="line">
                          较昨日<img :src="dailyData.premiumChange > 0?up: down" />{{ dailyData.premiumChange || 0 }}%
                      </span>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        今日承保订单数(笔)
                    </div>
                    <div class="data">
                      <span class="number">
                        {{ dailyData.orderQuantity }}
                      </span>
                        <span class="line">
                          较昨日<img :src="dailyData.orderQuantityChange > 0?up: down" />{{ dailyData.orderQuantityChange || 0 }}%
                      </span>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        今日出单业务员(人)
                    </div>
                    <div class="data">
                      <span class="number">
                        {{ dailyData.insuranceIssuersCount }}
                      </span>
                        <span class="line">
                          较昨日<img :src="dailyData.insuranceIssuersCountChange > 0?up: down" />{{ dailyData.insuranceIssuersCountChange || 0 }}%
                      </span>
                    </div>
                </div>
                <div class="item">
                    <div class="name">
                        今日报价次数(次)
                    </div>
                    <div class="data">
                      <span class="number">
                        {{ dailyData.quoteCount }}
                      </span>
                        <span class="line">
                          较昨日<img :src="dailyData.quoteCountChange > 0?up: down" />{{ dailyData.quoteCountChange || 0 }}%
                      </span>
                    </div>
                </div>
            </div>
        </PageMain>
        <PageMain class="ecology">
            <div class="title">常用功能</div>
            <div class="functionList">
                <div class="item" v-for="(item, index) in functionsList" :key="item.id" @click="handleRouterChange(item, index)">
                    <img class="icon" :src="item.ican" />
                    <div class="name">{{ item.title }}</div>
                </div>
            </div>
        </PageMain>
        <div class="mapBox">
            <div class="map">
                <div class="title">业务员分布</div>
                <div class="chinaMap" ref="ChinaMap"></div>
            </div>
            <div class="level">
                <div class="title">市级</div>
                <div class="cityMap" ref="CityMap"></div>
            </div>
        </div>
        <PageMain class="ecology">
            <div class="title">出单趋势</div>
            <div class="orderTrend" ref="TrendRef"></div>
        </PageMain>
        <div class="otherBox">
            <div class="funnel">
                <div class="title">业务漏斗</div>
                <div class="chinaMap" ref="FunnelRef"></div>
            </div>
            <div class="pie">
                <div class="title">业务类型分布</div>
                <div class="cityMap" ref="PieRef"></div>
            </div>
        </div>
    </div>
  </div>
</template>

<style lang="scss">

.w-full {
  .title{
    border-left: 4px solid #0083FF;
    height: 18px;
    color: #333333;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  .dataList{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24px;
      .item{
          background: #F9FCFF;
          padding: 16px 12px;
          border-radius: 6px;
          width: calc(25% - 5px);
          .name{
              color: #666666;
              font-weight: 400;
              font-size: 16px;
              margin-bottom: 12px;
          }
          .data{
              display: flex;
              justify-content: flex-start;
              .number{
                  color: #333333;
                  font-weight: 600;
                  font-size: 24px;
              }
              .line{
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  font-size: 14px;
                  color: #666666;
                  margin-left: 10px;
                  img{
                      width: 14px;
                      height: 14px;
                      margin: 0 2px;
                  }
              }
          }
      }
  }
  .functionList{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24px;
      .item{
          .icon{
              display: block;
              width: 60px;
              height: 60px;
              margin: 0 auto 12px;
          }
          .name{
              color: #333333;
            font-size: 18px;
          }
      }
  }
  .mapBox, .otherBox{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px;
    .map, .level{
      width: calc(50% - 5px);
      background: #ffffff;
      padding: 24px;
      .chinaMap, .cityMap{
        width: 100%;
        height: 550px;
      }
    }
    .funnel, .pie{
      width: calc(50% - 5px);
      background: #ffffff;
      padding: 24px;
      .chinaMap, .cityMap{
        width: 100%;
        height: 300px;
      }
    }
  }
  .orderTrend{
    width: 100%;
    height: 400px;
    margin-top: 24px;
  }
}
</style>