6/14 完成客户端页面整合及缓存控制

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+VUE_APP_NODE_ENV=dev

.env.production

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_NODE_ENV=prod

.env.production.sit

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_NODE_ENV=prod:sit

.env.production.uat

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_NODE_ENV=prod:uat

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "renren-ui",
+  "version": "5.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build:prod": "vue-cli-service build --mode production",
+    "build:sit": "vue-cli-service build --mode production.sit",
+    "build:uat": "vue-cli-service build --mode production.uat"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "babel-eslint": "^8.0.1",
+    "babel-plugin-component": "^1.1.1",
+    "core-js": "^3.6.5",
+    "echarts": "^5.3.3",
+    "element-theme": "^2.0.1",
+    "element-ui": "^2.15.7",
+    "js-cookie": "^2.2.1",
+    "lodash": "^4.17.19",
+    "qs": "^6.9.4",
+    "quill": "^1.3.7",
+    "sass": "^1.26.5",
+    "sass-loader": "^9.0.2",
+    "screenfull": "^4.2.1",
+    "svg-sprite-loader": "^5.0.0",
+    "vue": "^2.6.11",
+    "vue-cron": "^1.0.9",
+    "vue-i18n": "^8.18.2",
+    "vue-router": "3.0.7",
+    "vuex": "^3.5.1",
+    "websocket-heartbeat-js": "^1.1.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
+    "element-theme-chalk": "^2.15.7",
+    "natives": "^1.1.6",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
+  "engines": {
+    "node": ">= 8.11.1",
+    "npm": ">= 5.6.0"
+  }
+}

public/front/api/address.js

@@ -0,0 +1,67 @@
+//获取所有地址
+function addressListApi() {
+    return $axios({
+      'url': '/addressBook/list',
+      'method': 'get',
+    })
+  }
+
+//获取最新地址
+function addressLastUpdateApi() {
+    return $axios({
+      'url': '/addressBook/lastUpdate',
+      'method': 'get',
+    })
+}
+
+//新增地址
+function  addAddressApi(data){
+    return $axios({
+        'url': '/addressBook',
+        'method': 'post',
+        data
+      })
+}
+
+//修改地址
+function  updateAddressApi(data){
+    return $axios({
+        'url': '/addressBook',
+        'method': 'put',
+        data
+      })
+}
+
+//删除地址
+function deleteAddressApi(params) {
+    return $axios({
+        'url': '/addressBook',
+        'method': 'delete',
+        params
+    })
+}
+
+//查询单个地址
+function addressFindOneApi(id) {
+  return $axios({
+    'url': `/addressBook/${id}`,
+    'method': 'get',
+  })
+}
+
+//设置默认地址
+function  setDefaultAddressApi(data){
+  return $axios({
+      'url': '/addressBook/default',
+      'method': 'put',
+      data
+    })
+}
+
+//获取默认地址
+function getDefaultAddressApi() {
+  return $axios({
+    'url': `/addressBook/default`,
+    'method': 'get',
+  })
+}

public/front/api/login.js

@@ -0,0 +1,26 @@
+function loginApi(data) {
+    return $axios({
+      'url': '/user/login',
+      'method': 'post',
+      data
+    })
+  }
+
+
+function sendMsgApi(data) {
+    // return this.$http['post']('/user/sendMsg', data)
+    return $axios({
+        'url': '/user/sendMsg',
+        'method': 'post',
+        data
+    })
+}
+
+function loginoutApi() {
+  return $axios({
+    'url': '/user/loginout',
+    'method': 'post',
+  })
+}
+
+  

public/front/api/main.js

@@ -0,0 +1,70 @@
+//获取所有的菜品分类
+function categoryListApi() {
+    return $axios({
+      'url': '/category/list',
+      'method': 'get'
+    })
+  }
+
+//获取菜品分类对应的菜品
+function dishListApi(data) {
+    return $axios({
+        'url': '/dish/list',
+        'method': 'get',
+        params:{...data}
+    })
+}
+
+//获取菜品分类对应的套餐
+function setmealListApi(data) {
+    return $axios({
+        'url': '/setmeal/list',
+        'method': 'get',
+        params:{...data}
+    })
+}
+
+//获取购物车内商品的集合
+function cartListApi(data) {
+    return $axios({
+        'url': '/shoppingCart/list',
+        'method': 'get',
+        params:{...data}
+    })
+}
+
+//购物车中添加商品
+function  addCartApi(data){
+    return $axios({
+        'url': '/shoppingCart/add',
+        'method': 'post',
+        data
+      })
+}
+
+//购物车中修改商品
+function  updateCartApi(data){
+    return $axios({
+        'url': '/shoppingCart/sub',
+        'method': 'post',
+        data
+      })
+}
+
+//删除购物车的商品
+function clearCartApi() {
+    return $axios({
+        'url': '/shoppingCart/clean',
+        'method': 'delete',
+    })
+}
+
+//获取套餐的全部菜品
+function setMealDishDetailsApi(id) {
+    return $axios({
+        'url': `/setmeal/dish/${id}`,
+        'method': 'get',
+    })
+}
+
+

public/front/api/order.js

@@ -0,0 +1,34 @@
+//提交订单
+function  addOrderApi(data){
+    return $axios({
+        'url': '/order/submit',
+        'method': 'post',
+        data
+      })
+}
+
+//查询所有订单
+function orderListApi() {
+  return $axios({
+    'url': '/order/list',
+    'method': 'get',
+  })
+}
+
+//分页查询订单
+function orderPagingApi(data) {
+  return $axios({
+      'url': '/order/userPage',
+      'method': 'get',
+      params:{...data}
+  })
+}
+
+//再来一单
+function orderAgainApi(data) {
+  return $axios({
+      'url': '/order/again',
+      'method': 'post',
+      data
+  })
+}

public/front/cartData.json

@@ -0,0 +1 @@
+{"code":1,"msg":null,"data":[],"map":{}}

public/front/index.html

@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
+    <title>美团</title>
+    <link rel="icon" href="images/favicon.ico">
+    <!--不同屏幕尺寸根字体设置-->
+    <script src="./js/base.js"></script>
+    <!--element-ui的样式-->
+    <link rel="stylesheet" href="../backend/plugins/element-ui/index.css" />
+    <!--引入vant样式-->
+    <link rel="stylesheet" href="styles/vant.min.css"/>
+    <!-- 引入样式  -->
+    <link rel="stylesheet" href="styles/index.css" />
+    <!--本页面内容的样式-->
+    <link rel="stylesheet" href="styles/main.css" />
+  </head>
+  <body>
+    <div id="main" class="app">
+      <div class="divHead">
+        <img src="./images/user.png" @click="toUserPage"/>
+      </div>
+      <div class="divTitle">
+        <div class="divStatic">
+          <img src="./images/logo.png"  class="logo"/>
+          <div class="divDesc">
+            <div class="divName">美团美食</div>
+            <div class="divSend">
+                <span><img src="./images/time.png"/> 距离1.5km</span>
+                <span><img src="./images/money.png"/> 配送费6元</span>
+                <span><img src="./images/location.png"/> 预计时长12min</span>
+            </div>
+          </div>
+        </div>
+        <div class="divDesc">
+          简介: 美团中餐厅是美团点餐的独立的品牌，定位“大众 化的美食外送餐饮”，旨为顾客打造专业美食。
+        </div>
+      </div>
+      <div class="divBody">
+        <div class="divType">
+          <ul>
+            <li v-for="(item,index) in categoryList" :key="index" @click="categoryClick(index,item.id,item.type)" :class="{active:activeType === index}">{{item.name}}</li>
+          </ul>
+        </div>
+        <div class="divMenu">
+          <div>
+            <div class="divItem" v-for="(item,index) in dishList" :key="index" @click="dishDetails(item)">
+              <el-image :src="imgPathConvert(item.image)" >
+                <div slot="error" class="image-slot">
+                  <img src="./images/noImg.png"/>
+                </div>
+              </el-image>
+              <div>
+                <div class="divName">{{item.name}}</div>
+                <div class="divDesc">{{item.description}}</div>
+                <div class="divDesc">{{'月销' + (item.saleNum ? item.saleNum : 0)  }}</div>
+                <div class="divBottom"><span>￥</span><span>{{item.price/100}}</span></div>
+                <div class="divNum">
+                  <div class="divSubtract" v-if="item.number > 0">
+                    <img src="./images/subtract.png" @click.prevent.stop="subtractCart(item)"/>
+                  </div>
+                  <div class="divDishNum">{{item.number}}</div>
+                  <div class="divTypes" v-if="item.flavors && item.flavors.length > 0 && !item.number " @click.prevent.stop="chooseFlavorClick(item)">选择规格</div>
+                  <div class="divAdd" v-else>
+                    <img src="./images/add.png" @click.prevent.stop="addCart(item)"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="divLayer">
+        <div class="divLayerLeft"></div>
+        <div class="divLayerRight"></div>
+      </div>
+      <div class="divCart" v-if="categoryList.length > 0">
+          <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}" @click="openCart"></div>
+          <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if="cartData && cartData.length > 0">{{ goodsNum }}</div>
+          <div class="divNum">
+              <span>￥</span>
+              <span>{{goodsPrice}}</span>
+          </div>
+          <div class="divPrice"></div>
+          <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @click="toAddOrderPage">去结算</div>
+        </div>
+        <van-dialog v-model="dialogFlavor.show" :show-confirm-button="false" class="dialogFlavor" ref="flavorDialog">
+          <div class="dialogTitle">{{dialogFlavor.name}}</div>
+          <div class="divContent">
+            <div v-for="flavor in dialogFlavor.flavors" :key="flavor.id">
+                <div class="divFlavorTitle">{{flavor.name}}</div>
+                <span v-for="item in JSON.parse(flavor.value)" 
+                :key="item"  
+                @click="flavorClick(flavor,item)"
+                :class="{spanActive:flavor.dishFlavor === item}"
+                >{{item}}</span>
+            </div>
+          </div>
+          <div class="divBottom">
+            <div><span class="spanMoney">￥</span>{{dialogFlavor.price/100}}</div>
+            <div @click="dialogFlavorAddCart">加入购物车</div>
+          </div>
+          <div class="divFlavorClose" @click="dialogFlavor.show = false">
+            <img src="./images/close.png"/>
+          </div>
+        </van-dialog>
+        <van-popup v-model="cartDialogShow" position="bottom" :style="{ height: '50%' }" class="dialogCart">
+          <div class="divCartTitle">
+            <div class="title">购物车</div>
+            <div class="clear" @click="clearCart">
+              <i class="el-icon-delete"></i> 清空
+            </div>
+          </div>
+          <div class="divCartContent">
+            <div v-for="item in cartData" :key="item.id" class="divCartItem">
+              <el-image :src="imgPathConvert(item.image)" >
+                <div slot="error" class="image-slot">
+                  <img src="./images/noImg.png"/>
+                </div>
+              </el-image>
+              <div class="divDesc">
+                <div class="name">{{item.name}}</div>
+                <div class="price">
+                  <span class="spanMoney">￥</span>{{item.amount}}</div>
+              </div>
+              <div class="divNum">
+                <div class="divSubtract">
+                  <img src="./images/subtract.png" @click="cartNumberSubtract(item)"/>
+                </div>
+                <div class="divDishNum">{{item.number}}</div>
+                <div class="divAdd">
+                  <img src="./images/add.png" @click="cartNumAdd(item)"/>
+                </div>
+              </div>
+              <div class="divSplit"></div>
+              </div>
+          </div>
+        </van-popup>
+        <van-dialog v-model="detailsDialog.show" 
+                    :show-confirm-button="false" 
+                    class="detailsDialog" 
+                    ref="detailsDialog"
+                    v-if="detailsDialog.show"
+                    >
+          <div class="divContainer">
+            <el-image :src="imgPathConvert(detailsDialog.item.image)" >
+              <div slot="error" class="image-slot">
+                <img src="./images/noImg.png"/>
+              </div>
+            </el-image>
+            <div class="title">{{detailsDialog.item.name}}</div>
+            <div class="content">{{detailsDialog.item.description}}</div>
+          </div>
+          <div class="divNum">
+            <div class="left">
+              <span>￥</span><span>{{detailsDialog.item.price/100}}</span>
+            </div>
+            <div class="right">
+                <div class="divSubtract" v-if="detailsDialog.item.number > 0">
+                  <img src="./images/subtract.png" @click="subtractCart(detailsDialog.item)"/>
+                </div>
+                <div class="divDishNum">{{detailsDialog.item.number}}</div>
+                <div class="divTypes" v-if="detailsDialog.item.flavors && detailsDialog.item.flavors.length > 0 && !detailsDialog.item.number " @click ="chooseFlavorClick(detailsDialog.item)">选择规格</div>
+                <div class="divAdd" v-else>
+                  <img src="./images/add.png" @click="addCart(detailsDialog.item)"/>
+                </div>
+            </div>
+          </div>
+          <div class="detailsDialogClose" @click="detailsDialog.show = false">
+            <img src="./images/close.png"/>
+          </div>
+        </van-dialog>
+        <van-dialog v-model="setMealDialog.show" 
+                    :show-confirm-button="false" 
+                    class="setMealDetailsDialog" 
+                    ref="setMealDetailsDialogd"
+                    v-if="setMealDialog.show"
+                    >
+          <div class="divContainer">
+            <div class="title">{{setMealDialog.item.name}}</div>
+              <div class="item" v-for="(item,index) in setMealDialog.item.list" :key="index">
+                <el-image :src="imgPathConvert(item.image)">
+                  <div slot="error" class="image-slot">
+                    <img src="./images/noImg.png"/>
+                  </div>
+                </el-image>
+                <div class="divSubTitle">{{item.name + '(' + item.copies + '份)' }}
+                  <div class="divPrice">
+                    <span>￥</span><span>{{item.price/100}}</span>
+                  </div>
+                </div>                
+                <div class="content">{{item.description}}</div>
+              </div>
+            </div>
+          <div class="divNum">
+              <div class="left">
+                <span>￥</span><span>{{setMealDialog.item.price/100}}</span>
+              </div>
+              <div class="right">
+                  <div class="divSubtract" v-if="setMealDialog.item.number > 0">
+                    <img src="./images/subtract.png" @click="subtractCart(setMealDialog.item)"/>
+                  </div>
+                  <div class="divDishNum">{{setMealDialog.item.number}}</div>
+                  <div class="divAdd" v-if="setMealDialog.item.number">
+                    <img src="./images/add.png" @click="addCart(setMealDialog.item)"/>
+                  </div>
+                  <div class="addCart"  @click="addCart(setMealDialog.item)" v-if="!setMealDialog.item.number">加入购物车</div>
+              </div>
+          </div>
+          <div class="detailsDialogClose" @click="setMealDialog.show = false">
+            <img src="./images/close.png"/>
+          </div>
+        </van-dialog>
+    </div>
+        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+        <script src="../backend/plugins/vue/vue.js"></script>
+        <!-- 引入组件库 -->
+        <script src="../backend/plugins/element-ui/index.js"></script>
+        <!-- 引入vant样式 -->
+        <script src="./js/vant.min.js"></script>        
+        <!-- 引入axios -->
+        <script src="../backend/plugins/axios/axios.min.js"></script>
+        <script src="./js/request.js"></script>
+        <script src="./js/common.js"></script>
+        <script src="./api/main.js"></script>
+  </body>
+  <script>
+      new Vue({
+          el:'#main',
+          data(){
+            return {
+              //左边菜品类别index
+              activeType:0,
+              categoryList:[],
+              categoryId:undefined,
+              dishList:[],
+              cartData:[],
+              dialogFlavor:{
+                name:'',
+                flavors:[],
+                dishId:undefined,
+                price:undefined,
+                show:false,
+                image:''
+              },
+              cartDialogShow:false,
+              detailsDialog:{
+                show:false,
+                item:{image:''}
+              },
+              setMealDialog:{
+                show:false,
+                item:{}
+              },
+            }
+          },
+          computed:{
+            goodsNum(){
+              let num = 0
+              this.cartData.forEach(item=>{
+                num += item.number 
+              })
+              if(num <99){
+                return num
+              }else{
+                return '99+'
+              }
+            },
+            goodsPrice(){
+              let price = 0
+              this.cartData.forEach(item=>{
+                price += (item.number * item.amount)
+              })
+              return price
+            }
+          },
+          created(){
+          },
+          watch:{
+            'dialogFlavor.show'(flag){
+              if(flag){
+                document.querySelector('.divCart').style.zIndex = 1
+              }else{
+                document.querySelector('.divCart').style.zIndex = 3000
+              }
+            },
+          },
+          mounted(){
+            this.initData()
+          },
+          methods:{
+            //初始化数据
+            initData(){
+              Promise.all([categoryListApi(),cartListApi({})]).then(res=>{
+                //获取分类数据
+                if(res[0].code === 1){
+                  this.categoryList = res[0].data
+                  if(Array.isArray(res[0].data) && res[0].data.length > 0){
+                    this.categoryId = res[0].data[0].id
+                    if(res[0].data[0].type === 1){
+                      this.getDishList()
+                    }else{
+                      this.getSetmealData()
+                    }
+                  }
+                }else{
+                  this.$notify({ type:'warning', message:res[0].msg});
+                }
+                //获取菜品数据
+                if(res[1].code === 1){
+                this.cartData = res[1].data
+                }else{
+                  this.$notify({ type:'warning', message:res[1].msg});
+                }
+              })
+            },
+            //分类点击
+            categoryClick(index,id,type){
+              this.activeType = index
+              this.categoryId = id
+              if(type === 1){//菜品
+                this.getDishList()
+              }else{
+                this.getSetmealData()
+              }
+            },
+            //获取菜品数据
+            async getDishList(){
+              if(!this.categoryId){
+                return
+              }
+              const res = await dishListApi({categoryId:this.categoryId,status:1})
+              if(res.code === 1){
+                let dishList = res.data
+                const cartData  = this.cartData
+                if(dishList.length > 0 && cartData.length > 0){
+                  dishList.forEach(dish=>{
+                    cartData.forEach(cart=>{
+                      if(dish.id === cart.dishId){
+                        dish.number = cart.number
+                      }
+                    })
+                  })
+                }
+                this.dishList = dishList
+              }else{
+                this.$notify({ type:'warning', message:res.msg});
+              }
+            },
+            //获取套餐数据setmealId
+            async getSetmealData(){
+              if(!this.categoryId){
+                return
+              }
+              const res = await setmealListApi({categoryId:this.categoryId,status:1})
+              if(res.code === 1){
+                  let dishList = res.data
+                  const cartData  = this.cartData
+                  if(dishList.length > 0 && cartData.length > 0){
+                    dishList.forEach(dish=>{
+                      cartData.forEach(cart=>{
+                        if(dish.id === cart.setmealId){
+                          dish.number = cart.number
+                        }
+                      })
+                    })
+                  }
+                  this.dishList = dishList
+              }else{
+                this.$notify({ type:'warning', message:res.msg});
+              }
+            },
+            //获取购物车数据
+            async getCartData(){
+              const res = await cartListApi({})
+              if(res.code === 1){
+                this.cartData = res.data
+              }else{
+                this.$notify({ type:'warning', message:res.msg});
+              }
+            },
+            //菜单中往购物车中添加商品
+            async addCart(item){
+              let params = {
+                amount:item.price/100,//金额
+                dishFlavor:item.dishFlavor,//口味  如果没有传undefined
+                dishId:undefined,//菜品id
+                setmealId:undefined,//套餐id
+                name:item.name,
+                image:item.image
+              }
+              if(Array.isArray(item.flavors)){//表示是菜品
+                params.dishId = item.id
+              }else{//表示套餐 套餐没有口味
+                params.setmealId = item.id
+              }
+              const res = await addCartApi(params)
+              if(res.code === 1){
+                this.dishList.forEach(dish=>{
+                  if(dish.id === item.id){
+                    dish.number = res.data.number
+                  }
+                })
+                if(this.setMealDialog.show){
+                  item.number = res.data.number
+                }
+                this.getCartData()
+              }else{
+                this.$notify({ type:'warning', message:res.msg});
+              }
+            },
+
+            //菜单中减少选中的商品
+            async subtractCart(item){
+                let params = {
+                  dishId:item.id,
+                }
+                if(!Array.isArray(item.flavors)){
+                  params = {
+                    setmealId:item.id,
+                  }
+                }
+                const res = await updateCartApi(params)
+                if(res.code === 1){
+                this.dishList.forEach(dish=>{
+                  if(dish.id === item.id){
+                    dish.number = (res.data.number === 0 ? undefined : res.data.number)
+                  }
+                })
+                if(this.setMealDialog.show){
+                  item.number = (res.data.number === 0 ? undefined : res.data.number)
+                }
+                this.getCartData()
+                }else{
+                  this.$notify({ type:'warning', message:res.msg});
+                }
+            },
+            
+            //展开购物车
+            openCart(){
+              if(this.cartData.length > 0){
+                this.cartDialogShow = true
+              }
+            },
+            //购物车中增加商品数量
+            async cartNumAdd(item){
+              let params = {
+                amount:item.amount,//金额
+                dishFlavor:item.dishFlavor,//口味  如果没有传undefined
+                dishId:item.dishId,//菜品id
+                setmealId:item.setmealId,//套餐id
+                name:item.name,
+                image:item.image
+              }
+              const res = await addCartApi(params)
+              if(res.code === 1){
+                this.dishList.forEach(dish=>{
+                  if(dish.id === (item.dishId || item.setmealId)){
+                    dish.number = res.data.number
+                  }
+                })
+                console.log(this.dishList)
+                this.getCartData()
+              }else{
+                this.$notify({ type:'warning', message:res.msg});
+              }
+            },
+            //购物车中减少商品数量
+            async cartNumberSubtract(item){
+              let params = {
+                  dishId:item.dishId,
+                  setmealId:item.setmealId,
+                }
+                const res = await updateCartApi(params)
+                if(res.code === 1){
+                this.dishList.forEach(dish=>{
+                  if(dish.id === (item.dishId || item.setmealId)){
+                    dish.number = (res.data.number === 0 ? undefined : res.data.number)
+                  }
+                })
+                this.getCartData()
+                }else{
+                  this.$notify({ type:'warning', message:res.msg});
+                }
+            },
+            
+            //修改商品列表中的数据number
+            changeDishList(item){
+              for(let ele of this.dishList){
+                if(ele.id === (item.setmealId || item.dishId)){
+                  ele.number = item.number
+                }
+              }
+            },
+            
+            //清空购物车
+            async clearCart(){
+                const res = await clearCartApi()
+                if(res.code === 1){
+                  for(let ele of this.dishList){
+                    ele.number = undefined
+                  }
+                  this.cartData = []
+                  this.cartDialogShow = false
+                }else{
+                  this.$notify({ type:'warning', message:res.msg});
+                }
+            },
+            //点击选择规格
+            chooseFlavorClick(item){
+              this.dialogFlavor = {
+                name:'',
+                flavors:[],
+                dishId:undefined,
+                price:undefined,
+                show:false
+              }
+              this.dialogFlavor={
+                name:item.name,
+                flavors:item.flavors,
+                dishId:item.id,
+                price:item.price,
+                show:true,
+                image:item.image
+              }
+            },
+            flavorClick(flavor,item){
+              flavor.dishFlavor = item
+              //强制刷新dialog的dom
+              this.dialogFlavor.show = false
+              this.dialogFlavor.show = true
+            },
+            //选择规格加入购物车
+            dialogFlavorAddCart(){
+              const dialogFlavor = this.dialogFlavor
+              let flag = true
+              let dishFlavor = []
+              dialogFlavor.flavors.forEach(item=>{
+                if(item.dishFlavor){
+                  dishFlavor.push(item.dishFlavor)
+                }else{
+                      flag = false
+                      Notify({ type: 'warning', message: '请选择'+ item.name });
+                }
+              })
+              if(flag){
+                this.addCart({
+                  price:dialogFlavor.price,
+                  dishFlavor:dishFlavor.join(","),
+                  id:dialogFlavor.dishId,
+                  flavors:[],
+                  image:dialogFlavor.image,
+                  name:dialogFlavor.name
+                })
+                this.dialogFlavor.show = false
+              }
+              
+            },
+            //网络图片路径转换
+            imgPathConvert(path){
+              return imgPath(path)
+            },
+            //跳转到去结算界面
+            toAddOrderPage(){
+              if(this.cartData.length > 0){
+                window.requestAnimationFrame(()=>{
+                  window.location.href ='/front/page/add-order.html'
+                })
+              }
+            },
+            toUserPage(){
+              window.requestAnimationFrame(()=>{
+                window.location.href= '/front/page/user.html'
+              })
+            },
+            async dishDetails(item){
+              //先清除对象数据，如果不行的话dialog使用v-if
+              this.detailsDialog.item = {}
+              this.setMealDialog.item = {}
+              if(Array.isArray(item.flavors)){
+                this.detailsDialog.item = item
+                this.detailsDialog.show = true
+              }else{
+                //显示套餐的数据
+                const res = await setMealDishDetailsApi(item.id)
+                if(res.code === 1){
+                  this.setMealDialog.item = {...item,list:res.data}
+                  this.setMealDialog.show = true
+                }else{
+                  this.$notify({ type:'warning', message:res.msg});
+                }
+              }
+
+            }
+
+          }
+      })
+  </script>
+  </html>

