弹性盒变量

src/components/screen-loading/index.vue

@@ -73,7 +73,7 @@ export default {
 .screen-loading {
   width: 100%;
   height: 100%;
-  display: flex;
+  @include flex();
   justify-content: center;
   align-items: center;
   .loading-tip {

src/components/screen-map-header/index.vue

@@ -34,13 +34,12 @@ export default {
 
 <style lang="scss" scoped>
 .flex {
-    display: flex;
+    @include flex();
     width: 100%;
     justify-content: space-around;
 
     .item {
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
 
         section {
             margin-top: 13px;

src/components/screen-map-legeng/index.vue

@@ -38,13 +38,12 @@ export default {
 
 <style lang="scss" scoped>
 .flex {
-    display: flex;
-    flex-direction: column;
+    @include flex(column);
     width: 100%;
     justify-content: space-around;
 
     .item {
-        display: flex;
+        @include flex();
         margin-top: 20px;
         img {
             width: 48px;
@@ -54,8 +53,7 @@ export default {
         }
 
         section {
-            display: flex;
-            flex-direction: column;
+            @include flex(column);
 
             .name {
                 color: #ACBBD4;

src/components/screen-nodata/index.vue

@@ -17,8 +17,7 @@ export default {
 .screen-nodata {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
   align-items: center;
   justify-content: center;
   .icon-container {

src/components/screen-tab/index.vue

@@ -39,7 +39,7 @@ export default {
 
 <style lang="scss" scoped>
 .tab-list {
-  display: flex;
+  @include flex();
   align-items: center;
   padding-right: 10px;
   .tab-item {
@@ -47,7 +47,7 @@ export default {
     height: 18px;
     border: 1px solid #0165b9;
     border-radius: 2px;
-    display: flex;
+    @include flex();
     align-items: center;
     justify-content: center;
     transform: skewX(30deg);

src/components/screen-table/index.vue

@@ -242,7 +242,7 @@ li {
     .table-header {
       height: 35px;
       width: 100%;
-      display: flex;
+      @include flex();
       align-items: center;
       justify-content: space-around;
       color: #2a70e1;
@@ -250,7 +250,7 @@ li {
       .table-td {
         width: 100%;
         height: 100%;
-        display: flex;
+        @include flex();
         align-items: center;
         justify-content: center;
         .asc {
@@ -290,12 +290,12 @@ li {
           width: 100%;
           box-sizing: border-box;
           height: calc(100% / var(--pageSize));
-          display: flex;
+          @include flex();
           align-items: center;
           .table-td {
             width: 100%;
             height: 100%;
-            display: flex;
+            @include flex();
             align-items: center;
             justify-items: center;
             overflow-x: hidden;
@@ -326,7 +326,7 @@ li {
         .page-up,
         .page-down {
           user-select: none;
-          display: flex;
+          @include flex();
           align-items: center;
           justify-content: center;
           color: #fff;
@@ -350,7 +350,7 @@ li {
     .no-data {
       width: 100%;
       height: calc(100% - 35px);
-      display: flex;
+      @include flex();
       align-items: center;
       justify-content: center;
       color: rgba(255, 255, 255, 0.8);

src/components/screen-title/index.vue

@@ -20,7 +20,7 @@ export default {
   width: 100%;
   height: 36px;
   background-position: 0 0;
-  display: flex;
+  @include flex();
   align-items: center;
   justify-content: space-between;
   font-family: "zaozigongfang";

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import 'style/index.scss'
+// import 'style/index.scss'
 import 'components/index'
 import 'swiper/swiper-bundle.css'
 import elementUI from 'element-ui'

src/style/font.scss

@@ -1,45 +1,45 @@
 @font-face {
   font-family: 'PingFang Regular';
-  src: url('../assets/fonts/PingFang-regular.ttf') format('truetype');
+  src: url('~@/assets/fonts/PingFang-regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'PingFang Simple Thin';
-  src: url('../assets/fonts/pingfang-simple-thin.ttf') format('truetype');
+  src: url('~@/assets/fonts/pingfang-simple-thin.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'PingFang Simple Bold';
-  src: url('../assets/fonts/pingfang-simple-bold.ttf') format('truetype');
+  src: url('~@/assets/fonts/pingfang-simple-bold.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'FZZhengHeiS-B-GB';
-  src: url('../assets/fonts/fzzhengheis-el-gb.ttf') format('truetype');
+  src: url('~@/assets/fonts/fzzhengheis-el-gb.ttf') format('truetype');
   font-weight: bolder;
   font-style: normal;
 }
 @font-face {
   font-family: 'zaozigongfang';
-  src: url('../assets/fonts/zaozigongfang-regular.otf') format('truetype');
+  src: url('~@/assets/fonts/zaozigongfang-regular.otf') format('truetype');
   font-weight: bolder;
   font-style: normal;
 }
 @font-face {
   font-family: 'pangmenzhengdao';
-  src: url('../assets/fonts/pangmenzhengdao.ttf') format('truetype');
+  src: url('~@/assets/fonts/pangmenzhengdao.ttf') format('truetype');
   font-weight: bolder;
   font-style: normal;
 }
 @font-face {
   font-family: 'lihei';
-  src: url('../assets/fonts/zhaozigongfang-lihei.otf') format('truetype');
+  src: url('~@/assets/fonts/zhaozigongfang-lihei.otf') format('truetype');
   font-weight: bolder;
   font-style: normal;
 }

src/views/next/dialog-module/zdyf-center/qyjj/index.vue

@@ -177,14 +177,13 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    display: flex;
+    @include flex();
     align-items: center;
     justify-content: center;
     z-index: 150;
 
     >section {
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
         background: url('~@/assets/images/common/dialog-bg.png') no-repeat !important;
         background-size: 100% 100% !important;
         width: 1354px;
@@ -208,7 +207,7 @@ export default {
                 align-items: center;
                 background: url('~@/assets/images/common/dialog-header.png') no-repeat;
                 background-size: 100% 100%;
-                display: flex;
+                @include flex();
                 justify-content: center; 
                 height: 60px;
                 font-size: 26px;
@@ -218,7 +217,7 @@ export default {
                     letter-spacing: 2px;
                     line-height: 50px;   
                     background-size: 100% 100%;
-                    display: flex;
+                    @include flex();
                     justify-content: center;
                     height: 60px;
                     font-size: 26px;
@@ -252,7 +251,7 @@ export default {
                 color: #fff;
                 width: 100%;
                 height: 100%;
-                display: flex;
+                @include flex();
 
                 .left {
                     width: 752px;
@@ -271,7 +270,7 @@ export default {
                     }
 
                     .information {
-                        display: flex;
+                        @include flex();
 
                         .logo {
                             width: 152px;
@@ -293,17 +292,12 @@ export default {
                     flex: 1;
                     margin-left: 16px;
                     padding-right: 2px;
-
-                    display: flex;
-                    flex-direction: column;
+                    @include flex(column);
 
                     .imgBox {
-                        display: flex;
+                        @include flex(column);
                         width: 100%;
-                        height: 167px;
-                        flex-direction: column;
-
-                        background: rgba(109, 166, 255, .2);
+                        height: 167px;background: rgba(109, 166, 255, .2);
 
                         &:nth-child(1),
                         &:nth-child(2),
@@ -313,7 +307,7 @@ export default {
 
                         .header {
                             height: 30px;
-                            display: flex;
+                            @include flex();
                             align-items: center;
                             background: linear-gradient(90deg, rgb(26, 109, 224) 0%, rgba(13, 113, 248, 0) 100%);
 

src/views/next/dialog-module/zdyf-left/ldgh/index.vue

@@ -134,8 +134,7 @@ export default {
     }
 
     >section {
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
         background: url('~@/assets/images/common/dialog-bg-big.png') no-repeat !important;
         background-size: 100% 100%;
         width: 1866px;
@@ -203,9 +202,7 @@ export default {
             .content {
                 color: #fff;
                 width: 100%;
-                display: flex;
-                flex-direction: column;
-
+                @include flex(column);
                 img {
                     width: 1706px;
                     height: 372px;

src/views/next/dialog-module/zdyf-left/yfcj/index.vue

@@ -144,8 +144,7 @@ export default {
     z-index: 150;
 
     >section {
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
         background: url('~@/assets/images/common/dialog-bg.png') no-repeat !important;
         background-size: 100% 100%;
         width: 1180px;

src/views/next/dialog-module/zdyf-right/kyll/garden.vue

@@ -112,8 +112,7 @@ export default {
     z-index: 150;
 
     section {
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
         background: url('~@/assets/images/common/dialog-bg.png') no-repeat !important;
         background-size: 100% 100%;
         width: 1180px;

src/views/next/dialog-module/zdyf-right/kyll/talents.vue

@@ -150,8 +150,7 @@ export default {
     z-index: 150;
 
     section {
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
         background: url('~@/assets/images/common/dialog-bg.png') no-repeat !important;
         background-size: 100% 100% !important;
         width: 1354px;
@@ -266,8 +265,7 @@ export default {
 
                             >.content {
                                 flex: 1;
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 padding-left: 17px;
                                 box-sizing: border-box;
 

src/views/next/layout/screen-bottom.vue

@@ -72,8 +72,7 @@ export default {
 <style lang="scss" scoped>
 .screen-bottm {
     width: 755px;
-    display: flex;
-    flex-direction: column;
+    @include flex(column);
     height: 112px;
     position: absolute;
     bottom: 0;
@@ -94,8 +93,7 @@ export default {
         flex: 1;
 
         .item {
-            display: flex;
-            flex-direction: column;
+            @include flex(column);
             cursor: pointer;
             margin-left: 10px;
             color: #ACBBD4;

src/views/next/screen-content-left/home-left/index.vue

@@ -143,8 +143,7 @@ export default {
 
                         .right {
                                 flex: 1;
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 justify-content: space-between;
 
                                 .num {

src/views/next/screen-content-left/hsyf-left/index.vue

@@ -731,12 +731,10 @@ export default {
 <style lang="scss" scoped>
 .card {
         width: 100%;
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
 
         &-item-zzjs {
-                display: flex;
-                flex-direction: column;
+                @include flex(column);
                 padding: 25px 25px 30px 20px;
                 box-sizing: border-box;
                 height: 100%;
@@ -762,8 +760,7 @@ export default {
                         }
 
                         >.item {
-                                display: flex;
-                                flex-direction: column;
+                               @include flex(column);
 
                                 .num {
                                         font-family: pangmenzhengdao;
@@ -794,8 +791,7 @@ export default {
                         justify-content: space-around;
                         color: rgb(83, 180, 255,0.2);
                         .item {
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 align-items: center;
                                 justify-content: space-around;
                                 img {
@@ -848,8 +844,7 @@ export default {
 
                 .pei {
                         width: 47%;
-                        display: flex;
-                        flex-direction: column;
+                        @include flex(column);
                         margin-right: 50px;
 
                         .buttomCharts {
@@ -875,8 +870,7 @@ export default {
                 box-sizing: border-box;
 
                 .item {
-                        display: flex;
-                        flex-direction: column;
+                        @include flex(column);
                         border: 1px solid #77A5D8;
                         padding: 5px;
                         box-sizing: border-box;

src/views/next/screen-content-left/szyf-left/index.vue

@@ -705,8 +705,7 @@ export default {
 <style lang="scss" scoped>
 .card {
         width: 100%;
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
 
         &-item-sjcl1 {
                 padding: 12px 26px 26px;
@@ -717,8 +716,7 @@ export default {
 
                         .total {
                                 flex: 1;
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 align-items: left;
                                 font-size: 18px;
                                 color: #BDCEEA;
@@ -756,8 +754,7 @@ export default {
                                 }
 
                                 div {
-                                        display: flex;
-                                        flex-direction: column;
+                                        @include flex(column);
 
                                         :nth-child(1) {
                                                 font-family: pangmenzhengdao;
@@ -819,8 +816,7 @@ export default {
                                 }
 
                                 >.item {
-                                        display: flex;
-                                        flex-direction: column;
+                                        @include flex(column);
                                         margin-bottom: 8px;
                                         .num {
                                                 font-family: pangmenzhengdao;
@@ -854,8 +850,7 @@ export default {
                                 background-size: 100% 100%;
                                 flex: 1;
                                 height: 160px;
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 justify-content: space-between;
                                 padding: 10px 18px;
                                 box-sizing: border-box;
@@ -869,8 +864,7 @@ export default {
                                         width: 100%;
 
                                         >div {
-                                                display: flex;
-                                                flex-direction: column;
+                                                @include flex(column);
 
                                                 >:nth-child(1) {
                                                         font-size: 14px;
@@ -911,8 +905,7 @@ export default {
                         }
 
                         >:nth-child(2) {
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
 
                                 :nth-child(1) {
                                         font-family: pangmenzhengdao;

src/views/next/screen-content-left/zdyf-left/index.vue

@@ -105,8 +105,7 @@ export default {
                 width: 100%;
                 flex: 1;
                 box-sizing: border-box;
-                display: flex;
-                flex-direction: column;
+                @include flex(column);
                 justify-content: space-around;
 
                 img {

src/views/next/screen-content-map/cpt/szyf-map.vue

@@ -128,8 +128,7 @@ export default {
 }
 
 .mapImage {
-    display: flex;
-    flex-direction: column;
+    @include flex(column);
     align-items: center;
     width: 879px;
     height: 647px;

src/views/next/screen-content-map/cpt/whyf.vue

@@ -99,8 +99,7 @@ export default {
     background-size: 100% 100%;
     width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: column;
+    @include flex(column);
     justify-content: center;
     align-items: center;
     position: relative;
@@ -229,8 +228,7 @@ export default {
                 }
 
                 .imgs {
-                    display: flex;
-                    flex-direction: column;
+                    @include flex(column);
                     width: 280px;
                     height: 480px;
 
@@ -286,8 +284,7 @@ export default {
                 width: 190px;
                 height: 146px;
                 cursor: pointer;
-                display: flex;
-                flex-direction: column;
+                @include flex(column);
                 color: #BDCEEA;
                 align-items: center;
                 background: rgba(9, 41, 106, 0.66);

src/views/next/screen-content-map/cpt/zdyf-map.vue

@@ -464,8 +464,7 @@ export default {
         position: absolute;
         right: 732px;
         top: 445px;
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
         align-items: center;
 
         >:nth-child(1) {

src/views/next/screen-content-right/home-right/index.vue

@@ -107,12 +107,10 @@ export default {
 <style lang="scss" scoped>
 .card {
         width: 100%;
-        display: flex;
-        flex-direction: column;
+        @include flex(column);
 
         &-item-hmyf {
-                display: flex;
-                flex-direction: column;
+                @include flex(column);
                 padding: 20px 30px 20px 30px;
                 box-sizing: border-box;
 
@@ -135,8 +133,7 @@ export default {
 
                         >:nth-child(3) {
                                 height: 100%;
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 justify-content: space-evenly;
                                 color: #BDCEEA;
 
@@ -181,8 +178,7 @@ export default {
                                 height: 100px;
                                 background: url('~@/assets/images/common/weather-card.png') no-repeat;
                                 background-size: 100% 100%;
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 align-items: center;
 
                                 img {
@@ -213,8 +209,7 @@ export default {
                         width: 140px;
                         height: 108px;
                         border: 1px solid #9FCCFF;
-                        display: flex;
-                        flex-direction: column;
+                        @include flex(column);
                         padding: 5px;
                         box-sizing: border-box;
                         margin: 0 4px 4px 0;

src/views/next/screen-content-right/hsyf-right/index.vue

@@ -122,15 +122,12 @@ export default {
 <style lang="scss" scoped>
 .card {
         width: 100%;
-        display: flex;
-        flex-direction: column;
-
+        @include flex(column);
+        @include flex(column);
         &-item-djhd {
                 padding: 16px;
                 box-sizing: border-box;
-                display: flex;
-                flex-direction: column;
-
+                @include flex(column);
                 >.item {
                         margin-bottom: 4px;
 
@@ -141,8 +138,7 @@ export default {
                         }
 
                         section {
-                                display: flex;
-                                flex-direction: column;
+                                @include flex(column);
                                 justify-content: space-between;
                                 height: 100%;
 
@@ -173,8 +169,7 @@ export default {
         }
 
         &-item-dwgk {
-                display: flex;
-                flex-direction: column;
+                @include flex(column);
                 padding: 16px;
 
                 >.item {

src/views/next/screen-content-right/zdyf-right/index.vue

@@ -250,8 +250,7 @@ export default {
 
         &-item-yfwl {
                 height: 223px;
-                display: flex;
-                flex-direction: column;
+                @include flex(column);
                 padding: 16px;
                 box-sizing: border-box;
                 overflow: hidden;
@@ -261,7 +260,7 @@ export default {
                         overflow: hidden;
 
                         .scroll-item {
-                                display: flex;
+                                @include flex();
                                 margin-top: 2px;
                                 background: rgba(71, 132, 237, 0.28);
                                 padding: 8px 11px;

vue.config.js

@@ -90,7 +90,11 @@ module.exports = {
     // 是否开启 css source map
     sourceMap: false,
     // 为预处理器的 loader 传递自定义选项
-    loaderOptions: {}
+    loaderOptions: {
+      scss: {
+        prependData: '@import "@/style/index.scss";'
+      }
+    }
   },
 
   // 开发环境  dev-server