|
|
@@ -296,10 +296,10 @@ export default {
|
|
|
);
|
|
|
|
|
|
// 创建一个颜色含义图示
|
|
|
- let btnDuty = this.createButton("营业", "#4AAE50", "10px");
|
|
|
- let btnUnDuty = this.createButton("歇业", "#9E4646", "10px");
|
|
|
- let btnUnSetWorkTime = this.createButton("未配置", "#B7ACAC", "100px");
|
|
|
- let btnTemplate = this.createButton("模板配置", "#008CD6", "10px");
|
|
|
+ let btnDuty = this.createButton("营业", "btnDuty", "10px");
|
|
|
+ let btnUnDuty = this.createButton("歇业", "btnUnDuty", "10px");
|
|
|
+ let btnUnSetWorkTime = this.createButton("未配置", "btnUnSetWorkTime", "100px");
|
|
|
+ let btnTemplate = this.createButton("模板配置", "btnTemplate", "10px");
|
|
|
btnTemplate.onclick = function () {
|
|
|
// 触发事件
|
|
|
showWorkTimeTemp();
|
|
|
@@ -353,12 +353,12 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
dayjs,
|
|
|
- createButton(btnContent, backgroundColor, marginRight) {
|
|
|
+ createButton(btnContent, backgroundColorCss, marginRight) {
|
|
|
let button = document.createElement("button");
|
|
|
button.type = "button"; // 类型
|
|
|
- button.className = "el-button el-button--plain el-button--mini"; // Calendar默认按钮样式
|
|
|
+ button.className = `el-button el-button--plain el-button--mini ${backgroundColorCss}`; // Calendar默认按钮样式
|
|
|
button.textContent = btnContent; // 文本
|
|
|
- button.style.cssText = `background-color: ${backgroundColor};color:white;margin-left:auto;margin-right:${marginRight}`; // 样式
|
|
|
+ button.style.cssText = `color:white;margin-left:auto;margin-right:${marginRight}`; // 样式
|
|
|
return button;
|
|
|
},
|
|
|
showTemplateDailog() {
|
|
|
@@ -601,9 +601,14 @@ export default {
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
$titleHeight: 20px;
|
|
|
-$lowColor: #4aae50;
|
|
|
-$middleColor: #b7acac;
|
|
|
-$heightColor: #9e4646;
|
|
|
+$dutyColor: rgb(47, 133, 90);
|
|
|
+$unSetWorkTime: #bdbdbd;
|
|
|
+$unDutyColor: rgb(183, 121, 31);
|
|
|
+$btnTemplate: #008CD6;
|
|
|
+
|
|
|
+@mixin btn-o($btnBgColor) {
|
|
|
+ background-color: $btnBgColor;
|
|
|
+}
|
|
|
|
|
|
@mixin card-o($bgColor) {
|
|
|
position: relative;
|
|
|
@@ -626,7 +631,29 @@ $heightColor: #9e4646;
|
|
|
background-color: $bgColor;
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
.calendar-dialog {
|
|
|
+ ::v-deep .el-calendar{
|
|
|
+ .el-calendar__header{
|
|
|
+ .el-calendar__button-group{
|
|
|
+ .el-button-group{
|
|
|
+ .btnDuty{
|
|
|
+ @include btn-o($dutyColor);
|
|
|
+ }
|
|
|
+ .btnUnDuty{
|
|
|
+ @include btn-o($unDutyColor);
|
|
|
+ }
|
|
|
+ .btnUnSetWorkTime{
|
|
|
+ @include btn-o($unSetWorkTime);
|
|
|
+ }
|
|
|
+ .btnTemplate{
|
|
|
+ @include btn-o($btnTemplate);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.card-group {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -647,29 +674,30 @@ $heightColor: #9e4646;
|
|
|
}
|
|
|
|
|
|
.card1 {
|
|
|
- @include card-o($middleColor);
|
|
|
+ @include card-o($unSetWorkTime);
|
|
|
}
|
|
|
|
|
|
.card-text1 {
|
|
|
- @include card-text-o($middleColor);
|
|
|
+ @include card-text-o($unSetWorkTime);
|
|
|
}
|
|
|
|
|
|
.card2 {
|
|
|
- @include card-o($lowColor);
|
|
|
+ @include card-o($dutyColor);
|
|
|
}
|
|
|
|
|
|
.card-text2 {
|
|
|
- @include card-text-o($lowColor);
|
|
|
+ @include card-text-o($dutyColor);
|
|
|
}
|
|
|
|
|
|
.card3 {
|
|
|
- @include card-o($heightColor);
|
|
|
+ @include card-o($unDutyColor);
|
|
|
}
|
|
|
|
|
|
.card-text3 {
|
|
|
- @include card-text-o($heightColor);
|
|
|
+ @include card-text-o($unDutyColor);
|
|
|
}
|
|
|
|
|
|
+
|
|
|
// .card1:focus, .card1:hover {
|
|
|
// background-color:#33a3de
|
|
|
// }
|