整体样式修改

gaoluyang

3 天以前 4b4530087295f9b53dcff84888b7a08c07640846

整体样式修改

 src/assets/styles/index.scss

@@ -124,9 +124,33 @@
//main-container全局样式
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  background-color: #F7F7F7;
  min-height: calc(100vh - 84px);
}
.search-form {
  background: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.table-toolbar {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* å“åº”式布局 */
@media screen and (min-width: 768px) {
  .search-form :deep(.el-form-item) {
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 18%;
  }
}

.components-container {
  margin: 30px 50px;

 src/components/Table/ETable.vue

@@ -6,6 +6,7 @@
      :border="border"
      :show-selection="showSelection"
      :max-height="maxHeight"
      :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @row-dblclick="handleRowDblClick"
@@ -20,7 +21,6 @@
          v-bind="col"
          :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
          :formatter="(row, column, cellValue) => cellValue == null || cellValue === '' ? '--' : cellValue"
          align="center"
        >
          <template v-if="col.slot" #default>
            <slot></slot>

 src/layout/components/TagsView/index.vue

@@ -259,7 +259,7 @@

<style lang="scss" scoped>
.tags-view-container {
  height: 30px;
  height: 34px;
  width: 100%;
  position: fixed; /* å°†å¤´éƒ¨å›ºå®š */
  top: 50px; /* åœ¨é¡¶éƒ¨å›ºå®š */
@@ -292,7 +292,7 @@

      &.active {
        border-radius: 10px 10px 0px 0px;
        background-color: #F2F2F4 !important;
        background-color: #F7F7F7 !important;
        color: #165DFF;
      }
    }

 src/views/basicInformation/index.vue

@@ -68,7 +68,7 @@
          @delete="handleDeleteSuccess"
          :show-selection="true"
          :border="true"
          :maxHeight="440"
          :maxHeight="480"
        />
      </div>
      <pagination
@@ -509,28 +509,6 @@
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  box-sizing: border-box;
  min-height: calc(100vh - 84px);
}
.search-form {
  background: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.el-form-item__label{
  padding: 0 5px 0 0 !important;
  font-weight: 500;
}
.search-form :deep(.el-form-item) {
  margin-bottom: 16px;
  width: 100%;
}

/* å“åº”式布局 */
@media screen and (min-width: 768px) {
  .search-form :deep(.el-form-item) {
@@ -541,9 +519,6 @@
  .search-form :deep(.el-form-item) {
    width: 16%;
  }
}
.info-tabs {
  margin-bottom: 20px;
}
.table-toolbar {
  margin-bottom: 20px;

 src/views/salesOutbound/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,111 @@
<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
        <el-input
            v-model="queryParams.searchText"
            placeholder="请输入关键词"
            clearable
            :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="供应商名称">
        <el-input
            v-model="queryParams.supplierName"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="统一人识别号">
        <el-input
            v-model="queryParams.identifyNumber"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="经营地址">
        <el-input
            v-model="queryParams.address"
            placeholder="请输入"
            clearable
            :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <!-- æ ‡ç­¾é¡µ -->
      <el-tabs v-model="activeTab" class="info-tabs">
        <el-tab-pane
            v-for="tab in tabs"
            :key="tab.name"
            :label="tab.label"
            :name="tab.name"
        />
      </el-tabs>
      <!-- æ“ä½œæŒ‰é’®åŒº -->
      <el-space>
        <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
        <el-button type="info" :icon="Download" @click="handleExport">导出</el-button>
      </el-space>
    </el-card>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
import {Delete, Download, Plus} from "@element-plus/icons-vue";

const activeTab = ref("out");
// æ ‡ç­¾é¡µæ•°æ®
const tabs = reactive([
  { name: "out", label: "销售出库" },
]);
const tableLoading = ref(false);
// æŸ¥è¯¢å‚æ•°
const queryParams = reactive({
  searchText: "",
  supplierName: "",
  identifyNumber: "",
  address: "",
})

// ç‚¹å‡»æŸ¥è¯¢
const handleQuery = () => {
  tableLoading.value = true;
  setTimeout(() => {
    tableLoading.value = false;
  }, 500);
}
// é‡ç½®æŸ¥è¯¢
const resetQuery = () => {
  Object.keys(queryParams).forEach((key) => {
    if (key !== "pageNum" && key !== "pageSize") {
      queryParams[key] = "";
    }
  });
  handleQuery();
};
// æ–°å¢žå‡ºåº“
const handleAdd = () => {

};
// åˆ é™¤å‡ºåº“
const handleDelete = () => {

};
// å¯¼å‡ºå‡ºåº“
const handleExport = () => {

};
</script>

<style scoped>

</style>

 src/views/warehouseManagement/index.vue

@@ -53,12 +53,12 @@
        />
      </el-tabs>
      <!-- æ“ä½œæŒ‰é’®åŒº -->
      <el-row :gutter="24" class="table-toolbar">
      <el-space>
        <el-button type="primary" :icon="Plus" >新建</el-button>
        <el-button type="danger" :icon="Delete">删除</el-button>
        <el-button type="info" plain :icon="Download">导出</el-button>
        <el-button type="success" plain :icon="Refresh" v-if="activeTab=== 'officialInventory'" @click="mergeRows">合并</el-button>
      </el-row>
      </el-space>
      <div>
        <el-table :data="tableData" border @selection-change="selectionChange">
          <el-table-column type="selection" width="55" align="center" />
@@ -77,7 +77,6 @@
          <el-table-column fixed="right" label="操作" min-width="90" align="center">
            <template #default>
              <el-button link type="primary" size="small">编辑</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
@@ -284,58 +283,7 @@
</script>

<style scoped>
.search-form {
  background-color: #fff;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
.search-form :deep(.el-form-item) {
  margin-bottom: 16px;
  width: 100%;
}

/* å“åº”式布局 */
@media screen and (min-width: 768px) {
  .search-form :deep(.el-form-item) {
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .search-form :deep(.el-form-item) {
    width: 18%;
  }
}

.table-toolbar {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

:deep(.el-table) {
  margin-bottom: 20px;
  overflow-x: auto;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
}

/* å“åº”式样式 */
@media screen and (max-width: 768px) {
  :deep(.el-table) {
    width: 100%;
    overflow-x: auto;
  }
}
/* è¡¨æ ¼å·¥å…·æ  */
.table-toolbar, .table-toolbar > * {
  margin: 0 0 0 0 !important;
}
.table-toolbar{
  margin-bottom: 20px !important;
  margin: 20px 0;
}
</style>