初步确定方案自适应屏幕

package-lock.json

@@ -5379,6 +5379,23 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-ansi": {
+      "version": "0.1.0",
+      "resolved": "https://registry.nlark.com/has-ansi/download/has-ansi-0.1.0.tgz",
+      "integrity": "sha1-hPJlqujA5qiKEtcCKJS3VoiUxi4=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^0.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.nlark.com/ansi-regex/download/ansi-regex-0.2.1.tgz?cache=0&sync_timestamp=1631634988487&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-regex%2Fdownload%2Fansi-regex-0.2.1.tgz",
+          "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
+          "dev": true
+        }
+      }
+    },
     "has-bigints": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/has-bigints/download/has-bigints-1.0.1.tgz?cache=0&sync_timestamp=1615461293395&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-bigints%2Fdownload%2Fhas-bigints-1.0.1.tgz",
@@ -6533,6 +6550,11 @@
         "launch-editor": "^2.2.1"
       }
     },
+    "lib-flexible": {
+      "version": "0.3.2",
+      "resolved": "https://registry.nlark.com/lib-flexible/download/lib-flexible-0.3.2.tgz",
+      "integrity": "sha1-BvWnSDIxSi01wSA5vJw8otrqpCY="
+    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/lines-and-columns/download/lines-and-columns-1.2.4.tgz",
@@ -7028,6 +7050,12 @@
         "to-regex": "^3.0.1"
       }
     },
+    "natives": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/natives/download/natives-1.1.6.tgz",
+      "integrity": "sha1-pgO0pJirdxc2ErnqGs3sTZgPALs=",
+      "dev": true
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz",
@@ -8406,6 +8434,115 @@
       "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
       "dev": true
     },
+    "px2rem": {
+      "version": "0.5.0",
+      "resolved": "https://registry.nlark.com/px2rem/download/px2rem-0.5.0.tgz",
+      "integrity": "sha1-JLOmz3TRSttO13byB4cdmJPkEOI=",
+      "dev": true,
+      "requires": {
+        "chalk": "~0.5.1",
+        "commander": "~2.6.0",
+        "css": "~2.2.0",
+        "extend": "~3.0.0",
+        "fs-extra": "~0.16.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.nlark.com/ansi-regex/download/ansi-regex-0.2.1.tgz?cache=0&sync_timestamp=1631634988487&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-regex%2Fdownload%2Fansi-regex-0.2.1.tgz",
+          "integrity": "sha1-DY6UaWej2BQ/k+JOKYUl/BsiNfk=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "1.1.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-1.1.0.tgz",
+          "integrity": "sha1-6uy/Zs1waIJ2Cy9GkVgrj1XXp94=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "0.5.1",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-0.5.1.tgz",
+          "integrity": "sha1-Zjs6ZItotV0EaQ1JFnqoN4WPIXQ=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^1.1.0",
+            "escape-string-regexp": "^1.0.0",
+            "has-ansi": "^0.1.0",
+            "strip-ansi": "^0.3.0",
+            "supports-color": "^0.2.0"
+          }
+        },
+        "commander": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmmirror.com/commander/download/commander-2.6.0.tgz",
+          "integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "0.16.5",
+          "resolved": "https://registry.nlark.com/fs-extra/download/fs-extra-0.16.5.tgz",
+          "integrity": "sha1-GtZh+myGyWCM0bSe/G/Og0k5p1A=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^3.0.5",
+            "jsonfile": "^2.0.0",
+            "rimraf": "^2.2.8"
+          }
+        },
+        "graceful-fs": {
+          "version": "3.0.12",
+          "resolved": "https://registry.npmmirror.com/graceful-fs/download/graceful-fs-3.0.12.tgz",
+          "integrity": "sha1-ADSUfOntaV7IqwuFS8kZ6Csf+u8=",
+          "dev": true,
+          "requires": {
+            "natives": "^1.1.3"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-2.4.0.tgz?cache=0&sync_timestamp=1604161822397&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.8",
+              "resolved": "https://registry.npmmirror.com/graceful-fs/download/graceful-fs-4.2.8.tgz",
+              "integrity": "sha1-5BK40z9eAGWTy9PO5t+fLOu+gCo=",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "strip-ansi": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/download/strip-ansi-0.3.0.tgz?cache=0&sync_timestamp=1632420634508&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fstrip-ansi%2Fdownload%2Fstrip-ansi-0.3.0.tgz",
+          "integrity": "sha1-JfSOoiynkYfzF0pNuHWTR7sSYiA=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^0.2.1"
+          }
+        },
+        "supports-color": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/download/supports-color-0.2.0.tgz",
+          "integrity": "sha1-2S3iaU6z9nMjlz1649i1W0wiGQo=",
+          "dev": true
+        }
+      }
+    },
+    "px2rem-loader": {
+      "version": "0.1.9",
+      "resolved": "https://registry.nlark.com/px2rem-loader/download/px2rem-loader-0.1.9.tgz",
+      "integrity": "sha1-yPK/i+i5prQ6X2fRSy/r4RYOVqA=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "px2rem": "^0.5.0"
+      }
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/q/download/q-1.5.1.tgz",

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "axios": "^0.24.0",
     "core-js": "^3.6.5",
