孙向锦 / SunvoteEducation

Browse Code »

Commit 55e5cab4369356b0ad731913556c87807d306ff8

Authored by jack 2020-02-20 14:41:51 +0800

1 parent 74b6a00d

补充漏传文件

Inline Side-by-side

Showing 6 changed files with 430 additions and 0 deletions

src/styles/element-ui.scss 0 → 100644

View file @55e5cab

	1	+// cover some element-ui styles
	2	+
	3	+.el-breadcrumb__inner,
	4	+.el-breadcrumb__inner a {
	5	+ font-weight: 400 !important;
	6	+}
	7	+
	8	+.el-upload {
	9	+ input[type="file"] {
	10	+ display: none !important;
	11	+ }
	12	+}
	13	+
	14	+.el-upload__input {
	15	+ display: none;
	16	+}
	17	+
	18	+
	19	+// to fixed https://github.com/ElemeFE/element/issues/2461
	20	+.el-dialog {
	21	+ transform: none;
	22	+ left: 0;
	23	+ position: relative;
	24	+ margin: 0 auto;
	25	+}
	26	+
	27	+// refine element ui upload
	28	+.upload-container {
	29	+ .el-upload {
	30	+ width: 100%;
	31	+
	32	+ .el-upload-dragger {
	33	+ width: 100%;
	34	+ height: 200px;
	35	+ }
	36	+ }
	37	+}
	38	+
	39	+// dropdown
	40	+.el-dropdown-menu {
	41	+ a {
	42	+ display: block
	43	+ }
	44	+}
	45	+
	46	+// to fix el-date-picker css style
	47	+.el-range-separator {
	48	+ box-sizing: content-box;
	49	+}
...	...

src/styles/index.scss 0 → 100644

View file @55e5cab

	1	+@import './variables.scss';
	2	+@import './mixin.scss';
	3	+@import './transition.scss';
	4	+@import './element-ui.scss';
	5	+@import './sidebar.scss';
	6	+
	7	+body {
	8	+ height: 100%;
	9	+ -moz-osx-font-smoothing: grayscale;
	10	+ -webkit-font-smoothing: antialiased;
	11	+ text-rendering: optimizeLegibility;
	12	+ font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
	13	+}
	14	+
	15	+label {
	16	+ font-weight: 700;
	17	+}
	18	+
	19	+html {
	20	+ height: 100%;
	21	+ box-sizing: border-box;
	22	+}
	23	+
	24	+#app {
	25	+ height: 100%;
	26	+}
	27	+
	28	+*,
	29	+*:before,
	30	+*:after {
	31	+ box-sizing: inherit;
	32	+}
	33	+
	34	+a:focus,
	35	+a:active {
	36	+ outline: none;
	37	+}
	38	+
	39	+a,
	40	+a:focus,
	41	+a:hover {
	42	+ cursor: pointer;
	43	+ color: inherit;
	44	+ text-decoration: none;
	45	+}
	46	+
	47	+div:focus {
	48	+ outline: none;
	49	+}
	50	+
	51	+.clearfix {
	52	+ &:after {
	53	+ visibility: hidden;
	54	+ display: block;
	55	+ font-size: 0;
	56	+ content: " ";
	57	+ clear: both;
	58	+ height: 0;
	59	+ }
	60	+}
	61	+
	62	+// main-container global css
	63	+.app-container {
	64	+ padding: 20px;
	65	+}
...	...

src/styles/mixin.scss 0 → 100644

View file @55e5cab

	1	+@mixin clearfix {
	2	+ &:after {
	3	+ content: "";
	4	+ display: table;
	5	+ clear: both;
	6	+ }
	7	+}
	8	+
	9	+@mixin scrollBar {
	10	+ &::-webkit-scrollbar-track-piece {
	11	+ background: #d3dce6;
	12	+ }
	13	+
	14	+ &::-webkit-scrollbar {
	15	+ width: 6px;
	16	+ }
	17	+
	18	+ &::-webkit-scrollbar-thumb {
	19	+ background: #99a9bf;
	20	+ border-radius: 20px;
	21	+ }
	22	+}
	23	+
	24	+@mixin relative {
	25	+ position: relative;
	26	+ width: 100%;
	27	+ height: 100%;
	28	+}
...	...

src/styles/sidebar.scss 0 → 100644

