使用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>
效果图: