feat: 优化部分样式 #259
This commit is contained in:
imsyy
parent
4b60e7edf1
commit
e8b69c5ab5
18
package.json
18
package.json
@ -16,27 +16,27 @@
|
||||
"dependencies": {
|
||||
"@worstone/vue-aplayer": "^1.0.6",
|
||||
"aplayer": "^1.10.1",
|
||||
"axios": "^1.6.3",
|
||||
"element-plus": "^2.4.4",
|
||||
"axios": "^1.6.7",
|
||||
"element-plus": "^2.6.1",
|
||||
"fetch-jsonp": "^1.3.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"swiper": "^9.4.1",
|
||||
"vue": "^3.4.3"
|
||||
"vue": "^3.4.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@icon-park/vue-next": "^1.4.2",
|
||||
"@vicons/fa": "^0.12.0",
|
||||
"@vicons/utils": "^0.1.4",
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-vue": "^9.19.2",
|
||||
"prettier": "^3.1.1",
|
||||
"sass": "^1.69.6",
|
||||
"terser": "^5.26.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.22.0",
|
||||
"prettier": "^3.2.5",
|
||||
"sass": "^1.71.1",
|
||||
"terser": "^5.29.1",
|
||||
"unplugin-auto-import": "^0.11.5",
|
||||
"unplugin-vue-components": "^0.22.12",
|
||||
"vite": "^4.5.1",
|
||||
"vite": "^4.5.2",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-pwa": "^0.14.7"
|
||||
}
|
||||
|
||||
1714
pnpm-lock.yaml
1714
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -2,9 +2,9 @@
|
||||
<div :class="store.backgroundShow ? 'cover show' : 'cover'">
|
||||
<img
|
||||
v-show="store.imgLoadStatus"
|
||||
:src="bgUrl"
|
||||
class="bg"
|
||||
alt="cover"
|
||||
:src="bgUrl"
|
||||
@load="imgLoadComplete"
|
||||
@error.once="imgLoadError"
|
||||
@animationend="imgAnimationEnd"
|
||||
@ -79,6 +79,14 @@ const imgLoadError = () => {
|
||||
bgUrl.value = `/images/background${bgRandom}.jpg`;
|
||||
};
|
||||
|
||||
// 监听壁纸切换
|
||||
watch(
|
||||
() => store.coverType,
|
||||
(value) => {
|
||||
changeBg(value);
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
// 加载壁纸
|
||||
changeBg(store.coverType);
|
||||
@ -115,7 +123,7 @@ onBeforeUnmount(() => {
|
||||
transition:
|
||||
filter 0.3s,
|
||||
transform 0.3s;
|
||||
animation: fade-blur-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
animation: fade-blur-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
.gray {
|
||||
|
||||
@ -1,169 +0,0 @@
|
||||
<template>
|
||||
<div class="github-project">
|
||||
<div class="title">
|
||||
<github-one theme="two-tone" size="24" :fill="['#efefef', '#00000020']" />
|
||||
<span>Github</span>
|
||||
</div>
|
||||
<Swiper
|
||||
:modules="[Pagination, Mousewheel]"
|
||||
:slides-per-view="1"
|
||||
:space-between="40"
|
||||
:pagination="{
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
bulletElement: 'div',
|
||||
}"
|
||||
:mousewheel="true"
|
||||
>
|
||||
<SwiperSlide v-for="list in projectList" :key="list">
|
||||
<el-row class="all-project" :gutter="20">
|
||||
<el-col v-for="(item, index) in list" :span="12" :key="index">
|
||||
<div class="project cards" @click="toGithub(item)">
|
||||
<div class="name">
|
||||
<bookmark theme="outline" size="22" fill="#efefef" />
|
||||
<div class="name-text">
|
||||
<span class="author">{{ item.author }}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="desc">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</SwiperSlide>
|
||||
<div class="swiper-pagination" />
|
||||
</Swiper>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { GithubOne, Bookmark } from "@icon-park/vue-next";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import { Pagination, Mousewheel } from "swiper";
|
||||
|
||||
// 仓库数据
|
||||
const projectData = [
|
||||
{
|
||||
name: "home",
|
||||
author: "imsyy",
|
||||
desc: "个人主页，我的个人主页，个人主页源码，主页模板，homepage",
|
||||
},
|
||||
{
|
||||
name: "SPlayer",
|
||||
author: "imsyy",
|
||||
desc: "🎉 一个简约的音乐播放器，支持网易云音乐账号登录，逐字歌词，下载歌曲，展示评论区，音乐云盘及歌单管理，音乐频谱，移动端基础适配 | A minimalist music player",
|
||||
},
|
||||
{
|
||||
name: "Snavigation",
|
||||
author: "imsyy",
|
||||
desc: "Snavigation 一个简约的起始页 | 支持自定义搜索引擎，自定义快捷方式，自定义壁纸以及数据备份",
|
||||
},
|
||||
{
|
||||
name: "DailyHotApi",
|
||||
author: "imsyy",
|
||||
desc: "今日热榜 API，一个聚合热门数据的 API 接口，支持 Vercel 部署 | 前端页面：https://github.com/imsyy/DailyHot",
|
||||
},
|
||||
{
|
||||
name: "site-status",
|
||||
author: "imsyy",
|
||||
desc: "📺 一个基于 UptimeRobot API 的在线状态面板 | 站点监测 | 状态检测 | An online status panel based on the UptimeRobot API | UptimeRobot, status, site",
|
||||
},
|
||||
];
|
||||
|
||||
// 计算网站链接
|
||||
const projectList = computed(() => {
|
||||
const result = [];
|
||||
for (let i = 0; i < projectData.length; i += 4) {
|
||||
const subArr = projectData.slice(i, i + 4);
|
||||
result.push(subArr);
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
// 跳转至 Github
|
||||
const toGithub = (data) => {
|
||||
window.open(`https://github.com/${data.author}/${data.name}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.github-project {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0.2rem 0 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
.i-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.swiper {
|
||||
left: -10px;
|
||||
width: calc(100% + 20px);
|
||||
padding: 5px 10px 0;
|
||||
z-index: 0;
|
||||
.swiper-slide {
|
||||
height: 100%;
|
||||
}
|
||||
.swiper-pagination {
|
||||
position: static;
|
||||
margin-top: -8px;
|
||||
:deep(.swiper-pagination-bullet) {
|
||||
background-color: #fff;
|
||||
width: 18px;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
transition: opacity 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.all-project {
|
||||
width: calc(100% + 20px);
|
||||
.project {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
.name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
.i-icon {
|
||||
display: flex;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.author {
|
||||
opacity: 0.8;
|
||||
&::after {
|
||||
content: "/";
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
src/components/MoreContent.vue
Normal file
14
src/components/MoreContent.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="more-content">您可在此编写任意内容</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.more-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -4,10 +4,10 @@
|
||||
<el-collapse-item title="个性壁纸" name="1">
|
||||
<div class="bg-set">
|
||||
<el-radio-group v-model="coverType" text-color="#ffffff" @change="radioChange">
|
||||
<el-radio label="0" size="large" border>默认壁纸</el-radio>
|
||||
<el-radio label="1" size="large" border>每日一图</el-radio>
|
||||
<el-radio label="2" size="large" border>随机风景</el-radio>
|
||||
<el-radio label="3" size="large" border>随机动漫</el-radio>
|
||||
<el-radio value="0" size="large" border>默认壁纸</el-radio>
|
||||
<el-radio value="1" size="large" border>每日一图</el-radio>
|
||||
<el-radio value="2" size="large" border>随机风景</el-radio>
|
||||
<el-radio value="3" size="large" border>随机动漫</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@ -73,9 +73,9 @@
|
||||
<div class="item">
|
||||
<span class="text">循环模式</span>
|
||||
<el-radio-group v-model="playerLoop" size="small" text-color="#FFFFFF">
|
||||
<el-radio label="all" border>列表</el-radio>
|
||||
<el-radio label="one" border>单曲</el-radio>
|
||||
<el-radio label="none" border>不循环</el-radio>
|
||||
<el-radio value="all" border>列表</el-radio>
|
||||
<el-radio value="one" border>单曲</el-radio>
|
||||
<el-radio value="none" border>不循环</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@ -109,7 +109,7 @@ const activeName = ref("1");
|
||||
// 壁纸切换
|
||||
const radioChange = () => {
|
||||
ElMessage({
|
||||
message: "壁纸设置成功，刷新后生效",
|
||||
message: "壁纸更换成功",
|
||||
icon: h(SuccessPicture, {
|
||||
theme: "filled",
|
||||
fill: "#efefef",
|
||||
|
||||
@ -38,6 +38,18 @@ const weatherData = reactive({
|
||||
},
|
||||
});
|
||||
|
||||
// 取出天气平均值
|
||||
const getTemperature = (min, max) => {
|
||||
try {
|
||||
// 计算平均值并四舍五入
|
||||
const average = (Number(min) + Number(max)) / 2;
|
||||
return Math.round(average);
|
||||
} catch (error) {
|
||||
console.error("计算温度出现错误：", error);
|
||||
return "NaN";
|
||||
}
|
||||
};
|
||||
|
||||
// 获取天气数据
|
||||
const getWeatherData = async () => {
|
||||
try {
|
||||
@ -53,7 +65,7 @@ const getWeatherData = async () => {
|
||||
};
|
||||
weatherData.weather = {
|
||||
weather: data.condition.day_weather,
|
||||
temperature: (+data.condition.max_degree + +data.condition.min_degree) / 2,
|
||||
temperature: getTemperature(data.condition.min_degree, data.condition.max_degree),
|
||||
winddirection: data.condition.day_wind_direction,
|
||||
windpower: data.condition.day_wind_power,
|
||||
};
|
||||
|
||||
@ -168,7 +168,7 @@ p {
|
||||
}
|
||||
to {
|
||||
filter: blur(0) brightness(1);
|
||||
transform: scale(1.2);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div class="content">
|
||||
<!-- 可在此处自定义任意内容 -->
|
||||
<TimeCapsule />
|
||||
<GithubProject />
|
||||
<MoreContent />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -32,7 +32,7 @@
|
||||
import { CloseOne, SettingTwo } from "@icon-park/vue-next";
|
||||
import { mainStore } from "@/store";
|
||||
import TimeCapsule from "@/components/TimeCapsule.vue";
|
||||
import GithubProject from "@/components/GithubProject.vue";
|
||||
import MoreContent from "@/components/MoreContent.vue";
|
||||
|
||||
const store = mainStore();
|
||||
const closeShow = ref(false);
|
||||
@ -76,6 +76,8 @@ const closeShow = ref(false);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user