| | |
| | | "moment": "^2.29.4", |
| | | "nprogress": "0.2.0", |
| | | "pinyin-match": "^1.2.2", |
| | | "postcss-px-to-viewport": "^1.1.1", |
| | | "postcss-pxtorem": "^5.1.1", |
| | | "print-js": "^1.6.0", |
| | | "quill": "1.3.7", |
| | | "screenfull": "5.0.2", |
New file |
| | |
| | | module.exports = { |
| | | plugins: { |
| | | // 'postcss-pxtorem': { |
| | | // rootValue: 19, // 表示根元素字体大小或根据input参数返回根元素字体大小 |
| | | // propList: ['*'], // 可以从px更改为rem的属性, 通配符*表示启用所有属性 |
| | | // selectorBlackList: ['.norem'] // 过滤掉.norem开头的class,不进行rem转换 |
| | | // }, |
| | | 'postcss-px-to-viewport': { |
| | | viewportWidth: 1920, // 设计稿宽度(如750px的UI稿) |
| | | unitPrecision: 3, // 转换后单位的小数位数 |
| | | viewportUnit: 'vw', // 目标单位(推荐vw) |
| | | selectorBlackList: ['.ignore', 'vant'], // 不转换的类名(如第三方组件库) |
| | | minPixelValue: 1, // 小于等于1px的值不转换 |
| | | mediaQuery: false, // 媒体查询中的px不转换 |
| | | exclude: /node_modules/ // 排除node_modules目录 |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | import Print from "vue-print-nb"; |
| | | |
| | | import JsonExcel from "vue-json-excel"; |
| | | |
| | | import '@/utils/rem.js'; //在main.js中引入rem.js |
| | | Vue.component("downloadExcel", JsonExcel); |
| | | |
| | | import "./assets/icons"; // icon |
New file |
| | |
| | | import { debounce } from 'lodash'; |
| | | export default { |
| | | methods: { |
| | | getResponsiveStyles() { |
| | | const width = window.innerWidth; |
| | | if (width < 576) { |
| | | return 'font-size: 14px !important; padding: 8px !important;'; |
| | | } else if (width < 768) { |
| | | return 'font-size: 16px !important; padding: 12px !important;'; |
| | | } else { |
| | | return 'font-size: 18px !important; padding: 16px !important;'; |
| | | } |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.makeInlineStylesResponsive(); |
| | | window.addEventListener('resize', debounce(this.makeInlineStylesResponsive, 200)); |
| | | }, |
| | | beforeDestroy() { |
| | | window.removeEventListener('resize', this.makeInlineStylesResponsive); |
| | | }, |
| | | methods: { |
| | | makeInlineStylesResponsive() { |
| | | const elements = this.$el.querySelectorAll('[style]'); |
| | | elements.forEach(el => { |
| | | const originalStyle = el.getAttribute('style'); |
| | | el.setAttribute('style', ` |
| | | ${originalStyle}; |
| | | ${this.getResponsiveStyles()} |
| | | `); |
| | | }); |
| | | } |
| | | } |
| | | } |
New file |
| | |
| | | // 配置基本大小 |
| | | let baseSize = 19; |
| | | |
| | | // 设置 rem 函数 |
| | | function setRem () { |
| | | //当前页面宽度相对于1920px屏幕宽的缩放比例,可根据自己需要修改。 |
| | | let scale = document.documentElement.clientWidth / 1920; |
| | | console.log(scale,2222) |
| | | //设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整) |
| | | document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' |
| | | } |
| | | setRem(); //初始化 |
| | | |
| | | // 适配 - 重置函数 |
| | | function resetRem (num) { |
| | | if(num) baseSize = Number(num); |
| | | setRem(); |
| | | } |
| | | window.resetRem = resetRem; // 全局可调用(其他方式也可) |
| | | |
| | | // 改变窗口大小时重置 rem |
| | | window.onresize = function () { |
| | | setRem() |
| | | }; |
| | |
| | | <h4>近一月统计</h4> |
| | | </div> |
| | | <div class="data-view"> |
| | | <div id="main" style="width:95%;height:330px"></div> |
| | | <div id="main"></div> |
| | | </div> |
| | | <div class="view"> |
| | | <div id="main2"></div> |
| | |
| | | .day { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | font-size: 12px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .data-view { |
| | |
| | | |
| | | #main { |
| | | padding: 10px; |
| | | width:95%; |
| | | height:330px |
| | | } |
| | | |
| | | .view { |
| | |
| | | <el-upload |
| | | ref="upload" |
| | | :limit="1" |
| | | :key="uploadKey" |
| | | accept=".xlsx, .xls" |
| | | :headers="upload.headers" |
| | | :data="data" |
| | |
| | | ], |
| | | }, |
| | | ListObj: {}, |
| | | uploadKey:0, |
| | | // 遮罩层 |
| | | loading: true, |
| | | pacStatus: "启用", |
| | |
| | | /** 导入按钮操作 */ |
| | | handleImport() { |
| | | if (this.objs.drugManufacturerId && this.objs.reservationTime) { |
| | | this.$refs.upload?.clearFiles(); |
| | | this.uploadKey = Date.now(); // 改变 key 强制重新渲染组件 |
| | | this.upload.title = "用户导入"; |
| | | this.upload.open = true; |
| | | } else { |
| | |
| | | </div> |
| | | <div style="width: 50%"> |
| | | <!-- v-if="this.rightTabShow" --> |
| | | <el-table v-if="tableList.length > 0" v-loading="loading" :data="tableList" @selection-change="handleChange" |
| | | <el-table :row-key="getRowKey" v-if="tableList.length > 0" v-loading="loading" :data="tableList" @selection-change="handleChange" |
| | | :span-method="objectSpanMethod" ref="tab1" :row-class-name="tableRowClassName" border height="520px"> |
| | | <el-table-column type="selection" width="40" align="center" /> |
| | | <!-- :selectable="selectEnable" --> |
| | |
| | | console.log(`是否禁用选择: ${this.disableSelections}`); |
| | | }, |
| | | |
| | | getRowKey(row) { |
| | | return row.id; // 必须唯一且稳定 |
| | | }, |
| | | |
| | | fetchData(tjNumber) { |
| | | return new Promise((resolve, reject) => { |
| | | this.loading = true; |