修改样式

package-lock.json

@@ -8144,6 +8144,11 @@
         "nopt": "~4.0.1"
       }
     },
+    "js-pinyin": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/js-pinyin/-/js-pinyin-0.1.9.tgz",
+      "integrity": "sha1-zfGTNWRd2yDUYw3xBYqsJdJWrf0="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "better-scroll": "^1.15.2",
     "cropperjs": "^1.4.3",
     "element-ui": "^2.9.1",
+    "js-pinyin": "^0.1.9",
     "lib-flexible": "^0.3.2",
     "mint-ui": "^2.2.13",
     "moment": "^2.24.0",

src/App.vue

@@ -35,4 +35,8 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+#app {
+  height: 100%;
+}
+</style>

src/main.js

@@ -1,27 +1,27 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import router from './router'
-import MintUI from 'mint-ui'
-import store from './store'
-import 'mint-ui/lib/style.css'
-import './assets/styles/iconfont.css'
-import './permission'
+import Vue from "vue";
+import App from "./App";
+import router from "./router";
+import MintUI from "mint-ui";
+import store from "./store";
+import "mint-ui/lib/style.css";
+import "./assets/styles/iconfont.css";
+import "./permission";
 
-import '@/styles/reset.scss'
-import '@/styles/variables.scss'
-import '@/styles/style.scss'
+import "@/styles/reset.scss";
+import "@/styles/variables.scss";
+// import "@/styles/style.scss";
 // eslint-disable-next-line import/no-duplicates
 // import Vant from "vant";
 // import "vant/lib/index.css";
 // import "vant/lib/icon/local.css";
 // import '@/styles/vant-css/index.css'
-import '@/styles/media.scss'
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
-import pinyin from 'js-pinyin'
-import './libs/rem.js'
+import "@/styles/media.scss";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import pinyin from "js-pinyin";
+// import "./libs/rem.js";
 import {
   DropdownMenu,
   DropdownItem,
@@ -49,7 +49,7 @@ import {
   IndexBar,
   IndexAnchor
   // eslint-disable-next-line no-irregular-whitespace,import/no-duplicates
-} from 'vant'
+} from "vant";
 Vue.use(DropdownMenu)
   .use(DropdownItem)
   .use(Tab)
@@ -74,7 +74,7 @@ Vue.use(DropdownMenu)
   .use(Toast)
   .use(Search)
   .use(IndexBar)
-  .use(IndexAnchor)
+  .use(IndexAnchor);
 // import "@/lib/flexible.js";
 
 // main.js
@@ -85,20 +85,20 @@ Vue.use(DropdownMenu)
 // Vue.use(AlertPlugin)
 // Vue.use(ToastPlugin)
 
-Vue.use(MintUI)
+Vue.use(MintUI);
 // Vue.use(Vant)
-Vue.use(ElementUI)
-Vue.config.productionTip = false
+Vue.use(ElementUI);
+Vue.config.productionTip = false;
 
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
   components: {
     App
   },
-  template: '<App/>'
-})
+  template: "<App/>"
+});
 
 // eslint-disable-next-line no-undef

src/pages/homeIndex/index.vue

@@ -8,7 +8,7 @@
           </van-dropdown-menu>
         </div>
         <div class="homeTitleRight">
-          <i class="iconfont icon-sousuo search"></i>
+          <i class="iconfont icon-sousuo search1"></i>
           <van-icon class="iconOne" name="comment-o" />
           <van-icon class="iconOne" name="add-o" />
         </div>
@@ -20,31 +20,43 @@
     <div class="noticeBox">
       <i class="iconfont icon-public-notice notice"></i>
       <div class="noticeNews">
-        <div>今日上机：<span>6&ensp;人</span></div>
-        <div>今日透析：<span>6&ensp;人</span></div>
-        <div>今日生日：<span>6&ensp;人</span></div>
+        <div>
+          今日上机：
+          <span>6&ensp;人</span>
+        </div>
+        <div>
+          今日透析：
+          <span>6&ensp;人</span>
+        </div>
+        <div>
+          今日生日：
+          <span>6&ensp;人</span>
+        </div>
       </div>
     </div>
     <div class="background1"></div>
     <div class="management">
       <div class="managementTitle">
         <div class="managementName">
