style: 页头/侧边栏/页面布局 样式调整

songshankun

2023-10-17 0905d4eaf3420f47db1a19c49413a157c65474f8

style: 页头/侧边栏/页面布局 样式调整

 src/assets/style/index.scss

@@ -183,16 +183,18 @@

.rightContent {
  height: 100%;
  padding: 10px;
  padding: 12px 20px 10px 20px;
  background: #e6ecf2;
  .top {
    margin-bottom: 20px;
    height: 60px;
    margin-bottom: 10px;
    height: 80px;
    background: #fff;
    border-radius: 8px;
    border-radius: 12px;
    display: flex;
    align-items: center;
  }
  .list-view {
    height: calc(100% - 120px);
    height: calc(100% - 92px);
    background: #fff;
    border-radius: 12px;
    .table {

 src/components/layout/components/AppMain.vue

@@ -24,7 +24,6 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.app-main {
  margin-left: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 1;

 src/components/layout/components/appHeader/index.vue

@@ -37,15 +37,18 @@
<style lang="scss" scoped>
.sales-lead {
  display: flex;
  height: 55px;
  line-height: 55px;
  background-color: #fff;
  margin-bottom: 10px;
  margin-left: -10px;
  height: 50px;
  line-height: 50px;
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: transparent;
  border: 1px solid #ccc;
  align-items: center;
  .header-title {
    margin-left: 16px;
    font-size: 16px;
    color: #475059;
    font-size: 18px;
    font-weight: 700;
    color: #171718;
  }
  .header-user-info {
    margin-left: auto;

 src/components/layout/components/appsidebar/index.scss

@@ -3,10 +3,11 @@
  // height: 100%;
  background-color: #314255;
  .box {
    width: 200px;
    width: 187px;
    .logo-view {
      margin: 40px 20px 10px;
    }

    .el-menu {
      border-right: solid 0px #e6e6e6;
    }
@@ -16,12 +17,37 @@
    .icon {
      color: #bfcbd9;
    }
    // .el-submenu__title:hover,
    // .el-menu-item:focus,
    // .el-menu-item:hover {
    //   min-width: 180px;
    //   color: #fff;
    //   background-color: #2a78fb !important;
    // }
    .el-submenu__title:hover,
    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: #011527 !important;
    }

    ::v-deep{
      .el-menu .el-submenu .el-submenu__title:hover{
        background-color: #011527 !important;
      }
    }

    .el-submenu .el-menu-item {
      width: 166px;
      min-width: 166px;
      height: 38px;
      display: flex;
      align-items: center;
      margin-left: 11px;
      border-radius: 6px;

      &.is-active {
        color: #fff !important;
        flex-grow: 0;
        fill: #fff !important;
        background: #2a78fb !important;
        i {
          color: #fff;
        }

      }
    }
  }
}

 vue.config.js

@@ -30,13 +30,13 @@
    "crypto-js",
    "sockjs-client"
  ],
  configureWebpack: (config) => {
  configureWebpack: () => {
    const configNew = {}
    if (process.env.NODE_ENV === "production") {
      configNew.externals = externals
      configNew.plugins = []
    } else if (process.env.NODE_ENV === "development") {
      console.log("development", config)
      // console.log("development", config)
    }
    return configNew
  },