From ab65906ce525c07d6b614e63e573155d91078708 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 27 Aug 2025 16:57:03 +0800
Subject: [PATCH] feat:样式调整
---
src/views/resource/components/spotDetails.vue | 193 ++++++++++++++++++++++++++---------------------
1 files changed, 107 insertions(+), 86 deletions(-)
diff --git a/src/views/resource/components/spotDetails.vue b/src/views/resource/components/spotDetails.vue
index e52d0e7..5316bf7 100644
--- a/src/views/resource/components/spotDetails.vue
+++ b/src/views/resource/components/spotDetails.vue
@@ -1,7 +1,7 @@
<template>
<el-dialog
:title="props.title"
- append-to-body
+
v-model="uploadPatchDialog"
width="75%"
align-center
@@ -67,13 +67,9 @@
<el-table-column label="操作" align="center" v-if="props.title === '图斑编辑'">
<template #default="scope">
<span class="operationspan">删除</span>
- <span class="operationspan" @click.stop="handleSelectionChange(scope.row)"
+ <span class="operationspan" @click.stop="handleSelectionChange(scope.row)"
>编辑</span
>
- <!-- <el-button type="text">删除</el-button>
- <el-button type="text" @click.stop="handleSelectionChange(scope.row)"
- >编辑</el-button
- > -->
</template>
</el-table-column>
</el-table>
@@ -98,8 +94,8 @@
></FunButton>
<!-- 完成/取消 -->
<div class="btnGroups" v-if="props.title === '图斑编辑'">
- <el-button type="primary">完成</el-button>
- <el-button>取消</el-button>
+ <img src="@/assets/images/home/territory/savebtn.png" alt="" />
+ <img src="@/assets/images/home/territory/cancelbtn.png" alt="" />
</div>
<!-- 地图 -->
<div id="spotMap" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
@@ -388,6 +384,10 @@
</script>
<style scoped lang="scss">
+:deep(.el-dialog__body) {
+ padding: 10px 39px 43px 39px !important;
+}
+
.container {
display: flex;
flex-direction: column;
@@ -398,68 +398,67 @@
display: flex;
justify-content: space-between;
margin-bottom: 16px;
+ border: 1px solid;
+ border: 1px solid #e8e8e8;
+ border-radius: 4px;
+ background: #fff;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
.itemBoxLeft {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 0;
- padding: 10px;
+ padding: 0; // 移除内边距，让边框贴合
font-size: 14px;
+ }
- .itemCon:nth-last-child(-n + 2) {
- border-bottom: 2px solid #efefef;
+ .itemCon {
+ border-bottom: 1px solid #e8e8e8;
+
+ &:nth-child(2n) {
+ .itemBox {
+ border-right: none;
+ }
+ }
+
+ &:nth-last-child(-n + 2) {
+ border-bottom: none;
}
}
.itemBox {
display: flex;
align-items: center;
- background: #fff;
height: 33px;
- border-top: 2px solid #efefef;
+ padding: 0 10px;
+ border-right: 1px solid #e8e8e8;
+ border-bottom: none; // 由.itemCon控制底部边框
.itemTitle {
- flex: 0 0 150px;
- color: #0b1d38;
- text-align: center;
- background: #f3f6ff;
- height: 33px;
+ width: 202px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ color: #383838;
+ text-align: right;
+ background: #fafafa;
+ height: 100%;
line-height: 33px;
padding-right: 10px;
- border-top: 1px solid #efefef;
+ margin: 0 -10px 0 -10px; // 拉伸背景色
}
.itemContent {
flex: 1;
padding-left: 10px;
-
- .el-input {
- width: 100%;
-
- :deep(.el-input__inner) {
- height: 28px;
- line-height: 28px;
- background: transparent;
- border: none;
- padding: 0 10px;
- color: #747e91;
- }
- }
-
- .itemValue {
- font-size: 14px;
- color: #747e91;
- text-align: left;
- line-height: 33px;
- }
}
}
}
.map-container {
position: relative;
- height: 600px;
+ height: 650px;
width: 100%;
}
.table-overlay {
@@ -470,10 +469,10 @@
z-index: 999;
width: 277px;
overflow: hidden;
- background: rgba(0, 0, 0, 0.4);
- backdrop-filter: blur(5px);
+ background: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(5px);
border-radius: 8px 8px 8px 8px;
- padding: 7px 10px 0 10px;
+ padding: 6px 10px 0 10px;
display: flex;
flex-direction: column;
}
@@ -489,11 +488,22 @@
font-size: 14px;
color: #ffffff;
}
-// 表格样式
+ // 表格样式
:deep(.el-table) {
+ // 清除表格内部横线和竖线
+ &::before,
+ &::after,
+ .el-table__inner-wrapper::before,
+ .el-table__inner-wrapper::after {
+ background-color: transparent !important;
+ display: none !important; // 彻底隐藏伪元素边框
+ }
+ .el-table__header-wrapper th {
+ border: none !important;
+ }
--el-table-bg-color: transparent !important;
--el-table-tr-bg-color: transparent !important;
- // --el-table-header-bg-color: transparent !important;
+
--el-table-row-hover-bg-color: rgba(30, 58, 138, 0.5) !important;
--el-table-current-row-bg-color: rgba(30, 58, 138, 0.7) !important;
color: #fff !important;
@@ -502,10 +512,10 @@
}
// 隔行变色
.even-row {
- background-color: rgba(255,255,255,0.17) !important;
+ background-color: rgba(255, 255, 255, 0.17) !important;
}
.oddNumberRow {
- background-color: rgba(255,255,255,0.08) !important;
+ background-color: rgba(255, 255, 255, 0.08) !important;
}
// 表头样式
@@ -521,6 +531,7 @@
overflow: hidden;
text-overflow: ellipsis;
}
+
}
}
@@ -540,49 +551,51 @@
background-color: var(--el-table-current-row-bg-color) !important;
}
}
-.operationspan {
-cursor: pointer;}
-.operationspan:first-child{
-margin-right: 10px;}
+
+ .operationspan {
+ cursor: pointer;
+ }
+ .operationspan:first-child {
+ margin-right: 10px;
+ }
// 分页
- :deep(.pagination-container) {
+ :deep(.pagination-container) {
background: transparent !important;
}
:deep(.el-pagination) {
- .btn-prev, .btn-next {
- padding: 5px 13px;
-
+ .btn-prev,
+ .btn-next {
+ padding: 5px 13px;
+ }
}
-
-
-}
-:deep(.el-pager li) {
- margin: 0 0.4rem;
- background: rgba(34, 34, 34, 0.9) !important;
- box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
- border-radius: 8px 8px 8px 8px !important;
-
- font-family: Source Han Sans CN, Source Han Sans CN;
-font-weight: 400;
-font-size: 14px;
-color: #EDEDED !important;
-}
-:deep(.el-pager li.is-active) {
- border: 1px solid rgba(255, 255, 255, 0.99) !important;
-}
-:deep(.el-pagination button) {
- background: rgba(34, 34, 34, 0.9) !important;
-color: #EDEDED !important;
- border-radius: 8px 8px 8px 8px !important;
-}
-.pagination-container {
- margin-top: auto;
- padding: 10px 0;
- background: white;
- display: flex;
- justify-content: center;
- height: 20px;
-}
+ :deep(.el-pager li) {
+ margin: 0 0.4rem;
+ background: rgba(34, 34, 34, 0.9) !important;
+ box-shadow: 0px 4px 72px 0px rgba(0, 0, 0, 0.25) !important;
+ border-radius: 8px 8px 8px 8px !important;
+
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 14px;
+ color: #ededed !important;
+ }
+ :deep(.el-pager li.is-active) {
+ border: 1px solid rgba(255, 255, 255, 0.99) !important;
+ }
+ :deep(.el-pagination button) {
+ background: rgba(34, 34, 34, 0.9) !important;
+ color: #ededed !important;
+ border-radius: 8px 8px 8px 8px !important;
+ }
+ .pagination-container {
+ margin-top: auto;
+ padding: 10px 0;
+ background: white;
+ display: flex;
+ justify-content: center;
+ height: 20px;
+ margin: 24px 0 14px 0;
+ }
}
.el-table {
@@ -591,8 +604,16 @@
}
.btnGroups {
position: absolute;
- bottom: 8%;
+ bottom: 49px;
left: 50%;
+ img {
+ width: 125px;
+ height: 45px;
+ cursor: pointer;
+ }
+}
+.btnGroups img:first-child {
+ margin-right: 21px;
}
#spotMap {
height: 100%;
--
Gitblit v1.9.3