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