Austin/home
1
0
Fork 0
mirror of https://github.com/imsyy/home.git synced 2024-11-16 03:32:17 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of github.com:imsyy/home into dev
Some checks failed
Build Dev / Build Website (push) Has been cancelled
Details

Browse Source
This commit is contained in:
imsyy 2024-08-05 14:22:59 +08:00
commit 3d4607226c
No known key found for this signature in database
GPG Key ID: 5D959EAB73CA095D
11 changed files with 165 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.example
View File

@ -1,6 +1,6 @@
# 站点信息 # 站点信息
VITE_SITE_NAME = "無名の主页" # 名称 VITE_SITE_NAME = "無名の主页" # 名称
VITE_SITE_ANTHOR = "無名" # 作者 VITE_SITE_AUTHOR = "無名" # 作者
VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词 VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
VITE_SITE_DES = "一个默默无闻的主页" # 站点简介 VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
VITE_SITE_URL = "imsyy.top" # 站点地址 VITE_SITE_URL = "imsyy.top" # 站点地址

2
index.html
View File

@ -11,7 +11,7 @@
<link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" /> <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
<meta name="description" content="%VITE_SITE_DES%" /> <meta name="description" content="%VITE_SITE_DES%" />
<meta name="keywords" content="%VITE_SITE_KEYWORDS%" /> <meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
<meta name="author" content="%VITE_SITE_ANTHOR%" /> <meta name="author" content="%VITE_SITE_AUTHOR%" />
<meta name="theme-color" content="#424242" /> <meta name="theme-color" content="#424242" />
<title>%VITE_SITE_NAME%</title> <title>%VITE_SITE_NAME%</title>
<!-- HarmonyOS Sans --> <!-- HarmonyOS Sans -->

69
src/App.vue
View File

