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.
930 lines
25 KiB
930 lines
25 KiB
<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>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
<dv-scroll-board
|
|
ref="scrollBoard"
|
|
:key="scrollBoardKey"
|
|
:config="areaConfig"
|
|
style="width: 350px; height: 240px; position: absolute;z-index: 998;bottom: 22px;left: 22px;background-color: #031e6099;border: 2px solid #53c2f488;border-radius: 10px;"
|
|
/>
|
|
<div style="width: 100%; height: 100%" class="map-container"></div>
|
|
</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'">
|
|
<Icon type="md-globe" class="type-change-item__icon"/>
|
|
</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}` }"
|
|
:class="{ 'today-item-active': activeToday.name === item.name }"
|
|
@click.stop.prevent="todayClick($event,item,index)"
|
|
>
|
|
<div class="today-item__value">{{ item.val }}</div>
|
|
<div class="today-item__name">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<dv-scroll-board
|
|
@click="scrollBoardClick"
|
|
ref="scrollBoard"
|
|
:key="scrollBoardKey"
|
|
:config="listConfig"
|
|
style="width: 516px; height: 389px; margin-top: 34px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<dataPreview ref="dataPreview" v-model="isShowPreview" :data="selectData" :label="activeToday.name"></dataPreview>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { scheduleList } from "@/api/schedule"
|
|
import { getList as longInsuranceIndex } from "@/api/longInsurance"
|
|
import { getList as scheduleListChecksIndex } from "@/api/scheduleListChecks"
|
|
import { getList } from "@/api/bigScreen";
|
|
import gsap from "gsap";
|
|
import '../china'
|
|
import echarts from "echarts";
|
|
import dataPreview from "@/views/bigSreen/component/dataPreview.vue";
|
|
|
|
export default {
|
|
components: {
|
|
dataPreview
|
|
},
|
|
data() {
|
|
return {
|
|
total: {
|
|
zhaohu: 0,
|
|
fuwufugairenshu: 0,
|
|
zongfuwushichang: 0,
|
|
},
|
|
|
|
listData: new Map([
|
|
['changhuxian',[]],
|
|
['jujiayuanzhu',[]],
|
|
['canlianjujiatuoyang',[]],
|
|
['huifangjicha',[]]
|
|
]),
|
|
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: {},
|
|
activeColor: "#8537d8",
|
|
activeColors: ['#8537d8','#159138', '#4b72dc', '#c92d40'],
|
|
selectData: {},
|
|
isShowPreview: false,
|
|
|
|
companies: [],
|
|
mapOptions: {
|
|
backgroundColor: '#132675',
|
|
title: {},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function(val) {
|
|
return val.name
|
|
},
|
|
}, //左侧小导航图标
|
|
geo: {
|
|
map: "china",
|
|
aspectScale: 0.8,
|
|
layoutCenter: ["50%", "50%"],
|
|
layoutSize: "120%",
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: {
|
|
type: "linear-gradient",
|
|
x: 0,
|
|
y: 1200,
|
|
x2: 1000,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: "#152E6E", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#0673AD", // 50% 处的颜色
|
|
},
|
|
],
|
|
global: true, // 缺省为 false
|
|
},
|
|
shadowColor: "#ccc",
|
|
shadowOffsetX: -2,
|
|
shadowOffsetY: 4,
|
|
opacity: 0.5,
|
|
shadowBlur: 10,
|
|
},
|
|
emphasis: {
|
|
areaColor: "#0f5d9d",
|
|
},
|
|
},
|
|
regions: [{
|
|
name: "南海诸岛",
|
|
itemStyle: {
|
|
areaColor: "rgba(0, 10, 52, 1)",
|
|
borderColor: "rgba(0, 10, 52, 1)",
|
|
normal: {
|
|
opacity: 0,
|
|
label: {
|
|
show: false,
|
|
color: "#009cc9",
|
|
},
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
color: "#FFFFFF",
|
|
fontSize: 12,
|
|
},
|
|
}]
|
|
},
|
|
//配置属性
|
|
series: [{
|
|
name: '中国',
|
|
type: 'map',
|
|
mapType: 'china',
|
|
roam: false,
|
|
aspectScale: 0.8,
|
|
layoutCenter: ["50%", "50%"], //地图位置
|
|
layoutSize: "120%",
|
|
zoom: 1, //当前视角的缩放比例
|
|
label: {
|
|
normal: {
|
|
show: true, //省份名称
|
|
textStyle: {
|
|
fontSize: 15,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
|
|
emphasis: {
|
|
show: false
|
|
}
|
|
},
|
|
itemStyle: {
|
|
// 地图的样式
|
|
normal: {
|
|
borderWidth: 2.5,
|
|
borderColor: "#67b1e3", // 省份边框颜色
|
|
areaColor: new echarts.graphic.LinearGradient(
|
|
0.5,
|
|
0,
|
|
0.5,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#59a6da",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#142976",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
color: "#fff"
|
|
},
|
|
emphasis: {
|
|
// 鼠标hover显示
|
|
show: false,
|
|
//areaColor: "#0D30D4",
|
|
areaColor: {
|
|
type: "linear",
|
|
x: 1,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 0,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: "red", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgb(218,172,113)", // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
color: "#fff"
|
|
}
|
|
},
|
|
data: []
|
|
},{
|
|
name: 'company',
|
|
type:'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
symbolSize: 10,
|
|
data: [
|
|
{
|
|
name: 'a',
|
|
value: [120.501856,36.862275]
|
|
}
|
|
],
|
|
itemStyle: {
|
|
normal: {
|
|
background: '#e97b51',
|
|
color: '#e97b51',
|
|
shadowBlur: 10,
|
|
shadowColor: '#81606d'
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
initMap() {
|
|
this.mapChart = echarts.init(document.querySelector('.map-container'))
|
|
this.mapChart.setOption(this.mapOptions)
|
|
},
|
|
todayClick(e, item, index) {
|
|
this.activeToday = item
|
|
this.activeColor = this.activeColors[index]
|
|
},
|
|
async getMapData() {
|
|
try {
|
|
const res = (
|
|
await getList({
|
|
type: 'map'
|
|
},false)
|
|
).data;
|
|
this.mapOptions.series[1].data = JSON.parse(res.find(i => i.key === 'points')?.value);
|
|
this.companies = JSON.parse(res.find(i => i.key === 'companies')?.value);
|
|
this.initMap()
|
|
} catch (err) {
|
|
console.error(err)
|
|
this.initMap()
|
|
}
|
|
},
|
|
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);
|
|
this.activeArea = this.areas[this.activeIndex];
|
|
}
|
|
},
|
|
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);
|
|
});
|
|
this.scrollBoardKey++;
|
|
// 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);
|
|
// }
|
|
},
|
|
async getListData() {
|
|
try {
|
|
const res = await Promise.all([
|
|
longInsuranceIndex({
|
|
page: 1,
|
|
page_size: 20,
|
|
sort_name: 'created_at'
|
|
},false),
|
|
scheduleListChecksIndex({
|
|
page: 1,
|
|
page_size: 20,
|
|
sort_name: 'created_at'
|
|
},false),
|
|
scheduleList({
|
|
page: 1,
|
|
page_size: 20,
|
|
sort_name: 'created_at',
|
|
//product_type_id: 19
|
|
},false),
|
|
scheduleList({
|
|
page: 1,
|
|
page_size: 20,
|
|
sort_name: 'created_at',
|
|
// product_type_id: 20
|
|
},false)
|
|
])
|
|
this.listData.set("changhuxian",res[0]?.data||[])
|
|
this.listData.set("huifangjicha",res[1]?.data||[])
|
|
this.listData.set("canlianjujiatuoyang",res[2]?.list?.data||[])
|
|
this.listData.set("jujiayuanzhu",res[3]?.list?.data||[])
|
|
} 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();
|
|
}
|
|
},
|
|
scrollBoardClick({row, ceil, rowIndex , columnIndex}) {
|
|
if(columnIndex === 4) {
|
|
this.selectData = this.listData.get(this.activeToday.key) ? this.listData.get(this.activeToday.key)[rowIndex] : {};
|
|
setTimeout(() => {
|
|
this.isShowPreview = true;
|
|
},300)
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
areaConfig() {
|
|
return {
|
|
oddRowBGC: "#0a1b5632",
|
|
evenRowBGC: "#0a1b5632",
|
|
rowNum: 5,
|
|
data: this.companies.map(i => [`<span style="font-weight: bold; color: #f6aa2c;">${i}</span>`]),
|
|
}
|
|
},
|
|
listConfig() {
|
|
return {
|
|
headerBGC: "#0a1b5632",
|
|
oddRowBGC: "#0a1b5632",
|
|
evenRowBGC: "#0a1b5632",
|
|
indexHeader: "序号",
|
|
index: true,
|
|
rowNum: 8,
|
|
align: ["center", "left", "center", "center"],
|
|
columnWidth: [54],
|
|
waitTime: 2000,
|
|
header: [`<span style="color: ${this.activeColor}">${this.activeToday?.name||"服务名称"}</span>`, "人员", "时间","操作"],
|
|
data:
|
|
this.listData.get(this.activeToday.key) ? this.listData.get(this.activeToday.key).map(i =>
|
|
[
|
|
this.activeToday?.name,
|
|
i.customer?.name||i.customer_id,
|
|
`<span style="color: #03b1fa;">${this.$moment(i.created_at).format('HH:mm')}</span>`,
|
|
'<button style="line-height: 25px; height: 25px;color: #fff;width: 68px;border-radius: 12px;background-color: #0e2e91;">查看</button>']
|
|
) : [],
|
|
// Array.from({ length: 10 }, () => [
|
|
// "稽查回访",
|
|
// "人员a",
|
|
// '<span style="color: #03b1fa;">13:55</span>',
|
|
// '<button style="line-height: 25px; height: 25px;color: #fff;width: 68px;border-radius: 12px;background-color: #0e2e91;">查看</button>'
|
|
// ]),
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getTotal();
|
|
this.getList();
|
|
this.getAreas();
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '加载中...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.9)'
|
|
});
|
|
Promise.all([
|
|
this.getData(),
|
|
this.getListData()
|
|
]).then(_ => {
|
|
this.todayClick(false,this.toDayNums[1],0)
|
|
loading.close()
|
|
})
|
|
},
|
|
mounted() {
|
|
document.body.addEventListener("keypress", this.keywordRegister);
|
|
this.getMapData()
|
|
},
|
|
beforeDestroy() {
|
|
document.body.removeEventListener("keypress", this.keywordRegister);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$todayBkgColors:
|
|
linear-gradient(0deg, #8537d8 0%, #8537d8 0%, #bb7efc 100%),
|
|
linear-gradient(0deg, #159138 0%, #159138 0%, #51d893 99%, #51d893 100%),
|
|
linear-gradient(0deg, #0d2d8f 0%, #2eafdc 100%),
|
|
linear-gradient(0deg, #c92d40, #ec5b6d);
|
|
$todayColors:
|
|
#8537d8,
|
|
#159138,
|
|
#4b72dc,
|
|
#c92d40;
|
|
.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 {
|
|
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;
|
|
|
|
|
|
.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($todayBkgColors) {
|
|
&-item:nth-child(#{$index}) {
|
|
background: nth($todayBkgColors, $index);
|
|
}
|
|
&-item-active:nth-child(#{$index}) {
|
|
background: transparent;
|
|
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;
|
|
color: #fff;
|
|
transition: all .2s;
|
|
|
|
&__value {
|
|
line-height: 1;
|
|
font-size: 42px;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
}
|
|
&__name {
|
|
font-size: 14px;
|
|
}
|
|
|
|
&-active {
|
|
background: transparent;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
::v-deep .header-item:nth-child(1) {
|
|
color: #3a67f7;
|
|
}
|
|
::v-deep .header-item:nth-child(2) span {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
::v-deep .row-item .ceil button:focus {
|
|
transition: all .2s;
|
|
background-color: #03b1fa !important;
|
|
color: #000000 !important;
|
|
}
|
|
</style>
|