VUE 天气插件和日历插件

日历需要安装

cnpm i vue-calendar-component --save

 其他代码如下

<template>
  <div class="app-container home">
    <table style="width:100%;">
      <tr>
        <td style="vertical-align:top;">
          <el-col style="padding-left: 10px; float: left">
            <el-row :gutter="10">
              <el-col :span="6">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <!-- <div class="title">标题</div> -->
                  <div class="content" style="height: 120px">
                    <el-tabs value="first">
                      <el-tab-pane label="替换区域" name="first"
                        >替换区域</el-tab-pane
                      >
                    </el-tabs>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <!-- <div class="title">标题</div> -->
                  <div class="content" style="height: 120px">
                    <el-tabs value="first">
                      <el-tab-pane label="替换区域" name="first"
                        >替换区域</el-tab-pane
                      >
                    </el-tabs>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <!-- <div class="title">标题</div> -->
                  <div class="content" style="height: 120px">
                    <el-tabs value="first">
                      <el-tab-pane label="替换区域" name="first"
                        >替换区域</el-tab-pane
                      >
                    </el-tabs>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <!-- <div class="title">标题</div> -->
                  <div class="content" style="height: 120px">
                    <el-tabs value="first">
                      <el-tab-pane label="替换区域" name="first"
                        >替换区域</el-tab-pane
                      >
                    </el-tabs>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px" :gutter="10">
              <el-col :span="6">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <div class="title">标题</div>
                  <div class="content" style="height: 180px">替换区域</div>
                </el-card>
              </el-col>
              <el-col :span="18">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <div class="content" style="height: 223px">
                    <el-tabs value="first">
                      <el-tab-pane label="用户管理" name="first"
                        >用户管理</el-tab-pane
                      >
                      <el-tab-pane label="配置管理" name="second"
                        >配置管理</el-tab-pane
                      >
                      <el-tab-pane label="角色管理" name="third"
                        >角色管理</el-tab-pane
                      >
                      <el-tab-pane label="定时任务补偿" name="fourth"
                        >定时任务补偿</el-tab-pane
                      >
                    </el-tabs>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <el-card
              shadow="hover"
              :body-style="{ padding: '0px' }"
              style="margin-top: 10px"
            >
              <div class="title">标题</div>
              <div class="content" style="height: 180px">替换区域</div>
            </el-card>
            <el-card
              shadow="hover"
              :body-style="{ padding: '0px' }"
              style="margin-top: 10px"
            >
              <div class="title">标题</div>
              <div class="content" style="height: 180px">替换区域</div>
            </el-card>
            <el-row style="margin-top: 10px" :gutter="10">
              <el-col :span="12">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <div class="title">标题</div>
                  <div class="content" style="height: 180px">替换区域</div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <div class="title">标题</div>
                  <div class="content" style="height: 180px">替换区域</div>
                </el-card>
              </el-col>
            </el-row>
            <el-row style="margin-top: 10px" :gutter="10">
              <el-col :span="12">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <div class="title">标题</div>
                  <div class="content" style="height: 180px">替换区域</div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
                  <div class="title">标题</div>
                  <div class="content" style="height: 180px">替换区域</div>
                </el-card>
              </el-col>
            </el-row>
            <el-card
              shadow="hover"
              :body-style="{ padding: '0px' }"
              style="margin-top: 10px"
            >
              <div class="title">标题</div>
              <div class="content" style="height: 180px">替换区域</div>
            </el-card>
          </el-col>
        </td>
        <td style="width:300px;vertical-align:top;">
          <el-col style="padding-left: 10px; float: left">
            <el-card
              shadow="hover"
              style="height: 270px; padding: 0px"
              :body-style="{ padding: '0px' }"
            >
              <div id="he-plugin-standard"></div>
            </el-card>

            <el-card
              shadow="hover"
              style="height: 330px; margin-top: 10px"
              :body-style="{ padding: '0px' }"
            >
              <div class="con">
                <div class="now-data-myself">
                  <div class="now-data-myself-time">{{ date }}</div>
                  <div class="now-data-myself-week">{{ week }}</div>
                </div>
                <Calendar
                  v-on:choseDay="clickDay"
                  v-on:changeMonth="changeDate"
                  v-on:isToday="clickToday"
                ></Calendar>
              </div>
            </el-card>

            <el-card shadow="hover" style="height: 245px; margin-top: 10px">
              替换区域
            </el-card>
          </el-col>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";