public/front/js/base.js

@@ -0,0 +1,17 @@
+(function (doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function () {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            if (clientWidth > 750) {
+                docEl.style.fontSize = '28px';
+            } else {
+                docEl.style.fontSize = (clientWidth / 375) + 'px';
+            }
+        };
+
+    if (!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window);

public/front/js/common.js

@@ -0,0 +1,23 @@
+var web_prefix = '/front'
+
+function imgPath(path){
+    return path
+}
+
+//将url传参转换为数组
+function parseUrl(url) {
+    // 找到url中的第一个?号
+    var parse = url.substring(url.indexOf("?") + 1),
+        params = parse.split("&"),
+        len = params.length,
+        item = [],
+        param = {};
+
+    for (var i = 0; i < len; i++) {
+        item = params[i].split("=");
+        param[item[0]] = item[1];
+    }
+
+    return param;
+}
+

public/front/js/request.js

@@ -0,0 +1,75 @@
+(function (win) {
+  axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+  // 创建axios实例
+  const service = axios.create({
+    withCredentials:true,
+    // axios中请求配置有baseURL选项，表示请求URL公共部分
+    baseURL: 'http://localhost:8080/api/front',
+    // 超时
+    timeout: 10000
+  })
+  // request拦截器
+  service.interceptors.request.use(config => {
+    // 是否需要设置 token
+    // const isToken = (config.headers || {}).isToken === false
+    // if (getToken() && !isToken) {
+    //   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    // get请求映射params参数
+    if (config.method === 'get' && config.params) {
+      let url = config.url + '?';
+      for (const propName of Object.keys(config.params)) {
+        const value = config.params[propName];
+        var part = encodeURIComponent(propName) + "=";
+        if (value !== null && typeof(value) !== "undefined") {
+          if (typeof value === 'object') {
+            for (const key of Object.keys(value)) {
+              let params = propName + '[' + key + ']';
+              var subPart = encodeURIComponent(params) + "=";
+              url += subPart + encodeURIComponent(value[key]) + "&";
+            }
+          } else {
+            url += part + encodeURIComponent(value) + "&";
+          }
+        }
+      }
+      url = url.slice(0, -1);
+      config.params = {};
+      config.url = url;
+    }
+    return config
+  }, error => {
+      Promise.reject(error)
+  })
+
+  // 响应拦截器
+  service.interceptors.response.use(res => {
+      console.log('---响应拦截器---',res)
+      if (res.data.code === 0 && res.data.msg === 'NOTLOGIN') {// 返回登录页面
+        window.top.location.href = '/front/page/login.html'
+      } else {
+        return res.data
+      }
+    },
+    error => {
+      let { message } = error;
+      if (message == "Network Error") {
+        message = "后端接口连接异常";
+      }
+      else if (message.includes("timeout")) {
+        message = "系统接口请求超时";
+      }
+      else if (message.includes("Request failed with status code")) {
+        message = "系统接口" + message.substr(message.length - 3) + "异常";
+      }
+      window.vant.Notify({
+        message: message,
+        type: 'warning',
+        duration: 5 * 1000
+      })
+      //window.top.location.href = '/front/page/no-wify.html'
+      return Promise.reject(error)
+    }
+  )
+  win.$axios = service
+})(window);

public/front/page/add-order.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="en">
+    <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, maximum-scale=1.0,user-scalable=no,minimal-ui">
+        <title>美团</title>
+        <link rel="icon" href="./../images/favico.ico">
+        <!--不同屏幕尺寸根字体设置-->
+        <script src="./../js/base.js"></script>
+        <!--element-ui的样式-->
+        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+        <!--引入vant样式-->
+        <link rel="stylesheet" href="../styles/vant.min.css"/>
+        <!-- 引入样式  -->
+        <link rel="stylesheet" href="../styles/index.css" />
+        <!--本页面内容的样式-->
+        <link rel="stylesheet" href="./../styles/add-order.css" />
+    </head>
+    <body>
+        <div id="add_order" class="app">
+            <div class="divHead">
+                <div class="divTitle">
+                    <i class="el-icon-arrow-left" @click="goBack"></i>美团
+                </div>
+            </div>
+            <div class="divContent">
+                <div class="divAddress">
+                    <div @click="toAddressPage">                    
+                        <div class="address">{{address.detail}}</div>
+                        <div class="name">
+                            <span>{{address.consignee}}{{address.sex === '1' ? '先生':'女士'}}</span>
+                            <span>{{address.phone}}</span>
+                        </div>
+                        <i class="el-icon-arrow-right"></i>
+                    </div>
+                    <div class="divSplit"></div>
+                    <div class="divFinishTime">预计{{finishTime}}送达</div>
+                </div>
+                <div class="order">
+                    <div class="title">订单明细</div>
+                    <div class="divSplit"></div>
+                    <div class="itemList">
+                        <div class="item" v-for="(item,index) in cartData" :key="index">
+                            <el-image :src="imgPathConvert(item.image)">
+                                <div slot="error" class="image-slot">
+                                    <img src="./../images/noImg.png"/>
+                                </div>
+                            </el-image>
+                            <div class="desc">
+                                <div class="name">{{item.name}}</div>
+                                <div class="numPrice">
+                                    <span class="num">x{{item.number}}</span>
+                                    <div class="price">
+                                        <span class="spanMoney">￥</span>{{item.amount}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                    </div>
+                </div>
+                <div class="note">
+                    <div class="title">备注</div>
+                    <van-field
+                        v-model="note"
+                        rows="2"
+                        autosize
+                        type="textarea"
+                        maxlength="50"
+                        placeholder="请输入您需要备注的信息"
+                        show-word-limit
+                    />
+                </div>
+            </div>
+            <div class="divCart">
+                <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"></div>
+                <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if="cartData && cartData.length > 0">{{ goodsNum }}</div>
+                <div class="divNum">
+                    <span>￥</span>
+                    <span>{{goodsPrice}}</span>
+                </div>
+                <div class="divPrice"></div>
+                <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @click="goToPaySuccess">去支付</div>
+              </div>
+        </div>
+        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+        <script src="../../backend/plugins/vue/vue.js"></script>
+        <!-- 引入组件库 -->
+        <script src="../../backend/plugins/element-ui/index.js"></script>
+        <!-- 引入vant样式 -->
+        <script src="./../js/vant.min.js"></script>      
+        <script src="./../api/address.js"></script>
+        <!-- 引入axios -->
+        <script src="../../backend/plugins/axios/axios.min.js"></script>
+        <script src="./../js/request.js"></script>
+        <script src="./../js/common.js"></script>
+        <script src="./../api/main.js"></script>
+        <script src="./../api/order.js"></script>
+        <script>
+            new Vue({
+                el:"#add_order",
+                data(){
+                    return {
+                        address:{
+                            phone:'',//手机号
+                            consignee:'',//姓名
+                            detail:'',//详细地址
+                            sex:'1',
+                            id:undefined
+                        },
+                        finishTime:'',//送达时间
+                        cartData:[],
+                        note:''//备注信息
+                    }
+                },
+                computed:{
+                    goodsNum(){
+                        let num = 0
+                        this.cartData.forEach(item=>{
+                            num += item.number 
+                        })
+                        if(num <99){
+                            return num
+                        }else{
+                            return '99+'
+                        }
+                    },
+                    goodsPrice(){
+                    let price = 0
+                    this.cartData.forEach(item=>{
+                        price += (item.number * item.amount)
+                    })
+                    return price
+                    }
+                },
+                created(){
+                    this.initData()
+                },
+                mounted(){},
+                methods:{
+                    goBack(){
+                        history.go(-1)
+                    },
+                    initData(){
+                        //获取默认的地址
+                        this.defaultAddress()
+                        //获取购物车的商品
+                        this.getCartData()
+                    },
+                    //获取默认地址
+                    async defaultAddress(){
+                        const res = await  getDefaultAddressApi()
+                        if(res.code === 1){
+                           this.address = res.data
+                           this.getFinishTime()
+                        }else{
+                            window.requestAnimationFrame(()=>{
+                                window.location.href = '/front/page/address-edit.html'
+                            })
+                        }
+                    },
+                    //获取送达时间
+                    getFinishTime(){
+                        let now = new Date()
+                        let hour = now.getHours() +1
+                        let minute = now.getMinutes()
+                        if(hour.toString().length <2){
+                            hour = '0' + hour
+                        }
+                        if(minute.toString().length <2){
+                            minute = '0' + minute
+                        }
+                        this.finishTime = hour + ':' + minute
+                    },
+                    toAddressPage(){
+                        window.requestAnimationFrame(()=>{
+                            window.location.href = '/front/page/address.html'
+                        })
+                    },
+                    //获取购物车数据
+                    async getCartData(){
+                        const res = await cartListApi({})
+                        if(res.code === 1){
+                            this.cartData = res.data
+                        }else{
+                            this.$notify({ type:'warning', message:res.msg});
+                        }
+                    },
+                    async goToPaySuccess(){
+                        const params = {
+                            remark:this.note,
+                            payMethod:1,
+                            addressBookId:this.address.id
+                        }
+                        const res = await addOrderApi(params)
+                        if(res.code === 1){
+                            window.requestAnimationFrame(()=>{
+                                //调用后端控制器，实现支付调用
+                                window.location.
+                                replace('http://localhost:8080/api/front/pay/orderPay?orderNum='+
+                                    res.data.number+'&amount='+res.data.amount)
+                                // window.location.replace('/front/page/pay-success.html')
+                            })
+                        }else{
+                            this.$notify({ type:'warning', message:res.msg});
+                        }
+                    },
+                    //网络图片路径转换
+                    imgPathConvert(path){
+                        return imgPath(path)
+                    },
+                }
+            })
+            </script>
+        </body>
+    </html>

public/front/page/address-edit.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+    <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, maximum-scale=1.0,user-scalable=no,minimal-ui">
+        <title>美团</title>
+        <link rel="icon" href="./../images/favico.ico">
+        <!--不同屏幕尺寸根字体设置-->
+        <script src="./../js/base.js"></script>
+        <!--element-ui的样式-->
+        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+        <!--引入vant样式-->
+        <link rel="stylesheet" href="../styles/vant.min.css"/>
+        <!-- 引入样式  -->
+        <link rel="stylesheet" href="../styles/index.css" />
+        <!--本页面内容的样式-->
+        <link rel="stylesheet" href="./../styles/address-edit.css" />
+    </head>
+    <body>
+        <div id="address_edit" class="app">
+            <div class="divHead">
+                <div class="divTitle">
+                    <i class="el-icon-arrow-left" @click="goBack"></i>{{title}}
+                </div>
+            </div>
+            <div class="divContent">
+                <div class="divItem">
+                   <span>联系人：</span> 
+                   <el-input placeholder=" 请填写收货人的姓名" v-model="form.consignee"  maxlength='10' class="inputUser"></el-input>
+                   <span class="spanChecked" @click="form.gender = 1">
+                    <i :class="{iActive:form.gender === 1}"></i>
+                    先生
+                   </span>
+                   <span class="spanChecked" @click="form.gender = 0">
+                    <i :class="{iActive:form.gender === 0}"></i>
+                    女士
+                </span>
+                </div>
+                <div class="divItem">
+                    <span>手机号：</span> 
+                    <el-input placeholder=" 请填写收货人手机号码" v-model="form.phone"  maxlength='20' style="width: calc(100% - 80rem);"></el-input>
+                </div>
+                <div class="divItem">
+                    <span>收货地址：</span> 
+                    <el-input placeholder=" 请输入收货地址" v-model="form.detail"  maxlength='140'></el-input>
+                </div>
+                <div class="divItem ">
+                    <span>标签：</span> 
+                    <span v-for="(item,index) in labelList" :key="index" @click="form.label = item;activeIndex = index" :class="{spanItem:true,spanActiveSchool:activeIndex === index}">{{item}}</span>
+                </div>
+                <div class="divSave" @click="saveAddress">保存地址</div>
+                <div class="divDelete" @click="deleteAddress" v-if="id">删除地址</div>
+            </div>
+        </div>
+        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
+        <script src="../../backend/plugins/vue/vue.js"></script>
+        <!-- 引入组件库 -->
+        <script src="../../backend/plugins/element-ui/index.js"></script>
+        <!-- 引入vant样式 -->
+        <script src="./../js/vant.min.js"></script>       
+        <script src="./../js/common.js"></script>
+        <script src="./../api/address.js"></script>
+        <!-- 引入axios -->
+        <script src="../../backend/plugins/axios/axios.min.js"></script>
+        <script src="./../js/request.js"></script>
+        <script>
+            new Vue({
+                el:"#address_edit",
+                data(){
+                    return {
+                        title:'新增收货地址',
+                        form:{
+                            consignee:'',//联系人
+                            phone:undefined,//手机号
+                            gender:1,//0表示女 1 表示男
+                            detail:'',//收货地址
+                            label:'公司',//标签
+                        },
+                        labelList:[
+                            '无','公司','家','学校'
+                        ],
+                        id:undefined,
+                        activeIndex :0
+                    }
+                },
+                computed:{},
+                created(){
+                    this.initData()
+                },
+                mounted(){
+                },
+                methods:{
+                    goBack(){
+                        history.go(-1)
+                    },
+                    async initData(){
+                        const params = parseUrl(window.location.search)
+                        this.id = params.id
+                        if(params.id){
+                            this.title = '编辑收货地址'
+                            const res = await addressFindOneApi(params.id)
+                            if(res.code === 1){
+                                this.form = res.data
+                            }else{
+                                this.$notify({ type:'warning', message:res.msg});
+                            }
+                        }
+                    },
+                    async saveAddress(){
+                        const form = this.form
+                        if(!form.consignee){
+                            this.$notify({ type:'warning', message:'请输入联系人'});
+                            return 
+                        }
+                        if(!form.phone){
+                            this.$notify({ type:'warning', message:'请输入手机号'});
+                            return 
+                        }
+                        if(!form.detail){
+                            this.$notify({ type:'warning', message:'请输入收货地址'});
+                            return 
+                        }
+                        const reg = /^1[3|4|5|7|8][0-9]{9}$/
+                        if(!reg.test(form.phone)){
+                            this.$notify({ type:'warning', message:'手机号码不合法'});
+                            return  
+                        }
+                        let res= {}
+                        if(this.id){
+                            res = await updateAddressApi(this.form)
+                        }else{
+                            res = await addAddressApi(this.form)
+                        }
+                        
+                        if(res.code === 1){
+                            window.requestAnimationFrame(()=>{
+                                window.location.replace('/front/page/address.html')
+                            })
+                        }else{
+                            this.$notify({ type:'warning', message:res.msg});
+                        }
+                    },
+                    deleteAddress(){
+                        this.$dialog.confirm({
+                            title: '确认删除',
+                            message: '确认要删除当前地址吗？',
+                        })
+                        .then( async () => {
+                            const res = await deleteAddressApi({ids:this.id })
+                            if(res.code === 1){
+                                window.requestAnimationFrame(()=>{
+                                    window.location.replace('/front/page/address.html')
+                                })
+                            }else{
+                                this.$notify({ type:'warning', message:res.msg});
+                            }
+                        })
+                        .catch(() => {
+                        });
+                    },
+                }
+            })
+            </script>
+    </body>
+</html>

public/front/page/address.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+    <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, maximum-scale=1.0,user-scalable=no,minimal-ui">
+        <title>美团</title>
+        <link rel="icon" href="./../images/favico.ico">
+        <!--不同屏幕尺寸根字体设置-->
+        <script src="./../js/base.js"></script>
+        <!--element-ui的样式-->
+        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+        <!--引入vant样式-->
+        <link rel="stylesheet" href="../styles/vant.min.css"/>
+        <!-- 引入样式  -->
+        <link rel="stylesheet" href="../styles/index.css" />
+        <!--本页面内容的样式-->
+        <link rel="stylesheet" href="./../styles/address.css" />
+    </head>
+    <body>
+        <div id="address" class="app">
+            <div class="divHead">
+                <div class="divTitle">
+                    <i class="el-icon-arrow-left" @click="goBack"></i>地址管理
+                </div>
+            </div>
+            <div class="divContent">
+                <div class="divItem" v-for="(item,index) in addressList" :key="index" @click.capture="itemClick(item)">
+                    <div class="divAddress">
+                        <span :class="{spanCompany:item.label === '公司',spanHome:item.label === '家',spanSchool:item.label === '学校'}">{{item.label}}</span>
+                        {{item.detail}}
+                    </div>
+                    <div class="divUserPhone">
+                        <span>{{item.consignee}}</span>
+                        <span>{{item.sex === 0 ? '女士' : '先生'}}</span>
+                        <span>{{item.phone}}</span>
+                    </div>
+                    <img src="./../images/edit.png" @click.stop.prevent="toAddressEditPage(item)"/>
+                    <div class="divSplit"></div>
+                    <div class="divDefault" >
+                        <img src="./../images/checked_true.png" v-if="item.isDefault === 1">
+                        <img src="./../images/checked_false.png" @click.stop.prevent="setDefaultAddress(item)" v-else>设为默认地址
+                    </div>
+                </div>
+            </div>
+            <div class="divBottom" @click="toAddressCreatePage">+ 添加收货地址</div>
+        </div>
+            <!-- 开发环境版本,包含了有帮助的命令行警告 -->
+            <script src="../../backend/plugins/vue/vue.js"></script>
+            <!-- 引入组件库 -->
+            <script src="../../backend/plugins/element-ui/index.js"></script>
+            <!-- 引入vant样式 -->
+            <script src="./../js/vant.min.js"></script>   
+            <script src="./../api/address.js"></script>
+            <!-- 引入axios -->
+            <script src="../../backend/plugins/axios/axios.min.js"></script>
+            <script src="./../js/request.js"></script>
+            <script>
+            new Vue({
+                el:"#address",
+                data(){
+                    return {
+                        addressList:[
+                        //     {
+                        //     label:'公司',
+                        //     detail:'金燕龙写字楼 4层电梯口fsdfdsfsdfsdfsssssssssssss（电梯可…）',
+                        //     consignee:'周先生',//姓名
+                        //     phone:18544445566,//手机号
+                        //     isDefault:0,//是否是默认
+                        // },
+                        // {
+                        //     label:'家',
+                        //     detail:'金燕龙写字楼 4层电梯口（电梯可…）',
+                        //     consignee:'周先生',//姓名
+                        //     phone:18544445566,//手机号
+                        //     isDefault:0,//是否是默认
+                        // },
+                        // {
+                        //     label:'学校',
+                        //     detail:'金燕龙写字楼 4层电梯口（电梯可…）',
+                        //     consignee:'周先生',//姓名
+                        //     phone:18544445566,//手机号
+                        //     isDefault:0,//是否是默认
+                        // },
+                        // {
+                        //     label:'公司',
+                        //     detail:'金燕龙写字楼 4层电梯口（电梯可…）',
+                        //     consignee:'周先生',//姓名
+                        //     phone:18544445566,//手机号
+                        //     isDefault:0,//是否是默认
+                        // },
+                        // {
+                        //     label:'公司',
+                        //     detail:'金燕龙写字楼 4层电梯口（电梯可…）',
+                        //     consignee:'周先生',//姓名
+                        //     phone:18544445566,//手机号
+                        //     isDefault:0,//是否是默认
+                        // },
+                        // {
+                        //     label:'公司',
+                        //     detail:'金燕龙写字楼 4层电梯口（电梯可…）',
+                        //     consignee:'周先生',//姓名
+                        //     phone:18544445566,//手机号
+                        //     isDefault:1,//是否是默认
+                        // }
+                    ],
+                    }
+                },
+                computed:{},
+                created(){
+                    this.initData()
+                },
+                mounted(){},
+                methods:{
+                    goBack(){
+                        history.go(-1)
+                    },
+                    toAddressEditPage(item){
+                        window.requestAnimationFrame(()=>{
+                            window.location.href= `/front/page/address-edit.html?id=${item.id}`
+                        })
+                    },
+                    toAddressCreatePage(){
+                        window.requestAnimationFrame(()=>{
+                            window.location.href= '/front/page/address-edit.html'
+                        })
+                    },
+                    async initData(){
+                        const res = await addressListApi()
+                        if(res.code === 1){
+                            this.addressList = res.data
+                        }else{
+                            this.$message.error(res.msg)
+                        }
+                    },
+                    async setDefaultAddress(item){
+                        if(item.id){
+                            const res = await setDefaultAddressApi({id:item.id})
+                            if(res.code === 1){
+                            this.initData()
+                            }else{
+                                this.$message.error(res.msg)
+                            }
+                        }
+                    },
+                    itemClick(item){
+                        const url = document.referrer
+                        //表示是从订单页面跳转过来的
+                        if(url.includes('order')){
+                            this.setDefaultAddress(item)
+                            history.go(-1)
+                        }
+                    }
+
+                }
+            })
+            </script>
+    </body>
+</html>

public/front/page/login.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
+        <title>美团</title>
+        <link rel="icon" href="./../images/favico.ico">
+        <!--不同屏幕尺寸根字体设置-->
+        <script src="./../js/base.js"></script>
+        <!--element-ui的样式-->
+        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+        <!--引入vant样式-->
+        <link rel="stylesheet" href="../styles/vant.min.css"/>
+        <!-- 引入样式  -->
+        <link rel="stylesheet" href="../styles/index.css" />
+        <!--本页面内容的样式-->
+        <link rel="stylesheet" href="./../styles/login.css" />
+      </head>
+    <body>
+        <div id="login" v-loading="loading">
+            <div class="divHead">登录</div>
+            <div class="divContainer">
+                <el-input placeholder=" 请输入邮箱" v-model="form.phone"  maxlength='20'/></el-input>
+                <div class="divSplit"></div>
+                <el-input placeholder=" 请输入验证码" v-model="form.code"  maxlength='20'/></el-input>
+                <span @click='getCode'>获取验证码</span>
+            </div>
+            <div class="divMsg" v-if="msgFlag">邮箱输入不正确，请重新输入</div>
+            <el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">登录</el-button>
+        </div>
+        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+        <script src="../../backend/plugins/vue/vue.js"></script>
+        <!-- 引入组件库 -->
+        <script src="../../backend/plugins/element-ui/index.js"></script>
+        <!-- 引入vant样式 -->
+        <script src="./../js/vant.min.js"></script>  
+        <!-- 引入axios -->
+        <script src="../../backend/plugins/axios/axios.min.js"></script>
+        <script src="./../js/request.js"></script>
+        <script src="./../api/login.js"></script>
+    </body>
+    <script>
+        new Vue({
+            el:"#login",
+            data(){
+                return {
+                    form:{
+                        phone:'',
+                        code:''
+                    },
+                    msgFlag:false,
+                    loading:false
+                }
+            },
+            computed:{},
+            created(){},
+            mounted(){},
+            methods:{
+                getCode(){
+                    this.form.code = ''
+                    // const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
+                    const regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
+                    if (regex.test(this.form.phone)) {
+                        this.msgFlag = false
+                        //this.form.code = (Math.random()*1000000).toFixed(0)
+                        sendMsgApi({phone:this.form.phone})
+                    }else{
+                        this.msgFlag = true
+                    }
+                },
+                async btnLogin(){
+                    if(this.form.phone && this.form.code){
+                        this.loading = true
+                        const res = await loginApi(this.form)
+                        this.loading = false
+                        if(res.code === 1){
+                            sessionStorage.setItem("userPhone",this.form.phone)
+                            window.requestAnimationFrame(()=>{
+                                window.location.href= '/front/index.html'
+                            })                           
+                        }else{
+                            this.$notify({ type:'warning', message:res.msg});
+                        }
+                    }else{
+                        this.$notify({ type:'warning', message:'请输入邮箱'});
+                    }
+                }
+            }
+        })
+    </script>
+</html>

public/front/page/no-wify.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+    <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, maximum-scale=1.0,user-scalable=no,minimal-ui">
+        <title>美团</title>
+        <link rel="icon" href="./../images/favico.ico">
+        <!--不同屏幕尺寸根字体设置-->
+        <script src="./../js/base.js"></script>
+        <!--element-ui的样式-->
+        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+        <!-- 引入样式  -->
+        <link rel="stylesheet" href="../styles/index.css" />
+        <!--本页面内容的样式-->
+        <link rel="stylesheet" href="./../styles/no-wify.css" />
+    </head>
+    <body>
+        <div id="no_wifi" class="app">
+            <div class="divHead">
+                <div class="divTitle">
+                    <i class="el-icon-arrow-left" @click="goBack"></i>美团
+                </div>
+            </div>
+            <div class="divContent">
+                <img src="./../images//no_wifi.png"/>
+                <div class="divDesc">网络连接异常</div>
+                <div class="btnRefresh" @click="toPagePrev">点击刷新</div>
+            </div>
+        </div>
+            <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+            <script src="../../backend/plugins/vue/vue.js"></script>
+            <!-- 引入组件库 -->
+            <script src="../../backend/plugins/element-ui/index.js"></script>
+            <!-- 引入axios -->
+            <script src="../../backend/plugins/axios/axios.min.js"></script>
+            <script src="./../js/request.js"></script>
+            <script>
+            new Vue({
+                el:"#no_wifi",
+                data(){
+                    return {
+                    }
+                },
+                computed:{},
+                created(){
+
+                },
+                mounted(){},
+                methods:{
+                    goBack(){
+                        history.go(-1)
+                    },
+                    toPagePrev(){
+                        history.go(-1)
+                    }
+                }
+            })
+            </script>
+    </body>
+</html>

public/front/page/order.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+    <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, maximum-scale=1.0,user-scalable=no,minimal-ui">
+        <title>美团</title>
+        <link rel="icon" href="./../images/favico.ico">
+        <!--不同屏幕尺寸根字体设置-->
+        <script src="./../js/base.js"></script>
+        <!--element-ui的样式-->
+        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+        <!-- 引入样式  -->
+        <link rel="stylesheet" href="../styles/index.css" />
+        <!--引入vant样式-->
+        <link rel="stylesheet" href="../styles/vant.min.css"/>
+        <!--本页面内容的样式-->
+        <link rel="stylesheet" href="./../styles/order.css" />
+    </head>
+    <body>
+        <div id="order" class="app">
+            <div class="divHead">
+                <div class="divTitle">
+                    <i class="el-icon-arrow-left" @click="goBack"></i>美团
+                </div>
+            </div>
+            <div class="divBody" v-if="orderList.length > 0">
+                <van-list
+                    v-model="loading"
+                    :finished="finished"
+                    finished-text="没有更多了"
+                    @load="getList"
+                    >
+                    <van-cell v-for="(order,index) in orderList" :key="index" class="item">
+                        <div class="timeStatus">
+                            <span>{{order.orderTime}}</span>
+                            <span>{{getStatus(order.status)}}</span>
+                            <!-- <span>正在派送</span> -->
+                        </div>
+                        <div class="dishList">
+                            <div v-for="(item,index) in order.orderDetails" :key="index" class="item">
+                                <span>{{item.name}}</span>
+                                <span>x{{item.number}}</span>
+                            </div>
+                        </div>
+                        <div class="result">
+                            <span>共{{order.sumNum}} 件商品,实付</span><span class="price">￥{{order.amount}}</span>
+                        </div>
+                        <div class="btn" v-if="order.status === 4">
+                            <div class="btnAgain" @click="addOrderAgain(order)">再来一单</div>
+                        </div>
+                    </van-cell>
+                </van-list>
+            </div>
+            <div class="divNoData" v-else>
+                <div class="divContainer">
+                    <img src="./../images/no_order.png"/>
+                    <div>暂无订单</div>
+                </div>
+            </div>
+        </div>
+        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+        <script src="../../backend/plugins/vue/vue.js"></script>
+        <!-- 引入组件库 -->
+        <script src="../../backend/plugins/element-ui/index.js"></script>
+        <!-- 引入vant组件 -->
+        <script src="./../js/vant.min.js"></script>    
+        <!-- 引入axios -->
+        <script src="../../backend/plugins/axios/axios.min.js"></script>
+        <script src="./../js/request.js"></script>
+        <script src="./../api/order.js"></script>
+        <script>
+        new Vue({
+            el:"#order",
+            data(){
+                return {
+                    paging:{
+                        page:1,
+                        pageSize:5
+                    },
+                    orderList:[],
+                    loading:false,
+                    finished:false
+                }
+            },
+            computed:{},
+            created(){
+                this.initData()
+            },
+            mounted(){},
+            methods:{
+                goBack(){
+                    const url = document.referrer
+                    //表示是从订单页面跳转过来的
+                    if(url.includes('success')){
+                        window.requestAnimationFrame(()=>{
+                                window.location.href= '/front/index.html'
+                        })   
+                    }else{
+                        history.go(-1)
+                    }
+                },
+                initData(){
+                    this.getList()
+                },
+                async getList(){
+                    if(this.finished){
+                        this.loading = false;
+                        return
+                    }
+                    const res = await orderPagingApi(this.paging)
+                    if(res.code === 1){
+                        this.orderList.push(...res.data.records)
+                        let records = res.data.records
+                        if(records && Array.isArray(records)){
+                            records.forEach(item=>{
+                                let number = 0
+                                item.orderDetails.forEach(ele=>{
+                                    number += ele.number
+                                })
+                                item.sumNum = number
+                            })
+                        }
+                        this.loading = false;
+                        if(this.paging.page >= res.data.pages){
+                            this.finished = true;
+                        }
+                        this.paging.page = this.paging.page + 1
+                    }else{
+                        this.$notify({ type:'warning', message:res.msg});
+                    }
+                },
+                async addOrderAgain(order){
+                    const res = await orderAgainApi({id:order.id})
+                    if(res.code === 1){
+                        window.requestAnimationFrame(()=>{
+                            window.location.href= '/front/index.html'
+                        })
+                    }else{
+                        this.$notify({ type:'warning', message:res.msg});
+                    }
+                },
+                getStatus(status){
+                    let str = ''
+                    switch(status){
+                        case 1:
+                            str =  '待付款'
+                        break;
+                        case 2:
+                            str =  '正在派送'
+                        break;
+                        case 3:
+                            str =  '已派送'
+                        break;
+                        case 4:
+                            str =  '已完成'
+                        break;
+                        case 5:
+                            str =  '已取消'
+                        break;
+
+                    }
+                    return str
+                }
+            }
+        })
+        </script>
+    </body>
+</html>

public/front/page/pay-success.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+    <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, maximum-scale=1.0,user-scalable=no,minimal-ui">
+        <title>美团</title>
+        <link rel="icon" href="./../images/favico.ico">
+        <!--不同屏幕尺寸根字体设置-->
+        <script src="./../js/base.js"></script>
+        <!--element-ui的样式-->
+        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+        <!-- 引入样式  -->
+        <link rel="stylesheet" href="../styles/index.css" />
+        <!--本页面内容的样式-->
+        <link rel="stylesheet" href="./../styles/pay-success.css" />
+    </head>
+    <body>
+        <div id="pay_success" class="app">
+            <div class="divHead">
+                <div class="divTitle">
+                    <i class="el-icon-arrow-left" @click="goBack"></i>
+                    美团
+                    <img src="./../images/home.png" @click="toMainPage"/>
+                </div>
+            </div>
+            <div class="divContent">
+                <img src="./../images/success.png"/>
+                <div class="divSuccess">下单成功</div>
+                <div class="divDesc">预计{{finishTime}}到达</div>
+                <div class="divDesc1">后厨正在加紧制作中，请耐心等待~</div>
+                <div class="btnView" @click="toOrderPage">查看订单</div>
+            </div>
+        </div>
+        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+        <script src="../../backend/plugins/vue/vue.js"></script>
+        <!-- 引入组件库 -->
+        <script src="../../backend/plugins/element-ui/index.js"></script>
+        <!-- 引入axios -->
+        <script src="../../backend/plugins/axios/axios.min.js"></script>
+        <script src="./../js/request.js"></script>
+        <script>
+        new Vue({
+            el:"#pay_success",
+            data(){
+                return {
+                    finishTime:''
+                }
+            },
+            computed:{},
+            created(){
+                this.getFinishTime()
+            },
+            mounted(){},
+            methods:{
+                goBack(){
+                    window.requestAnimationFrame(()=>{
+                        window.location.replace('/front/index.html')
+                    })   
+                },
+                toOrderPage(){
+                    window.requestAnimationFrame(()=>{
+                        window.location.replace('/front/page/order.html')
+                    })  
+                },
+                toMainPage(){
+                    window.requestAnimationFrame(()=>{
+                        window.location.replace('/front/index.html')
+                    })  
+                },
+                //获取送达时间
+                getFinishTime(){
+                    let now = new Date()
+                    let hour = now.getHours() +1
+                    let minute = now.getMinutes()
+                    if(hour.toString().length <2){
+                        hour = '0' + hour
+                    }
+                    if(minute.toString().length <2){
+                        minute = '0' + minute
+                    }
+                    this.finishTime = hour + ':' + minute
+                },
+                
+            }
+        })
+        </script>
+    </body>
+</html>

public/front/page/user.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+<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, maximum-scale=1.0,user-scalable=no,minimal-ui">
+    <title>美团</title>
+    <link rel="icon" href="./../images/favicon.ico">
+    <!--element-ui的样式-->
+    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
+    <!-- 引入样式  -->
+    <link rel="stylesheet" href="../styles/index.css" />
+    <!--引入vant样式-->
+    <link rel="stylesheet" href="../styles/vant.min.css"/>
+    <!--本页面内容的样式-->
+    <link rel="stylesheet" href="./../styles/user.css" />
+</head>
+<body>
+    <div id="user" class="app">
+        <div class="divHead">
+            <div class="divTitle">
+                <i class="el-icon-arrow-left" @click="goBack"></i>个人中心
+            </div>
+            <div class="divUser">
+                <img src="./../images/headPage.png"/>
+                <div class="desc">
+                    <div class="divName">林之迷 <img src="./../images/women.png"/></div>
+                    <div class="divPhone">{{userPhone}}</div>
+                </div>
+            </div>
+        </div>
+        <div class="divContent">
+            <div class="divLinks">
+                <div class="item" @click="toAddressPage">
+                    <img src="./../images/locations.png"/>
+                    <span>地址管理</span>
+                    <i class="el-icon-arrow-right"></i>
+                </div>
+                <div class="divSplit"></div>
+                <div class="item" @click="toOrderPage">
+                    <img src="./../images/orders.png"/>
+                    <span>历史订单</span>
+                    <i class="el-icon-arrow-right"></i>
+                </div>
+            </div>
+            <div class="divOrders" v-if="order[0]">
+                <div class="title">最新订单</div>
+                <div class="timeStatus">
+                    <span>{{order[0].orderTime}}</span>
+                    <span>{{getStatus(order[0].status)}}</span>
+                    <!-- <span>正在派送</span> -->
+                </div>
+                <div class="dishList">
+                    <div v-for="(item,index) in order[0].orderDetails" :key="index" class="item">
+                        <span>{{item.name}}</span>
+                        <span>x{{item.number}}</span>
+                    </div>
+                </div>
+                <div class="result">
+                    <span>共{{order[0].sumNum}} 件商品,实付</span>
+                    <span class="price">￥{{order[0].amount}}</span>
+                </div>
+                <div class="btn" v-if="order[0].status === 4">
+                    <div class="btnAgain" @click="addOrderAgain">再来一单</div>
+                </div>
+            </div>
+            <div class="quitLogin" @click="toPageLogin">
+                退出登录
+            </div>
+        </div>
+    </div>
+    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
+    <script src="../../backend/plugins/vue/vue.js"></script>
+    <!-- 引入组件库 -->
+    <script src="../../backend/plugins/element-ui/index.js"></script>
+    <!-- 引入vant组件 -->
+    <script src="./../js/vant.min.js"></script>    
+    <!--不同屏幕尺寸根字体设置-->
+    <script src="./../js/base.js"></script>
+    <!-- 引入axios -->
+    <script src="../../backend/plugins/axios/axios.min.js"></script>
+    <script src="./../js/request.js"></script>
+    <script src="./../api/order.js"></script>
+    <script src="./../api/login.js"></script>
+    <script>
+        new Vue({
+            el:"#user",
+            data(){
+                return {
+                    form:{
+                        phone:'',
+                        code:''
+                    },
+                    msgFlag:false,
+                    order:[{
+                        orderTime:'',//下单时间
+                        status:undefined,//订单状态 1已结账，2未结账，3已退单，4已完成，5已取消
+                        orderDetails:[{
+                            name:'',//菜品名称
+                            number:undefined,//数量
+                        }],//明细
+                        amount:undefined,//实收金额
+                        sumNum:0,//菜品总数
+                    }],
+                }
+            },
+            computed:{},
+            created(){
+                this.userPhone =sessionStorage.getItem("userPhone")
+                this.initData()
+            },
+            mounted(){},
+            methods:{
+                goBack(){
+                    history.go(-1)
+                },
+                toAddressPage(){
+                    window.requestAnimationFrame(()=>{
+                        window.location.href = '/front/page/address.html'
+                    })  
+                },
+                toOrderPage(){
+                    window.requestAnimationFrame(()=>{
+                        window.location.href = '/front/page/order.html'
+                    }) 
+                },
+                initData(){
+                    this.getLatestOrder()
+                },
+                async getLatestOrder(){
+                    const params = {
+                        page:1,
+                        pageSize:1
+                    }
+                    const res = await orderPagingApi(params)
+                    if(res.code === 1){
+                        this.order = res.data.records
+                        if(this.order && this.order[0].orderDetails){
+                            let number = 0
+                            this.order[0].orderDetails.forEach(item=>{
+                                number += item.number
+                            })
+                            this.order[0].sumNum = number
+                        }
+                    }else{
+                        this.$notify({ type:'warning', message:res.msg});
+                    }
+                },
+                getStatus(status){
+                    let str = ''
+                    switch(status){
+                        case 1:
+                            str =  '待付款'
+                        break;
+                        case 2:
+                            str =  '正在派送'
+                        break;
+                        case 3:
+                            str =  '已派送'
+                        break;
+                        case 4:
+                            str =  '已完成'
+                        break;
+                        case 5:
+                            str =  '已取消'
+                        break;
+
+                    }
+                    return str
+                },
+                async addOrderAgain(){
+                    const res = await orderAgainApi({id:this.order[0].id})
+                    if(res.code === 1){
+                        window.requestAnimationFrame(()=>{
+                            window.location.href = '/front/index.html'
+                        }) 
+                    }else{
+                        this.$notify({ type:'warning', message:res.msg});
+                    }
+                },
+                async toPageLogin(){
+                    const res = await loginoutApi()
+                    if(res.code === 1){
+                        window.requestAnimationFrame(()=>{
+                            window.location.href = '/front/page/login.html'
+                        }) 
+                    }else{
+                        this.$notify({ type:'warning', message:res.msg});
+                    }                
+                }
+            }
+        })
+    </script>
+</body>
+</html>

public/front/styles/add-order.css

@@ -0,0 +1,332 @@
+#add_order .divHead {
+  width: 100%;
+  height: 88rem;
+  opacity: 1;
+  background: #333333;
+  position: relative;
+}
+
+#add_order .divHead .divTitle {
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  line-height: 25rem;
+  letter-spacing: 0;
+  position: absolute;
+  bottom: 13rem;
+  width: 100%;
+}
+
+#add_order .divHead .divTitle i {
+  position: absolute;
+  left: 16rem;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+#add_order .divContent {
+  margin: 10rem 10rem 0 10rem;
+  height: calc(100vh - 56rem - 110rem);
+  overflow-y: auto;
+}
+
+#add_order .divContent .divAddress {
+  height: 120rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6rem;
+  position: relative;
+  padding: 11rem 10rem 0 16rem;
+}
+
+#add_order .divContent .divAddress .address {
+  height: 25rem;
+  opacity: 1;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #20232a;
+  line-height: 25rem;
+  margin-bottom: 4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 300rem;
+}
+
+#add_order .divContent .divAddress .name {
+  height: 17rem;
+  opacity: 1;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+  line-height: 17rem;
+}
+
+#add_order .divContent .divAddress .name span:first-child {
+  margin-right: 2rem;
+}
+
+#add_order .divContent .divAddress i {
+  position: absolute;
+  right: 14rem;
+  top: 32rem;
+}
+
+#add_order .divContent .divAddress .divSplit {
+  width: 100%;
+  height: 1px;
+  opacity: 1;
+  border: 0;
+  background-color: #ebebeb;
+  margin-top: 14rem;
+}
+
+#add_order .divContent .divAddress .divFinishTime {
+  height: 47rem;
+  opacity: 1;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+  line-height: 47rem;
+  margin-left: 2rem;
+}
+
+#add_order .divContent .order {
+  background: #ffffff;
+  border-radius: 6rem;
+  margin-top: 10rem;
+  margin-bottom: 10rem;
+  padding: 3rem 10rem 7rem 16rem;
+}
+
+#add_order .divContent .order .title {
+  height: 56rem;
+  line-height: 56rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #333333;
+  letter-spacing: 0;
+}
+
+#add_order .divContent .order .divSplit {
+  height: 1px;
+  opacity: 1;
+  background-color: #efefef;
+  border: 0;
+}
+
+#add_order .divContent .order .itemList .item {
+  display: flex;
+}
+
+#add_order .divContent .order .itemList .item .el-image {
+  padding-top: 20rem;
+  padding-bottom: 20rem;
+  width: 64rem;
+  height: 64rem;
+}
+
+#add_order .divContent .order .itemList .item .el-image img {
+  width: 64rem;
+  height: 64rem;
+}
+
+#add_order .divContent .order .itemList .item:first-child .desc {
+  border: 0;
+}
+
+#add_order .divContent .order .itemList .item .desc {
+  padding-top: 20rem;
+  padding-bottom: 20rem;
+  border-top: 2px solid #ebeef5;
+  width: calc(100% - 64rem);
+}
+
+#add_order .divContent .order .itemList .item .desc .name {
+  height: 22rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  text-align: left;
+  color: #20232a;
+  line-height: 22rem;
+  letter-spacing: 0;
+  margin-left: 10rem;
+  margin-bottom: 16rem;
+}
+
+#add_order .divContent .order .itemList .item .desc .numPrice {
+  height: 22rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+#add_order .divContent .order .itemList .item .desc .numPrice span {
+  margin-left: 12rem;
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #818693;
+  line-height: 20rem;
+  letter-spacing: 0;
+  display: inline-block;
+}
+
+#add_order .divContent .order .itemList .item .desc .numPrice .price {
+  font-size: 20rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+}
+
+#add_order
+  .divContent
+  .order
+  .itemList
+  .item
+  .desc
+  .numPrice
+  .price
+  .spanMoney {
+  color: #e94e3c;
+  font-size: 12rem;
+}
+
+#add_order .divContent .note {
+  height: 164rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6px;
+  margin-top: 11rem;
+  padding: 3rem 10rem 10rem 11rem;
+}
+
+#add_order .divContent .note .title {
+  height: 56rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #333333;
+  line-height: 56rem;
+  letter-spacing: 0px;
+  border-bottom: 2rem solid #efefef;
+}
+
+#add_order .divContent .note .van-cell {
+  height: 103rem;
+}
+
+#add_order .divCart {
+  width: 345rem;
+  height: 44rem;
+  opacity: 1;
+  background: #000000;
+  border-radius: 25rem;
+  box-shadow: 0rem 3rem 5rem 0rem rgba(0, 0, 0, 0.25);
+  margin: 0 auto;
+  margin-top: 10rem;
+  z-index: 3000;
+  position: absolute;
+  /* bottom: 35rem; */
+  bottom: 12rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#add_order .divCart .imgCartActive {
+  background-image: url("./../images/cart_active.png");
+}
+
+#add_order .divCart .imgCart {
+  background-image: url("./../images/cart.png");
+}
+
+#add_order .divCart > div:first-child {
+  width: 60rem;
+  height: 60rem;
+  position: absolute;
+  left: 11rem;
+  bottom: 0;
+  background-size: 60rem 60rem;
+}
+
+#add_order .divCart .divNum {
+  font-size: 12rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #ffffff;
+  letter-spacing: 0rem;
+  position: absolute;
+  left: 92rem;
+  top: 10rem;
+}
+
+#add_order .divCart .divNum span:last-child {
+  font-size: 20rem;
+}
+
+#add_order .divCart > div:last-child {
+  width: 102rem;
+  height: 36rem;
+  opacity: 1;
+  border-radius: 18rem;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  line-height: 36rem;
+  position: absolute;
+  right: 5rem;
+  top: 4rem;
+}
+
+#add_order .divCart .btnSubmit {
+  color: white;
+  background: #d8d8d8;
+}
+#add_order .divCart .btnSubmitActive {
+  color: #333333;
+  background: #ffc200;
+}
+
+#add_order .divCart .divGoodsNum {
+  width: 18rem;
+  height: 18rem;
+  opacity: 1;
+  background: #e94e3c;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 18rem;
+  position: absolute;
+  left: 57rem;
+  top: -5rem;
+}
+
+#add_order .divCart .moreGoods {
+  width: 25rem;
+  height: 25rem;
+  line-height: 25rem;
+}

