初始化项目

This commit is contained in:
dengtongyu committed 2020-04-09 16:18:49 +08:00
1 parent c2e3cc50e7
commit 131fd5323c
14 files changed
+648 -10

No files matched your search

+186
View File
@@ -2158,6 +2158,37 @@
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
"dev": true
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -3443,6 +3474,58 @@
"sha.js": "^2.4.8"
}
},
"cross-env": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.2.tgz",
"integrity": "sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw==",
"dev": true,
"requires": {
"cross-spawn": "^7.0.1"
},
"dependencies": {
"cross-spawn": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
"integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
"dev": true,
"requires": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
"which": "^2.0.1"
}
},
"path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true
},
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
"dev": true,
"requires": {
"shebang-regex": "^3.0.0"
}
},
"shebang-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
"dev": true
},
"which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
"dev": true,
"requires": {
"isexe": "^2.0.0"
}
}
}
},
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -6840,6 +6923,12 @@
}
}
},
"js-base64": {
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
"dev": true
},
"js-message": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
@@ -8883,6 +8972,16 @@
}
}
},
"postcss-px-to-viewport": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
"integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
"dev": true,
"requires": {
"object-assign": ">=4.0.1",
"postcss": ">=5.0.2"
}
},
"postcss-reduce-initial": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -8963,6 +9062,93 @@
"integrity": "sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==",
"dev": true
},
"postcss-write-svg": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/postcss-write-svg/-/postcss-write-svg-3.0.1.tgz",
"integrity": "sha1-duSV1A8jIf8JtWSH4DhFr3N/gBo=",
"dev": true,
"requires": {
"postcss": "^5.2.6",
"postcss-value-parser": "^3.3.0"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
},
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
"dev": true
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
},
"dependencies": {
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
"dev": true
}
}
},
"has-flag": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
"dev": true
},
"postcss": {
"version": "5.2.18",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
"integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
"dev": true,
"requires": {
"chalk": "^1.1.3",
"js-base64": "^2.1.9",
"source-map": "^0.5.6",
"supports-color": "^3.2.3"
}
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
}
},
"supports-color": {
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
"dev": true,
"requires": {
"has-flag": "^1.0.0"
}
}
}
},
"prelude-ls": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+6 -1
View File
@@ -3,11 +3,13 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"serve:test": "cross-env VUE_APP_PROXY=1 vue-cli-service serve",
"serve:prod": "cross-env VUE_APP_PROXY=2 vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
@@ -21,9 +23,12 @@
"@vue/cli-service": "~4.3.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.2",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.2.2",
"postcss-px-to-viewport": "^1.1.1",
"postcss-write-svg": "^3.0.1",
"prettier": "^1.19.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
+42
View File
@@ -0,0 +1,42 @@
// 代理环境,1测试环境,2生产环境
const VUE_APP_PROXY = process.env.VUE_APP_PROXY
? parseInt(process.env.VUE_APP_PROXY)
: 1;
let target = "";
switch (VUE_APP_PROXY) {
case 1:
target = "https://xtbgtest.digitalgd.com.cn";
break;
case 2:
target = "https://xtbg.gdzwfw.gov.cn";
break;
default:
target = "https://xtbgdev.digitalgd.com.cn";
}
let proxyTable = {
"/zuul": {
target: target,
changeOrigin: true,
secure: false
},
"/sjht": {
target: target,
changeOrigin: true,
secure: false
},
"/media/": {
target: target,
changeOrigin: true,
secure: false
},
"/bzdb": {
target: target,
changeOrigin: true,
secure: false
}
};
module.exports = proxyTable;
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
+1 -7
View File
@@ -9,13 +9,7 @@
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
@import "@/styles";
#nav {
padding: 30px;
+12
View File
@@ -0,0 +1,12 @@
import ajax from "@/lib/ajax";
import config from "@/config";
// host
const HOST = config.host("/zuul", "/mrxf");
// 来访总量统计列表
const petitionReportTotal = param => {
return ajax.post(`${HOST}/petitionReport/total`, param);
};
export { petitionReportTotal };
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1 class="border-1px">{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br />
check out the
+24
View File
@@ -0,0 +1,24 @@
// 应用的名称
const appName = "每日信访动态报送";
// 是否启用YApi
const YApi = false;
// 代理环境,1测试环境,2生产环境
const VUE_APP_PROXY = process.env.VUE_APP_PROXY
? parseInt(process.env.VUE_APP_PROXY)
: 1;
const host = (PASSID, GATEWAY) => {
// host
const HOST = YApi ? `/mock/73/${GATEWAY}` : `${PASSID}${GATEWAY}`;
return HOST;
};
module.exports = {
appName,
YApi,
VUE_APP_PROXY,
host
};
+55
View File
@@ -0,0 +1,55 @@
import axios from "axios";
// 添加公共请求头
const getHeader = function(options) {
if (options === "form") {
return Object.assign({
"content-type": "application/x-www-form-urlencoded"
});
} else if (options === "file") {
return Object.assign({ "content-type": "multipart/form-data" });
}
};
const request = function(method, url, params, options) {
return new Promise(function(resolve, reject) {
axios
.request({
headers: getHeader(options),
url: url,
method: method,
withCredentials: true,
data: method === "post" ? params : {},
params: method === "get" ? params : {},
timeout: 120000,
responseType: "json"
})
.then(function(response) {
let data = response.data || JSON.parse(response.request.responseText);
resolve(data);
})
.catch(function(error) {
if (typeof error.response === "undefined") {
if (
location.hostname == "127.0.0.1" ||
location.hostname == "localhost"
) {
reject(error);
} else {
location.reload();
}
} else {
reject(error);
}
});
});
};
export default {
get: function(url, params, options) {
return request("get", url, params, options);
},
post: function(url, params, options) {
return request("post", url, params, options);
}
};
+118
View File
@@ -0,0 +1,118 @@
/* eslint-disable */
import XLSX from 'xlsx';
function auto_width(ws, data){
/*set worksheet max width per col*/
const colWidth = data.map(row => row.map(val => {
/*if null/undefined*/
if (val == null) {
return {'wch': 10};
}
/*if chinese*/
else if (val.toString().charCodeAt(0) > 255) {
return {'wch': val.toString().length * 2};
} else {
return {'wch': val.toString().length};
}
}))
/*start in the first row*/
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j]['wch'] < colWidth[i][j]['wch']) {
result[j]['wch'] = colWidth[i][j]['wch'];
}
}
}
ws['!cols'] = result;
}
function json_to_array(key, jsonData){
return jsonData.map(v => key.map(j => { return v[j] }));
}
// fix data,return string
function fixdata(data) {
let o = ''
let l = 0
const w = 10240
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
return o
}
// get head from excel file,return array
function get_header_row(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r /* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
}
// export const export_table_to_excel= (id, filename) => {
// const table = document.getElementById(id);
// const wb = XLSX.utils.table_to_book(table);
// XLSX.writeFile(wb, filename);
// /* the second way */
// // const table = document.getElementById(id);
// // const wb = XLSX.utils.book_new();
// // const ws = XLSX.utils.table_to_sheet(table);
// // XLSX.utils.book_append_sheet(wb, ws, filename);
// // XLSX.writeFile(wb, filename);
// }
export const export_table_to_excel= (table, filename) => {
if(!table) return;
const wb = XLSX.utils.table_to_book(table);
XLSX.writeFile(wb, filename)
}
export const export_json_to_excel = ({data, key, title, filename, autoWidth}) => {
const wb = XLSX.utils.book_new();
data.unshift(title);
const ws = XLSX.utils.json_to_sheet(data, {header: key, skipHeader: true});
if(autoWidth){
const arr = json_to_array(key, data);
auto_width(ws, arr);
}
XLSX.utils.book_append_sheet(wb, ws, filename);
XLSX.writeFile(wb, filename + '.xlsx');
}
export const export_array_to_excel = ({key, data, title, filename, autoWidth}) => {
const wb = XLSX.utils.book_new();
const arr = json_to_array(key, data);
arr.unshift(title);
const ws = XLSX.utils.aoa_to_sheet(arr);
if(autoWidth){
auto_width(ws, arr);
}
XLSX.utils.book_append_sheet(wb, ws, filename);
XLSX.writeFile(wb, filename + '.xlsx');
}
export const read = (data, type) => {
/* if type == 'base64' must fix data first */
// const fixedData = fixdata(data)
// const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
const workbook = XLSX.read(data, { type: type });
const firstSheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[firstSheetName];
const header = get_header_row(worksheet);
const results = XLSX.utils.sheet_to_json(worksheet);
return {header, results};
}
export default {
export_table_to_excel,
export_array_to_excel,
export_json_to_excel,
read
}
+121
View File
@@ -0,0 +1,121 @@
import { CookieStorage } from "cookie-storage";
import config from "@/config";
const cookieStorage = new CookieStorage();
const systemCode = config.systemCode;
// 随机长度字符串
const randomString = len => {
len = len || 10;
var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var maxPos = chars.length;
var str = "";
for (let i = 0; i < len; i++) {
str += chars.charAt(Math.floor(Math.random() * maxPos));
}
return str;
};
// 设置localStorage
const _setItem = (key, data) => {
localStorage.setItem(key, JSON.stringify(data));
};
// 获取localStorage
const _getItem = key => {
let data = localStorage.getItem(key);
if (data) data = JSON.parse(data);
return data;
};
// 删除localStorage
const _removeItem = key => {
localStorage.removeItem(key);
};
// 缓存用户信息
const setUserInfoCache = info => {
let data = {
account: info.account,
avatar: info.avatar,
userId: info.userId,
userName: info.userName
};
_setItem("__UserInfo__", data);
};
// 获取缓存的用户信息
const getUserInfoCache = () => {
let data = _getItem("__UserInfo__");
return data;
};
// 删除用户信息
const removeUserInfoCache = () => {
_removeItem("__UserInfo__");
};
// 缓存token
const setToken = value => {
let curDate = new Date();
let nextDate = new Date(curDate.getTime() + 24 * 60 * 60 * 1000);
cookieStorage.setItem("Authorization", value, {
domain: document.domain,
expires: nextDate
});
};
// 获取token
const getToken = () => {
return cookieStorage.getItem("Authorization");
};
// 删除token
const removeToken = () => {
cookieStorage.removeItem("Authorization");
};
// 缓存用户权限
const setUserPowerCache = arr => {
let map = {};
for (let i = 0; i < arr.length; i++) {
let k = arr[i].powerCode;
map[k] = arr[i];
}
_setItem(`__UserPower_${systemCode}__`, map);
};
// 获取缓存的用户权限
const getUserPowerCache = () => {
let data = _getItem(`__UserPower_${systemCode}__`);
return data;
};
// 获取指定的用户权限
const getUserSomeonePowerCache = code => {
let data = getUserPowerCache();
let item = null;
if (data) item = data[code];
return item;
};
// 删除用户权限
const removeUserPowerCache = () => {
_removeItem(`__UserPower_${systemCode}__`);
};
export {
randomString,
setUserInfoCache,
getUserInfoCache,
removeUserInfoCache,
setToken,
getToken,
removeToken,
setUserPowerCache,
getUserPowerCache,
removeUserPowerCache,
getUserSomeonePowerCache
};
+29
View File
@@ -0,0 +1,29 @@
html,body,#app {
width: 100%;
height: 100%;
margin: 0;
}
h1,h2,h3,h4,h5,p,dl,dt,dd,ol,ul,li {
padding: 0;
margin: 0
}
#app {
font-family: "Helvetica","Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
font-size: 14px;
}
@svg 1px-border {
height: 2px;
@rect {
fill: var(--color, black);
width: 100%;
height: 50%;
}
}
.border-1px {
border: 1px solid transparent;
border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
+2
View File
@@ -0,0 +1,2 @@
@import "./global.scss";
+50
View File
@@ -0,0 +1,50 @@
const config = require("./src/config");
const proxy = require("./proxy.config");
const pxtoviewport = require("postcss-px-to-viewport");
const pxtowritesvg = require("postcss-write-svg");
module.exports = {
publicPath: "./",
outputDir: "dist",
assetsDir: "static",
indexPath: "index.html",
pages: {
index: {
// page 的入口
entry: "src/main.js",
// 模板来源
template: "public/index.html",
// 在 dist/index.html 的输出
filename: "index.html",
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: config.systemName,
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ["chunk-vendors", "chunk-common", "index"]
}
},
devServer: {
proxy: proxy
},
css: {
loaderOptions: {
postcss: {
plugins: [
pxtowritesvg({
utf8: false
}),
pxtoviewport({
viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
viewportUnit: "vw", // 指定需要转换成的视窗单位,建议使用vw
selectorBlackList: [".ignore", ".hairlines"], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
mediaQuery: false // 允许在媒体查询中转换`px`
})
]
}
}
}
};