+    "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "view-design": "^4.7.0",
@@ -21,6 +22,7 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "px2rem-loader": "^0.1.9",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.6.11"

src/App.vue

@@ -5,12 +5,8 @@
 </template>
 
 <style lang="stylus">
-*{
-  margin: 0;
-  padding: 0;
-}
 #app
   font-family Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
-  -moz-osx-font-smoothing grayscale
+  -moz-osx-font-smoothing grayscale 
 </style>

src/assets/iconfont/iconfont.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2962009 */
+  src: url('iconfont.woff2?t=1637916518198') format('woff2'),
+       url('iconfont.woff?t=1637916518198') format('woff'),
+       url('iconfont.ttf?t=1637916518198') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-shanchu:before {
+  content: "\e74b";
+}
+
+.icon-xiangqingmingxi:before {
+  content: "\e6e3";
+}
+
+.icon-shezhi:before {
+  content: "\e60d";
+}
+
+.icon-shebeicopy:before {
+  content: "\e6b4";
+}
+
+.icon-shijian:before {
+  content: "\e624";
+}
+
+.icon-xianlu:before {
+  content: "\e6ee";
+}
+
+.icon-xianlu1:before {
+  content: "\e63c";
+}
+
+.icon-kucunguanli:before {
+  content: "\e7ca";
+}
+
+.icon-ic_chart_yibiaopan_disd:before {
+  content: "\eadf";
+}
+
+.icon-pingtaiyingyong:before {
+  content: "\e604";
+}
+
+.icon-tielu:before {
+  content: "\e600";
+}
+
+.icon-fl-renshi:before {
+  content: "\e62c";
+}
+
+.icon-jichushijianfenlei:before {
+  content: "\e66f";
+}
+
+.icon-jichuguanli:before {
+  content: "\e61c";
+}
+
+.icon-tongyongshebei:before {
+  content: "\e62d";
+}
+
+.icon-nenghao:before {
+  content: "\e609";
+}
+

src/assets/iconfont/iconfont.json

