diff --git a/package.json b/package.json
index 8bcdec5..6e62a43 100644
--- a/package.json
+++ b/package.json
@@ -9,9 +9,9 @@
"preview": "vite preview"
},
"dependencies": {
+ "ant-design-vue": "4.x",
"dayjs": "^1.11.10",
"pinia": "^2.1.7",
- "view-ui-plus": "^1.3.15",
"vue": "^3.4.0",
"vue-router": "4"
},
diff --git a/src/App.vue b/src/App.vue
index 26b676a..54a338c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,42 +1,31 @@
-./service/api/user.ts
diff --git a/src/app-config.ts b/src/app-config.ts
new file mode 100644
index 0000000..ca984d9
--- /dev/null
+++ b/src/app-config.ts
@@ -0,0 +1,4 @@
+export const AppConfig = {
+ appName: '营养计算器管理后台',
+ appDescription: '临床营养制剂能量及营养素计算',
+}
diff --git a/src/components/button/btn-style.scss b/src/components/button/btn-style.scss
new file mode 100644
index 0000000..5d9ea2f
--- /dev/null
+++ b/src/components/button/btn-style.scss
@@ -0,0 +1,69 @@
+.btn {
+ display: inline-block;
+ margin-bottom: 0;
+ font-weight: 400;
+ text-align: center;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ background-image: none;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ height: 40px;
+ padding: 0 15px;
+ font-size: 14px;
+ border-radius: 4px;
+ outline: none;
+ transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear;
+
+ &.btn-primary {
+ color: #fff;
+ background-color: var(--primary-color-1);
+ border-color: var(--primary-color-1);
+
+ &:hover, &:active {
+ background-color: var(--primary-color-1-hover);
+ border-color: var(--primary-color-1-hover);
+ }
+ }
+ &.btn-loading {
+ pointer-events: none;
+ position: relative;
+ }
+ .icon-loading{
+ display: inline-block;
+ margin-right: 5px;
+ animation: loading-360 linear 1s infinite;
+ vertical-align: middle;
+ display: inline-flex;
+ align-items: center;
+ color: inherit;
+ font-style: normal;
+ line-height: 0;
+ text-align: center;
+ text-transform: none;
+ vertical-align: -0.125em;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+ &.btn-block {
+ display: block;
+ width: 100%;
+ }
+
+ &.btn-circle,
+ &.btn-circle-outline {
+ border-radius: 32px;
+ }
+
+ &.btn-round,
+ &.btn-round-outline {
+ border-radius: 32px;
+ }
+}
diff --git a/src/components/button/button.vue b/src/components/button/button.vue
new file mode 100644
index 0000000..8f2df49
--- /dev/null
+++ b/src/components/button/button.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
new file mode 100644
index 0000000..6fd1e5e
--- /dev/null
+++ b/src/components/button/index.ts
@@ -0,0 +1,4 @@
+import ButtonComponent from './button.vue';
+
+console.log(ButtonComponent)
+export const Button = ButtonComponent
diff --git a/src/components/login/index.vue b/src/components/login/index.vue
index 17126e3..731801c 100644
--- a/src/components/login/index.vue
+++ b/src/components/login/index.vue
@@ -1,32 +1,63 @@
-
+
-
-
+
+
{{ AppConfig.appName }}
+
{{ AppConfig.appDescription }}
+
![]()
-
营养与健康数据管理处理平台
-
-
-
-
@@ -35,40 +66,133 @@ const handleSubmit = (...e: any) => {
height: 100vh;
position: fixed;
inset: 0;
- display: flex;
- align-items: center;
text-align: center;
- justify-content: center;
- background: rgba(0, 0, 0, 0.3);
+ background: var(--primary-background);
z-index: 101;
}
-.logo {
+.login-container {
+ width: 800px;
+ max-width: 90%;
+ display: flex;
+ overflow: hidden;
+ border-radius: var(--primary-border-radius);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.left-panel {
+ background: var(--primary-color-1);
+ color: white;
+ width: 50%;
+ padding: 50px 0px;
+ text-align: center;
+
img {
- width: 200px;
+ margin: 50px 20px 10px;
+ width: 90%;
}
-
- margin-bottom: 10px;
}
-.desc {
- margin-bottom: 30px;
- color: #ccc;
+.app-desc {
+ margin-top: 10px;
}
-.submit {
+.login-form-wrapper {
+ background: white;
+ width: 50%;
+ transition: all 0.2s;
+}
+.submit{
+ margin-top: 20px;
+}
+.form-container {
+ width: 75%;
+}
+
+.form-title {
+ font-size: 16px;
+ font-weight: bold;
+
+ &:after {
+ content: ' ';
+ width: 30px;
+ height: 2px;
+ display: block;
+ margin: 5px auto;
+ background: var(--primary-color-1);
+ }
+}
+
+.login-form {
margin-top: 50px;
}
-.login-container {
- width: 300px;
+.message-tips {
+ height: 30px;
+ line-height: 30px;
+ color: red;
+ text-align: left;
}
-.mask {
- position: fixed;
- inset: 0;
- background: url("https://bing.biturl.top/?resolution=1920&format=image&index=0&mkt=zh-CN") #fff;
- z-index: 100;
- filter: blur(5px);
+.form-item {
+ margin-top: 20px;
+ input {
+ outline: none;
+ display: block;
+ width: 100%;
+ border: none;
+ border-bottom: solid 1px #e8eaef;
+ padding: 5px;
+ transition: all 0.5s;
+
+ &:focus {
+ border-color: var(--primary-color-1);
+ }
+ }
}
+
+.origin {
+
+ //
+ //.logo {
+ // img {
+ // width: 200px;
+ // }
+ //
+ // margin-bottom: 10px;
+ //}
+ //
+ //.desc {
+ // margin-bottom: 30px;
+ // color: #ccc;
+ //}
+ //
+ //.submit {
+ // margin-top: 50px;
+ //}
+ //
+}
+
+@media screen and (max-width: 800px) {
+ .login-form-wrapper {
+ padding: 50px 0;
+ width: 100%;
+ }
+ .login-container {
+ display: block;
+ max-width: 100%;
+ border-radius: 0;
+ height: 100%;
+ background: #fff;
+ }
+ .left-panel {
+ width: 100%;
+
+ img {
+ width: 250px;
+ margin: 10px 0;
+ }
+ }
+}
+
diff --git a/src/components/login/login_pic.png b/src/components/login/login_pic.png
new file mode 100644
index 0000000..b1ac7c0
Binary files /dev/null and b/src/components/login/login_pic.png differ
diff --git a/src/components/message/index.ts b/src/components/message/index.ts
new file mode 100644
index 0000000..e6cc21e
--- /dev/null
+++ b/src/components/message/index.ts
@@ -0,0 +1,40 @@
+import Notification from "./notification-group.vue";
+import {h, render, VNode} from 'vue'
+import {NotificationProps} from "./types";
+
+let vNode: VNode | null = null;
+
+function getInstance() {
+ if (!vNode) {
+ vNode = h(Notification, {
+ ref:'noticeNode'
+ })
+ let noticeWrapper = document.querySelector
('.notice-wrapper-c')
+
+ if (!noticeWrapper) {
+ noticeWrapper = document.createElement('div')
+ noticeWrapper.classList.add('notice-wrapper-c')
+ document.body.appendChild(noticeWrapper)
+ }
+ render(vNode, noticeWrapper)
+ }
+ return vNode?.component?.exposed;
+}
+
+function showNotification(prop: NotificationProps) {
+ const instance = getInstance();
+ instance?.addNotice?.(prop)
+}
+
+
+export const message = {
+ show(content: string, title?: string,duration = 3) {
+ showNotification({
+ type: 'notice',
+ content,
+ title,
+ duration,
+ closable:true
+ })
+ }
+}
diff --git a/src/components/message/notice.vue b/src/components/message/notice.vue
new file mode 100644
index 0000000..c504c45
--- /dev/null
+++ b/src/components/message/notice.vue
@@ -0,0 +1,91 @@
+
+
+
+
+
+
+
diff --git a/src/components/message/notification-group.vue b/src/components/message/notification-group.vue
new file mode 100644
index 0000000..cac3d11
--- /dev/null
+++ b/src/components/message/notification-group.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/message/types.ts b/src/components/message/types.ts
new file mode 100644
index 0000000..ce8d51c
--- /dev/null
+++ b/src/components/message/types.ts
@@ -0,0 +1,7 @@
+export type NotificationProps = {
+ type: 'notice' | 'message';
+ title?: string;
+ content: string;
+ closable?: boolean;
+ duration?: number;
+}
diff --git a/src/components/page-header.vue b/src/components/page-header.vue
new file mode 100644
index 0000000..3cd192a
--- /dev/null
+++ b/src/components/page-header.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/page-loading/index.vue b/src/components/page-loading/index.vue
index eba651c..eb580b4 100644
--- a/src/components/page-loading/index.vue
+++ b/src/components/page-loading/index.vue
@@ -1,110 +1,14 @@
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
+
diff --git a/src/components/select/index.ts b/src/components/select/index.ts
new file mode 100644
index 0000000..337e5af
--- /dev/null
+++ b/src/components/select/index.ts
@@ -0,0 +1,8 @@
+import Select from './select.vue'
+import SelectItem from './select-item.vue'
+
+
+export {
+ Select,
+ SelectItem
+}
diff --git a/src/components/select/select-item.vue b/src/components/select/select-item.vue
new file mode 100644
index 0000000..63cf316
--- /dev/null
+++ b/src/components/select/select-item.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
new file mode 100644
index 0000000..c71d347
--- /dev/null
+++ b/src/components/select/select.vue
@@ -0,0 +1,130 @@
+
+
+
+
+
+
+
+
+ {{ selectedOption.label }}
+
+
+
+
+
+
result
-
\ No newline at end of file
+
+
+
+
+
+ 营养制剂
+
+
+
+ 类型
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 营养制剂 |
+ {{th.name}} |
+ 操作 |
+
+
+
+
+ | {{ tr.product.name }} |
+ {{ it.value }} |
+
+
+ 编辑
+ 删除
+
+ |
+
+
+
+
+
+
+
输出计算
+
+
diff --git a/src/pages/user.vue b/src/pages/user.vue
index d6c0588..dba4de7 100644
--- a/src/pages/user.vue
+++ b/src/pages/user.vue
@@ -1,3 +1,115 @@
+
- user
-
\ No newline at end of file
+
+
+
+
+
+ 营养制剂
+
+
+
+ 类型
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 营养制剂 |
+ {{ th.name }} |
+ 操作 |
+
+
+
+
+ | {{ tr.product.name }} |
+ {{ it.value }} |
+
+
+ 编辑
+ 删除
+
+ |
+
+
+
+
+
+
+
+