mirror of
https://github.com/imsyy/home.git
synced 2025-05-19 04:30:13 +09:00
0ea222c376
问题: 当（移动端）屏幕较小时，会造成组件重叠、组件在屏幕外(显示不全)等。 1. 对小屏移动端（手机）显示做优化，特别是横屏。=> 低于高度或者宽度显示阈值，则固定大小，使用滚轮 2. 对显示滚轮做优化，使组件在出现滚轮时不产生瞬间偏移，造成视觉割裂感 3. 因为做了小屏显示的优化, 我认为不必将设置界面阈值设置为990，我降低到了720（让移动端也可以开启），并对其做了响应式
72 lines
1.6 KiB
Vue
72 lines
1.6 KiB
Vue
<template>
|
|
<div :class="store.mobileOpenState ? 'right' : 'right hidden'">
|
|
<!-- 移动端 Logo -->
|
|
<div class="logo text-hidden" @click="store.mobileFuncState = !store.mobileFuncState">
|
|
<span class="bg">{{ siteUrl[0] }}</span>
|
|
<span class="sm">.{{ siteUrl[1] }}</span>
|
|
</div>
|
|
<!-- 功能区 -->
|
|
<Func />
|
|
<!-- 网站链接 -->
|
|
<Link />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { mainStore } from "@/store";
|
|
import Func from "@/views/Func/index.vue";
|
|
import Link from "@/components/Links.vue";
|
|
const store = mainStore();
|
|
|
|
// 站点链接
|
|
const siteUrl = computed(() => {
|
|
const url = import.meta.env.VITE_SITE_URL;
|
|
if (!url) return "imsyy.top".split(".");
|
|
// 判断协议前缀
|
|
if (url.startsWith("http://") || url.startsWith("https://")) {
|
|
const urlFormat = url.replace(/^(https?:\/\/)/, "");
|
|
return urlFormat.split(".");
|
|
}
|
|
return url.split(".");
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.right {
|
|
// flex: 1 0 0%;
|
|
width: 50%;
|
|
margin-left: 0.75rem;
|
|
.logo {
|
|
width: 100%;
|
|
font-family: "Pacifico-Regular";
|
|
font-size: 2.25rem;
|
|
position: fixed;
|
|
top: 6%;
|
|
left: 0;
|
|
text-align: center;
|
|
transition: transform 0.3s;
|
|
animation: fade 0.5s;
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
@media (min-width: 721px) {
|
|
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) {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|