Browse Source

feat: 兼容手机端优化 调整 前提

lanceJiang 10 months ago
parent
commit
3c3b5c1feb

+ 1 - 1
src/components/SizeSelect/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dropdown class="menu--size-select-wrap" trigger="hover" @command="handleSetSize">
+	<el-dropdown class="max-m:hidden menu--size-select-wrap" trigger="hover" @command="handleSetSize">
 		<div class="menu--size-select menu-item le-hover-effect--bg">
 			<LeIcon class-name="size-icon" icon-class="le-text-size" />
 		</div>

+ 5 - 0
src/hooks/useTheme.ts

@@ -9,6 +9,7 @@ import { asideTheme } from '@/styles/theme/aside'
 import { headerTheme } from '@/styles/theme/header'
 import { footerTheme } from '@/styles/theme/footer'
 import { defaultSettingState } from '@/settings.ts'
+import { isMaxM } from '@/utils'
 
 /**
  * @description 全局主题 hooks
@@ -120,6 +121,10 @@ export const useTheme = () => {
 		watermarkChange()
 		if (isGrey.value) changeGreyOrWeak('grey', true)
 		if (isWeak.value) changeGreyOrWeak('weak', true)
+		setting.changeCollapse(isMaxM())
+		// 判断是否是小屏 额外处理
+		/*if () {
+		}*/
 	}
 
 	const resetTheme = () => {

+ 3 - 0
src/store/modules/settings.ts

@@ -16,6 +16,9 @@ export const useSettingStore = defineStore({
 	// 	tagsView
 	// }),
 	actions: {
+		changeCollapse(bool: boolean) {
+			this.isCollapse = bool
+		},
 		async changeSetting(...payload: [string, any]) {
 			const [key, value] = payload
 			switch (key) {

+ 5 - 0
src/utils/index.ts

@@ -300,3 +300,8 @@ export const ImageArr = [
 	'transfer',
 	'wallet'
 ]
+
+// 判断是否为小屏 同 theme.screens.max-m width
+export const isMaxM = () => {
+	return window.innerWidth <= 750
+}

+ 18 - 6
tailwind.config.ts

@@ -6,12 +6,24 @@ export default {
 		preflight: false
 	},
 	theme: {
-		// screens: {
-		// 	sm: '480px',
-		// 	md: '768px',
-		// 	lg: '976px',
-		// 	xl: '1440px'
-		// },
+		screens: {
+			'max-m': { max: '750px' }, // 最大宽 640
+			'min-m': '750px', // 最小宽 640
+			sm: '640px',
+			// => @media (min-width: 640px) { ... }
+
+			md: '768px',
+			// => @media (min-width: 768px) { ... }
+
+			lg: '1024px',
+			// => @media (min-width: 1024px) { ... }
+
+			xl: '1440px',
+			// => @media (min-width: 1280px) { ... }
+
+			'2xl': '1536px'
+			// => @media (min-width: 1536px) { ... }
+		},
 		// colors: {
 		// 	blue: '#1fb6ff',
 		// 	pink: '#ff49db',