public/front/styles/address-edit.css

@@ -0,0 +1,156 @@
+#address_edit {
+  height: 100%;
+}
+#address_edit .divHead {
+  width: 100%;
+  height: 88rem;
+  opacity: 1;
+  background: #333333;
+  position: relative;
+}
+
+#address_edit .divHead .divTitle {
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  line-height: 25rem;
+  letter-spacing: 0;
+  position: absolute;
+  bottom: 13rem;
+  width: 100%;
+}
+
+#address_edit .divHead .divTitle i {
+  position: absolute;
+  left: 16rem;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+#address_edit .divContent {
+  height: 100%;
+  opacity: 1;
+  background: #ffffff;
+  padding-left: 9rem;
+  padding-right: 9rem;
+}
+
+#address_edit .divContent .divItem {
+  height: 55rem;
+  line-height: 55rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #333333;
+  line-height: 20rem;
+  letter-spacing: 0rem;
+  border-bottom: 1px solid #efefef;
+  display: flex;
+  align-items: center;
+}
+
+#address_edit .divContent .divItem .el-input {
+  width: auto;
+}
+
+#address_edit .divContent .divItem input {
+  border: 0;
+  padding: 0;
+}
+
+#address_edit .divContent .divItem .inputUser {
+  width: 150rem;
+}
+
+#address_edit .divContent .divItem span {
+  display: block;
+}
+
+#address_edit .divContent .divItem span:first-child {
+  margin-right: 12rem;
+  white-space: nowrap;
+  width: 69rem;
+}
+
+#address_edit .divContent .divItem .spanChecked {
+  width: 50rem;
+}
+
+#address_edit .divContent .divItem span i {
+  width: 16rem;
+  height: 16rem;
+  background: url(./../images/checked_false.png);
+  display: inline-block;
+  background-size: cover;
+  vertical-align: sub;
+}
+
+#address_edit .divContent .divItem span .iActive {
+  background: url(./../images/checked_true.png);
+  background-size: cover;
+}
+
+#address_edit .divContent .divItem .spanItem {
+  width: 34rem;
+  height: 20rem;
+  opacity: 1;
+  border: 1px solid #e5e4e4;
+  border-radius: 3rem;
+  text-align: center;
+  margin-right: 10rem;
+  border-radius: 2px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  color: #333333;
+}
+
+#address_edit .divContent .divItem .spanActiveCompany {
+  background: #e1f1fe;
+}
+
+#address_edit .divContent .divItem .spanActiveHome {
+  background: #fef8e7;
+}
+
+#address_edit .divContent .divItem .spanActiveSchool {
+  background: #e7fef8;
+}
+
+#address_edit .divContent .divItem .el-input__inner {
+  font-size: 13px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+}
+
+#address_edit .divContent .divSave {
+  height: 36rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 18rem;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  margin-top: 20rem;
+}
+
+#address_edit .divContent .divDelete {
+  height: 36rem;
+  opacity: 1;
+  background: #f6f6f6;
+  border-radius: 18rem;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  margin-top: 20rem;
+}

