diff --git a/package.json b/package.json index a612dfc..f42ceb2 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "echarts": "^4.2.1", "element-ui": "2.13.2", "file-saver": "^2.0.5", + "gsap": "^3.12.5", "js-cookie": "2.2.0", "less-loader": "^5.0.0", "moment": "^2.29.2", diff --git a/src/icons/svg/dessert.svg b/src/icons/svg/dessert.svg new file mode 100644 index 0000000..27ef84b --- /dev/null +++ b/src/icons/svg/dessert.svg @@ -0,0 +1 @@ + diff --git a/src/icons/svg/house.svg b/src/icons/svg/house.svg new file mode 100644 index 0000000..f1fdaaf --- /dev/null +++ b/src/icons/svg/house.svg @@ -0,0 +1 @@ + diff --git a/src/icons/svg/huli.svg b/src/icons/svg/huli.svg new file mode 100644 index 0000000..1603740 --- /dev/null +++ b/src/icons/svg/huli.svg @@ -0,0 +1 @@ + diff --git a/src/icons/svg/search1.svg b/src/icons/svg/search1.svg new file mode 100644 index 0000000..cc5405b --- /dev/null +++ b/src/icons/svg/search1.svg @@ -0,0 +1 @@ + diff --git a/src/icons/svg/star1.svg b/src/icons/svg/star1.svg new file mode 100644 index 0000000..441d9db --- /dev/null +++ b/src/icons/svg/star1.svg @@ -0,0 +1 @@ + diff --git a/src/styles/bigscreen.scss b/src/styles/bigscreen.scss index b077653..428da9c 100644 --- a/src/styles/bigscreen.scss +++ b/src/styles/bigscreen.scss @@ -1,5 +1,5 @@ $word-color: #59d4fc; -$card-color: rgba(6, 34, 108, 0.55); +$card-color: rgba(6, 34, 108, 0.37); .color-word { color: $word-color; diff --git a/src/views/bigSreen/component/Bottom.vue b/src/views/bigSreen/component/Bottom.vue index bd5edaf..e77f37b 100644 --- a/src/views/bigSreen/component/Bottom.vue +++ b/src/views/bigSreen/component/Bottom.vue @@ -2,7 +2,7 @@
-

医院

+

医疗陪护

1 @@ -18,7 +18,7 @@
-

物业

+

项目

1 @@ -34,7 +34,7 @@
-

分公司

+

分公司/站点

1 @@ -50,7 +50,7 @@
-

站点

+

活动集锦

1 diff --git a/src/views/bigSreen/component/Center.vue b/src/views/bigSreen/component/Center.vue index b21e0fd..0193ad2 100644 --- a/src/views/bigSreen/component/Center.vue +++ b/src/views/bigSreen/component/Center.vue @@ -6,7 +6,7 @@
-

护工人数

+

照护

10000 人次/年 @@ -18,10 +18,10 @@

-

服务驿站

+

服务覆盖人数

658 - 家 + 人

@@ -39,25 +39,74 @@
-
-
@@ -255,7 +315,11 @@ export default { } #property-line-chart { - height: 140px; - width: 388px; + height: 335px; + width: 100%; +} +#property-pie-chart { + width: 100%; + height: 100%; } diff --git a/src/views/bigSreen/component/CenterRight.vue b/src/views/bigSreen/component/CenterRight.vue index d52aacd..d463afa 100644 --- a/src/views/bigSreen/component/CenterRight.vue +++ b/src/views/bigSreen/component/CenterRight.vue @@ -1,775 +1,828 @@ @@ -779,6 +832,7 @@ export default { display: flex; flex-direction: column; justify-content: space-between; + height: 100%; .business-serve { height: 382px; @@ -795,5 +849,88 @@ export default { height: 170px; } } + + .today-num__body { + display: flex; + justify-content: space-between; + margin-top: 22px; + + $border-color: #4da9f8; + .numcard-item { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 92px; + height: 140px; + box-shadow: inset -2px -2px 12px 4px #1a3676; + padding: 16px 0 13px 0; + position: relative; + &::before { + content: ""; + width: 100%; + height: 100%; + background: + linear-gradient(to top, $border-color, $border-color) left top no-repeat, //上左 + linear-gradient(to right, $border-color, $border-color) left top no-repeat, //左上 + linear-gradient(to left, $border-color, $border-color) right top no-repeat, //上右 + linear-gradient(to bottom, $border-color, $border-color) right top no-repeat, //上右 + linear-gradient(to left, $border-color, $border-color) left bottom no-repeat, //下左 + linear-gradient(to bottom, $border-color, $border-color) left bottom no-repeat, //左下 + linear-gradient(to top, $border-color, $border-color) right bottom no-repeat, //下右 + linear-gradient(to left, $border-color, $border-color) right bottom no-repeat, //右下 + ; + background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px; + position: absolute; + top: 0; + left: 0; + } + + .icon-class { + width: 29px; + height: 29px; + position: relative; + + &::before { + content: ""; + width: 58px; + height: 58px; + border-radius: 100%; + opacity: 0.2; + transform: scaleY(0.42); + background: #01acff; + position: absolute; + bottom: -29px; + left: calc(50% - 29px); + } + } + ::v-deep .icon-cpn { + width: 29px; + height: 29px; + } + .title { + width: 56px; + text-align: center; + font-size: 14px; + line-height: 16px; + color: #fff; + flex: 1; + margin-top: 24px; + } + } + + .numcard-item + .numcard-item { + margin-left: 14px; + } + } +} + +::v-deep .dv-scroll-board > .header { + border-bottom: 1px solid #0236d2; + color: #3a67f7; + font-size: 16px; +} +::v-deep .dv-scroll-board .row-item .index { + color: #3a67f7; } diff --git a/src/views/bigSreen/component/top.vue b/src/views/bigSreen/component/top.vue index 8219af2..e9348fb 100644 --- a/src/views/bigSreen/component/top.vue +++ b/src/views/bigSreen/component/top.vue @@ -27,7 +27,7 @@ export default { .title-img { height: 72px; width: 477px; - margin: 0 auto; + margin: 6px auto 0; display: block; } .line { diff --git a/src/views/bigSreen/index.vue b/src/views/bigSreen/index.vue index 3963bf7..f067f0f 100644 --- a/src/views/bigSreen/index.vue +++ b/src/views/bigSreen/index.vue @@ -65,8 +65,8 @@ export default { flex: 0; height: 648px; display: grid; - grid-template-areas: "left center center right"; - grid-template-columns: repeat(4, 1fr); + grid-template-areas: "left left left left left center center center center center center center center center center center center right right right right right right right"; + grid-template-columns: repeat(24, 1fr); grid-column-gap: 30px; padding: 0 30px; margin-top: 25px;