@@ -0,0 +1,121 @@
+{
+  "id": "2962009",
+  "name": "大数据后台",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "577357",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e74b",
+      "unicode_decimal": 59211
+    },
+    {
+      "icon_id": "20266235",
+      "name": "详情明细",
+      "font_class": "xiangqingmingxi",
+      "unicode": "e6e3",
+      "unicode_decimal": 59107
+    },
+    {
+      "icon_id": "468173",
+      "name": "shezhi ",
+      "font_class": "shezhi",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "5883013",
+      "name": "设备 copy",
+      "font_class": "shebeicopy",
+      "unicode": "e6b4",
+      "unicode_decimal": 59060
+    },
+    {
+      "icon_id": "8760987",
+      "name": "时间",
+      "font_class": "shijian",
+      "unicode": "e624",
+      "unicode_decimal": 58916
+    },
+    {
+      "icon_id": "9059189",
+      "name": "线路",
+      "font_class": "xianlu",
+      "unicode": "e6ee",
+      "unicode_decimal": 59118
+    },
+    {
+      "icon_id": "13741569",
+      "name": "线路 ",
+      "font_class": "xianlu1",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "16137360",
+      "name": "库存管理",
+      "font_class": "kucunguanli",
+      "unicode": "e7ca",
+      "unicode_decimal": 59338
+    },
+    {
+      "icon_id": "20308195",
+      "name": "ic_chart_仪表盘_disd",
+      "font_class": "ic_chart_yibiaopan_disd",
+      "unicode": "eadf",
+      "unicode_decimal": 60127
+    },
+    {
+      "icon_id": "21030370",
+      "name": "平台应用",
+      "font_class": "pingtaiyingyong",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "1426",
+      "name": "铁路",
+      "font_class": "tielu",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "2525720",
+      "name": "人事",
+      "font_class": "fl-renshi",
+      "unicode": "e62c",
+      "unicode_decimal": 58924
+    },
+    {
+      "icon_id": "3978400",
+      "name": "基础事件分类",
+      "font_class": "jichushijianfenlei",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "11835090",
+      "name": "基础管理",
+      "font_class": "jichuguanli",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "14151211",
+      "name": "通用设备",
+      "font_class": "tongyongshebei",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "14236777",
+      "name": "能耗",
+      "font_class": "nenghao",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    }
+  ]
+}

src/assets/styles/reset.css

