center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 样式调整

Browse Source
This commit is contained in:
fit2cloud-chenyw 2021-03-07 21:29:41 +08:00
parent c1158932fa
commit 7965552518
11 changed files with 54 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/business/LayoutContent.vue
View File

@ -11,7 +11,7 @@ export default {
</script>
<style lang="scss">
@import "~@/styles/element-variables";
@import "~@/styles/variables";
.content-container {
transition: 0.3s;

2
frontend/src/components/business/complex-table/index.vue
View File

@ -64,7 +64,7 @@ export default {
<style lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/element-variables.scss";
@import "~@/styles/variables.scss";
.complex-table {
.complex-table__header {
@include flex-row(flex-start, center);

2
frontend/src/layout/components/Sidebar/index.vue
View File

@ -6,7 +6,7 @@
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"

4
frontend/src/main.js
View File

@ -4,8 +4,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import '@/styles/index.scss' // global css
import ElementUI from 'element-ui'
import Fit2CloudUI from 'fit2cloud-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './styles/element-variables.scss'
// import 'element-ui/lib/theme-chalk/index.css'
// import './styles/variables.scss'
import i18n from './lang' // internationalization
import App from './App'

4
frontend/src/metersphere/common/css/main.css
View File

@ -10,11 +10,11 @@
width: 100%;
}
body {
/* body {
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
font-size: 14px;
margin: 0;
}
} */
/* 解决 document.body.clientHeight 为0 */
html,body {

2
frontend/src/store/modules/settings.js
View File

@ -1,5 +1,5 @@
import defaultSettings from '@/settings'
import variables from '@/styles/element-variables.scss'
import variables from '@/styles/variables.scss'
// const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
const { showSettings, sidebarLogo } = defaultSettings
const state = {

31
frontend/src/styles/element-variables.scss
View File

@ -1,31 +0,0 @@
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
// $--color-text-regular: #1f2d3d;
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
$--table-border: 1px solid #dfe6ec;
/* icon font path, required */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
@import "~fit2cloud-ui/src/styles/common/variables";
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
}

5
frontend/src/styles/sidebar.scss
View File

@ -25,6 +25,7 @@
left: 0;
z-index: 1001;
overflow: hidden;
border-right: 1px solid rgba(0, 0, 0, 0.12);
// reset element-ui css
.horizontal-collapse-transition {
@ -67,6 +68,10 @@
border: none;
height: 100%;
width: 100% !important;
.is-active {
background-color: $menuHover;
}
}
// menu hover

12
frontend/src/styles/topbar.scss
View File

@ -1,7 +1,8 @@
.top-nav {
// margin-left: $sideBarWidth;
width: 100%;
background-color: #304156;
// background-color: #304156;
background-color: $--color-primary;
position: fixed;
top: 0;
left: 0;
@ -13,18 +14,21 @@
line-height: 56px;
font-size: 24px;
font-weight: bold;
color: rgb(191, 203, 217);
// color: rgb(191, 203, 217);
color: rgba(255,255,255,0.87);
float: left;
}
.el-menu {
float: left;
border: none!important;
background-color: #304156;
// background-color: #304156;
background-color: $--color-primary;
.nav-item {
display: inline-block;
.el-menu-item {
color: rgb(191, 203, 217);
// color: rgb(191, 203, 217);
color: rgba(255,255,255,0.87);
&:hover {
background-color: $subMenuHover !important;
}

34
frontend/src/styles/variables.scss
View File

@ -1,10 +1,39 @@
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #ffba00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
// $--color-text-regular: #1f2d3d;
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
$--table-border: 1px solid #dfe6ec;
/* icon font path, required */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
@import "~fit2cloud-ui/src/styles/common/variables";
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
// $menuBg:#304156;
$menuBg:#ffffff;
// $menuHover:#263445;
$menuHover: rgba(158, 158, 158, 0.2);
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
@ -16,6 +45,7 @@ $contentHeight: calc(100vh - 56px);
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
menuText: $menuText;
menuActiveText: $menuActiveText;
subMenuActiveText: $subMenuActiveText;

2
frontend/src/views/login/index.vue
View File

@ -113,7 +113,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "../../styles/element-variables";
@import "../../styles/variables";
@mixin login-center {
display: flex;