master
parent
6fd70eb634
commit
5f0d6d90f6
@ -1,33 +1,41 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function save(data) {
|
||||
return request({
|
||||
url: '/api/admin/admin/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function listuser() {
|
||||
return request({
|
||||
url: '/api/admin/admin',
|
||||
method: 'get'
|
||||
})
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function save(data) {
|
||||
return request({
|
||||
url: '/api/admin/admin/save',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function listuser() {
|
||||
return request({
|
||||
url: '/api/admin/admin',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function del(data) {
|
||||
return request({
|
||||
url: '/api/admin/admin/delete',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
export function showuser(params) {
|
||||
return request({
|
||||
url: '/api/admin/admin/show',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function setRoles(data) {
|
||||
return request({
|
||||
url: '/api/admin/admin/set-roles',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
export function del(data) {
|
||||
return request({
|
||||
url: '/api/admin/admin/delete',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function setRoles(data) {
|
||||
return request({
|
||||
url: '/api/admin/admin/set-roles',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 912 B |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 690 B |
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="bottom">
|
||||
<div class="bs-card d-flex flex-column">
|
||||
<div class="bs-card__title jc-between">
|
||||
<p class="bs-card__title--text">医疗陪护</p>
|
||||
|
||||
<div class="color-white">
|
||||
<span class="color-word">1</span>
|
||||
<span>/</span>
|
||||
<span>{{ yiliaopeihu.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-card__body flex-1" @click="previewImgs = yiliaopeihu.map(i => i.file),isShowPreview = true">
|
||||
<el-image fit="cover" class="el-img" :src="yiliaopeihu[0] ? yiliaopeihu[0].file : ''" alt="" />
|
||||
<div class="img-title">{{ yiliaopeihu[0] ? yiliaopeihu[0].label : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bs-card d-flex flex-column">
|
||||
<div class="bs-card__title jc-between">
|
||||
<p class="bs-card__title--text">物业项目</p>
|
||||
|
||||
<div class="color-white">
|
||||
<span class="color-word">1</span>
|
||||
<span>/</span>
|
||||
<span>{{ xiangmu.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-card__body flex-1" @click="previewImgs = xiangmu.map(i => i.file),isShowPreview = true">
|
||||
<el-image fit="cover" class="el-img" :src="xiangmu[0] ? xiangmu[0].file : ''" alt="" />
|
||||
<div class="img-title">{{ xiangmu[0] ? xiangmu[0].label : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bs-card d-flex flex-column">
|
||||
<div class="bs-card__title jc-between">
|
||||
<p class="bs-card__title--text">分公司/站点</p>
|
||||
|
||||
<div class="color-white">
|
||||
<span class="color-word">1</span>
|
||||
<span>/</span>
|
||||
<span>{{ fengongsi.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-card__body flex-1" @click="previewImgs = fengongsi.map(i => i.file),isShowPreview = true">
|
||||
<el-image fit="cover" class="el-img" :src="fengongsi[0] ? fengongsi[0].file : ''" alt="" />
|
||||
<div class="img-title">{{ fengongsi[0] ? fengongsi[0].label : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bs-card d-flex flex-column">
|
||||
<div class="bs-card__title jc-between">
|
||||
<p class="bs-card__title--text">活动集锦</p>
|
||||
|
||||
<div class="color-white">
|
||||
<span class="color-word">1</span>
|
||||
<span>/</span>
|
||||
<span>{{ huodongjijin.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bs-card__body flex-1" @click="previewImgs = huodongjijin.map(i => i.file),isShowPreview = true">
|
||||
<el-image fit="cover" class="el-img" :src="huodongjijin[0] ? huodongjijin[0].file : ''" alt="" />
|
||||
<div class="img-title">{{ huodongjijin[0] ? huodongjijin[0].label : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImgPreview v-model="isShowPreview" :imgs="previewImgs"></ImgPreview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList } from "@/api/bigScreen"
|
||||
import ImgPreview from "@/views/bigSreen/component/ImgPreview.vue";
|
||||
export default {
|
||||
components: {
|
||||
ImgPreview
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pics: [
|
||||
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
|
||||
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
|
||||
],
|
||||
|
||||
yiliaopeihu: [],
|
||||
xiangmu: [],
|
||||
fengongsi: [],
|
||||
huodongjijin: [],
|
||||
|
||||
previewImgs: [],
|
||||
isShowPreview: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getData () {
|
||||
try {
|
||||
const res = await Promise.all([
|
||||
getList({
|
||||
type: 'yiliaopeihu'
|
||||
},false),
|
||||
getList({
|
||||
type: 'xiangmu'
|
||||
},false),
|
||||
getList({
|
||||
type: 'fengongsi'
|
||||
},false),
|
||||
getList({
|
||||
type: 'huodongjijin'
|
||||
},false)
|
||||
])
|
||||
const [yiliaopeihu,xiangmu,fengongsi,huodongjijin] = res;
|
||||
this.yiliaopeihu = JSON.parse(yiliaopeihu?.data[0]?.value);
|
||||
this.xiangmu = JSON.parse(xiangmu?.data[0]?.value);
|
||||
this.fengongsi = JSON.parse(fengongsi?.data[0]?.value);
|
||||
this.huodongjijin = JSON.parse(huodongjijin?.data[0]?.value);
|
||||
} catch (err) {
|
||||
console.warn(err)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 22px;
|
||||
.bs-card {
|
||||
width: 332px;
|
||||
height: 203px;
|
||||
padding: 10px 25px;
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
& > img,& > .el-img {
|
||||
object-fit: cover;
|
||||
height: 128px;
|
||||
width: 372px;
|
||||
}
|
||||
|
||||
.img-title {
|
||||
width: 100%;
|
||||
line-height: 29px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
background-color: rgba(1, 16, 57, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-image-viewer__mask {
|
||||
transform: scale(2);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,657 @@
|
||||
<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>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<transition name="fade">
|
||||
<div v-show="value" class="img-preview">
|
||||
<div class="mask" @click.prevent.stop="$emit('input',false)"></div>
|
||||
<div class="img-container">
|
||||
<div style="background: #0d2067;height: 100%;width: 100%">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: true
|
||||
},
|
||||
imgs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.img-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
inset: 0 0 0 0;
|
||||
|
||||
.mask {
|
||||
background: #00000033;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
inset: 0 0 0 0;
|
||||
}
|
||||
.img-container {
|
||||
width: 1517px;
|
||||
height: 839px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
background: conic-gradient(
|
||||
#de8d51,
|
||||
#90b0b0,
|
||||
#b9723d,
|
||||
#7ac5e3
|
||||
);
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue