Add html for preview; Add Beginning of Autumn, Beginning of Spring
This commit is contained in:
2
html/assets/lib/axios.min.js
vendored
Normal file
2
html/assets/lib/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
html/assets/lib/vue.global.min.js
vendored
Normal file
8
html/assets/lib/vue.global.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
html/data/holiday.min.json
Normal file
1
html/data/holiday.min.json
Normal file
File diff suppressed because one or more lines are too long
1
html/data/holiday.simplify.min.json
Normal file
1
html/data/holiday.simplify.min.json
Normal file
File diff suppressed because one or more lines are too long
199
html/index.html
Normal file
199
html/index.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user