feat: 🚀 订阅功能
This commit is contained in:
139
src/styles/common.scss
Normal file
139
src/styles/common.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
/* flex */
|
||||
.flx-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 垂直居中，平均分布
|
||||
.flx-justify-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// 左右居中
|
||||
.flx-justify-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 垂直居中
|
||||
.flx-align-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flx {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* clearfix */
|
||||
.clearfix::after {
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* 文字单行省略号 */
|
||||
.sle {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 文字多行省略号 */
|
||||
.mle {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
/* 文字多了自动換行 */
|
||||
.break-word {
|
||||
color: #4178d5;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* fade-transform */
|
||||
.fade-transform-leave-active,
|
||||
.fade-transform-enter-active {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.fade-transform-enter-from {
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* breadcrumb-transform */
|
||||
.breadcrumb-enter-active {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
/* scroll bar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--el-border-color-darker);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* nprogress */
|
||||
#nprogress .bar {
|
||||
background: var(--el-color-primary) !important;
|
||||
}
|
||||
#nprogress .spinner-icon {
|
||||
border-top-color: var(--el-color-primary) !important;
|
||||
border-left-color: var(--el-color-primary) !important;
|
||||
}
|
||||
#nprogress .peg {
|
||||
box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
/* 外边距、内边距全局样式 */
|
||||
@for $i from 0 through 40 {
|
||||
.mt#{$i} {
|
||||
margin-top: #{$i}px !important;
|
||||
}
|
||||
.mr#{$i} {
|
||||
margin-right: #{$i}px !important;
|
||||
}
|
||||
.mb#{$i} {
|
||||
margin-bottom: #{$i}px !important;
|
||||
}
|
||||
.ml#{$i} {
|
||||
margin-left: #{$i}px !important;
|
||||
}
|
||||
.pt#{$i} {
|
||||
padding-top: #{$i}px !important;
|
||||
}
|
||||
.pr#{$i} {
|
||||
padding-right: #{$i}px !important;
|
||||
}
|
||||
.pb#{$i} {
|
||||
padding-bottom: #{$i}px !important;
|
||||
}
|
||||
.pl#{$i} {
|
||||
padding-left: #{$i}px !important;
|
||||
}
|
||||
}
|
||||
.font12 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
270
src/styles/element.scss
Normal file
270
src/styles/element.scss
Normal file
@@ -0,0 +1,270 @@
|
||||
/* 设置 notification、message 层级在 loading 之上 */
|
||||
.el-message,
|
||||
.el-notification {
|
||||
z-index: 2058 !important;
|
||||
}
|
||||
|
||||
// .el-message,
|
||||
// .el-message--info {
|
||||
// color: red !important;
|
||||
// }
|
||||
|
||||
/* el-alert */
|
||||
.el-alert {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
/* 当前页面最大化 css */
|
||||
.main-maximize {
|
||||
.aside-split,
|
||||
.el-aside,
|
||||
.el-header,
|
||||
.el-footer,
|
||||
.tabs-box {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* custom card */
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
|
||||
}
|
||||
|
||||
/* ProTable 不需要 card 样式（在组件内使用 ProTable 会使用到） */
|
||||
.no-card {
|
||||
.card {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.table-search {
|
||||
padding: 18px 0 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* content-box (常用内容盒子) */
|
||||
.content-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.text {
|
||||
margin: 20px 0 30px;
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.el-descriptions {
|
||||
width: 100%;
|
||||
padding: 40px 0 0;
|
||||
.el-descriptions__title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.el-descriptions__label {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* main-box (树形表格 treeFilter 页面会使用，左右布局 flex) */
|
||||
.main-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.table-box {
|
||||
// 这里减去的是 treeFilter 组件宽度
|
||||
width: calc(100% - 230px);
|
||||
}
|
||||
}
|
||||
|
||||
/* proTable */
|
||||
.table-box,
|
||||
.table-main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// table-search 表格搜索样式
|
||||
.table-search {
|
||||
margin-bottom: 10px;
|
||||
.el-form {
|
||||
.el-form-item__content > * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 去除时间选择器上下 padding
|
||||
.el-range-editor.el-input__wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格 header 样式
|
||||
.table-header {
|
||||
.header-button-lf {
|
||||
float: left;
|
||||
}
|
||||
.header-button-ri {
|
||||
float: right;
|
||||
}
|
||||
.el-button {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// el-table 表格样式
|
||||
.el-table {
|
||||
flex: 1;
|
||||
|
||||
// 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
.el-table__header th {
|
||||
height: 45px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: var(--el-text-color-primary);
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
.el-table__row {
|
||||
height: 45px;
|
||||
font-size: 12px;
|
||||
.el-table__placeholder {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
// 设置 el-table 中 header 文字不换行，并省略
|
||||
.el-table__header .el-table__cell > .cell {
|
||||
// color: red;
|
||||
white-space: nowrap;
|
||||
|
||||
// border-right: 1px solid rgb(206 209 217 / 100%);
|
||||
}
|
||||
|
||||
// 解决表格数据为空时样式不居中问题(仅在element-plus中)
|
||||
.el-table__empty-block {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.table-empty {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// table 中 image 图片样式
|
||||
.table-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格 pagination 样式
|
||||
.el-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* el-table 组件大小 */
|
||||
.el-table--small {
|
||||
.el-table__header th {
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.el-table__row {
|
||||
height: 40px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
.el-table--large {
|
||||
.el-table__header th {
|
||||
height: 50px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.el-table__row {
|
||||
height: 50px !important;
|
||||
font-size: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* el-drawer */
|
||||
.el-drawer {
|
||||
.el-drawer__header {
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
span {
|
||||
font-size: 17px;
|
||||
line-height: 17px;
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
.el-drawer__footer {
|
||||
border-top: 1px solid var(--el-border-color-lighter);
|
||||
}
|
||||
|
||||
// select 样式
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// drawer-form 中存在两列 form-item 样式
|
||||
.drawer-multiColumn-form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.el-form-item {
|
||||
width: 47%;
|
||||
&:nth-child(2n-1) {
|
||||
margin-right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* el-dialog */
|
||||
.el-dialog {
|
||||
.el-dialog__header {
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
.el-dialog__title {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-form-item--default {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-pagination__total {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-table__cell .cell div {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
142
src/styles/reset.scss
Normal file
142
src/styles/reset.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
/* Reset style sheet */
|
||||
|
||||
/* 目前项目中使用富文本编辑器需要注释，如果你项目中没有使用富文本编辑器，可以取消注释 */
|
||||
// html,
|
||||
// body,
|
||||
// div,
|
||||
// span,
|
||||
// applet,
|
||||
// object,
|
||||
// iframe,
|
||||
// h1,
|
||||
// h2,
|
||||
// h3,
|
||||
// h4,
|
||||
// h5,
|
||||
// h6,
|
||||
// p,
|
||||
// blockquote,
|
||||
// pre,
|
||||
// a,
|
||||
// abbr,
|
||||
// acronym,
|
||||
// address,
|
||||
// big,
|
||||
// cite,
|
||||
// code,
|
||||
// del,
|
||||
// dfn,
|
||||
// em,
|
||||
// img,
|
||||
// ins,
|
||||
// kbd,
|
||||
// q,
|
||||
// s,
|
||||
// samp,
|
||||
// small,
|
||||
// strike,
|
||||
// strong,
|
||||
// sub,
|
||||
// sup,
|
||||
// tt,
|
||||
// var,
|
||||
// b,
|
||||
// u,
|
||||
// i,
|
||||
// center,
|
||||
// dl,
|
||||
// dt,
|
||||
// dd,
|
||||
// ol,
|
||||
// ul,
|
||||
// li,
|
||||
// fieldset,
|
||||
// form,
|
||||
// label,
|
||||
// legend,
|
||||
// table,
|
||||
// caption,
|
||||
// tbody,
|
||||
// tfoot,
|
||||
// thead,
|
||||
// tr,
|
||||
// th,
|
||||
// td,
|
||||
// article,
|
||||
// aside,
|
||||
// canvas,
|
||||
// details,
|
||||
// embed,
|
||||
// figure,
|
||||
// figcaption,
|
||||
// footer,
|
||||
// header,
|
||||
// hgroup,
|
||||
// menu,
|
||||
// nav,
|
||||
// output,
|
||||
// ruby,
|
||||
// section,
|
||||
// summary,
|
||||
// time,
|
||||
// mark,
|
||||
// audio,
|
||||
// video {
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// font: inherit;
|
||||
// font-size: 100%;
|
||||
// vertical-align: baseline;
|
||||
// border: 0;
|
||||
// }
|
||||
|
||||
// /* HTML5 display-role reset for older browsers */
|
||||
// article,
|
||||
// aside,
|
||||
// details,
|
||||
// figcaption,
|
||||
// figure,
|
||||
// footer,
|
||||
// header,
|
||||
// hgroup,
|
||||
// menu,
|
||||
// nav,
|
||||
// section {
|
||||
// display: block;
|
||||
// }
|
||||
// body {
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// }
|
||||
// ol,
|
||||
// ul {
|
||||
// list-style: none;
|
||||
// }
|
||||
// blockquote,
|
||||
// q {
|
||||
// quotes: none;
|
||||
// }
|
||||
// blockquote::before,
|
||||
// blockquote::after,
|
||||
// q::before,
|
||||
// q::after {
|
||||
// content: "";
|
||||
// content: none;
|
||||
// }
|
||||
// table {
|
||||
// border-spacing: 0;
|
||||
// border-collapse: collapse;
|
||||
// }
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
|
||||
:-webkit-any(article, aside, nav, section) h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
34
src/styles/theme/aside.ts
Normal file
34
src/styles/theme/aside.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
export type AsideThemeType = "light" | "inverted" | "dark";
|
||||
|
||||
export const asideTheme: Record<AsideThemeType, { [key: string]: string }> = {
|
||||
light: {
|
||||
"--el-logo-text-color": "#303133",
|
||||
"--el-menu-bg-color": "#ffffff",
|
||||
"--el-menu-hover-bg-color": "#cccccc",
|
||||
"--el-menu-active-bg-color": "var(--el-color-primary-light-9)",
|
||||
"--el-menu-text-color": "#333333",
|
||||
"--el-menu-active-color": "var(--el-color-primary)",
|
||||
"--el-menu-hover-text-color": "#333333",
|
||||
"--el-menu-horizontal-sub-item-height": "50px"
|
||||
},
|
||||
inverted: {
|
||||
"--el-logo-text-color": "#dadada",
|
||||
"--el-menu-bg-color": "#191a20",
|
||||
"--el-menu-hover-bg-color": "#000000",
|
||||
"--el-menu-active-bg-color": "#000000",
|
||||
"--el-menu-text-color": "#bdbdc0",
|
||||
"--el-menu-active-color": "#ffffff",
|
||||
"--el-menu-hover-text-color": "#ffffff",
|
||||
"--el-menu-horizontal-sub-item-height": "50px"
|
||||
},
|
||||
dark: {
|
||||
"--el-logo-text-color": "#dadada",
|
||||
"--el-menu-bg-color": "#141414",
|
||||
"--el-menu-hover-bg-color": "#000000",
|
||||
"--el-menu-active-bg-color": "#000000",
|
||||
"--el-menu-text-color": "#bdbdc0",
|
||||
"--el-menu-active-color": "#ffffff",
|
||||
"--el-menu-hover-text-color": "#ffffff",
|
||||
"--el-menu-horizontal-sub-item-height": "50px"
|
||||
}
|
||||
};
|
||||
37
src/styles/theme/element-dark.scss
Normal file
37
src/styles/theme/element-dark.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
/* 自定义 element 暗黑模式 */
|
||||
html.dark {
|
||||
/* wangEditor */
|
||||
--w-e-toolbar-color: #eeeeee;
|
||||
--w-e-toolbar-bg-color: #141414;
|
||||
--w-e-textarea-bg-color: #141414;
|
||||
--w-e-textarea-color: #eeeeee;
|
||||
--w-e-toolbar-border-color: var(--el-border-color-darker);
|
||||
|
||||
/* login */
|
||||
.login-container {
|
||||
background-color: #191919 !important;
|
||||
.login-box {
|
||||
background-color: rgb(0 0 0 / 80%) !important;
|
||||
.login-form {
|
||||
box-shadow: rgb(255 255 255 / 12%) 0 2px 10px 2px !important;
|
||||
.logo-text {
|
||||
color: var(--el-text-color-primary) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* layout */
|
||||
.el-container {
|
||||
// columns layout
|
||||
.aside-split {
|
||||
background-color: var(--el-bg-color) !important;
|
||||
.logo {
|
||||
border-bottom: 1px solid var(--el-border-color-light) !important;
|
||||
}
|
||||
}
|
||||
.el-header {
|
||||
background-color: var(--el-bg-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
src/styles/var.scss
Normal file
12
src/styles/var.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
/* global css variable */
|
||||
|
||||
// $primary-color: var(--el-color-primary);
|
||||
|
||||
@forward "element-plus/theme-chalk/src/common/var.scss" with (
|
||||
// $colors: (
|
||||
// "primary": (
|
||||
// "base": green
|
||||
// )
|
||||
// ),
|
||||
$font-size: ("base": 12px)
|
||||
);
|
||||
Reference in New Issue
Block a user