You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
658 lines
17 KiB
658 lines
17 KiB
1 year ago
|
<template>
|
||
|
|
<div class="center-top">
|
||
|
|
<div class="left d-flex flex-column">
|
||
|
|
<div class="top">
|
||
|
|
<div class="bs-card">
|
||
|
|
<div class="card-text">
|
||
|
|
<p class="color-word">照护</p>
|
||
|
|
<p>
|
||
|
|
<span class="color-white fw-b" style="font-size: 42px">{{
|
||
|
|
total.zhaohu
|
||
|
|
}}</span>
|
||
|
|
<span class="color-word" style="padding-left: 5px">万人次/年</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bs-card">
|
||
|
|
<div class="card-text">
|
||
|
|
<p class="color-word">服务覆盖人数</p>
|
||
|
|
<p>
|
||
|
|
<span class="color-white fw-b" style="font-size: 42px">{{
|
||
|
|
total.fuwufugairenshu
|
||
|
|
}}</span>
|
||
|
|
<span class="color-word" style="padding-left: 5px">万人</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="bs-card">
|
||
|
|
<div class="card-text">
|
||
|
|
<p class="color-word">总服务时长</p>
|
||
|
|
<p>
|
||
|
|
<span class="color-white fw-b" style="font-size: 42px">{{
|
||
|
|
total.zongfuwushichang
|
||
|
|
}}</span>
|
||
|
|
<span class="color-word" style="padding-left: 5px">万小时</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="bottom flex-1"
|
||
|
|
@mouseenter="isMouseHover = true"
|
||
|
|
@mouseleave="isMouseHover = false"
|
||
|
|
>
|
||
|
|
<transition name="fade">
|
||
|
|
<video
|
||
|
|
:src="videos[videoIndex] ? videos[videoIndex].file : ''"
|
||
|
|
ref="video"
|
||
|
|
loop
|
||
|
|
v-show="type === 'video'"
|
||
|
|
:style="isPaused ? 'filter: brightness(75%);' : ''"
|
||
|
|
@click="playVideo"
|
||
|
|
></video>
|
||
|
|
</transition>
|
||
|
|
<transition name="fade">
|
||
|
|
<div class="carousel-img" v-show="type === 'img'">
|
||
|
|
<div class="data-panel">
|
||
|
|
<div class="data-panel__title">
|
||
|
|
<i class="el-icon-arrow-left" @click="areaClick('prev')"></i>
|
||
|
|
<div>{{ activeArea.name }}-{{ (activeArea && activeArea.data) ? activeArea.data.length : 0 }}个</div>
|
||
|
|
<i class="el-icon-arrow-right" @click="areaClick('next')"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<dv-scroll-board
|
||
|
|
ref="scrollBoard"
|
||
|
|
:key="scrollBoardKey"
|
||
|
|
:config="areaConfig"
|
||
|
|
style="width: 100%; height: 400px; margin-top: 16px"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<dv-flyline-chart
|
||
|
|
dev
|
||
|
|
:config="flyingConfig"
|
||
|
|
style="width: 100%; height: 100%"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
|
||
|
|
<transition name="fade">
|
||
|
|
<div
|
||
|
|
class="video-btn"
|
||
|
|
v-show="(isPaused || isMouseHover) && type === 'video'"
|
||
|
|
@click="playVideo"
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 100 100">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="yellow" x1="50%" x2="50%" y1="0%" y2="100%">
|
||
|
|
<stop offset="0%" stop-color="#eacab1"></stop>
|
||
|
|
<stop offset="40%" stop-color="#bf9271"></stop>
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient
|
||
|
|
id="yellow1"
|
||
|
|
x1="50%"
|
||
|
|
x2="50%"
|
||
|
|
y1="0%"
|
||
|
|
y2="100%"
|
||
|
|
>
|
||
|
|
<stop offset="0%" stop-color="#e0c0a8"></stop>
|
||
|
|
<stop offset="40%" stop-color="#caa182"></stop>
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
<path
|
||
|
|
d="M 50 50 m 0 47a 47 47 0 1 1 0 -94a 47 47 0 1 1 0 94"
|
||
|
|
stroke="url(#yellow)"
|
||
|
|
stroke-width="4"
|
||
|
|
style="
|
||
|
|
stroke-dasharray: 260.1482px, 295.31px;
|
||
|
|
stroke-dashoffset: -4.9137px;
|
||
|
|
"
|
||
|
|
fill="none"
|
||
|
|
></path>
|
||
|
|
<path
|
||
|
|
:d="
|
||
|
|
isPaused
|
||
|
|
? 'M 38.6 30 l 0 40 l 34.6 -20 Z'
|
||
|
|
: 'M 38.6 30 l 0 40 M 61.4 30 l 0 40'
|
||
|
|
"
|
||
|
|
ref="icon"
|
||
|
|
fill="none"
|
||
|
|
class="icon"
|
||
|
|
stroke="url(#yellow1)"
|
||
|
|
stroke-width="4"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="video-change"
|
||
|
|
v-show="type === 'video' && (isPaused || isMouseHover)"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="el-carousel__arrow el-carousel__arrow--left"
|
||
|
|
@click="
|
||
|
|
(isPaused = true), (videoIndex = (videoIndex + 1) % videos.length)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<i class="el-icon-arrow-left custom-cursor-on-hover"></i>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="el-carousel__arrow el-carousel__arrow--right"
|
||
|
|
@click="
|
||
|
|
(isPaused = true),
|
||
|
|
(videoIndex = (videoIndex - 1 + videos.length) % videos.length)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<i class="el-icon-arrow-right custom-cursor-on-hover"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="type-change">
|
||
|
|
<div class="type-change-item" @click="type = 'img'">
|
||
|
|
<i class="el-icon-picture type-change-item__icon"></i>
|
||
|
|
<div class="type-change-item__num">{{ imgs.length }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="type-change-item" @click="type = 'video'">
|
||
|
|
<i class="el-icon-video-camera-solid type-change-item__icon"></i>
|
||
|
|
<div class="type-change-item__num">{{ videos.length }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="right" style="height: 100%">
|
||
|
|
<div class="bs-card">
|
||
|
|
<div class="bs-card__title">
|
||
|
|
<p class="bs-card__title--text">今日数量</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bs-card__body" style="margin-top: 18px">
|
||
|
|
<div class="today">
|
||
|
|
<div
|
||
|
|
class="today-item"
|
||
|
|
v-for="(item, index) in toDayNums"
|
||
|
|
:style="{ 'grid-area': `d${index}` }"
|
||
|
|
@click="activeToday = item"
|
||
|
|
>
|
||
|
|
<div class="today-item__value">{{ item.val }}</div>
|
||
|
|
<div class="today-item__name">{{ item.name }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<dv-scroll-board
|
||
|
|
ref="scrollBoard"
|
||
|
|
:key="scrollBoardKey"
|
||
|
|
:config="listConfig"
|
||
|
|
style="width: 516px; height: 389px; margin-top: 34px"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getList } from "@/api/bigScreen";
|
||
|
|
import gsap from "gsap";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
total: {
|
||
|
|
zhaohu: 0,
|
||
|
|
fuwufugairenshu: 0,
|
||
|
|
zongfuwushichang: 0,
|
||
|
|
},
|
||
|
|
|
||
|
|
toDayNums: [
|
||
|
|
{
|
||
|
|
key: "changhuxian",
|
||
|
|
name: "长护险",
|
||
|
|
val: 129,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "jujiayuanzhu",
|
||
|
|
name: "居家援助",
|
||
|
|
val: 128,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: "canlianjujiatuoyang",
|
||
|
|
name: "残联居家托养",
|
||
|
|
val: 168,
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
key: "huifangjicha",
|
||
|
|
name: "回访稽查",
|
||
|
|
val: 163,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
scrollBoardKey: 0,
|
||
|
|
timer: null,
|
||
|
|
|
||
|
|
isPaused: true,
|
||
|
|
isMouseHover: false,
|
||
|
|
|
||
|
|
type: "img", //video img
|
||
|
|
|
||
|
|
videoIndex: 0,
|
||
|
|
videos: [],
|
||
|
|
imgs: [],
|
||
|
|
areas: [],
|
||
|
|
activeIndex: 0,
|
||
|
|
activeArea: {},
|
||
|
|
|
||
|
|
activeToday: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getTotal() {
|
||
|
|
const res = (
|
||
|
|
await getList(
|
||
|
|
{
|
||
|
|
type: "total",
|
||
|
|
},
|
||
|
|
false
|
||
|
|
)
|
||
|
|
).data;
|
||
|
|
this.total.zhaohu = res.find((i) => i.key === "zhaohu")?.value;
|
||
|
|
this.total.fuwufugairenshu = res.find(
|
||
|
|
(i) => i.key === "fuwufugairenshu"
|
||
|
|
)?.value;
|
||
|
|
this.total.zongfuwushichang = res.find(
|
||
|
|
(i) => i.key === "zongfuwushichang"
|
||
|
|
)?.value;
|
||
|
|
},
|
||
|
|
|
||
|
|
areaClick(type='next') {
|
||
|
|
if(type === 'next') {
|
||
|
|
this.activeIndex=++this.activeIndex%this.areas.length;
|
||
|
|
this.activeArea = this.areas[this.activeIndex];
|
||
|
|
} else {
|
||
|
|
this.activeIndex > 0 ? (--this.activeIndex) : (this.activeIndex = this.areas.length-1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getAreas() {
|
||
|
|
try {
|
||
|
|
this.areas = (
|
||
|
|
await getList(
|
||
|
|
{
|
||
|
|
type: "areas",
|
||
|
|
},
|
||
|
|
false
|
||
|
|
)
|
||
|
|
).data?.map(area => (JSON.parse(area.value)));
|
||
|
|
this.activeArea = this.areas[0];
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err)
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
async getList () {
|
||
|
|
try {
|
||
|
|
const res = (await getList({
|
||
|
|
type: 'media'
|
||
|
|
},false))?.data
|
||
|
|
|
||
|
|
this.videos = JSON.parse(res.find(i => i.key === 'video')?.value)
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
async getData() {
|
||
|
|
const res = (
|
||
|
|
await getList(
|
||
|
|
{
|
||
|
|
type: "today",
|
||
|
|
},
|
||
|
|
false
|
||
|
|
)
|
||
|
|
)?.data;
|
||
|
|
this.toDayNums.forEach((i) => {
|
||
|
|
i.val = isNaN(Number(res.find((j) => j.key === i.key)?.value))
|
||
|
|
? 0
|
||
|
|
: Number(res.find((j) => j.key === i.key)?.value);
|
||
|
|
});
|
||
|
|
try {
|
||
|
|
this.listConfig.data = JSON.parse(
|
||
|
|
res.find((i) => i.key === "list")?.value ?? "[]"
|
||
|
|
).map((i) => [
|
||
|
|
i.name,
|
||
|
|
i.people,
|
||
|
|
`<span style="color: #03b1fa;">${i.time}</span>`,
|
||
|
|
]);
|
||
|
|
this.scrollBoardKey++;
|
||
|
|
} catch (err) {
|
||
|
|
console.error(err);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
playVideo() {
|
||
|
|
if (this.type === "img") return;
|
||
|
|
|
||
|
|
gsap.set(this.$refs["icon"], {
|
||
|
|
strokeDasharray: "6.148px, 442.31px",
|
||
|
|
strokeDashoffset: "100.9137px",
|
||
|
|
});
|
||
|
|
gsap.to(this.$refs["icon"], {
|
||
|
|
strokeDasharray: "126.148px, 442.31px",
|
||
|
|
strokeDashoffset: "19.9137px",
|
||
|
|
});
|
||
|
|
|
||
|
|
if (this.$refs["video"].paused) {
|
||
|
|
this.isPaused = false;
|
||
|
|
this.$refs["video"].play();
|
||
|
|
} else {
|
||
|
|
this.isPaused = true;
|
||
|
|
this.$refs["video"].pause();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
keywordRegister(e) {
|
||
|
|
if (e.code === "Space") {
|
||
|
|
this.playVideo();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
flyingConfig() {
|
||
|
|
return {
|
||
|
|
points: this.areas?.map(area => ({
|
||
|
|
position: area.point,
|
||
|
|
text: area.name
|
||
|
|
}))?.filter(i => i.text !== this.activeArea?.name) || [],
|
||
|
|
centerPoint: this.activeArea?.point,
|
||
|
|
bgImgUrl: require("@/assets/bigScreen/china.png"),
|
||
|
|
pointsImg: {
|
||
|
|
url: require("@/assets/bigScreen/points.png"),
|
||
|
|
},
|
||
|
|
centerPointImg: {
|
||
|
|
url: require("@/assets/bigScreen/points-a.png")
|
||
|
|
},
|
||
|
|
orbitColor: "#0000",
|
||
|
|
lineWidth: 0,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
areaConfig() {
|
||
|
|
return {
|
||
|
|
oddRowBGC: "#0a1b5632",
|
||
|
|
evenRowBGC: "#0a1b5632",
|
||
|
|
rowNum: 8,
|
||
|
|
data: this.activeArea?.data?.map(i => [i]) || [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
listConfig() {
|
||
|
|
return {
|
||
|
|
headerBGC: "#0a1b5632",
|
||
|
|
oddRowBGC: "#0a1b5632",
|
||
|
|
evenRowBGC: "#0a1b5632",
|
||
|
|
indexHeader: "序号",
|
||
|
|
index: true,
|
||
|
|
rowNum: 8,
|
||
|
|
align: ["center", "left", "center", "center"],
|
||
|
|
columnWidth: [52],
|
||
|
|
header: ["服务名称", "人员", "时间"],
|
||
|
|
data: Array.from({ length: 10 }, () => [
|
||
|
|
"稽查回访",
|
||
|
|
"人员a",
|
||
|
|
'<span style="color: #03b1fa;">13:55</span>',
|
||
|
|
]),
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getTotal();
|
||
|
|
this.getData();
|
||
|
|
this.getList();
|
||
|
|
this.getAreas();
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
document.body.addEventListener("keypress", this.keywordRegister);
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
document.body.removeEventListener("keypress", this.keywordRegister);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.center-top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
flex: 1;
|
||
|
|
.top {
|
||
|
|
height: 123px;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.bs-card {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px 14px;
|
||
|
|
|
||
|
|
.card-text {
|
||
|
|
flex: 1;
|
||
|
|
padding-left: 10px;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bs-card + .bs-card {
|
||
|
|
margin-left: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
margin-top: 30px;
|
||
|
|
flex: 1;
|
||
|
|
border-radius: 15px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 6px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: conic-gradient(
|
||
|
|
#5470ec,
|
||
|
|
#506bec,
|
||
|
|
#77cbf1,
|
||
|
|
#3d58ca,
|
||
|
|
#3b56ca,
|
||
|
|
#6fbbf0,
|
||
|
|
#6aa3f2
|
||
|
|
);
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
video,
|
||
|
|
.carousel-img {
|
||
|
|
background: rgb(6, 23, 70);
|
||
|
|
object-fit: cover;
|
||
|
|
position: absolute;
|
||
|
|
transition: all 0.2s;
|
||
|
|
left: 6px;
|
||
|
|
bottom: 6px;
|
||
|
|
height: calc(100% - 12px);
|
||
|
|
width: calc(100% - 12px);
|
||
|
|
|
||
|
|
.data-panel {
|
||
|
|
position: absolute;
|
||
|
|
width: 338px;
|
||
|
|
height: 98%;
|
||
|
|
left: 8px;
|
||
|
|
top: 1%;
|
||
|
|
border-radius: 10px;
|
||
|
|
background-color: #031e6099;
|
||
|
|
|
||
|
|
&__title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 31px;
|
||
|
|
color: #e67d33;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 0 28px;
|
||
|
|
margin-top: 20px;
|
||
|
|
|
||
|
|
& > i {
|
||
|
|
cursor: pointer;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 24px;
|
||
|
|
color: #4f7bf5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.carousel-img > ::v-deep .el-carousel__container {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
::v-deep .el-carousel__arrow {
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
font-size: 25px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.carousel-item-img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
//.video-btn {
|
||
|
|
// cursor: pointer;
|
||
|
|
// width: 230px;
|
||
|
|
// height: 230px;
|
||
|
|
// position: absolute;
|
||
|
|
// top: calc(50% - 115px);
|
||
|
|
// left: calc(50% - 115px);
|
||
|
|
//}
|
||
|
|
.video-btn {
|
||
|
|
border-radius: 100%;
|
||
|
|
background-color: #e7e6e630;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 195px;
|
||
|
|
height: 195px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
top: calc(50% - 97.5px);
|
||
|
|
left: calc(50% - 97.5px);
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
width: 143px;
|
||
|
|
height: 143px;
|
||
|
|
background: #fffd;
|
||
|
|
border-radius: 100%;
|
||
|
|
position: absolute;
|
||
|
|
top: calc(50% - 71.5px);
|
||
|
|
left: calc(50% - 71.5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 72px;
|
||
|
|
height: 72px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
stroke-dasharray: 126.148px, 442.31px;
|
||
|
|
stroke-dashoffset: 19.9137px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.type-change {
|
||
|
|
border-radius: 19px;
|
||
|
|
background: #ffffff19;
|
||
|
|
padding: 9px 15px;
|
||
|
|
display: flex;
|
||
|
|
z-index: 333;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 14px;
|
||
|
|
right: 30px;
|
||
|
|
|
||
|
|
&-item {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 24px;
|
||
|
|
line-height: 24px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
&__icon {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
&__num {
|
||
|
|
color: #fff;
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(1) {
|
||
|
|
margin-right: 30px;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
height: 100%;
|
||
|
|
width: 2px;
|
||
|
|
background: #ffffff;
|
||
|
|
opacity: 0.2;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: -16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
width: 552px;
|
||
|
|
margin-left: 30px;
|
||
|
|
|
||
|
|
$todayColors: #db4edd, #00cf92, #59d4fc, #fff, #fe7629;
|
||
|
|
.today {
|
||
|
|
display: grid;
|
||
|
|
grid-column-gap: 14px;
|
||
|
|
grid-row-gap: 10px;
|
||
|
|
grid-template-areas:
|
||
|
|
"d0 d0 d1 d1 d2 d2"
|
||
|
|
"d3 d3 d3 d3 d3 d3";
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
@for $index from 1 through length($todayColors) {
|
||
|
|
&-item:nth-child(#{$index}) {
|
||
|
|
.today-item__name {
|
||
|
|
color: nth($todayColors, $index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-item {
|
||
|
|
height: 80px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: rgba(85, 199, 149, 0);
|
||
|
|
box-shadow: inset 0 0 4px 2px #1a3676;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
&__value {
|
||
|
|
line-height: 1;
|
||
|
|
font-size: 42px;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
&__name {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|