-          管理控制台<span>（仅管理员可见）</span>
+          管理控制台
+          <span>（仅管理员可见）</span>
+        </div>
+        <div class="setting">
+          <van-icon name="setting-o" />管理
         </div>
-        <div class="setting"><van-icon name="setting-o" />管理</div>
       </div>
       <div class="managementBox">
         <div class="managementOne">
-          <img src="../../assets/images/M1.png" alt="" />员工管理
+          <img src="../../assets/images/M1.png" alt />员工管理
         </div>
         <div class="managementOne">
-          <img src="../../assets/images/M2.png" alt="" />权限管理
+          <img src="../../assets/images/M2.png" alt />权限管理
         </div>
         <div class="managementOne">
-          <img src="../../assets/images/M3.png" alt="" />应用管理
+          <img src="../../assets/images/M3.png" alt />应用管理
         </div>
         <div class="managementOne">
-          <img src="../../assets/images/M4.png" alt="" />机构管理
+          <img src="../../assets/images/M4.png" alt />机构管理
         </div>
       </div>
     </div>
@@ -55,52 +67,55 @@
       </div>
       <div class="applicationBox">
         <div class="applicationOne" @click="toPatients">
-          <img src="../../assets/images/S1.png" alt="" />患者中心
+          <img src="../../assets/images/S1.png" alt />患者中心
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S2.png" alt="" />排班管理
+          <img src="../../assets/images/S2.png" alt />排班管理
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S3.png" alt="" />签到称重
+          <img src="../../assets/images/S3.png" alt />签到称重
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S4.png" alt="" />透析记录
+          <img src="../../assets/images/S4.png" alt />透析记录
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S5.png" alt="" />质控管理
+          <img src="../../assets/images/S5.png" alt />质控管理
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S6.png" alt="" />院感管理
+          <img src="../../assets/images/S6.png" alt />院感管理
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S7.png" alt="" />血管通路
+          <img src="../../assets/images/S7.png" alt />血管通路
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S8.png" alt="" />慢病管理
+          <img src="../../assets/images/S8.png" alt />慢病管理
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S9.png" alt="" />SCRM
+          <img src="../../assets/images/S9.png" alt />SCRM
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S10.png" alt="" />分销商城
+          <img src="../../assets/images/S10.png" alt />分销商城
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S11.png" alt="" />设备管理
+          <img src="../../assets/images/S11.png" alt />设备管理
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S12.png" alt="" />库存管理
+          <img src="../../assets/images/S12.png" alt />库存管理
         </div>
         <div class="applicationOne">
-          <img src="../../assets/images/S13.png" alt="" />客服中心
+          <img src="../../assets/images/S13.png" alt />客服中心
         </div>
-<!--        <div class="applicationOne">-->
-<!--          <img src="../../assets/images/S14.png" alt="" />集成中心-->
-<!--        </div>-->
+        <!--        <div class="applicationOne">-->
+        <!--          <img src="../../assets/images/S14.png" alt="" />集成中心-->
+        <!--        </div>-->
       </div>
     </div>
   </div>
 </template>
 <script>
