hejianhao
2025-04-21 c08d0ebace5e9f20eb442ad7cb1db05d61ecbd0d
src/components/Header.vue
@@ -4,8 +4,9 @@
      <span class="time">{{ currentTime }}</span>
      <span class="date">{{ currentDate }}</span>
      <span class="weather">
        <i class="weather-icon"></i>
        {{ temperature }}°C
        <div class="weather-box"></div>
        <iframe allowtransparency="true" frameborder="0" width="100" height="36" scrolling="no"
          src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=3&t=1&v=0&d=3&bd=0&k=&f=ffffff&ltf=ffffff&htf=ffffff&q=1&e=1&a=1&c=55591&w=100&h=36&align=left"></iframe>
      </span>
    </div>
  </div>
@@ -60,22 +61,25 @@
.header {
  height: 120px;
  display: flex;
  position: fixed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100%;
  background: linear-gradient(to bottom, rgba(1, 85, 121, 0.8) 0%, rgba(1, 85, 121, 0.4) 40%, rgba(151, 190, 192, 0) 100%);
  z-index: 1000;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.time-weather {
  color: #fff;
  display: flex;
  gap: 20px;
  align-items: center;
  pointer-events: auto;
}
.time {
@@ -83,13 +87,16 @@
  font-weight: bold;
}
.date {
  color: #fff;
.weather {
  position: relative;
}
.weather {
  display: flex;
  align-items: center;
  gap: 5px;
.weather-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 36px;
  z-index: 1000;
}
</style>
</style>