feat:样式调整

张含笑

2025-08-27 ab65906ce525c07d6b614e63e573155d91078708

feat:样式调整

 src/assets/images/home/territory/cancelbtn.png

 src/assets/images/home/territory/savebtn.png

 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
@@ -70,10 +70,6 @@
                  <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 {
@@ -473,7 +472,7 @@
 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;
}
@@ -491,9 +490,20 @@
  }
// 表格样式
  :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;
@@ -521,6 +531,7 @@
          overflow: hidden;
          text-overflow: ellipsis;
        }
  
      }
    }

@@ -540,21 +551,22 @@
      background-color: var(--el-table-current-row-bg-color) !important;
    }
  }

.operationspan {
cursor: pointer;}
    cursor: pointer;
  }
.operationspan:first-child{
margin-right: 10px;}
    margin-right: 10px;
  }
  // 分页
    :deep(.pagination-container) {
    background: transparent !important;
  }
  :deep(.el-pagination) {
  .btn-prev, .btn-next {
    .btn-prev,
    .btn-next {
    padding: 5px 13px;

  }
  
 
}
:deep(.el-pager li) {
  margin: 0 0.4rem;
@@ -565,14 +577,14 @@
  font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #EDEDED !important;
    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;
    color: #ededed !important;
  border-radius: 8px 8px 8px 8px !important;
}
.pagination-container {
@@ -582,6 +594,7 @@
  display: flex;
  justify-content: center;
  height: 20px;
    margin: 24px 0  14px 0;
}
}

@@ -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%;