el-admin 后台UI 重新布局修改，后面还有登入页面的UI修改

先上一下效果图吧！我是纯色的,后面你不喜欢这颜色可以在代码里面更改,代码我都标有注释的。

 布局是改成了这样  你要是不喜欢颜色  可以自己代码改就行了  下面我直接放代码，和标注修改的地方，各位开搞吧！！！  

    各位注意！！！！！     如果你的布局是没有动过的   完全就可以复制粘贴我得代码  却少依赖就下依赖就可以了    基本都是公共代码

 Navbar.vue       代码里面有需要注意的地方  我也标了注释了  大家可以看一下

 

<template>
  <!--  头像代码及上方显示条  -->
  <div class="navbar">
    <div class="navLeft">
    <!--    小地球 不想用这个svg，可以去阿里云图标库下载  -->
    <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar" />

    <!--    首页变体-->
    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
    </div>

<!--    中间标题-->
    <div class="navTitle">
      <img data-v-6494804b="" src="static/img/logo.381d6a3e.png" class="sidebar-logo"><h1 data-v-6494804b="" class="sidebar-title">测 试 - 天 才 后 台 管 理 系 统</h1>
    </div>

    <div class="right-menu">


      <template v-if="device !== 'mobile'">
<!--        <search id="header-search" class="right-menu-item" />-->

<!--        <el-tooltip content="全屏缩放" effect="dark" placement="bottom">-->
<!--          <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
<!--        </el-tooltip>-->

<!--        <el-tooltip content="布局设置" effect="dark" placement="bottom">-->
<!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
<!--        </el-tooltip>-->
      </template>

<!--      头像-->
      <div style="display: flex;">
        <div style="padding: 0px 10px 0px 0px;display: flex;margin-top: 22px;">
          <p class="marginR" style="font-family: 仿宋;font-size: 12px;font-weight:bold;font-style:italic;color: #ffffff ">{
   
   {this.city + ' |'}}</p>
          <svg-icon style="margin-top: 30px;" slot="reference" icon-class="qing" v-if="wea_svg === 'qing'" />
          <svg-icon style="margin-top: 30px;" slot="reference" icon-class="yu" v-if="wea_svg === 'yu'" />
          <svg-icon style="margin-top: 30px;" slot="reference" icon-class="yin" v-if="wea_svg === 'yin'" />
          <svg-icon style="margin-top: 30px;" slot="reference" icon-class="xue" v-if="wea_svg === 'xue'" />
          <p class="marginR" style="font-family: 仿宋;font-size: 12px;font-weight:bold;font-style:italic;color: #ffffff;margin-left: 5px">{
   
   {this.wea + ' |'}}</p>
          <p class="marginR" style="font-family: 仿宋;font-size: 12px;font-weight:bold;font-style:italic;color: #ffffff;margin-left: 5px">{
   
   {this.tem_night + ' ~'}}</p>
          <p class="marginR" style="font-family: 仿宋;font-size: 12px;font-weight:bold;font-style:italic;color: #ffffff;margin-left: 5px">{
   
   {this.tem_day + ' |'}}</p>
          <p class="marginR" style="font-family: 仿宋;font-size: 12px;font-weight:bold;font-style:italic;color: #ffffff ">{
   
   {this.nowDate}}</p>
        </div>
      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click">
        <div class="avatar-wrapper">
          <img
            :src="user.avatarName ? '/api/sys/users/avatar?Authorization=' + getToken() : Avatar"
            class="user-avatar">
          <span
            class="user-name">{
   
   { this.$store.getters.user.nickName }}
            <i class="el-icon-caret-bottom" />
          </span>
        </div>
        <el-dropdown-menu slot="dropdown">
<!--          <span style="display: block" @click="show = true">-->
<!--            <el-dropdown-item> 布局设置 </el-dropdown-item>-->
<!--          </span>-->
          <router-link to="/user/center">
            <el-dropdown-item> 个人中心 </el-dropdown-item>
          </router-link>
          <span style="display: block" @click="open">
            <el-dropdown-item divided> 退出登录 </el-dropdown-item>
          </span>
        </el-dropdown-menu>
      </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import Avatar from '@/assets/images/avatar.png'
import { getToken } from '@/utils/auth'

const axios = require('axios')   // 各位npm一下axios的依赖
const defaultSettings = require('../../settings.js')

