移动端 天气界面 示例

使用vue   vant   ,   代码可以复用。

<template>
    <van-row>
        <van-col span="24">
            <van-divider />
            <div class="title">Weather</div>
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}" />
        </van-col>
        <van-col span="24">
            <van-col span="12">
                <van-icon name="https://scpic.chinaz.net/Files/pic/icons128/7707/Dr9.png" size="90" />
            </van-col>
            <van-col span="12">
                <div class="Tdate">2020-8-15</div>
                <div class="Ttemperature">30℃</div>
                <div class="TtemperatureRange">20℃~30℃</div>
            </van-col>
        </van-col>
        <br /><br /><br /><br />
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px'}" />
        <van-col span="24">
            <van-col span="8">
                <div class="date">2020-8-16</div>
                <van-icon name="https://scpic.chinaz.net/Files/pic/icons128/7707/Dr2.png" />
                <div class="temperature">22℃</div>
                <div class="temperatureRange">22℃~34℃</div>
            </van-col>
            <van-col span="8">
                <div class="date">2020-8-17</div>
                <van-icon name="https://scpic.chinaz.net/Files/pic/icons128/7707/Dr15.png" />
                <div class="temperature">23℃</div>
                <div class="temperatureRange">23℃~37℃</div>
            </van-col>
            <van-col span="8">
                <div class="date">2020-8-18</div>
                <van-icon name="https://scpic.chinaz.net/Files/pic/icons128/7707/Dr13.png" />
                <div class="temperature">33℃</div>
                <div class="temperatureRange">27℃~35℃</div>
            </van-col>
        </van-col>
    </van-row>
</template>

<script>
// import { getAction } from '@/utils/http.js'
    export default {
        name: 'Weather',
        components: {},
        props: {},
        data() {
            return {}
        },
        methods: {}
    }
</script>
<style>
    .title {
        color: rgb(19, 152, 241);
        text-align: center;
    }

    div {
        text-align: center;
    }

    img {
        width: 100%;
        max-width: 100%;
    }

    /* 主显示区样式 一下分别为：日期 ， 当前温度 ， 今日温度范围  */
    .Tdate {
        font-size: 18px;
    }

    .Ttemperature {
        font-size: 25px;
    }

    .TtemperatureRange {
        font-size: 17px;
    }

    /* 次显示区样式  以下分别为： 日期  ， 对应日期天气温度 ， 对应日期温度范围 */
    .date {
        font-size: 15px;
    }

    .temperature {
        font-size: 20px;
    }

    .temperatureRange {
        font-size: 13px;
    }
</style>

效果图：