vue天气预报

最新推荐文章于 2024-03-15 16:34:02 发布

@阿猫阿狗~

最新推荐文章于 2024-03-15 16:34:02 发布

阅读量694

点赞数

本文链接：https://blog.csdn.net/qq_25741071/article/details/108621666

版权

本文介绍如何使用Vue.js开发一款天气预报应用。我们将探讨如何从API获取天气数据、展示实时天气信息，包括温度、湿度、风速等，并讨论Vue组件化开发的方法和实践。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>20200422-vue-天气预报</title>
      <script src="https://image.tiancity.com/others/Scripts/jquery-1.7.2.min.js"></script>
      <link rel="stylesheet" type="text/css"
            href="https://img1.tiancitycdn.com/project1/csol/event/cs160203act/css/basic.css">
      <link rel="stylesheet" type="text/css"
            href="https://img1.tiancitycdn.com/project1/csol/event/2017/10/cs171018event/css/animate.css">
      <link rel="stylesheet" href="http://at.alicdn.com/t/font_1739942_fsu1pxac3hv.css">
      <link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">
      <script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>
      <style type="text/css">
      body{
   min-width:1200px;font-size:14px;background-image:linear-gradient(160deg,#a200ff 20%,#cf3700 80%);width:100%;height:1000px;overflow:hidden}
      .container{
   width: 780px;color:#fff;background:#222431;overflow:hidden;border-radius:20px;position:absolute;top:50%;left:50%;margin:-200px 0 0 -390px;height:400px;}
      .container{
   background:url(https://img1.tiancitycdn.com/cls/homepage/v1/images/pic/wp/wp125_1440x900.jpg) no-repeat;background-size:cover}
      .container .weather-side{
   width:200px;float:left;background:#588fc7;padding:8px 0 20px 30px;height:100%;background-image:linear-gradient(#5151e6 0,#72def1 45%,#5151e6 100%)}
      .container .weather-side .gradient{
   background:#999;position:absolute;top:0;left:0}
      .date-container{
   width:100%}
      .date-container h2{
   font-size:20px}
      .date-container span{
   display:block;font-size:20px;height:40px;line-height:40px;width:136px}
      .date-container span.date-day{
   height:80px}
      .weather-conteiner{
   margin:60px 0 30px 2px;position:relative;padding-top:92px}
      .weather-conteiner .weathewr-temp{
   font-size:20px;font-weight:900;font-family:cursive;padding:10px

最低0.47元/天解锁文章

@阿猫阿狗~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue天气预报

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti.
复制链接

扫一扫