Browse Source

弹性盒变量

master
mk 2 years ago
parent
commit
5d9fd53926
  1. 2
      src/components/screen-loading/index.vue
  2. 5
      src/components/screen-map-header/index.vue
  3. 8
      src/components/screen-map-legeng/index.vue
  4. 3
      src/components/screen-nodata/index.vue
  5. 4
      src/components/screen-tab/index.vue
  6. 12
      src/components/screen-table/index.vue
  7. 2
      src/components/screen-title/index.vue
  8. 2
      src/main.js
  9. 14
      src/style/font.scss
  10. 26
      src/views/next/dialog-module/zdyf-center/qyjj/index.vue
  11. 7
      src/views/next/dialog-module/zdyf-left/ldgh/index.vue
  12. 3
      src/views/next/dialog-module/zdyf-left/yfcj/index.vue
  13. 3
      src/views/next/dialog-module/zdyf-right/kyll/garden.vue
  14. 6
      src/views/next/dialog-module/zdyf-right/kyll/talents.vue
  15. 6
      src/views/next/layout/screen-bottom.vue
  16. 3
      src/views/next/screen-content-left/home-left/index.vue
  17. 18
      src/views/next/screen-content-left/hsyf-left/index.vue
  18. 21
      src/views/next/screen-content-left/szyf-left/index.vue
  19. 3
      src/views/next/screen-content-left/zdyf-left/index.vue
  20. 3
      src/views/next/screen-content-map/cpt/szyf-map.vue
  21. 9
      src/views/next/screen-content-map/cpt/whyf.vue
  22. 3
      src/views/next/screen-content-map/cpt/zdyf-map.vue
  23. 15
      src/views/next/screen-content-right/home-right/index.vue
  24. 15
      src/views/next/screen-content-right/hsyf-right/index.vue
  25. 5
      src/views/next/screen-content-right/zdyf-right/index.vue
  26. 6
      vue.config.js

2
src/components/screen-loading/index.vue

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

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

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

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

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

3
src/components/screen-nodata/index.vue

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

4
src/components/screen-tab/index.vue

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

12
src/components/screen-table/index.vue

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

2
src/components/screen-title/index.vue

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

2
src/main.js

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

14
src/style/font.scss

@ -1,45 +1,45 @@
@font-face { @font-face {
font-family: 'PingFang Regular'; 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-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'PingFang Simple Thin'; 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-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'PingFang Simple Bold'; 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-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'FZZhengHeiS-B-GB'; 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-weight: bolder;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'zaozigongfang'; 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-weight: bolder;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'pangmenzhengdao'; font-family: 'pangmenzhengdao';
src: url('../assets/fonts/pangmenzhengdao.ttf') format('truetype'); src: url('~@/assets/fonts/pangmenzhengdao.ttf') format('truetype');
font-weight: bolder; font-weight: bolder;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'lihei'; 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-weight: bolder;
font-style: normal; font-style: normal;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6
vue.config.js

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

Loading…
Cancel
Save