270 lines
20 KiB
HTML
270 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-cmn-Hans">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>JIAL个人主页</title>
|
|||
|
|
<meta name="author" content="iami">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|||
|
|
<meta name="HandheldFriendly" content="true">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../static/style/css/main.css">
|
|||
|
|
<link rel="icon" href="../static/image/avatar.jpg" type="image/x-icon">
|
|||
|
|
<!-- import CSS -->
|
|||
|
|
<link rel="stylesheet" href="../plugins/element-ui/index.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container" id="index-app">
|
|||
|
|
<div class="clock-wrapper" >
|
|||
|
|
<el-card>
|
|||
|
|
<div class="clock-digits">{{currentTime}}</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
<div class="calendar-wrapper">
|
|||
|
|
<el-calendar v-model="dateValue">
|
|||
|
|
<template slot="dateCell" slot-scope="{date, data}">
|
|||
|
|
<div :class="{ selected : isSelected(date, data) }">
|
|||
|
|
<div class="solar">{{ data.day.split('-')[2] }}</div>
|
|||
|
|
<div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarToLunar(date, data) }}</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-calendar>
|
|||
|
|
</div>
|
|||
|
|
<div class="weather-wrapper">
|
|||
|
|
<el-card>
|
|||
|
|
<div class="weather-title">
|
|||
|
|
<span>{{weather.city}}天气情况</span>
|
|||
|
|
<el-input
|
|||
|
|
ref=""
|
|||
|
|
placeholder="输入城市"
|
|||
|
|
v-model="inputCity"
|
|||
|
|
@keyup.enter.native="weatherSearch"
|
|||
|
|
>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<div class="weather-info">
|
|||
|
|
<div><i class="el-icon-sunny">  天 气 情 况 : {{weather.info}}</i></div>
|
|||
|
|
<div><i class="el-icon-sunrise-1">  当 前 温 度 : {{weather.temperature}} ℃</i></div>
|
|||
|
|
<div><i class="el-icon-cold-drink">  当 前 湿 度 : {{weather.humidity}} %</i></div>
|
|||
|
|
<div><i class="el-icon-guide">  当 前 风 向 : {{weather.direct}}</i></div>
|
|||
|
|
<div><i class="el-icon-ship">  当 前 风 速 : {{weather.power}}</i></div>
|
|||
|
|
<div><i class="el-icon-grape">  空 气 质 量 : {{weather.aqi}}</i></div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
<div class="content-container">
|
|||
|
|
<img class="avatar" src="../static/image/avatar.jpg"/>
|
|||
|
|
<div class="text part1">
|
|||
|
|
<div>
|
|||
|
|
<span class="letter"><div class="character">J</div> <span></span></span>
|
|||
|
|
<span class="letter"><div class="character">I</div> <span></span></span>
|
|||
|
|
<span class="letter"><div class="character">A</div> <span></span></span>
|
|||
|
|
<span class="letter"><div class="character"></div> <span></span></span>
|
|||
|
|
<span class="letter"><div class="character"></div> <span></span></span>
|
|||
|
|
<span class="letter"><div class="character">L</div> <span></span></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="position: relative">
|
|||
|
|
<el-input
|
|||
|
|
v-model="searchText"
|
|||
|
|
placeholder="请输入搜索内容"
|
|||
|
|
@keyup.enter.native="performSearch"
|
|||
|
|
clearable
|
|||
|
|
class="search-input"
|
|||
|
|
style="width: 600px;"
|
|||
|
|
>
|
|||
|
|
<!-- 左侧的搜索引擎选择 -->
|
|||
|
|
<template slot="prepend" s>
|
|||
|
|
<el-select style="width: 80px;" v-model="selectedEngine" placeholder="选择搜索引擎">
|
|||
|
|
<el-option label="百度" value="baidu"></el-option>
|
|||
|
|
<el-option label="Bing" value="bing"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</template>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
<span class="bio">
|
|||
|
|
<span style="transition-delay:2s" class="emphasis">落</span>
|
|||
|
|
<span style="transition-delay:.5s">霞与</span>
|
|||
|
|
<span style="transition-delay:1s">孤</span>
|
|||
|
|
<span style="transition-delay:1.5s">鹜</span>
|
|||
|
|
<span style="transition-delay:2s">齐</span>
|
|||
|
|
<span style="transition-delay:2.5s">飞</span>
|
|||
|
|
<span style="transition-delay:3s">，</span>
|
|||
|
|
<span style="transition-delay:3.5s">秋</span>
|
|||
|
|
<span style="transition-delay:4s">水</span>
|
|||
|
|
<span style="transition-delay:4.5s">共</span>
|
|||
|
|
<span style="transition-delay:5s">长</span>
|
|||
|
|
<span style="transition-delay:5.5s">天</span>
|
|||
|
|
<span style="transition-delay:6s" class="emphasis">一</span>
|
|||
|
|
<span style="transition-delay:6.5s">色</span>
|
|||
|
|
<span style="transition-delay:7s">。</span>
|
|||
|
|
</span>
|
|||
|
|
<div style="position: relative; left: 95px" >
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://5ime.cn" target="_blank">
|
|||
|
|
<img width="50px" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIC0yMCA1MTIgNTExIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPjxwYXRoIGQ9Im0xMCAzMi4yNjk1MzF2NDA4LjM5ODQzOGMwIDEyLjAyMzQzNyA5Ljc0NjA5NCAyMS43Njk1MzEgMjEuNzY5NTMxIDIxLjc2OTUzMWg0NDguNDYwOTM4YzEyLjAyMzQzNyAwIDIxLjc2OTUzMS05Ljc0NjA5NCAyMS43Njk1MzEtMjEuNzY5NTMxdi00MDguMzk4NDM4YzAtMTIuMDIzNDM3LTkuNzQ2MDk0LTIxLjc2OTUzMS0yMS43Njk1MzEtMjEuNzY5NTMxaC00NDguNDYwOTM4Yy0xMi4wMjM0MzcgMC0yMS43Njk1MzEgOS43NDYwOTQtMjEuNzY5NTMxIDIxLjc2OTUzMXptMCAwIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMxLjc2OTUzMSAxMC41aDQ0OC40NjA5MzhjMTIuMDIzNDM3IDAgMjEuNzY5NTMxIDkuNzQ2MDk0IDIxLjc2OTUzMSAyMS43Njk1MzF2NzQuMDE5NTMxaC00OTJ2LTc0LjAxOTUzMWMwLTEyLjAyMzQzNyA5Ljc0NjA5NC0yMS43Njk1MzEgMjEuNzY5NTMxLTIxLjc2OTUzMXptMCAwIiBmaWxsPSIjNzJkOGZmIi8+PHBhdGggZD0ibTY3LjE3OTY4OCA0OC4zOTQ1MzFoLS4xMDE1NjNjLTUuNTIzNDM3IDAtMTAgNC40NzY1NjMtMTAgMTAgMCA1LjUyMzQzOCA0LjQ3NjU2MyAxMCAxMCAxMGguMTAxNTYzYzUuNTIzNDM3IDAgMTAtNC40NzY1NjIgMTAtMTAgMC01LjUyMzQzNy00LjQ3NjU2My0xMC0xMC0xMHptMCAwIi8+PHBhdGggZD0ibTExNi43MTA5MzggNDguMzk0NTMxaC0uMTAxNTYzYy01LjUyMzQzNyAwLTEwIDQuNDc2NTYzLTEwIDEwIDAgNS41MjM0MzggNC40NzY1NjMgMTAgMTAgMTBoLjEwMTU2M2M1LjUyMzQzNyAwIDEwLTQuNDc2NTYyIDEwLTEwIDAtNS41MjM0MzctNC40NzY1NjMtMTAtMTAtMTB6bTAgMCIvPjxwYXRoIGQ9Im0xNjYuMjQyMTg4IDQ4LjM5NDUzMWgtLjEwMTU2M2MtNS41MjM0MzcgMC0xMCA0LjQ3NjU2My0xMCAxMCAwIDUuNTIzNDM4IDQuNDc2NTYzIDEwIDEwIDEwaC4xMDE1NjNjNS41MjM0MzcgMCAxMC00LjQ3NjU2MiAxMC0xMCAwLTUuNTIzNDM3LTQuNDc2NTYzLTEwLTEwLTEwem0wIDAiLz48cGF0aCBkPSJtNDQ0LjMwODU5NCA0OC4zOTQ1MzFoLTE5Mi45Mjk2ODhjLTUuNTIzNDM3IDAtMTAgNC40NzY1NjMtMTAgMTAgMCA1LjUxOTUzMSA0LjQ3NjU2MyAxMCAxMCAxMGgxOTIuOTI5Njg4YzUuNTIzNDM3IDAgMTAtNC40ODA0NjkgMTAtMTAgMC01LjUyMzQzNy00LjQ3NjU2My0xMC0xMC0xMHptMCAwIi8+PHBhdGggZD0ibTI2Mi44OTA2MjUgNDUyLjQzNzVjLTIuNjI4OTA2IDAtNS4xOTkyMTkgMS4wNzAzMTItNy4wNzAzMTMgMi45Mjk2ODgtMS44NTkzNzQgMS44NTkzNzQtMi45Mjk2ODcgNC40NDE0MDYtMi45Mjk2ODcgNy4wNzAzMTJzMS4wNzAzMTMgNS4yMTA5MzggMi45Mjk2ODcgNy4wNzAzMTJjMS44NzEwOTQgMS44NTkzNzYgNC40NDE0MDcgMi45Mjk2ODggNy4wNzAzMTMgMi45Mjk2ODhzNS4yMTA5MzctMS4wNzAzMTIgNy4wNzAzMTMtMi45Mjk2ODhjMS44NjcxODctMS44NTkzNzQgMi45Mjk2ODctNC40NDE0MDYgMi45Mjk2ODctNy4wNzAzMTJzLTEuMDYyNS01LjIxMDkzOC0yLjkyOTY4Ny03LjA3MDMxMmMtMS44NTkzNzYtMS44NTkzNzYtNC40NDE0MDctMi45Mjk2ODgtNy4wNzAzMTMtMi45Mjk2ODh6bTAgMCIvPjxwYXRoIGQ9Im00ODAuMjMwNDY5LjVoLTQ0OC40NjA5MzhjLTE3LjUxNTYyNSAwLTMxLjc2OTUzMSAxNC4yNTM5MDYtMzEuNzY5NTMxIDMxLjc2OTUzMXY0MDguMzk4NDM4YzAgMTcuNTE5NTMxIDE0LjI1MzkwNiAzMS43Njk1MzEgMzEuNzY5NTMxIDMxLjc2OTUzMWgxODkuMjMwNDY5YzUuNTIzNDM4IDAgMTAtNC40NzY1NjIgMTAtMTBzLTQuNDc2NTYyLTEwLTEwLTEwaC0xODkuMjMwNDY5Yy02LjQ4ODI4MSAwLTExLjc2OTUzMS01LjI3NzM0NC0xMS43Njk1MzEtMTEuNzY5NTMxdi0zMjQuMzc4OTA3aDQ3MnYzMjQuMzc4OTA3YzAgNi40ODgyODEtNS4yODEyNSAxMS43Njk1MzEtMTEuNzY5NTMxIDExLjc2OTUzMWgtMTc2LjU2MjVjLTUuNTIzNDM4IDAtMTAgNC40NzY1NjItMTAgMTBzNC40NzY1NjIgMTAgMTAgMTBoMTc2LjU2MjVjMTcuNTE1NjI1IDAgMzEuNzY5NTMxLTE0LjI1IDMxLjc2OTUzMS0zMS43Njk1MzF2LTQwOC4zOTg0MzhjMC0xNy41MTU2MjUtMTQuMjUzOTA2LTMxLjc2OTUzMS0zMS43Njk1MzEtMzEuNzY5NTMxem0tNDYwLjIzMDQ2OSA5NS43ODUxNTZ2LTY0LjAxNTYyNWMwLTYuNDg4MjgxIDUuMjgxMjUtMTEuNzY5NTMxIDExLjc2OTUzMS0xMS43Njk1MzFoNDQ4LjQ2MDkzOGM2LjQ4ODI4MSAwIDExLjc2OTUzMSA1LjI4MTI1IDExLjc2OTUzMSAxMS43Njk1MzF2NjQuMDE5NTMxaC00NzJ6bTAgMCIvPjxwYXRoIGQ9Im0xNzguMDM5MDYyIDIzMC41YzAtMTkuODUxNTYyLTE2LjE0ODQzNy0zNi0zNi0zNmgtMzMuNjY3OTY4Yy01LjUyMzQzOCAwLTEwIDQuNDc2NTYyLTEwIDEwdjEwNGMwIDUuNTIzNDM4IDQuNDc2NTYyIDEwIDEwIDEwaDMzLjY2Nzk2OGMxOS44NTE1NjMgMCAzNi0xNi4xNDg0MzggMzYtMzYgMC0xMC4yMTQ4NDQtNC4yODEyNS0xOS40NDE0MDYtMTEuMTQwNjI0LTI2IDYuODU5Mzc0LTYuNTU4NTk0IDExLjE0MDYyNC0xNS43ODUxNTYgMTEuMTQwNjI0LTI2em0tMjAgNTJjMCA4LjgyMDMxMi03LjE3OTY4NyAxNi0xNiAxNmgtMjMuNjY3OTY4di0zMmgyMy42Njc5NjhjOC44MjAzMTMgMCAxNiA3LjE3NTc4MSAxNiAxNnptLTM5LjY2Nzk2OC0zNnYtMzJoMjMuNjY3OTY4YzguODI0MjE5IDAgMTYgNy4xNzk2ODggMTYgMTZzLTcuMTc1NzgxIDE2LTE2IDE2em0wIDAiLz48cGF0aCBkPSJtMjA2LjY0ODQzOCAxOTQuNWMtNS41MjM0MzggMC0xMCA0LjQ3NjU2Mi0xMCAxMHY4MC44NzEwOTRjMCAxOC4yNjk1MzEgMTQuODYzMjgxIDMzLjEyODkwNiAzMy4xMjg5MDYgMzMuMTI4OTA2IDUuNTIzNDM3IDAgMTAtNC40NzY1NjIgMTAtMTBzLTQuNDc2NTYzLTEwLTEwLTEwYy03LjIzODI4MiAwLTEzLjEyODkwNi01Ljg5M
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://mail.qq.com/" target="_blank">
|
|||
|
|
<img width="50px" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSItMSAwIDQ5OCA0OTguNTg0IiB3aWR0aD0iNTEycHgiPjxwYXRoIGQ9Im0yNDguMjkyOTY5IDAtMjQ4IDIxNC45Mjk2ODh2MjgzLjY1NjI1aDQ5NnYtMjgzLjY1NjI1em0tNjkuNDY0ODQ0IDM2Mi4xOTkyMTktMTYyLjUzNTE1NiAxMTMuMDc0MjE5di0yNDAuMjczNDM4em0xODEuNDY0ODQ0LTUzLjU5NzY1Ny01OC43NjE3MTkgNDUuOTg0Mzc2aC0xMDYuNDgwNDY5bC01OC43NTc4MTItNDUuOTg0Mzc2di0xNDYuMDE1NjI0aDIyNHptLTE2NS40ODgyODEgNjEuOTg0Mzc2aDEwNi45Njg3NWwxNjEgMTEyaC00MjguOTY4NzV6bTEyMi45NTMxMjQtOC4zODY3MTkgMTYyLjUzNTE1Ny0xMjcuMTk5MjE5djI0MC4yNzM0Mzh6bTE1Ny45NTcwMzItMTQzLjkyNTc4MS05OS40MjE4NzUgNzcuODA0Njg3di0xNDkuNDkyMTg3aC0yNTZ2MTQ5LjQ5MjE4N2wtOTkuNDI1NzgxLTc3LjgwNDY4NyAyMjcuNDI1NzgxLTE5Ny4xMDU0Njl6bTAgMCIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGQ9Im0xNTIuMjkyOTY5IDE3OC41ODU5MzhoMTkydjE2aC0xOTJ6bTAgMCIgZmlsbD0iIzAwMDAwMCIvPjxwYXRoIGQ9Im0xNTIuMjkyOTY5IDIxMC41ODU5MzhoMzJ2MTZoLTMyem0wIDAiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJtMjAwLjI5Mjk2OSAyMTAuNTg1OTM4aDE0NHYxNmgtMTQ0em0wIDAiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJtMTUyLjI5Mjk2OSAyNDIuNTg1OTM4aDE5MnYxNmgtMTkyem0wIDAiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJtMTUyLjI5Mjk2OSAyNzQuNTg1OTM4aDE2MHYxNmgtMTYwem0wIDAiIGZpbGw9IiMwMDAwMDAiLz48cGF0aCBkPSJtMzI4LjI5Mjk2OSAyNzQuNTg1OTM4aDE2djE2aC0xNnptMCAwIiBmaWxsPSIjMDAwMDAwIi8+PHBhdGggZD0ibTE5Mi4yOTI5NjkgMzA2LjU4NTkzOGgxMTJ2MTZoLTExMnptMCAwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+Cg=="/>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://leetcode.cn/" target="_blank">
|
|||
|
|
<img width="50px" src="../static/image/leetcode.png"/>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://www.bing.com/" target="_blank">
|
|||
|
|
<img width="50px" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMkQ1MjdDOyIgZD0iTTQzMi40NjQsNTEyaC0zNy43NjZjLTguMDIxLDAtMTQuNTIzLTYuNTAyLTE0LjUyMy0xNC41MjNzNi41MDItMTQuNTIzLDE0LjUyMy0xNC41MjNoMzcuNzY2ICAgYzI3LjgzOSwwLDUwLjQ5LTIyLjY1LDUwLjQ5LTUwLjQ5Vjc5LjUzNmMwLTI3LjgzOS0yMi42NS01MC40OS01MC40OS01MC40OUgyMTQuMzY3Yy04LjAyMSwwLTE0LjUyMy02LjUwMi0xNC41MjMtMTQuNTIzICAgUzIwNi4zNDYsMCwyMTQuMzY3LDBoMjE4LjA5N0M0NzYuMzIxLDAsNTEyLDM1LjY3OSw1MTIsNzkuNTM2djM1Mi45MjhDNTEyLDQ3Ni4zMjEsNDc2LjMyMSw1MTIsNDMyLjQ2NCw1MTJ6Ii8+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMkQ1MjdDOyIgZD0iTTI4OS42OTMsNTEySDc5LjUzNkMzNS42NzksNTEyLDAsNDc2LjMyMSwwLDQzMi40NjRWNzkuNTM2QzAsMzUuNjc5LDM1LjY3OSwwLDc5LjUzNiwwaDMyLjY4NCAgIGM4LjAyMSwwLDE0LjUyMyw2LjUwMiwxNC41MjMsMTQuNTIzcy02LjUwMiwxNC41MjMtMTQuNTIzLDE0LjUyM0g3OS41MzZjLTI3LjgzOSwwLTUwLjQ5LDIyLjY1LTUwLjQ5LDUwLjQ5djM1Mi45MjggICBjMCwyNy44MzksMjIuNjUsNTAuNDksNTAuNDksNTAuNDloMjEwLjE1N2M4LjAyMSwwLDE0LjUyMyw2LjUwMiwxNC41MjMsMTQuNTIzUzI5Ny43MTQsNTEyLDI4OS42OTMsNTEyeiIvPgo8L2c+CjxwYXRoIHN0eWxlPSJmaWxsOiNDRUU4RkE7IiBkPSJNMzk3LjA5NCwxMjAuNjkzbC0yOTYuMDksMTE1LjM4NWMtOS41OTMsMy43MzgtOS4wMDksMTcuNSwwLjg2NCwyMC40MTJsNjcuNjMzLDE5Ljk2OWwyMS4wMjIsNzguNzE1ICBjMi45MzIsOS4zMDgsMTQuNzI1LDEyLjEyNywyMS41NTIsNS4xNTdsNDEuNjIzLTM5LjcyMmw4OC4yNzMsNjguNjYxYzkuMzQxLDYuODU2LDIyLjY0MywxLjc2LDI1LjAxNS05LjU3OGw1MC41NTItMjQxLjY5ICBDNDIwLjAxMywxMjYuMTYyLDQwOC4zNjYsMTE2LjMsMzk3LjA5NCwxMjAuNjkzTDM5Ny4wOTQsMTIwLjY5M3oiLz4KPGc+Cgk8cGF0aCBzdHlsZT0iZmlsbDojMkQ1MjdDOyIgZD0iTTM1MS4zNDgsNDA2Ljg5NWgtMC4wMDFjLTYuNDgzLDAtMTIuNjk4LTIuMDQ2LTE3Ljk2OS01LjkxNWMtMC4xMDktMC4wOC0wLjIxNi0wLjE2MS0wLjMyMi0wLjI0NCAgIGwtNzguMzg5LTYwLjk3NGwtMzIuNDIsMzAuOTRjLTUuMTg1LDUuMTg4LTEyLjA0Nyw4LjA0LTE5LjM1Niw4LjA0Yy0xMi4wNjQsMC0yMi42MDEtNy43MTYtMjYuMjE5LTE5LjIwMiAgIGMtMC4wNjQtMC4yMDUtMC4xMjUtMC40MS0wLjE4LTAuNjE3bC0xOC45MTgtNzAuODQxbC01OS44MTgtMTcuNjYyYy0xMC41NDUtMy4xMTItMTcuNjYzLTEyLjIyMy0xOC4xMjgtMjMuMjA5ICAgYy0wLjQ2Ni0xMC45ODgsNS44NTYtMjAuNjY5LDE2LjEwNS0yNC42NjNsMjk2LjA5LTExNS4zODVjMy41MDItMS4zNjUsNy4xNTEtMi4wNTYsMTAuODQ5LTIuMDU2YzguOTY1LDAsMTcuMzgxLDQuMDMsMjMuMDksMTEuMDU2ICAgYzUuNjUxLDYuOTU1LDcuODM1LDE2LDUuOTkxLDI0LjgxNGwtNTAuNTU0LDI0MS42OUMzNzguMjY0LDM5Ni43MDUsMzY1LjcxLDQwNi44OTUsMzUxLjM0OCw0MDYuODk1eiBNMzUwLjY1MiwzNzcuNjI2ICAgYzAuMjM1LDAuMTU1LDAuNDQ5LDAuMjIyLDAuNjk2LDAuMjIyYzAuMTIxLDAsMS4xOTEtMC4wMywxLjQyMi0xLjEyOGw1MC41NTItMjQxLjY5YzAuMDU3LTAuMjcyLDAuMDM2LTAuMzgxLTAuMTAzLTAuNTUyICAgYy0wLjE1MS0wLjE4Ni0wLjM4OC0wLjMyNy0wLjU0OC0wLjMyN2MtMC4wNzMsMC0wLjE4LDAuMDI2LTAuMzAyLDAuMDc0TDExNi40MzksMjQ1LjY1bDU3LjE3MywxNi44ODIgICBjNC44NTQsMS40MzMsOC42MTIsNS4yOTIsOS45MTksMTAuMTgybDIwLjE3MSw3NS41MzJsMzkuOTY4LTM4LjE0MmM1LjIwNS00Ljk2OCwxMy4yNjQtNS4zNzUsMTguOTQzLTAuOTU3TDM1MC42NTIsMzc3LjYyNnoiLz4KCTxwYXRoIHN0eWxlPSJmaWxsOiMyRDUyN0M7IiBkPSJNMjE5LjY3NywzNjAuMjA5YzAuNDU2LDEuNDc2LDE3LjA5NS0xOS4zMjQsMTcuMjcyLTIwLjg2MmwtNy40NjMtMzYuNTM2ICAgYy0wLjk4My00LjgxMywwLjc2MS05Ljc3Niw0LjUzOC0xMi45MTVsMTM2Ljc5OC0xMTMuNjc0YzMuMjkyLTIuOTEzLTAuNTMyLTguMDUtNC4yNjUtNS43MzdMMjA1LjY5LDI2OC42MDEgICBjLTMuODE0LDIuMzI3LTUuNzgyLDYuNzc1LTQuOTM5LDExLjE2MUwyMTkuNjc3LDM2MC4yMDl6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg=="/>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 底部footer -->
|
|||
|
|
<el-footer class="footer-container" >
|
|||
|
|
<!-- 办案信息展示区域 -->
|
|||
|
|
<div class="case-info">
|
|||
|
|
<!-- 在这里绑定Vue数据来展示办案信息 -->
|
|||
|
|
<div>Designed by JIAL 2023. Permission granted for redistribution.</div>
|
|||
|
|
<div><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=64020202000218&token=4adb4592-9573-41b6-ab1c-a23850030e0d" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;" target="_blank" >宁公网安备 64020202000218号</a></div>
|
|||
|
|
<div><a href="https://beian.miit.gov.cn/?token=4adb4592-9573-41b6-ab1c-a23850030e0d#/Integrated/index" target="_blank" >宁ICP备2022000681号</a></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</el-footer>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript" src="../static/style/js/main.js"></script>
|
|||
|
|
<!-- import Vue before Element -->
|
|||
|
|
<script src="../plugins/vue/vue.js"></script>
|
|||
|
|
<!-- import JavaScript -->
|
|||
|
|
<script src="../plugins/element-ui/index.js"></script>
|
|||
|
|
<script src="../plugins/calendar/calendar.js"></script>
|
|||
|
|
<script src="../plugins/axios/axios.min.js"></script>
|
|||
|
|
<script src="../plugins/axios/request.js"></script>
|
|||
|
|
<script src="../static/style/js/index.js"></script>
|
|||
|
|
<script>
|
|||
|
|
new Vue({
|
|||
|
|
el: '#index-app',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
currentTime: "",
|
|||
|
|
searchText: '',
|
|||
|
|
selectedEngine: 'baidu', // 默认选中百度
|
|||
|
|
dateValue: new Date(),
|
|||
|
|
selectedDates: [],
|
|||
|
|
inputCity: "",
|
|||
|
|
weather: {
|
|||
|
|
city: "宜兴",
|
|||
|
|
temperature: "",
|
|||
|
|
info: "",
|
|||
|
|
humidity: "",
|
|||
|
|
direct: "",
|
|||
|
|
power: "",
|
|||
|
|
aqi: ""
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
console.log("页面重启中");
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 更新时钟
|
|||
|
|
this.updateClock();
|
|||
|
|
setInterval(this.updateClock, 1000);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async init () {
|
|||
|
|
console.log("页面重启中");
|
|||
|
|
},
|
|||
|
|
updateClock() {
|
|||
|
|
const now = new Date();
|
|||
|
|
const hours = this.padZero(now.getHours());
|
|||
|
|
const minutes = this.padZero(now.getMinutes());
|
|||
|
|
const seconds = this.padZero(now.getSeconds());
|
|||
|
|
|
|||
|
|
// 格式化时间为 HH:mm:ss
|
|||
|
|
this.currentTime = `${hours}:${minutes}:${seconds}`;
|
|||
|
|
},
|
|||
|
|
padZero(value) {
|
|||
|
|
return value < 10 ? `0${value}` : value;
|
|||
|
|
},
|
|||
|
|
// 是否选中日期
|
|||
|
|
isSelected : function(slotDate, slotData) {
|
|||
|
|
return this.selectedDates.includes(slotData.day)
|
|||
|
|
},
|
|||
|
|
// 是否节假日
|
|||
|
|
isFestival(slotDate, slotData) {
|
|||
|
|
let solarDayArr = slotData.day.split('-');
|
|||
|
|
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
|
|||
|
|
|
|||
|
|
// 公历节日\农历节日\农历节气
|
|||
|
|
let festAndTerm = [];
|
|||
|
|
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
|
|||
|
|
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
|
|||
|
|
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
|
|||
|
|
festAndTerm = festAndTerm.join('')
|
|||
|
|
|
|||
|
|
return festAndTerm != ''
|
|||
|
|
},
|
|||
|
|
// 公历转农历
|
|||
|
|
solarToLunar(slotDate, slotData) {
|
|||
|
|
let solarDayArr = slotData.day.split('-');
|
|||
|
|
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
|
|||
|
|
|
|||
|
|
// 农历日期
|
|||
|
|
let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
|
|||
|
|
|
|||
|
|
// 公历节日\农历节日\农历节气
|
|||
|
|
let festAndTerm = [];
|
|||
|
|
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
|
|||
|
|
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
|
|||
|
|
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
|
|||
|
|
festAndTerm = festAndTerm.join('')
|
|||
|
|
|
|||
|
|
return festAndTerm == '' ? lunarMD : festAndTerm
|
|||
|
|
},
|
|||
|
|
performSearch() {
|
|||
|
|
// 在这里可以根据选中的搜索引擎执行搜索
|
|||
|
|
const searchUrl =
|
|||
|
|
this.selectedEngine === 'baidu'
|
|||
|
|
? `https://www.baidu.com/s?wd=${encodeURIComponent(this.searchText)}`
|
|||
|
|
: `https://www.bing.com/search?q=${encodeURIComponent(this.searchText)}`;
|
|||
|
|
|
|||
|
|
// 在这里可以根据选中的搜索引擎执行搜索
|
|||
|
|
window.open(searchUrl, '_blank'); // 在新标签页中打开搜索结果
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async weatherSearch() {
|
|||
|
|
console.log("调用weatherSearch--开始")
|
|||
|
|
const params = {cityName: (this.inputCity === "" ? this.weather.city : this.inputCity)}
|
|||
|
|
console.log(params);
|
|||
|
|
await getWeatherInfo(params).then(weatherInfo => {
|
|||
|
|
if (String(weatherInfo.code) === '1') {
|
|||
|
|
this.weather.city = weatherInfo.data.city;
|
|||
|
|
this.weather.info = weatherInfo.data.info;
|
|||
|
|
this.weather.aqi = weatherInfo.data.aqi;
|
|||
|
|
this.weather.power = weatherInfo.data.power;
|
|||
|
|
this.weather.humidity= weatherInfo.data.humidity;
|
|||
|
|
this.weather.direct = weatherInfo.data.direct;
|
|||
|
|
this.weather.temperature = weatherInfo.data.temperature;
|
|||
|
|
}
|
|||
|
|
}).catch(err => {
|
|||
|
|
this.$message.error('请求出错了：' + err)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
console.log("调用weatherSearch--结束")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|