123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- // 天气分析
- <template>
- <div class="weather">
- <div class="weather-info">
- <span class="svg-icon">
- <svg-icon class="weather-icon" svgid="svg-duoyun" />
- </span>
- <div>
- <div class="temperature">{{ temperature }} °</div>
- <div class="other">
- <span>{{ weather }}</span>
- <span>{{ windDirection }}</span>
- <span>{{ windSpeed }}</span>
- </div>
- </div>
- </div>
- <div class="other-info">
- <Row>
- <Col>
- <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
- <svg-icon svgid="svg-能见度" />
- </div>
- <div class="value">{{ visibility }}</div>
- <div class="text">能见度</div>
- </Col>
- <Col>
- <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
- <svg-icon svgid="svg-湿度" />
- </div>
- <div class="value">{{ humidity }}</div>
- <div class="text">湿度</div>
- </Col>
- <Col>
- <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
- <svg-icon svgid="svg-气压" />
- </div>
- <div class="value">{{ pressure }}</div>
- <div class="text">气压</div>
- </Col>
- <Col>
- <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
- <svg-icon svgid="svg-日出" />
- </div>
- <div class="value">{{ sunrise }}</div>
- <div class="text">日出时间</div>
- </Col>
- <Col>
- <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
- <svg-icon svgid="svg-日落" />
- </div>
- <div class="value">{{ sunset }}</div>
- <div class="text">日落时间</div>
- </Col>
- </Row>
- </div>
- </div>
- </template>
- <script>
- import Col from "@com/coms/grid/col.vue";
- import Row from "@com/coms/grid/row.vue";
- import SvgIcon from "@com/coms/icon/svg-icon.vue";
- export default {
- components: { Row, Col, SvgIcon },
- // 数据自己获取天气情况
- data() {
- return {
- weather: "阴", // 气象
- temperature: "11", // 温度
- windDirection: "北风", // 风向
- windSpeed: "3-4级", // 风速
- visibility: "20KM", //能见度
- humidity: "75.0%", // 湿度
- pressure: "994kPa", // 气压
- sunrise: "04:06", // 日出
- sunset: "18:50", // 日落
- };
- },
- };
- </script>
- <style lang="less" scoped>
- .weather {
- .weather-info {
- display: flex;
- margin-bottom: 0.741vh;
- .weather-icon {
- width: 4.63vh;
- height: 4.63vh;
- margin: 0 1.481vh;
- }
- .temperature {
- font-size: 2.407vh;
- }
- .other span {
- font-size: @fontsize-s;
- margin-right: 2.222vh;
- }
- }
- .other-info {
- text-align: center;
- font-size: @fontsize-s;
- .text {
- color: @font-color;
- font-size: 12px;
- // margin-bottom: 0.741vh;
- }
- .value {
- margin: 0.741vh 0 0 0;
- }
- .other-icon {
- margin: 0 auto;
- }
- }
- }
- </style>
|