@ -27,11 +27,12 @@
</Icon> </Icon>
<!-- 页脚 --> <!-- 页脚 -->
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
<Footer v-show="!store.backgroundShow && !store.setOpenState" /> <Footer class="f-ter" v-show="!store.backgroundShow && !store.setOpenState" />
</Transition> </Transition>
</main> </main>
</Transition> </Transition>
</template> </template>
<script setup> <script setup>
import { helloInit, checkDays } from "@/utils/getTime.js"; import { helloInit, checkDays } from "@/utils/getTime.js";
import { HamburgerButton, CloseSmall } from "@icon-park/vue-next"; import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
@ -68,8 +69,9 @@ const loadComplete = () => {
watch( watch(
() => store.innerWidth, () => store.innerWidth,
(value) => { (value) => {
if (value < 990) { if (value < 721) {
store.boxOpenState = false; store.boxOpenState = false;
store.setOpenState = false;
} }
}, },
); );
@ -139,6 +141,7 @@ onBeforeUnmount(() => {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
margin: 0 auto; margin: 0 auto;
padding: 0 0.5vw;
.all { .all {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -164,7 +167,7 @@ onBeforeUnmount(() => {
} }
} }
.menu { .menu {
position: fixed; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -187,5 +190,65 @@ onBeforeUnmount(() => {
display: none; display: none;
} }
} }
@media (max-height: 720px) {
overflow-y: auto;
overflow-x: hidden;
.container {
height: 721px;
.more {
height: 721px;
width: calc(100% + 6px);
}
@media (min-width: 391px) {
// w 1201px ~ max
padding-left: 0.7vw;
padding-right: 0.25vw;
@media (max-width: 1200px) { // w 1101px ~ 1280px
padding-left: 2.3vw;
padding-right: 1.75vw;
}
@media (max-width: 1100px) { // w 993px ~ 1100px
padding-left: 2vw;
padding-right: calc(2vw - 6px);
}
@media (max-width: 992px) { // w 901px ~ 992px
padding-left: 2.3vw;
padding-right: 1.7vw;
}
@media (max-width: 900px) { // w 391px ~ 900px
padding-left: 2vw;
padding-right: calc(2vw - 6px);
}
}
}
.menu {
top: 605.64px; // 721px * 0.84
left: 170.5px; // 391 * 0.5 - 25px
@media (min-width: 391px) {
left: calc(50% - 25px);
}
}
.f-ter {
top: 675px; // 721px - 46px
@media (min-width: 391px) {
padding-left: 6px;
}
}
}
@media (max-width: 390px) {
overflow-x: auto;
.container {
width: 391px;
}
.menu {
left: 167.5px; // 391px * 0.5 - 28px
}
.f-ter {
width: 391px;
}
@media (min-height: 721px) {
overflow-y: hidden;
}
}
} }
</style> </style>

38
src/components/Footer.vue
View File

@ -3,13 +3,15 @@
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
<div v-if="!store.playerState || !store.playerLrcShow" class="power"> <div v-if="!store.playerState || !store.playerLrcShow" class="power">
<span> <span>
Copyright&nbsp;&copy; <span :class="startYear < fullYear ? 'c-hidden' : 'hidden'">Copyright&nbsp;</span>
<span v-if="siteStartDate?.length >= 4" class="site-start"> &copy;
{{ siteStartDate.substring(0, 4) }} <span v-if="startYear < fullYear"
class="site-start">
{{ startYear }}
- -
</span> </span>
{{ fullYear }} {{ fullYear }}
<a :href="siteUrl">{{ siteAnthor }}</a> <a :href="siteUrl">{{ siteAuthor }}</a>
</span> </span>
<!-- 以下信息请不要修改哦 --> <!-- 以下信息请不要修改哦 -->
<span class="hidden"> <span class="hidden">
@ -19,10 +21,12 @@
</a> </a>
</span> </span>
<!-- 站点备案 --> <!-- 站点备案 -->
<a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank"> <span>
&amp; &amp;
{{ siteIcp }} <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
</a> {{ siteIcp }}
</a>
</span>
</div> </div>
<div v-else class="lrc"> <div v-else class="lrc">
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
@ -46,9 +50,13 @@ const store = mainStore();
const fullYear = new Date().getFullYear(); const fullYear = new Date().getFullYear();
// 加载配置数据 // 加载配置数据
const siteStartDate = ref(import.meta.env.VITE_SITE_START); // const siteStartDate = ref(import.meta.env.VITE_SITE_START);
const startYear = ref(
import.meta.env.VITE_SITE_START?.length >= 4 ?
import.meta.env.VITE_SITE_START.substring(0, 4) : null
);
const siteIcp = ref(import.meta.env.VITE_SITE_ICP); const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
const siteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR); const siteAuthor = ref(import.meta.env.VITE_SITE_AUTHOR);
const siteUrl = computed(() => { const siteUrl = computed(() => {
const url = import.meta.env.VITE_SITE_URL; const url = import.meta.env.VITE_SITE_URL;
if (!url) return "https://www.imsyy.top"; if (!url) return "https://www.imsyy.top";
@ -71,6 +79,9 @@ const siteUrl = computed(() => {
text-align: center; text-align: center;
z-index: 0; z-index: 0;
font-size: 14px; font-size: 14px;
// 文字不换行
word-break: keep-all;
white-space: nowrap;
.power { .power {
animation: fade 0.3s; animation: fade 0.3s;
} }
@ -106,9 +117,14 @@ const siteUrl = computed(() => {
transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
font-size: 0.85rem; font-size: 0.9rem;
&.blur { &.blur {
font-size: 0.85rem; font-size: 0.9rem;
}
}
@media (max-width: 560px) {
.c-hidden {
display: none;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {

50
src/components/Message.vue
View File

@ -58,7 +58,7 @@ const descriptionText = reactive({
// 切换右侧功能区 // 切换右侧功能区
const changeBox = () => { const changeBox = () => {
if (store.getInnerWidth >= 990) { if (store.getInnerWidth >= 721) {
store.boxOpenState = !store.boxOpenState; store.boxOpenState = !store.boxOpenState;
} else { } else {
ElMessage({ ElMessage({
@ -112,7 +112,7 @@ watch(
.sm { .sm {
margin-left: 6px; margin-left: 6px;
font-size: 2rem; font-size: 2rem;
@media (min-width: 720px) and (max-width: 789px) { @media (min-width: 721px) and (max-width: 789px) {
display: none; display: none;
} }
} }
@ -166,28 +166,28 @@ watch(
pointer-events: none; pointer-events: none;
} }
} }
@media (max-width: 390px) { // @media (max-width: 390px) {
.logo { // .logo {
flex-direction: column; // flex-direction: column;
.logo-img { // .logo-img {
display: none; // display: none;
} // }
.name { // .name {
margin-left: 0; // margin-left: 0;
height: auto; // height: auto;
transform: none; // transform: none;
text-align: center; // text-align: center;
.bg { // .bg {
font-size: 3.5rem; // font-size: 3.5rem;
} // }
.sm { // .sm {
font-size: 1.4rem; // font-size: 1.4rem;
} // }
} // }
} // }
.description { // .description {
margin-top: 2.5rem; // margin-top: 2.5rem;
} // }
} // }
} }
</style> </style>

2
src/components/TimeCapsule.vue
View File

@ -16,7 +16,7 @@
剩余&nbsp;{{ item.remaining }}&nbsp;{{ tag === "day" ? "小时" : "天" }} 剩余&nbsp;{{ item.remaining }}&nbsp;{{ tag === "day" ? "小时" : "天" }}
</span> </span>
</div> </div>
<el-progress :text-inside="true" :stroke-width="20" :percentage="item.percentage" /> <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat(item.percentage)" />
</div> </div>
<!-- 建站日期 --> <!-- 建站日期 -->
<div v-if="store.siteStartShow" class="capsule-item start"> <div v-if="store.siteStartShow" class="capsule-item start">

6
src/style/style.scss
View File

@ -37,6 +37,12 @@ p {
} }
} }
// 链接悬停效果
a:hover {
color: rgb(57, 159, 255);
text-decoration: underline;
}
// 字体文件 // 字体文件
@font-face { @font-face {
font-family: "Pacifico-Regular"; font-family: "Pacifico-Regular";

9
src/utils/getTime.js
View File

@ -45,12 +45,9 @@ export const getTimeCapsule = () => {
// 计算总的天数或小时数 // 计算总的天数或小时数
const total = end.diff(start, unit === "day" ? "hour" : "day") + 1; const total = end.diff(start, unit === "day" ? "hour" : "day") + 1;
// 计算已经过去的天数或小时数 // 计算已经过去的天数或小时数
let passed; let passed = now.diff(start, unit === "day" ? "hour" : "day");
if (unit === "week" && now.day() === 0) { if (unit === "week") {
// 如果是星期日 passed = (passed + 6) % 7;
passed = total - 1;
} else {
passed = now.diff(start, unit === "day" ? "hour" : "day");
} }
const remaining = total - passed; const remaining = total - passed;
const percentage = (passed / total) * 100; const percentage = (passed / total) * 100;

9
src/views/Func/index.vue
View File

@ -127,6 +127,15 @@ onBeforeUnmount(() => {
letter-spacing: 2px; letter-spacing: 2px;
font-family: "UnidreamLED"; font-family: "UnidreamLED";
} }
@media (min-width: 1201px) and (max-width: 1280px) {
font-size: 1rem;
}
@media (min-width: 911px) and (max-width: 992px) {
font-size: 1rem;
.text {
font-size: 2.75rem;
}
}
} }
.weather { .weather {
text-align: center; text-align: center;

11
src/views/Main/Right.vue
View File

@ -39,7 +39,7 @@ const siteUrl = computed(() => {
.logo { .logo {
width: 100%; width: 100%;
font-family: "Pacifico-Regular"; font-family: "Pacifico-Regular";
font-size: 1.75rem; font-size: 2.25rem;
position: fixed; position: fixed;
top: 6%; top: 6%;
left: 0; left: 0;
@ -49,9 +49,16 @@ const siteUrl = computed(() => {
&:active { &:active {
transform: scale(0.95); transform: scale(0.95);
} }
@media (min-width: 720px) { @media (min-width: 721px) {
display: none; display: none;
} }
@media (max-height: 720px) {
width: calc(100% + 6px);
top: 43.26px; // 721px * 0.06
}
@media (max-width: 390px) {
width: 391px;
}
} }
@media (max-width: 720px) { @media (max-width: 720px) {
margin-left: 0; margin-left: 0;

17
src/views/MoreSet/index.vue
View File

@ -145,6 +145,23 @@ const jumpTo = (url) => {
margin-left: 6px; margin-left: 6px;
font-size: 2rem; font-size: 2rem;
} }
@media (max-width: 990px) {
.bg {
font-size: 4.5rem;
}
.sm {
font-size: 1.7rem;
}
}
@media (max-width: 825px) {
.bg {
font-size: 3.8rem;
}
.sm {
font-size: 1.3rem;
}
}
} }
.version { .version {