新增盒子组件

This commit is contained in:
底层用户 2022-11-17 22:41:37 +08:00
parent 0e32dd4113
commit 48afe35097
8 changed files with 189 additions and 12 deletions

View File

@ -6,7 +6,6 @@
<MainLeft /> <MainLeft />
<MainRight v-show="!store.boxOpenState" /> <MainRight v-show="!store.boxOpenState" />
<Box v-show="store.boxOpenState" /> <Box v-show="store.boxOpenState" />
<!-- {{ store.getInnerWidth }} -->
</div> </div>
</main> </main>
<Footer /> <Footer />
@ -35,7 +34,7 @@ onMounted(() => {
// //
window.addEventListener("load", () => { window.addEventListener("load", () => {
console.log("加载完成"); console.log("加载完成");
console.clear(); // console.clear();
// //
document.getElementsByTagName("body")[0].className = ""; document.getElementsByTagName("body")[0].className = "";
// //
@ -45,11 +44,11 @@ onMounted(() => {
// //
getWidth(); getWidth();
window.addEventListener("resize", getWidth()); window.addEventListener("resize", getWidth);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener("resize", getWidth()); window.removeEventListener("resize", getWidth);
}); });
</script> </script>

View File

@ -28,9 +28,10 @@
</template> </template>
<script setup> <script setup>
import { reactive, watch } from "vue"; import { reactive, watch, h } from "vue";
import { Icon } from "@vicons/utils"; import { Icon } from "@vicons/utils";
import { QuoteLeft, QuoteRight } from "@vicons/fa"; import { QuoteLeft, QuoteRight } from "@vicons/fa";
import { Error } from "@icon-park/vue-next";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
@ -42,7 +43,17 @@ let descriptionText = reactive({
// //
const changeBox = () => { const changeBox = () => {
if (store.getInnerWidth >= 990) {
store.boxOpenState = !store.boxOpenState; store.boxOpenState = !store.boxOpenState;
} else {
ElMessage({
message: "当前页面宽度不足以开启盒子",
icon: h(Error, {
theme: "filled",
fill: "#efefef",
}),
});
}
}; };
// //

View 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"
>今日已经度过了&nbsp;{{ timeData.day.start }}&nbsp;小时</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.day.pass"
/>
<span class="text"
>本周已经度过了&nbsp;{{ timeData.week.start }}&nbsp;</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.week.pass"
/>
<span class="text"
>本月已经度过了&nbsp;{{ timeData.month.start }}&nbsp;</span
>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="timeData.month.pass"
/>
<span class="text"
>今年已经度过了&nbsp;{{ timeData.year.start }}&nbsp;个月</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>

View File

@ -9,7 +9,7 @@ export const mainStore = defineStore("main", {
coverType: 0, // 壁纸种类 coverType: 0, // 壁纸种类
musicIsOk: false, // 音乐是否加载完成 musicIsOk: false, // 音乐是否加载完成
musicOpenState: false, // 音乐面板开启状态 musicOpenState: false, // 音乐面板开启状态
boxOpenState: false, // 更多页面开启状态 boxOpenState: false, // 盒子开启状态
playerState: false, // 当前播放状态 playerState: false, // 当前播放状态
playerTitle: null, // 当前播放歌曲名 playerTitle: null, // 当前播放歌曲名
playerArtist: null, // 当前播放歌手名 playerArtist: null, // 当前播放歌手名

View File

@ -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 { .fade-enter-active {
animation: fade 0.3s ease-in-out; animation: fade 0.3s ease-in-out;

View File

@ -1,3 +1,4 @@
// 时钟
export const getCurrentTime = () => { export const getCurrentTime = () => {
let time = new Date(); let time = new Date();
let year = time.getFullYear(); let year = time.getFullYear();
@ -14,7 +15,45 @@ export const getCurrentTime = () => {
hour, hour,
minute, minute,
second, second,
weekday:weekday[time.getDay()], weekday: weekday[time.getDay()],
} }
return currentTime; 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),
}
}
}

View File

@ -14,17 +14,31 @@
@click="store.boxOpenState = false" @click="store.boxOpenState = false"
/> />
</transition> </transition>
6666 <div class="content">
<TimeCapsule />
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, watch } from "vue";
import { CloseOne } from "@icon-park/vue-next"; import { CloseOne } from "@icon-park/vue-next";
import TimeCapsule from "@/components/TimeCapsule/index.vue";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
const store = mainStore(); const store = mainStore();
let closeShow = ref(false); let closeShow = ref(false);
//
watch(
() => store.innerWidth,
(value) => {
console.log(value);
if (value < 990 && store.boxOpenState) {
store.boxOpenState = false;
}
}
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -32,7 +46,6 @@ let closeShow = ref(false);
flex: 1 0 0%; flex: 1 0 0%;
margin-left: 0.75rem; margin-left: 0.75rem;
height: 80%; height: 80%;
padding: 20px;
position: relative; position: relative;
&:hover { &:hover {
transform: scale(1); transform: scale(1);
@ -50,5 +63,10 @@ let closeShow = ref(false);
transform: scale(1); transform: scale(1);
} }
} }
.content {
padding: 30px;
width: 100%;
height: 100%;
}
} }
</style> </style>

View File

@ -34,7 +34,7 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"; 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 Hitokoto from "@/components/Hitokoto/index.vue";
import Weather from "@/components/Weather/index.vue"; import Weather from "@/components/Weather/index.vue";
import { getCurrentTime } from "@/utils/getTime"; import { getCurrentTime } from "@/utils/getTime";