View file @55e5cab

	1	+#app {
	2	+ .main-container {
	3	+ min-height: 100%;
	4	+ transition: margin-left 0.28s;
	5	+ margin-left: $sideBarWidth;
	6	+ position: relative;
	7	+ }
	8	+
	9	+ .sidebar-container {
	10	+ transition: width 0.28s;
	11	+ width: $sideBarWidth !important;
	12	+ background-color: $menuBg;
	13	+ height: 100%;
	14	+ position: fixed;
	15	+ font-size: 0px;
	16	+ top: 0;
	17	+ bottom: 0;
	18	+ left: 0;
	19	+ z-index: 1001;
	20	+ overflow: hidden;
	21	+
	22	+ // reset element-ui css
	23	+ .horizontal-collapse-transition {
	24	+ transition: 0s width ease-in-out, 0s padding-left ease-in-out,
	25	+ 0s padding-right ease-in-out;
	26	+ }
	27	+
	28	+ .scrollbar-wrapper {
	29	+ overflow-x: hidden !important;
	30	+ }
	31	+
	32	+ .el-scrollbar__bar.is-vertical {
	33	+ right: 0px;
	34	+ }
	35	+
	36	+ .el-scrollbar {
	37	+ height: 100%;
	38	+ }
	39	+
	40	+ &.has-logo {
	41	+ .el-scrollbar {
	42	+ height: calc(100% - 50px);
	43	+ }
	44	+ }
	45	+
	46	+ .is-horizontal {
	47	+ display: none;
	48	+ }
	49	+
	50	+ a {
	51	+ display: inline-block;
	52	+ width: 100%;
	53	+ overflow: hidden;
	54	+ }
	55	+
	56	+ .svg-icon {
	57	+ // margin-right: 16px;
	58	+ font-size: 18px;
	59	+ }
	60	+
	61	+ .el-menu {
	62	+ border: none;
	63	+ height: 100%;
	64	+ width: 100% !important;
	65	+ }
	66	+
	67	+ // menu hover
	68	+ .submenu-title-noDropdown,
	69	+ .el-submenu__title {
	70	+ &:hover {
	71	+ background-color: $menuHover !important;
	72	+ }
	73	+ }
	74	+
	75	+ .is-active > .el-submenu__title {
	76	+ color: $subMenuActiveText !important;
	77	+ }
	78	+
	79	+ & .nest-menu .el-submenu > .el-submenu__title,
	80	+ & .el-submenu .el-menu-item {
	81	+ min-width: $sideBarWidth !important;
	82	+ background-color: $subMenuBg !important;
	83	+
	84	+ &:hover {
	85	+ background-color: $subMenuHover !important;
	86	+ }
	87	+ }
	88	+ }
	89	+
	90	+ .hideSidebar {
	91	+ .sidebar-container {
	92	+ width: 54px !important;
	93	+ }
	94	+
	95	+ .main-container {
	96	+ margin-left: 54px;
	97	+ }
	98	+
	99	+ .submenu-title-noDropdown {
	100	+ padding: 0 !important;
	101	+ position: relative;
	102	+
	103	+ .el-tooltip {
	104	+ padding: 0 !important;
	105	+
	106	+ [class^="el-icon-"] {
	107	+ margin-left: 20px;
	108	+ }
	109	+ .svg-icon {
	110	+ margin-left: 20px;
	111	+ }
	112	+ }
	113	+ }
	114	+
	115	+ .el-submenu {
	116	+ overflow: hidden;
	117	+
	118	+ & > .el-submenu__title {
	119	+ padding: 0 !important;
	120	+
	121	+ [class^="el-icon-"] {
	122	+ margin-left: 20px;
	123	+ }
	124	+ .svg-icon {
	125	+ margin-left: 20px;
	126	+ }
	127	+
	128	+ .el-submenu__icon-arrow {
	129	+ display: none;
	130	+ }
	131	+ }
	132	+ }
	133	+
	134	+ .el-menu--collapse {
	135	+ .el-submenu {
	136	+ & > .el-submenu__title {
	137	+ & > span {
	138	+ height: 0;
	139	+ width: 0;
	140	+ overflow: hidden;
	141	+ visibility: hidden;
	142	+ display: inline-block;
	143	+ }
	144	+ }
	145	+ }
	146	+ }
	147	+ }
	148	+
	149	+ .el-menu--collapse .el-menu .el-submenu {
	150	+ min-width: $sideBarWidth !important;
	151	+ }
	152	+
	153	+ // mobile responsive
	154	+ .mobile {
	155	+ .main-container {
	156	+ margin-left: 0px;
	157	+ }
	158	+
	159	+ .sidebar-container {
	160	+ transition: transform 0.28s;
	161	+ width: $sideBarWidth !important;
	162	+ }
	163	+
	164	+ &.hideSidebar {
	165	+ .sidebar-container {
	166	+ pointer-events: none;
	167	+ transition-duration: 0.3s;
	168	+ transform: translate3d(-$sideBarWidth, 0, 0);
	169	+ }
	170	+ }
	171	+ }
	172	+
	173	+ .withoutAnimation {
	174	+ .main-container,
	175	+ .sidebar-container {
	176	+ transition: none;
	177	+ }
	178	+ }
	179	+}
	180	+
	181	+// when menu collapsed
	182	+.el-menu--vertical {
	183	+ & > .el-menu {
	184	+ .svg-icon {
	185	+ margin-right: 16px;
	186	+ }
	187	+ }
	188	+
	189	+ .nest-menu .el-submenu > .el-submenu__title,
	190	+ .el-menu-item {
	191	+ &:hover {
	192	+ // you can use $subMenuHover
	193	+ background-color: $menuHover !important;
	194	+ }
	195	+ }
	196	+
	197	+ // the scroll bar appears when the subMenu is too long
	198	+ > .el-menu--popup {
	199	+ max-height: 100vh;
	200	+ overflow-y: auto;
	201	+
	202	+ &::-webkit-scrollbar-track-piece {
	203	+ background: #d3dce6;
	204	+ }
	205	+
	206	+ &::-webkit-scrollbar {
	207	+ width: 6px;
	208	+ }
	209	+
	210	+ &::-webkit-scrollbar-thumb {
	211	+ background: #99a9bf;
	212	+ border-radius: 20px;
	213	+ }
	214	+ }
	215	+}