public/front/styles/address.css

@@ -0,0 +1,162 @@
+#address .divHead {
+  width: 100%;
+  height: 88rem;
+  opacity: 1;
+  background: #333333;
+  position: relative;
+}
+
+#address .divHead .divTitle {
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  line-height: 25rem;
+  letter-spacing: 0;
+  position: absolute;
+  bottom: 13rem;
+  width: 100%;
+}
+
+#address .divHead .divTitle i {
+  position: absolute;
+  left: 16rem;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+#address .divContent {
+  height: calc(100vh - 157rem);
+  overflow: auto;
+}
+
+#address .divContent .divItem {
+  height: 128rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6rem;
+  margin-top: 10rem;
+  margin-left: 10rem;
+  margin-right: 9rem;
+  padding-left: 12rem;
+  position: relative;
+}
+
+#address .divContent .divItem > img {
+  width: 16rem;
+  height: 16rem;
+  position: absolute;
+  top: 40rem;
+  right: 24rem;
+}
+
+#address .divContent .divItem .divDefault img {
+  width: 16rem;
+  height: 16rem;
+  opacity: 1;
+}
+
+#address .divContent .divItem .divAddress {
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+  line-height: 20rem;
+  letter-spacing: 0;
+  padding-top: 21rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 280rem;
+}
+
+#address .divContent .divItem .divAddress span {
+  width: 34rem;
+  height: 20rem;
+  opacity: 1;
+  font-size: 12rem;
+  display: inline-block;
+  text-align: center;
+  margin-right: 4rem;
+  margin-bottom: 10rem;
+}
+
+#address .divContent .divItem .divUserPhone span {
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #999999;
+  line-height: 20rem;
+  letter-spacing: 0;
+  margin-right: 10rem;
+}
+
+#address .divContent .divItem .divUserPhone span:first-child {
+  margin-right: 2rem;
+}
+
+#address .divContent .divItem .divAddress .spanCompany {
+  background-color: #e1f1fe;
+}
+
+#address .divContent .divItem .divAddress .spanHome {
+  background: #fef8e7;
+}
+
+#address .divContent .divItem .divAddress .spanSchool {
+  background: #e7fef8;
+}
+
+#address .divContent .divItem .divSplit {
+  height: 1px;
+  opacity: 1;
+  background: #efefef;
+  border: 0;
+  margin-top: 16rem;
+  margin-bottom: 10rem;
+  margin-right: 10rem;
+}
+
+#address .divContent .divItem .divDefault {
+  height: 18rem;
+  opacity: 1;
+  font-size: 13rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+  line-height: 18rem;
+  letter-spacing: 0;
+}
+
+#address .divContent .divItem .divDefault img {
+  height: 18rem;
+  width: 18rem;
+  margin-right: 5rem;
+  vertical-align: bottom;
+}
+
+#address .divBottom {
+  height: 36rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 18rem;
+  opacity: 1;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  position: absolute;
+  bottom: 23rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 334rem;
+}

public/front/styles/index.css

@@ -0,0 +1,134 @@
+html,
+body {
+  max-width: 750px;
+  height: 100%;
+  background: #f3f2f7;
+  font-family: Helvetica;
+  overflow: hidden;
+}
+
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+
+ul,
+li {
+  list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 16px;
+}
+
+h4 {
+  font-size: 14px;
+}
+
+p {
+  font-size: 12px;
+}
+
+em,
+i {
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "DIN-Medium";
+  src: url("../fonts/DIN-Medium.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "DIN";
+  src: url("../fonts/DIN-Bold.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PingFangSC-Regular";
+  src: url("../fonts/PingFangSC-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PingFangSC-Regular";
+  src: url("../fonts/PingFangSC-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "PingFangSC-Semibold";
+  src: url("../fonts/PingFangSC-Semibold.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.app {
+  height: 100%;
+}
+
+.van-overlay {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.van-dialog {
+  overflow: inherit;
+}
+
+::-webkit-input-placeholder {
+  font-size: 13rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #999999;
+}
+
+:-moz-placeholder {
+  /* Firefox 18- */
+  font-size: 13rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #999999;
+}
+::-moz-placeholder {
+  /* Firefox 19+ */
+  font-size: 13rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #999999;
+}
+
+:-ms-input-placeholder {
+  font-size: 13rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #999999;
+}

public/front/styles/login.css

@@ -0,0 +1,96 @@
+#login .divHead {
+  opacity: 1;
+  background: #333333;
+  height: 88rem;
+  width: 100%;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  line-height: 88rem;
+}
+
+#login .divContainer {
+  width: 356rem;
+  height: 128rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6rem;
+  margin: 0 auto;
+  margin-top: 10rem;
+  position: relative;
+}
+
+#login .divContainer input {
+  border: 0;
+  height: 63rem;
+}
+
+#login .divContainer .divSplit {
+  height: 1px;
+  background-color: #efefef;
+  border: 0;
+  margin-left: 10rem;
+  margin-right: 10rem;
+}
+
+#login .divContainer span {
+  position: absolute;
+  right: 20rem;
+  top: 20rem;
+  cursor: pointer;
+  opacity: 1;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #ffc200;
+  letter-spacing: 0px;
+}
+
+#login .divMsg {
+  width: 168px;
+  height: 17px;
+  opacity: 1;
+  font-size: 12px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: center;
+  color: #e94e3c;
+  line-height: 17px;
+  margin-left: 26rem;
+  margin-top: 10rem;
+}
+
+#login .btnSubmit {
+  width: 356rem;
+  height: 40rem;
+  margin: 20rem 10rem 0 10rem;
+  border-radius: 20px;
+  border: 0;
+
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+}
+
+#login .btnNoPhone {
+  color: #666666;
+  background: #d8d8d8;
+}
+
+#login .btnNoPhone:active {
+  background: #afafaf;
+}
+
+#login .btnPhone {
+  background: #ffc200;
+  color: #333333;
+}
+
+#login .btnPhone:active {
+  background: rgba(255, 142, 0, 1);
+  color: #333333;
+}

public/front/styles/main.css

