all_user/huangguo_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:项目初始化

Browse Source
This commit is contained in:
ouyangxiu
2025-06-10 17:11:41 +07:00
commit db9bffd2c5
713 changed files with 159746 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/btn.scss
Executable
+99
View File
@@ -0,0 +1,99 @@
@import './variables.scss';
@mixin colorBtn($color) {
background: $color;
&:hover {
color: $color;
&:before,
&:after {
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue)
}
.light-blue-btn {
@include colorBtn($light-blue)
}
.red-btn {
@include colorBtn($red)
}
.pink-btn {
@include colorBtn($pink)
}
.green-btn {
@include colorBtn($green)
}
.tiffany-btn {
@include colorBtn($tiffany)
}
.yellow-btn {
@include colorBtn($yellow)
}
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: 8px;
border: none;
outline: none;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #000;
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
}
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: 4px;
}
src/styles/element-ui.scss
Executable
+92
View File
@@ -0,0 +1,92 @@
// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.el-upload {
input[type="file"] {
display: none !important;
}
}
.el-upload__input {
display: none;
}
.cell {
.el-tag {
margin-right: 0px;
}
}
.small-padding {
.cell {
padding-left: 5px;
padding-right: 5px;
}
}
.fixed-width {
.el-button--mini {
padding: 7px 10px;
width: 60px;
}
}
.status-col {
.cell {
padding: 0 10px;
text-align: center;
.el-tag {
margin-right: 0px;
}
}
}
// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
}
// refine element ui upload
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
// dropdown
.el-dropdown-menu {
a {
display: block;
}
}
// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
display: inline-flex !important;
}
.el-image-viewer__close {
background-color: red;
// top: 80px;
// right: 480px;
// bottom: 0px;
}
.el-table th>.cell{
font-size: 12px;
font-weight: 700 !important;
color:#fff !important;
}
src/styles/element-variables.scss
Executable
+31
View File
@@ -0,0 +1,31 @@
/**
* 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";
// 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;
}
src/styles/fonts/element-icons.ttf
BIN
View File
Binary file not shown.
src/styles/fonts/element-icons.woff
BIN
View File
Binary file not shown.
src/styles/index.scss
Executable
+67494
View File
File diff suppressed because it is too large Load Diff
src/styles/login.js
+67
View File
@@ -0,0 +1,67 @@
/*
* @Author:
* @Mail:
* @Date: 2022-03-25 21:32:38
* @LastEditTime: 2022-03-25 22:03:27
* @LastEditors: Please set LastEditors
* @FilePath: /comics-admin/src/styles/login.js
*/
/**
* [rain description]
* @param {[Element]} canvas canvas元素对象
* @param {[String]} text 掉落的字符串
* @param {[String]} symbol 分隔符
* @param {[Number]} speed 掉落速度
* @return {[type]} [description]
*/
export function rain(canvas, text, symbol, speed) {
//获取屏幕可视区域大小
var d = document.documentElement;
var clinetW = d.clientWidth;
var clinetH = d.clientHeight;
//设置画布大小
var canvas = canvas || document.querySelector('canvas');
canvas.width = clinetW;
canvas.height = clinetH;
var cxt = canvas.getContext('2d');
var rainStr = text || '0110100111101010';
var symbol = symbol || '';
var arr = rainStr.split(symbol);
var fontSize = 14;
// 计算行数
var cols = Math.floor(clinetW / fontSize);
// 初始化Y轴坐标
var down = [];
for (var i = 0; i < cols; i++) {
down.push(Math.floor(Math.random() * -100));
}
function drawRain() {
// 填充背景(ps:背景采用rgba,可尝试不同透明度的效果)
// cxt.fillStyle = 'rgba(0,0,0,.1)';
cxt.fillStyle = 'rgba(41,29,24,.1)';
cxt.fillRect(0, 0, clinetW, clinetH);
// 设置字体颜色
cxt.fillStyle = 'rgb(246,170,76)';
for (var i = 0; i < down.length; i++) {
var randomNum = Math.random();
// 绘制文字
cxt.fillText(arr[Math.floor(randomNum * arr.length)], i * fontSize, down[i] * fontSize);
if (down[i] * fontSize > clinetH && randomNum > 0.9) {
down[i] = 0;
}
down[i]++;
}
}
var speed = speed || 30;
setInterval(drawRain, speed);
}
// var canvas = document.querySelector('canvas');
// var text = '富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善';
// rain(canvas, text, '', 30);
src/styles/mixin.scss
Executable
+66
View File
@@ -0,0 +1,66 @@
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
@mixin pct($pct) {
width: #{$pct};
position: relative;
margin: 0 auto;
}
@mixin triangle($width, $height, $color, $direction) {
$width: $width/2;
$color-border-style: $height solid $color;
$transparent-border-style: $width solid transparent;
height: 0;
width: 0;
@if $direction==up {
border-bottom: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==right {
border-left: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
@else if $direction==down {
border-top: $color-border-style;
border-left: $transparent-border-style;
border-right: $transparent-border-style;
}
@else if $direction==left {
border-right: $color-border-style;
border-top: $transparent-border-style;
border-bottom: $transparent-border-style;
}
}
src/styles/sidebar.scss
Executable
+282
View File
@@ -0,0 +1,282 @@
#app {
// font-family: "楷体","楷体_GB2312";
.main-container {
min-height: 100%;
transition: margin-left 0.28s;
margin-left: $sideBarWidth;
position: relative;
}
.el-menu-item {
color: $menuText !important;
background-color: transparent !important;
}
.el-menu {
background-color: transparent;
// >.el-menu-item {
// color: $menuText !important;
// background-color: transparent !important;
// > span {
// color: $secondMenuText;
// font-weight: normal;
// }
// }
>.menu-wrapper{
>a{
>.el-menu-item{
>span{
color: $secondMenuText;
font-weight: normal;
}
}
>.submenu-title-noDropdown{
>span{
color: $menuText;
font-weight: 700;
}
}
}
}
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: transparent;
background-image: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
// 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-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
background: $menuBg;
height: calc(100% - 50px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
text-decoration: none;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
&:hover {
color: #fff !important;
background: $menuHover !important;
}
i {
margin-left: 10px;
}
}
// .is-active>.el-submenu__title {
// color: #fff !important;
// background-color: #B28BE6 !important;
// }
.is-opened > .el-menu--inline {
background-color: $noselectMenuBg !important; // 未选中子菜单背景色
}
// .is-opened>.el-menu--inline>.nest-menu>.router-link-active>.is-active{
// background-color: $subMenuHover !important;
// }
// .is-opened>.el-menu--inline>.menu-wrapper{
// background-color: #FFDA7E !important;
// }
.router-link-exact-active > .is-active {
color: rgb(255, 255, 255) !important;
background-color: $selectMenuBg !important; // 选中的子菜单背景色
}
// & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu {
// min-width: $sideBarWidth !important;
// background: $subMenuBg !important;
&:hover {
background: $subMenuBg !important;
}
}
& .el-submenu .el-menu-item {
// min-width: $sideBarWidth !important;
// background: $subMenuBg !important;
&>span{
color: #333 !important;
}
&:hover {
background: $subMenuActiveText !important;
}
}
& .el-submenu .is-active {
// min-width: $sideBarWidth !important;
// background: $subMenuBg !important;
&>span{
color: #fff !important;
}
}
}
.hideSidebar {
.sidebar-container {
width: 54px !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
}
}
.el-submenu {
overflow: hidden;
& > .el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
& > .el-submenu__title {
& > span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform 0.28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
& > .el-menu {
.svg-icon {
margin-right: 16px;
}
}
.nest-menu .el-submenu > .el-submenu__title,
.el-menu-item {
&:hover {
// you can use $subMenuHover
background-color: $menuHover !important;
}
}
// the scroll bar appears when the subMenu is too long
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
src/styles/transition.scss
Executable
+48
View File
@@ -0,0 +1,48 @@
// global transition css
/* fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all 0.18;
}
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}
.breadcrumb-move {
transition: all 0.5s;
}
.breadcrumb-leave-active {
position: absolute;
}
src/styles/variables.scss
Executable
+82
View File
@@ -0,0 +1,82 @@
// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:rgb(254,184,94);
$panGreen: #30B08F;
$blackText: #333;
$white:#fff;
// $cadetblue:cadetblue;//登陆界面背景色
$cadetblue:#362720;//登陆界面背景色
$menuFontColor:#ffffff;
$loginBtnColor:#6954E7;//登陆页登陆按钮颜色
$gray:$white;
// theme
$themeShallowColor: #362720;//头部header背景色
$themeColor:#fff; //header部分字体颜色
// $themeBtnColor:#13ce66;//header部分button颜色
$themeBtnColor:#6954E7;
$themeDeepColor:#6954E7;
$themeBg :$gray;
// $themeTableTitlebgColor:#30B08F;// 表单头部颜色
$themeTableTitlebgColor:#6954E7;
$themeTableTitleColor:#fff;//表单头部字体颜色
$themeTableFooterColor:#6954E7;
// sidebar
$menuText:$white; // 主菜单字体颜色
$secondMenuText:#fff;//二级菜单字体颜色
$submenuText:$blackText;
$menuHoverText:$white;
$subMenuHoverText:$white;
$menuActiveText:red;
$subMenuActiveText:rgba(#6954E7,0.5); // https://github.com/ElemeFE/element/issues/12951
// $selectMenuBg:#13ce66;// 选中的子菜单背景色
// $noselectMenuBg:hsl(148, 66%, 94%);// 未选中子菜单背景色
$selectMenuBg:#6954E7;
$noselectMenuBg:#F6E9C7;
$mainContainerViewBgColor:#362720; // 主内容显示区域背景颜色
$mainContainerViewTableColor :$themeBg; // 主内容显示内部表单背景颜色
$menuBg:#362720;//侧边菜单背景
$menuHover:$themeDeepColor;//侧边栏hover颜色
// $menuHover:rgba(241, 237, 237, 0.1);//侧边栏hover颜色
$subMenuBg:$themeColor;
$subMenuHover:$themeColor;
$sideBarWidth: 180px;
// 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;
selectMenuBg:$selectMenuBg;
noselectMenuBg:$noselectMenuBg;
themeColor:$themeColor;
themeShallowColor:$themeShallowColor;
themeBg:$themeBg;
themeDeepColor:$themeDeepColor;
}