Vue 网络应用 - 天知道（天气预报）

body { font-family: 'Microsoft YaHei'; } .wrap { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; } .search_form { width: 640px; margin: 100px auto 0; } .logo img { display: block; margin: 0 auto; } .form_group { width: 640px; height: 40px; margin-top: 45px; } .input_txt { width: 538px; height: 38px; padding: 0px; float: left; border: 1px solid #41a1cb; outline: none; text-indent: 10px; } .input_sub { width: 100px; height: 40px; border: 0px; float: left; background-color: #41a1cb; color: #fff; font-size: 16px; outline: none; cursor: pointer; position: relative; } .input_sub.loading::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/loading.gif'); } .hotkey { margin: 3px 0 0 2px; } .hotkey a { font-size: 14px; color: #666; padding-right: 15px; } .weather_list { height: 200px; text-align: center; margin-top: 50px; font-size: 0px; } .weather_list li { display: inline-block; width: 140px; height: 200px; padding: 0 10px; overflow: hidden; position: relative; background: url('../img/line.png') right center no-repeat; background-size: 1px 130px; } .weather_list li:last-child { background: none; } .info_date { width: 100%; height: 40px; line-height: 40px; color: #999; font-size: 14px; left: 0px; bottom: 0px; margin-top: 15px; } .info_date b { float: left; margin-left: 15px; } .info_type span { color: #fda252; font-size: 30px; line-height: 80px; } .info_temp { font-size: 14px; color: #fda252; } .info_temp b { font-size: 13px; } .tem .iconfont { font-size: 50px; }