@@ -0,0 +1,911 @@
+/**
+首屏样式
+*/
+#main {
+  height: 100%;
+}
+
+#main .divHead {
+  background: url(../images/mainBg.png);
+  background-repeat: no-repeat;
+  height: 152rem;
+  background-size: contain;
+}
+
+#main .divHead img {
+  position: absolute;
+  left: 19rem;
+  top: 41rem;
+  width: 28rem;
+  height: 28rem;
+}
+
+#main .divTitle {
+  width: 345rem;
+  height: 118rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6rem;
+  box-shadow: 0rem 2rem 5rem 0rem rgba(69, 69, 69, 0.1);
+  position: absolute;
+  left: 50%;
+  top: 77rem;
+  transform: translate(-50%, 0);
+  box-sizing: border-box;
+  padding: 14rem 0 0 8rem;
+}
+#main .divTitle .divStatic {
+  display: flex;
+}
+#main .divTitle .divStatic .logo {
+  width: 39rem;
+  height: 39rem;
+  opacity: 1;
+  #background: #333333;
+  border-radius: 6rem;
+  margin-right: 10rem;
+}
+
+#main .divTitle .divStatic .divDesc .divName {
+  width: 90rem;
+  height: 25rem;
+  opacity: 1;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #20232a;
+  line-height: 25rem;
+}
+
+#main .divTitle .divStatic .divDesc .divSend {
+  opacity: 1;
+  font-size: 11rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+  margin-bottom: 10rem;
+}
+
+#main .divTitle .divStatic .divDesc .divSend img {
+  width: 14rem;
+  height: 14rem;
+  opacity: 1;
+  vertical-align: sub;
+}
+
+#main .divTitle .divStatic .divDesc .divSend span {
+  margin-right: 12rem;
+}
+
+#main .divTitle .divStatic .divDesc .divSend span:last-child {
+  margin-right: 0;
+}
+
+#main .divTitle > .divDesc {
+  opacity: 1;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #9b9b9b;
+  line-height: 17rem;
+  margin-right: 18rem;
+  padding-top: 9rem;
+  border-top: 1rem dashed #ebebeb;
+}
+
+#main .divBody {
+  display: flex;
+  height: 100%;
+}
+
+#main .divBody .divType {
+  background: #f6f6f6;
+}
+
+#main .divBody .divType ul {
+  margin-top: 61rem;
+  overflow-y: auto;
+  height: calc(100% - 61rem);
+  padding-bottom: 200rem;
+  box-sizing: border-box;
+  width: 84rem;
+  opacity: 1;
+}
+
+#main .divBody .divType ul li {
+  padding: 16rem;
+  opacity: 1;
+  font-size: 13rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 18rem;
+  letter-spacing: 0rem;
+  word-wrap: break-word;
+  word-break: normal;
+}
+
+#main .divBody .divType ul li.active {
+  color: #333333;
+  font-weight: 500;
+  background-color: #ffffff;
+  font-family: PingFangSC, PingFangSC-Regular;
+}
+
+#main .divBody .divMenu {
+  background-color: #ffffff;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+#main .divBody .divMenu > div {
+  margin-top: 61rem;
+  overflow-y: auto;
+  height: calc(100% - 61rem);
+  padding-bottom: 200rem;
+  box-sizing: border-box;
+}
+
+#main .divBody .divMenu .divItem {
+  margin: 10rem 15rem 20rem 14rem;
+  display: flex;
+}
+
+#main .divBody .divMenu .divItem .el-image {
+  width: 86rem;
+  height: 86rem;
+  margin-right: 14rem;
+}
+
+#main .divBody .divMenu .divItem .el-image img {
+  width: 86rem;
+  height: 86rem;
+  border-radius: 5rem;
+}
+
+#main .divBody .divMenu .divItem > div {
+  position: relative;
+}
+
+#main .divBody .divMenu .divItem .divName {
+  height: 22rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  text-align: left;
+  color: #333333;
+  line-height: 22rem;
+  letter-spacing: 0;
+  margin-bottom: 5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 175rem;
+}
+
+#main .divBody .divMenu .divItem .divDesc {
+  height: 16rem;
+  opacity: 1;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 16rem;
+  letter-spacing: 0rem;
+  margin-bottom: 4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 144rem;
+}
+
+#main .divBody .divMenu .divItem .divBottom {
+  font-size: 15rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 20rem;
+  letter-spacing: 0rem;
+}
+
+#main .divBody .divMenu .divItem .divBottom span:first-child {
+  font-size: 12rem;
+}
+
+#main .divBody .divMenu .divItem .divBottom span:last-child {
+  font-size: 15rem;
+}
+
+#main .divBody .divMenu .divItem .divNum {
+  display: flex;
+  position: absolute;
+  right: 12rem;
+  bottom: 0;
+}
+
+#main .divBody .divMenu .divItem .divNum .divDishNum {
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  width: auto;
+}
+
+#main .divBody .divMenu .divItem .divNum .divTypes {
+  width: 64rem;
+  height: 24rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 12rem;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 24rem;
+  letter-spacing: 0;
+}
+
+#main .divBody .divMenu .divItem .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .divCart {
+  width: 345rem;
+  height: 44rem;
+  opacity: 1;
+  background: #000000;
+  border-radius: 25rem;
+  box-shadow: 0rem 3rem 5rem 0rem rgba(0, 0, 0, 0.25);
+  margin: 0 auto;
+  bottom: 24rem;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 3000;
+}
+
+#main .divCart .imgCartActive {
+  background-image: url("./../images/cart_active.png");
+}
+
+#main .divCart .imgCart {
+  background-image: url("./../images/cart.png");
+}
+
+#main .divCart > div:first-child {
+  width: 60rem;
+  height: 60rem;
+  position: absolute;
+  left: 11rem;
+  bottom: 0;
+  background-size: 60rem 60rem;
+}
+
+#main .divCart .divNum {
+  font-size: 12rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #ffffff;
+  letter-spacing: 0rem;
+  position: absolute;
+  left: 92rem;
+  top: 10rem;
+}
+
+#main .divCart .divNum span:last-child {
+  font-size: 20rem;
+}
+
+#main .divCart > div:last-child {
+  width: 102rem;
+  height: 36rem;
+  opacity: 1;
+  border-radius: 18rem;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  line-height: 36rem;
+  position: absolute;
+  right: 5rem;
+  top: 4rem;
+}
+
+#main .divCart .btnSubmit {
+  color: white;
+  background: #d8d8d8;
+}
+#main .divCart .btnSubmitActive {
+  color: #333333;
+  background: #ffc200;
+}
+
+#main .divCart .divGoodsNum {
+  width: 18rem;
+  height: 18rem;
+  opacity: 1;
+  background: #e94e3c;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 18rem;
+  position: absolute;
+  left: 50rem;
+  top: -5rem;
+}
+
+#main .divCart .moreGoods {
+  width: 25rem;
+  height: 25rem;
+  line-height: 25rem;
+}
+
+#main .divLayer {
+  position: absolute;
+  height: 68rem;
+  width: 100%;
+  bottom: 0;
+  display: flex;
+}
+
+#main .divLayer .divLayerLeft {
+  background-color: #f6f6f6;
+  opacity: 0.5;
+  width: 84rem;
+  height: 100%;
+}
+
+#main .divLayer .divLayerRight {
+  background-color: white;
+  opacity: 0.5;
+  width: calc(100% - 84rem);
+  height: 100%;
+}
+
+#main .dialogFlavor {
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 10rem;
+}
+
+#main .dialogFlavor .dialogTitle {
+  margin-top: 26rem;
+  margin-bottom: 14rem;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  color: #333333;
+  letter-spacing: 0;
+  text-align: center;
+}
+
+#main .dialogFlavor .divContent {
+  margin-left: 15rem;
+  margin-right: 15rem;
+}
+
+#main .dialogFlavor .divContent .divFlavorTitle {
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+  letter-spacing: 0;
+  margin-left: 5rem;
+  margin-bottom: 10rem;
+  margin-top: 10rem;
+}
+
+#main .dialogFlavor .divContent span {
+  display: inline-block;
+  height: 30rem;
+  opacity: 1;
+  background: #ffffff;
+  border: 1rem solid #ffc200;
+  border-radius: 7rem;
+  line-height: 30rem;
+  padding-left: 13rem;
+  padding-right: 13rem;
+  margin: 0 5rem 10rem 5rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: center;
+  color: #333333;
+}
+
+#main .dialogFlavor .divContent .spanActive {
+  background: #ffc200;
+  font-weight: 500;
+}
+
+#main .dialogFlavor .divBottom {
+  margin-top: 20rem;
+  margin-bottom: 19rem;
+  margin-left: 20rem;
+  display: flex;
+  position: relative;
+}
+
+#main .dialogFlavor .divBottom div:first-child {
+  height: 30rem;
+  opacity: 1;
+  font-size: 20rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 30rem;
+  letter-spacing: 0;
+}
+
+#main .dialogFlavor .divBottom div span {
+  font-size: 14rem;
+}
+
+#main .dialogFlavor .divBottom div:last-child {
+  width: 100rem;
+  height: 30rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 15rem;
+  text-align: center;
+  line-height: 30rem;
+  position: absolute;
+  right: 20rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+}
+
+#main .dialogFlavor .divFlavorClose {
+  position: absolute;
+  bottom: -70rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#main .dialogFlavor .divFlavorClose img {
+  width: 44rem;
+  height: 44rem;
+}
+
+#main .dialogCart {
+  background: linear-gradient(180deg, #ffffff 0%, #ffffff 81%);
+  border-radius: 12px 12px 0px 0px;
+}
+
+#main .dialogCart .divCartTitle {
+  height: 59rem;
+  display: flex;
+  line-height: 60rem;
+  position: relative;
+  margin-left: 15rem;
+  margin-right: 10rem;
+  border-bottom: 1px solid #efefef;
+}
+
+#main .dialogCart .divCartTitle .title {
+  font-size: 20rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  text-align: left;
+  color: #333333;
+}
+#main .dialogCart .divCartTitle i {
+  margin-right: 3rem;
+  font-size: 15rem;
+  vertical-align: middle;
+}
+
+#main .dialogCart .divCartTitle .clear {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  color: #999999;
+  font-size: 14px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+}
+
+#main .dialogCart .divCartItem {
+  height: 108rem;
+  margin-left: 15rem;
+  margin-right: 10rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+#main .dialogCart .divCartContent {
+  height: calc(100% - 130rem);
+  overflow-y: auto;
+}
+
+#main .dialogCart .divCartContent .el-image {
+  width: 64rem;
+  height: 64rem;
+  opacity: 1;
+  margin-right: 10rem;
+}
+
+#main .dialogCart .divCartContent .el-image img {
+  width: 64rem;
+  height: 64rem;
+}
+
+#main .dialogCart .divCartContent .divDesc .name {
+  height: 22rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  text-align: left;
+  color: #333333;
+  line-height: 22rem;
+  letter-spacing: 0;
+  margin-bottom: 17rem;
+}
+
+#main .dialogCart .divCartContent .divDesc .price {
+  font-size: 18rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+}
+
+#main .dialogCart .divCartContent .divDesc .price .spanMoney {
+  font-size: 12rem;
+}
+
+#main .dialogCart .divCartContent .divCartItem .divNum {
+  position: absolute;
+  right: 0;
+  bottom: 10rem;
+  display: flex;
+  line-height: 36rem;
+  height: 36rem;
+}
+
+#main .dialogCart .divCartContent .divCartItem .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .dialogCart .divCartContent .divCartItem .divSplit {
+  width: calc(100% - 64rem);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  opacity: 1;
+  background-color: #efefef;
+}
+
+#main .dialogCart .divCartContent .divCartItem:last-child .divSplit {
+  height: 0;
+}
+
+#main .detailsDialog {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+#main .detailsDialog .divContainer {
+  padding: 20rem 20rem 0 20rem;
+  overflow: auto;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+#main .detailsDialog .el-image {
+  width: 100%;
+  height: 100%;
+}
+
+#main .detailsDialog .el-image img {
+  width: 100%;
+  height: 100%;
+}
+
+#main .detailsDialog .title {
+  height: 28rem;
+  opacity: 1;
+  font-size: 20rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  color: #333333;
+  line-height: 28rem;
+  letter-spacing: 0;
+  margin-top: 18rem;
+  margin-bottom: 11rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+#main .detailsDialog .content {
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: justify;
+  color: #333333;
+  line-height: 24rem;
+}
+
+#main .detailsDialog .divNum {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 23rem;
+  margin-bottom: 20rem;
+  padding-left: 20rem;
+  padding-right: 20rem;
+}
+
+#main .detailsDialog .divNum .left {
+  font-size: 20rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 36rem;
+  letter-spacing: 0rem;
+}
+
+#main .detailsDialog .divNum .left span:first-child {
+  font-size: 12rem;
+}
+
+#main .detailsDialog .divNum .right {
+  display: flex;
+}
+
+#main .detailsDialog .divNum .divDishNum {
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  width: auto;
+}
+
+#main .detailsDialog .divNum .divTypes {
+  width: 64rem;
+  height: 24rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 12rem;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 24rem;
+  letter-spacing: 0;
+}
+
+#main .detailsDialog .divNum .divSubtract,
+.divAdd {
+  height: 36rem;
+}
+
+#main .detailsDialog .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .detailsDialog .detailsDialogClose {
+  position: absolute;
+  bottom: -70rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#main .detailsDialog .detailsDialogClose img {
+  width: 44rem;
+  height: 44rem;
+}
+
+#main .setMealDetailsDialog {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+#main .setMealDetailsDialog .divContainer {
+  padding: 20rem 20rem 0 20rem;
+  overflow: auto;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+#main .setMealDetailsDialog .el-image {
+  width: 100%;
+  height: 100%;
+}
+
+#main .setMealDetailsDialog .el-image img {
+  width: 100%;
+  height: 100%;
+}
+
+#main .setMealDetailsDialog .divSubTitle {
+  text-align: left;
+  margin-top: 16rem;
+  margin-bottom: 6rem;
+  height: 25rem;
+  opacity: 1;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #333333;
+  line-height: 25rem;
+  letter-spacing: 0px;
+  position: relative;
+}
+
+#main .setMealDetailsDialog .divContainer .item .divSubTitle .divPrice {
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 18rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 25rem;
+  letter-spacing: 0rem;
+}
+
+#main
+  .setMealDetailsDialog
+  .divContainer
+  .item
+  .divSubTitle
+  .divPrice
+  span:first-child {
+  font-size: 12rem;
+}
+
+#main .setMealDetailsDialog .title {
+  height: 28rem;
+  opacity: 1;
+  font-size: 20rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  color: #333333;
+  line-height: 28rem;
+  letter-spacing: 0;
+  margin-top: 18rem;
+  margin-bottom: 11rem;
+}
+
+#main .setMealDetailsDialog .content {
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: justify;
+  color: #333333;
+  line-height: 24rem;
+}
+
+#main .setMealDetailsDialog .divNum {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 23rem;
+  padding-bottom: 15rem;
+  padding-left: 20rem;
+  padding-right: 20rem;
+}
+
+#main .setMealDetailsDialog .divNum .left {
+  font-size: 20rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 36rem;
+  letter-spacing: 0rem;
+}
+
+#main .setMealDetailsDialog .divNum .left span:first-child {
+  font-size: 12rem;
+}
+
+#main .setMealDetailsDialog .divNum .right {
+  display: flex;
+}
+
+#main .setMealDetailsDialog .divNum .divDishNum {
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  width: auto;
+}
+
+#main .setMealDetailsDialog .divNum .divTypes {
+  width: 64rem;
+  height: 24rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 12rem;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 24rem;
+  letter-spacing: 0;
+}
+
+#main .setMealDetailsDialog .divNum .divSubtract,
+.divAdd {
+  height: 36rem;
+}
+
+#main .setMealDetailsDialog .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .setMealDetailsDialog .divNum .right .addCart {
+  width: 100rem;
+  height: 30rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 15rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 30rem;
+}
+
+#main .setMealDetailsDialog .detailsDialogClose {
+  position: absolute;
+  bottom: -70rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#main .setMealDetailsDialog .detailsDialogClose img {
+  width: 44rem;
+  height: 44rem;
+}

public/front/styles/main.css.bak

@@ -0,0 +1,911 @@
+/**
+首屏样式
+*/
+#main {
+  height: 100%;
+}
+
+#main .divHead {
+  background: url(../images/mainBg.png);
+  background-repeat: no-repeat;
+  height: 152rem;
+  background-size: contain;
+}
+
+#main .divHead img {
+  position: absolute;
+  left: 19rem;
+  top: 41rem;
+  width: 28rem;
+  height: 28rem;
+}
+
+#main .divTitle {
+  width: 345rem;
+  height: 118rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6rem;
+  box-shadow: 0rem 2rem 5rem 0rem rgba(69, 69, 69, 0.1);
+  position: absolute;
+  left: 50%;
+  top: 77rem;
+  transform: translate(-50%, 0);
+  box-sizing: border-box;
+  padding: 14rem 0 0 8rem;
+}
+#main .divTitle .divStatic {
+  display: flex;
+}
+#main .divTitle .divStatic .logo {
+  width: 39rem;
+  height: 39rem;
+  opacity: 1;
+  background: #333333;
+  border-radius: 6rem;
+  margin-right: 10rem;
+}
+
+#main .divTitle .divStatic .divDesc .divName {
+  width: 90rem;
+  height: 25rem;
+  opacity: 1;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #20232a;
+  line-height: 25rem;
+}
+
+#main .divTitle .divStatic .divDesc .divSend {
+  opacity: 1;
+  font-size: 11rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+  margin-bottom: 10rem;
+}
+
+#main .divTitle .divStatic .divDesc .divSend img {
+  width: 14rem;
+  height: 14rem;
+  opacity: 1;
+  vertical-align: sub;
+}
+
+#main .divTitle .divStatic .divDesc .divSend span {
+  margin-right: 12rem;
+}
+
+#main .divTitle .divStatic .divDesc .divSend span:last-child {
+  margin-right: 0;
+}
+
+#main .divTitle > .divDesc {
+  opacity: 1;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #9b9b9b;
+  line-height: 17rem;
+  margin-right: 18rem;
+  padding-top: 9rem;
+  border-top: 1rem dashed #ebebeb;
+}
+
+#main .divBody {
+  display: flex;
+  height: 100%;
+}
+
+#main .divBody .divType {
+  background: #f6f6f6;
+}
+
+#main .divBody .divType ul {
+  margin-top: 61rem;
+  overflow-y: auto;
+  height: calc(100% - 61rem);
+  padding-bottom: 200rem;
+  box-sizing: border-box;
+  width: 84rem;
+  opacity: 1;
+}
+
+#main .divBody .divType ul li {
+  padding: 16rem;
+  opacity: 1;
+  font-size: 13rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 18rem;
+  letter-spacing: 0rem;
+  word-wrap: break-word;
+  word-break: normal;
+}
+
+#main .divBody .divType ul li.active {
+  color: #333333;
+  font-weight: 500;
+  background-color: #ffffff;
+  font-family: PingFangSC, PingFangSC-Regular;
+}
+
+#main .divBody .divMenu {
+  background-color: #ffffff;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+#main .divBody .divMenu > div {
+  margin-top: 61rem;
+  overflow-y: auto;
+  height: calc(100% - 61rem);
+  padding-bottom: 200rem;
+  box-sizing: border-box;
+}
+
+#main .divBody .divMenu .divItem {
+  margin: 10rem 15rem 20rem 14rem;
+  display: flex;
+}
+
+#main .divBody .divMenu .divItem .el-image {
+  width: 86rem;
+  height: 86rem;
+  margin-right: 14rem;
+}
+
+#main .divBody .divMenu .divItem .el-image img {
+  width: 86rem;
+  height: 86rem;
+  border-radius: 5rem;
+}
+
+#main .divBody .divMenu .divItem > div {
+  position: relative;
+}
+
+#main .divBody .divMenu .divItem .divName {
+  height: 22rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  text-align: left;
+  color: #333333;
+  line-height: 22rem;
+  letter-spacing: 0;
+  margin-bottom: 5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 175rem;
+}
+
+#main .divBody .divMenu .divItem .divDesc {
+  height: 16rem;
+  opacity: 1;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 16rem;
+  letter-spacing: 0rem;
+  margin-bottom: 4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 144rem;
+}
+
+#main .divBody .divMenu .divItem .divBottom {
+  font-size: 15rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 20rem;
+  letter-spacing: 0rem;
+}
+
+#main .divBody .divMenu .divItem .divBottom span:first-child {
+  font-size: 12rem;
+}
+
+#main .divBody .divMenu .divItem .divBottom span:last-child {
+  font-size: 15rem;
+}
+
+#main .divBody .divMenu .divItem .divNum {
+  display: flex;
+  position: absolute;
+  right: 12rem;
+  bottom: 0;
+}
+
+#main .divBody .divMenu .divItem .divNum .divDishNum {
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  width: auto;
+}
+
+#main .divBody .divMenu .divItem .divNum .divTypes {
+  width: 64rem;
+  height: 24rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 12rem;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 24rem;
+  letter-spacing: 0;
+}
+
+#main .divBody .divMenu .divItem .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .divCart {
+  width: 345rem;
+  height: 44rem;
+  opacity: 1;
+  background: #000000;
+  border-radius: 25rem;
+  box-shadow: 0rem 3rem 5rem 0rem rgba(0, 0, 0, 0.25);
+  margin: 0 auto;
+  bottom: 24rem;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 3000;
+}
+
+#main .divCart .imgCartActive {
+  background-image: url("./../images/cart_active.png");
+}
+
+#main .divCart .imgCart {
+  background-image: url("./../images/cart.png");
+}
+
+#main .divCart > div:first-child {
+  width: 60rem;
+  height: 60rem;
+  position: absolute;
+  left: 11rem;
+  bottom: 0;
+  background-size: 60rem 60rem;
+}
+
+#main .divCart .divNum {
+  font-size: 12rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #ffffff;
+  letter-spacing: 0rem;
+  position: absolute;
+  left: 92rem;
+  top: 10rem;
+}
+
+#main .divCart .divNum span:last-child {
+  font-size: 20rem;
+}
+
+#main .divCart > div:last-child {
+  width: 102rem;
+  height: 36rem;
+  opacity: 1;
+  border-radius: 18rem;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  line-height: 36rem;
+  position: absolute;
+  right: 5rem;
+  top: 4rem;
+}
+
+#main .divCart .btnSubmit {
+  color: white;
+  background: #d8d8d8;
+}
+#main .divCart .btnSubmitActive {
+  color: #333333;
+  background: #ffc200;
+}
+
+#main .divCart .divGoodsNum {
+  width: 18rem;
+  height: 18rem;
+  opacity: 1;
+  background: #e94e3c;
+  border-radius: 50%;
+  text-align: center;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 18rem;
+  position: absolute;
+  left: 50rem;
+  top: -5rem;
+}
+
+#main .divCart .moreGoods {
+  width: 25rem;
+  height: 25rem;
+  line-height: 25rem;
+}
+
+#main .divLayer {
+  position: absolute;
+  height: 68rem;
+  width: 100%;
+  bottom: 0;
+  display: flex;
+}
+
+#main .divLayer .divLayerLeft {
+  background-color: #f6f6f6;
+  opacity: 0.5;
+  width: 84rem;
+  height: 100%;
+}
+
+#main .divLayer .divLayerRight {
+  background-color: white;
+  opacity: 0.5;
+  width: calc(100% - 84rem);
+  height: 100%;
+}
+
+#main .dialogFlavor {
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 10rem;
+}
+
+#main .dialogFlavor .dialogTitle {
+  margin-top: 26rem;
+  margin-bottom: 14rem;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  color: #333333;
+  letter-spacing: 0;
+  text-align: center;
+}
+
+#main .dialogFlavor .divContent {
+  margin-left: 15rem;
+  margin-right: 15rem;
+}
+
+#main .dialogFlavor .divContent .divFlavorTitle {
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+  letter-spacing: 0;
+  margin-left: 5rem;
+  margin-bottom: 10rem;
+  margin-top: 10rem;
+}
+
+#main .dialogFlavor .divContent span {
+  display: inline-block;
+  height: 30rem;
+  opacity: 1;
+  background: #ffffff;
+  border: 1rem solid #ffc200;
+  border-radius: 7rem;
+  line-height: 30rem;
+  padding-left: 13rem;
+  padding-right: 13rem;
+  margin: 0 5rem 10rem 5rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: center;
+  color: #333333;
+}
+
+#main .dialogFlavor .divContent .spanActive {
+  background: #ffc200;
+  font-weight: 500;
+}
+
+#main .dialogFlavor .divBottom {
+  margin-top: 20rem;
+  margin-bottom: 19rem;
+  margin-left: 20rem;
+  display: flex;
+  position: relative;
+}
+
+#main .dialogFlavor .divBottom div:first-child {
+  height: 30rem;
+  opacity: 1;
+  font-size: 20rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 30rem;
+  letter-spacing: 0;
+}
+
+#main .dialogFlavor .divBottom div span {
+  font-size: 14rem;
+}
+
+#main .dialogFlavor .divBottom div:last-child {
+  width: 100rem;
+  height: 30rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 15rem;
+  text-align: center;
+  line-height: 30rem;
+  position: absolute;
+  right: 20rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+}
+
+#main .dialogFlavor .divFlavorClose {
+  position: absolute;
+  bottom: -70rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#main .dialogFlavor .divFlavorClose img {
+  width: 44rem;
+  height: 44rem;
+}
+
+#main .dialogCart {
+  background: linear-gradient(180deg, #ffffff 0%, #ffffff 81%);
+  border-radius: 12px 12px 0px 0px;
+}
+
+#main .dialogCart .divCartTitle {
+  height: 59rem;
+  display: flex;
+  line-height: 60rem;
+  position: relative;
+  margin-left: 15rem;
+  margin-right: 10rem;
+  border-bottom: 1px solid #efefef;
+}
+
+#main .dialogCart .divCartTitle .title {
+  font-size: 20rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  text-align: left;
+  color: #333333;
+}
+#main .dialogCart .divCartTitle i {
+  margin-right: 3rem;
+  font-size: 15rem;
+  vertical-align: middle;
+}
+
+#main .dialogCart .divCartTitle .clear {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+  color: #999999;
+  font-size: 14px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+}
+
+#main .dialogCart .divCartItem {
+  height: 108rem;
+  margin-left: 15rem;
+  margin-right: 10rem;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+#main .dialogCart .divCartContent {
+  height: calc(100% - 130rem);
+  overflow-y: auto;
+}
+
+#main .dialogCart .divCartContent .el-image {
+  width: 64rem;
+  height: 64rem;
+  opacity: 1;
+  margin-right: 10rem;
+}
+
+#main .dialogCart .divCartContent .el-image img {
+  width: 64rem;
+  height: 64rem;
+}
+
+#main .dialogCart .divCartContent .divDesc .name {
+  height: 22rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  text-align: left;
+  color: #333333;
+  line-height: 22rem;
+  letter-spacing: 0;
+  margin-bottom: 17rem;
+}
+
+#main .dialogCart .divCartContent .divDesc .price {
+  font-size: 18rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+}
+
+#main .dialogCart .divCartContent .divDesc .price .spanMoney {
+  font-size: 12rem;
+}
+
+#main .dialogCart .divCartContent .divCartItem .divNum {
+  position: absolute;
+  right: 0;
+  bottom: 10rem;
+  display: flex;
+  line-height: 36rem;
+  height: 36rem;
+}
+
+#main .dialogCart .divCartContent .divCartItem .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .dialogCart .divCartContent .divCartItem .divSplit {
+  width: calc(100% - 64rem);
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  opacity: 1;
+  background-color: #efefef;
+}
+
+#main .dialogCart .divCartContent .divCartItem:last-child .divSplit {
+  height: 0;
+}
+
+#main .detailsDialog {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+#main .detailsDialog .divContainer {
+  padding: 20rem 20rem 0 20rem;
+  overflow: auto;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+#main .detailsDialog .el-image {
+  width: 100%;
+  height: 100%;
+}
+
+#main .detailsDialog .el-image img {
+  width: 100%;
+  height: 100%;
+}
+
+#main .detailsDialog .title {
+  height: 28rem;
+  opacity: 1;
+  font-size: 20rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  color: #333333;
+  line-height: 28rem;
+  letter-spacing: 0;
+  margin-top: 18rem;
+  margin-bottom: 11rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+#main .detailsDialog .content {
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: justify;
+  color: #333333;
+  line-height: 24rem;
+}
+
+#main .detailsDialog .divNum {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 23rem;
+  margin-bottom: 20rem;
+  padding-left: 20rem;
+  padding-right: 20rem;
+}
+
+#main .detailsDialog .divNum .left {
+  font-size: 20rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 36rem;
+  letter-spacing: 0rem;
+}
+
+#main .detailsDialog .divNum .left span:first-child {
+  font-size: 12rem;
+}
+
+#main .detailsDialog .divNum .right {
+  display: flex;
+}
+
+#main .detailsDialog .divNum .divDishNum {
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  width: auto;
+}
+
+#main .detailsDialog .divNum .divTypes {
+  width: 64rem;
+  height: 24rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 12rem;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 24rem;
+  letter-spacing: 0;
+}
+
+#main .detailsDialog .divNum .divSubtract,
+.divAdd {
+  height: 36rem;
+}
+
+#main .detailsDialog .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .detailsDialog .detailsDialogClose {
+  position: absolute;
+  bottom: -70rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#main .detailsDialog .detailsDialogClose img {
+  width: 44rem;
+  height: 44rem;
+}
+
+#main .setMealDetailsDialog {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+#main .setMealDetailsDialog .divContainer {
+  padding: 20rem 20rem 0 20rem;
+  overflow: auto;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+#main .setMealDetailsDialog .el-image {
+  width: 100%;
+  height: 100%;
+}
+
+#main .setMealDetailsDialog .el-image img {
+  width: 100%;
+  height: 100%;
+}
+
+#main .setMealDetailsDialog .divSubTitle {
+  text-align: left;
+  margin-top: 16rem;
+  margin-bottom: 6rem;
+  height: 25rem;
+  opacity: 1;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #333333;
+  line-height: 25rem;
+  letter-spacing: 0px;
+  position: relative;
+}
+
+#main .setMealDetailsDialog .divContainer .item .divSubTitle .divPrice {
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 18rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 25rem;
+  letter-spacing: 0rem;
+}
+
+#main
+  .setMealDetailsDialog
+  .divContainer
+  .item
+  .divSubTitle
+  .divPrice
+  span:first-child {
+  font-size: 12rem;
+}
+
+#main .setMealDetailsDialog .title {
+  height: 28rem;
+  opacity: 1;
+  font-size: 20rem;
+  font-family: PingFangSC, PingFangSC-Semibold;
+  font-weight: 600;
+  color: #333333;
+  line-height: 28rem;
+  letter-spacing: 0;
+  margin-top: 18rem;
+  margin-bottom: 11rem;
+}
+
+#main .setMealDetailsDialog .content {
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: justify;
+  color: #333333;
+  line-height: 24rem;
+}
+
+#main .setMealDetailsDialog .divNum {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 23rem;
+  padding-bottom: 15rem;
+  padding-left: 20rem;
+  padding-right: 20rem;
+}
+
+#main .setMealDetailsDialog .divNum .left {
+  font-size: 20rem;
+  font-family: DIN, DIN-Medium;
+  font-weight: 500;
+  text-align: left;
+  color: #e94e3c;
+  line-height: 36rem;
+  letter-spacing: 0rem;
+}
+
+#main .setMealDetailsDialog .divNum .left span:first-child {
+  font-size: 12rem;
+}
+
+#main .setMealDetailsDialog .divNum .right {
+  display: flex;
+}
+
+#main .setMealDetailsDialog .divNum .divDishNum {
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  width: auto;
+}
+
+#main .setMealDetailsDialog .divNum .divTypes {
+  width: 64rem;
+  height: 24rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 12rem;
+  font-size: 12rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 24rem;
+  letter-spacing: 0;
+}
+
+#main .setMealDetailsDialog .divNum .divSubtract,
+.divAdd {
+  height: 36rem;
+}
+
+#main .setMealDetailsDialog .divNum img {
+  width: 36rem;
+  height: 36rem;
+}
+
+#main .setMealDetailsDialog .divNum .right .addCart {
+  width: 100rem;
+  height: 30rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 15rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 30rem;
+}
+
+#main .setMealDetailsDialog .detailsDialogClose {
+  position: absolute;
+  bottom: -70rem;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#main .setMealDetailsDialog .detailsDialogClose img {
+  width: 44rem;
+  height: 44rem;
+}

