背景调整

src/assets/styles/element-ui.scss

@@ -193,6 +193,7 @@
       width: 12px;
       height: 12px;
       background: url('@/assets/images/inputIcon1.png') no-repeat;
+      background-size: 100% 100%;
     }
     &::after {
       content: '';
@@ -202,6 +203,7 @@
       width: 12px;
       height: 12px;
       background: url('@/assets/images/inputIcon2.png') no-repeat;
+      background-size: 100% 100%;
     }
     .el-select__placeholder {
       color: #a0c7dc;
@@ -215,6 +217,7 @@
         width: 28px;
         height: 48px;
         background: url('@/assets/images/select.png') no-repeat;
+        background-size: 100% 100%;background-size: 100% 100%;
       }
       .el-icon {
         display: none;
@@ -272,6 +275,7 @@
         width: 33px;
         height: 15px;
         background: url('@/assets/images/map/rightMenu/down2.png') no-repeat;
+        background-size: 100% 100%;
       }
       .el-icon {
         display: none;
@@ -339,6 +343,7 @@
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
+    background-size: 100% 100%;
   }
   &::after {
     content: '';
@@ -349,6 +354,7 @@
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 
@@ -378,6 +384,7 @@
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
+    background-size: 100% 100%;
   }
   &::after {
     content: '';
@@ -388,6 +395,7 @@
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 .custom-textarea {
@@ -402,6 +410,7 @@
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
+    background-size: 100% 100%;
   }
   &::after {
     content: '';
@@ -412,6 +421,7 @@
     width: 12px;
     height: 12px;
     background: url('@/assets/images/inputIcon2.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 

src/components/HKVideo/index.vue

@@ -170,7 +170,8 @@ const stop_now = async () => {
         .err_icon {
           width: 39px;
           height: 40px;
-          background: url('@/assets/images/video/err_video.png');
+          background: url('@/assets/images/video/err_video.png') no-repeat;
+          background-size: 100% 100%;
           margin-bottom: 10px;
         }
 

src/components/HeaderSection/index.vue

@@ -125,7 +125,8 @@ const clickMenu = (item) => {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
-    background: url('@/assets/images/header/header.png') no-repeat 100% 100%;
+    background: url('@/assets/images/header/header.png') no-repeat;
+    background-size: 100% 100%;
     background-size: cover;
     width: 6814px;
     height: 444px;
@@ -135,7 +136,8 @@ const clickMenu = (item) => {
       margin-top: 60px;
       width: 1314px;
       height: 126px;
-      background: url('@/assets/images/header/title.png') no-repeat 100% 100%;
+      background: url('@/assets/images/header/title.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .header-right {

src/components/Map/MapLogical.vue

@@ -116,7 +116,8 @@ onUnmounted(() => {
     transform: translate(-50%, -39%);
     width: 4196px;
     height: 1548px;
-    background: url('@/assets/images/map/circle.png');
+    background: url('@/assets/images/map/circle.png') no-repeat;
+    background-size: 100% 100%;
     pointer-events: none;
   }
   #map {

src/components/Map/index.vue

@@ -412,6 +412,7 @@ onUnmounted(() => {
     width: 42px;
     height: 42px;
     background: url('@/assets/images/map/ruler.png') no-repeat;
+    background-size: 100% 100%;
     cursor: pointer;
   }
   :deep(.amap-scalecontrol) {

src/components/Map/quickZoom.vue

@@ -89,7 +89,8 @@ const reduceStep = () => {
   font-size: 25.73px;
   width: 63px;
   height: 33px;
-  background: url('@/assets/images/map/marker.png') no-repeat 100% 100%;
+  background: url('@/assets/images/map/marker.png') no-repeat;
+  background-size: 100% 100%;
   font-family: 'SourceHanSansCN';
 }
 .slider {
@@ -109,7 +110,8 @@ const reduceStep = () => {
   :deep(.el-slider__button) {
     width: 48px;
     height: 48px;
-    background: url('@/assets/images/map/dot.png') no-repeat 100% 100%;
+    background: url('@/assets/images/map/dot.png') no-repeat;
+    background-size: 100% 100%;
     border: none;
   }
 }

src/components/TimeAxis/index.vue

@@ -263,6 +263,7 @@ onMounted(() => {
     width: 9px;
     height: 142px;
     background: url('@/assets/images/timeAxis/timeLeft.png') no-repeat;
+    background-size: 100% 100%;
   }
   &::after {
     content: '';

src/types/components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -43,6 +44,9 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -55,12 +59,14 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -71,6 +77,7 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -323,26 +323,31 @@ onUnmounted(() => {
         width: 135px;
         height: 105px;
         background: url('@/assets/images/emergencyCommandMap/weather/sunny.png') no-repeat;
+        background-size: 100% 100%;
       }
       .temperatureIcon {
         width: 135px;
         height: 105px;
         background: url('@/assets/images/emergencyCommandMap/weather/temperature.png') no-repeat;
+        background-size: 100% 100%;
       }
       .humidityIcon {
         width: 135px;
         height: 109px;
         background: url('@/assets/images/emergencyCommandMap/weather/humidity.png') no-repeat;
+        background-size: 100% 100%;
       }
       .windPowerIcon {
         width: 135px;
         height: 116px;
         background: url('@/assets/images/emergencyCommandMap/weather/windPower.png') no-repeat;
+        background-size: 100% 100%;
       }
       .rainfall {
         width: 135px;
         height: 109px;
         background: url('@/assets/images/emergencyCommandMap/weather/rainfall.png') no-repeat;
+        background-size: 100% 100%;
       }
     }
   }
@@ -385,6 +390,7 @@ onUnmounted(() => {
         width: 138px;
         height: 156px;
         background: url('@/assets/images/emergencyCommandMap/disasterInfo/time.png') no-repeat;
+        background-size: 100% 100%;
         margin-top: -50px;
       }
     }
@@ -416,14 +422,17 @@ onUnmounted(() => {
           height: 149px;
         }
         .event-icon1 {
-          background: url('@/assets/images/emergencyCommandMap/disasterInfo/icon1.png');
+          background: url('@/assets/images/emergencyCommandMap/disasterInfo/icon1.png') no-repeat;
+          background-size: 100% 100%;
         }
         .event-icon2 {
           height: 150px;
-          background: url('@/assets/images/emergencyCommandMap/disasterInfo/icon2.png');
+          background: url('@/assets/images/emergencyCommandMap/disasterInfo/icon2.png') no-repeat;
+          background-size: 100% 100%;
         }
         .event-icon3 {
-          background: url('@/assets/images/emergencyCommandMap/disasterInfo/icon3.png');
+          background: url('@/assets/images/emergencyCommandMap/disasterInfo/icon3.png') no-repeat;
+          background-size: 100% 100%;
         }
         .text-box {
           margin-top: 35px;
@@ -446,7 +455,7 @@ onUnmounted(() => {
     height: 140px;
     margin-top: 125px;
     margin-left: 22px;
-    background: url('@/assets/images/emergencyCommandMap/disasterInfo/durationBg.png');
+    background: url('@/assets/images/emergencyCommandMap/disasterInfo/durationBg.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     .text {
@@ -493,6 +502,7 @@ onUnmounted(() => {
       width: 97px;
       height: 107px;
       background: url('@/assets/images/emergencyCommandMap/disasterInfo/finishBtn.png') no-repeat;
+      background-size: 100% 100%;
     }
     .finish-text {
       font-size: 38px;
@@ -513,7 +523,8 @@ onUnmounted(() => {
 .line {
   width: 2px;
   height: 154px;
-  background: url('@/assets/images/emergencyCommandMap/disasterInfo/line.png');
+  background: url('@/assets/images/emergencyCommandMap/disasterInfo/line.png') no-repeat;
+  background-size: 100% 100%;
 }
 @keyframes slide {
   0% {

src/views/emergencyCommandMap/MiddleSection.vue

@@ -47,12 +47,15 @@ const handleQuery1 = () => {
   }
   .btn {
     background: url('@/assets/images/btn.png') no-repeat;
+    background-size: 100% 100%;
     &:hover {
       background: url('@/assets/images/btnActive.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .btn-active {
     background: url('@/assets/images/btnActive.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 

src/views/emergencyCommandMap/RightSection/index.vue

@@ -192,19 +192,24 @@ const updatePlan = (data: { eventId: string }) => {
         height: 238px;
       }
       .icon1 {
-        background: url('@/assets/images/emergencyCommandMap/icon1.png') no-repeat 100% 100%;
+        background: url('@/assets/images/emergencyCommandMap/icon1.png') no-repeat;
+        background-size: 100% 100%;
       }
       .icon2 {
-        background: url('@/assets/images/emergencyCommandMap/icon2.png') no-repeat 100% 100%;
+        background: url('@/assets/images/emergencyCommandMap/icon2.png') no-repeat;
+        background-size: 100% 100%;
       }
       .icon3 {
-        background: url('@/assets/images/emergencyCommandMap/icon3.png') no-repeat 100% 100%;
+        background: url('@/assets/images/emergencyCommandMap/icon3.png') no-repeat;
+        background-size: 100% 100%;
       }
       .icon4 {
-        background: url('@/assets/images/emergencyCommandMap/icon4.png') no-repeat 100% 100%;
+        background: url('@/assets/images/emergencyCommandMap/icon4.png') no-repeat;
+        background-size: 100% 100%;
       }
       .icon5 {
-        background: url('@/assets/images/emergencyCommandMap/icon5.png') no-repeat 100% 100%;
+        background: url('@/assets/images/emergencyCommandMap/icon5.png') no-repeat;
+        background-size: 100% 100%;
       }
       .task-text {
         font-size: 48px !important;

src/views/emergencyCommandMap/index.vue

@@ -56,6 +56,7 @@ onUnmounted(() => {
   .bg {
     width: 100%;
     background: url('@/assets/images/bg.jpg') no-repeat;
+    background-size: 100% 100%;
     position: relative;
   }
   .dashboard-content {

src/views/globalMap/LeftMenu.vue

@@ -156,7 +156,8 @@ onMounted(() => {
   width: 815px;
   height: 104px;
   padding: 0 10px;
-  background: url('@/assets/images/menu/search.png');
+  background: url('@/assets/images/menu/search.png') no-repeat;
+  background-size: 100% 100%;
   position: relative;
   margin: 0 auto;
   .input {
@@ -206,6 +207,7 @@ onMounted(() => {
     width: 871px;
     height: 1732px;
     background: url('@/assets/images/menu/menu.png') no-repeat;
+    background-size: 100% 100%;
     padding: 10px 20px;
   }
 
@@ -223,6 +225,7 @@ onMounted(() => {
     justify-content: center;
     align-items: center;
     background: url('@/assets/images/menu/btn.png') no-repeat;
+    background-size: 100% 100%;
   }
 
   .menu-header {
@@ -241,6 +244,7 @@ onMounted(() => {
       &:hover {
         position: relative;
         background: url('@/assets/images/menu/menuActive.png') no-repeat;
+        background-size: 100% 100%;
         background-position: bottom center;
       }
       .text {
@@ -252,6 +256,7 @@ onMounted(() => {
       width: 339px;
       height: 78px;
       background: url('@/assets/images/menu/menuActive.png') no-repeat;
+      background-size: 100% 100%;
       background-position: bottom center;
     }
   }
@@ -264,7 +269,7 @@ onMounted(() => {
       margin-top: 10px;
       width: 779px;
       background: url('@/assets/images/menu/menuContent.png') no-repeat;
-      background-size: cover;
+      background-size: 100% 100%;
 
       .box-header {
         height: 103px;
@@ -314,10 +319,12 @@ onMounted(() => {
 
         .down-icon {
           background: url('@/assets/images/menu/down.png') no-repeat;
+          background-size: 100% 100%;
         }
 
         .up-icon {
           background: url('@/assets/images/menu/up.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
 
@@ -349,11 +356,13 @@ onMounted(() => {
             width: 32px;
             height: 32px;
             background: url('@/assets/images/menu/checked-box.png') no-repeat;
+            background-size: 100% 100%;
             margin-right: 12px;
           }
 
           .checked {
             background: url('@/assets/images/menu/checked-box2.png') no-repeat;
+            background-size: 100% 100%;
           }
         }
       }

src/views/globalMap/RightMenu/TowerStatus.vue

@@ -26,101 +26,101 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-import { TableV2SortOrder } from 'element-plus';
-import type { SortBy, SortState } from 'element-plus';
-import { Bar, useChart } from 'vue-chartjs';
-import 'chart.js/auto';
-
-const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
-  Array.from({ length }).map((_, columnIndex) => ({
-    ...props,
-    key: `${prefix}${columnIndex}`,
-    dataKey: `${prefix}${columnIndex}`,
-    title: `Column ${columnIndex}`,
-    width: 150
-  }));
-
-const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
-  Array.from({ length }).map((_, rowIndex) => {
-    return columns.reduce(
-      (rowData, column, columnIndex) => {
-        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
-        return rowData;
-      },
-      {
-        id: `${prefix}${rowIndex}`,
-        parentId: null
-      }
-    );
-  });
-
-const columns = generateColumns(10);
-const data = ref(generateData(columns, 200));
-
-columns[0].sortable = true;
-columns[1].sortable = true;
-
-const sortState = ref<SortState>({
-  'column-0': TableV2SortOrder.DESC,
-  'column-1': TableV2SortOrder.ASC
-});
-
-const onSort = ({ key, order }: SortBy) => {
-  sortState.value[key] = order;
-  data.value = data.value.reverse();
-};
-
-const chartData = ref({
-  labels: ['茂南区', '电白区', '信宜市', '高州市', '化州市', '滨海新区', '高新区', '水东湾新城'],
-  datasets: [
-    {
-      label: '异常比例 (%)',
-      data: [20, 25, 30, 35, 5, 15, 40, 45],
-      backgroundColor: [
-        'rgba(255, 99, 132, 0.2)',
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(255, 206, 86, 0.2)',
-        'rgba(75, 192, 192, 0.2)',
-        'rgba(153, 102, 255, 0.2)',
-        'rgba(255, 159, 64, 0.2)',
-        'rgba(255, 205, 86, 0.2)',
-        'rgba(201, 203, 207, 0.2)'
-      ],
-      borderColor: [
-        'rgba(255, 99, 132, 1)',
-        'rgba(54, 162, 235, 1)',
-        'rgba(255, 206, 86, 1)',
-        'rgba(75, 192, 192, 1)',
-        'rgba(153, 102, 255, 1)',
-        'rgba(255, 159, 64, 1)',
-        'rgba(255, 205, 86, 1)',
-        'rgba(201, 203, 207, 1)'
-      ],
-      borderWidth: 1
-    }
-  ]
-});
-
-const chartOptions = {
-  scales: {
-    y: {
-      beginAtZero: true,
-      title: {
-        display: true,
-        text: '异常比例 (%)'
-      }
-    }
-  },
-  responsive: true,
-  maintainAspectRatio: false
-};
-
-const { renderChart } = useChart();
-
-onMounted(() => {
-  renderChart(chartData.value, chartOptions);
-});
+// import { ref, onMounted } from 'vue';
+// import { TableV2SortOrder } from 'element-plus';
+// import type { SortBy, SortState } from 'element-plus';
+// import { Bar, useChart } from 'vue-chartjs';
+// import 'chart.js/auto';
+//
+// const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+//   Array.from({ length }).map((_, columnIndex) => ({
+//     ...props,
+//     key: `${prefix}${columnIndex}`,
+//     dataKey: `${prefix}${columnIndex}`,
+//     title: `Column ${columnIndex}`,
+//     width: 150
+//   }));
+//
+// const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
+//   Array.from({ length }).map((_, rowIndex) => {
+//     return columns.reduce(
+//       (rowData, column, columnIndex) => {
+//         rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`;
+//         return rowData;
+//       },
+//       {
+//         id: `${prefix}${rowIndex}`,
+//         parentId: null
+//       }
+//     );
+//   });
+//
+// const columns = generateColumns(10);
+// const data = ref(generateData(columns, 200));
+//
+// columns[0].sortable = true;
+// columns[1].sortable = true;
+//
+// const sortState = ref<SortState>({
+//   'column-0': TableV2SortOrder.DESC,
+//   'column-1': TableV2SortOrder.ASC
+// });
+//
+// const onSort = ({ key, order }: SortBy) => {
+//   sortState.value[key] = order;
+//   data.value = data.value.reverse();
+// };
+//
+// const chartData = ref({
+//   labels: ['茂南区', '电白区', '信宜市', '高州市', '化州市', '滨海新区', '高新区', '水东湾新城'],
+//   datasets: [
+//     {
+//       label: '异常比例 (%)',
+//       data: [20, 25, 30, 35, 5, 15, 40, 45],
+//       backgroundColor: [
+//         'rgba(255, 99, 132, 0.2)',
+//         'rgba(54, 162, 235, 0.2)',
+//         'rgba(255, 206, 86, 0.2)',
+//         'rgba(75, 192, 192, 0.2)',
+//         'rgba(153, 102, 255, 0.2)',
+//         'rgba(255, 159, 64, 0.2)',
+//         'rgba(255, 205, 86, 0.2)',
+//         'rgba(201, 203, 207, 0.2)'
+//       ],
+//       borderColor: [
+//         'rgba(255, 99, 132, 1)',
+//         'rgba(54, 162, 235, 1)',
+//         'rgba(255, 206, 86, 1)',
+//         'rgba(75, 192, 192, 1)',
+//         'rgba(153, 102, 255, 1)',
+//         'rgba(255, 159, 64, 1)',
+//         'rgba(255, 205, 86, 1)',
+//         'rgba(201, 203, 207, 1)'
+//       ],
+//       borderWidth: 1
+//     }
+//   ]
+// });
+//
+// const chartOptions = {
+//   scales: {
+//     y: {
+//       beginAtZero: true,
+//       title: {
+//         display: true,
+//         text: '异常比例 (%)'
+//       }
+//     }
+//   },
+//   responsive: true,
+//   maintainAspectRatio: false
+// };
+//
+// const { renderChart } = useChart();
+//
+// onMounted(() => {
+//   renderChart(chartData.value, chartOptions);
+// });
 </script>
 
 <style>

src/views/globalMap/SwitchMapTool.vue

@@ -75,6 +75,7 @@ const handleExpand = () => {
     width: 71px;
     height: 262px;
     background: url('@/assets/images/map/switchBtn.png') no-repeat;
+    background-size: 100% 100%;
     text-align: center;
     display: flex;
     align-items: center;
@@ -117,18 +118,23 @@ const handleExpand = () => {
   }
   .logical {
     background: url('@/assets/images/map/logical.png') no-repeat;
+    background-size: 100% 100%;
   }
   .vectorgraph {
     background: url('@/assets/images/map/vectorgraph.png') no-repeat;
+    background-size: 100% 100%;
   }
   .satellite {
     background: url('@/assets/images/map/satellite.png') no-repeat;
+    background-size: 100% 100%;
   }
   .satellite2 {
     background: url('@/assets/images/map/satellite2.png') no-repeat;
+    background-size: 100% 100%;
   }
   .satellite3 {
     background: url('@/assets/images/map/satellite3.png') no-repeat;
+    background-size: 100% 100%;
   }
   .item-text {
     position: absolute;

src/views/globalMap/index.vue

@@ -187,8 +187,8 @@ provide('getDrawTool', getDrawTool);
   height: 100%;
 }
 .bg {
-  background: url('@/assets/images/bg.jpg') no-repeat 100% 100%;
-  background-size: cover;
+  background: url('@/assets/images/bg.jpg') no-repeat;
+  background-size: 100% 100%;
 }
 .global-map {
   width: 100%;

src/views/routineCommandMap/MiddleSection.vue

@@ -62,12 +62,15 @@ const handleQuery2 = () => {
   }
   .btn {
     background: url('@/assets/images/btn.png') no-repeat;
+    background-size: 100% 100%;
     &:hover {
       background: url('@/assets/images/btnActive.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .btn-active {
     background: url('@/assets/images/btnActive.png') no-repeat;
+    background-size: 100% 100%;
   }
 }
 

src/views/routineCommandMap/index.vue

@@ -56,6 +56,7 @@ onUnmounted(() => {
   .bg {
     width: 100%;
     background: url('@/assets/images/bg.jpg') no-repeat;
+    background-size: 100% 100%;
     position: relative;
   }
   .dashboard-content {