公共卫生风险弹窗优化

src/App.vue

@@ -15,7 +15,8 @@ const locale = zhCn
 .container {
   margin: 0;
   width: 100vw;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 1080px;
   box-sizing: border-box;
   /* background-color: #081732; */
 }

src/assets/styles/index.scss

@@ -48,6 +48,22 @@ html {
       }
     }
 
+.el-input__wrapper{
+  background-color: #052d56 !important;
+}
+.el-date-editor{
+  --el-input-text-color:#ffffff !important;
+  --el-input-border-color:#1d85a9 !important;
+
+}
+
+.el-input__inner{
+  // color: #ffffff !important;
+}
+
+.el-input__inner::placeholder {
+  color: #ffffff !important;
+}
 
 // .el-tooltip {
 //   user-select: text !important;

src/views/index.vue

@@ -92,7 +92,8 @@ function setActive(index, item) {
 <style lang="scss" scoped>
 .home_container {
   width: 100vw;
-  height: 100vh;
+  // height: 100vh;
+  height: 1080px;
   background: url(../assets/img/1-1综合态势-市级.png) no-repeat;
   background-size: 100% 100%;
   position: relative;

src/views/left/dialog/PublicHealthRisksDialog.vue

@@ -5,11 +5,13 @@
       <el-select v-model="selectSearchObj.type" placeholder="风险类型" popper-class="custom-select">
         <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
-      <el-select v-model="selectSearchObj.value" placeholder="日期" popper-class="custom-select">
+      <!-- <el-select v-model="selectSearchObj.value" placeholder="日期" popper-class="custom-select">
         <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
-      </el-select>
+      </el-select> -->
+
+      <el-date-picker v-model="selectSearchObj.value1" type="date" placeholder="请选择日期" size="small" popper-class="date_picker_custom-class"></el-date-picker>
       <el-select v-model="selectSearchObj.value" placeholder="状态" popper-class="custom-select">
-        <el-option v-for="item in riskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-option v-for="item in riskStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
     </div>
 
@@ -35,6 +37,12 @@ const riskTypeOptions = ref([
   { value: 2, label: '风险事件' },
   { value: 3, label: '风险信息' }
 ])
+
+const riskStatusOptions = ref([
+  { value: 1, label: '处置中' },
+  { value: 2, label: '已结案' }
+])
+
 const tableData = ref([
   {
     date: '浦东新区',
@@ -70,21 +78,15 @@ const tableData = ref([
 //   }
 // }
 
-
 const selectedRowIndex = ref(null)
-function rowClassName ({ row, rowIndex }) {
-  let className = '';
+function rowClassName({ row, rowIndex }) {
+  let className = ''
   if (rowIndex === 0) {
-    return 'yellow-text'; // 第一行文字为黄色
+    return 'yellow-text' // 第一行文字为黄色
   }
-
-}
-
-function handleRowClick () {
-
 }
 
-
+function handleRowClick() {}
 </script>
 <style lang="scss" scoped>
 .table_container {
@@ -110,7 +112,6 @@ function handleRowClick () {
   width: 100%;
 }
 
-
 // 表格行间距
 :deep(.el-table__body) {
   -webkit-border-vertical-spacing: 10px;
@@ -147,7 +148,6 @@ function handleRowClick () {
   color: #ffffff !important;
 }
 
-
 .el-select__wrapper {
   min-height: 24px !important;
 }
@@ -211,10 +211,8 @@ function handleRowClick () {
   font-weight: 400 !important;
 }
 
-
-
 .dialog_table .yellow-text {
-  color: #FFD15C !important;
+  color: #ffd15c !important;
   // background: rgba(0, 170, 255, 0.15) !important
 }
 
@@ -222,7 +220,7 @@ function handleRowClick () {
 .dialog_table .el-table__row {
   height: 28px;
   border-radius: 0px 0px 0px 0px;
-  font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
+  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.9);
   background-color: rgba(0, 170, 255, 0.15) !important;
@@ -231,7 +229,7 @@ function handleRowClick () {
 .dialog_table th {
   height: 28px;
   border-radius: 0px 0px 0px 0px;
-  font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
+  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
   font-size: 16px;
   color: rgba(255, 255, 255, 0.9);
   // background-color: rgba(0, 170, 255, 0.15) !important;
@@ -240,8 +238,8 @@ function handleRowClick () {
 }
 
 // table伪类显示白色问题
-.el-table__body tr.hover-row>td.el-table__cell,
-.el-table--enable-row-hover .el-table__body tr:hover>td {
+.el-table__body tr.hover-row > td.el-table__cell,
+.el-table--enable-row-hover .el-table__body tr:hover > td {
   background-color: rgba(15, 61, 151, 0.8) !important;
 }
 
@@ -250,4 +248,74 @@ function handleRowClick () {
 .el-table::before {
   background-color: transparent;
 }
+
+// .date_picker_custom-class {
+//   // .el----(自己需要修改的样式类名){
+//   // 	padding:unset;//需要修改什么样式，直接修改就好
+//   // }
+//   .el-date-picker{
+//      background-color: rgba(0, 170, 255, 0.15) !important;
+//   }
+//   .el-picker-panel__body-wrapper{
+//      background-color: rgba(0, 170, 255, 0.15) !important;
+//   }
+//   .el-picker-panel__body {
+//     font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
+//     font-size: 16px;
+//     color: rgba(255, 255, 255, 0.9);
+//     // background-color: rgba(0, 170, 255, 0.15) !important;
+//     background-color: rgba(0, 170, 255, 0.15) !important;
+//   }
+// }
+
+/* 针对日期选择器面板整体背景和文字颜色 */
+.date_picker_custom-class {
+  // background-color: #2c2c2c !important;
+  background-color: #214370 !important;
+  border: 1px solid #1d85a9 !important;
+  color: #fff !important;
+}
+
+/* ✅ 修改日期切换箭头颜色 */
+.date_picker_custom-class .el-picker-panel__icon-btn {
+  color: #1d85a9 !important; /* 修改箭头颜色 */
+}
+
+/* 选中时箭头的颜色 */
+.date_picker_custom-class .el-picker-panel__icon-btn:hover {
+  color: #00ffaa !important; /* 鼠标悬停时箭头颜色 */
+}
+
+/* ✅ 隐藏下拉控件的箭头 */
+.date_picker_custom-class .el-popper__arrow {
+  display: none !important;
+}
+
+
+.el-date-picker__header-label {
+   color: #fff !important;
+}
+/* 针对面板内容区域 */
+.date_picker_custom-class .el-picker-panel__body {
+  background-color: #214370;
+  color: #fff;
+}
+
+/* 针对日期表格的表头和单元格 */
+.date_picker_custom-class .el-date-table th,
+.date_picker_custom-class .el-date-table td {
+  background-color: #214370;
+  color: #fff;
+}
+
+/* 鼠标悬停时改变单元格背景色 */
+.date_picker_custom-class .el-date-table td:hover {
+  background-color: #3a3a3a;
+}
+
+/* 针对面板底部的按钮区域 */
+.date_picker_custom-class .el-picker-panel__footer {
+  background-color: #214370;
+  color: #fff;
+}
 </style>

src/views/left/modules/common/RiskTableContent.vue

@@ -310,11 +310,11 @@ onMounted(() => {})
 }
 
 :deep(.status-已结案) {
-  background: linear-gradient(270deg, rgba(241, 74, 24, 0.1) 0%, rgba(241, 74, 24, 0.6) 51%, rgba(241, 74, 24, 0.1) 100%);
+  background: linear-gradient(270deg, rgba(27, 128, 202, 0.1) 0%, rgba(27, 128, 202, 0.6) 51%, rgba(27, 128, 202, 0.1) 100%);
   font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
   font-weight: normal;
   font-size: 16px;
-  color: #ec4614;
+  color: #70EEFF;
   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   text-align: center;
   font-style: normal;