public/front/styles/no-wify.css

@@ -0,0 +1,74 @@
+#no_wifi .divHead {
+  width: 100%;
+  height: 88rem;
+  opacity: 1;
+  background: #333333;
+  position: relative;
+}
+
+#no_wifi .divHead .divTitle {
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  line-height: 25rem;
+  letter-spacing: 0;
+  position: absolute;
+  bottom: 13rem;
+  width: 100%;
+}
+
+#no_wifi .divHead .divTitle i {
+  position: absolute;
+  left: 16rem;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+#no_wifi .divContent {
+  height: calc(100vh - 88rem);
+  width: 100%;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+}
+
+#no_wifi .divContent img {
+  width: 239rem;
+  height: 130rem;
+  margin-top: 104rem;
+  margin-bottom: 19rem;
+}
+
+#no_wifi .divContent .divDesc {
+  height: 33rem;
+  opacity: 1;
+  font-size: 24rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 33rem;
+  letter-spacing: 0;
+  margin-bottom: 20rem;
+}
+
+#no_wifi .divContent .btnRefresh {
+  width: 124rem;
+  height: 36rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 18px;
+  opacity: 1;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 21rem;
+  letter-spacing: 0;
+  line-height: 36rem;
+}

public/front/styles/order.css

@@ -0,0 +1,153 @@
+#order {
+  height: 100%;
+}
+
+#order .divHead {
+  width: 100%;
+  height: 88rem;
+  opacity: 1;
+  background: #333333;
+  position: relative;
+}
+
+#order .divHead .divTitle {
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  line-height: 25rem;
+  letter-spacing: 0;
+  position: absolute;
+  bottom: 13rem;
+  width: 100%;
+}
+
+#order .divHead .divTitle i {
+  position: absolute;
+  left: 16rem;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+#order .divBody {
+  margin: 10rem 12rem 10rem 12rem;
+  background: #ffffff;
+  border-radius: 6rem;
+  padding-left: 10rem;
+  padding-right: 10rem;
+  height: calc(100% - 108rem);
+  overflow-y: auto;
+}
+
+#order .divBody .van-list .van-cell::after {
+  border: 0;
+}
+
+#order .divBody .item .timeStatus {
+  height: 46rem;
+  line-height: 16rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+  letter-spacing: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2rem dashed #efefef;
+  border-top: 1px solid #efefef;
+}
+
+#order .divBody .item .timeStatus span:first-child {
+  color: #333333;
+}
+
+#order .divBody .item .dishList {
+  padding-top: 10rem;
+  padding-bottom: 11rem;
+}
+
+#order .divBody .item .dishList .item {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  display: flex;
+  justify-content: space-between;
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+  letter-spacing: 0;
+}
+
+#order .divBody .item .result {
+  display: flex;
+  justify-content: flex-end;
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+}
+
+#order .divBody .item .result .price {
+  color: #343434;
+}
+
+#order .divBody .item .btn {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 17rem;
+  margin-top: 20rem;
+}
+
+#order .divBody .btn .btnAgain {
+  width: 124rem;
+  height: 36rem;
+  opacity: 1;
+  border: 1px solid #e5e4e4;
+  border-radius: 19rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  position: relative;
+}
+
+#order .divNoData {
+  width: 100%;
+  height: calc(100% - 88rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#order .divNoData .divContainer img {
+  width: 240rem;
+  height: 129rem;
+}
+
+#order .divNoData .divContainer div {
+  font-size: 24rem;
+  font-family: PingFangSC, PingFangSC-Medium;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 33rem;
+  height: 33rem;
+  margin-top: 20rem;
+}

public/front/styles/pay-success.css

@@ -0,0 +1,97 @@
+#pay_success .divHead {
+  width: 100%;
+  height: 88rem;
+  opacity: 1;
+  background: #333333;
+  position: relative;
+}
+
+#pay_success .divHead .divTitle {
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #ffffff;
+  line-height: 25rem;
+  letter-spacing: 0;
+  position: absolute;
+  bottom: 13rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#pay_success .divHead .divTitle i {
+  margin-left: 16rem;
+}
+
+#pay_success .divHead .divTitle img {
+  width: 18rem;
+  height: 18rem;
+  margin-right: 19rem;
+}
+
+#pay_success .divContent {
+  height: calc(100vh - 88rem);
+  width: 100%;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+}
+
+#pay_success .divContent img {
+  margin-top: 148rem;
+  margin-bottom: 19rem;
+  width: 90rem;
+  height: 86rem;
+}
+
+#pay_success .divContent .divSuccess {
+  height: 33rem;
+  opacity: 1;
+  font-size: 24rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 33rem;
+  margin-top: 19rem;
+  margin-bottom: 10rem;
+}
+
+#pay_success .divContent .divDesc,
+.divDesc1 {
+  height: 22rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: center;
+  color: #666666;
+  line-height: 22rem;
+}
+
+#pay_success .divContent .divDesc1 {
+  margin-top: 7rem;
+  margin-bottom: 20rem;
+}
+
+#pay_success .divContent .btnView {
+  width: 124rem;
+  height: 36rem;
+  opacity: 1;
+  background: #ffc200;
+  border-radius: 18px;
+  opacity: 1;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 21rem;
+  letter-spacing: 0;
+  line-height: 36rem;
+}

public/front/styles/user.css

@@ -0,0 +1,240 @@
+#user {
+  height: 100%;
+}
+
+#user .divHead {
+  width: 100%;
+  height: 164rem;
+  opacity: 1;
+  background: #ffc200;
+  box-sizing: border-box;
+  padding-left: 12rem;
+  padding-right: 12rem;
+}
+
+#user .divHead .divTitle {
+  height: 25rem;
+  opacity: 1;
+  font-size: 18rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 25rem;
+  letter-spacing: 0;
+  padding-top: 50rem;
+  margin-bottom: 18rem;
+  position: relative;
+}
+
+#user .divHead .divTitle i {
+  position: absolute;
+  left: 0;
+  margin-top: 5rem;
+}
+
+#user .divHead .divUser {
+  display: flex;
+}
+
+#user .divHead .divUser > img {
+  width: 58rem;
+  height: 58rem;
+  border-radius: 50%;
+  margin-right: 16rem;
+}
+
+#user .divHead .divUser .desc {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+#user .divHead .divUser .desc .divName {
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #333333;
+  margin-right: 6rem;
+  margin-bottom: 5rem;
+  display: flex;
+  align-items: center;
+}
+
+#user .divHead .divUser .desc .divName img {
+  width: 16rem;
+  height: 16rem;
+  opacity: 1;
+  margin-left: 6rem;
+}
+
+#user .divHead .divUser .desc .divPhone {
+  font-size: 14px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #333333;
+}
+
+#user .divContent {
+  height: calc(100% - 174rem);
+  overflow-y: auto;
+}
+
+#user .divLinks {
+  height: 104rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6rem;
+  padding-left: 17rem;
+  padding-right: 11rem;
+  margin: 10rem;
+}
+
+#user .divLinks .item {
+  height: 51rem;
+  line-height: 51rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+#user .divLinks .divSplit {
+  height: 1rem;
+  opacity: 1;
+  background-color: #ebebeb;
+  border: 0;
+}
+
+#user .divLinks .item img {
+  width: 18rem;
+  height: 18rem;
+  margin-right: 5rem;
+}
+
+#user .divLinks .item i {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+#user .divOrders {
+  margin: 0 10rem 10rem 10rem;
+  background: #ffffff;
+  border-radius: 6rem;
+  padding-left: 10rem;
+  padding-right: 10rem;
+  padding-bottom: 17rem;
+}
+
+#user .divOrders .title {
+  height: 60rem;
+  line-height: 60rem;
+  opacity: 1;
+  font-size: 16rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: left;
+  color: #333333;
+  letter-spacing: 0;
+  border-bottom: 2px solid #efefef;
+}
+
+#user .divOrders .timeStatus {
+  height: 46rem;
+  line-height: 16rem;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+  letter-spacing: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2rem dashed #efefef;
+}
+
+#user .divOrders .timeStatus span:first-child {
+  color: #333333;
+}
+
+#user .divOrders .dishList {
+  padding-top: 10rem;
+  padding-bottom: 11rem;
+}
+
+#user .divOrders .dishList .item {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  display: flex;
+  justify-content: space-between;
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+  letter-spacing: 0;
+}
+
+#user .divOrders .result {
+  display: flex;
+  justify-content: flex-end;
+  height: 20rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #666666;
+  line-height: 20rem;
+}
+
+#user .divOrders .result .price {
+  color: black;
+}
+
+#user .divOrders .btn {
+  margin-top: 20rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+#user .divOrders .btn .btnAgain {
+  width: 124rem;
+  height: 36rem;
+  opacity: 1;
+  border: 1px solid #e5e4e4;
+  border-radius: 19rem;
+  opacity: 1;
+  font-size: 14rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 36rem;
+  letter-spacing: 0;
+  position: relative;
+}
+
+#user .quitLogin {
+  margin: 0 10rem 10rem 10rem;
+  height: 50rem;
+  opacity: 1;
+  background: #ffffff;
+  border-radius: 6rem;
+  opacity: 1;
+  font-size: 15rem;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  text-align: center;
+  color: #333333;
+  line-height: 50rem;
+}

public/index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
+  <!-- 站点配置 -->
+  <script>
+    window.SITE_CONFIG = {};
+    window.SITE_CONFIG['version'] = 'v5.0.0';
+    window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
+    window.SITE_CONFIG['apiURL'] = '';                      // api请求地址
+    window.SITE_CONFIG['storeState'] = {};                  // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
+    window.SITE_CONFIG['contentTabDefault'] = {             // 内容标签页默认属性对象
+      'name': '',        // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
+      'params': {},      // 参数, 由 this.$route.params 自动赋值
+      'query': {},       // 查询参数, 由 this.$route.query 自动赋值
+      'menuId': '',      // 菜单id（用于选中侧边栏菜单，与this.$store.state.sidebarMenuActiveName进行匹配）
+      'title': '',       // 标题
+      'isTab': true,     // 是否通过tab展示内容?
+      'iframeURL': ''    // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配)
+    };
+    window.SITE_CONFIG['menuList'] = [];                     // 左侧菜单列表（后台返回，未做处理）
+    window.SITE_CONFIG['permissions'] = [];                  // 页面按钮操作权限（后台返回，未做处理）
+    window.SITE_CONFIG['dynamicRoutes'] = [];                // 动态路由列表
+    window.SITE_CONFIG['dynamicMenuRoutes'] = [];            // 动态(菜单)路由列表
+    window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false; // 动态(菜单)路由是否已经添加的状态标示（用于判断是否需要重新拉取数据并进行动态添加操作）
+  </script>
+
+  <!-- 开发环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
+    <script>
+    window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';
+    window.SITE_CONFIG['webSocketURL'] = 'ws://localhost:8080/api';
+    </script>
+  <% } %>
+  <!-- 集成测试环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
+    <script>
+      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';
+      window.SITE_CONFIG['webSocketURL'] = 'ws://localhost:8080/api';
+    </script>
+  <% } %>
+  <!-- 验收测试环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
+    <script>
+      window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/api';
+      window.SITE_CONFIG['webSocketURL'] = 'ws://localhost:8080/api';
+    </script>
+  <% } %>
+  <!-- 生产环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
+    <script>
+      window.SITE_CONFIG['apiURL'] = 'https://localhost:8080/api';
+      window.SITE_CONFIG['webSocketURL'] = 'wss://localhost:8080/api';
+    </script>
+  <% } %>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/App.vue

@@ -0,0 +1,166 @@
+<template>
+  <transition name="el-fade-in-linear">
+    <router-view />
+
+
+  </transition>
+</template>
+
+<style>
+  .el-table th.gutter{
+    display: table-cell!important;
+  }
+</style>
+<script>
+import Cookies from 'js-cookie'
+import { messages } from '@/i18n'
+import audioFile from '@/assets/audio/OrderNotificationTone.mp3'
+import silentAudio from '@/assets/audio/silent.mp3'
+
+import th from "element-ui/src/locale/lang/th";
+import WebsocketHeartbeatJs from 'websocket-heartbeat-js';
+import el from "element-ui/src/locale/lang/el";
+// let websocketHeartbeatJs = null
+// websocketHeartbeatJs = new WebsocketHeartbeatJs({
+//   url: `${window.SITE_CONFIG['webSocketURL']}/takeout/websocket?token=${Cookies.get('token')}`
+// });
+export default {
+  data() {
+    return {
+      timeout: 10 * 1000, // 45秒一次心跳
+      timeoutObj: null, // 心跳心跳倒计时
+      serverTimeoutObj: null, // 心跳倒计时
+      timeoutnum: null, // 断开 重连倒计时
+      lockReconnect: false, // 防止
+      websocket: null,
+      audio : null,
+      silentAudio : null,
+
+
+    }
+  },
+  watch: {
+    '$i18n.locale': 'i18nHandle'
+  },
+  created() {
+    this.silentAudio = new Audio(silentAudio);
+    this.audio = new Audio(audioFile);
+    this.i18nHandle(this.$i18n.locale)
+  },
+  mounted() {
+    this.initWebSocket();
+  },
+
+  methods: {
+    play(){
+
+    },
+    initWebSocket() {
+      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+      let wsUrl = `${window.SITE_CONFIG['webSocketURL']}/takeout/websocket?token=${Cookies.get('token')}`
+      this.websocket = new WebSocket(wsUrl);
+      this.websocket.onopen = this.websocketonopen;
+      this.websocket.onerror = () => {
+        console.log('WebSocket连接发生错误');
+        this.reconnect();
+      };
+      this.websocket.onmessage = this.setOnmessageMessage;
+      this.websocket.onclose = this.websocketclose;
+      // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
+      // window.onbeforeunload = that.onbeforeunload
+    },
+    async setOnmessageMessage(event) {
+      console.log('收到服务端消息:', event.data);
+      if (Cookies.get('token') === undefined) {
+        this.reconnect()
+        return
+      }
+      this.reset();
+      // //发现消息进入    开始处理前端触发逻辑
+      if (event.data === 'success' || event.data === 'heartbeat') {
+        return
+      }
+      if (event.data === 'close'){
+        this.websocket.close()
+        return
+      }
+      this.$notify({
+        title: '通知',
+        message: event.data,
+        type: 'success',
+        duration: 0
+      });
+      this.silentAudio.play();
+      setTimeout(() => {
+        this.audio.play()
+      }, 300)
+
+    },
+    start() {
+      console.log('start');
+      //清除延时器
+      this.timeoutObj && clearTimeout(this.timeoutObj);
+      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+      this.timeoutObj = setTimeout(() => {
+        if (this.websocket && this.websocket.readyState === 1) {
+          this.websocket.send('heartbeat');//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
+        } else {
+          this.reconnect();
+        }
+        //定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
+        this.serverTimeoutObj = setTimeout(() => {
+          this.websocket.close();
+        }, this.timeout)
+      }, this.timeout)
+    },
+    reset() { // 重置心跳
+      // 清除时间
+      clearTimeout(this.timeoutObj);
+      clearTimeout(this.serverTimeoutObj);
+      // 重启心跳
+      this.start();
+    },
+    // 重新连接
+    reconnect() {
+      if (this.lockReconnect) return
+      this.lockReconnect = true;
+      //没连接上会一直重连，设置延迟避免请求过多
+      this.timeoutnum && clearTimeout(this.timeoutnum);
+      this.timeoutnum = setTimeout(() => {
+        this.initWebSocket();
+        this.lockReconnect = false;
+      }, 5000)
+    },
+    websocketonopen() {
+      //开启心跳
+      this.start();
+      console.log("WebSocket连接成功!!!"+new Date()+"----"+this.websocket.readyState);
+    },
+    websocketonerror(e) {
+      console.log("WebSocket连接发生错误" + e);
+    },
+    websocketclose(e) {
+      // this.websocket.close();
+      // clearTimeout(this.timeoutObj);
+      // clearTimeout(this.serverTimeoutObj);
+      // console.log("WebSocket连接关闭");
+      this.reconnect()
+    },
+    websocketsend(message) {
+      this.websocket.send(message)
+    },
+    closeWebSocket() { // 关闭websocket
+      this.websocket.close()
+    },
+    i18nHandle(val, oldVal) {
+      Cookies.set('language', val)
+      document.querySelector('html').setAttribute('lang', val)
+      document.title = messages[val].brand.lg
+      // 非登录页面，切换语言刷新页面
+      if (this.$route.name !== 'login' && oldVal) {
+        window.location.reload()
+      }
+    },
+  }
+}
+</script>

src/api/dish/dish.js

@@ -0,0 +1,20 @@
+import http from "@/utils/request";
+
+// 获取菜品分类列表
+export const getCategoryList = (params) => {
+    return http.get(
+        '/takeout/category/list',
+        {
+            params
+        }
+    )
+}
+
+// 查菜品列表的接口
+export const queryDishList = (params) => {
+    return http.get(
+        'takeout/dish/list',
+        {params}
+    )}
+
+

src/api/orders/orders.js

@@ -0,0 +1,17 @@
+import http from "@/utils/request";
+// 查看接口
+export const queryOrderDetailById = (id) => {
+    return http.get(
+        `/takeout/orderdetail/detailInfo/${id}`
+    )
+}
+
+// 取消，派送，完成接口
+export const editOrderDetail = (params) => {
+    return http.put(
+        '/takeout/orders',
+        {...params}
+    )
+
+}
+

src/api/report/report.js