+// import "../libs/rem.js";
+import "../../libs/rem.js";
+import "../../styles/newStyle.scss";
 export default {
   data() {
     return {
@@ -116,10 +131,33 @@ export default {
     toPatients() {
       this.$router.push({ path: "/patients" });
     }
+  },
+  created() {
+    const baseSize = 32;
+    // 设置 rem 函数
+    function setRem() {
+      const scale = document.documentElement.clientWidth / 750;
+      document.documentElement.style.fontSize =
+        baseSize * Math.min(scale, 2) + "px";
+      //   // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
+      //   let htmlWidth =
+      //     document.documentElement.clientWidth || document.body.clientWidth;
+      //   //得到html的Dom元素
+      //   let htmlDom = document.getElementsByTagName("html")[0];
+      //   //设置根元素字体大小
+      //   htmlDom.style.fontSize = htmlWidth / 23.4375 + "px";
+    }
+    // 初始化
+    setRem();
+    // 改变窗口大小时重新设置 rem
+    window.onresize = function() {
+      setRem();
+    };
   }
 };
 </script>
 
+
 <style lang="scss" scoped>
 .page_homeIndex {
   .homeTitle {
@@ -137,6 +175,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    color: #232323;
   }
   /deep/ .van-dropdown-menu__item {
     justify-content: left;
@@ -147,8 +186,13 @@ export default {
   .iconOne {
     font-size: 1.5rem;
   }
-  .search {
+  .iconfont {
+    clear: both;
+  }
+
+  .search1 {
     font-size: 1.5rem;
+    color: #232323;
   }
   .banner {
     padding: 0 1.125rem;

src/pages/main/index.vue

@@ -14,6 +14,8 @@
 </template>
 
 <script>
+import "@/styles/style.scss";
+// import "@/styles/media.scss";
 import RecordPage from "./RecordPage";
 import SideBar from "@/pages/layout/SideBar";
 import { getDialysisScheduals, getWaitingScheduals } from "@/api/dialysis";
@@ -27,7 +29,13 @@ export default {
       scheduals: [],
       advice_groups: [],
       unReadWaitNum: 0,
-      unReadDialysisNum: 0
+      unReadDialysisNum: 0,
+      sqls: [
+        window.matchMedia("(max-width:418px)"), //和CSS一样，也要注意顺序！
+        window.matchMedia("(max-width:768px)"),
+        window.matchMedia("(max-width:992px)"),
+        window.matchMedia("(max-width:1200px)")
+      ]
     };
   },
   components: {
@@ -35,6 +43,11 @@ export default {
     SideBar
   },
   created() {
+    this.mediaMatches();
+    for (var i = 0; i < this.sqls.length; i++) {
+      sqls[i].addListener(this.mediaMatches);
+    }
+    // document.documentElement.style.fontSize = 30 + "px";
     // this.requestScheduals()
     // this.requestDialysisScheduals()
   },
@@ -198,6 +211,24 @@ export default {
       console.log("111111");
       // this.requestScheduals()
       // this.requestDialysisScheduals()
+    },
+    mediaMatches() {
+      let sqls = [
+        // window.matchMedia("(max-width:418px)"), //和CSS一样，也要注意顺序！
+        window.matchMedia("(max-width:767px)"),
+        window.matchMedia("(max-width:992px)"),
+        window.matchMedia("(max-width:1200px)")
+      ];
+      if (sqls[0].matches) {
+        console.log(">418 & <=768"); // do something...
+        document.documentElement.style.fontSize = 30 + "px";
+      } else if (sqls[2].matches) {
+        console.log(">768 & <=992"); // do something...
+      } else if (sqls[3].matches) {
+        console.log("> 992 & <=1200"); // do something...
+      } else {
+        console.log(">1200");
+      }
     }
   },
   computed: {

src/styles/newStyle.scss

@@ -0,0 +1,4 @@
+html,
+body {
+  height: 100%;
+}

src/styles/style.scss

@@ -1,5 +1,6 @@
 .body {
   // background: $base-color;
+  height: 100%;
 }
 
 html,
@@ -795,7 +796,6 @@ body {
 .DialogContent,
 .optionsBox,
 .el-collapse-item__content {
-
   /* 针对缺省样式 (必须的) */
   &::-webkit-scrollbar {
     width: 6px;
@@ -851,7 +851,7 @@ body {
   font-size: 0.45rem !important;
 }
 
-.el-radio+.el-radio {
+.el-radio + .el-radio {
   margin-left: 15px !important;
 
   @media only screen and (max-width: 812px) {
@@ -935,7 +935,6 @@ body {
 }
 
 .van-field__left-icon {
-
   // @media only screen and (max-width: 812px) {
   //   // margin-right: 0 !important;
   //   margin-top: -1px;