<%= htmlWebpackPlugin.options.title %>

commit 850888a244b8d59cd212ef6ce09902ed13feacca Author: 奇趣保罗 Date: Wed Nov 9 01:22:19 2022 +0800 初始化提交 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1521c8b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +dist diff --git a/README.md b/README.md new file mode 100644 index 0000000..1d39657 --- /dev/null +++ b/README.md @@ -0,0 +1,19 @@ +# vuestudy + +## Project setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm run serve +``` + +### Compiles and minifies for production +``` +npm run build +``` + +### Customize configuration +See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..e955840 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..b31d28c --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "target": "es6" + }, + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..6f46013 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "vuestudy", + "version": "0.1.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build" + }, + "dependencies": { + "axios": "^0.19.2", + "core-js": "^3.6.4", + "font-awesome": "^4.7.0", + "markdown-it": "^10.0.0", + "vue": "^2.6.11", + "vue-router": "^3.1.5", + "vuex": "^3.1.2" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "~4.2.0", + "@vue/cli-plugin-router": "~4.2.0", + "@vue/cli-plugin-vuex": "~4.2.0", + "@vue/cli-service": "~4.2.0", + "vue-template-compiler": "^2.6.11" + }, + "browserslist": [ + "> 1%", + "last 2 versions" + ] +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..df36fcf Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/icon.png b/public/icon.png new file mode 100644 index 0000000..f65d9a7 Binary files /dev/null and b/public/icon.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..0666370 --- /dev/null +++ b/public/index.html @@ -0,0 +1,18 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + + +

+ + + diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..2e12b42 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/assets/Avatar.jpg b/src/assets/Avatar.jpg new file mode 100644 index 0000000..3b4ae24 Binary files /dev/null and b/src/assets/Avatar.jpg differ diff --git a/src/assets/kico.css b/src/assets/kico.css new file mode 100644 index 0000000..9f51b13 --- /dev/null +++ b/src/assets/kico.css @@ -0,0 +1,1422 @@ +@charset "UTF-8"; + +/* ---- + +# Kico Style 1.0 +# By: Dreamer-Paul +# Last Update: 2020.3.31 + +一个可口的极简响应式前端框架。 + +本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com + +---- */ + +/* 0 - 全局 +-------------------------------- */ +html, body, +dl, dt, dd, ol, ul, +h1, h2, h3, h4, h5, h6, +pre, code, form, p, +fieldset, legend, figure{ + margin: 0; + padding: 0; +} + +*, *:before, *:after{ box-sizing: border-box } + +article, aside, figcaption, figure, footer, header, hgroup, main, nav, section{ display: block } + +html{ + color: #353535; + scroll-behavior: smooth; + font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif; +} + +html.font-s{ font-size: 14px } +html.font-m{ font-size: 16px } +html.font-l{ font-size: 18px } + +:root{ + --red: #ea644a; + --yellow: #ffb03a; + --blue: #3498db; + --green: #27a17e; +} + +@media screen and (max-width: 768px){ + html.font-auto{ font-size: 14px } +} + +@media screen and (min-width: 1921px){ + html.font-auto{ font-size: 18px } +} + +/* - 选择内容 */ +::-moz-selection{ + color: #fff; + background-color: rgba(0, 0, 0, .66); +} + +::selection{ + color: #fff; + background-color: rgba(0, 0, 0, .66); +} + +/* - 滚动条 */ +::-webkit-scrollbar{ + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-thumb{ + background: #ccc; + border-radius: 5px; +} +::-webkit-scrollbar-track{ border-radius: 5px } +::-webkit-scrollbar-track:hover{ background: rgba(0, 0, 0, .05) } + +body::-webkit-scrollbar-track{ border-radius: 0 } + +/* 1 - 容器 +-------------------------------- */ +.wrap{ + margin: 0 auto; + max-width: 1200px; + padding: 0 1.25em; + box-sizing: content-box; +} + +.wrap.min{ max-width: 800px } +.wrap.mid{ max-width: 1000px } +.wrap.max{ max-width: 1400px } +.wrap.full{ max-width: 100% } + +.wrap.thin{ padding: 0 .75em } +.wrap.thick{ padding: 0 1.5em } +.wrap.clear{ + padding-left: 0; + padding-right: 0; +} + +.float-none{ float: none !important } +.float-left{ float: left !important } +.float-right{ float: right !important } + +.clearfix:after{ + content: ''; + clear: both; + display: block; +} + +/* 2 - 元素 +-------------------------------- */ +h1{ font-size: 2em } + +h1, h2, h3, h4, h5, h6{ margin-bottom: 1rem } + +h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{ margin-bottom: 0 } + +p{ + line-height: 1.8; + margin-bottom: 1em; +} + +a{ + color: #3498db; + text-decoration: none; +} + +a:hover{ color: #ffc670 } + +abbr[title]{ + cursor: help; + text-decoration: none; + border-bottom: 1px dotted; +} + +em, mark, kbd{ + font-size: .85em; + padding: .25em .5em; + border-radius: .5em; +} + +em{ + color: #fff; + font-style: normal; + background: #3498db; +} +em.red{ background: var(--red) } +em.yellow{ background: var(--yellow) } +em.blue{ background: var(--blue) } +em.green{ background: var(--green) } + +kbd{ + color: #fff; + background: #333; + font-family: 'Consolas', 'Courier New', monospace, "微软雅黑"; +} + +img, svg, audio, video, iframe{ + max-width: 100%; + vertical-align: middle; +} + +audio, video{ outline: none } + +/* - 文章 */ +article{ + word-break: break-all; + letter-spacing: .03em; +} + +article > *{ margin-bottom: 1em } +article > *:last-child{ margin-bottom: 0 } + +article h1, article h2, article h3{ font-size: 1.2em } +article h4, article h5, article h6{ font-size: 1.1em } + +article ul, article ol, article dl{ line-height: 1.8 } + +/* - 按钮 */ +button{ + outline: 0; + font: inherit; +} + +.btn{ + color: inherit; + cursor: pointer; + background: #fff; + padding: .5em 1em; + border-radius: 4px; + display: inline-block; + border: 1px solid transparent; +} +.btn:hover{ color: inherit } + +/* -- 禁用的按钮 */ +.btn[disabled]{ + opacity: .5; + cursor: not-allowed; +} + +/* -- 按钮尺寸 */ +.btn.small{ font-size: .85em } +.btn.middle, .btn.large{ padding: .75em 1.5em } +.btn.large{ font-size: 1.2em } + +/* -- 按钮颜色 */ +.btn.red, .btn.yellow, .btn.blue, .btn.green{ color: #fff } + +.btn.red{ + background: #ea644a; + background: var(--red); +} +.btn.yellow{ + background: #ffb03a; + background: var(--yellow); +} +.btn.blue{ + background: #3498db; + background: var(--blue); +} +.btn.green{ + background: #27a17e; + background: var(--green); +} +.btn.transparent{ background: transparent } + +/* - 代码 */ +pre, code{ font-family: 'Consolas', 'Courier New', monospace, "微软雅黑" } + +:not(pre) > code{ + color: #c40b00; + font-size: 85%; + word-wrap: normal; + border-radius: .5em; + padding: .25em .5em; + word-break: break-all; + background-color: #f7f2f4; +} + +pre > code{ + color: #fff; + tab-size: 4; + padding: 1em; + display: block; + overflow-x: auto; + word-break: normal; + font-size: inherit; + border-radius: 5px; + background-color: #333; +} + +/* - 项目列表 */ +ul, ol{ margin-left: 1.25em } +ul.clear, ol.clear{ + margin-left: 0; + list-style: none; +} + +dl dd{ margin-left: 1.5em } +dl dd:before{ + content: "--"; + margin-right: .25em; +} + +/* - 补间动画 */ +a, .btn{ + transition: color 0.3s, background 0.3s; + -o-transition: color 0.3s, background 0.3s; + -moz-transition: color 0.3s, background 0.3s; + -webkit-transition: color 0.3s, background 0.3s; +} + +/* - 引用*/ +blockquote{ + margin: 0 0 1em; + line-height: 1.8; + font-style: oblique; + background: #f5fafd; + padding: 1em 1em 1em 2em; + border-left: 5px #3498db solid; +} + +cite{ + color: #3498db; + font-style: normal; +} + +/* - 分割线 */ +hr{ + border: 0; + margin: 1.5em 0; + border-top: 1px rgba(0, 0, 0, 0.5) solid; +} +hr.light{ + border-top: 1px rgba(255, 255, 255, 0.5) solid; +} + +/* - 表单 */ +input[disabled], textarea[disabled]{ + cursor: no-drop !important; +} + +input[disabled], textarea[disabled], input[readonly]{ + background: rgb(235, 235, 228); +} + +input, select, textarea{ + outline: none; + font: inherit; + max-width: 100%; + background: none; + vertical-align: middle; +} + +input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], +select, textarea{ + padding: .5em; + color: inherit; + border-radius: 4px; + border: #ccc 1px solid; + min-height: calc(2.5em + 2px); +} + +input.invalid, input:out-of-range{ + border-color: #c40b00; + background: rgba(255, 0, 0, .1); +} + +::-webkit-file-upload-button{ + color: #fff; + border: none; + outline: none; + display: block; + padding: .5em 1em; + background: #3498db; + border-radius: .5em; +} + +input[type="range"]{ + margin: 0; + height: 100%; + -webkit-appearance: none; + -moz-appearance: none; + cursor: ew-resize; + cursor: grab; + overflow: hidden; + min-height: 1.5rem; +} + +input[type="range"]:focus { + box-shadow: none; + outline: none; +} + +input[type="range"]:active::-webkit-slider-thumb { + border-color: #3498db; + background-color: #3498db; +} + +input[type="range"]:active::-moz-range-thumb { + border-color: #3498db; + background-color: #3498db; +} + +input[type="range"]:focus::-ms-thumb { + border-color: #9C27B0; + background-color: #673AB7; +} + +input[type="range"]::-moz-focus-outer { border: 0 } + +input[type="range"]::-webkit-slider-runnable-track { + background: #3498db; + content: ''; + height: 2px; + pointer-events: none; +} + +input[type="range"]::-webkit-slider-thumb { + width: 14px; + height: 14px; + -webkit-appearance: none; + appearance: none; + background: #fff; + border-radius: 50px; + margin-top: -6px; + border: 1px solid rgba(0, 0, 0, 0.15); + transition: .3s border-color, .3s background-color; +} + +input[type="range"]::-moz-range-track { + width: 240px; + height: 2px; + background: rgba(0, 50, 126, 0.12); +} + +input[type="range"]::-moz-range-thumb { + width: 14px; + height: 14px; + background: #fff; + border-radius: 50px; + border: 1px solid rgba(0, 30, 75, 0.12); + position: relative; + transition: .3s border-color, .3s background-color; +} + +input[type="range"]::-moz-range-progress { + height: 2px; + background: #467fcf; + border: 0; + margin-top: 0; +} + +textarea{ + display: block; + overflow: auto; + resize: vertical; +} + +progress{ + overflow: auto; + border-radius: 50px; +} + +progress::-webkit-progress-bar{ + background-color: #eee; +} + +/* - 表单模组 */ + +/* -- 单选多选框 */ +input[type="checkbox"], input[type="radio"]{ + float: left; + width: 1.5em; + height: 1.5em; + cursor: pointer; + position: relative; + margin: 0 .5em 0 0; + -moz-appearance: none; + -webkit-appearance: none; +} + +input[type="checkbox"]:before, input[type="radio"]:before{ + content: ''; + width: 100%; + height: 100%; + display: block; + border-radius: .2em; + box-shadow: 0 0 0 1px #ccc inset; + transition: background 0.3s, box-shadow 0.3s; +} + +input[type="checkbox"]:after{ + top: 10%; + left: 10%; + width: 30%; + height: 60%; + content: ''; + position: absolute; + transition: transform .3s; + transform-origin: 100% 100%; + border-right: .15em solid #fff; + border-bottom: .15em solid #fff; + transform: rotate(45deg) scale(0); +} + +input[type="radio"], input[type="radio"]:before{ border-radius: 100% } +input[type="checkbox"], input[type="checkbox"]:before{ border-radius: .2em } + +input[type="radio"]:checked:before{ + background: #3498db; + border: 2px solid #3498db; + box-shadow: 0 0 0 .2em #fff inset; +} + +input[type="checkbox"]:checked:before{ + box-shadow: none; + background: #3498db; +} + +input[type="checkbox"]:checked:after{ + transform: rotate(45deg) scale(1); +} + +/* -- 开关按钮 */ +input[type="checkbox"].switch{ + width: 4em; + height: 2em; + float: none; + cursor: pointer; + background: #eee; + position: relative; + border-radius: 50px; + border: 1px solid #ddd; + box-sizing: content-box; + transition: border .3s, background .3s; +} + +input[type="checkbox"].switch:before{ + margin: 0; + border: 0; + width: 2em; + height: 2em; + content: ''; + display: block; + box-shadow: none; + background: #fff; + position: absolute; + border-radius: 100%; + transition: transform 0.3s; +} + +input[type="checkbox"].switch:after{ content: normal } + +input[type="checkbox"].switch:checked{ + box-shadow: none; + background: #3498db; + border-color: #3498db; +} + +input.switch:checked:before{ + background: #fff; + transform: translateX(2em); +} + +/* - 表单小组 */ +fieldset{ + border: none; + margin-bottom: 2em; +} + +fieldset > *{ margin-bottom: 1em } +fieldset:last-child{ margin-bottom: 0 } + +fieldset legend{ margin: 0 0 1em } + +fieldset input:not([type="checkbox"]):not([type="radio"]), fieldset select, fieldset textarea{ width: 100% } + +/* -- 控件模块 */ +fieldset label{ + display: block; + user-select: none; + margin-bottom: 1em; +} + +/* -- 控件标题 */ +fieldset label span:first-child{ + font-size: .85em; + white-space: nowrap; + margin-bottom: .5rem; + display: inline-block; + color: rgba(0, 0, 0, .6); +} + +fieldset label.required span:after{ + color: red; + content: "*"; + margin-left: .25em; +} + +/* -- 单行组合 */ +fieldset .has-group{ display: flex } + +fieldset .has-group input:not([type="checkbox"]):not([type="radio"]){ + width: auto; + flex: 1 1 auto; + border-right: none; +} + +fieldset .has-group .btn{ + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +/* -- 单行表单 */ +form .inline label{ + display: inline-block; + vertical-align: bottom; + margin: 0 .75em .75em 0; +} + +/* - 表格 */ +.ks-table{ + width: 100%; + overflow-x: auto; + overflow-y: hidden; + border-radius: 5px; +} + +table{ + border: 0; + width: 100%; + max-width: 100%; + border-collapse: collapse; +} + +table th, table td{ + padding: .75em; + text-align: left; + vertical-align: top; +} + +table > thead > tr{ border-bottom: 2px solid #ccc } +table > tbody > tr{ border-bottom: 1px solid #ddd } +table > tbody > tr:last-child{ border-bottom: 0 } + +table > tbody > tr{ + transition: background .3s; +} + +table > tbody > tr:hover{ + background: #eee; +} + +table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th, +table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td{ + white-space: nowrap; +} + +/* - 蓝色风格 */ +table.fill{ + border: 1px solid transparent; +} + +table.fill > thead{ + background: #3498db; + border-left: 1px solid #3498db; + border-right: 1px solid #3498db; +} +table.fill > thead > tr{ + border-bottom: none; +} +table.fill > thead > tr > th, table.fill > thead > tr > td{ + color: #fff; +} + +table.fill > tbody{ + border-left: 1px solid #ddd; + border-right: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} +table.fill > tbody > tr:nth-child(even) > th, table.fill > tbody > tr:nth-child(even){ + background: #f7f7f7; +} + +/* - 嵌入式网页 */ +iframe{ + border: none; +} + +/* - 栅格系统 */ +.row{ + display: flex; + flex-wrap: wrap; + margin: 0 -1em -2em; +} + +.row.s{ margin: 0 -.5em -1em } +.row.m{ margin: 0 -1.25em -2.5em } +.row.l{ margin: 0 -1.5em -3em } +.row.full{ margin: 0 } +.row.clear{ margin-bottom: 0 } + +.row.scrollable{ + overflow: auto; + margin-left: 0; + margin-right: 0; + flex-wrap: nowrap; +} + +/* -- 对齐方式 */ +.row.right{ justify-content: flex-end; } +.row.center{ justify-content: center; } +.row.around{ justify-content: space-around; } +.row.between{ justify-content: space-between; } + +/* -- 网格间距 */ +.row [class*="col-"]{ + flex: 0 0 100%; + padding: 0 1em; + max-width: 100%; + margin-bottom: 2em; +} + +.row.s [class*="col-"]{ + padding: 0 .5em; + margin-bottom: 1em; +} +.row.m [class*="col-"]{ + padding: 0 1.25em; + margin-bottom: 2.5em; +} +.row.l [class*="col-"]{ + padding: 0 1.5em; + margin-bottom: 3em; +} +.row.full [class*="col-"]{ + padding: 0; + margin-bottom: 0; +} + +/* -- 网格主体 */ +@media screen and (min-width: 600px){ + .col-s-left-1{ right: 8.3333%; } + .col-s-left-2{ right: 16.6666%; } + .col-s-left-3{ right: 25%; } + .col-s-left-4{ right: 33.3333%; } + .col-s-left-5{ right: 41.6666%; } + .col-s-left-6{ right: 50%; } + .col-s-left-7{ right: 58.3333%; } + .col-s-left-8{ right: 66.6666%; } + .col-s-left-9{ right: 75%; } + .col-s-left-10{ right: 83.3333%; } + .col-s-left-11{ right: 91.6666%; } + .col-s-left-12{ right: 100%; } + + .col-s-right-1{ left: 8.3333%; } + .col-s-right-2{ left: 16.6666%; } + .col-s-right-3{ left: 25%; } + .col-s-right-4{ left: 33.3333%; } + .col-s-right-5{ left: 41.6666%; } + .col-s-right-6{ left: 50%; } + .col-s-right-7{ left: 58.3333%; } + .col-s-right-8{ left: 66.6666%; } + .col-s-right-9{ left: 75%; } + .col-s-right-10{ left: 83.3333%; } + .col-s-right-11{ left: 91.6666%; } + .col-s-right-12{ left: 100%; } +} + +@media screen and (min-width: 900px){ + .col-m-left-1{ right: 8.3333%; } + .col-m-left-2{ right: 16.6666%; } + .col-m-left-3{ right: 25%; } + .col-m-left-4{ right: 33.3333%; } + .col-m-left-5{ right: 41.6666%; } + .col-m-left-6{ right: 50%; } + .col-m-left-7{ right: 58.3333%; } + .col-m-left-8{ right: 66.6666%; } + .col-m-left-9{ right: 75%; } + .col-m-left-10{ right: 83.3333%; } + .col-m-left-11{ right: 91.6666%; } + .col-m-left-12{ right: 100%; } + + .col-m-right-1{ left: 8.3333%; } + .col-m-right-2{ left: 16.6666%; } + .col-m-right-3{ left: 25%; } + .col-m-right-4{ left: 33.3333%; } + .col-m-right-5{ left: 41.6666%; } + .col-m-right-6{ left: 50%; } + .col-m-right-7{ left: 58.3333%; } + .col-m-right-8{ left: 66.6666%; } + .col-m-right-9{ left: 75%; } + .col-m-right-10{ left: 83.3333%; } + .col-m-right-11{ left: 91.6666%; } + .col-m-right-12{ left: 100%; } +} + +@media screen and (min-width: 900px){ + .col-l-left-1{ right: 8.3333%; } + .col-l-left-2{ right: 16.6666%; } + .col-l-left-3{ right: 25%; } + .col-l-left-4{ right: 33.3333%; } + .col-l-left-5{ right: 41.6666%; } + .col-l-left-6{ right: 50%; } + .col-l-left-7{ right: 58.3333%; } + .col-l-left-8{ right: 66.6666%; } + .col-l-left-9{ right: 75%; } + .col-l-left-10{ right: 83.3333%; } + .col-l-left-11{ right: 91.6666%; } + .col-l-left-12{ right: 100%; } + + .col-l-right-1{ left: 8.3333%; } + .col-l-right-2{ left: 16.6666%; } + .col-l-right-3{ left: 25%; } + .col-l-right-4{ left: 33.3333%; } + .col-l-right-5{ left: 41.6666%; } + .col-l-right-6{ left: 50%; } + .col-l-right-7{ left: 58.3333%; } + .col-l-right-8{ left: 66.6666%; } + .col-l-right-9{ left: 75%; } + .col-l-right-10{ left: 83.3333%; } + .col-l-right-11{ left: 91.6666%; } + .col-l-right-12{ left: 100%; } +} + +/* --- 自适应的 */ +.row .col-auto{ + flex: 1 1 auto; + max-width: 100%; +} + +/* --- 固定的 */ +.row .col-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; +} + +.row .col-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; +} + +.row .col-3{ + flex: 0 0 25%; + max-width: 25%; +} + +.row .col-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; +} + +.row .col-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; +} + +.row .col-6{ + flex: 0 0 50%; + max-width: 50%; +} + +.row .col-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; +} + +.row .col-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; +} + +.row .col-9{ + flex: 0 0 75%; + max-width: 75%; +} + +.row .col-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; +} + +.row .col-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; +} + +.row .col-12{ + flex: 0 0 100%; + max-width: 100%; +} + +/* --- 手机 */ +@media screen and (min-width: 600px){ + .row .col-s-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; + } + + .row .col-s-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; + } + + .row .col-s-3{ + flex: 0 0 25%; + max-width: 25%; + } + + .row .col-s-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; + } + + .row .col-s-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; + } + + .row .col-s-6{ + flex: 0 0 50%; + max-width: 50%; + } + + .row .col-s-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; + } + + .row .col-s-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; + } + + .row .col-s-9{ + flex: 0 0 75%; + max-width: 75%; + } + + .row .col-s-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; + } + + .row .col-s-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; + } + + .row .col-s-12{ + flex: 0 0 100%; + max-width: 100%; + } +} + +/* --- 平板 */ +@media screen and (min-width: 900px){ + .row .col-m-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; + } + + .row .col-m-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; + } + + .row .col-m-3{ + flex: 0 0 25%; + max-width: 25%; + } + + .row .col-m-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; + } + + .row .col-m-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; + } + + .row .col-m-6{ + flex: 0 0 50%; + max-width: 50%; + } + + .row .col-m-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; + } + + .row .col-m-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; + } + + .row .col-m-9{ + flex: 0 0 75%; + max-width: 75%; + } + + .row .col-m-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; + } + + .row .col-m-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; + } + + .row .col-m-12{ + flex: 0 0 100%; + max-width: 100%; + } +} + +/* --- 电脑 */ +@media screen and (min-width: 1024px){ + .row .col-l-1{ + flex: 0 0 8.3333%; + max-width: 8.3333%; + } + + .row .col-l-2{ + flex: 0 0 16.6666%; + max-width: 16.6666%; + } + + .row .col-l-3{ + flex: 0 0 25%; + max-width: 25%; + } + + .row .col-l-4{ + flex: 0 0 33.3333%; + max-width: 33.3333%; + } + + .row .col-l-5{ + flex: 0 0 41.6666%; + max-width: 41.6666%; + } + + .row .col-l-6{ + flex: 0 0 50%; + max-width: 50%; + } + + .row .col-l-7{ + flex: 0 0 58.3333%; + max-width: 58.3333%; + } + + .row .col-l-8{ + flex: 0 0 66.6666%; + max-width: 66.6666%; + } + + .row .col-l-9{ + flex: 0 0 75%; + max-width: 75%; + } + + .row .col-l-10{ + flex: 0 0 83.3333%; + max-width: 83.3333%; + } + + .row .col-l-11{ + flex: 0 0 91.6666%; + max-width: 91.6666%; + } + + .row .col-l-12{ + flex: 0 0 100%; + max-width: 100%; + } +} + +/* -- 网格对齐方式 */ +.row > .left, .row > .right, .row > .top, .row > .bottom, .row > .center{ + display: flex; + flex-direction: column; +} + +.row > .center{ + align-items: center; + justify-content: center; +} + +.row > .center-fixed{ + text-align: center; +} + +.row > .left{ + -webkit-box-align: start; + align-items: flex-start; +} + +.row > .right{ + -webkit-box-align: end; + align-items: flex-end; +} + +.row > .top{ + justify-content: flex-start; +} + +.row > .bottom{ + justify-content: flex-end; +} + +@media screen and (max-width: 900px){ + .row > .to-center{ + align-items: center !important; + } +} + +/* - 隐藏栅格功能 */ +@media screen and (max-width: 600px){ + .row > .hide-s{ display: none; } +} + +@media screen and (max-width: 900px){ + .row > .hide-m{ display: none; } +} + +@media screen and (max-width: 1024px){ + .row > .hide-l{ display: none; } +} + +/* 4 - 动画 +-------------------------------- */ + +/* - 淡入淡出 */ +@keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } } +@-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } } + +@keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } } +@-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } } + +@keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } } +@-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } } + +@keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } } +@-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } } + +@keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } } +@-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } } + +@keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } } +@-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } } + +/* - 淡入缩放 */ +@keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } } +@-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } } + +@keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } } +@-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } } + +@keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } } +@-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } } + +@keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } } +@-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } } + +@keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } } +@-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } } + +@keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } } +@-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } } + +/* - 平移 */ +@keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } } +@-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } } + +@keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } } +@-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } } + +/* - 旋转 */ +@keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } +@-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } + +/* - 弹跳 */ +@keyframes jump{ + 0% { + transform: translateY(0) scale(1.15,.8) + } + + 20% { + transform: translateY(-35px) scaleY(1.1) + } + + 50% { + transform: translateY(-50px) scale(1) + } + + 80% { + transform: translateY(-35px) scale(1) + } + + to { + transform: translateY(0) scale(1.15,.8) + } +} + +/* 5 - 组件 +-------------------------------- */ + +[ks-tag]{ position: relative } +[ks-tag]:before, [ks-tag]:after{ position: absolute } + +[ks-tag]:before{ + width: 0; + height: 0; + opacity: 0; + content: ''; + position: absolute; + transition: opacity .3s; + border: .5rem solid transparent; +} + +[ks-tag~=top]:after{ + left: 50%; + bottom: 100%; + margin-bottom: 1rem; + transform: translateX(-50%); +} +[ks-tag~=bottom]:after{ + top: 100%; + left: 50%; + margin-top: 1rem; + transform: translateX(-50%); +} +[ks-tag~=left]:after{ + right: 100%; + margin-right: 1rem; +} +[ks-tag~=right]:after{ + left: 100%; + margin-left: 1rem; +} + +[ks-tag=top]:before{ + bottom: 100%; + border-top-color: rgba(0, 0, 0, .7); +} + +[ks-tag=bottom]:before{ + top: 100%; + border-bottom-color: rgba(0, 0, 0, .7); +} +[ks-tag=left]:before{ + right: 100%; + margin-top: .5rem; + border-left-color: rgba(0, 0, 0, .7); +} +[ks-tag=right]:before{ + left: 100%; + margin-top: .5rem; + border-right-color: rgba(0, 0, 0, .7); +} + +[ks-text]:hover:before, [ks-text]:hover:after{ opacity: 1 } + +[ks-text]:after{ + opacity: 0; + color: #fff; + font-size: .85em; + padding: .25rem .5rem; + border-radius: .5em; + white-space: nowrap; + pointer-events: none; + content: attr(ks-text); + transition: opacity .3s; + background: rgba(0, 0, 0, .7); +} + +/* - 弹窗 */ +notice{ + top: 0; + left: 0; + right: 0; + z-index: 10; + padding: 1em; + position: fixed; + user-select: none; + pointer-events: none; +} + +.ks-notice{ + color: #fff; + display: table; + background: #333; + border-radius: 3em; + pointer-events: auto; + margin: 0 auto 1em auto; + box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2); + animation: fade-small-large .3s both; + -webkit-animation: fade-small-large .3s both; +} + +.ks-notice.remove{ + animation: fade-in-top .3s both reverse; + -webkit-animation: fade-in-top .3s both reverse; +} + +/* -- 弹窗颜色 */ +.ks-notice.red{ + background: #ea644a; + background: var(--red); +} + +.ks-notice.yellow{ + background: #ffb03a; + background: var(--yellow); +} + +.ks-notice.blue{ + background: #3498db; + background: var(--blue); +} + +.ks-notice.green{ + background: #27a17e; + background: var(--green); +} + +.ks-notice > span{ + padding: .5em 1em; + display: table-cell; + vertical-align: middle; +} + +.ks-notice .close{ + cursor: pointer; + border-radius: 0 1em 1em 0; + transition: background .3s; +} + +.ks-notice .close:hover{ + background: rgba(0, 0, 0, .1); +} + +.ks-notice .close:after{ + content: '×'; + font: inherit; +} + +/* - 图片放大 */ +[ks-image=active]{ + cursor: pointer; + cursor: zoom-in; +} + +.ks-image{ + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 66; + position: fixed; + user-select: none; + animation: fade-in .3s both; + -webkit-animation: fade-in .3s both; +} +.ks-image.loading{ cursor: wait } +.ks-image.remove:before{ + animation: fade-off .3s both; + -webkit-animation: fade-off .3s both; +} + +.ks-image:before{ + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ''; + position: absolute; + background: rgba(0, 0, 0, .6); +} + +.ks-image .ks-prev, .ks-image .ks-next{ + top: 0; + bottom: 0; + width: 10%; + height: 5em; + margin: auto; + max-width: 5em; + cursor: pointer; + position: absolute; + transition: opacity .3s, transform .3s; +} +.ks-image .ks-prev:hover{ transform: translateX(-.5em) } +.ks-image .ks-next:hover{ transform: translateX(.5em) } + +.ks-image .ks-prev{ + left: 0; + background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIj48cGF0aCBkPSJNMzI0LjIxMTUxNyA1MTEuODA1NjMxIDc4Ny44ODk1OTQgNzMuMDgyNTgzYzE2LjE5NDIyLTE2LjYzMDM2NSAxNi4xOTQyMi00My45NzQ3MDQgMC02MC42MDUwNjgtMTYuMTk0MjItMTYuNjMwMzY1LTQyLjQ5NTYwNy0xNi42MzAzNjUtNTguNjEzOTc2IDBMMjM1Ljc1MDExMyA0NzkuMzYwMzAyYy04LjY0NzAzMSA4Ljk2OTM5OC0xMi4zNDQ3NzUgMjAuOTM0OTE3LTExLjcxOTAwMyAzMi40NDUzMjktMC42NDQ3MzUgMTEuOTA4NjMgMy4wNzE5NzIgMjMuODc0MTQ5IDExLjcxOTAwMyAzMi44MjQ1ODVsNDkzLjUwNjU0MiA0NjYuODgyNzg4YzE2LjExODM2OSAxNi42NDkzMjcgNDIuNDM4NzE4IDE2LjY0OTMyNyA1OC42MTM5NzYgMCAxNi4xOTQyMi0xNy4wODU0NzEgMTYuMTk0MjItNDMuOTc0NzA0IDAtNjAuNjA1MDY4TDMyNC4yMTE1MTcgNTExLjgwNTYzMSI+PC9wYXRoPjwvc3ZnPg==); +} +.ks-image .ks-next{ + right: 0; + background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC45KSI+PHBhdGggZD0iTTEzNi43LDEwMGwtOTAuNiw4NS44Yy0zLjIsMy4yLTMuMiw4LjUsMCwxMS44YzMuMiwzLjMsOC4zLDMuMywxMS40LDBsOTYuNC05MS4yYzEuNy0xLjcsMi40LTQuMSwyLjMtNi40YzAuMS0yLjItMC42LTQuNi0yLjMtNi4zTDU3LjYsMi40Yy0zLjEtMy4yLTguMy0zLjItMTEuNCwwcy0zLjIsOC42LDAsMTEuOEwxMzYuNywxMDAiLz48L3N2Zz4NCg==); +} + +.ks-image .ended{ + opacity: .5; + cursor: no-drop; +} + +.ks-image .ks-ball{ + top: 1em; + right: 1em; + width: 2em; + height: 2em; + opacity: 0; + border-radius: 66%; + position: absolute; + pointer-events: none; + transition: opacity .3s; + border: .5em #fff solid; + border-left-color: #3498db; + animation: rotate .5s linear infinite paused; + -webkit-animation: rotate .5s linear infinite paused; +} +.ks-image.loading .ks-ball{ + opacity: 1; + animation-play-state: running; +} + +.ks-image img{ + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + max-width: 80%; + max-height: 90%; + cursor: zoom-out; + position: absolute; + transition: transform .3s; + animation: fade-small-large .3s backwards; + -webkit-animation: fade-small-large .3s backwards; +} +.ks-image.remove img, .ks-image.remove .ks-prev, .ks-image.remove .ks-next{ + animation: fade-large-small .3s both; + -webkit-animation: fade-large-small .3s both; +} + +.ks-image img[src$=".jpg"]{ box-shadow: 0 5px 15px rgba(0, 0, 0, .5) } + +/* ---- + +Copyright (C) 2020 Dreamer-Paul. + +---- */ \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..67070c2 --- /dev/null +++ b/src/assets/main.css @@ -0,0 +1,173 @@ +body { + background: #f5f5f5; +} + +@media screen and (min-width: 769px) { + body { + margin-top: 3.5em; + } +} + +.the-icon { + font-size: inherit; +} + +.btn { + border-radius: 0.5em; +} + +form .btn{ + min-width: 10em; +} + +@media screen and (max-width: 600px){ + form .btn{ + width: 100%; + } +} + +input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], +select, textarea{ + background: #fff; + border-color: #ddd; + border-radius: .5em; +} + +.head-menu { + display: flex; + color: #fff; + background: var(--green); + z-index: 1; + position: fixed; + top: 0; + left: 0; + right: 0; +} +.head-menu a { + color: inherit; + display: block; + padding: 1em; +} + +.head-title { + top: 0; + left: 0; + right: 0; + z-index: 1; + display: flex; + position: static; + background: #fff; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.1); +} + +.head-title h2 { + flex: 1 1 auto; + height: 3.75rem; + margin-bottom: 0; + padding: 0.75rem 1rem; +} + +.head-title a { + color: inherit; + display: block; + padding: 0.75rem 1rem; +} + +.head-title .left-back { + cursor: pointer; + padding: 0.75rem 1rem; + font-size: 1.2em; +} + +.head-title .left-back ~ h2{ + padding-left: 0; +} + +.head-title .right-actions { + display: flex; +} + +.head-title .the-icon:before { + /* display: block; */ + font-size: 1.25em; +} + +@media screen and (max-width: 768px) { + .head-menu { + top: auto; + left: 0; + right: 0; + bottom: 0; + position: fixed; + + line-height: 1.25; + font-size: 0.875em; + text-align: center; + + color: #666; + background: #fff; + } + .head-menu a { + flex: 1 1 25%; + padding: 0.25em; + } + .head-menu .active { + color: var(--green); + } + .head-menu .the-icon { + display: block; + font-size: 2em; + } + + .head-title { + display: flex; + position: fixed; + color: #fff; + background: var(--green); + } +} + +@media screen and (min-width: 769px) { + .head-menu .the-icon { + margin-right: 0.5em; + } + .head-menu .active { + box-shadow: 0 -4px 0 var(--yellow) inset; + } +} + +section { + margin-bottom: 3em; +} + +h1, +h2, +h3 { + font-weight: 300; +} + +.wrap { + padding: 0 1em; +} + +main { + padding: 2em 0; +} +main.full { + padding: 0; +} + +@media screen and (max-width: 768px) { + main { + margin-top: 3.75em; + margin-bottom: 4em; + } + section { + margin-bottom: 2em; + } +} + +footer { + margin: 3em 0; + text-align: center; +} diff --git a/src/components/AddFood.vue b/src/components/AddFood.vue new file mode 100644 index 0000000..5d06a85 --- /dev/null +++ b/src/components/AddFood.vue @@ -0,0 +1,105 @@ + + + \ No newline at end of file diff --git a/src/components/FoodBox.vue b/src/components/FoodBox.vue new file mode 100644 index 0000000..6c4c576 --- /dev/null +++ b/src/components/FoodBox.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/src/components/FoodList.vue b/src/components/FoodList.vue new file mode 100644 index 0000000..af023c5 --- /dev/null +++ b/src/components/FoodList.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/src/components/PageNav.vue b/src/components/PageNav.vue new file mode 100644 index 0000000..262595c --- /dev/null +++ b/src/components/PageNav.vue @@ -0,0 +1,95 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..83a6b3b --- /dev/null +++ b/src/main.js @@ -0,0 +1,51 @@ +import Vue from 'vue' +import App from './App.vue' +import router from './router' +import store from './store' + +import axios from 'axios' + +// let API_URL = "http://food.backend"; +let API_URL = "//food.cstack.top/api/"; + +Vue.prototype.$serv = API_URL; + +Vue.prototype.$http = axios.create({baseURL: API_URL}); + +Vue.config.productionTip = false + +class Order { + static get(){ + let item; + + if(!localStorage.getItem("today-order")){ + item = { + b: [], + l: [], + d: [] + }; + } + else{ + item = JSON.parse(localStorage.getItem("today-order")) + } + + return item; + } + + static add(type, item){ + console.log(type, item); + let a = this.get(); + + a[type].push(parseInt(item)); + + localStorage.setItem("today-order", JSON.stringify(a)); + } +} + +Vue.prototype.$order = Order; + +new Vue({ + router, + store, + render: h => h(App) +}).$mount('#app') diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..f863fac --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,113 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import Home from '../views/Home.vue' + +import Order from '../views/Order.vue' + +//require('font-awesome'); +require('../../node_modules/font-awesome/css/font-awesome.min.css'); + +Vue.use(VueRouter) + +const routes = [ + { + path: '/', + name: 'Home', + component: Home, + meta: { + title: "首页" + } + }, + { + path: '/order', + name: 'Order', + component: Order, + meta: { + title: "点菜" + } + }, + { + path: '/food', + name: 'List', + component: () => import('../views/Food/Index.vue'), + meta: { + title: "菜谱", + keepAlive: true, + menu: [ + { + icon: "add", + link: "/food/add" + }, + { + icon: "search", + link: "/food/search" + } + ] + } + }, + { + path: '/food/add', + name: 'FoodAdd', + component: () => import('../views/Food/Add.vue'), + meta: { + title: "增加菜品", + back: true + } + }, + { + path: '/food/:foodId', + name: 'Food', + component: () => import('../views/Food/Item.vue'), + meta: { + title: "菜品详情" + } + }, + { + path: "/user", + name: "User", + component: () => import('../views/User/Index.vue'), + meta: { + title: "我的" + } + }, + { + path: "/user/profile", + name: "UserProfile", + component: () => import('../views/User/Profile.vue'), + meta: { + title: "个人资料", + back: true + } + }, + { + path: "/user/settings", + name: "UserSettings", + component: () => import('../views/User/Settings.vue'), + meta: { + title: "偏好设置", + back: true + } + } + /*{ + path: '/about', + name: 'About', + // route level code-splitting + // this generates a separate chunk (about.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import(/* webpackChunkName: "about" '../views/About.vue') + }*/ +] + +const router = new VueRouter({ + routes, + linkExactActiveClass: "active", +}); + +router.beforeEach((to, from, next) => { + if(to.meta.title) { + document.title = to.meta.title + " - 菜管"; //在路由里面写入的meta里面的title字段 + } + next(); +}); + +export default router diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..332b916 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,15 @@ +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +export default new Vuex.Store({ + state: { + }, + mutations: { + }, + actions: { + }, + modules: { + } +}) diff --git a/src/views/Food/Add.vue b/src/views/Food/Add.vue new file mode 100644 index 0000000..e363913 --- /dev/null +++ b/src/views/Food/Add.vue @@ -0,0 +1,74 @@ + + + \ No newline at end of file diff --git a/src/views/Food/Index.vue b/src/views/Food/Index.vue new file mode 100644 index 0000000..8909803 --- /dev/null +++ b/src/views/Food/Index.vue @@ -0,0 +1,117 @@ + + + \ No newline at end of file diff --git a/src/views/Food/Item.vue b/src/views/Food/Item.vue new file mode 100644 index 0000000..1e67dc3 --- /dev/null +++ b/src/views/Food/Item.vue @@ -0,0 +1,198 @@ + + + + + \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..0d454ed --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/src/views/Order.vue b/src/views/Order.vue new file mode 100644 index 0000000..03bb8fc --- /dev/null +++ b/src/views/Order.vue @@ -0,0 +1,154 @@ + + + \ No newline at end of file diff --git a/src/views/Upload.vue b/src/views/Upload.vue new file mode 100644 index 0000000..0b3615d --- /dev/null +++ b/src/views/Upload.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/User/Index.vue b/src/views/User/Index.vue new file mode 100644 index 0000000..cb929b0 --- /dev/null +++ b/src/views/User/Index.vue @@ -0,0 +1,53 @@ + + + \ No newline at end of file diff --git a/src/views/User/Profile.vue b/src/views/User/Profile.vue new file mode 100644 index 0000000..631c4fe --- /dev/null +++ b/src/views/User/Profile.vue @@ -0,0 +1,30 @@ + + + \ No newline at end of file diff --git a/src/views/User/Settings.vue b/src/views/User/Settings.vue new file mode 100644 index 0000000..62f6a91 --- /dev/null +++ b/src/views/User/Settings.vue @@ -0,0 +1,18 @@ + + + \ No newline at end of file

{{$route.meta.title}}

{{item.name}}

{{item.name}}

{{ food.name }}

欢迎回来~

早餐

午餐

晚餐

今天选择的菜式如下：

早餐：

午餐：

晚餐

这些是为你随机挑选的菜式：

素菜

荤菜

汤

保罗