<template>
  <el-row class="wrape">
    <el-image
    class="bgc"
    :src="img3"
    ></el-image>
    <el-row class="bgcPad">
        <el-row class="top">
            <el-row class="add">
                <el-image
                class="img1"
                :src="img1"
                ></el-image>
                <el-row class="addName">广西</el-row>
            </el-row>
            <el-row class="weather" v-if="data">
                <div class="weatherImg">
                    <img :src="data.weather_pic" alt="" class="img2">
                </div>
                <div class="wd">
                    <el-row class="wdDX">{{data.temperature}}℃ <span class="weatherText">{{data.weather}}</span></el-row>
                </div>
            </el-row>
        </el-row>
        <el-row class="bottom">
            <span class="sd">
                湿度：{{data.sd}}RH
            </span>
            <span class="ph" v-if="data.aqiDetail">
                PM2.5：{{data.aqiDetail.pm2_5}}ug/m3
            </span>
        </el-row>
    </el-row>
  </el-row>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
        img1:require('@/assets/image/图层5@3x.png'),
        img2:require('@/assets/image/图层6@3x.png'),
        img3:require('@/assets/image/矩形 5 拷贝@3x.png'),
        data:{}
    };
  },

  created(){
      this.initData()
  },
  methods: {
    //初始化数据
    initData() {
      axios({
            method: 'get',
            url: 'https://smartpark.caih.com/dxapi/aliWeather?area=广西',
            timeout: 3000,
        }).then(res =>{
            this.data = res.data.showapi_res_body.now
            console.log(this.data.weather_pic)
        }).catch(err =>{
        })
    },
  }
};

</script>

<style lang="scss" scoped>
.wrape{

    padding:20px 3% 0;
    box-sizing: border-box;
    background-color: #fff;
    .bgc{
        width:94%;
        position: absolute;
        z-index: 0;
    }
    .bgcPad{
        padding:16px 14px;
        color:#fff;
        .top{
            padding-bottom:2px;
            border-bottom:1px solid #fff;
            .add{
                width:112px;
                height:52px;
                margin:7px 0 0 0px;
                background-color: #E67877;
                border-radius:26px;
                position: relative;
                display: inline-block;
                .img1{
                    width:21px;
                    margin:15px 0 0 20px;
                    display: inline-block;
                    vertical-align: top;
                }
                .addName{
                    display: inline-block;
                    font-size: 22px;
                    margin:10px 0 0 2px;
                    letter-spacing: 4px;
                }
            }
            .weather{
                margin-left:51px;
                top:-16px;
                display: inline-block;
                .weatherImg{
                    width:60px;
                    vertical-align: middle;
                    float:left;
                    .img2{
                        width:100%;
                    }
                } 
                .wd{
                    vertical-align: middle;
                    margin-left:8px;
                    display: inline-block;
                    width:calc(100% - 231px);
                    margin-top:8px;
                    .wdDX{
                        display: inline-block;
                        font-size: 22px;
                        width:90px;
                        letter-spacing: 2px;
                        font-weight: 700;
                        margin-top:15px;
                        .weatherText{
                            font-size: 9px;
                            font-weight: 400;
                            display: inline-block;
                            
                        }
                    }
                    .wdD-wdG{
                        margin-top:8px;
                        width:90px;
                        letter-spacing: 2px;
                    }
                }
            }
             
        }
        .bottom{
            font-size: 12px;
            margin:16px 0 0;
            letter-spacing: 2px;
            .sd{

            }
            .ph{
                margin-left:50px;
                
            }
        }
        
    }
}
</style>
