120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
|
<div class="pr-8">
|
|
<d-card shadow="never" class="mt-10 bg-white">
|
|
<template #title>
|
|
<div class="flex items-center">
|
|
<icon-time class="w-5 mr-2"></icon-time>
|
|
时间日期
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div class="w-full text-center text-[#ec66ab] font-500 text-4xl font-[yj]">{{ t }}</div>
|
|
<div class="mt-3 text-right">{{ d }}</div>
|
|
</template>
|
|
</d-card>
|
|
|
|
<d-card shadow="never" class="mt-10 bg-white">
|
|
<template #title>
|
|
<div class="flex items-center">
|
|
<icon-date class="w-5 mr-2"></icon-date>
|
|
农历节气
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div class="w-full text-center text-[#ec66ab] font-500">{{ jq.yearTips }}年 {{ jq.lunarCalendar }}</div>
|
|
<div class="w-full flex justify-center">
|
|
<img class="mt-2 w-[90%] rounded" :src="jqImg" alt=""></img>
|
|
</div>
|
|
<div class="mt-2 text-center">{{ jq.solarTerms }}</div>
|
|
</template>
|
|
</d-card>
|
|
|
|
<d-card shadow="never" class="mt-10 bg-white">
|
|
<template #title>
|
|
<div class="flex items-center">
|
|
<icon-news class="w-5 mr-2"></icon-news>
|
|
百度新闻
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div class="py-1" v-for="i in bdNews" :key="i.id">
|
|
<a class="devui-link flex justify-between" :href="i.url" target="_blank">
|
|
<span>{{ i.index }}. {{ i.title }}
|
|
<icon-hot v-show="i.index < 4" class="w-4 text-[#ec66ab] inline-block"></icon-hot>
|
|
</span>
|
|
<span class="text-primary">{{ i.hot }}</span>
|
|
</a>
|
|
</div>
|
|
<div class="mt-2 justify-between flex items-center">
|
|
|
|
<div class="w-2/5 h-px bg-[#ec66ab]"></div>
|
|
<a class="devui-link text-[#ec66ab] flex items-center" href="https://www.baidu.com/s?ie=utf-8&wd=百度新闻"
|
|
target="_blank">
|
|
更多
|
|
<icon-right class="ml-1 w-4 text-primary inline-block"></icon-right>
|
|
</a>
|
|
<div class="w-2/5 h-px bg-[#ec66ab]"></div>
|
|
</div>
|
|
</template>
|
|
</d-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
//mark import
|
|
import { formatTime } from '@/util/index';
|
|
|
|
//mark data
|
|
const t = ref<any>('')
|
|
const d = ref<any>('')
|
|
let timer: any = null
|
|
const jq = ref<any>("")
|
|
const jqImg = ref<any>("")
|
|
const bdNews = ref<any>([])
|
|
//mark method
|
|
function getTime() {
|
|
const date = new Date();
|
|
t.value = formatTime(date, 'hh:mm:ss')
|
|
d.value = formatTime(date, 'YYYY 年 MM 月 DD 日')
|
|
}
|
|
|
|
async function getJq() {
|
|
const res = await $http.mix.getJq({
|
|
date: formatTime(new Date(), "YYYYMMDD")
|
|
})
|
|
console.log('>>> --> getJq --> res:', res.data)
|
|
jq.value = res.data
|
|
const j = res.data.solarTerms.slice(0, 2)
|
|
jqImg.value = 'https://www.hxyouzi.com/img/jq/' + j + '.png'
|
|
}
|
|
|
|
async function getBdhot() {
|
|
const res = await $http.mix.getBdhot()
|
|
console.log('>>> --> getBdhot --> res:', res.data)
|
|
// 取前5条
|
|
bdNews.value = res.data.slice(0, 5)
|
|
}
|
|
|
|
//mark 周期、内置函数等
|
|
onMounted(() => {
|
|
getJq()
|
|
getBdhot()
|
|
|
|
timer = setInterval(() => {
|
|
getTime()
|
|
}, 1000)
|
|
})
|
|
onUnmounted(() => {
|
|
clearInterval(timer)
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@font-face {
|
|
font-family: 'yj';
|
|
src: url('@/assets/font/LCDML.woff2');
|
|
}
|
|
|
|
</style> |