| | |
| | | <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<f=ffffff&htf=ffffff&q=1&e=1&a=1&c=55591&w=100&h=36&align=left"></iframe> |
| | | </span> |
| | | </div> |
| | | </div> |
| | |
| | | .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 { |
| | |
| | | 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> |