From 062eabd69860d5e6b8df81c265766d023be36097 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Tue, 27 May 2025 17:11:09 +0800
Subject: [PATCH] feat: 后台管理适配
---
src/components/basic-container/main.vue | 7 ++
vite.config.mjs | 16 +++++
src/utils/rem.js | 12 ++++
src/main.js | 3
src/styles/media.scss | 66 ----------------------
package.json | 1
src/page/index/setting.vue | 2
src/styles/common.scss | 5 +
pnpm-lock.yaml | 11 +++
9 files changed, 52 insertions(+), 71 deletions(-)
diff --git a/package.json b/package.json
index 46e938c..2e00a88 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"@saber/nf-design-base-elp": "^1.2.0",
"@smallwei/avue": "^3.4.4",
"@turf/turf": "6.5.0",
+ "postcss-pxtorem": "^6.1.0",
"animate.css": "^4.1.1",
"avue-plugin-ueditor": "^1.0.3",
"axios": "^0.21.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 35a5714..a31cd6d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@
nprogress:
specifier: ^0.2.0
version: 0.2.0
+ postcss-pxtorem:
+ specifier: ^6.1.0
+ version: 6.1.0(postcss@8.4.38)
reconnecting-websocket:
specifier: ^4.4.0
version: 4.4.0
@@ -3358,6 +3361,14 @@
splaytree: 3.1.2
dev: false
+ /postcss-pxtorem@6.1.0(postcss@8.4.38):
+ resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
+ peerDependencies:
+ postcss: ^8.0.0
+ dependencies:
+ postcss: 8.4.38
+ dev: false
+
/postcss@8.4.38:
resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
engines: {node: ^10 || ^12 || >=14}
diff --git a/src/components/basic-container/main.vue b/src/components/basic-container/main.vue
index e98f520..8c07b6b 100644
--- a/src/components/basic-container/main.vue
+++ b/src/components/basic-container/main.vue
@@ -35,8 +35,13 @@
<style lang="scss">
.basic-container {
- padding: 10px 6px;
+ padding: 0 10px;
box-sizing: border-box;
+ height: 100%;
+
+ .basic-container__card{
+ height: 100% !important;
+ }
&--block {
height: 100%;
diff --git a/src/main.js b/src/main.js
index 5ebb08f..e24d589 100644
--- a/src/main.js
+++ b/src/main.js
@@ -47,7 +47,8 @@
import * as DC from '@dvgis/dc-sdk'
import '@dvgis/dc-sdk/dist/dc.min.css'
window.DC = Object.create(DC)
-
+import { onResize } from '@/utils/rem'
+onResize()
const { VITE_APP_BASE,VITE_APP_CESIUM_TOKEN } = import.meta.env
window.CESIUM_BASE_URL = `${VITE_APP_BASE}/cesiumPu`
Cesium.Ion.defaultAccessToken = VITE_APP_CESIUM_TOKEN
diff --git a/src/page/index/setting.vue b/src/page/index/setting.vue
index 1000fa7..d2d719d 100644
--- a/src/page/index/setting.vue
+++ b/src/page/index/setting.vue
@@ -97,7 +97,7 @@
&-icon {
color: #666;
position: fixed;
- bottom: 200px;
+ top: 1020px;
right: 20px;
z-index: 2048;
}
diff --git a/src/styles/common.scss b/src/styles/common.scss
index bf3ea9d..b5dfd66 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -20,7 +20,8 @@
.avue-layout {
display: flex;
- height: 100%;
+ height: 1080px;
+ width: 1920px;
overflow: hidden;
&--horizontal {
@@ -178,4 +179,4 @@
.cesium-viewer-bottom {
display: none;
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/media.scss b/src/styles/media.scss
index fac489c..e69de29 100644
--- a/src/styles/media.scss
+++ b/src/styles/media.scss
@@ -1,66 +0,0 @@
-@media screen and (max-width: 992px) {
- .avue-sidebar {
- position: fixed;
- top: 0;
- left: -265px;
- z-index: 1024;
- }
- .avue--collapse {
- .avue-sidebar {
- left: 0;
- width: $sidebar_width;
- }
-
- .avue-logo {
- width: $sidebar_width;
- }
-
- .avue-main {
- margin-left: $sidebar_width;
- }
- }
- // ele的自适应
- .el-dialog,
- .el-message-box {
- width: 98%;
- }
- //登录页面
- .login-left {
- width: 100%;
- min-height: auto;
-
- .title {
- margin-top: 20px;
- font-size: 20px;
- text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
- }
-
- .img {
- width: 50px;
- }
- }
- .login-logo {
- padding-top: 30px;
- margin-left: -30px;
- }
- .login-border {
- border-radius: 5px;
- padding: 20px;
- margin: 0 auto;
- width: 100%;
- }
- .login-main {
- width: 100%;
- background-color: #fff;
- padding: 10px 20px;
- box-shadow: none
- }
- .login-container {
- &::before {
- margin-left: 0
- }
- }
- .top-bar__item {
- display: none;
- }
-}
diff --git a/src/utils/rem.js b/src/utils/rem.js
new file mode 100644
index 0000000..741e12b
--- /dev/null
+++ b/src/utils/rem.js
@@ -0,0 +1,12 @@
+export function onResize() {
+ const resize = () => {
+ const scale = document.documentElement.clientWidth / 192
+ document.documentElement.style.fontSize = scale + 'px'
+ }
+ resize()
+ window.addEventListener('resize', resize)
+}
+
+export const pxToRem = width => {
+ return width * 0.1 + 'rem'
+}
diff --git a/vite.config.mjs b/vite.config.mjs
index 2744836..3e6d554 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -1,6 +1,7 @@
import { defineConfig, loadEnv } from 'vite';
import { resolve } from 'path';
import createVitePlugins from './vite/plugins';
+import postCssPxToRem from 'postcss-pxtorem'
// https://vitejs.dev/config/
export default ({ mode, command }) => {
const env = loadEnv(mode, process.cwd());
@@ -55,6 +56,21 @@
utils: resolve(__dirname, './src/utils'),
},
},
+ css: {
+ postcss: {
+ plugins: [
+ postCssPxToRem({
+ rootValue: 10, // 指定转换基准值，通常是设计稿宽度的1/10
+ propList: ['*'], // 可以从px转换为rem的属性，这里是所有属性
+ unitPrecision: 5, // 允许REM单位增长到的十进制数
+ selectorBlackList: [], // 选择器黑名单，忽略转换的选择器
+ replace: true, // 替换包含rem的规则，而不是添加回退
+ mediaQuery: false, // 允许在媒体查询中转换px
+ minPixelValue: 0 // 设置要替换的最小像素值
+ }),
+ ]
+ }
+ },
plugins: createVitePlugins(env, command === 'build'),
build: buildConfig,
optimizeDeps: {
--
Gitblit v1.9.3