天气

liuyg

2021-05-08 e8a345d9af55c0c18a6ac389d6ff2f111100e913

天气

 public/weather/index.html

@@ -8,10 +8,11 @@
    <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 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{
        #weather {
            font-weight: 400;
            opacity: 0.7;
            font-size: 14px;
@@ -36,7 +37,7 @@
                weathers: {
                    nowWeather: '',
                    highTemperature: '',
                    lowTemperature: '', 
                    lowTemperature: '',
                },
                nowTime: {
                    year: '',
@@ -53,16 +54,16 @@
                    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();
                    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(){
                getWeather() {
                    var that = this;
                    var url = `http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`
                    axios.get(url).then((res)=>{
                    axios.get(url).then((res) => {
                        var data = res.data.data,
                        nowDay = data.forecast[0];
                            nowDay = data.forecast[0];
                        that.weathers.nowWeather = nowDay.type;
                        that.weathers.highTemperature = nowDay.high.slice(3);
                        that.weathers.lowTemperature = nowDay.low.slice(3);
@@ -75,9 +76,7 @@
                setInterval(() => {
                    this.getNewTime();
                }, 1000);
                setTimeout(() => {
                    this.getWeather();
                }, 200);
                this.getWeather();
            }
        })
    </script>

 src/page/crumbsL/crumbsL.vue

@@ -19,13 +19,13 @@
      </div>
    </div>
    <div class="weather">
      <IFRAME
      <iframe
      class="weatherif"
        WIDTH="310"
        HEIGHT="30"
        src="./weather/index.html"
        width="310"
        height="30"
        src="/weather/index.html"
        scrolling="no"
      ></IFRAME>
      ></iframe>
    </div>
    <!-- <router-view></router-view> -->
  </div>
@@ -350,38 +350,35 @@
<style lang="scss" scoped>
.breadEval {
  color: rgba($color: #000000, $alpha: 0.7);
  position: relative;
  top: -10px;
  font-size: 14px;
  height: 100%;
  background: #f3f7fd;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .breadTitle {
    padding: 20px 30px;
    padding-left: 80px;
    // padding: 20px 30px;
    padding-left: 20px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    .titles {
      position: absolute;
      top: 17.15px;
      left: 5px;
      // position: absolute;
      // top: 17.15px;
      // left: 5px;
      font-weight: 400;
    }
    .ourCrumbsl {
      // border: hotpink 1px solid;
      float: left;
      font-weight: 400;
      position: relative;
      top: 11.15px;
      // position: relative;
      // top: 11.15px;
      a {
        font-weight: 400;
      }
    }
  }
  .weather {
    position: relative;
    top: 11.15px;
    right: 10px;
    .weatherif{
      border: transparent;