Commit 09f6edb7 authored by “yiyousong”'s avatar “yiyousong”

pref:修改皮肤变量

parent af773a4f
...@@ -159,16 +159,17 @@ export default { ...@@ -159,16 +159,17 @@ export default {
} }
:root { :root {
// 标题颜色 // 标题颜色
--main-title-color: #fff; --main-h1-color: #fff;
/* 辅助颜色 */ /* 辅助颜色 */
--main-assist-color: #59d1fe;
--main-assist-color1: #59d1fe; --main-assist-color1: #59d1fe;
--main-assist-color2: #f77234; --main-assist-color2: #f77234;
--main-assist-color3: #f53f3f; --main-assist-color3: #f53f3f;
--main-assist-color4: #58c09e; --main-assist-color4: #58c09e;
/* 主题颜色 */ /* 主题颜色 */
--main-theme-color1: #0857e8; --main-theme-color: #0857e8;
// 底部数据名称 // 底部数据标题名称
--data-name-color: #666; --main-sjbt-color: #666;
// 渐变色(主色) // 渐变色(主色)
--gradient-ramp-theme1: #0857e8; --gradient-ramp-theme1: #0857e8;
--gradient-ramp-theme2: #fd644f; --gradient-ramp-theme2: #fd644f;
...@@ -181,4 +182,7 @@ export default { ...@@ -181,4 +182,7 @@ export default {
.main-bg-img { .main-bg-img {
background: url("./assets/img/bg(1).jpg") no-repeat; background: url("./assets/img/bg(1).jpg") no-repeat;
} }
.main-kstd-img {
background: url("./assets/img/btn_kuaisu.png") no-repeat;
}
</style> </style>
/* 颜色 */ /* 颜色 */
.primary { .primary {
color: #1890FF; color: #1890ff;
} }
.delete { .delete {
color: #FF4D4F; color: #ff4d4f;
} }
.green { .green {
color: #1BBC9B; color: #1bbc9b;
} }
.clofff { .clofff {
color: #fff; color: #fff;
} }
.orange { .orange {
color: orange; color: orange;
} }
.bgdel { .bgdel {
background-color: #FF4D4F; background-color: #ff4d4f;
} }
.bgpr { .bgpr {
background-color: #1890FF; background-color: #1890ff;
} }
.bgg { .bgg {
background-color: #1BBC9B; background-color: #1bbc9b;
} }
/* 版心 */ /* 版心 */
.container { .container {
width: 1200px; width: 1200px;
} }
/* 弹性布局 */ /* 弹性布局 */
.flex { .flex {
display: flex; display: flex;
} }
.flex1 { .flex1 {
flex: 1 flex: 1;
} }
.flexc { .flexc {
flex-direction: column; flex-direction: column;
} }
.flexwrap { .flexwrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
.jcc { .jcc {
justify-content: center; justify-content: center;
} }
.jca { .jca {
justify-content: space-around; justify-content: space-around;
} }
.jcb { .jcb {
justify-content: space-between; justify-content: space-between;
} }
.jce { .jce {
justify-content: space-evenly; justify-content: space-evenly;
} }
.aic { .aic {
align-items: center; align-items: center;
} }
.aca { .aca {
align-content: space-around; align-content: space-around;
} }
.acb { .acb {
align-content: space-between; align-content: space-between;
} }
.ace { .ace {
align-content: space-evenly; align-content: space-evenly;
} }
/* margin */ /* margin */
.m10 { .m10 {
margin: 10px margin: 10px;
} }
.m15 { .m15 {
margin: 15px; margin: 15px;
} }
.m20 { .m20 {
margin: 20px; margin: 20px;
} }
.mt10 { .mt10 {
margin-top: 10px; margin-top: 10px;
} }
.mt15 { .mt15 {
margin-top: 15px; margin-top: 15px;
} }
.mt20 { .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mt28 { .mt28 {
margin-top: 28px; margin-top: 28px;
} }
.mt50 { .mt50 {
margin-top: 50px; margin-top: 50px;
} }
.mt130 { .mt130 {
margin-top: 130px; margin-top: 130px;
} }
.ml10 { .ml10 {
margin-left: 10px; margin-left: 10px;
} }
.ml15 { .ml15 {
margin-left: 15px; margin-left: 15px;
} }
.ml20 { .ml20 {
margin-left: 20px; margin-left: 20px;
} }
.ml25 { .ml25 {
margin-left: 25px; margin-left: 25px;
} }
.mr10 { .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.mr15 { .mr15 {
margin-right: 15px; margin-right: 15px;
} }
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;
} }
.mr25 { .mr25 {
margin-right: 25px; margin-right: 25px;
} }
.mr30 { .mr30 {
margin-right: 30px; margin-right: 30px;
} }
.mr50 { .mr50 {
margin-right: 50px; margin-right: 50px;
} }
.mb10 { .mb10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.mb15 { .mb15 {
margin-bottom: 15px; margin-bottom: 15px;
} }
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.mb25 { .mb25 {
margin-bottom: 25px; margin-bottom: 25px;
} }
.mb32 { .mb32 {
margin-bottom: 32px; margin-bottom: 32px;
} }
/* padding */ /* padding */
.pd10 { .pd10 {
padding: 10px; padding: 10px;
} }
.pd15 { .pd15 {
padding: 15px; padding: 15px;
} }
.pd20 { .pd20 {
padding: 20px; padding: 20px;
} }
.pdt10 { .pdt10 {
padding-top: 10px; padding-top: 10px;
} }
.pdt15 { .pdt15 {
padding-top: 15px; padding-top: 15px;
} }
.pdt20 { .pdt20 {
padding-top: 20px; padding-top: 20px;
} }
.pdt30 { .pdt30 {
padding-top: 30px; padding-top: 30px;
} }
.pdl8 { .pdl8 {
padding-left: 8px; padding-left: 8px;
} }
.pdl10 { .pdl10 {
padding-left: 10px; padding-left: 10px;
} }
.pdl15 { .pdl15 {
padding-left: 15px; padding-left: 15px;
} }
.pdl20 { .pdl20 {
padding-left: 20px; padding-left: 20px;
} }
.pdr10 { .pdr10 {
padding-right: 10px; padding-right: 10px;
} }
.pdr15 { .pdr15 {
padding-right: 15px; padding-right: 15px;
} }
.pdr20 { .pdr20 {
padding-right: 20px; padding-right: 20px;
} }
.pdb10 { .pdb10 {
padding-bottom: 10px; padding-bottom: 10px;
} }
.pdb15 { .pdb15 {
padding-bottom: 15px; padding-bottom: 15px;
} }
.pdb20 { .pdb20 {
padding-bottom: 20px; padding-bottom: 20px;
} }
/* 字体大小 */ /* 字体大小 */
.font16 { .font16 {
font-size: 16px; font-size: 16px;
} }
.font18 { .font18 {
font-size: 18px; font-size: 18px;
} }
.font20 { .font20 {
font-size: 20px; font-size: 20px;
} }
.font22 { .font22 {
font-size: 22px; font-size: 22px;
} }
.font24 { .font24 {
font-size: 24px; font-size: 24px;
} }
.font26 { .font26 {
font-size: 26px; font-size: 26px;
} }
.font28 { .font28 {
font-size: 28px; font-size: 28px;
} }
.font30 { .font30 {
font-size: 30px; font-size: 30px;
} }
/* 字体位置 */ /* 字体位置 */
.tac { .tac {
text-align: center; text-align: center;
} }
.tal { .tal {
text-align: left; text-align: left;
} }
.tar { .tar {
text-align: right; text-align: right;
} }
/* 加粗 */ /* 加粗 */
.fontw600 { .fontw600 {
font-weight: 600; font-weight: 600;
} }
.fontw700 { .fontw700 {
font-weight: 700; font-weight: 700;
} }
.fontw800 { .fontw800 {
font-weight: 800; font-weight: 800;
} }
/* 手型鼠标 */ /* 手型鼠标 */
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.pagination { .pagination {
margin-top: 10px; margin-top: 10px;
text-align: right; text-align: right;
} }
/** /**
...@@ -321,70 +321,70 @@ ...@@ -321,70 +321,70 @@
*/ */
/* el-table列数据为空自动显示-- */ /* el-table列数据为空自动显示-- */
.cell:empty::before { .cell:empty::before {
content: '--'; content: "--";
color: gray; color: gray;
} }
.el-dialog__body { .el-dialog__body {
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
padding: 20px !important; padding: 20px !important;
} }
.el-card { .el-card {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.el-card__body { .el-card__body {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.gutter { .gutter {
width: 6px !important; width: 6px !important;
} }
.el-table__body-wrapper::-webkit-scrollbar { .el-table__body-wrapper::-webkit-scrollbar {
width: 6px; width: 6px;
overflow-y: auto; overflow-y: auto;
} }
.el-table__body-wrapper::-webkit-scrollbar-thumb { .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 6px; border-radius: 6px;
background-color: rgba(144, 147, 153, .5); background-color: rgba(144, 147, 153, 0.5);
} }
.el-table__body-wrapper::-webkit-scrollbar-track { .el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 6px; border-radius: 6px;
background: #fff; background: #fff;
} }
.matter-fullName { .matter-fullName {
display: inline-block; display: inline-block;
width: 86px; width: 86px;
height: 30px; height: 30px;
text-align: center; text-align: center;
line-height: 30px; line-height: 30px;
margin-right: 6px; margin-right: 6px;
background: #dfe9fb; background: #dfe9fb;
border-radius: 4px; border-radius: 4px;
color: var(--main-theme-color1); color: var(--main-theme-color);
} }
.scroll3 { .scroll3 {
overflow-y: auto; overflow-y: auto;
} }
.scroll3::-webkit-scrollbar { .scroll3::-webkit-scrollbar {
width: 3px; width: 3px;
overflow-y: auto; overflow-y: auto;
} }
.scroll3::-webkit-scrollbar-thumb { .scroll3::-webkit-scrollbar-thumb {
border-radius: 3px; border-radius: 3px;
background-color: rgba(144, 147, 153, 0.5); background-color: rgba(144, 147, 153, 0.5);
} }
.scroll3::-webkit-scrollbar-track { .scroll3::-webkit-scrollbar-track {
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
} }
\ No newline at end of file
...@@ -212,7 +212,7 @@ export default { ...@@ -212,7 +212,7 @@ export default {
border-radius: 8px; border-radius: 8px;
font-size: 20px; font-size: 20px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: var(--main-theme-color1); color: var(--main-theme-color);
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
cursor: pointer; cursor: pointer;
......
...@@ -62,8 +62,8 @@ export default { ...@@ -62,8 +62,8 @@ export default {
height: 62px; height: 62px;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--main-theme-color1), var(--main-theme-color),
var(--main-assist-color1) var(--main-assist-color)
); );
border-radius: 8px; border-radius: 8px;
color: #ffffff; color: #ffffff;
......
...@@ -231,11 +231,11 @@ export default { ...@@ -231,11 +231,11 @@ export default {
.next-btn { .next-btn {
width: 130px; width: 130px;
height: 54px; height: 54px;
border: 1px solid var(--main-theme-color1); border: 1px solid var(--main-theme-color);
border-radius: 8px; border-radius: 8px;
font-size: 24px; font-size: 24px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: var(--main-theme-color1); color: var(--main-theme-color);
} }
.print-btn { .print-btn {
width: 130px; width: 130px;
......
...@@ -109,7 +109,7 @@ ...@@ -109,7 +109,7 @@
<div class="right flex flexc aic jcb"> <div class="right flex flexc aic jcb">
<div class="right-top flex aic jcb"> <div class="right-top flex aic jcb">
<router-link to="/matterList"> <router-link to="/matterList">
<div class="fill-btn flex aic jcc pointer"> <div class="fill-btn flex aic jcc pointer main-kstd-img">
<span class="fill-btn-text1"></span> <span class="fill-btn-text1"></span>
<span class="fill-btn-text2"></span> <span class="fill-btn-text2"></span>
<span class="fill-btn-text3"></span> <span class="fill-btn-text3"></span>
...@@ -370,13 +370,13 @@ export default { ...@@ -370,13 +370,13 @@ export default {
.title { .title {
font-weight: 400; font-weight: 400;
font-size: 61px; font-size: 61px;
color: var(--main-title-color); color: var(--main-h1-color);
} }
} }
.right { .right {
.tips-name { .tips-name {
font-size: 18px; font-size: 18px;
color: var(--main-title-color); color: var(--main-h1-color);
} }
.count { .count {
color: #317054; color: #317054;
...@@ -447,8 +447,8 @@ export default { ...@@ -447,8 +447,8 @@ export default {
height: 62px; height: 62px;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--main-theme-color1), var(--main-theme-color),
var(--main-assist-color1) var(--main-assist-color)
); );
border-radius: 8px; border-radius: 8px;
color: #ffffff; color: #ffffff;
...@@ -512,7 +512,7 @@ export default { ...@@ -512,7 +512,7 @@ export default {
line-height: 56px; line-height: 56px;
border-radius: 8px; border-radius: 8px;
font-size: 22px; font-size: 22px;
color: var(--main-theme-color1); color: var(--main-theme-color);
letter-spacing: 2px; letter-spacing: 2px;
&:nth-child(2n-1) { &:nth-child(2n-1) {
background-color: #fff; background-color: #fff;
...@@ -529,7 +529,6 @@ export default { ...@@ -529,7 +529,6 @@ export default {
.fill-btn { .fill-btn {
width: 530px; width: 530px;
height: 170px; height: 170px;
background: url("../../assets/img/btn_kuaisu.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 50px; font-size: 50px;
font-weight: 500; font-weight: 500;
...@@ -606,7 +605,7 @@ export default { ...@@ -606,7 +605,7 @@ export default {
line-height: 45px; line-height: 45px;
border-radius: 8px; border-radius: 8px;
font-size: 20px; font-size: 20px;
color: var(--main-theme-color1); color: var(--main-theme-color);
letter-spacing: 2px; letter-spacing: 2px;
&:nth-child(2n) { &:nth-child(2n) {
background-color: #f6f9fe; background-color: #f6f9fe;
...@@ -629,17 +628,17 @@ export default { ...@@ -629,17 +628,17 @@ export default {
.data-name { .data-name {
font-size: 22px; font-size: 22px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: var(--data-name-color); color: var(--main-sjbt-color);
} }
.count-box { .count-box {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-size: 24px; font-size: 24px;
color: var(--main-theme-color1); color: var(--main-theme-color);
.data-count { .data-count {
font-size: 38px; font-size: 38px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: var(--main-theme-color1); color: var(--main-theme-color);
} }
} }
.line { .line {
...@@ -648,8 +647,8 @@ export default { ...@@ -648,8 +647,8 @@ export default {
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
#ccc, #ccc,
var(--main-theme-color1) 35%, var(--main-theme-color) 35%,
var(--main-theme-color1) 75%, var(--main-theme-color) 75%,
#ccc 100% #ccc 100%
); );
} }
......
...@@ -297,7 +297,7 @@ export default { ...@@ -297,7 +297,7 @@ export default {
height: 25px; height: 25px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: var(--main-theme-color1); color: var(--main-theme-color);
line-height: 28px; line-height: 28px;
span { span {
font-size: 28px; font-size: 28px;
......
...@@ -280,7 +280,7 @@ export default { ...@@ -280,7 +280,7 @@ export default {
height: 25px; height: 25px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: var(--main-theme-color1); color: var(--main-theme-color);
line-height: 28px; line-height: 28px;
span { span {
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
height: v.height + 'px', height: v.height + 'px',
}" }"
class="preview-img" class="preview-img"
:src="api + v.samplePath" :src="api + v.preViewPath"
/> />
</div> </div>
</div> </div>
...@@ -141,7 +141,7 @@ export default { ...@@ -141,7 +141,7 @@ export default {
let { data } = res.data.data; let { data } = res.data.data;
data.forEach((v) => { data.forEach((v) => {
let image = new Image(); let image = new Image();
image.src = this.api + v.samplePath; image.src = this.api + v.preViewPath;
image.onload = function () { image.onload = function () {
v.height = image.height; v.height = image.height;
}; };
...@@ -215,7 +215,7 @@ export default { ...@@ -215,7 +215,7 @@ export default {
height: 26px; height: 26px;
background: #52a8f6; background: #52a8f6;
border-radius: 50%; border-radius: 50%;
color: var(--main-theme-color1); color: var(--main-theme-color);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -232,7 +232,7 @@ export default { ...@@ -232,7 +232,7 @@ export default {
border-radius: 16px; border-radius: 16px;
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
color: var(--main-theme-color1); color: var(--main-theme-color);
position: absolute; position: absolute;
right: 28px; right: 28px;
} }
...@@ -249,7 +249,7 @@ export default { ...@@ -249,7 +249,7 @@ export default {
background: #f2f6fe; background: #f2f6fe;
border-radius: 4px; border-radius: 4px;
line-height: 38px; line-height: 38px;
color: var(--main-theme-color1); color: var(--main-theme-color);
} }
.materails-item { .materails-item {
height: 42px; height: 42px;
...@@ -270,13 +270,13 @@ export default { ...@@ -270,13 +270,13 @@ export default {
); );
} }
.active { .active {
color: var(--main-theme-color1); color: var(--main-theme-color);
.line { .line {
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
#fff, #fff,
var(--main-theme-color1) 10%, var(--main-theme-color) 10%,
var(--main-theme-color1) 80%, var(--main-theme-color) 80%,
#fff #fff
); );
} }
...@@ -287,8 +287,8 @@ export default { ...@@ -287,8 +287,8 @@ export default {
height: 276px; height: 276px;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--main-theme-color1), var(--main-theme-color),
var(--main-assist-color1) var(--main-assist-color)
); );
box-shadow: 6px -1px 10px 0px rgba(11, 92, 233, 0.11); box-shadow: 6px -1px 10px 0px rgba(11, 92, 233, 0.11);
border-radius: 0px 38px 8px 0px; border-radius: 0px 38px 8px 0px;
...@@ -318,7 +318,7 @@ export default { ...@@ -318,7 +318,7 @@ export default {
.short { .short {
font-size: 26px; font-size: 26px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: var(--main-theme-color1); color: var(--main-theme-color);
} }
.full-name { .full-name {
margin-top: 10px; margin-top: 10px;
...@@ -348,7 +348,7 @@ export default { ...@@ -348,7 +348,7 @@ export default {
cursor: pointer; cursor: pointer;
i { i {
font-size: 54px; font-size: 54px;
color: var(--main-theme-color1); color: var(--main-theme-color);
} }
} }
} }
......
...@@ -86,8 +86,8 @@ export default { ...@@ -86,8 +86,8 @@ export default {
.active { .active {
background: linear-gradient( background: linear-gradient(
270deg, 270deg,
var(--main-assist-color1), var(--main-assist-color),
var(--main-theme-color1) var(--main-theme-color)
); );
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
color: #ffffff; color: #ffffff;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment