199 lines
7.2 KiB
HTML
199 lines
7.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>节假日信息预览</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#app {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
td {
|
|||
|
|
border: 1px solid black;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<!--
|
|||
|
|
Vue 3
|
|||
|
|
Docs: https://cn.vuejs.org/guide/quick-start.html
|
|||
|
|
Download: https://unpkg.com/vue@3/dist/vue.global.js
|
|||
|
|
-->
|
|||
|
|
<script src="./assets/lib/vue.global.min.js"></script>
|
|||
|
|
<!--
|
|||
|
|
axios
|
|||
|
|
Docs: http://www.axios-js.com/docs/
|
|||
|
|
Download: https://unpkg.com/axios@1.3.0/dist/axios.min.js
|
|||
|
|
-->
|
|||
|
|
<script src="./assets/lib/axios.min.js"></script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<div>
|
|||
|
|
<h1>节日列表</h1>
|
|||
|
|
<table style="margin: 10px auto;">
|
|||
|
|
<tr v-for="festival in dataList">
|
|||
|
|
<td>{{ festival.name }}</td>
|
|||
|
|
<td>{{ festival.date }}</td>
|
|||
|
|
<td>{{ festival.englishName.split('/')[0] }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div id="festival-compare">
|
|||
|
|
<h1>节日信息对比</h1>
|
|||
|
|
<input v-model="compare" />
|
|||
|
|
<table style="width: 100vw;">
|
|||
|
|
<template v-for="key in festivalKeys">
|
|||
|
|
<tr v-if="!['poetry','baike'].includes(key)">
|
|||
|
|
<td>{{ key }}</td>
|
|||
|
|
<td v-for="f in compareKeys">{{ dataDict[f][key] }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</template>
|
|||
|
|
</table>
|
|||
|
|
<style>
|
|||
|
|
table {
|
|||
|
|
table-layout: fixed;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
table,
|
|||
|
|
th,
|
|||
|
|
td {
|
|||
|
|
border: 1px solid #999;
|
|||
|
|
padding: 5px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
td.desc {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</div>
|
|||
|
|
<div id="festival-list">
|
|||
|
|
<h1>节日详细信息</h1>
|
|||
|
|
<div v-for="festival in dataList">
|
|||
|
|
<!-- {{ festival }}<hr style="margin: 20px 0;"> -->
|
|||
|
|
<h2>{{ festival.date }} | {{ festival.fullName }} | {{ festival.englishName }}</h2>
|
|||
|
|
<table>
|
|||
|
|
<tr v-for="key in Object.keys(festival)">
|
|||
|
|
<td>{{ key }}</td>
|
|||
|
|
<td>{{ festival[key] }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<hr>
|
|||
|
|
<p style="white-space: pre-wrap;">{{ JSON.stringify(dataList, null, 4) }}</p>
|
|||
|
|
</div>
|
|||
|
|
<script type="module">
|
|||
|
|
window.instance = Vue.createApp({
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dataList: [],
|
|||
|
|
compare: '寒食节 立秋'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
festivalKeys() {
|
|||
|
|
return Object.keys(this.dataList[0] || {})
|
|||
|
|
},
|
|||
|
|
compareKeys() {
|
|||
|
|
return this.compare.split(" ")
|
|||
|
|
},
|
|||
|
|
dataDict() {
|
|||
|
|
let dict = {}
|
|||
|
|
this.dataList.forEach(i => dict[i.name] = i)
|
|||
|
|
return dict
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 网页加载完成
|
|||
|
|
// this.$refs.userInput.select()
|
|||
|
|
let that = this
|
|||
|
|
axios.get('data/holiday.min.json')
|
|||
|
|
// axios.get('data/holiday.simplify.min.json')
|
|||
|
|
.then(function (response) {
|
|||
|
|
// handle success
|
|||
|
|
console.log(response)
|
|||
|
|
that.dataList = response.data
|
|||
|
|
})
|
|||
|
|
.catch(function (error) {
|
|||
|
|
// handle error
|
|||
|
|
console.log(error)
|
|||
|
|
})
|
|||
|
|
.then(function () {
|
|||
|
|
// always executed
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
catchError(func) {
|
|||
|
|
try {
|
|||
|
|
return func()
|
|||
|
|
} catch (err) {
|
|||
|
|
// console.log(err)
|
|||
|
|
// return '[ERROR] 该字符串暂时无法解码' + '\n' + err.message
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
scrollTo(id) {
|
|||
|
|
let dom = document.getElementById(id)
|
|||
|
|
if (dom) {
|
|||
|
|
let container = document.getElementById('content')
|
|||
|
|
// console.log("container:", container, dom.offsetTop)
|
|||
|
|
container.scrollTo({
|
|||
|
|
top: dom.offsetTop - container.offsetTop
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
console.log("找不到元素，id:", id)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
copyString(stringToCopy, i) {
|
|||
|
|
// 复制
|
|||
|
|
// refer: https://blog.csdn.net/qq_44980680/article/details/126453761
|
|||
|
|
var input = document.createElement("textarea") // 创建input对象
|
|||
|
|
input.value = stringToCopy; // 设置复制内容
|
|||
|
|
document.body.appendChild(input) // 添加临时实例
|
|||
|
|
input.select() // 选择实例内容
|
|||
|
|
document.execCommand("Copy") // 执行复制
|
|||
|
|
document.body.removeChild(input) // 删除临时实例
|
|||
|
|
|
|||
|
|
// 显示复制成功的标志
|
|||
|
|
// copyCount.value++
|
|||
|
|
i._copyCount++
|
|||
|
|
let promotEl = this.$refs[i._promotRef][0]
|
|||
|
|
if (promotEl) {
|
|||
|
|
promotEl.textContent = "复制成功"
|
|||
|
|
let oldCopyCount = i._copyCount // copyCount.value
|
|||
|
|
let refName = i._resultTextboxRef
|
|||
|
|
this.$refs[refName][0].style.backgroundColor = '#fbfbde'
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (oldCopyCount == i._copyCount) {
|
|||
|
|
promotEl.textContent = ""
|
|||
|
|
this.$refs[refName][0].style.backgroundColor = ''
|
|||
|
|
}
|
|||
|
|
// 如果两数不等，说明中间点击复制了多次，这里就不用处理了，等最后一个timeout处理
|
|||
|
|
}, 1000)
|
|||
|
|
// document.getElementById(i.id).getElementsByClassName('result-textbox').style.backgroundColor = '#fbfbde'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}).mount('#app')
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|