td_official/src/views/demo/components/qixiang.vue

<template>
    <div class="cardItem">
        <el-card>
            <div class="tianqi"
                style="display: flex;flex-direction: column;align-items: center;background-color: #FAFAFA;border-radius: 10px;padding-bottom: 40px;">
                <div>
                    <img src="/assets/demo/Sunny.png" style="display: block; width: 100px;height: 100px;" alt="">
                </div>
                <div style="font-family: 'Alibaba-PuHuiTi-Bold';font-size: 24px;">
                    31℃
                </div>
                <div>晴朗</div>
                <div style="color: rgba(154, 154, 154, 1);font-size: 14px;">
                    紫外线强度：<span>高</span>
                </div>
                <div class="tianqi2">
                    <div class="item">
                        <div>
                            <img src="/assets/demo/shidu.png" alt="">
                        </div>
                        <div class="text">相对湿度： <span>45%</span></div>
                    </div>
                    <div class="item">
                        <div>
                            <img src="/assets/demo/qiangdu.png" alt="">
                        </div>
                        <div class="text">光照强度： <span>45%</span></div>
                    </div>
                    <div class="item">
                        <div>
                            <img src="/assets/demo/fengshu.png" alt="">
                        </div>
                        <div class="text">风速： <span>2.3m/s</span></div>
                    </div>
                    <div class="item">
                        <div>
                            <img src="/assets/demo/riluo.png" alt="">
                        </div>
                        <div class="text">日落时间： <span>19.45</span></div>
                    </div>
                </div>
            </div>
            <div class="weather-timeline">
                <div class="time-box">
                    <div class="time-item">
                        <div class="time">16:00</div>
                        <div class="temp">30°C</div>
                        <div class="img-box">
                            <img src="/assets/demo/Sunny.png" alt="">
                        </div>
                    </div>
                    <div class="time-item">
                        <div class="time">17:00</div>
                        <div class="temp">29°C</div>
                        <div class="img-box">
                            <img src="/assets/demo/Sunny.png" alt="">
                        </div>
                    </div>
                    <div class="time-item">
                        <div class="child">
                            <div class="time">18:00</div>
                            <div class="temp">25°C</div>
                            <div class="img-box">
                                <img src="/assets/demo/rain.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="time-item show">
                        <div class="time">现在</div>
                        <div class="temp">25°C</div>
                        <div class="img-box">
                            <img src="/assets/demo/rain.png" alt="">
                        </div>
                    </div>
                    <div class="time-item ">
                        <div class="time">20:00</div>
                        <div class="temp">25°C</div>
                        <div class="img-box">
                            <img src="/assets/demo/yin.png" alt="">
                        </div>
                    </div>
                    <div class="time-item">
                        <div class="time">21:00</div>
                        <div class="temp">20°C</div>
                        <div class="img-box">
                            <img src="/assets/demo/yin.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<style scoped lang="scss">
.cardItem {
    padding: -20px !important;
}

.tianqi2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;

    img {
        width: 40px;
        height: 40x;
        display: block;
    }

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;

        .text {
            margin-top: 10px;
        }
    }

}

.weather-timeline {
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin: 15px 0;

    .time {
        margin: 10px 0;
    }

    .img-box {
        width: 50px;
        height: 50px;
    }

    img {
        width: 100%;
        height: 100%;
        display: block;
    }

    // img[src*='Sunny'] {
    //     width: 50px;
    //     height: 50px;
    // }

    // img[src*='rain'] {
    //     width: 60px;
    //     height: 60px;
    // }


    padding: 15px;
    background: linear-gradient(to right, #D6E2FF, #DEEBFF);
    border-radius: 15px;

    .time-box {
        background: linear-gradient(to right, #447BFF, #67A3FD);
        display: flex;
        justify-content: space-between;
        border-radius: 10px;
        padding: 10px 20px;
        align-items: center;
    }

    .time-item.show {
        color: rgba(24, 109, 245, 1);
        position: relative;
        // z-index: 888;
        background-color: #fff;

    }

    .show::after {
        // color: rgba(24, 109, 245, 1);
        // position: relative;
        // z-index: 888;
        // background-color: #fff;
        content: '';
        position: absolute;
        width: 100%;
        height: 25px;
        // background-color: red;
        background-color: #fff;
        left: 0;
        border-radius: 0 0 25px 25px;
    }

    .show::before {
        // color: rgba(24, 109, 245, 1);
        // position: relative;
        // z-index: 888;
        // background-color: #fff;
        content: '';
        position: absolute;
        width: 100%;
        height: 25px;
        // background-color: red;
        background-color: #fff;
        left: 0;
        top: -25px;
        border-radius: 25px 25px 0 0;
    }

    // .show::after {
    //     content: '';
    //     position: absolute;
    //     height: 155px;
    //     background-color: #fff;
    //     z-index: 999;
    //     width: 100%;
    //     top: -25px;
    //     left: 0;
    //     border-radius: 20px;
    // }
}
</style>
<script setup>
</script>