新增盒子组件
This commit is contained in:
parent
0e32dd4113
commit
48afe35097
@ -6,7 +6,6 @@
|
||||
<MainLeft />
|
||||
<MainRight v-show="!store.boxOpenState" />
|
||||
<Box v-show="store.boxOpenState" />
|
||||
<!-- {{ store.getInnerWidth }} -->
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
@ -35,7 +34,7 @@ onMounted(() => {
|
||||
// 加载完成事件
|
||||
window.addEventListener("load", () => {
|
||||
console.log("加载完成");
|
||||
console.clear();
|
||||
// console.clear();
|
||||
// 去除加载标记
|
||||
document.getElementsByTagName("body")[0].className = "";
|
||||
// 给加载动画添加结束标记
|
||||
@ -45,11 +44,11 @@ onMounted(() => {
|
||||
|
||||
// 监听当前页面宽度
|
||||
getWidth();
|
||||
window.addEventListener("resize", getWidth());
|
||||
window.addEventListener("resize", getWidth);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", getWidth());
|
||||
window.removeEventListener("resize", getWidth);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
@ -28,9 +28,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from "vue";
|
||||
import { reactive, watch, h } from "vue";
|
||||
import { Icon } from "@vicons/utils";
|
||||
import { QuoteLeft, QuoteRight } from "@vicons/fa";
|
||||
import { Error } from "@icon-park/vue-next";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
@ -42,7 +43,17 @@ let descriptionText = reactive({
|
||||
|
||||
// 切换右侧功能区
|
||||
const changeBox = () => {
|
||||
store.boxOpenState = !store.boxOpenState;
|
||||
if (store.getInnerWidth >= 990) {
|
||||
store.boxOpenState = !store.boxOpenState;
|
||||
} else {
|
||||
ElMessage({
|
||||
message: "当前页面宽度不足以开启盒子",
|
||||
icon: h(Error, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
}),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 监听状态变化
|
||||
|
88
src/components/TimeCapsule/index.vue
Normal file
88
src/components/TimeCapsule/index.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div class="time-capsule">
|
||||
<div class="title">
|
||||
<hourglass-full
|
||||
theme="two-tone"
|
||||
size="24"
|
||||
:fill="['#efefef', '#00000020']"
|
||||
/>
|
||||
<span>时光胶囊</span>
|
||||
</div>
|
||||
<span class="text"
|
||||
>今日已经度过了 {{ timeData.day.start }} 小时</span
|
||||
>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="timeData.day.pass"
|
||||
/>
|
||||
<span class="text"
|
||||
>本周已经度过了 {{ timeData.week.start }} 天</span
|
||||
>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="timeData.week.pass"
|
||||
/>
|
||||
<span class="text"
|
||||
>本月已经度过了 {{ timeData.month.start }} 天</span
|
||||
>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="timeData.month.pass"
|
||||
/>
|
||||
<span class="text"
|
||||
>今年已经度过了 {{ timeData.year.start }} 个月</span
|
||||
>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="timeData.year.pass"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, ref } from "vue";
|
||||
import { HourglassFull } from "@icon-park/vue-next";
|
||||
import { getTimeCapsule } from "@/utils/getTime.js";
|
||||
|
||||
// 进度条数据
|
||||
let timeData = ref(getTimeCapsule());
|
||||
let timeInterval = null;
|
||||
|
||||
onMounted(() => {
|
||||
timeInterval = setInterval(() => {
|
||||
timeData.value = getTimeCapsule();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timeInterval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.time-capsule {
|
||||
width: 100%;
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0.5rem 0 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
.i-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
display: block;
|
||||
margin: 1rem 0rem 0.5rem 0rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -9,7 +9,7 @@ export const mainStore = defineStore("main", {
|
||||
coverType: 0, // 壁纸种类
|
||||
musicIsOk: false, // 音乐是否加载完成
|
||||
musicOpenState: false, // 音乐面板开启状态
|
||||
boxOpenState: false, // 更多页面开启状态
|
||||
boxOpenState: false, // 盒子开启状态
|
||||
playerState: false, // 当前播放状态
|
||||
playerTitle: null, // 当前播放歌曲名
|
||||
playerArtist: null, // 当前播放歌手名
|
||||
|
@ -94,6 +94,28 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
.el-progress-bar {
|
||||
.el-progress-bar__outer {
|
||||
border-radius: 6px;
|
||||
background-color: #00000020;
|
||||
|
||||
.el-progress-bar__inner {
|
||||
background-color: #efefef;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-family: 'UnidreamLED';
|
||||
|
||||
span {
|
||||
color: #564d59;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 渐入动画
|
||||
.fade-enter-active {
|
||||
animation: fade 0.3s ease-in-out;
|
||||
|
@ -1,3 +1,4 @@
|
||||
// 时钟
|
||||
export const getCurrentTime = () => {
|
||||
let time = new Date();
|
||||
let year = time.getFullYear();
|
||||
@ -14,7 +15,45 @@ export const getCurrentTime = () => {
|
||||
hour,
|
||||
minute,
|
||||
second,
|
||||
weekday:weekday[time.getDay()],
|
||||
weekday: weekday[time.getDay()],
|
||||
}
|
||||
return currentTime;
|
||||
}
|
||||
|
||||
// 时光胶囊
|
||||
export const getTimeCapsule = () => {
|
||||
// 日进度
|
||||
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
|
||||
let todayPassHours = (new Date() - todayStartDate) / 1000 / 60 / 60;
|
||||
let todayPassHoursPercent = (todayPassHours / 24) * 100;
|
||||
// 周进度
|
||||
let weeks = [7, 1, 2, 3, 4, 5, 6];
|
||||
let weekDay = weeks[new Date().getDay()];
|
||||
let weekDayPassPercent = (weekDay / 7) * 100;
|
||||
// 月进度
|
||||
let year = new Date().getFullYear();
|
||||
let date = new Date().getDate();
|
||||
let month = new Date().getMonth() + 1;
|
||||
let monthAll = new Date(year, month, 0).getDate();
|
||||
let monthPassPercent = (date / monthAll) * 100;
|
||||
// 年进度
|
||||
let yearPass = (month / 12) * 100;
|
||||
return {
|
||||
day: {
|
||||
start: parseInt(todayPassHours),
|
||||
pass: parseInt(todayPassHoursPercent),
|
||||
},
|
||||
week: {
|
||||
start: weekDay,
|
||||
pass: parseInt(weekDayPassPercent),
|
||||
},
|
||||
month: {
|
||||
start: date,
|
||||
pass: parseInt(monthPassPercent),
|
||||
},
|
||||
year: {
|
||||
start: month == 0 ? month : month - 1,
|
||||
pass: parseInt(yearPass),
|
||||
}
|
||||
}
|
||||
}
|
@ -14,17 +14,31 @@
|
||||
@click="store.boxOpenState = false"
|
||||
/>
|
||||
</transition>
|
||||
6666
|
||||
<div class="content">
|
||||
<TimeCapsule />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { CloseOne } from "@icon-park/vue-next";
|
||||
import TimeCapsule from "@/components/TimeCapsule/index.vue";
|
||||
import { mainStore } from "@/store";
|
||||
const store = mainStore();
|
||||
|
||||
let closeShow = ref(false);
|
||||
|
||||
// 监听宽度变化
|
||||
watch(
|
||||
() => store.innerWidth,
|
||||
(value) => {
|
||||
console.log(value);
|
||||
if (value < 990 && store.boxOpenState) {
|
||||
store.boxOpenState = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -32,7 +46,6 @@ let closeShow = ref(false);
|
||||
flex: 1 0 0%;
|
||||
margin-left: 0.75rem;
|
||||
height: 80%;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
@ -50,5 +63,10 @@ let closeShow = ref(false);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -34,7 +34,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import Music from "@/components/Music/test.vue";
|
||||
import Music from "@/components/Music/index.vue";
|
||||
import Hitokoto from "@/components/Hitokoto/index.vue";
|
||||
import Weather from "@/components/Weather/index.vue";
|
||||
import { getCurrentTime } from "@/utils/getTime";
|
||||
|
Loading…
Reference in New Issue
Block a user