@@ -0,0 +1,60 @@
+import http from "@/utils/request";
+
+// 查询今日订单量
+export const getToDayOrderApi = () => {
+    return http.get(
+        'takeout/report/getToDayOrder',
+
+    )
+}
+
+// 查询昨日订单量
+export const getYesDayOrderApi = () => {
+    return http.get(
+        'takeout/report/getYesDayOrder',
+
+    )
+}
+
+//查询近一周的订单流水
+export const getOneWeekLiuShuiApi = () => {
+    return http.get(
+        'takeout/report/getOneWeekLiuShui',
+
+    )
+}
+
+
+//查询近一周的订单数量
+export const getOneWeekOrderApi = () => {
+    return http.get(
+        'takeout/report/getOneWeekOrder',
+
+    )
+}
+
+
+//查询热门套餐
+export const getHotSealApi = () => {
+    return http.get(
+        'takeout/report/getHotSeal',
+
+    )
+}
+
+//查询会员总数
+export const getUserCountApi = () => {
+    return http.get(
+        'takeout/report/getUserCount',
+
+    )
+}
+//查询员工总数
+export const getEmpCountApi = () => {
+    return http.get(
+        'takeout/report/getEmpCount',
+
+    )
+}
+
+

src/api/setmeal/setmeal.js

@@ -0,0 +1,4 @@
+import http from "@/utils/request";
+
+
+

src/assets/css/iconfont.svg