export default {
  components: {
    Breadcrumb,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search
  },
  data() {
    return {
      wea: '',
      tem_night: '',
      tem_day: '',
      weas: '',
      wea_svg: '',
      nowtime: '',
      nowDate: '',
      wea_img: '',
      city: '',
      Avatar: Avatar,
      dialogVisible: false,
      title: defaultSettings.title
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'device', 'user', 'baseApi']),
    show: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    }
  },
  mounted() {
    this.crrentTime()
    this.getWeather()
  },
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate)
    }
  },
  methods: {
    getToken,
    getWeather() { // 这个是请求天气的我这是免费的接口   appid  和  appsecret 大家可以去  https://www.tianqiapi.com/index/doc    网站注册一个账号里面就有   cityid 的参数 是城市代码
      axios.get('https://www.tianqiapi.com/free/day?appid=15888259&appsecret=cbP86SWz&cityid=101060101 '
      ).then((response) => {
        console.log(response) // 查看接口返回数据      101060102
        this.wea = response.data.wea // 天气
        this.tem_night = response.data.tem_night // 最低气温
        this.tem_day = response.data.tem_day // 最高气温
        this.wea_svg = response.data.wea_img // 天气图片
        this.city = response.data.city // 城市
        console.log(this.wea_svg)
      }, function(response) {
        console.log(response, '错误信息')
      })
    },
    crrentTime() {
      setInterval(this.formatDate, 500)
    },
    formatDate() {
      let date = new Date()
      let year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      let week = date.getDay() // 星期
      let weekArr = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有以为，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowtime = '${hour} ： ${minute} : ${second}'
      this.nowDate = ' ' + weekArr[week] + ' - ' + year + '年 ' + month + '月 ' + day + '日' + ' - ' + hour + ':' + minute + ':' + second
    },

    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    open() {
      this.$confirm(`您确定要退出${this.title}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
      })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.marginR{
  margin-right: 5px;
}
.sidebar-logo {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-top: 13px;
}
.sidebar-title {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  line-height: 50px;
  font-size: 20px;
  margin-top: 6px;
  font-family: 仿宋;
  vertical-align: middle;
}
.navbar {
  display: flex;
  height: 70px;
  overflow: hidden;
  position: relative;
  background: #8C9695;   //顶部背景颜色
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  border-radius: 30px !important;
  display: flex;
  justify-content: flex-start;
  algin-items:center;
  .navLeft{
    width: 35%;
    height: 100%;
  }
  .navTitle{
    flex: 1;
    height:100%;
    display: flex;
    justify-content: center;
  }
  .hamburger-container {
    line-height: 63px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    display: flex;
    justify-content: flex-end;
    padding-right: 50px;
    height: 100%;
    width: 39%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fafbff;
      vertical-align: text-bottom;
      line-height: 65px;
      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;
        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 10px;

      .avatar-wrapper {
        margin-top: 14px;
        position: relative;
        display: flex;
        .user-name {
          line-height: 40px;
          margin-left: 5px;
          font-size: 14px;
        }
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          font-size: 12px;
        }
      }
    }
  }
}
</style>

tagsview/appMain.vue

.fixed-header + .app-main {
  height: 98%;
  width: 97%;
  margin-left: 24px;
  border-radius: 30px !important;
}

 mixin/index.vue

 

.fixed-header {

  position: fixed;
  top: 7px;
  right: 23px;
  z-index: 9;
  width: calc(98%);
  transition: width 0.28s;
  border-radius: 30px !important;
}

 sidebar/index.vue

 

</script>

<style  lang="scss" scoped>
::v-deep.scrollbar-wrapper,.el-scrollbar{
  overflow-y: hidden !important;
}
::v-deep.el-scrollbar__view{
 overflow-y: hidden !important;
}
//::v-deep.el-menu{
//  padding:8px !important;
//  background: #fff !important;
//  border-radius: 20px !important;
//}
.page-scroll{
  height: 100%;
  overflow-y: hidden !important;
}

</style>

Hamburger/index.vue   // 这个就是 左上角的那个小地球

 

 

<template>
  <div style="padding: 4px 20px" @click="toggleClick">
<!--    <svg-->
<!--      :class="{ 'is-active': isActive }"-->
<!--      class="hamburger"-->
<!--      viewBox="0 0 1024 1024"-->
<!--      icon-class="jingling"-->
<!--      width="64"-->
<!--      height="64">-->
<!--      <path-->
<!--        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />-->
<!--    </svg>-->
    <svg-icon slot="reference" icon-class="diqiu" class="hamburger" />
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
  /*display: inline-block;*/
  /*vertical-align: middle;*/
  /*width: 20px;*/
  /*height: 20px;*/
}

.hamburger.is-active {
  /*transform: rotate(180deg);*/
}
</style>

breadcrumb/index.vue

 

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 68px;
  margin-left: 8px;
  .no-redirect {
    color: #ffffff;
    cursor: text;
  }
}
</style>

好啦  下面我们修改的就都是  scss  样式了

admin.scss

 

#el-main-footer {
  background: none repeat scroll 0 0 #8C9695;
  border-top: 1px solid #365a72;
  overflow: hidden;
  padding: 10px 6px 0 6px;
  height: 33px;
  font-size: 0.7rem !important;
  color: #ffffff;
  letter-spacing: 0.8px;
  font-family: Arial, sans-serif !important;
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 98%;
  top: 96.5%;
  right: 24px;
  border-radius: 30px !important;
  /* margin-top: 83px; */
  display: flex;
  justify-content: center;
}

 element-ui.scss

.el-breadcrumb__inner a {
  font-weight: 400 !important;
  color: #ffffff !important;
}

 index.scss

 

//main-container全局样式
.app-container {
  padding: 20px 20px 45px 20px;
  background-color: #E7EEEA;  //中间背景颜色
  margin-top: 85px;
  border-radius: 30px !important;
  height: 830px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: left;
}
.app-container::-webkit-scrollbar{
  display: none;
}

 sidebar.scss

  .sidebar-container {
    transition: width 0.28s;
    width: 210px;
    background-color: $menuBg;
    height: 835px;
    margin-left: 10px;
    position: fixed;
    font-size: 0;
    top: 84px;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    border-radius: 30px !important;

    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: scroll;
      text-align: left;
    }

 

    // menu hover
    .submenu-title-noDropdown,
    .el-submenu__title {
      &:hover {
        background-color: $menuHover !important;  //鼠标移动颜色
      }
    }

    .is-active>.el-submenu__title {
      color: $subMenuActiveText !important;
    }

    & .nest-menu .el-submenu>.el-submenu__title,
    & .el-submenu .el-menu-item {
      min-width: $sideBarWidth !important;
      background-color: $subMenuBg !important;  //内部颜色

      &:hover {
        background-color: $subMenuHover !important;  //内部鼠标移动颜色
      }
    }
  }

 variables.scss

// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;

// sidebar
$menuText: #ffffff;
$menuActiveText: #4f4f5e;
$subMenuActiveText: #4f4f5e; // https://github.com/ElemeFE/element/issues/12951

$menuBg: #94a1a1;
$menuHover: #94a1a1;

$subMenuBg: #94a1a1;
$subMenuHover: #94a1a1;

$sideBarWidth: 205px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;                       //侧边栏字体带选择颜色
  menuActiveText: $menuActiveText;           //侧边栏内部选择字体颜色
  subMenuActiveText: $subMenuActiveText;     //侧边栏外部选择字体颜色
  menuBg: $menuBg;                           //左侧 侧边栏颜色
  menuHover: $menuHover;                     //侧边栏鼠标移动 颜色
  subMenuBg: $subMenuBg;                     //侧边栏 内部颜色
  subMenuHover: $subMenuHover;               //侧边栏 内部鼠标移动颜色
  sideBarWidth: $sideBarWidth;
}

 

 阿里云矢量图标库 ： iconfont-阿里巴巴矢量图标库

 已知的一个小bug   缩放的时候会有点问题，你们自己改一下   这两个的高度 根据浏览器高度适配一下

 我今天不想动 脑子了   啊啊啊啊啊啊啊   

同时感谢一下  她说稻城很美的博客_CSDN博客-领域博主

前端我得技术还是一般般  哈哈哈哈哈   又学到了一点

现在就先这样  后面登入界面也会修改一下    有一丢丢的难看

div  滚动隐藏滚动条

1. overflow-x: hidden;
2. overflow-y: scroll;
3. text-align: left;