export default {
  name: "index",
  components: {
    Calendar,
  },
  created() {
    var now = new Date();
    this.date = now.getDate(); //得到日期
    var day = now.getDay(); //得到周几
    var arr_week = new Array(
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六"
    );
    this.week = arr_week[day];
    //和风天气插件调用
    window.WIDGET = {
      CONFIG: {
        layout: "2",
        width: 300,
        height: 270,
        background: "1",
        dataColor: "FFFFFF",
        key: "1e6a2ab779504068bc84d42a4fc53885",
      },
    };
    (function (d) {
      var c = d.createElement("link");
      c.rel = "stylesheet";
      c.href =
        "https://widget.qweather.net/standard/static/css/he-standard.css?v=1.4.0";
      var s = d.createElement("script");
      s.src =
        "https://widget.qweather.net/standard/static/js/he-standard.js?v=1.4.0";
      var sn = d.getElementsByTagName("script")[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
      s.onload = () => {
        //自动宽度
        setInterval(() => {
          try {
            document.getElementById("he-plugin-standard").style.width = "100%";
            document.getElementById("he-plugin-standard").style.backgroundSize =
              "100% 100%";
            document.getElementsByClassName("wv-lt-refresh")[0].style.display =
              "none";
            //document.getElementsByClassName("wv-lt-location")[0].getElementsByTagName("a")[0].style.display="none";
            //document.getElementsByClassName("wv-lt-location")[0].getElementsByTagName("span")[0].style.display="none";
            var local = document
              .getElementsByClassName("wv-lt-location")[0]
              .getElementsByTagName("span")[0].innerText;
            document.getElementsByClassName("wv-lt-col-7")[0].innerHTML =
              "<div class='wv-lt-location' style='font-size:15px;'><span>" +
              local +
              "</span></div>";
          } catch (e) {}
        }, 500);
      };
    })(document);
  },
  data() {
    return {
      // 版本号
      version: "3.3.0",
      date: "",
      week: "",
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); // 跳到了本月
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  overflow-y: auto;
  height: calc(100vh - 36px);
  background-color: #f6f9f9;
  padding-bottom: 10px;
  padding-right: 10px;
}
.title {
  width: 100%;
  line-height: 43px;
  background-color: #0069e5;
  color: white;
  padding-left: 10px;
}
.content {
  padding: 5px;
  height: 70px;
}
.el-card {
  border-radius: 1px;
}
::v-deep .now-data-myself {
  width: 40%;
  position: absolute;
  border-right: 1px solid rgba(227, 227, 227, 0.6);
}
::v-deep .con {
  position: relative;
  max-width: 280px;
  margin: auto;
}
::v-deep .con .wh_content_all {
  background: transparent !important;
}
::v-deep .wh_top_changge li {
  color: #f56c6c !important;
  font-size: 15px !important;
}
::v-deep .wh_content_item,
::v-deep .wh_content_item_tag {
  color: #303133 !important;
}
::v-deep .wh_content_item .wh_isToday {
  background: #00d985 !important;
  color: #fff !important;
}
::v-deep .wh_content_item .wh_chose_day {
  background: #409eff !important;
  color: #ffff !important;
}
::v-deep .wh_item_date{
  width: 30px !important;
  height: 30px !important;
}
::v-deep .wh_item_date:hover {
  background: rgb(217, 236, 255) !important;
  border-radius: 100px !important;
  color: rgb(102, 177, 255) !important;
}
::v-deep .wh_jiantou1[data-v-2ebcbc83] {
  border-top: 2px solid #909399;
  border-left: 2px solid #909399;
  width: 7px;
  height: 7px;
}
::v-deep .wh_jiantou2[data-v-2ebcbc83] {
  border-top: 2px solid #909399;
  border-right: 2px solid #909399;
  width: 7px;
  height: 7px;
}
::v-deep .wh_top_tag[data-v-2ebcbc83] {
  color: #409eff;
  border-top: 1px solid rgba(227, 227, 227, 0.6);
  border-bottom: 1px solid rgba(227, 227, 227, 0.6);
}
::v-deep .wh_container[data-v-2ebcbc83] {
  max-width: 280px;
}
::v-deep .wh_top_changge[data-v-2ebcbc83] {
  display: flex;
  width: 50%;
  margin-left: 43%;
}
::v-deep .now-data-myself-time {
  color: #f56c6c;
  font-size: 23px;
  height: 30px;
  font-family: "Helvetica Neue";
  padding-left: 10px;
}
::v-deep .now-data-myself-week {
  font-size: 10px;
  color: #909399;
  padding-left: 10px;
}
::v-deep .wh_top_changge .wh_content_li[data-v-2ebcbc83] {
  font-family: Helvetica;
}
</style>