128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<div
|
|
class="hitokoto cards"
|
|
v-show="!store.musicOpenState"
|
|
@mouseenter="openMusicShow = true"
|
|
@mouseleave="openMusicShow = false"
|
|
@click.stop
|
|
>
|
|
<!-- 打开音乐面板 -->
|
|
<Transition name="el-fade-in-linear">
|
|
<div
|
|
class="open-music"
|
|
v-show="openMusicShow && store.musicIsOk"
|
|
@click="store.musicOpenState = true"
|
|
>
|
|
<music-menu theme="filled" size="18" fill="#efefef" />
|
|
<span>打开音乐播放器</span>
|
|
</div>
|
|
</Transition>
|
|
<!-- 一言内容 -->
|
|
<div class="content" @click="updateHitokoto">
|
|
<span class="text">{{ hitokotoData.text }}</span>
|
|
<span class="from">-「 {{ hitokotoData.from }} 」</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted, h } from "vue";
|
|
import { MusicMenu, Error } from "@icon-park/vue-next";
|
|
import { getHitokoto } from "@/api";
|
|
import debounce from "@/utils/debounce.js";
|
|
import { mainStore } from "@/store";
|
|
const store = mainStore();
|
|
|
|
// 开启音乐面板按钮显隐
|
|
const openMusicShow = ref(false);
|
|
|
|
// 一言数据
|
|
const hitokotoData = reactive({
|
|
text: "这里应该显示一句话",
|
|
from: "無名",
|
|
});
|
|
|
|
// 获取一言数据
|
|
const getHitokotoData = () => {
|
|
getHitokoto()
|
|
.then((res) => {
|
|
hitokotoData.text = res.hitokoto;
|
|
hitokotoData.from = res.from;
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
message: "一言获取失败",
|
|
icon: h(Error, {
|
|
theme: "filled",
|
|
fill: "#efefef",
|
|
}),
|
|
});
|
|
});
|
|
};
|
|
|
|
// 更新一言数据
|
|
const updateHitokoto = () => {
|
|
hitokotoData.text = "新的一言正在赶来的路上";
|
|
hitokotoData.from = "来源加载中";
|
|
// 防抖
|
|
debounce(() => {
|
|
getHitokotoData();
|
|
}, 500);
|
|
};
|
|
|
|
onMounted(() => {
|
|
getHitokotoData();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.hitokoto {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px;
|
|
animation: fade;
|
|
-webkit-animation: fade 0.5s;
|
|
.open-music {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #00000026;
|
|
padding: 4px 0;
|
|
border-radius: 8px 8px 0 0;
|
|
.i-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: block;
|
|
margin-right: 8px;
|
|
}
|
|
span {
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|
|
.content {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
.text {
|
|
font-size: 1.1rem;
|
|
word-break: break-all;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.from {
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
align-self: flex-end;
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
}
|
|
</style> |