@@ -0,0 +1,101 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="jiaoseliebiao" unicode="&#58896;" d="M378.034621 651.249001m-244.750999 0a244.750999 244.750999 0 1 1 489.501997 0 244.750999 244.750999 0 1 1-489.501997 0ZM369.171771 309.006658h20.45273a340.878828 340.878828 0 0 0 340.878828-340.878828A97.491345 97.491345 0 0 0 629.603196-126.636485H125.784288A97.491345 97.491345 0 0 0 28.292943-30.508655a340.878828 340.878828 0 0 0 340.878828 340.878828zM920.713715 574.210386a191.573901 191.573901 0 0 0-336.106525-124.761651 278.838881 278.838881 0 0 1 85.901465 204.527297 272.703063 272.703063 0 0 1-17.725699 98.173102 184.074567 184.074567 0 0 0 77.038615 16.362184 190.892144 190.892144 0 0 0 190.892144-194.300932zM995.707057 77.890812a72.948069 72.948069 0 0 0-72.948069-72.948069H778.226365A370.194407 370.194407 0 0 1 584.60719 282.418109a248.159787 248.159787 0 0 0 143.169108 44.996006h14.998669A253.613848 253.613848 0 0 0 995.707057 77.890812z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="caozuorizhi" unicode="&#59368;" d="M12.795383 345.215488h92.979783a11.942357 11.942357 0 0 0 12.795383-11.942357v-12.795383a12.795383 12.795383 0 0 0-12.795383-11.942358H12.795383a12.36887 12.36887 0 0 0-12.795383 11.942358v12.795383a11.942357 11.942357 0 0 0 12.795383 11.942357z m0 365.521441h92.979783a11.942357 11.942357 0 0 0 12.795383-11.942357v-12.795383a11.942357 11.942357 0 0 0-12.795383-11.942358H12.795383a11.942357 11.942357 0 0 0-12.795383 11.942358v12.795383a11.942357 11.942357 0 0 0 12.795383 11.942357z m0-182.973977h92.979783a11.942357 11.942357 0 0 0 12.795383-11.515844v-13.221896a11.942357 11.942357 0 0 0-12.795383-11.515845H12.795383a11.942357 11.942357 0 0 0-12.795383 11.515845V516.247108a11.942357 11.942357 0 0 0 12.795383 11.515844z m0-365.094928h92.979783a12.36887 12.36887 0 0 0 12.795383-11.942358v-12.795383a11.942357 11.942357 0 0 0-12.795383-11.942357H12.795383a11.942357 11.942357 0 0 0-12.795383 11.942357v12.795383a12.36887 12.36887 0 0 0 12.795383 11.942358zM945.578804 822.909787h-69.521581a10.236306 10.236306 0 0 0-10.236307 8.103742A76.772298 76.772298 0 0 1 787.76908 895.84347H127.95383A85.302553 85.302553 0 0 1 37.533123 813.526506v-54.593634a9.383281 9.383281 0 0 1 9.809794-9.383281H106.628192a47.76943 47.76943 0 0 0 49.475481-45.210353v-27.296817a38.386149 38.386149 0 0 0-39.665688-37.106611H47.342917a9.383281 9.383281 0 0 1-9.809794-8.956768v-54.593634a9.383281 9.383281 0 0 1 9.809794-9.383281H106.628192a47.76943 47.76943 0 0 0 49.475481-46.063379v-17.913536a48.195943 48.195943 0 0 0-49.475481-46.063379H47.342917a9.383281 9.383281 0 0 1-9.809794-8.956768v-54.593634a9.383281 9.383281 0 0 1 9.809794-9.383281H106.628192a47.76943 47.76943 0 0 0 49.048968-45.636866v-27.296817a38.386149 38.386149 0 0 0-39.665687-36.680098H47.342917a9.809794 9.809794 0 0 1-10.236306-9.383281v-54.593634a9.809794 9.809794 0 0 1 10.236306-9.383281h58.858762a47.342917 47.342917 0 0 0 49.048968-45.636866V128.12049a37.959636 37.959636 0 0 0-39.239174-36.253585H46.916404a10.236306 10.236306 0 0 1-10.236306-9.383281v-127.95383A85.302553 85.302553 0 0 1 127.95383-127.78717h810.374257a85.302553 85.302553 0 0 1 85.302553 82.316964V749.549591a76.345785 76.345785 0 0 1-78.904862 73.360196z m-343.342777-91.273732a47.76943 47.76943 0 0 0 55.446659 13.648408l94.259322-49.048968A37.959636 37.959636 0 0 0 767.72298 646.760014l-298.558937-466.178454a10.662819 10.662819 0 0 0-13.221895-3.412102l-147.573418 76.345785a8.956768 8.956768 0 0 0-3.838615 12.36887z m-178.70885-597.117874l-119.850087-42.651276a10.662819 10.662819 0 0 0-12.795383 5.544666v2.559076l-9.809794 107.90773a9.383281 9.383281 0 0 0 8.956768 9.809794 13.648409 13.648409 0 0 0 5.971179 0l127.95383-66.962505a8.956768 8.956768 0 0 0 3.838615-12.36887 8.530255 8.530255 0 0 0-4.69164-4.69164z m522.051627-152.265057c0-40.0922-2.559077-72.933683-78.904862-72.933683H156.103673a76.772298 76.772298 0 0 0-78.051837 62.697376 8.956768 8.956768 0 0 0 7.250717 10.236307h692.230221a85.302553 85.302553 0 0 1 88.714655 82.316964V777.272921a9.809794 9.809794 0 0 0 10.236306 8.956768c38.812662 0 68.668555-5.118153 68.668556-72.933683v-731.042882z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="caidan" unicode="&#58894;" d="M148.7872 838.5536h177.152c64.9216 0 118.0672-53.1456 118.0672-118.0672v-295.2192H148.7872C83.8656 425.2672 30.72 478.4128 30.72 543.4368v177.152C30.72 785.408 83.8656 838.5536 148.7872 838.5536z m0-531.3536h295.2192v-295.2192c0-64.9216-53.1456-118.0672-118.0672-118.0672h-177.152C83.8656-105.984 30.72-52.9408 30.72 12.0832v177.152C30.72 254.0544 83.8656 307.2 148.7872 307.2z m0 0M768.7168 336.7936L562.0736 549.2736c-23.6544 17.7152-35.4304 53.1456-35.4304 82.6368s11.776 59.0848 35.4304 82.6368L686.08 838.5536C733.2864 885.76 810.0864 885.76 851.3536 838.5536l124.0064-124.0064c23.6544-23.6544 35.4304-53.1456 35.4304-82.6368s-11.776-59.0848-35.4304-82.6368L768.7168 336.7936z m0 478.208c-17.7152 0-29.4912-5.9392-41.3696-17.7152l-123.904-124.0064c-11.776-11.776-17.7152-23.6544-17.7152-41.3696s5.9392-29.4912 17.7152-41.3696l165.2736-165.2736 165.2736 165.2736c11.776 11.776 17.7152 23.6544 17.7152 41.3696s-5.9392 29.4912-17.7152 41.3696L809.984 797.2864c-11.776 11.776-23.552 17.7152-41.2672 17.7152z m0 0M562.0736 307.2h295.2192c64.9216 0 118.0672-53.1456 118.0672-118.0672v-177.152c0-64.9216-53.1456-118.0672-118.0672-118.0672h-177.152c-64.9216 0-118.0672 53.1456-118.0672 118.0672V307.2z m0 0"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fabiaowenzhang" unicode="&#59038;" d="M651.264 13.312c-12.8-12.8-23.04-23.04-31.744-32.256-8.704-8.704-13.312-13.824-14.336-14.848-4.608-3.584-9.728-7.168-14.848-11.264-5.632-4.096-10.752-7.168-16.384-10.24-5.632-3.072-13.824-6.144-25.088-10.24-11.776-4.096-23.04-7.68-34.816-11.264-11.776-3.584-23.04-7.168-33.792-9.216-10.752-2.56-18.944-4.608-24.576-5.632-10.752-1.536-17.92-0.512-22.016 4.096-3.584 4.608-4.608 12.288-2.56 23.04 1.024 5.12 2.56 13.312 5.632 24.064 2.56 10.752 5.632 22.016 9.728 32.768 3.584 11.264 7.168 22.016 10.24 31.232 3.584 10.24 6.144 16.384 7.68 20.48 5.632 11.776 12.8 22.016 22.016 30.72l17.408 17.408 33.792 33.792c13.824 13.312 28.672 28.16 45.056 45.056l49.152 49.152c38.912 38.4 82.944 81.408 131.584 128.512l114.176-112.64-226.304-222.72z m303.104 296.96c-4.608-4.608-8.704-8.704-12.288-12.8s-6.656-7.168-9.728-10.24c-3.584-3.584-31.744-31.744-34.816-33.792l-115.712 112.64c5.632 4.608 36.864 35.84 43.52 41.984 6.656 6.144 12.288 11.264 16.896 14.848 10.752 9.728 22.528 13.824 35.328 12.8 12.8-1.536 23.04-4.096 31.232-8.704 9.216-4.608 18.944-12.288 29.184-23.552 10.752-11.264 18.432-23.04 24.064-35.84 2.56-7.168 4.608-16.384 5.632-26.624 1.024-10.24-3.584-20.48-13.312-30.72zM754.688 860.16H148.48c-47.104 0-92.16-37.888-92.16-84.48v-758.784c0-46.592 45.056-91.136 92.672-91.136h124.416L847.36 492.032V775.68c0 46.592-45.056 84.48-92.672 84.48zM433.664 246.272h-220.16V302.08h220.16v-55.808z m0 178.176h-220.16V480.256h220.16v-55.808z m257.024 176.64H212.992V656.896h477.696v-55.808z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wenzhangliebiao" unicode="&#58924;" d="M662.4 612.8c-6.7 0-12.6 2.4-17.7 7.1-5.1 4.7-9.3 10.4-12.6 17.2-3.4 6.7-5.9 13.6-7.6 20.7-1.7 7.1-2.5 13-2.5 17.7L622 800.8l2 0c5.4 0 10.9-0.8 16.7-2.5 5.7-1.7 12.5-4.9 20.2-9.6 7.7-4.7 17.2-11.6 28.3-20.7 11.1-9.1 25.1-21.1 41.9-35.9 18.2-16.2 32.5-30 43-41.4 10.4-11.5 18.5-21.1 24.3-28.8s9.3-14.3 10.6-19.7c1.3-5.4 2-10.1 2-14.2l0-15.2L662.4 612.8 662.4 612.8zM491.6 41.7c-0.7-4.7-1-9.4-1-14.2l0-15.2c0-30.3 4.4-59 13.1-85.9 8.8-27 20.9-52.2 36.4-75.8l-357.8 0c-12.8 0-26.8 3.7-41.9 11.1-15.2 7.4-29.3 17.2-42.5 29.3-13.1 12.1-24.1 25.9-32.8 41.4-8.8 15.5-13.1 31.7-13.1 48.5L52 670.4c0 14.2 3.4 28.8 10.1 44 6.7 15.2 15.5 29.1 26.3 41.9s23.2 23.4 37.4 31.8c14.2 8.4 29 12.6 44.5 12.6l387.1 0L557.4 674.4c0-13.5 2-27.5 6.1-41.9 4-14.5 10.4-28.1 19.2-40.9 8.8-12.8 19.9-23.2 33.4-31.3 13.5-8.1 29.3-12.1 47.5-12.1L811 548.2l0-251.7c-5.4 1.3-11.1 2-17.2 2l-18.2 0c-50.5 0-96.7-11.8-138.5-35.4-41.8-23.6-75.5-55.3-101.1-95l-294.1 0c-17.5 0-32.5-6.1-45-18.2-12.5-12.1-18.7-27-18.7-44.5 0-17.5 6.2-32.5 18.7-45 12.5-12.5 27.5-18.7 45-18.7L491.6 41.7 491.6 41.7zM241.9 421.7c-17.5 0-32.5-6.2-45-18.7-12.5-12.5-18.7-27.5-18.7-45 0-17.5 6.2-32.3 18.7-44.5 12.5-12.1 27.5-18.2 45-18.2l379 0c17.5 0 32.3 6.1 44.5 18.2 12.1 12.1 18.2 27 18.2 44.5s-6.1 32.5-18.2 45c-12.1 12.5-27 18.7-44.5 18.7L241.9 421.7 241.9 421.7zM779.6 233.7c31 0 60-5.7 86.9-17.2 27-11.5 50.5-27.3 70.8-47.5s36-43.8 47.5-70.8c11.5-27 17.2-55.9 17.2-86.9s-5.7-60-17.2-86.9c-11.5-27-27.3-50.5-47.5-70.8s-43.8-36-70.8-47.5c-27-11.5-55.9-17.2-86.9-17.2-30.3 0-59 5.7-85.9 17.2-27 11.5-50.5 27.3-70.8 47.5s-36.2 43.8-48 70.8-17.7 55.9-17.7 86.9c0 31 5.9 60 17.7 86.9s27.8 50.5 48 70.8 43.8 36 70.8 47.5C720.7 228 749.3 233.7 779.6 233.7L779.6 233.7zM661.6 122.2c-10.9 0-20.3-3.9-28.1-11.7-7.8-7.8-11.7-17.2-11.7-28.1s3.9-20.2 11.7-27.8c7.8-7.6 17.2-11.4 28.1-11.4l236.8 0c10.9 0 20.2 3.8 27.8 11.4 7.6 7.6 11.4 16.8 11.4 27.8s-3.8 20.3-11.4 28.1c-7.6 7.8-16.8 11.7-27.8 11.7L661.6 122.2 661.6 122.2zM661.6-20.5c-10.9 0-20.3-3.9-28.1-11.7-7.8-7.8-11.7-17.2-11.7-28.1s3.9-20.2 11.7-27.8c7.8-7.6 17.2-11.4 28.1-11.4l236.8 0c10.9 0 20.2 3.8 27.8 11.4 7.6 7.6 11.4 16.8 11.4 27.8s-3.8 20.3-11.4 28.1c-7.6 7.8-16.8 11.7-27.8 11.7L661.6-20.5 661.6-20.5z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="yonghuliebiao" unicode="&#58899;" d="M654.359545 217.494897a62.831799 62.831799 0 0 0 25.395919 57.753815 67.030786 67.030786 0 0 1-31.743898 12.69696l-6.34898 6.553979a242.339226 242.339226 0 0 1 63.282798 51.199836 327.472954 327.472954 0 0 1 95.231696 223.845285c-5.799981 174.159444-142.914544 315.439993-316.823989 326.448958a315.575992 315.575992 0 0 1-316.824988-326.448958 301.749036 301.749036 0 0 1 95.026697-224.049284 276.479117 276.479117 0 0 1 69.836777-51.199837 435.956608 435.956608 0 0 1-139.468555-89.497714 380.618785 380.618785 0 0 1-88.677717-134.55257A449.552564 449.552564 0 0 1 71.501407-89.703122c1.375996-20.475935 17.623944-36.811882 38.092878-38.296878h380.107786a79.318747 79.318747 0 0 0-6.34998 38.296878 69.323779 69.323779 0 0 0 25.19092 57.549816 86.015725 86.015725 0 0 0 25.394919 19.249938c-33.768892 10.340967-56.855818 41.482868-56.933818 76.799755 0.583998 45.359855 36.976882 82.115738 82.329737 83.148735h38.091878a115.75263 115.75263 0 0 0 44.236859-12.69796l50.789838 12.69796a111.737643 111.737643 0 0 0-38.091879 70.449775zM907.902736 102.399264H686.104444a37.867879 37.867879 0 0 1-32.972895-19.249938 39.095875 39.095875 0 0 1 0-38.502877 37.68288 37.68288 0 0 1 32.972895-19.04594h221.797292a37.60088 37.60088 0 0 1 32.767895 19.04594 38.501877 38.501877 0 0 1-32.767895 57.752815zM705.150383 217.494897c1.345996-20.411935 17.490944-36.731883 37.887879-38.296878h171.007454a37.867879 37.867879 0 0 1 32.972895 19.250939 38.706876 38.706876 0 0 1 0 38.297877 37.867879 37.867879 0 0 1-32.972895 19.249939H743.039262a36.392884 36.392884 0 0 1-27.442912-10.648966 36.863882 36.863882 0 0 1-10.444967-27.852911zM597.425727 25.59951c21.207932 0 38.399877 17.191945 38.399878 38.399877 0 21.206932-17.191945 38.399877-38.399878 38.399877h-38.091878a38.112878 38.112878 0 0 1-32.972895-19.251938 39.095875 39.095875 0 0 1 0-38.501877 37.928879 37.928879 0 0 1 32.972895-19.045939h38.091878z m310.271009-76.799755H686.104444a37.867879 37.867879 0 0 1-32.972895-19.250939 38.706876 38.706876 0 0 1 0-38.297877A37.867879 37.867879 0 0 1 686.104444-128h227.941272c20.469935 1.484995 36.716883 17.819943 38.092878 38.296878a54.517826 54.517826 0 0 1-44.441858 38.502877z m-310.271009 0h-38.091878a38.112878 38.112878 0 0 1-32.972895-19.250939 38.706876 38.706876 0 0 1 0-38.297877A38.112878 38.112878 0 0 1 559.333849-128h38.091878c21.207932 0 38.399877 17.191945 38.399878 38.399877s-17.191945 38.399877-38.399878 38.399878z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiaoxi" unicode="&#58893;" d="M576.853333 421.546667l351.573334 331.093333c-17.066667 17.066667-40.96 27.306667-64.853334 27.306667h-699.733333c-27.306667 0-47.786667-10.24-64.853333-27.306667l351.573333-331.093333c34.133333-34.133333 88.746667-34.133333 126.293333 0zM576.853333 315.733333c-34.133333-34.133333-92.16-34.133333-126.293333 0L68.266667 670.72v-590.506667c0-51.2 40.96-92.16 92.16-92.16h699.733333c51.2 0 92.16 40.96 92.16 92.16V670.72l-375.466667-354.986667z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="liuyan" unicode="&#58886;" d="M800.941 489.428a363.67 363.67 0 0 0-2.763-25.749C776.735 315.091 658.932 207.23 518.094 207.23H472.22l-8.406-8.764c31.631-58.692 90.435-97.028 156.53-97.028h45.593l90.226-94.185a30.17 30.17 0 0 1 21.808-9.327c3.777 0 7.586 0.71 11.257 2.186 11.43 4.57 18.909 15.668 18.909 27.981v76.995c83.988 17.422 146.168 96.328 146.168 191.625 0 97.472-66.654 178.233-153.365 192.715zM755.185 469.874c2.1 14.6 3.112 27.722 3.112 40.17 0 142.983-107.756 259.337-240.202 259.337h-207.53c-132.46 0-240.221-116.354-240.221-259.338 0-128.374 84.829-234.279 198.528-255.466v-109.324a35.16 35.16 0 0 1 22.053-32.62c4.262-1.699 8.685-2.546 13.072-2.546 9.436 0 18.65 3.803 25.412 10.857l124.25 129.748h64.436c119.042-0.001 218.742 92.174 237.09 219.182zM243.792 590.199h337.615c9.438 0 17.13-8.124 17.13-18.106 0-9.986-7.692-18.096-17.13-18.096H243.792c-9.455 0-17.139 8.11-17.139 18.096 0 9.982 7.683 18.106 17.139 18.106z m202.705-167.99H243.792c-9.455 0-17.139 8.105-17.139 18.075 0 10.007 7.684 18.13 17.139 18.13h202.705c9.436 0 17.144-8.123 17.144-18.13 0-9.97-7.708-18.074-17.144-18.074z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fenlei" unicode="&#59500;" d="M0 896h460.8v-460.8H0zM563.2 896h460.8v-460.8h-460.8zM0 332.8h460.8v-460.8H0zM563.2 332.8h460.8v-460.8h-460.8z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shouye" unicode="&#58910;" d="M563.197497 896 460.802503 896 0.012259 409.611773c0 0 0.901006-102.396016 51.200051-102.396016s76.797012 0 76.797012 0 0-232.496449 0-332.816677c0-100.300818 102.397038-102.399081 102.397038-102.399081l204.79714 0c0 0 0 272.419617 0 358.416702 0 25.647017 25.600026 25.600026 25.600026 25.600026l102.394994 0c0 0 25.601047-0.851972 25.601047-25.600026 0-92.198911 0-358.416702 0-358.416702s99.647027 0 204.795097 0c105.147048 0 102.398059 102.399081 102.398059 102.399081L895.992721 332.814761c0 0 27.19875 0 76.799055 0 49.59724 0 51.195965 76.79599 51.195965 76.79599L563.197497 896z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wendang" unicode="&#58914;" d="M847.644444-128H150.755556c-48.355556 5.688889-88.177778 42.666667-93.866667 93.866667V802.133333C62.577778 850.488889 102.4 890.311111 150.755556 896h466.488888l327.111112-327.111111v-605.866667c-8.533333-48.355556-48.355556-85.333333-96.711112-91.022222z m0 696.888889h-184.888888c-25.6 2.844444-45.511111 22.755556-45.511112 45.511111V802.133333H196.266667c-25.6 2.844444-45.511111-17.066667-45.511111-42.666666v-748.088889c5.688889-22.755556 22.755556-42.666667 45.511111-45.511111h605.866666c25.6 2.844444 45.511111 22.755556 45.511111 45.511111V568.888889z m-139.377777-512H241.777778c-25.6 0-45.511111 19.911111-45.511111 45.511111 0 25.6 19.911111 45.511111 45.511111 45.511111h466.488889c25.6 0 45.511111-19.911111 45.511111-45.511111 0-22.755556-19.911111-45.511111-45.511111-45.511111zM241.777778 338.488889h233.244444c25.6 0 45.511111-19.911111 45.511111-45.511111 0-25.6-19.911111-45.511111-45.511111-45.511111H241.777778c-25.6 0-45.511111 19.911111-45.511111 45.511111 0 22.755556 19.911111 45.511111 45.511111 45.511111z m466.488889 91.022222H241.777778c-25.6 0-45.511111 19.911111-45.511111 45.511111 0 25.6 19.911111 45.511111 45.511111 45.511111h466.488889c25.6 0 45.511111-19.911111 45.511111-45.511111 0-22.755556-19.911111-45.511111-45.511111-45.511111z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xitong" unicode="&#58880;" d="M514.4 832.6c-1.2 0.1-2.4 0.2-3.6 0.2-1.3 0-2.5-0.1-3.7-0.2C262.2 830.1 64.4 631.2 63.5 386v-1.6c0-247.5 200.7-448.2 448.2-448.2s448.2 200.7 448.2 448.2c0 246.6-199.2 446.7-445.5 448.2z m28-320.3c48.3 2.1 95.1 9.9 139.8 22.6 10.6-37.7 17.2-77.1 19.5-117.7H542.4v95.1z m0 64.3V767.3c2-0.2 4.1-0.3 6.1-0.5 47.6-49 86.1-106.9 112.6-171-38-10.6-77.8-17.2-118.7-19.2z m-63.2 190.5V577c-39.7 2.6-78.3 9.4-115.2 20 27.3 63.8 66.3 121.4 114.5 170 0.2 0.1 0.5 0.1 0.7 0.1z m0-254.4v-95.5H321.4c2.5 41.2 9.6 81.2 20.8 119.4 43.9-13 89.7-21.1 137-23.9z m-222.1-95.5H129c5.8 68.3 29.5 131.6 66.3 185.1 27.4-16.9 56.2-31.7 86.3-44.2-13.4-45.1-21.8-92.2-24.5-140.9z m-0.2-63.2c2.4-50 10.8-98.3 24.5-144.4-29.8-12.4-58.3-27-85.5-43.8-37.7 54.2-61.7 118.6-67.1 188.2h128.1z m64.3 0h158v-99c-47.4-2.7-93.4-10.9-137.2-23.9-11.5 39.3-18.6 80.5-20.8 122.9z m158-163.4v-189c-1 0.1-2.1 0.2-3.1 0.3-47.3 48.3-85.7 105.4-112.6 168.5 37.1 10.8 75.8 17.6 115.7 20.2z m63.2-189.1V191.1c40-2 78.9-8.3 116.2-18.4-27.6-64.4-67.2-122.4-116.2-171.2 0.1 0 0 0 0 0z m0 253.9V354h159.1c-2.5-41.7-9.7-82.1-21-120.7-44.2 12.4-90.4 20-138.1 22.1zM765.7 354h128.9c-5.4-68.4-28.6-131.7-65.1-185.3-28 16.9-57.6 31.7-88.3 44 13.5 45.1 21.9 92.4 24.5 141.3z m0.2 63.2c-2.3 47.8-10.1 94.3-22.9 138.6 30.3 12.2 59.4 26.8 87 43.6 35.7-52.8 58.7-115 64.4-182.1H765.9z m23.4 232.7c-21.5-12.6-44-23.7-67.3-33.3-18.1 44.6-41.4 86.5-69.1 125.1 52-20.6 98.4-52.2 136.4-91.8z m-415.7 93c-28-38.3-51.7-80-70.3-124.3-23.1 9.8-45.4 21.1-66.7 33.8 38.2 39.3 84.9 70.4 137 90.5zM237.2 115.7c21 12.5 43 23.6 65.7 33.2 18.2-43.5 41.2-84.5 68.5-122.3-50.9 20.1-96.5 50.7-134.2 89.1z m409.9-90.8c29 39.1 53.4 81.8 72.4 127.3 23.9-9.7 47-21 69.1-33.9-39.2-40.9-87.5-73.1-141.5-93.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="pinglunzu" unicode="&#59237;" d="M698.6 584.4c28-35.1 42-73.3 42-114.7s-14-79.6-42-114.7c-28-35.1-66.2-62.9-114.6-83.3-48.4-20.4-100.9-30.6-157.8-30.6-25.6 0-51.8 2.3-78.6 7.1-36.9-26.2-78.3-45.3-124.1-57.2-10.7-2.7-23.5-5.1-38.4-7.1h-1.3c-3.3 0-6.3 1.2-9.1 3.6-2.8 2.3-4.5 5.5-5.2 9.4-0.3 0.9-0.5 1.9-0.5 2.9s0.1 2 0.2 2.9c0.2 0.9 0.5 1.8 0.9 2.7s0.8 1.6 1.1 2.3c0.3 0.6 0.8 1.4 1.6 2.4s1.3 1.8 1.8 2.3 1.1 1.2 2 2.3c0.9 1 1.5 1.7 1.8 2 1.5 1.8 4.9 5.5 10.2 11.2 5.4 5.6 9.2 10 11.6 13.1 2.3 3.1 5.7 7.4 10 13s8.1 11.3 11.2 17.2c3.1 5.9 6.2 12.5 9.1 19.6-36.9 21.4-65.9 47.8-87 79.1-21 31.3-31.5 64.6-31.5 100 0 41.4 14 79.6 42 114.7s66.1 62.9 114.6 83.3c48.4 20.4 100.9 30.6 157.8 30.6 56.8 0 109.5-10.2 157.8-30.6 48.3-20.5 86.4-48.3 114.4-83.5z m213.4-229c0-35.7-10.6-69.1-31.7-100.2s-50.1-57.4-87-78.8c3-7.1 6-13.7 9.1-19.6 3.1-5.9 6.9-11.6 11.2-17.2 4.3-5.5 7.7-9.9 10-13 2.3-3.1 6.3-7.5 11.6-13.1s8.7-9.4 10.2-11.2c0.3-0.3 0.9-0.9 1.8-2 0.9-1 1.6-1.8 2-2.3s1-1.2 1.8-2.3c0.8-1 1.2-1.9 1.6-2.4 0.3-0.6 0.7-1.3 1.1-2.3s0.8-1.8 0.9-2.7 0.2-1.9 0.2-2.9-0.2-2-0.5-2.9c-0.9-4.1-2.8-7.4-5.8-9.9-3-2.3-6.3-3.4-9.9-3.1-14.9 2.1-27.7 4.5-38.4 7.1-45.8 11.9-87.2 31-124.1 57.2-26.8-4.8-53-7.1-78.6-7.1-80.7 0-150.9 19.6-210.7 59 17.3-1.2 30.3-1.8 39.2-1.8 47.9 0 93.9 6.7 137.9 20.1 44 13.4 83.3 32.6 117.8 57.6 37.2 27.4 65.7 59 85.7 94.6 19.9 35.7 30 73.5 30 113.4 0 22.9-3.4 45.5-10.2 67.9 38.4-21.1 68.7-47.6 91.1-79.4 22.5-31.9 33.7-66 33.7-102.7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shezhi" unicode="&#58964;" d="M372.134088-108.846981a509.94041 509.94041 0 0 0-159.298198 76.821527l2.164315 103.514738a93.088793 93.088793 0 0 1-74.238313 93.088794l-101.536602 20.991523A509.428422 509.428422 0 0 0 0.011636 358.016591l82.243949 62.834935a93.088793 93.088793 0 0 1 26.507034 116.104998l-46.89348 92.390627A514.152678 514.152678 0 0 0 172.225904 767.584009l100.419536-25.133974a93.088793 93.088793 0 0 1 107.284834 51.664281l43.007023 94.252403a515.246472 515.246472 0 0 0 88.434354 7.610009c30.137497 0 59.669917-2.606486 88.411081-7.610009l43.007023-94.252403a93.088793 93.088793 0 0 1 107.284834-51.664281l100.396264 25.133974a514.152678 514.152678 0 0 0 110.356765-138.236858l-46.870208-92.390627a93.088793 93.088793 0 0 1 26.483762-116.104998l82.243949-62.834935a509.428422 509.428422 0 0 0-39.213654-172.44699l-101.51333-20.968251a93.088793 93.088793 0 0 1-74.238312-93.088793l2.141042-103.538011a509.94041 509.94041 0 0 0-159.298198-76.798255l-79.684007 66.279221a93.088793 93.088793 0 0 1-119.060567 0l-79.684007-66.302493zM511.348378 174.538579a209.449785 209.449785 0 1 1 0 418.89957 209.449785 209.449785 0 0 1 0-418.89957z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dashujukeshihuaico-" unicode="&#59391;" d="M529.408 486.4a51.2 51.2 0 0 1 0-72.192 74.752 74.752 0 0 0 0-105.472L378.88 156.67200000000003a74.752 74.752 0 1 0-105.472 105.472l33.792 36.352a51.2 51.2 0 0 1-72.704 72.192l-33.792-37.888a177.152 177.152 0 0 1 250.368-250.368l151.04 151.04a177.152 177.152 0 0 1 0 250.368A51.2 51.2 0 0 1 529.408 486.4zM809.984 691.2a181.248 181.248 0 0 1-250.368 0L409.6 542.2080000000001a177.152 177.152 0 0 1 0-250.368 51.2 51.2 0 0 1 72.704 72.192 74.752 74.752 0 0 0 0 105.472l151.04 151.04a76.288 76.288 0 0 0 105.472 0 74.752 74.752 0 0 0 0-105.472l-36.352-36.352a51.2 51.2 0 0 1 72.192-72.704l36.352 36.352A177.152 177.152 0 0 1 809.984 691.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="icontag" unicode="&#58909;" d="M939.133124 816.952666c-10.438747 10.526751-24.586978 16.449647-39.343053 16.449647l-338.631464-0.022513c-14.748912 0-28.904307-5.900384-39.33589-16.434298L81.44801 372.535901c-10.43056-10.534937-16.292058-24.812105-16.292058-39.70428s5.861498-29.170366 16.292058-39.697117l338.624301-341.745385c10.868535-10.961656 25.105794-16.449647 39.343053-16.449647 14.244422 0 28.481681 5.487991 39.33589 16.449647L939.133124 395.813047c10.43056 10.534937 16.299221 24.812105 16.299221 39.712467L955.432345 777.248386C955.432345 792.140561 949.563684 806.418752 939.133124 816.952666zM695.768397 459.043137c-61.458747 0-111.284549 50.284243-111.284549 112.307855s49.825802 112.307855 111.284549 112.307855 111.284549-50.284243 111.284549-112.307855S757.227144 459.043137 695.768397 459.043137z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="liebiao" unicode="&#58949;" d="M313.26 84.27h646.72v99.49H313.26v-99.49z m0 298.48h646.72v99.49H313.26v-99.49z m0 397.98v-99.49h646.72v99.49H313.26zM64.53 84.27h149.24v99.49H64.53v-99.49z m0 298.48h149.24v99.49H64.53v-99.49z m0 298.49h149.24v99.49H64.53v-99.49z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="user" unicode="&#58887;" d="M642.482 413.274c84.946 44.995 131.595 128.916 131.595 225.918 0.079 141.603-117.569 256.808-262.166 256.808-144.676 0-262.324-115.205-262.324-256.808 0-97.081 42.552-180.924 127.498-225.918-192.98-54.056-336.868-241.442-336.868-450.655 0-43.419 3.073-89.674 97.711-90.383 84.473-0.63 573.739 0.236 748.28 0 77.46-0.079 97.16 45.073 97.554 90.383 2.049 207.322-147.986 396.598-341.281 450.655z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="fangwenliang" unicode="&#58998;" d="M776.735 418.864a263.346 263.346 0 1 1-324.507 0 445.668 445.668 0 0 1-276.657-413.416v-89.08A44.164 44.164 0 0 1 219.46-128h790.04a44.164 44.164 0 0 1 43.891 44.369v89.079a445.634 445.634 0 0 1-276.657 413.416z m263.483 16.075a224.268 224.268 0 0 1 57.065 149.42A221.367 221.367 0 0 1 877.828 807.058c-3.618 0-7.03-0.921-10.614-1.092a312.323 312.323 0 0 0 42.764-92.458h-0.443a296.93 296.93 0 0 0-59.728-290.855c20-9.113 247.067-104.745 247.067-417.17h88.226a44.369 44.369 0 0 1 43.89 44.369v69.01a355.463 355.463 0 0 1-188.772 316.078z m-661.472-12.321a296.93 296.93 0 0 0-59.761 290.855 312.05 312.05 0 0 0 42.73 92.492c-3.413 0-6.826 1.092-10.58 1.092A221.333 221.333 0 0 1 131.68 584.36a224.336 224.336 0 0 1 57.065-149.421A355.36 355.36 0 0 1 0.007 118.862v-68.874a44.164 44.164 0 0 1 43.89-44.37h87.783c-0.034 312.255 227.066 407.887 247.066 417z"  horiz-adv-x="1229" />
+
+    
+    <glyph glyph-name="mima" unicode="&#58926;" d="M789.919 512.024h-30.885v119.666c0 143.864-102.523 256.525-248.175 256.525-146.239 0-245.895-115.062-245.895-256.525v-119.666h-30.883c-68.112 0-123.511-56.234-123.511-125.396v-376.141c0-69.165 55.4-125.396 123.511-125.396h555.838c68.111 0 123.512 56.233 123.512 125.396v376.141c0 69.165-55.402 125.396-123.512 125.396zM326.708 631.69c0 106.832 71.956 193.826 184.15 193.826 111.022 0 186.408-85.133 186.408-193.826v-119.666h-370.558v119.666zM851.661 10.485c0-34.581-27.7-62.699-61.743-62.699h-555.838c-34.044 0-61.768 28.116-61.768 62.699v376.141c0 34.582 27.724 62.699 61.768 62.699h555.838c34.043 0 61.743-28.116 61.743-62.699v-376.141zM511.986 323.976c-34.092 0-61.743-28.115-61.743-62.746 0-23.209 12.428-43.457 30.883-54.296v-102.45c0-17.292 13.814-31.3 30.859-31.3 17.071 0 30.885 14.008 30.885 31.3v102.455c18.459 10.841 30.886 31.086 30.886 54.292 0 34.63-27.653 62.746-61.771 62.746z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="tuichu" unicode="&#59074;" d="M744.448 407.04l-174.08 167.424c-13.824 13.312-34.816 13.312-48.64 0s-13.824-33.792 0-47.104l114.688-110.592H302.592c-20.992 0-34.816-13.312-34.816-33.792 0-20.48 13.824-33.792 34.816-33.792h333.824l-114.688-110.592c-13.824-13.312-13.824-33.792 0-47.104 7.168-7.168 13.824-9.728 24.064-9.728s17.408 3.584 24.064 9.728l174.08 171.008s0 3.584 3.584 3.584c10.752 10.752 10.752 31.232-3.072 40.96z m132.608-257.536c-20.992 0-34.816-13.312-34.816-33.792v-67.072c0-20.48-13.824-33.792-34.816-33.792H215.552c-20.992 0-34.816 13.312-34.816 33.792V718.848c0 20.48 13.824 33.792 34.816 33.792h591.36c20.992 0 34.816-13.312 34.816-33.792v-67.072c0-20.48 13.824-33.792 34.816-33.792s34.816 13.312 34.816 33.792V718.848c0 56.832-45.056 100.352-104.448 100.352H215.552c-58.88 0-103.936-43.52-103.936-100.352v-669.696c0-56.832 45.056-100.352 104.448-100.352h591.36c58.88 0 104.448 43.52 104.448 100.352v67.072c0 19.968-13.824 33.28-34.816 33.28z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="icwindowzoom48px" unicode="&#58883;" d="M689.336406 472.919169l175.621856 170.201403 92.037183-93.121887 0.078795 278.064017L689.336406 828.0627010000001l80.462566-88.700181L601.591993 561.7053080000001 689.336406 472.919169zM601.591993 207.60043099999996l170.202427-175.618786-93.16589-92.037183 278.105972-0.432859L956.734502 207.60043099999996l-88.655156-80.462566L690.377108 295.345868 601.591993 207.60043099999996zM336.275301 295.345868L160.653445 125.14446399999997 68.616262 218.26737500000002l0.870834-278.104949 266.788206 0.039909-80.461543 88.700181 168.20698 177.657212L336.275301 295.345868zM424.019715 560.6646049999999l-170.20038 175.61981 93.163843 92.037183L68.245825 828.233594l0.63138-267.568988 88.656179 80.462566 177.701215-168.20698L424.019715 560.6646049999999z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="dianzan" unicode="&#58892;" d="M884.876 472.857h-237.905c92.186 340.464-63.517 357.853-63.517 357.853-65.993 0-52.312-52.182-57.303-60.882 0-166.502-176.85-296.972-176.85-296.972v-472.172c0-46.608 63.517-63.394 88.433-63.394h357.452c33.641 0 61.036 88.224 61.036 88.224 88.434 300.706 88.434 390.177 88.434 390.177 0.001 62.128-59.781 57.164-59.781 57.164v0 0zM251.671 472.7h-142.457c-29.42 0-29.873-28.896-29.873-28.896l29.42-476.203c0-30.309 30.361-30.309 30.361-30.309h123.297c25.686 0 25.459 20.050 25.459 20.050l-0 479.247c0 36.574-36.208 36.111-36.208 36.111v0 0zM251.671 472.7z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wenzhang-copy" unicode="&#58947;" d="M788.551 603.105c-74.801 0-135.633 60.832-135.633 135.605v156.171h-487.636c-45.595 0-82.548-36.982-82.548-82.549v-856.719c0-45.567 36.955-82.493 82.548-82.493h693.46c45.571 0 82.523 36.926 82.523 82.493v647.493h-152.714zM805.084 56.884h-586.199v55.301h586.199v-55.301zM805.084 233.85h-586.199v55.301h586.199v-55.301zM805.084 410.816h-586.199v55.301h586.199v-55.301zM706.002 894.881v-156.171c0-45.567 36.955-82.493 82.549-82.493h152.714l-235.263 238.662z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="guanyuwo" unicode="&#58923;" d="M146.048 91.424V698.912a130.176 130.176 0 0 0 130.176 130.176H213.6a130.176 130.176 0 0 1-130.176-130.176v-607.488a130.176 130.176 0 0 1 130.176-130.176h62.624a130.176 130.176 0 0 0-130.176 130.176zM782.88 205.696a100.576 100.576 0 1 1-18.656 0 205.824 205.824 0 0 1-196.512-205.6c0-14.272 1.408-25.344 4.192-38.816h403.488a152.32 152.32 0 0 1 4 38.816 205.824 205.824 0 0 1-196.512 205.6zM645.76 225.248a150.592 150.592 0 0 0-22.784 80.096 150.752 150.752 0 0 0 150.592 150.592c27.52 0 53.28-7.552 75.52-20.512V698.912a130.176 130.176 0 0 1-130.176 130.176H318.656A130.176 130.176 0 0 1 188.48 698.912v-607.488a130.176 130.176 0 0 1 130.176-130.176h204.928a276.832 276.832 0 0 0-3.744 44.576 253.248 253.248 0 0 0 125.92 219.424zM567.712 758.272c0 23.456 17.6 42.624 39.104 42.624h120.416c21.504 0 39.072-19.168 39.072-42.624v-188.224s-4.128-42.624-18.784-42.624-60.768 128.544-80.512 128.544c-19.776 0-51.488-128.544-72.192-128.544-20.704 0-27.104 42.624-27.104 42.624V758.272z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/assets/css/index.css

@@ -0,0 +1,53 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+.el-card.is-always-shadow,
+.el-card.is-hover-shadow:focus,
+.el-card.is-hover-shadow:hover {
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.main-card {
+  min-height: calc(100vh - 126px);
+}
+.operation-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  margin-top: 2.25rem;
+}
+.pagination-container {
+  float: right;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+.dialog-title-container {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+.dialog-title-container i {
+  font-size: 1.5rem;
+  margin-right: 0.5rem;
+}
+.v-note-wrapper.fullscreen {
+  height: 100vh !important;
+}
+.title {
+  position: absolute;
+  left: 0;
+  font-size: 16px;
+  font-weight: bold;
+  color: #202a34;
+}
+.title::before {
+  content: '';
+  width: 24px;
+  height: 16px;
+  border-left: 3px solid #0081ff;
+  margin-right: 20px;
+}
+
+.side-nav-bar .el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}