<template>
        <div>
                <div class='card h266'>
                        <screen-title>
                                <div slot="left" class="screen-title-left">和美移风</div>
                        </screen-title>
                        <div class="card-item-hmyf">
                                <div class="top">
                                        <img src="@/assets/images/weather/index0.png" alt="">
                                        <div>12°</div>
                                        <div>
                                                <span>多云</span>
                                                <span>4/12°C</span>
                                        </div>
                                        <div>
                                                良
                                        </div>
                                </div>
                                <div class="bto">
                                        <div class="item" v-for="(item, index) in weatherList" :key="index">
                                                <span>{{ item.units }}</span>
                                                <img :src="item.img" alt="">
                                                <span>{{ item.value }}</span>
                                        </div>
                                </div>
                        </div>
                </div>
                <div class='card h318' style="margin-top: 8px;">
                        <screen-title>
                                <div slot="left" class="screen-title-left">善治移风</div>
                        </screen-title>
                        <div class="card-item-szyf">
                                <video :src="videoUrl" style="width: 100%; height: 100%;" :controls="true" width="100%"
                                        height="100%" @play="handelVideoPlay" @pause="handelVideoPause"></video>
                        </div>

                </div>
                <div class='card h292 m-top12'>
                        <screen-title>
                                <div slot="left" class="screen-title-left">文化移风</div>
                        </screen-title>
                        <div class="card-item-whyf">
                                <div class="item" v-for="(item, index) in cultureList" :key="index">
                                        <img :src="item.imgSrc" alt="">
                                        <span>{{item.title}}</span>
                                </div>
                        </div>
                </div>
        </div>
</template>

<script>
export default {
        data() {
                return {
                        weatherList: [
                                {
                                        units: '温度',
                                        img: require('@/assets/images/weather/temperature.png'),
                                        value: '20~30°'
                                },
                                {
                                        units: '风力',
                                        img: require('@/assets/images/weather/windPower.png'),
                                        value: '3~4级'
                                },
                                {
                                        units: 'PM2.5',
                                        img: require('@/assets/images/weather/PM.png'),
                                        value: '21~46μg'
                                }
                        ],
                        videoStatus: '',
                        videoUrl: process.env.VUE_APP_VIDEO_URL + '1.mp4',
                        cultureList: [
                                { imgSrc: require('@/assets/images/resource/whyf/1.jpg'), title: '大欧鸟笼制作技艺' },
                                { imgSrc: require('@/assets/images/resource/whyf/2.jpg'), title: '虎头鞋虎头帽' },
                                { imgSrc: require('@/assets/images/resource/whyf/3.jpg'), title: '金吉友拳法' },
                                { imgSrc: require('@/assets/images/resource/whyf/4.jpg'), title: '张院簸箕制作技艺' },
                                { imgSrc: require('@/assets/images/resource/whyf/5.jpg'), title: '毛子埠升制作技艺' },
                                 { imgSrc: require('@/assets/images/resource/whyf/6.jpg'), title: '上铂金银器打造工艺' }
                        ]

                };
        },
        created() {
        },
        mounted() {

        },
        beforeDestroy() {
        },
        methods: {
                handelVideoPlay() {
                        this.videoStatus = 'play'
                },
                handelVideoPause() {
                        this.videoStatus = 'pause'
                }
        },
        components: {},
        computed: {},
        watch: {},
}
</script>

<style lang="scss" scoped>
.card {
        width: 100%;
        display: flex;
        flex-direction: column;

        &-item-hmyf {
                display: flex;
                flex-direction: column;
                padding: 20px 30px 20px 30px;
                box-sizing: border-box;

                >.top {
                        display: flex;
                        align-items: center;
                        margin-right: 9px;

                        img {
                                width: 70px;
                                height: 70px;
                        }

                        >:nth-child(2) {
                                text-shadow: 0 0 10px;
                                font-size: 48px;
                                margin-right: 25px;

                        }

                        >:nth-child(3) {
                                height: 100%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-evenly;
                                color: #BDCEEA;


                        }

                        >:nth-child(4) {
                                padding: 4px 16px 4px 23px;
                                height: 22px;
                                box-sizing: border-box;
                                background: #31609f;
                                border-radius: 11px;
                                font-size: 14px;
                                color: #ACBBD4;
                                line-height: 14px;
                                position: relative;
                                top: -15px;

                                &::after {
                                        content: '';
                                        position: absolute;
                                        left: 10px;
                                        top: 7px;
                                        width: 8px;
                                        height: 8px;
                                        border-radius: 50%;
                                        background: #E3FFFF;
                                }
                        }



                }

                >.bto {
                        margin-top: 16px;
                        display: flex;
                        justify-content: space-around;

                        >.item {
                                width: 120px;
                                height: 100px;
                                background: url('~@/assets/images/common/weather-card.png') no-repeat;
                                background-size: 100% 100%;
                                display: flex;
                                flex-direction: column;
                                align-items: center;

                                img {
                                        width: 30px;
                                        height: 30px;
                                        margin: 12px 0;
                                }

                                :nth-child(3) {
                                        color: #ACBBD4;
                                }
                        }

                }
        }

        &-item-szyf {
                padding: 16px;
                box-sizing: border-box;
        }

        &-item-whyf {
                padding: 16px 12px 12px 16px;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                .item {
                        width: 140px;
                        height: 108px;
                        border: 1px solid #9FCCFF;
                        display: flex;
                        flex-direction: column;
                        padding: 5px;
                        box-sizing: border-box;
                        margin: 0 4px 4px 0;
                        color: #BDCEEA;
                        font-size: 12px;
                        align-items: center;
                        img {
                                width: 130px;
                                height: 80px;
                        }
                }
        }


}
</style>