@@ -1,24 +0,0 @@
-body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
-body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
-h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
-h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
-h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
-address,cite,dfn,em,i,optgroup,var{font-style:normal}
-table{border-collapse:collapse;border-spacing:0;text-align:left}
-caption,th{text-align:inherit}
-ul,ol,menu{list-style:none}
-fieldset,img{border:0}
-img,object,input,textarea,button,select{vertical-align:middle}
-article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
-audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
-blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
-textarea{overflow:auto;resize:vertical}
-input,textarea,button,select,a{outline:0 none;border: none;}
-button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
-mark{background-color:transparent}
-a,ins,s,u,del{text-decoration:none}
-sup,sub{vertical-align:baseline}
-html {overflow-x: hidden;font-size: 50px;-webkit-tap-highlight-color: transparent;}
-body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
-hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
-a {color: #25a4bb;text-decoration: none;}

src/components/common/LoadingAnimation.vue

@@ -0,0 +1,229 @@
+<template>
+    <div class="loading-animation">
+      <div class="loading-title" v-show="loadingTitle"><i class="iconfont icon-xiayibu" style="font-size:15px;margin-right:6px;"></i>{{loadingTitle}}</div>
+      <!-- <div class="loading" :class="{'loading-has-text':loadingTitle}" :style="loadingTitle ? 'height:calc(100% -'+ height+'px)':''"> -->
+      <div class="loading" :class="{'loading-has-text':loadingTitle}">
+       <div class="spinner">
+        <div class="spinner-container container1">
+          <div class="circle1"></div>
+          <div class="circle2"></div>
+          <div class="circle3"></div>
+          <div class="circle4"></div>
+        </div>
+        <div class="spinner-container container2">
+          <div class="circle1"></div>
+          <div class="circle2"></div>
+          <div class="circle3"></div>
+          <div class="circle4"></div>
+        </div>
+        <div class="spinner-container container3">
+          <div class="circle1"></div>
+          <div class="circle2"></div>
+          <div class="circle3"></div>
+          <div class="circle4"></div>
+        </div>
+      </div>
+      <p class="loading-text">{{ loadingText }}</p>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'LoadingAnimation',
+  props: {
+    loadingTitle: {
+      type: String,
+      default: ''
+    },
+    loadingText: {
+      type: String,
+      default: '正在努力加载中，请耐心等待 ...'
+    },
+    height: {
+      type: Number,
+      default: 30
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style scoped>
+.loading-title {
+    text-align: left;
+    color: #ec9c45;
+    font-size: 18px;
+    margin: 12px 0 0 14px;
+    font-weight: bold;
+  }
+.loading {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.loading-has-text {
+  height: calc(100% - 30px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 30px;
+}
+.loading-text {
+  font-size: 16px;
+  color: #636b7f;
+  line-height: 16px;
+  text-align: center;
+  padding-top: 20px;
+}
+.spinner {
+  /* margin: 10px auto; */
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.container1 > div,
+.container2 > div,
+.container3 > div {
+  width: 12px;
+  height: 12px;
+  background-color: #2d8cf0;
+  border-radius: 100%;
+  position: absolute;
+  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
+  animation: bouncedelay 1.2s infinite ease-in-out;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.spinner .spinner-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.container2 {
+  -webkit-transform: rotateZ(45deg);
+  transform: rotateZ(45deg);
+}
+
+.container3 {
+  -webkit-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+}
+
+.circle1 {
+  top: 0;
+  left: 0;
+}
+.circle2 {
+  top: 0;
+  right: 0;
+}
+.circle3 {
+  right: 0;
+  bottom: 0;
+}
+.circle4 {
+  left: 0;
+  bottom: 0;
+}
+
+.container2 .circle1 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.container3 .circle1 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+.container1 .circle2 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.container2 .circle2 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+.container3 .circle2 {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+
+.container1 .circle3 {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+
+.container2 .circle3 {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+
+.container3 .circle3 {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+
+.container1 .circle4 {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+
+.container2 .circle4 {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+
+.container3 .circle4 {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+@-webkit-keyframes bouncedelay {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes bouncedelay {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+</style>
+
+
+
+
+
+
+
+

src/components/common/NoData.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+      <div class="nodata" :style="{backgroundColor:backgroundColor}">
+        <div class="title" v-show="nodataTitle"><i class="iconfont icon-xiayibu" style="font-size:15px;margin-right:6px;"></i>{{nodataTitle}}</div>
+        <div class="nodata-img" :class="{'show-title-img': !nodataTitle}">
+             <!-- <img src="../../assets/images/noData.png"> -->
+        </div>     
+      </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'NoData',
+    props: {
+      nodataTitle: '',
+      backgroundColor: {
+        type: String,
+        default: () => {
+          return ''
+        }
+      }
+    },
+}
+</script>
+<style scoped>
+ .nodata{
+    height: 100%;
+    width: 100% !important;
+    /* background-color: #081c43 !important; */
+  }
+  .title {
+    text-align: left;
+    color: #ec9c45;
+    font-size: 18px;
+    font-weight: bold;
+    padding: 12px 0 0 14px;
+  }
+  .nodata-img {
+    position: relative;
+    height: calc(100% - 30px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .show-title-img {
+    height: 100%;
+  }
+</style>
+
+
+

src/components/common/index.js

@@ -0,0 +1,45 @@
+// import SearchVtndata from './SearchVtndata.vue' // import ... from ...来导入组
+// import SearchDatePicker from './SearchDatePicker.vue'
+// import NumberScroll from './NumberScroll.vue'
+import LoadingAnimation from './LoadingAnimation.vue'
+import NoData from './NoData.vue'
+// import SlickCarousel from './SlickCarousel.vue'
+// import RollingTable from './RollingTable.vue'
+// import RollingDetailTable from './RollingDetailTable.vue'
+// import SelectType from './SelectType.vue'
+// import TreeList from './TreeList.vue'
+// import AsideList from './AsideList.vue'
+// import TabsList from './TabsList.vue'
+// import SearchTable from './SearchTable.vue'
+// 注册全局公共组件
+const Global = {
+  install: function (Vue) {
+    // 这里注册组件
+    // 日期tab页选择范围组件
+    // Vue.component('SearchVtndata', SearchVtndata)
+    // // 日期选择范围组件 
+    // Vue.component('SearchDatePicker', SearchDatePicker)
+    // // 数字大屏滚动组件
+    // Vue.component('NumberScroll', NumberScroll)
+    // 页面加载组件
+    Vue.component('LoadingAnimation', LoadingAnimation)
+    // 页面无数据组件
+    Vue.component('NoData', NoData)
+    // 走马灯组件
+    // Vue.component('SlickCarousel', SlickCarousel)
+    // // 表格滚动组件
+    // Vue.component('RollingTable', RollingTable)
+    // // 表格详情滚动组件
+    // Vue.component('RollingDetailTable', RollingDetailTable)
+    // // 下拉框组件
+    // Vue.component('SelectType', SelectType)
+    // // 树形组件
+    // Vue.component('TreeList', TreeList)
+    // // 表格搜索组件
+    // // Vue.component('SearchTable', SearchTable)
+    // Vue.component('AsideList', AsideList)
+    // // tab页组件
+    // Vue.component('TabsList', TabsList)
+  }
+};
+export default Global

src/libs/flexible.js

@@ -0,0 +1,139 @@
+(function () {
+  // flexible.css
+  var cssText =
+    '' +
+    '@charset "utf-8";html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}body,html{font-family:"Microsoft YaHei",sans-serif,Tahoma,Arial}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}input,input[type=button],input[type=reset],input[type=submit]{resize:none;border:none;-webkit-appearance:none;border-radius:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:after,q:before{content:\'\'}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}a,ins{text-decoration:none}a:active,a:hover,a:link,a:visited{background:0 0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;outline:0;text-decoration:none}';
+  // cssText end
+
+  var styleEl = document.createElement('style');
+  document.getElementsByTagName('head')[0].appendChild(styleEl);
+  if (styleEl.styleSheet) {
+    if (!styleEl.styleSheet.disabled) {
+      styleEl.styleSheet.cssText = cssText;
+    }
+  } else {
+    try {
+      styleEl.innerHTML = cssText;
+    } catch (e) {
+      styleEl.innerText = cssText;
+    }
+  }
+})();
+(function (win, lib) {
+  var doc = win.document;
+  var docEl = doc.documentElement;
+  var metaEl = doc.querySelector('meta[name="viewport"]');
+  var flexibleEl = doc.querySelector('meta[name="flexible"]');
+  var dpr = 0;
+  var scale = 0;
+  var tid;
+  var flexible = lib.flexible || (lib.flexible = {});
+
+  if (metaEl) {
+    console.warn('将根据已有的meta标签来设置缩放比例');
+    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
+    if (match) {
+      scale = parseFloat(match[1]);
+      dpr = parseInt(1 / scale);
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content');
+    if (content) {
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1]);
+        scale = parseFloat((1 / dpr).toFixed(2));
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    var isAndroid = win.navigator.appVersion.match(/android/gi);
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
+    var devicePixelRatio = win.devicePixelRatio;
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3;
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2;
+      } else {
+        dpr = 1;
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1;
+    }
+    scale = 1 / dpr;
+  }
+
+  docEl.setAttribute('data-dpr', dpr);
+  if (!metaEl) {
+    metaEl = doc.createElement('meta');
+    metaEl.setAttribute('name', 'viewport');
+    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl);
+    } else {
+      var wrap = doc.createElement('div');
+      wrap.appendChild(metaEl);
+      doc.write(wrap.innerHTML);
+    }
+  }
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width;
+
+    if (width / dpr > 540) {
+      width = width * dpr;
+    }
+    var rem = width / 10;
+    docEl.style.fontSize = rem + 'px';
+    flexible.rem = win.rem = rem;
+  }
+
+  win.addEventListener('resize', function () {
+    clearTimeout(tid);
+    tid = setTimeout(refreshRem, 300);
+  }, false);
+  win.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      clearTimeout(tid);
+      tid = setTimeout(refreshRem, 300);
+    }
+  }, false);
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px';
+  } else {
+    doc.addEventListener('DOMContentLoaded', function (e) {
+      doc.body.style.fontSize = 12 * dpr + 'px';
+    }, false);
+  }
+
+
+  refreshRem();
+
+  flexible.dpr = win.dpr = dpr;
+  flexible.refreshRem = refreshRem;
+  flexible.rem2px = function (d) {
+    var val = parseFloat(d) * this.rem;
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px';
+    }
+    return val;
+  }
+  flexible.px2rem = function (d) {
+    var val = parseFloat(d) / this.rem;
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem';
+    }
+    return val;
+  }
+
+})(window, window['lib'] || (window['lib'] = {}));

src/libs/http.js

@@ -23,7 +23,6 @@ return response;
 return Promise.reject(error)
 });
 
-
 /**
  * 封装get方法
  * @param url

src/login/Login.vue

@@ -2,6 +2,7 @@
 <template>
   <div class="container" @click="login">
     登录
+    <i class="iconfont icon-shezhi"></i>
   </div>
 </template>
 <script>

src/main.js

@@ -1,21 +1,26 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
 import ViewUI from 'view-design';
 import 'view-design/dist/styles/iview.css';
-import './assets/styles/reset.css'
-// import './assets/styles/common.css'
-import {get,post,patch,put} from './libs/http'
+import './assets/styles/common.css';
+import './assets/iconfont/iconfont.css'
+import store from './store'
+// import 'lib-flexible'
+import './libs/flexible.js' //自适应方案核心： 阿里可伸缩布局方案 lib-flexible px转rem：px2rem，它有webpack的px2rem-loader 这两项加起来可以实现PC端分辨率适配
+import {get,post,patch,put} from './libs/http.js';
 //定义全局变量
 Vue.prototype.$post = post
 Vue.prototype.$get = get
 Vue.prototype.$patch = patch
 Vue.prototype.$put = put
+import Common from './components/common' //自定义通用全局组件
+// 注册自定义通用全局组件
+Vue.use(Common)
 Vue.config.productionTip = false
-Vue.use(ViewUI);
+Vue.use(ViewUI)
 new Vue({
   router,
   store,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app')

src/views/MainPage.vue

@@ -30,9 +30,9 @@ export default {
 };
 </script>
 <style scoped lang="stylus">
-.container-bottom {
-  display: 1;
-  display: flex;
-  width: 100%;
-}
+// .container-bottom {
+//   display: 1;
+//   display: flex;
+//   width: 100%;
+// }
 </style>

src/views/homecomponents/Head.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container all">
     头部
   </div>
 </template>
@@ -20,5 +20,10 @@ export default {
 };
 </script>
 <style scoped lang="stylus">
-
+.all {
+  width: 100px;
+  height: 200px;
+}
+// .container
+//   height: 100px
 </style>

vue.config.js

@@ -24,14 +24,19 @@ module.exports = {
     },
     publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //部署后请求路径
     outputDir:'dist', // 打包的目录
-    // css: { // 全局引用common.styl文件夹，在main.js中引用不起作用
-    //   loaderOptions: {
-    //     // 给 stylus-loader 传递选项
-    //     stylus: {
-    //       import: '~@/assets/styles/common.styl'
-    //     } 
-    //   } 
-    // },
+    chainWebpack: config => {
+      config.module
+        .rule('stylus')
+        .oneOf('vue')
+        .use('px2rem-loader')
+        .loader('px2rem-loader')
+        .before('postcss-loader') // this makes it work.
+        .options({
+          remUnit: 192,
+          remPrecision: 8
+        }) // remUnit: 192代表以1920px为整体，如果设计稿的尺寸是750px，这里的值为75
+        .end()
+    }
     // chainWebpack: (config) => {
     //   config.entry('main').add('babel-polyfill');
     // },