4 files modified
27 files added
| New file |
| | |
| | | <!DOCTYPE html> |
| | | <html lang="en"> |
| | | |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | | <title>天气</title> |
| | | <!-- axios --> |
| | | <script src='../map/lib/axios.js'></script> |
| | | <script type="text/javascript" charset="utf-8" src="http://webapi.amap.com/maps?v=1.3&key=xxxxxx&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script> |
| | | <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> |
| | | <style> |
| | | #weather{ |
| | | font-weight: 400; |
| | | opacity: 0.7; |
| | | font-size: 14px; |
| | | } |
| | | </style> |
| | | </head> |
| | | |
| | | <body> |
| | | <div id="weather" v-if="begin"> |
| | | <span class="time"> |
| | | {{nowTime.year}}年{{nowTime.month}}月{{nowTime.day}}日 {{nowTime.hour}}:{{nowTime.minute}}:{{nowTime.second}} |
| | | </span> |
| | | <span class="weathers"> |
| | | {{weathers.nowWeather}} {{weathers.highTemperature}}-{{weathers.lowTemperature}} |
| | | </span> |
| | | </div> |
| | | <script> |
| | | var me = new Vue({ |
| | | el: '#weather', |
| | | data: { |
| | | begin: false, |
| | | weathers: { |
| | | nowWeather: '', |
| | | highTemperature: '', |
| | | lowTemperature: '', |
| | | }, |
| | | nowTime: { |
| | | year: '', |
| | | month: '', |
| | | day: '', |
| | | hour: '', |
| | | minute: '', |
| | | second: '', |
| | | }, |
| | | city: "南昌", |
| | | }, |
| | | methods: { |
| | | getNewTime() { |
| | | this.nowTime.year = (new Date()).getFullYear(); |
| | | this.nowTime.month = (new Date()).getMonth(); |
| | | this.nowTime.day = (new Date()).getDay(); |
| | | this.nowTime.hour = (new Date()).getHours() < 10? '0' + (new Date()).getHours():(new Date()).getHours(); |
| | | this.nowTime.minute = (new Date()).getMinutes() < 10? '0' + (new Date()).getMinutes():(new Date()).getMinutes(); |
| | | this.nowTime.second = (new Date()).getSeconds() < 10? '0' + (new Date()).getSeconds():(new Date()).getSeconds(); |
| | | }, |
| | | getWeather(){ |
| | | var that = this; |
| | | var url = `http://wthrcdn.etouch.cn/weather_mini?city=${this.city}` |
| | | axios.get(url).then((res)=>{ |
| | | var data = res.data.data, |
| | | nowDay = data.forecast[0]; |
| | | that.weathers.nowWeather = nowDay.type; |
| | | that.weathers.highTemperature = nowDay.high.slice(3); |
| | | that.weathers.lowTemperature = nowDay.low.slice(3); |
| | | that.begin = true; |
| | | }) |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getNewTime(); |
| | | setInterval(() => { |
| | | this.getNewTime(); |
| | | }, 1000); |
| | | setTimeout(() => { |
| | | this.getWeather(); |
| | | }, 200); |
| | | } |
| | | }) |
| | | </script> |
| | | |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | <div class="breadEval"> |
| | | <div class="breadTitle"> |
| | | <div class="titles">您的位置:</div> |
| | | <!-- <button @click="cc">cccc</button> --> |
| | | <!-- <el-breadcrumb-item style="position: relative;top: -3px;left: 5px">您的位置:</el-breadcrumb-item> --> |
| | | <!-- <el-breadcrumb-item v-show="!onceRouter" :to="{ path: '/wel/index' }">首页</el-breadcrumb-item> --> |
| | | <!-- <el-breadcrumb separator="/"> |
| | | <el-breadcrumb-item |
| | | :to="item.path" |
| | | v-for="item of breadListLast" |
| | | :key="item.path" |
| | | style="border: hotpink 1px solid" |
| | | > |
| | | {{ item.name }} |
| | | </el-breadcrumb-item> |
| | | </el-breadcrumb> --> |
| | | <div |
| | | class="ourCrumbsl" |
| | | v-for="(item, index) of breadListLast" |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="weather"> |
| | | <IFRAME |
| | | class="weatherif" |
| | | WIDTH="310" |
| | | HEIGHT="30" |
| | | src="./weather/index.html" |
| | | scrolling="no" |
| | | ></IFRAME> |
| | | </div> |
| | | <!-- <router-view></router-view> --> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import axios from "axios"; |
| | | |
| | | export default { |
| | | //面包屑解决方案,此方法只适用于面包屑与路由显示顺序一致,例如path:01/02/03 面包屑也是01/02/03 |
| | | data() { |
| | |
| | | if (this.isrf) { |
| | | //刷新读取localStorage |
| | | this.breadListLast = JSON.parse(localStorage.getItem("crumbsl")); |
| | | this.$store.commit("SET_SHOWDATAL", localStorage.getItem("crumbslname")); |
| | | this.$store.commit( |
| | | "SET_SHOWDATAL", |
| | | localStorage.getItem("crumbslname") |
| | | ); |
| | | } else { |
| | | //关闭重写 |
| | | var path = this.$route.path, |
| | |
| | | font-size: 14px; |
| | | height: 100%; |
| | | background: #f3f7fd; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .breadTitle { |
| | | padding: 20px 30px; |
| | | padding-left: 80px; |
| | |
| | | float: left; |
| | | font-weight: 400; |
| | | position: relative; |
| | | top: -3px; |
| | | top: 11.15px; |
| | | a { |
| | | font-weight: 400; |
| | | } |
| | | } |
| | | } |
| | | .weather { |
| | | position: relative; |
| | | top: 11.15px; |
| | | right: 10px; |
| | | .weatherif{ |
| | | border: transparent; |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | |
| | | homeItem: { |
| | | name: "首页", |
| | | source: "el-icon-s-home", |
| | | path: "/dataL/homeL", |
| | | path: "/wel/index", |
| | | }, |
| | | dataItem: { |
| | | name: "数据模式", |
| | |
| | | this.$router.push({ path: "/healthcode/healthcode" }); |
| | | }, |
| | | down3() { |
| | | this.$router.push({ path: "/parcel/parcel" }); |
| | | this.$router.push({ path: "/parcel/parcelKind" }); |
| | | }, |
| | | down4() { |
| | | this.$router.push({ path: "/animalHeat/animalHeat" }); |