<template>
    <div class="weatherPage" :style="pageHeight">
        <!-- <common-header ref="weather"></common-header> -->
        <div class="weather_wind">
            <el-row class="windStstus">
                <el-col :span="24" class="scrollbar">
                    <!-- <span class="scrollbarName">场站名称：</span> -->
                    <el-scrollbar>
                        <div class="scrollbar-flex-content">
                            <p v-for="item in windFramoptions" :key="item.no" class="scrollbar-demo-item"
                                :class="item.showBac ? 'changeBacksty' : 'defaultBacksty'"
                                @click="changeStation(item.no)">
                                {{ item.stationName }}
                            </p>
                        </div>
                    </el-scrollbar>
                </el-col>
            </el-row>
        </div>
        <!-- weatherFrom.weather_day_now -->
        <div class="weatherMain" :style="weatherMainHeight" :class="getBackGround(weatherFrom.weather_day_now)">
            <div class="weatherOverview">
                <div class="viewTop">
                    <div class="viewTop_left">
                        <span style="font-size: 22px;">{{weatherFrom.city}}</span>
                        <span>今天：{{weatherFrom.weather_day}}{{weatherFrom.temperatureLow}}~{{weatherFrom.temperatureHigh}}</span>
                        <span>{{weatherFrom.wind_direction_day}}{{weatherFrom.wind_power_day}}</span>
                    </div>
                    <div class="viewTop_right">
                        <span>{{weatherFrom.today}}</span>
                        <span>{{weatherFrom.weekDay}}</span>
                        <span>{{weatherFrom.lunarCalendar}}</span>
                    </div>
                </div>
                <div class="viewCenter">
                    <div class="viewCenter_left">
                        {{weatherFrom.wendu}}
                    </div>
                    <div class="viewCenter_right">
                        <div class="quality">{{weatherFrom.pm10}}{{weatherFrom.quality}}</div>
                        <div>
                            <i :class="getIcon(weatherFrom.weather_day_now)"></i>
                            <span>{{weatherFrom.weather_day_now}}</span>
                            <span>{{weatherFrom.notice}}</span>
                        </div>
                    </div>
                </div>
                <div class="viewFooter">
                    <div class="weaMsg">
                        <span>湿度{{weatherFrom.shidu}}</span>
                        <span>紫外线{{weatherFrom.bodytemp_info}}</span>
                        <span>日出{{weatherFrom.sunrise}}</span>
                        <span>日落{{weatherFrom.sunset}}</span>
                    </div>
                    <!-- <div class="exceed">
                    <span style="margin-top: 3px;">切换场站查看天气：</span>
                    <el-select v-model="windTurbines" placeholder="请选择" @change="changeStation">
                        <el-option
                        v-for="item in windFramoptions"
                        :key="item.no"
                        :label="item.stationName"
                        :value="item.no">
                        </el-option>
                    </el-select>
                </div> -->
                </div>
            </div>
            <el-row>
                <el-col :span="10">
                    <div id="weatherChart1" class="weatherStyle1" :style="lineLeftChartStyle"></div>
                    <div id="weatherChart2" class="weatherStyle1" :style="lineLeftChartStyle"></div>
                </el-col>
                <el-col :span="14">
                    <div class="weatherMessage" :style="lineChartStyle">
                        <div id="weatherChart" :style="linerightChartStyle"></div>
                        <div class="messageData">
                            <p style="margin-bottom:30px">温馨提示：</p>
                            <div style="display: flex">
                                <div class="msgDiv">
                                    <div v-for="(item, index) in showMsgData" :key="item.id">
                                        <div style="display:flex">
                                            <span class="titleSty"
                                                :style="{color: item.data[0].color}">【{{item.data[0].name}}】</span>
                                            <span class="msgSty"
                                                @click="clickDetail(item, index)">{{item.data[0].msg}}</span>
                                        </div>
                                        <el-divider></el-divider>
                                    </div>
                                </div>
                                <div class="thunderstorm">
                                    <div class="thunderstorm_img">
                                        <img :src="detailWeather.img" alt="">
                                    </div>
                                    <span>{{detailWeather.msg}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <weather-detail ref="weatherDetail"></weather-detail>
    </div>
</template>

<script>
    // cheerio
    import commonHeader from '@/components/commonHeaders.vue'
    import weatherDetail from '@/components/powerPredictionComponent/homePageAssembly/weatherDetail.vue'
    //大风预警图片
    import windBlue from '@/assets/weather/windBlue.png'
    import windYellow from '@/assets/weather/windYellow.png'
    import windOrange from '@/assets/weather/windOrange.png'
    import windRed from '@/assets/weather/windRed.png'
    //暴雨预警图片
    import rainBlue from '@/assets/weather/rainBlue.png'
    import rainYellow from '@/assets/weather/rainYellow.png'
    import rainOrange from '@/assets/weather/rainOrange.png'
    import rainRed from '@/assets/weather/rainRed.png'
    //雷电预警图片
    import thunderYellow from '@/assets/weather/thunderYellow.png'
    import thunderOrange from '@/assets/weather/thunderOrange.png'
    import thunderRed from '@/assets/weather/thunderRed.png'
    //暴雪预警图片
    import snowBlue from '@/assets/weather/snowBlue.png'
    import snowYellow from '@/assets/weather/snowYellow.png'
    import snowOrange from '@/assets/weather/snowOrange.png'
    import snowRed from '@/assets/weather/snowRed.png'
    //正常天气
    import sunshine from '@/assets/weather/sunshine.png'
    import overcast from '@/assets/weather/overcast.png'
    import cloudy from '@/assets/weather/cloudy.png'
    import rain from '@/assets/weather/rain.png'
    import snow from '@/assets/weather/snow.png'
    import thunder from '@/assets/weather/thunder.png'

    import {
        apiGetStationGL,
        apiGetWeatherForecast
    } from '../../api/api'
    export default {
        components: {
            // commonHeader
            weatherDetail
        },
        data() {
            return {
                windTurbines: '',
                windName: '',
                windFramoptions: [],
                weatherDataFromApi: {},
                weatherDataFromWeb: {},
                historyWeatherDataFromWeb: {},
                weatherFrom: {
                    city: '',
                    weather_day: '',
                    wind_direction_day: '',
                    wind_power_day: '',
                    today: '',
                    weekDay: '',
                    desc: '',
                    temperatureHigh: '',
                    temperatureLow: '',
                    weatherLevel: '',
                    lunarCalendar: '',
                    wendu: '',
                    pm25: '',
                    quality: '',
                    weather_day_now: '',
                    notice: '',
                    shidu: '',
                    bodytemp_info: '',
                    sunrise: '',
                    sunset: ''
                },
                bottomRightHigh: '',
                windSpeedComparison: {},
                messageDataxc: [],
                detailWeather: {},
                showMsgData: []
            }
        },
        created() {
            this.weatherDataFromApi = JSON.parse(window.sessionStorage.getItem('weatherData'))
            this.windSpeedComparison = {
                // 0: '0.0-0.2',
                // 1: '0.3-1.5',
                // 2: '1.6-3.3',
                // 3: '3.4-5.4',
                // 4: '5.5-7.9',
                // 5: '8.0-10.7',
                // 6: '10.8-13.8',
                // 7: '13.9-17.1',
                // 8: '17.2-20.7',
                // 9: '20.8-24.4',
                // 10: '24.5-28.4',
                // 11: '28.5-32.6',
                // 12: '32.7-~',
                0: '0.0',
                1: '0.3',
                2: '1.6',
                3: '3.4',
                4: '5.5',
                5: '8.0',
                6: '10.8',
                7: '13.9',
                8: '17.2',
                9: '20.8',
                10: '24.5',
                11: '28.5',
                12: '32.7'
            }
            this.messageDataxc = [{
                    id: 1,
                    name: '大风蓝色预警',
                    color: '#5599ff',
                    img: windBlue,
                    typeName: 'windBlue',
                    msg: '未来24小时内，大风蓝色预警。做好防大风工作，关好门窗，加固围板、棚架，行人尽量不骑自行车，防高空坠物。'
                },
                {
                    id: 2,
                    name: '大风黄色预警',
                    color: '#fffc09',
                    img: windYellow,
                    typeName: 'windYellow',
                    msg: '未来12小时，大风黄色预警。应该停止露天活动和高空作业，切断户外危险电源，注意森林、草原火灾。'
                },
                {
                    id: 3,
                    name: '大风橙色预警',
                    color: '#ff7800',
                    img: windOrange,
                    typeName: 'windOrange',
                    msg: '未来6小时大风橙色预警，检修人员减少外出，切断危险电源，注意防高空坠物。'
                },
                {
                    id: 4,
                    name: '大风红色预警',
                    color: '#ec3f3f',
                    img: windRed,
                    typeName: 'windRed',
                    msg: '未来6小时大风红色预警。应做好防范大风应急工作，工作人员不要随意外出，切断危险电源，设备设施尽快转移到安全地带。'
                },
                {
                    id: 5,
                    name: '暴雨蓝色预警',
                    color: '#5599ff',
                    img: rainBlue,
                    typeName: 'rainBlue',
                    msg: '未来12小时内降雨量将达50毫米以上，注意山路湿滑。'
                },
                {
                    id: 6,
                    name: '暴雨黄色预警',
                    color: '#fffc09',
                    img: rainYellow,
                    typeName: 'rainYellow',
                    msg: '未来6小时内降雨量将达50毫米以上，降雨可能持续，检修人员提前返回场里。'
                },
                {
                    id: 7,
                    name: '暴雨橙色预警',
                    color: '#ff7800',
                    img: rainOrange,
                    typeName: 'rainOrange',
                    msg: '未来3小时内降雨量将达50毫米以上，检修人员尽量避免现场工作。'
                },
                {
                    id: 8,
                    name: '暴雨红色预警',
                    color: '#ec3f3f',
                    img: rainRed,
                    typeName: 'rainRed',
                    msg: '未来3小时内降雨量将达100毫米以上，检修人员尽量避免现场工作或提前返回场里。'
                },
                {
                    id: 9,
                    name: '雷电黄色预警',
                    color: '#fffc09',
                    img: thunderYellow,
                    typeName: 'thunderYellow',
                    msg: '可能会造成雷电灾害事故，做好防雷工作。密切关注天气变化，尽量避免户外检修工作。'
                },
                {
                    id: 10,
                    name: '雷电橙色预警',
                    color: '#ff7800',
                    img: thunderOrange,
                    typeName: 'thunderOrange',
                    msg: '雷电活动影响可能持续，出现雷电灾害事故的可能性比较大。落实防雷应急措施。工作人员避免户外活动，切断危险电源，不要在树下、电杆下、塔吊下避雨。'
                },
                {
                    id: 11,
                    name: '雷电红色预警',
                    color: '#ec3f3f',
                    img: thunderRed,
                    typeName: 'thunderRed',
                    msg: '未来2小时内有强烈的雷电活动发生，且可能持续，出现雷电灾害事故的可能性非常大。做好防雷应急抢险工作。工作人员躲入室内并关好门窗。切勿接触天线、水管、铁丝网、金属门窗、建筑物外墙，远离电线等带电设备和其他类似金属装置。密切注意雷电预警信息的发布。'
                },
                {
                    id: 12,
                    name: '暴雪蓝色预警',
                    color: '#5599ff',
                    img: snowBlue,
                    typeName: 'snowBlue',
                    msg: '交通路面湿滑，可能会影响检修工作。'
                },
                {
                    id: 13,
                    name: '暴雪黄色预警',
                    color: '#fffc09',
                    img: snowYellow,
                    typeName: 'snowYellow',
                    msg: '交通路面湿滑，可能会影响检修工作。'
                },
                {
                    id: 14,
                    name: '暴雪橙色预警',
                    color: '#ff7800',
                    img: snowOrange,
                    typeName: 'snowOrange',
                    msg: '可能影响交通，影响车行，避免坡路打滑。'
                },
                {
                    id: 15,
                    name: '暴雪红色预警',
                    color: '#ec3f3f',
                    img: snowRed,
                    typeName: 'snowRed',
                    msg: '对交通影响较大，车量出行困难，建议减少非必要出行。'
                },
                // {
                //     id: 16,
                //     type: '冻雨天气预警',
                //     color: '#ff7800',
                //     msg: '未来24小时可能有冻雨气象天气发生，请防范冻雨导致生产受累。'
                // },
                {
                    id: 17,
                    name: '晴天',
                    color: '#04ed7c',
                    img: sunshine,
                    typeName: 'sunshine',
                    msg: '蓝天真的很温柔，他将那些零零散散的云，都拥入自己的怀里。'
                },
                {
                    id: 18,
                    name: '阴天',
                    color: '#04ed7c',
                    img: overcast,
                    typeName: 'overcast',
                    msg: '乌云一片接着一片，板着脸走过，不时还传来一两声可怕的怒吼似箭的光，告诉着人们他的厉害。'
                },
                {
                    id: 19,
                    name: '多云',
                    color: '#04ed7c',
                    img: cloudy,
                    typeName: 'cloudy',
                    msg: '最美的天气，不是下雨天，不是大太阳天，而是多云的阴天，出门淋不着，晒不着。'
                },
                {
                    id: 20,
                    name: '雨天',
                    color: '#04ed7c',
                    img: rain,
                    typeName: 'rain',
                    msg: '再温柔平和宁静的落雨，也有把人浸透的威力。'
                },
                {
                    id: 21,
                    name: '雪天',
                    color: '#04ed7c',
                    img: snow,
                    typeName: 'snow',
                    msg: '雪花落入掌心，融化思念，释放温情，雪花落入大地，存储牵挂，诠释纯洁。'
                },
                {
                    id: 22,
                    name: '雷电',
                    color: '#04ed7c',
                    img: thunder,
                    typeName: 'thunder',
                    msg: '所有的雷声闪电，都是在雷雨云中发生的。'
                },
            ]
        },
        mounted() {
            this.getWindFramData()
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 60 + 'px',
                }
            },
            weatherMainHeight() {
                return {
                    'height': document.documentElement.clientHeight - 140 + 'px'
                }
            },
            lineChartStyle() {
                return {
                    'width': '93%',
                    'height': (document.documentElement.clientHeight - 430) + 'px'
                }
            },
            lineLeftChartStyle() {
                return {
                    'width': '93%',
                    'height': (document.documentElement.clientHeight - 490) / 2 + 'px'
                }
            },
            linerightChartStyle() {
                return {
                    'width': '95%',
                    'height': (document.documentElement.clientHeight - 680) + 'px'
                }
            }
        },
        methods: {
            init() {
                this.detailWeather = this.showMsgData.length > 0 ? this.showMsgData[0].data[0] : {}
                this.weatherFrom.city = (this.weatherDataFromWeb.position.city) || this.weatherDataFromApi.cityInfo
                    .city || ''
                this.weatherFrom.weather_day = this.weatherDataFromWeb['15_day_forecast'].info[0].weather_day || this
                    .weatherDataFromApi.data.forecast[0].type || ''
                this.weatherFrom.wind_direction_day = this.weatherDataFromWeb['15_day_forecast'].info[0]
                    .wind_direction_day || this.weatherDataFromApi.data.forecast[0].fx || ''
                let level = this.weatherDataFromApi && this.weatherDataFromApi.data.forecast[0].fl.substring(0, 1) || ''
                this.weatherFrom.wind_power_day = this.weatherDataFromWeb['15_day_forecast'].info[0].wind_power_day || (
                    Number(level) + '~' + (Number(level) + 1) + '级') || ''
                this.weatherFrom.today = this.getTime(new Date())
                // this.weatherFrom.lunarCalendar = ('农历'+this.weatherDataFromWeb.base.lunar ? this.weatherDataFromWeb.base.lunar : '') || this.weatherDataFromApi.data.ganmao || ''
                this.weatherFrom.weekDay = this.weatherDataFromWeb.weather.precipitation_type || ''
                this.weatherFrom.temperatureHigh = this.weatherDataFromWeb['15_day_forecast'].info[0].temperature_day ||
                    ''
                this.weatherFrom.temperatureLow = this.weatherDataFromWeb['15_day_forecast'].info[0]
                    .temperature_night || ''
                this.weatherFrom.desc = this.weatherDataFromApi && this.weatherDataFromApi.data.forecast[0].low
                    .substring(3) || ''

                this.weatherFrom.wendu = this.weatherDataFromWeb['24_hour_forecast'].info[0].temperature || this
                    .weatherDataFromApi.data.wendu || ''
                this.weatherFrom.pm25 = this.weatherDataFromWeb['24_hour_forecast'].info[0].pm25.listAqiVal || this
                    .weatherDataFromApi.data.pm10 || ''
                this.weatherFrom.quality = this.weatherDataFromWeb['24_hour_forecast'].info[0].pm25.listValue || this
                    .weatherDataFromApi.data.quality || ''

                this.weatherFrom.weather_day_now = this.weatherDataFromWeb.weather.weather || this.weatherFrom
                    .weather_day || ''
                this.weatherFrom.notice = this.weatherDataFromWeb.weather.bodytemp_info || this.weatherDataFromApi.data
                    .forecast[0].notice || ''
                this.weatherFrom.shidu = this.weatherDataFromWeb.weather.humidity || this.weatherDataFromApi.data
                    .shidu || ''
                this.weatherFrom.bodytemp_info = this.weatherDataFromWeb.feature.ultraviolet || ''
                this.weatherFrom.sunrise = this.weatherDataFromWeb.feature.sunriseTime || this.weatherDataFromApi.data
                    .forecast[0].sunrise || ''
                this.weatherFrom.sunset = this.weatherDataFromWeb.feature.sunsetTime || this.weatherDataFromApi.data
                    .forecast[0].sunset || ''

                this.getWeatherLine()
                this.getWeatherLine1()
                this.getWeatherLine2()
            },
            // 获取风电场数据
            getWindFramData() {
                let that = this
                apiGetStationGL().then(datas => {
                    if (datas && datas.data && datas.data.list) {
                        that.windFramoptions = datas.data.list
                        that.windTurbines = datas.data.list[0].no
                        that.windFramoptions[0].showBac = true
                        that.windName = datas.data.list[0].stationName
                        that.getNowWeather(datas.data.list[0].no)
                    }
                })
            },
            changeStation(val) {
                this.windFramoptions.forEach(item => {
                    if (item.no === val) {
                        item.showBac = true
                        this.windName = item.stationName
                    } else {
                        item.showBac = false
                    }
                })
                this.getNowWeather(val)
            },
            clickDetail(item, index) {
                this.detailWeather = item.data[0]
                this.$refs.weatherDetail.dialogVisible = true
                this.$refs.weatherDetail.title = '天气详情'
                this.$refs.weatherDetail.messageAll = this.showMsgData
                this.$refs.weatherDetail.activeName = index.toString()
                this.$refs.weatherDetail.statusName = item.data[0].name
            },
            getIcon(type) {
                let icon = ''
                if (type === '多云') {
                    icon = 'el-icon-cloudy-and-sunny'
                } else if (type === '阴') {
                    icon = 'el-icon-partly-cloudy'
                } else if (type === '晴') {
                    icon = 'el-icon-sunny'
                } else if (type === '小雨') {
                    icon = 'el-icon-light-rain'
                }
                return icon
            },
            getBackGround(type) {
                let backg = ''
                if (type.indexOf('雨') > -1) {
                    backg = 'rainBackg'
                } else if (type === '阴') {
                    backg = 'yinBackg'
                } else {
                    backg = 'sunBackg'
                }
                return backg
            },
            // 未来14天天气
            getWeatherLine() {
                let xAxis = []
                let series = []
                let seriesHighObj = {
                    name: '高温',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let seriesLowObj = {
                    name: '低温',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let seriesDiffObj = {
                    name: '温差',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let historyseriesHighObj = {
                    name: '同期高温',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let historyseriesLowObj = {
                    name: '同期低温',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let historyseriesDiffObj = {
                    name: '同期温差',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                if (this.weatherDataFromWeb['15_day_forecast'].info.length > 0) {
                    this.weatherDataFromWeb['15_day_forecast'].info.forEach(item => {
                        xAxis.push(item.date)
                        let high = item.temperature_day
                        let low = item.temperature_night
                        let diff = high - low
                        seriesHighObj.data.push(high)
                        seriesLowObj.data.push(low)
                        seriesDiffObj.data.push(diff)
                    })
                } else {
                    this.weatherDataFromApi.data.forecast.forEach(item => {
                        xAxis.push(item.ymd)
                        let high = item.high.substring(3)
                        let low = item.low.substring(3)
                        let diff = high - low
                        seriesHighObj.data.push(high.substring(0, 2))
                        seriesLowObj.data.push(low.substring(0, 2))
                        seriesDiffObj.data.push(diff)
                    })
                }
                if (this.historyWeatherDataFromWeb) {
                    if (this.historyWeatherDataFromWeb['15_day_forecast'].info.length > 0) {
                        this.historyWeatherDataFromWeb['15_day_forecast'].info.forEach(item => {
                            let high = item.temperature_day
                            let low = item.temperature_night
                            let diff = high - low
                            historyseriesHighObj.data.push(high)
                            historyseriesLowObj.data.push(low)
                            historyseriesDiffObj.data.push(diff)
                        })
                    }
                }
                series.unshift(seriesHighObj)
                series.unshift(seriesLowObj)
                series.unshift(seriesDiffObj)
                series.unshift(historyseriesHighObj)
                series.unshift(historyseriesLowObj)
                series.unshift(historyseriesDiffObj)
                let option = {
                    backgroundColor: '',
                    title: {
                        text: '未来14天天气预报'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: ['#f2a91f', '#04ed7c', '#ff7800'],
                    legend: {
                        right: '20',
                        data: ['低温', '高温', '温差', '同期高温', '同期低温', '同期温差']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value',
                        name: '℃',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#ccc'
                            },
                        },
                    },
                    series: series
                };
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('weatherChart'), 'dark')
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            // 未来24小时天气
            getWeatherLine1() {
                let xAxis = []
                let series = []
                let temperatureObj = {
                    name: '实时温度',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let historyObj = {
                    name: '同期温度',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                this.weatherDataFromWeb['24_hour_forecast'].info.forEach((item, index) => {
                    if (index < 25) {
                        let d = item.hour.substring(4, 6) + '月'
                        let y = item.hour.substring(6, 8) + '日 '
                        let h = item.hour.substring(8) + ':00'
                        xAxis.push(d + y + h)
                        temperatureObj.data.push(item.temperature)
                    }
                })
                if (this.historyWeatherDataFromWeb) {
                    this.historyWeatherDataFromWeb['24_hour_forecast'].info.forEach((item, index) => {
                        if (index < 25) {
                            historyObj.data.push(item.temperature)
                        }
                    })
                }
                series.unshift(temperatureObj)
                series.unshift(historyObj)
                let option = {
                    backgroundColor: '',
                    title: {
                        text: '24小时预报'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: ['#ff7800'],
                    legend: {
                        right: '20',
                        data: ['实时温度', '同期温度']
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value',
                        name: '℃',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#ccc'
                            },
                        },
                    },
                    series: series
                };
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('weatherChart1'), 'dark')
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            // 24小时实时风力
            getWeatherLine2() {
                let xAxis = []
                let series = []
                let temperatureObj = {
                    name: '实时风力',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let windspeedObj = {
                    name: '实时风速',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let historytemperatureObj = {
                    name: '同期风力',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                let historywindspeedObj = {
                    name: '同期风速',
                    type: 'line',
                    symbol: 'none',
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: 'Max'
                            },
                            {
                                type: 'min',
                                name: 'Min'
                            }
                        ]
                    },
                    data: []
                }
                this.weatherDataFromWeb['24_hour_forecast'].info.forEach((item, index) => {
                    if (index < 25) {
                        let d = item.hour.substring(4, 6) + '月'
                        let y = item.hour.substring(6, 8) + '日 '
                        let h = item.hour.substring(8) + ':00'
                        xAxis.push(d + y + h)
                        temperatureObj.data.push(item.wind_power_num)
                        for (let i in this.windSpeedComparison) {
                            if (i === item.wind_power_num) {
                                windspeedObj.data.push(Math.ceil(this.windSpeedComparison[i]))
                            }
                        }
                    }
                })
                if (this.historyWeatherDataFromWeb) {
                    this.historyWeatherDataFromWeb['24_hour_forecast'].info.forEach((item, index) => {
                        if (index < 25) {
                            historytemperatureObj.data.push(item.wind_power_num)
                            for (let i in this.windSpeedComparison) {
                                if (i === item.wind_power_num) {
                                    historywindspeedObj.data.push(Math.ceil(this.windSpeedComparison[i]))
                                }
                            }
                        }
                    })
                }
                series.unshift(temperatureObj)
                series.unshift(windspeedObj)
                series.unshift(historytemperatureObj)
                series.unshift(historywindspeedObj)
                let option = {
                    backgroundColor: '',
                    title: {
                        text: '24小时实时风力'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: ['#04ed7c', '#ff7800'],
                    legend: {
                        right: '20',
                        data: ['实时风速', '实时风力', '同期风速', '同期风力']
                    },
                    grid: {
                        left: '5%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: [{
                            type: 'value',
                            name: 'm/s',
                            min: 0,
                            max: 25,
                            axisLabel: {
                                margin: 10,
                                color: "#fff",
                                interval: 1,
                                show: true
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#0E8BFF",
                                },
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ccc'
                                },
                            }
                        },
                        {
                            type: 'value',
                            name: '级',
                            position: 'right',
                            min: 0,
                            max: 10,
                            axisLine: {
                                lineStyle: {
                                    color: "#0E8BFF",
                                },
                            },
                            axisTick: {
                                show: true,
                            },
                            axisLabel: {
                                margin: 10,
                                color: "#fff",
                                interval: 0,
                                show: true
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ccc'
                                },
                            }
                        }
                    ],
                    series: series
                };
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('weatherChart2'), 'dark')
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            getNowWeather(val) {
                let that = this
                let params = {
                    stationNumber: val
                }
                apiGetWeatherForecast(params).then(datas => {
                    console.log(datas)
                    if (datas.data.length > 1) {
                        datas.data.forEach(item => {
                            if (item.type === '当日') {
                                that.weatherDataFromWeb = JSON.parse(item.content)
                            } else {
                                that.historyWeatherDataFromWeb = JSON.parse(item.content)
                            }
                        })
                    } else {
                        that.weatherDataFromWeb = JSON.parse(datas.data[0].content)
                        that.historyWeatherDataFromWeb = null
                    }
                    that.showMsgData = []
                    let weatherTit = {
                        windBlue: 0,
                        windYellow: 0,
                        windOrange: 0,
                        windRed: 0,
                        rainBlue: 0,
                        rainYellow: 0,
                        rainOrange: 0,
                        rainRed: 0,
                        thunderYellow: 0,
                        thunderOrange: 0,
                        thunderRed: 0,
                        snowBlue: 0,
                        snowYellow: 0,
                        snowOrange: 0,
                        snowRed: 0
                    }
                    that.weatherDataFromWeb['24_hour_forecast'].info.forEach((item, index) => {
                        if (index < 25) {
                            if (item.wind_power_num === '6' || item.wind_power_num === '7') {
                                //大风蓝色预警
                                weatherTit.windBlue += 1
                            }
                            if (index < 13) {
                                if (item.wind_power_num === '8' || item.wind_power_num === '9') {
                                    //大风黄色预警
                                    weatherTit.windYellow += 1
                                    weatherTit.windBlue = 0
                                } else if (item.precipitation > '40' && item.precipitation <= '50' &&
                                    item.weather.indexOf('雨') !== -1) {
                                    //暴雨蓝色预警
                                    weatherTit.rainBlue += 1
                                } else if (item.precipitation > '3' && item.precipitation <= '4' && item
                                    .weather.indexOf('雪') !== -1) {
                                    //暴雪蓝色预警
                                    weatherTit.snowBlue += 1
                                } else if (item.precipitation >= '6' && item.weather.indexOf('雪') !== -
                                    1) {
                                    //暴雪黄色预警
                                    weatherTit.snowYellow += 1
                                    weatherTit.snowBlue = 0
                                }
                                if (index < 7) {
                                    if (item.wind_power_num === '10' || item.wind_power_num === '11') {
                                        //大风橙色预警
                                        weatherTit.windOrange += 1
                                        weatherTit.windYellow = 0
                                        weatherTit.windBlue = 0
                                    } else if (item.wind_power_num === '12' || item.wind_power_num ===
                                        '13') {
                                        //大风红色预警
                                        weatherTit.windRed += 1
                                        weatherTit.windOrange = 0
                                        weatherTit.windYellow = 0
                                        weatherTit.windBlue = 0
                                    } else if (item.weather.indexOf('雷') !== -1 || item.weather.indexOf(
                                            '电') !== -1) {
                                        //雷电黄色预警
                                        weatherTit.thunderYellow += 1
                                    } else if (item.precipitation > '40' && item.precipitation <= 50 &&
                                        item.weather.indexOf('雨') !== -1) {
                                        //暴雨黄色预警
                                        weatherTit.rainYellow += 1
                                        weatherTit.rainBlue = 0
                                    } else if (item.precipitation >= '10' && item.weather.indexOf(
                                            '雪') !== -1) {
                                        //暴雪橙色预警
                                        weatherTit.snowOrange += 1
                                        weatherTit.snowYellow = 0
                                        weatherTit.snowBlue = 0
                                    } else if (item.precipitation >= '15' && item.weather.indexOf(
                                            '雪') !== -1) {
                                        //暴雪红色预警
                                        weatherTit.snowRed += 1
                                        weatherTit.snowOrange = 0
                                        weatherTit.snowYellow = 0
                                        weatherTit.snowBlue = 0
                                    }
                                    if (index < 5) {
                                        if (item.weather.indexOf('雷') !== -1 || item.weather.indexOf(
                                                '电') !== -1) {
                                            //雷电橙色预警
                                            weatherTit.thunderOrange += 1
                                            weatherTit.thunderYellow = 0
                                        }
                                        if (index < 4) {
                                            if (item.precipitation > '50' && item.weather.indexOf(
                                                    '雨') !== -1) {
                                                //暴雨橙色预警
                                                weatherTit.rainOrange += 1
                                                weatherTit.rainYellow = 0
                                                weatherTit.rainBlue = 0
                                            } else if (item.precipitation >= '100' && item.weather
                                                .indexOf('雨') !== -1) {
                                                //暴雨红色预警
                                                weatherTit.rainRed += 1
                                                weatherTit.rainOrange = 0
                                                weatherTit.rainYellow = 0
                                                weatherTit.rainBlue = 0
                                            }
                                            if (index < 3) {
                                                if (item.weather.indexOf('雷') !== -1 || item.weather
                                                    .indexOf('电') !== -1) {
                                                    //雷电红色预警
                                                    weatherTit.thunderRed += 1
                                                    weatherTit.thunderOrange = 0
                                                    weatherTit.thunderYellow = 0
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    })

                    let useweatherTit = {}
                    for (let i in weatherTit) {
                        if (weatherTit[i] > 0) {
                            useweatherTit[i] = weatherTit[i]
                        }
                    }
                    if (Object.keys(useweatherTit).length > 0) {
                        for (let i in useweatherTit) {
                            let showMsgObj = {
                                name: that.windName,
                                data: []
                            }
                            for (let j = 0; j < this.messageDataxc.length; j++) {
                                if (this.messageDataxc[j].typeName === i) {
                                    showMsgObj.data.push(this.messageDataxc[j])
                                    this.showMsgData.push(showMsgObj)
                                }
                            }
                        }
                        that.getOnlyWeatherData(that.weatherDataFromWeb['24_hour_forecast'].info, that
                            .weatherDataFromWeb.weather, that.showMsgData, 'Y')
                    } else {
                        let showMsgObj = {
                            name: that.windName,
                            data: []
                        }
                        if (that.weatherDataFromWeb.weather.weather.indexOf('晴') !== -1 ||
                            that.weatherDataFromWeb.weather.weather.indexOf('扬沙') !== -1 ||
                            that.weatherDataFromWeb.weather.weather.indexOf('霾') !== -1 ||
                            that.weatherDataFromWeb.weather.weather.indexOf('浮尘') !== -1
                        ) {
                            showMsgObj.data.push(that.messageDataxc[15])
                        } else if (that.weatherDataFromWeb.weather.weather.indexOf('阴') !== -1 ||
                            that.weatherDataFromWeb.weather.weather.indexOf('雾') !== -1) {
                            showMsgObj.data.push(that.messageDataxc[16])
                        } else if (that.weatherDataFromWeb.weather.weather.indexOf('多云') !== -1) {
                            showMsgObj.data.push(that.messageDataxc[17])
                        } else if (that.weatherDataFromWeb.weather.weather.indexOf('雨') !== -1) {
                            showMsgObj.data.push(that.messageDataxc[18])
                        } else if (that.weatherDataFromWeb.weather.weather.indexOf('雪') !== -1) {
                            showMsgObj.data.push(that.messageDataxc[19])
                        } else if (that.weatherDataFromWeb.weather.weather.indexOf('雷电') !== -1) {
                            showMsgObj.data.push(that.messageDataxc[20])
                        }
                        that.showMsgData.push(showMsgObj)
                        that.getOnlyWeatherData(that.weatherDataFromWeb['24_hour_forecast'].info[0], that
                            .weatherDataFromWeb.weather, that.showMsgData, 'N')
                    }
                    that.init()
                })
                // this.$axios({
                //     method: "get",
                //     baseURL: '/apis/',
                //     url: 'weathernew/pc?query=宁夏银川天气&srcid=4982'
                // }).then(datas =>{
                //     let str = datas.data
                //     let index = str.indexOf('<!DOC')
                //     let a = str.substring(0, index)
                //     let reg = new RegExp('<script>', "")
                //     let b = a.replace(reg, "")
                //     let reg1 = b.lastIndexOf(";<")
                //     let c = b.substring(0, reg1)
                //     let index1 = c.indexOf(' {')
                //     let d = c.substring(index1, c.length)
                //     let e = d.substring(1, d.length)
                //     let f = e.substring(0, e.indexOf(';</'))
                //     console.log(f)
                //     console.log(JSON.parse(f))
                //     this.weatherDataFromWeb = JSON.parse(f)
                //     this.historyWeatherDataFromWeb = JSON.parse(f)
                //     this.init()

                // })
            },
            //获取天气预警的相关天气数据
            getOnlyWeatherData(datas, weather, arr, type) {
                for (let i = 0; i < arr.length; i++) {
                    let item = arr[i]
                    if (type === 'Y') {
                        for (let j = 0; j < datas.length; j++) {
                            let itn = datas[j]
                            if (j < 24) {
                                if ((itn.wind_power_num === '6' || itn.wind_power_num === '7') && item.data[0]
                                    .typeName === 'windBlue') {
                                    //大风蓝色预警
                                    item.weatherDetail = itn
                                    item.weather = weather
                                }
                                if (j < 13) {
                                    if ((itn.wind_power_num === '8' || itn.wind_power_num === '9') && item.data[0]
                                        .typeName === 'windYellow') {
                                        //大风黄色预警
                                        item.weatherDetail = itn
                                        item.weather = weather
                                    } else if (itn.precipitation > '40' && itn.precipitation <= '50' &&
                                        itn.weather.indexOf('雨') !== -1 && item.data[0].typeName === 'rainBlue') {
                                        //暴雨蓝色预警
                                        item.weatherDetail = itn
                                        item.weather = weather
                                    } else if (itn.precipitation > '3' && itn.precipitation <= '4' &&
                                        itn.weather.indexOf('雪') !== -1 && item.data[0].typeName === 'snowBlue') {
                                        //暴雪蓝色预警
                                        item.weatherDetail = itn
                                        item.weather = weather
                                    } else if (itn.precipitation >= '6' && itn.weather.indexOf('雪') !== -1 && item.data[
                                            0].typeName === 'snowYellow') {
                                        //暴雪黄色预警
                                        item.weatherDetail = itn
                                        item.weather = weather
                                    }
                                    if (j < 7) {
                                        if ((itn.wind_power_num === '10' || itn.wind_power_num === '11') && item.data[0]
                                            .typeName === 'windOrange') {
                                            //大风橙色预警
                                            item.weatherDetail = itn
                                            item.weather = weather
                                        } else if ((itn.wind_power_num === '12' || itn.wind_power_num === '13') && item
                                            .data[0].typeName === 'windRed') {
                                            //大风红色预警
                                            item.weatherDetail = itn
                                            item.weather = weather
                                        } else if ((itn.weather.indexOf('雷') !== -1 || itn.weather.indexOf('电') !== -
                                                1) && item.data[0].typeName === 'thunderYellow') {
                                            //雷电黄色预警
                                            item.weatherDetail = itn
                                            item.weather = weather
                                        } else if (itn.precipitation > '40' && itn.precipitation <= 50 &&
                                            itn.weather.indexOf('雨') !== -1 && item.data[0].typeName === 'rainYellow') {
                                            //暴雨黄色预警
                                            item.weatherDetail = itn
                                            item.weather = weather
                                        } else if (itn.precipitation >= '10' && itn.weather.indexOf('雪') !== -1 && item
                                            .data[0].typeName === 'snowOrange') {
                                            //暴雪橙色预警
                                            item.weatherDetail = itn
                                            item.weather = weather
                                        } else if (itn.precipitation >= '15' && itn.weather.indexOf('雪') !== -1 && item
                                            .data[0].typeName === 'snowRed') {
                                            //暴雪红色预警
                                            item.weatherDetail = itn
                                            item.weather = weather
                                        }
                                        if (j < 5) {
                                            if ((itn.weather.indexOf('雷') !== -1 || itn.weather.indexOf('电') !== -1) &&
                                                item.data[0].typeName === 'thunderOrange') {
                                                //雷电橙色预警
                                                item.weatherDetail = itn
                                                item.weather = weather
                                            }
                                            if (j < 4) {
                                                if (itn.precipitation > '50' && itn.weather.indexOf('雨') !== -1 && item
                                                    .data[0].typeName === 'rainOrange') {
                                                    //暴雨橙色预警
                                                    item.weatherDetail = itn
                                                    item.weather = weather
                                                } else if (itn.precipitation >= '100' && itn.weather.indexOf('雨') !== -
                                                    1 && item.data[0].typeName === 'rainRed') {
                                                    //暴雨红色预警
                                                    item.weatherDetail = itn
                                                    item.weather = weather
                                                }
                                                if (j < 3) {
                                                    if ((itn.weather.indexOf('雷') !== -1 || itn.weather.indexOf('电') !==
                                                            -1) && item.data[0].typeName === 'thunderRed') {
                                                        //雷电红色预警
                                                        item.weatherDetail = itn
                                                        item.weather = weather
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                            }
                        }
                    } else {
                        item.weatherDetail = datas
                        item.weather = weather
                    }
                }
            },
            getTime(date) {
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return m + '月' + d + '日'
            },
        }
    }
</script>

<style lang="less">
    .weatherPage {
        width: 100%;

        .weather_wind {
            .windStstus {
                display: flex;
                justify-content: space-around;
                align-items: center;
                background: #3a35ae;
                // background: rgb(13, 104, 188);
                margin: 0 10px;
                border: 1px solid #7674d8;
                border-radius: 10px 10px 0 0;
                border-bottom: none;
                height: 40px;

                .el-col {
                    display: flex;
                }

                .scrollbar {
                    .scrollbarName {
                        width: 5%;
                        font-size: 14px;
                        color: #fff;
                        position: relative;
                        top: 10px;
                        left: 20px;
                    }

                    .el-scrollbar {
                        width: 80%;

                        .scrollbar-flex-content {
                            display: flex;
                            width: 50%;

                            .scrollbar-demo-item {
                                flex-shrink: 0;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 0px 15px;
                                margin: 10px;
                                text-align: center;
                                border-radius: 4px;
                                border: 1px solid #8679df;
                                color: #fff;
                                font-size: 14px;
                                cursor: pointer;
                            }

                            .changeBacksty {
                                background-color: #504bb5 !important;
                            }

                            .defaultBacksty {
                                background-color: #373590 !important;
                            }
                        }

                        .el-scrollbar__bar {
                            display: block !important;
                            --el-scrollbar-opacity: 0.8;
                            --el-scrollbar-bg-color: #8679df;
                            // --el-scrollbar-hover-opacity: 0.5;
                            // --el-scrollbar-hover-bg-color: red;
                        }
                    }
                }
            }
        }

        .rainBackg {
            background: rgb(74, 87, 100);
            background-image: url('../../assets/windFramPicture/rain.png');
            background-repeat: no-repeat;
            background-position: 350px 0;
        }

        .yinBackg {
            background: rgb(74, 87, 100);
        }

        .sunBackg {
            background: rgb(13, 104, 188);
            background-image: url('../../assets/windFramPicture/sun.png');
            background-repeat: no-repeat;
            background-position: 840px 0;
        }

        .weatherMain {
            width: calc(100% - 20px);
            padding: 10px 0 10px 20px;
            // background: rgb(13, 104, 188);
            border-radius: 10px;

            .weatherOverview {
                width: 50%;
                position: relative;
                left: 20%;
                color: #fff;
                padding-left: 20px;
                padding-top: 1px;
                margin: 0px 10px 20px 10px;

                span {
                    display: inline-block;
                }

                .viewTop {
                    display: flex;
                    justify-content: space-between;
                    margin: 15px 0;

                    span {
                        margin-right: 10px;
                        font-size: 14px;
                    }

                    .viewTop_right {
                        margin-top: 5px;
                    }
                }

                .viewCenter {
                    display: flex;

                    .viewCenter_left {
                        font-size: 80px;
                        margin-right: 30px;
                    }

                    .viewCenter_right {
                        span {
                            font-size: 14px;
                            margin-right: 10px;
                        }

                        .quality {
                            width: 50px;
                            text-align: center;
                            background: rgb(64, 192, 87);
                            border-radius: 10px;
                            margin: 15px 0;
                            font-size: 14px;
                        }
                    }
                }

                .viewFooter {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;

                    .weaMsg {
                        span {
                            font-size: 14px;
                            margin-right: 10px;
                        }
                    }

                    .exceed {
                        display: flex;
                        margin-right: 20px;

                        span {
                            font-size: 14px;
                        }

                        .el-select {
                            width: 170px;
                            margin-right: 10px;

                            .el-input__inner {
                                height: 30px;
                                background-color: transparent;
                                color: #fff;
                                /* border: none; */
                                // width: 180px;
                            }

                            .el-input__suffix {
                                .el-select__caret {
                                    line-height: 30px;
                                }
                            }
                        }
                    }
                }
            }

            .weatherMessage {
                // width: 95%;
                // height: 600px;
                background-color: rgba(0, 0, 0, .1);
                margin: 20px auto;
                padding: 20px 17px 17px;
                border-radius: 10px;

                .messageData {
                    padding: 10px 10px 0 10px;

                    p {
                        color: #fff;
                        font-weight: 600;
                        line-height: 0;
                    }

                    .thunderstorm {
                        width: 35%;
                        display: flex;
                        padding: 20px;

                        .thunderstorm_img {
                            width: 110px;
                            height: 110px;
                            // overflow: hidden;
                            // float: left;
                            margin-right: 20px;
                            margin-top: 10px;

                            // shape-outside: circle();
                            img {
                                width: 110px;
                            }
                        }

                        span {
                            color: #fff;
                            font-weight: 600;
                            line-height: 25px;
                            text-indent: 2em;
                            display: inline-block;
                            // margin-top: 20px;
                        }
                    }

                    .msgDiv {
                        height: 180px;
                        width: 65%;
                        overflow-y: auto;

                        span {
                            font-size: 14px;
                        }

                        .titleSty {
                            display: inline-block;
                            width: 20%;
                            font-weight: 600;
                            cursor: pointer;
                        }

                        .msgSty {
                            position: relative;
                            display: inline-block;
                            width: 80%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            cursor: pointer;
                            color: #fff;

                            &:hover {
                                text-decoration: underline;
                            }
                        }

                        .el-divider {
                            margin: 12px 0 15px 0;
                        }
                    }

                }
            }

            .weatherStyle {
                width: 95%;
                height: 350px;
            }

            .weatherStyle1 {
                // width: 93%;
                // height: 270px;
                background-color: rgba(0, 0, 0, .1);
                margin: 20px auto;
                padding: 22px 17px 17px;
                border-radius: 10px;
            }
        }
    }
</style>