page: 新增页面: 📄 头部布局完成
This commit is contained in:
parent
780a95bd77
commit
9eac9f2820
|
|
@ -11,8 +11,16 @@ declare module 'vue' {
|
|||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElText: typeof import('element-plus/es')['ElText']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
"element-plus": "^2.5.5",
|
||||
"loadsh": "^0.0.4",
|
||||
"pinia": "^2.1.7",
|
||||
"unplugin-element-plus": "^0.8.0",
|
||||
"uuid": "^9.0.1",
|
||||
"vue": "^3.4.19",
|
||||
"vue-cookies": "^1.8.3",
|
||||
|
|
@ -3088,7 +3089,6 @@
|
|||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
|
||||
"integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0",
|
||||
"estree-walker": "^2.0.2",
|
||||
|
|
@ -3285,8 +3285,7 @@
|
|||
"node_modules/@types/estree": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
|
||||
},
|
||||
"node_modules/@types/express": {
|
||||
"version": "4.17.21",
|
||||
|
|
@ -4721,7 +4720,6 @@
|
|||
"version": "8.11.3",
|
||||
"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz",
|
||||
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -4894,7 +4892,6 @@
|
|||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
||||
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"normalize-path": "^3.0.0",
|
||||
"picomatch": "^2.0.4"
|
||||
|
|
@ -5130,7 +5127,6 @@
|
|||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
|
|
@ -5232,7 +5228,6 @@
|
|||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"fill-range": "^7.0.1"
|
||||
},
|
||||
|
|
@ -5408,7 +5403,6 @@
|
|||
"version": "3.5.3",
|
||||
"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
|
||||
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"anymatch": "~3.1.2",
|
||||
"braces": "~3.0.2",
|
||||
|
|
@ -5429,7 +5423,6 @@
|
|||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
|
|
@ -6961,8 +6954,7 @@
|
|||
"node_modules/es-module-lexer": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
|
||||
"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
|
||||
"dev": true
|
||||
"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.1.1",
|
||||
|
|
@ -7881,7 +7873,6 @@
|
|||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
|
||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
|
|
@ -8243,7 +8234,6 @@
|
|||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
|
|
@ -9168,7 +9158,6 @@
|
|||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"binary-extensions": "^2.0.0"
|
||||
},
|
||||
|
|
@ -9213,7 +9202,6 @@
|
|||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -9239,7 +9227,6 @@
|
|||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
|
||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-extglob": "^2.1.1"
|
||||
},
|
||||
|
|
@ -9260,7 +9247,6 @@
|
|||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
|
|
@ -10958,7 +10944,6 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -11443,7 +11428,6 @@
|
|||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
}
|
||||
|
|
@ -12474,7 +12458,6 @@
|
|||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
|
||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"picomatch": "^2.2.1"
|
||||
},
|
||||
|
|
@ -13996,7 +13979,6 @@
|
|||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
|
|
@ -14350,7 +14332,6 @@
|
|||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.7.1.tgz",
|
||||
"integrity": "sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"acorn": "^8.11.3",
|
||||
"chokidar": "^3.5.3",
|
||||
|
|
@ -14410,6 +14391,20 @@
|
|||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/unplugin-element-plus": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmmirror.com/unplugin-element-plus/-/unplugin-element-plus-0.8.0.tgz",
|
||||
"integrity": "sha512-jByUGY3FG2B8RJKFryqxx4eNtSTj+Hjlo8edcOdJymewndDQjThZ1pRUQHRjQsbKhTV2jEctJV7t7RJ405UL4g==",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.2",
|
||||
"es-module-lexer": "^1.3.0",
|
||||
"magic-string": "^0.30.1",
|
||||
"unplugin": "^1.3.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unplugin-vue-components": {
|
||||
"version": "0.25.2",
|
||||
"resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
|
||||
|
|
@ -14477,8 +14472,7 @@
|
|||
"node_modules/unplugin/node_modules/webpack-virtual-modules": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
|
||||
"integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.0.13",
|
||||
|
|
@ -15181,7 +15175,6 @@
|
|||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
|
||||
"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "vue_ts_pina",
|
||||
"name": "sky-admin",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
"element-plus": "^2.5.5",
|
||||
"loadsh": "^0.0.4",
|
||||
"pinia": "^2.1.7",
|
||||
"unplugin-element-plus": "^0.8.0",
|
||||
"uuid": "^9.0.1",
|
||||
"vue": "^3.4.19",
|
||||
"vue-cookies": "^1.8.3",
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@
|
|||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
||||
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
||||
<link href="<%= BASE_URL %>favicon.ico" rel="icon">
|
||||
<title>苍穹外卖</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
Please enable
|
||||
it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -10,12 +10,14 @@
|
|||
height: 8px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/*定义滚动条轨道内阴影+圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/*定义滑块内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
|
|
@ -23,28 +25,100 @@
|
|||
background-color: #ccc;
|
||||
}
|
||||
|
||||
html,body{height:100%;}
|
||||
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
|
||||
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
|
||||
table{border-collapse:collapse;border-spacing:0;}
|
||||
caption,th{text-align:left;font-weight:normal;}
|
||||
html,body,fieldset,img,iframe,abbr{border:0;}
|
||||
i,cite,em,var,address,dfn{font-style:normal;}
|
||||
[hidefocus],summary{outline:0;}
|
||||
li{list-style:none;}
|
||||
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
|
||||
sup,sub{font-size:83%;}
|
||||
pre,code,kbd,samp{font-family:inherit;}
|
||||
q:before,q:after{content:none;}
|
||||
textarea{overflow:auto;resize:none;}
|
||||
label,summary{cursor:default;}
|
||||
a,button{cursor:pointer;}
|
||||
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
|
||||
del,ins,u,s,a,a:hover{text-decoration:none;}
|
||||
body,textarea,input,button,select,keygen,legend{font: Microsoft YaHei,arial,\5b8b\4f53;color:#333;outline:0;}
|
||||
body{background:#fff;}
|
||||
a,a:hover{color:#333;}
|
||||
*{box-sizing: border-box;}
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header, footer, section, article, aside, nav, hgroup, address, figure, figcaption, menu, details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
caption, th {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
html, body, fieldset, img, iframe, abbr {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
i, cite, em, var, address, dfn {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[hidefocus], summary {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, small {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
font-size: 83%;
|
||||
}
|
||||
|
||||
pre, code, kbd, samp {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
q:before, q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
label, summary {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
a, button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, em, strong, b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
del, ins, u, s, a, a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body, textarea, input, button, select, keygen, legend {
|
||||
font-size: 14px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
color: #333;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a, a:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 去除input默认填充的背景颜色 */
|
||||
input:-webkit-autofill {
|
||||
|
|
@ -55,6 +129,7 @@ input:-webkit-autofill {
|
|||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<el-menu :collapse="store.isCollapse">
|
||||
<div :style="!store.isCollapse ? 'width: 100%' : 'width: 63px'" class="logo">
|
||||
<img v-show="!store.isCollapse" alt="图标" src="../assets/login/logo.png" srcset="../assets/login/logo.png" />
|
||||
<img v-show="store.isCollapse" alt="图标" src="../assets/login/mini-logo.png" srcset="../assets/login/mini-logo.png" />
|
||||
</div>
|
||||
<el-menu-item v-for="(item, index) in menuData" :key="index" :index="(index + 1).toString()">
|
||||
<el-icon>
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<template #title> {{ item.label }}</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { headerStore } from '@/store/header';
|
||||
|
||||
const store = headerStore();
|
||||
|
||||
const menuData = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
label: '首页',
|
||||
icon: 'Menu',
|
||||
url: 'Home/Home',
|
||||
},
|
||||
{
|
||||
path: '/mall',
|
||||
name: 'mall',
|
||||
label: '商品管理',
|
||||
icon: 'Document',
|
||||
url: 'MallManage/MallManage',
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
label: '用户管理',
|
||||
icon: 'Setting',
|
||||
url: 'UserManage/UserManage',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
icon: 'location',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 图标
|
||||
.logo {
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 62px;
|
||||
background-color: var(--el-color-primary);
|
||||
|
||||
img {
|
||||
height: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
max-width: 200px;
|
||||
min-width: 63px;
|
||||
height: 100%;
|
||||
background: #343744;
|
||||
|
||||
.el-menu-item {
|
||||
color: #bfcbd9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<SetShopStatus />
|
||||
<SetPassword />
|
||||
<header>
|
||||
<!--状态操作-->
|
||||
<div class="statusBox">
|
||||
<div class="collapse">
|
||||
<span @click="store.isCollapse = !store.isCollapse">
|
||||
<el-icon size="20">
|
||||
<Fold v-show="!store.isCollapse" />
|
||||
<Expand v-show="store.isCollapse" />
|
||||
</el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 店铺状态 -->
|
||||
<div :style="store.shopStatus === 1 ? 'background:#fd3333' : 'background:#6A6A6A'" class="status">
|
||||
<span>{{ store.shopStatus === 1 ? '营业中' : '打样中' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightStatus">
|
||||
<div class="operatingState" @click="store.changeShopStatus = true">
|
||||
<el-icon>
|
||||
<Timer />
|
||||
</el-icon>
|
||||
营业状态设置
|
||||
</div>
|
||||
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
<el-button plain style="width: 120px" type="warning">
|
||||
管理员 <el-icon class="el-icon--right"><CaretBottom /></el-icon>
|
||||
</el-button>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="a" style="color: #1f1f1f" @click="handelPassword">
|
||||
<span style="margin: 0 10px 0 0">修改密码</span>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="b" style="color: #1f1f1f" @click="$router.push('/login')">
|
||||
<span style="margin: 0 10px 0 0">退出登录</span>
|
||||
<el-icon>
|
||||
<SwitchButton />
|
||||
</el-icon>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { CaretBottom, Expand, Fold, Lock, SwitchButton, Timer } from '@element-plus/icons-vue';
|
||||
import SetShopStatus from '@/commpent/header/set-shop-status.vue';
|
||||
import { headerStore } from '@/store/header';
|
||||
import SetPassword from '@/commpent/header/set-password.vue';
|
||||
|
||||
const store = headerStore();
|
||||
|
||||
/**
|
||||
* 修改密码弹窗
|
||||
*/
|
||||
const handelPassword = () => {
|
||||
console.log(666);
|
||||
store.changePassword = true;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
// 左边状态
|
||||
.statusBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 108px;
|
||||
height: 62px;
|
||||
|
||||
.collapse {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: -3px 0 0 0;
|
||||
padding: 0 6px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 右边状态
|
||||
.rightStatus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 20px 0 0;
|
||||
|
||||
.operatingState {
|
||||
padding: 0 6px;
|
||||
margin: 0 20px 0 0;
|
||||
height: 62px;
|
||||
line-height: 62px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffe185;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-model="store.changePassword"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
align-center
|
||||
draggable
|
||||
width="500"
|
||||
>
|
||||
<template #header>
|
||||
<h3>修改密码</h3>
|
||||
</template>
|
||||
<el-form :label-position="labelPosition" :model="formLabelAlign" label-width="100px" style="max-width: 460px">
|
||||
<el-form-item label="原始密码">
|
||||
<el-input v-model="formLabelAlign.oldPassword" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码">
|
||||
<el-input v-model="formLabelAlign.newPassword" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码">
|
||||
<el-input v-model="formLabelAlign.confirmPassword" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="store.changePassword = false">返回</el-button>
|
||||
<el-button type="primary" @click="handelConfirmPassword"> 确认修改</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import type { FormProps } from 'element-plus';
|
||||
import { headerStore } from '@/store/header';
|
||||
|
||||
const store = headerStore();
|
||||
const labelPosition = ref<FormProps['labelPosition']>('right');
|
||||
const formLabelAlign = reactive({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* 修改密码
|
||||
*/
|
||||
const handelConfirmPassword = () => {
|
||||
store.changePassword = false;
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<el-dialog v-model="store.changeShopStatus" :before-close="closeSetShopStatus" width="360">
|
||||
<template #header>
|
||||
<h3>设置营业状态</h3>
|
||||
</template>
|
||||
<div class="shopStatus">
|
||||
<!-- 营业中 -->
|
||||
<div :class="{ active: radio === 1 }" class="shopStatusBox" @click="handelShopStatus(1)">
|
||||
<el-radio v-model="radio" :label="1"><h3>营业中</h3></el-radio>
|
||||
<p>当前餐厅处于打烊状态，仅接受营业时间内的预定订单，可点击营业中手动恢复营业状态。</p>
|
||||
</div>
|
||||
<!-- 打样中 -->
|
||||
<div :class="{ active: radio === 0 }" class="shopStatusBox" @click="handelShopStatus(0)">
|
||||
<el-radio v-model="radio" :label="0"><h3>打样中</h3></el-radio>
|
||||
<p>当前餐厅处于营业状态，自动接收任何订单，可点击打烊进入店铺打烊状态。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="closeSetShopStatus">取消</el-button>
|
||||
<el-button type="primary" @click="handelConfirmShopStatus">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { headerStore } from '@/store/header';
|
||||
|
||||
const store = headerStore();
|
||||
const radio = ref(1);
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
*/
|
||||
const closeSetShopStatus = () => {
|
||||
store.changeShopStatus = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改营业状态
|
||||
* @param value 状态值
|
||||
*/
|
||||
const handelShopStatus = (value: number) => {
|
||||
radio.value = value;
|
||||
};
|
||||
|
||||
const handelConfirmShopStatus = () => {
|
||||
alert('确认修改');
|
||||
store.changeShopStatus = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.active {
|
||||
border: 1px solid var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
.shopStatus {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
|
||||
h3 {
|
||||
color: #1f1f1f !important;
|
||||
}
|
||||
|
||||
.shopStatusBox {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<el-row class="mb-4">
|
||||
<el-button>Default</el-button>
|
||||
<el-button type="primary">Primary</el-button>
|
||||
<el-button type="success">Success</el-button>
|
||||
<el-button type="info">Info</el-button>
|
||||
<el-button type="warning">Warning</el-button>
|
||||
<el-button type="danger">Danger</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mb-4">
|
||||
<el-button plain>Plain</el-button>
|
||||
<el-button plain type="primary">Primary</el-button>
|
||||
<el-button plain type="success">Success</el-button>
|
||||
<el-button plain type="info">Info</el-button>
|
||||
<el-button plain type="warning">Warning</el-button>
|
||||
<el-button plain type="danger">Danger</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row class="mb-4">
|
||||
<el-button round>Round</el-button>
|
||||
<el-button round type="primary">Primary</el-button>
|
||||
<el-button round type="success">Success</el-button>
|
||||
<el-button round type="info">Info</el-button>
|
||||
<el-button round type="warning">Warning</el-button>
|
||||
<el-button round type="danger">Danger</el-button>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-button :icon="Search" circle />
|
||||
<el-button :icon="Edit" circle type="primary" />
|
||||
<el-button :icon="Check" circle type="success" />
|
||||
<el-button :icon="Message" circle type="info" />
|
||||
<el-button :icon="Star" circle type="warning" />
|
||||
<el-button :icon="Delete" circle type="danger" />
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';
|
||||
</script>
|
||||
10
src/main.ts
10
src/main.ts
|
|
@ -3,8 +3,14 @@ import App from './App.vue';
|
|||
import router from './router';
|
||||
import { createPinia } from 'pinia';
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/dist/index.css';
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
|
||||
import './assets/css/reset.css';
|
||||
import './assets/css/index.scss';
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(ElementPlus).use(router).use(createPinia()).mount('#app');
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
app.use(router).use(createPinia()).use(ElementPlus, { locale: zhCn }).mount('#app');
|
||||
|
|
|
|||
|
|
@ -4,3 +4,4 @@ declare module '*.vue' {
|
|||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
declare module 'element-plus/dist/locale/zh-cn.mjs';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
export const headerStore = defineStore('headerStore', {
|
||||
state: () => ({
|
||||
isCollapse: false,
|
||||
shopStatus: 1, // 1为营业，0为打烊
|
||||
changeShopStatus: false,
|
||||
changePassword: false, // 修改密码弹窗
|
||||
}),
|
||||
getters: {},
|
||||
actions: {},
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
export const testStore = defineStore('testStore', {
|
||||
state: () => {
|
||||
return {
|
||||
count: 0,
|
||||
};
|
||||
},
|
||||
getters: {},
|
||||
actions: {},
|
||||
});
|
||||
|
|
@ -1,11 +1,33 @@
|
|||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<!--侧边栏-->
|
||||
<el-aside width="auto">
|
||||
<Aside />
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-aside width="200px">Aside</el-aside>
|
||||
<el-main>Main</el-main>
|
||||
<!--头部-->
|
||||
<el-header>
|
||||
<Header />
|
||||
</el-header>
|
||||
<!--主体部分-->
|
||||
<el-main>
|
||||
<Main />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Header from '@/commpent/header/index.vue';
|
||||
import Aside from '@/commpent/aside.vue';
|
||||
import Main from '@/commpent/main.vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#app,
|
||||
.common-layout,
|
||||
.el-aside {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ const {defineConfig} = require('@vue/cli-service');
|
|||
const AutoImport = require('unplugin-auto-import/webpack');
|
||||
const Components = require('unplugin-vue-components/webpack');
|
||||
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers');
|
||||
const ElementPlus = require('unplugin-element-plus/webpack')
|
||||
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true,
|
||||
|
|
@ -16,13 +17,34 @@ module.exports = defineConfig({
|
|||
},
|
||||
},
|
||||
},
|
||||
|
||||
chainWebpack: (config) => {
|
||||
config.plugin('define').tap((definitions) => {
|
||||
Object.assign(definitions[0], {
|
||||
__VUE_OPTIONS_API__: 'true',
|
||||
__VUE_PROD_DEVTOOLS__: 'false',
|
||||
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
|
||||
})
|
||||
return definitions
|
||||
})
|
||||
},
|
||||
// css: {
|
||||
// loaderOptions: {
|
||||
// scss: {
|
||||
// additionalData: `@use "~@/styles/index.scss" as *;`,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
// Components({
|
||||
// resolvers: [ElementPlusResolver()],
|
||||
// }),
|
||||
ElementPlus({
|
||||
useSource: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue