移动端适配
This commit is contained in:
parent
4ce5492139
commit
021e3c0bbe
38
src/App.vue
38
src/App.vue
@ -16,15 +16,24 @@
|
||||
<MoreSet />
|
||||
</section>
|
||||
</div>
|
||||
<!-- 移动端菜单按钮 -->
|
||||
<Icon
|
||||
class="menu"
|
||||
size="24"
|
||||
@click="store.mobileOpenState = !store.mobileOpenState"
|
||||
>
|
||||
<component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
|
||||
</Icon>
|
||||
</main>
|
||||
<Footer v-show="!store.backgroundShow && !store.setOpenState" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, watch } from "vue";
|
||||
import { helloInit, checkDays } from "@/utils/getTime.js";
|
||||
import { mainStore } from "@/store";
|
||||
import { Icon } from "@vicons/utils";
|
||||
import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
|
||||
import MainLeft from "@/views/Main/Left.vue";
|
||||
import MainRight from "@/views/Main/Right.vue";
|
||||
import Background from "@/components/Background/index.vue";
|
||||
@ -119,7 +128,9 @@ main {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
@media (max-width: 1200px) {
|
||||
padding: 0 2vw;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -142,6 +153,31 @@ main {
|
||||
-webkit-animation: fade 0.5s;
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 84%;
|
||||
left: calc(50% - 28px);
|
||||
width: 56px;
|
||||
height: 34px;
|
||||
background: rgb(0 0 0 / 20%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.i-icon {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载动画层
|
||||
|
@ -9,11 +9,14 @@
|
||||
<el-row class="link-all" :gutter="20">
|
||||
<el-col
|
||||
:span="8"
|
||||
v-for="item in linksData"
|
||||
v-for="(item, index) in linksData"
|
||||
:key="item"
|
||||
@click="jumpLink(item.link)"
|
||||
>
|
||||
<div class="item cards">
|
||||
<div
|
||||
class="item cards"
|
||||
:style="index < 3 ? 'margin-bottom: 20px' : null"
|
||||
>
|
||||
<Icon size="26">
|
||||
<component :is="item.icon" />
|
||||
</Icon>
|
||||
@ -96,18 +99,12 @@ const jumpLink = (url) => {
|
||||
.item {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
@media (max-width: 820px) {
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.02);
|
||||
@ -118,6 +115,22 @@ const jumpLink = (url) => {
|
||||
font-size: 1.1rem;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@media (min-width: 720px) and (max-width: 820px) {
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
height: 80px;
|
||||
}
|
||||
@media (max-width: 460px) {
|
||||
flex-direction: column;
|
||||
.name {
|
||||
font-size: 1rem;
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -83,12 +83,10 @@ watch(
|
||||
align-items: center;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
|
||||
.logo-img {
|
||||
border-radius: 50%;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
margin-left: 12px;
|
||||
@ -102,6 +100,19 @@ watch(
|
||||
.sm {
|
||||
margin-left: 6px;
|
||||
font-size: 2rem;
|
||||
@media (min-width: 720px) and (max-width: 789px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.logo-img {
|
||||
width: 100px;
|
||||
}
|
||||
.name {
|
||||
.bg {
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -133,6 +144,10 @@ watch(
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -292,6 +292,10 @@ watch(
|
||||
background-color: #ffffff66;
|
||||
border-radius: 6px;
|
||||
z-index: 999;
|
||||
@media (max-width: 720px) {
|
||||
left: calc(50% - 45%);
|
||||
width: 90%;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
|
@ -244,22 +244,16 @@ defineExpose({ playToggle, changeVolume, changeSong });
|
||||
margin: 4px 0 6px 6px;
|
||||
height: 100%;
|
||||
mask: linear-gradient(
|
||||
180deg,
|
||||
hsla(0, 0%, 100%, 0) 0,
|
||||
hsla(0, 0%, 100%, 0.6) 10%,
|
||||
#fff 15%,
|
||||
#fff 85%,
|
||||
hsla(0, 0%, 100%, 0.6) 90%,
|
||||
hsla(0, 0%, 100%, 0)
|
||||
hsla(0deg, 0%, 100%, 0.6) 90%,
|
||||
hsla(0deg, 0%, 100%, 0)
|
||||
);
|
||||
-webkit-mask: linear-gradient(
|
||||
180deg,
|
||||
hsla(0, 0%, 100%, 0) 0,
|
||||
hsla(0, 0%, 100%, 0.6) 10%,
|
||||
#fff 15%,
|
||||
#fff 85%,
|
||||
hsla(0, 0%, 100%, 0.6) 90%,
|
||||
hsla(0, 0%, 100%, 0)
|
||||
hsla(0deg, 0%, 100%, 0.6) 90%,
|
||||
hsla(0deg, 0%, 100%, 0)
|
||||
);
|
||||
&::before,
|
||||
&::after {
|
||||
@ -267,7 +261,6 @@ defineExpose({ playToggle, changeVolume, changeSong });
|
||||
}
|
||||
p {
|
||||
color: #efefef;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.aplayer-lrc-current {
|
||||
font-size: 0.95rem;
|
||||
@ -282,7 +275,7 @@ defineExpose({ playToggle, changeVolume, changeSong });
|
||||
:deep(.aplayer-list) {
|
||||
margin-top: 6px;
|
||||
ol {
|
||||
&::-webkit-scrollbar-track{
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
li {
|
||||
|
@ -12,6 +12,8 @@ export const mainStore = defineStore("main", {
|
||||
musicOpenState: false, // 音乐面板开启状态
|
||||
backgroundShow: false, // 壁纸展示状态
|
||||
boxOpenState: false, // 盒子开启状态
|
||||
mobileOpenState: false, // 移动端开启状态
|
||||
mobileFuncState: false, // 移动端功能区开启状态
|
||||
setOpenState: false, // 设置页面开启状态
|
||||
playerState: false, // 当前播放状态
|
||||
playerTitle: null, // 当前播放歌曲名
|
||||
@ -40,6 +42,10 @@ export const mainStore = defineStore("main", {
|
||||
// 更改当前页面宽度
|
||||
setInnerWidth(value) {
|
||||
this.innerWidth = value;
|
||||
if (value >= 720) {
|
||||
this.mobileOpenState = false;
|
||||
this.mobileFuncState = false;
|
||||
}
|
||||
},
|
||||
// 更改播放状态
|
||||
setPlayerState(value) {
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 功能区域 -->
|
||||
<div class="function">
|
||||
<div :class="store.mobileFuncState ? 'function mobile' : 'function'">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="left">
|
||||
@ -34,10 +34,13 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { getCurrentTime } from "@/utils/getTime";
|
||||
import { mainStore } from "@/store";
|
||||
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";
|
||||
|
||||
const store = mainStore();
|
||||
|
||||
// 当前时间
|
||||
let currentTime = ref({});
|
||||
@ -61,11 +64,29 @@ onBeforeUnmount(() => {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&.mobile {
|
||||
.el-row {
|
||||
.el-col {
|
||||
&:nth-of-type(1) {
|
||||
display: contents;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-row {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
.el-col {
|
||||
&:nth-of-type(1) {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
@media (max-width: 910px) {
|
||||
&:nth-of-type(1) {
|
||||
display: none;
|
||||
@ -77,12 +98,6 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
.left,
|
||||
.right {
|
||||
|
@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<div class="left">
|
||||
<div :class="store.mobileOpenState ? 'left hidden' : 'left'">
|
||||
<Message />
|
||||
<SocialLinks />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { mainStore } from "@/store";
|
||||
import Message from "@/components/Message/index.vue";
|
||||
import SocialLinks from "@/components/SocialLinks/index.vue";
|
||||
const store = mainStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -15,5 +17,11 @@ import SocialLinks from "@/components/SocialLinks/index.vue";
|
||||
flex: 1 0 0%;
|
||||
margin-right: 10px;
|
||||
transform: translateY(20px);
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<div class="right">
|
||||
<div :class="store.mobileOpenState ? 'right' : 'right hidden'">
|
||||
<!-- 移动端 Logo -->
|
||||
<div class="logo" @click="store.mobileFuncState = !store.mobileFuncState">
|
||||
<span class="bg">{{ siteUrl[0] }}</span>
|
||||
<span class="sm">.{{ siteUrl[1] }}</span>
|
||||
</div>
|
||||
<!-- 功能区 -->
|
||||
<Func />
|
||||
<!-- 网站链接 -->
|
||||
@ -13,6 +18,9 @@ import { mainStore } from "@/store";
|
||||
import Func from "@/views/Func/index.vue";
|
||||
import Link from "@/components/Links/index.vue";
|
||||
const store = mainStore();
|
||||
|
||||
// 站点链接
|
||||
let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
|
||||
</script>
|
||||
|
||||
|
||||
@ -20,5 +28,29 @@ const store = mainStore();
|
||||
.right {
|
||||
flex: 1 0 0%;
|
||||
margin-left: 0.75rem;
|
||||
.logo {
|
||||
font-family: "Pacifico-Regular";
|
||||
font-size: 1.75rem;
|
||||
position: fixed;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
top: 8%;
|
||||
left: calc(50% - 70px);
|
||||
transition: all 0.3s;
|
||||
animation: fade;
|
||||
-webkit-animation: fade 0.5s;
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
margin-left: 0;
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user