554 lines
15 KiB
Vue
554 lines
15 KiB
Vue
<template>
|
||
<div class="largeScreen">
|
||
<el-dialog
|
||
class="largeScreen__dialog"
|
||
v-model="visible"
|
||
:width="width"
|
||
:show-close="false"
|
||
append-to-body
|
||
@opened="openedHandle"
|
||
@close="closeHandle"
|
||
>
|
||
<div class="largeScreen__dialog-content" :style="{ '--height--' : height }">
|
||
<div class="header">
|
||
<div class="header-title">
|
||
<!-- <el-icon size="16"><CopyDocument /></el-icon> -->
|
||
<span>{{ title }}</span>
|
||
</div>
|
||
<div class="header-close" @click="closeHandle">
|
||
<el-icon size="24"><Close /></el-icon>
|
||
</div>
|
||
</div>
|
||
<!-- v-if="contentShow" -->
|
||
<div class="container">
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<div></div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref, reactive, onMounted, computed, getCurrentInstance} from "vue";
|
||
import { fitChartSize, fitChartSizeVh } from "@/utils/styleUtils";
|
||
import styleUtil from "@/utils/styleUtils";
|
||
const props = defineProps({
|
||
open: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
width: {
|
||
type: String || Number,
|
||
default: styleUtil.px2vw(900),
|
||
},
|
||
height: {
|
||
type: String || Number,
|
||
default: styleUtil.px2vh(700),
|
||
},
|
||
title: {
|
||
required: true,
|
||
type: String,
|
||
default: "",
|
||
},
|
||
});
|
||
const contentShow = ref(false);
|
||
const visible = computed(() => props.open);
|
||
|
||
function openedHandle() {
|
||
contentShow.value = true;
|
||
}
|
||
|
||
// 添加emit事件
|
||
const emit = defineEmits(["update:open"]);
|
||
|
||
// 确定
|
||
const closeHandle = () => {
|
||
contentShow.value = false;
|
||
emit("update:open", false);
|
||
};
|
||
|
||
defineExpose({
|
||
contentShow,
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
@use "@/assets/styles/computed.scss" as calculate;
|
||
// 大屏样式
|
||
$shadow-color: #127BDC;
|
||
$dialog__title-color: #00f4f5;
|
||
$dp-primary-color: #11396A;
|
||
$text__color: #F4F4F4;
|
||
$pager__bg-color: linear-gradient(rgba(0, 240, 255, 0.1), rgba(13, 172, 255, 0.1));
|
||
$pager__bg-color-isActive: #127BDC;
|
||
$header__height: calculate.vh(40px);
|
||
$clip__size: calculate.px2font(15px);
|
||
.largeScreen {
|
||
// 大屏弹框
|
||
&__dialog {
|
||
background-color: $dp-primary-color;
|
||
// padding: calculate.vh(20px) calculate.vh(30px);
|
||
padding: calculate.vh(15px);
|
||
border-radius: calculate.px2font(0px);
|
||
border: calculate.px2font(1px) solid rgba(14, 255, 255, 0.6);
|
||
box-shadow: 0px 0px calculate.px2font(100px) 0 #4790f4;
|
||
// box-shadow: inset 0 0 calculate.px2font(20px) $shadow-color; /* 向内阴影，颜色为深红色 */
|
||
max-height: fit-content;
|
||
clip-path: polygon($clip__size 0, calc(100% - $clip__size) 0, 100% $clip__size, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 $clip__size);
|
||
&::before,&::after {
|
||
content: "";
|
||
bottom: 0;
|
||
position: absolute;
|
||
z-index: 1;
|
||
width: calculate.px2font(25px);
|
||
height: calculate.px2font(25px);
|
||
border-color: #84E0FF;
|
||
border-style: solid;
|
||
}
|
||
&::before {
|
||
left: 0;
|
||
border-width: 0 0 calculate.px2font(3px) calculate.px2font(3px);
|
||
}
|
||
&::after {
|
||
right: 0;
|
||
border-width: 0 calculate.px2font(3px) calculate.px2font(3px) 0;
|
||
}
|
||
|
||
.el-dialog__header,.el-dialog__footer {
|
||
display: none;
|
||
}
|
||
.show-close {
|
||
display: none;
|
||
}
|
||
&-content {
|
||
width: 100%;
|
||
// height: var(--height--);
|
||
.header {
|
||
position: relative;
|
||
// border-bottom: calculate.px2font(2px) solid #072a52;
|
||
margin-bottom: calculate.px2font(15px);
|
||
&-title {
|
||
height: $header__height;
|
||
color: $dialog__title-color;
|
||
font-size: calculate.px2font(16px);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: calculate.px2font(10px);
|
||
|
||
.el-icon {
|
||
font-size: calculate.px2font(20px) !important;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
&-close {
|
||
position: absolute;
|
||
top: calculate.vh(10px);
|
||
right: 0;
|
||
z-index: 9;
|
||
border-radius: 50%;
|
||
// padding: calculate.vh(3px) calculate.vw(5px);
|
||
// background-color: #0c3573;
|
||
border: calculate.px2font(1px) solid #D8D8D8;
|
||
color: #FFF;
|
||
width: calculate.vh(30px);
|
||
height: calculate.vh(30px);
|
||
display: grid;
|
||
place-items: center;
|
||
cursor: pointer;
|
||
|
||
.el-icon {
|
||
font-size: calculate.px2font(16px) !important;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
.container {
|
||
height: calc(#{var(--height--)} - calculate.vh(60px));
|
||
overflow-y: auto;
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
.tableWrap {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
.el-dialog__body {
|
||
padding: 0;
|
||
overflow-y: visible;
|
||
&::-webkit-scrollbar {
|
||
width: 0;
|
||
}
|
||
}
|
||
.el-scrollbar__bar {
|
||
border-radius: calculate.px2font(9999px);
|
||
height: calculate.vh(10px);
|
||
}
|
||
|
||
.el-card {
|
||
.el-card__body {
|
||
--el-font-size-base: #{calculate.px2font(14px)};
|
||
padding: calculate.vh(14px) calculate.vw(20px) calculate.vh(20px) calculate.vw(20px) !important;
|
||
|
||
h4,p {
|
||
margin: calculate.vh(14px) 0;
|
||
font-size: calculate.px2font(16px);
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-timeline {
|
||
.el-timeline-item {
|
||
.el-timeline-item__node--normal {
|
||
--el-timeline-node-size-normal: #{calculate.px2font(12px)};
|
||
}
|
||
.el-timeline-item__tail {
|
||
left: calculate.px2font(4px);
|
||
border-left-width: calculate.px2font(2px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.el-table {
|
||
--el-table-header-bg-color: #1A87D2;
|
||
--el-table-bg-color: #005E99;
|
||
--el-table-border-color: transparent;
|
||
--el-table-border: 0px solid #043576;
|
||
--el-table-text-color: #FFF;
|
||
// --el-table-header-text-color: #98C8FF;
|
||
--el-table-tr-bg-color: #325b81;
|
||
--el-table-row-hover-bg-color: #0dacff4d;
|
||
|
||
$tableBg: #005E99;
|
||
|
||
height: calc(100% - calculate.vh(70px)) !important;
|
||
font-size: calculate.px2font(14px);
|
||
|
||
border-radius: 0;
|
||
|
||
.el-table__inner-wrapper {
|
||
height: 100% !important;
|
||
background: $tableBg !important;
|
||
}
|
||
.el-table__header-wrapper th,
|
||
.el-table__fixed-header-wrapper th {
|
||
font-size: calculate.px2font(16px) !important;
|
||
height: calculate.vh(30px) !important;
|
||
padding: calculate.vh(10px) calculate.vh(12px);
|
||
// background-color: var(--el-table-header-bg-color) !important;
|
||
background-color: transparent !important;
|
||
color: var(--el-table-header-text-color);
|
||
}
|
||
thead {
|
||
tr {
|
||
background: linear-gradient(to bottom, #56CCF2, #2F80ED);
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
.cell{
|
||
padding: 0 calculate.vw(10px);
|
||
line-height: calculate.vh(23px);
|
||
}
|
||
.el-table__cell{
|
||
padding: calculate.vh(15px) 0;
|
||
}
|
||
.el-table__empty-block {
|
||
height: 100%;
|
||
}
|
||
tr {
|
||
background-color: $tableBg;
|
||
&:hover {
|
||
background-color: $tableBg;
|
||
}
|
||
}
|
||
tr:nth-child(2n) {
|
||
background-color: #3C93D2;
|
||
&:hover {
|
||
background-color: #3C93D2;
|
||
}
|
||
}
|
||
}
|
||
.pagination-container {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin: calculate.vh(20px) 0 0 0;
|
||
.el-pagination {
|
||
$buttonWH: calculate.vh(40px);
|
||
--el-pagination-font-size: #{calculate.px2font(14px)};
|
||
--el-pagination-button-width: #{$buttonWH};
|
||
--el-pagination-button-height: #{$buttonWH};
|
||
--el-pagination-border-radius: #{calculate.px2font(3px)};
|
||
--el-input-border-radius: #{calculate.px2font(5px)};
|
||
--el-input-inner-height: calc(#{calculate.vh(32px)} - #{calculate.vh(2px)});
|
||
--el-pagination-item-gap: #{calculate.px2font(12px)};
|
||
|
||
margin-right: calculate.vw(10px);
|
||
|
||
button {
|
||
// border-radius: var(--el-pagination-border-radius) !important;
|
||
padding: 0 calculate.vh(4px);
|
||
.el-icon {
|
||
font-size: calculate.px2font(18px);
|
||
}
|
||
}
|
||
&.is-background .el-pager li.is-active {
|
||
border-radius: var(--el-pagination-border-radius);
|
||
}
|
||
&.is-background {
|
||
.btn-next, .btn-prev, .el-pager li {
|
||
margin: 0 calculate.vw(4px);
|
||
}
|
||
}
|
||
&__jump {
|
||
.el-pagination__editor.el-input {
|
||
width: calculate.vw(56px);
|
||
}
|
||
.el-input__wrapper {
|
||
padding: calculate.vh(1px) calculate.vh(11px);
|
||
box-shadow: 0 0 0 calculate.px2font(1px) var(--el-input-border-color,var(--el-border-color)) inset;
|
||
border-radius: var(--el-pagination-border-radius);
|
||
.el-input__inner {
|
||
height: calculate.vh(35px);
|
||
font-size: calculate.px2font(14px);
|
||
border-radius: var(--el-pagination-border-radius);
|
||
}
|
||
}
|
||
}
|
||
.el-select {
|
||
width: calculate.vw(128px);
|
||
.el-select__wrapper {
|
||
min-height: calculate.vh(40px);
|
||
line-height: calculate.vh(24px);
|
||
font-size: calculate.px2font(14px);
|
||
padding: calculate.vh(4px) calculate.vh(12px);
|
||
border-radius: calculate.px2font(4px);
|
||
}
|
||
.el-select__suffix {
|
||
.el-icon {
|
||
width: calculate.vw(20px);
|
||
height: calculate.vh(20px);
|
||
line-height: calculate.vh(20px);
|
||
font-size: calculate.px2font(14px);
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
&__select, &__pagination {
|
||
// 下拉气泡三角颜色
|
||
&[data-popper-placement^=bottom] .el-popper__arrow::before {
|
||
background: #254277;
|
||
border: calculate.px2font(1px) solid #254277;
|
||
}
|
||
|
||
.el-select__wrapper {
|
||
background-color: $dp-primary-color; // 外层下拉框背景
|
||
box-shadow: 0 0 0 calculate.px2font(1px) #254277 inset;
|
||
|
||
&:hover{
|
||
box-shadow: 0 0 0 calculate.px2font(1px) $shadow-color inset;
|
||
}
|
||
}
|
||
.el-select__placeholder {
|
||
color: $text__color;
|
||
&.is-transparent {
|
||
// color: rgb(244, 244, 244, .5);
|
||
}
|
||
}
|
||
|
||
&.is-light {
|
||
border-color: #00a2ff;
|
||
background-color: rgba(0, 120, 233, 0.63) ; // 外层下拉框背景
|
||
}
|
||
|
||
.el-select-dropdown {
|
||
&__wrap {
|
||
border: none;
|
||
// background-color: $dp-primary-color; // 下拉框背景色
|
||
background-color: linear-gradient(0deg, #00B4FF 0%, rgba(0,234,255,0.13) 71%, rgba(1,12,16,0) 100%);
|
||
}
|
||
&__item {
|
||
color: #409eff;
|
||
&:hover,&.selcted,&.is-hovering {
|
||
background-color: rgba(0,234,255,0.13);
|
||
color: $text__color;
|
||
font-weight: 700;
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
&__pagination {
|
||
.el-input__wrapper {
|
||
background-color: $dp-primary-color;
|
||
.el-input__inner {
|
||
color: $text__color;
|
||
}
|
||
}
|
||
.el-pagination.is-background .btn-next,
|
||
.el-pagination.is-background .btn-prev,
|
||
.el-pagination.is-background .el-pager li {
|
||
background: $pager__bg-color;
|
||
}
|
||
.el-pagination.is-background .btn-next.is-active,
|
||
.el-pagination.is-background .btn-prev.is-active,
|
||
.el-pagination.is-background .el-pager li.is-active {
|
||
background-color: $pager__bg-color-isActive;
|
||
}
|
||
.btn-prev, .btn-next, .el-pager li {
|
||
color: #FFF;
|
||
}
|
||
.el-pagination {
|
||
&__total,&__jump {
|
||
color: $text__color;
|
||
}
|
||
}
|
||
}
|
||
&__map-select {
|
||
// 下拉气泡三角颜色
|
||
&[data-popper-placement^=bottom] .el-popper__arrow::before {
|
||
background: #00B4FF;
|
||
}
|
||
|
||
.el-select__wrapper {
|
||
background: linear-gradient(0deg, rgba(0,234,255,0.13) 0%, rgba(1,12,16,0) 100%);
|
||
box-shadow: none;
|
||
border-radius: 0;
|
||
&:hover{
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
.el-select__suffix {
|
||
.el-select__caret {
|
||
color: #FFF;
|
||
}
|
||
}
|
||
.el-select__placeholder {
|
||
color: #fff;
|
||
font-weight: bold;
|
||
&.is-transparent {
|
||
// color: rgb(244, 244, 244, .5);
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
&.is-light {
|
||
border-color: #00a2ff;
|
||
background-color: rgba(0, 120, 233, 0.63) ; // 外层下拉框背景
|
||
}
|
||
|
||
.el-select-dropdown {
|
||
&__wrap {
|
||
border: none;
|
||
background-color: #024489; // 下拉框背景色
|
||
}
|
||
&__item {
|
||
color: #409eff;
|
||
&:hover,&.selcted,&.is-hovering {
|
||
background-color: #0257A9;
|
||
color: $text__color;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-cascader-menu {
|
||
color: #409eff;
|
||
}
|
||
.el-cascader-node:not(.is-disabled):focus,
|
||
.el-cascader-node:not(.is-disabled):hover {
|
||
background-color: rgba(0,234,255,0.13);
|
||
color: #FFF;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
// 级联
|
||
&__map-cascader {
|
||
background-color: #024489 !important;
|
||
.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
|
||
background-color: #0257a9;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
&__dropdown {
|
||
&.is-light {
|
||
border-color: #00a2ff;
|
||
background-color: rgba(0, 120, 233, 0.63) ; // 外层下拉框背景
|
||
}
|
||
.el-dropdown-menu {
|
||
background-color: #024489;
|
||
&__item {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
.el-dropdown-menu__item:not(.is-disabled):focus,
|
||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||
background-color: rgba(0,234,255,0.13);
|
||
color: #FFF;
|
||
font-weight: 700;
|
||
}
|
||
.el-popper.is-light .el-popper__arrow:before {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
.el-form {
|
||
&-item__label {
|
||
color: #FFF;
|
||
}
|
||
.el-input {
|
||
&__wrapper {
|
||
background-color: $dp-primary-color;
|
||
// box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
|
||
input {
|
||
color: #FFF;
|
||
}
|
||
}
|
||
&-group__append, &-group__prepend {
|
||
background-color: #409EFF;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__descriptions{
|
||
font-size: calculate.px2font(16px);
|
||
color: #FFF;
|
||
.el-descriptions__header {
|
||
margin-bottom: calculate.vh(15px);
|
||
}
|
||
.el-descriptions__body {
|
||
background-color: #325b81;
|
||
.el-descriptions__table.is-bordered .el-descriptions__cell {
|
||
padding: calculate.vh(12px) calculate.vw(15px);
|
||
line-height: calculate.vh(25px);
|
||
}
|
||
.el-descriptions__content.el-descriptions__cell.is-bordered-content {
|
||
font-size: inherit;
|
||
color: inherit;
|
||
background-color: #195590;
|
||
}
|
||
.el-descriptions__label.el-descriptions__cell.is-bordered-label {
|
||
width: calculate.vw(150px);
|
||
font-size: inherit;
|
||
background-color: #155ea2;
|
||
color: #98C8FF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.w100 {
|
||
width: 100% !important;
|
||
}
|
||
|
||
</style> |