From 7f9bc46cca3383df0c915da42a87b28a61c2d614 Mon Sep 17 00:00:00 2001
From: mouse <1014893517@qq.com>
Date: Sat, 16 Dec 2023 20:49:32 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/css/custom-element.scss | 79 +++++++++-
src/assets/css/global.scss | 1 -
src/assets/css/variable.scss | 5 +
src/assets/font/demo_index.html | 29 +++-
src/assets/font/iconfont.css | 10 +-
src/assets/font/iconfont.js | 2 +-
src/assets/font/iconfont.json | 7 +
src/assets/font/iconfont.ttf | Bin 4292 -> 4692 bytes
src/assets/font/iconfont.woff | Bin 2932 -> 3216 bytes
src/assets/font/iconfont.woff2 | Bin 2400 -> 2680 bytes
src/utils/date-util.ts | 18 ++-
src/views/home/home.vue | 63 +++++++-
src/views/home/record-form.vue | 137 +++++++++++++++++
src/views/home/week-calendar.vue | 230 +++++++++++++++++++++++++++++
src/views/login/login.vue | 8 +-
15 files changed, 561 insertions(+), 28 deletions(-)
create mode 100644 src/views/home/record-form.vue
create mode 100644 src/views/home/week-calendar.vue
diff --git a/src/assets/css/custom-element.scss b/src/assets/css/custom-element.scss
index a6781ab..20551ab 100644
--- a/src/assets/css/custom-element.scss
+++ b/src/assets/css/custom-element.scss
@@ -1,9 +1,16 @@
+.el-input__wrapper.is-focus {
+ box-shadow: 0 0 0 1px $main-color inset;
+}
.el-select-dropdown__item.selected {
color: $main-color;
}
.el-select {
- --el-select-input-focus-border-color: $main-color;
+ --el-select-input-focus-border-color: var(--main-color);
+ width: 100%;
+}
+.el-input.el-date-editor {
+ width: 100%;
}
.el-radio {
@@ -11,6 +18,7 @@
border-color: $main-color;
background: $main-color;
}
+
.el-radio__input.is-checked+.el-radio__label {
color: $main-color;
}
@@ -21,15 +29,22 @@
border-color: $main-color;
opacity: 1;
transition: all .6;
- &:hover, &:active {
+
+ &:hover,
+ &:active {
opacity: .7;
transition: all .6;
}
+
&:focus {
opacity: .9;
transition: all .6;
}
}
+.el-form-item {
+ margin-bottom: 25px;
+}
+
.el-dropdown-menu__item:not(.is-disabled):focus {
background-color: rgba($main-color, .1);
color: $main-color;
@@ -37,15 +52,19 @@
.el-dialog {
.el-dialog__header {
-
- .el-dialog__headerbtn:focus .el-dialog__close,
- .el-dialog__headerbtn:hover .el-dialog__close {
- color: $main-color;
+ padding: 30px 30px 0 30px;
+ .el-dialog__headerbtn {
+ top: 20px;
+ right: 20px;
}
}
-
+ .el-dialog__title {
+ color: $main-color;
+ font-weight: 600;
+ font-size: 20px;
+ }
.el-dialog__body {
- padding: 10px 20px;
+ padding: 30px 50px 50px 50px;
}
.el-button {
@@ -71,4 +90,48 @@
--el-button-active-border-color: rgba(0, 96, 128, .8);
}
+}
+
+// 自定义月份下拉窗
+.week-calendar-picker {
+ .el-date-picker {
+ width: 260px;
+ span:hover {
+ color: $main-color;
+ }
+ .el-date-picker__header {
+ padding-bottom: 0;
+ border-bottom: 0;
+ .el-picker-panel__icon-btn {
+ margin-top: 0;
+ }
+ }
+ .el-picker-panel__content {
+ width: 100%;
+ margin: 0;
+ padding: 10px;
+ }
+
+ .el-month-table td, .el-year-table td {
+ padding: 0;
+ &.today .cell {
+ color: $main-color;
+ }
+ &.current:not(.disabled) .cell {
+ color: white;
+ background: $main-color;
+ border-radius: 5px;
+ }
+ div {
+ height: 30px;
+ padding: 0;
+
+ .cell {
+ width: 46px;
+ height: 30px;
+ line-height: 30px;
+ }
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index ddceabb..56c08e1 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -29,7 +29,6 @@ body {
[class^='icon-'] {
font-family: "iconfont" !important;
- font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index ee57c60..fc60330 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -1,3 +1,8 @@
+:root {
+ --main-color: #006080;
+ --el-color-primary: var(--main-color);
+ --el-font-size-base: 16px;
+}
$main-color: #006080;
$border-color: #EBEEF5;
$text-color: #303133;
diff --git a/src/assets/font/demo_index.html b/src/assets/font/demo_index.html
index ac10cfb..8283bab 100644
--- a/src/assets/font/demo_index.html
+++ b/src/assets/font/demo_index.html
@@ -54,6 +54,12 @@
+ -
+
+
预约
+ 
+
+
-
users 用户组
@@ -120,9 +126,9 @@
@font-face {
font-family: 'iconfont';
- src: url('iconfont.woff2?t=1702606581584') format('woff2'),
- url('iconfont.woff?t=1702606581584') format('woff'),
- url('iconfont.ttf?t=1702606581584') format('truetype');
+ src: url('iconfont.woff2?t=1702710850882') format('woff2'),
+ url('iconfont.woff?t=1702710850882') format('woff'),
+ url('iconfont.ttf?t=1702710850882') format('truetype');
}
第二步:定义使用 iconfont 的样式
@@ -148,6 +154,15 @@
+ -
+
+
+ 预约
+
+ .icon-RectangleCopy
+
+
+
-
@@ -247,6 +262,14 @@
+ -
+
+
预约
+ #icon-RectangleCopy
+
+
-
@@ -34,11 +46,14 @@
+
+
diff --git a/src/views/home/week-calendar.vue b/src/views/home/week-calendar.vue
new file mode 100644
index 0000000..189159a
--- /dev/null
+++ b/src/views/home/week-calendar.vue
@@ -0,0 +1,230 @@
+
+
+
+
+
+
+ {{ item }} |
+
+
+
+ {{ dateFormater('dd', item) }}
+ |
+
+
+
+
+
+
+
+
+
+
{{ item.title}}
+
{{ dateFormater('yyyy-MM-dd HH:mm:ss', item.time) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 62db6f4..1e5c2b2 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -79,13 +79,13 @@
-
+
-
+
-
+
@@ -100,7 +100,7 @@
-
+