...	...

src/styles/transition.scss 0 → 100644

View file @55e5cab

	1	+// global transition css
	2	+
	3	+/* fade */
	4	+.fade-enter-active,
	5	+.fade-leave-active {
	6	+ transition: opacity 0.28s;
	7	+}
	8	+
	9	+.fade-enter,
	10	+.fade-leave-active {
	11	+ opacity: 0;
	12	+}
	13	+
	14	+/* fade-transform */
	15	+.fade-transform-leave-active,
	16	+.fade-transform-enter-active {
	17	+ transition: all .5s;
	18	+}
	19	+
	20	+.fade-transform-enter {
	21	+ opacity: 0;
	22	+ transform: translateX(-30px);
	23	+}
	24	+
	25	+.fade-transform-leave-to {
	26	+ opacity: 0;
	27	+ transform: translateX(30px);
	28	+}
	29	+
	30	+/* breadcrumb transition */
	31	+.breadcrumb-enter-active,
	32	+.breadcrumb-leave-active {
	33	+ transition: all .5s;
	34	+}
	35	+
	36	+.breadcrumb-enter,
	37	+.breadcrumb-leave-active {
	38	+ opacity: 0;
	39	+ transform: translateX(20px);
	40	+}
	41	+
	42	+.breadcrumb-move {
	43	+ transition: all .5s;
	44	+}
	45	+
	46	+.breadcrumb-leave-active {
	47	+ position: absolute;
	48	+}
...	...

src/styles/variables.scss 0 → 100644

View file @55e5cab

	1	+// sidebar
	2	+$menuText:#bfcbd9;
	3	+$menuActiveText:#409EFF;
	4	+$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
	5	+
	6	+$menuBg:#304156;
	7	+$menuHover:#263445;
	8	+
	9	+$subMenuBg:#1f2d3d;
	10	+$subMenuHover:#001528;
	11	+
	12	+$sideBarWidth: 210px;
	13	+
	14	+// the :export directive is the magic sauce for webpack
	15	+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
	16	+:export {
	17	+ menuText: $menuText;
	18	+ menuActiveText: $menuActiveText;
	19	+ subMenuActiveText: $subMenuActiveText;
	20	+ menuBg: $menuBg;
	21	+ menuHover: $menuHover;
	22	+ subMenuBg: $subMenuBg;
	23	+ subMenuHover: $subMenuHover;
	24	+ sideBarWidth: $sideBarWidth;
	25	+}
...	...