3 years ago · 790d0d3a4d
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,4 @@
 
				+> 1%
			
 
				+last 2 versions
			
 
				+not dead
			
 
				+not ie 11
			
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,17 @@
 
				+module.exports = {
			
 
				+  root: true,
			
 
				+  env: {
			
 
				+    node: true
			
 
				+  },
			
 
				+  'extends': [
			
 
				+    'plugin:vue/vue3-essential',
			
 
				+    'eslint:recommended'
			
 
				+  ],
			
 
				+  parserOptions: {
			
 
				+    parser: '@babel/eslint-parser'
			
 
				+  },
			
 
				+  rules: {
			
 
				+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			
 
				+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
			
 
				+  }
			
 
				+}
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
 
				+package-lock.json
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 
				+# app
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,14 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset',
			
 
				+  ],
			
 
				+  plugins: [
			
 
				+    [
			
 
				+      "component",
			
 
				+      {
			
 
				+        "libraryName": "element-ui",
			
 
				+        "styleLibraryName": "theme-chalk"
			
 
				+      }
			
 
				+    ]
			
 
				+  ]
			
 
				+}
			
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,19 @@
 
				+{
			
 
				+  "compilerOptions": {
			
 
				+    "target": "es5",
			
 
				+    "module": "esnext",
			
 
				+    "baseUrl": "./",
			
 
				+    "moduleResolution": "node",
			
 
				+    "paths": {
			
 
				+      "@/*": [
			
 
				+        "src/*"
			
 
				+      ]
			
 
				+    },
			
 
				+    "lib": [
			
 
				+      "esnext",
			
 
				+      "dom",
			
 
				+      "dom.iterable",
			
 
				+      "scripthost"
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
--- a/package.json
+++ b/package.json
@@ -0,0 +1,31 @@
 
				+{
			
 
				+  "name": "app",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.8.3",
			
 
				+    "element-plus": "^2.1.7",
			
 
				+    "vue": "^3.2.13",
			
 
				+    "vue-router": "^4.0.3",
			
 
				+    "vuex": "^4.0.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@babel/core": "^7.12.16",
			
 
				+    "@babel/eslint-parser": "^7.12.16",
			
 
				+    "@vue/cli-plugin-babel": "~5.0.0",
			
 
				+    "@vue/cli-plugin-eslint": "~5.0.0",
			
 
				+    "@vue/cli-plugin-router": "~5.0.0",
			
 
				+    "@vue/cli-plugin-vuex": "~5.0.0",
			
 
				+    "@vue/cli-service": "~5.0.0",
			
 
				+    "babel-plugin-component": "^1.1.1",
			
 
				+    "eslint": "^7.32.0",
			
 
				+    "eslint-plugin-vue": "^8.0.3",
			
 
				+    "sass": "^1.32.7",
			
 
				+    "sass-loader": "^12.0.0"
			
 
				+  }
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,54 @@
 
				+<template>
			
 
				+  <div class="main-page">
			
 
				+    <div class="page-body">
			
 
				+      <router-view/>
			
 
				+    </div>
			
 
				+    <TabBottom/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+  import TabBottom from '@/components/BottomTab.vue'
			
 
				+  export default {
			
 
				+    components:{
			
 
				+      TabBottom
			
 
				+    }
			
 
				+  }
			
 
				+</script>
			
 
				+<style lang="scss">
			
 
				+  html,body,#app {
			
 
				+    height: 100% !important;
			
 
				+  }
			
 
				+  body {
			
 
				+
			
 
				+    padding: 0 !important;
			
 
				+    margin: 0 !important;
			
 
				+  }
			
 
				+#app {
			
 
				+  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  text-align: center;
			
 
				+  color: #2c3e50;
			
 
				+}
			
 
				+
			
 
				+nav {
			
 
				+
			
 
				+  a {
			
 
				+    font-weight: bold;
			
 
				+    color: #2c3e50;
			
 
				+
			
 
				+    &.router-link-exact-active {
			
 
				+      color: #42b983;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+.main-page {
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+  .page-body{
			
 
				+    flex: 1;
			
 
				+    background-color: #FAFAFC;
			
 
				+  }
			
 
				+</style>
			
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/tab-icons/exit.png
+++ b/src/assets/tab-icons/exit.png
--- a/src/assets/tab-icons/pepole.png
+++ b/src/assets/tab-icons/pepole.png
--- a/src/assets/tab-icons/tab-1-select.jpg
+++ b/src/assets/tab-icons/tab-1-select.jpg
--- a/src/assets/tab-icons/tab-2.jpg
+++ b/src/assets/tab-icons/tab-2.jpg
--- a/src/assets/tab-icons/tab-3.jpg
+++ b/src/assets/tab-icons/tab-3.jpg
--- a/src/assets/tab-icons/to_home_icon.png
+++ b/src/assets/tab-icons/to_home_icon.png
--- a/src/assets/top-head/headimg.jpg
+++ b/src/assets/top-head/headimg.jpg
--- a/src/assets/top-head/headimg1.jpg
+++ b/src/assets/top-head/headimg1.jpg
--- a/src/assets/top-head/headimg2.jpg
+++ b/src/assets/top-head/headimg2.jpg
--- a/src/components/BottomTab.vue
+++ b/src/components/BottomTab.vue
@@ -0,0 +1,172 @@
 
				+<template>
			
 
				+    <div class="tab-container">
			
 
				+        <div class="tab-home-btn">
			
 
				+            <img src="@/assets/tab-icons/to_home_icon.png" alt="返回首页">
			
 
				+        </div>
			
 
				+        <div class="tab-menu-list">
			
 
				+            <nav>
			
 
				+                <router-link to="/">
			
 
				+                    <div class="tab-item">
			
 
				+                        <img src="@/assets/tab-icons/tab-1-select.jpg" />
			
 
				+                        <span>本周食谱</span>
			
 
				+                    </div>
			
 
				+                </router-link>
			
 
				+                <router-link to="/about">
			
 
				+                    <div class="tab-item">
			
 
				+                        <img src="@/assets/tab-icons/tab-2.jpg" />
			
 
				+                        <span>我的健康</span>
			
 
				+                    </div>
			
 
				+                </router-link>
			
 
				+                <router-link to="/health">
			
 
				+                    <div class="tab-item">
			
 
				+                        <img src="@/assets/tab-icons/tab-3.jpg" />
			
 
				+                        <span>我是营养师</span>
			
 
				+                    </div>
			
 
				+                </router-link>
			
 
				+            </nav>
			
 
				+        </div>
			
 
				+        <div class="tab-child">
			
 
				+            <div class="child-box">
			
 
				+                <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
			
 
				+                <div class="BMI">
			
 
				+                    <img src="@/assets/tab-icons/pepole.png" alt="">
			
 
				+                    <div class="BMI-text">BMI未知</div>
			
 
				+                </div>
			
 
				+            </div>
			
 
				+            <div  class="child-info">
			
 
				+                <span class="child-name">张晨晨</span>
			
 
				+                <span class="le">五年级（2）班</span>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <div class="tab-exit">
			
 
				+            <img src="@/assets/tab-icons/exit.png" alt="">
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+    export default {
			
 
				+        name: "BottomTab"
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+    .tab-exit{
			
 
				+        width: 7vw;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        justify-content: center;
			
 
				+    }
			
 
				+    .tab-exit img{
			
 
				+        opacity: 0.54;
			
 
				+        width: 2.5vw;
			
 
				+        height: 3vw;
			
 
				+    }
			
 
				+    .child-info{
			
 
				+        position: absolute;
			
 
				+        bottom: 10px;
			
 
				+    }
			
 
				+    .child-name{
			
 
				+        font-size: 2.3vw;
			
 
				+        font-weight: 600;
			
 
				+        margin-right: 5px;
			
 
				+    }
			
 
				+    .le{
			
 
				+        font-size: 2vw;
			
 
				+        font-weight: 300;
			
 
				+    }
			
 
				+.BMI{
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    border: 0.5px solid rgba(0,0,0,0.38);
			
 
				+    width: 100% ;
			
 
				+    border-radius: 50px;
			
 
				+    position: relative;
			
 
				+    top: -25px;
			
 
				+    left: -2px;
			
 
				+    background-color: white;
			
 
				+    padding: 2px 2px;
			
 
				+
			
 
				+}
			
 
				+.BMI img {
			
 
				+    opacity: 0.5;
			
 
				+    width: 16px !important;
			
 
				+    height: 18px !important;
			
 
				+}
			
 
				+.BMI-text{
			
 
				+    opacity: 0.5;
			
 
				+    flex: 1;
			
 
				+    font-size: 0.7em !important;
			
 
				+}
			
 
				+.tab-container{
			
 
				+    min-height: 13vh;
			
 
				+    max-height: 20vh;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    border-top: 1px solid #88888822;
			
 
				+}
			
 
				+.tab-home-btn img{
			
 
				+    width: 6vw;
			
 
				+}
			
 
				+.tab-home-btn{
			
 
				+    width: 10vw;
			
 
				+    height: 100%;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    border-right: 1px solid #88888822;
			
 
				+}
			
 
				+.tab-menu-list{
			
 
				+    flex: 1;
			
 
				+    height: 80%;
			
 
				+    border-right: 1px solid #88888822;
			
 
				+}
			
 
				+.tab-menu-list nav {
			
 
				+    display: flex;
			
 
				+    padding-left: 10px;
			
 
				+}
			
 
				+nav{
			
 
				+    height: 100%;
			
 
				+}
			
 
				+nav a.router-link-exact-active {
			
 
				+    text-decoration: none !important;
			
 
				+    color: #000000DE;
			
 
				+    font-weight: 600;
			
 
				+}
			
 
				+nav a{
			
 
				+    text-decoration: none !important;
			
 
				+    font-weight: 400;
			
 
				+    font-size: 0.7em;
			
 
				+    color: #0000008A;
			
 
				+}
			
 
				+.tab-item  {
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    height: 100%;
			
 
				+    width: 15vw;
			
 
				+}
			
 
				+.tab-item span {
			
 
				+    margin-top: 10px;
			
 
				+}
			
 
				+.tab-item img{
			
 
				+    width: 13vw;
			
 
				+}
			
 
				+    .tab-child{
			
 
				+        width: 22vw;
			
 
				+        height: 100%;
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        border-right: 1px solid #88888822;
			
 
				+    }
			
 
				+    .child-box img{
			
 
				+        position: relative;
			
 
				+        width: 50px;
			
 
				+        height: 50px;
			
 
				+        border-radius: 50%;
			
 
				+    }
			
 
				+</style>
			
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,60 @@
 
				+<template>
			
 
				+  <div class="hello">
			
 
				+    <h1>{{ msg }}</h1>
			
 
				+    <p>
			
 
				+      For a guide and recipes on how to configure / customize this project,<br>
			
 
				+      check out the
			
 
				+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
			
 
				+    </p>
			
 
				+    <h3>Installed CLI Plugins</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
			
 
				+    </ul>
			
 
				+    <h3>Essential Links</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
			
 
				+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
			
 
				+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
			
 
				+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
			
 
				+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
			
 
				+    </ul>
			
 
				+    <h3>Ecosystem</h3>
			
 
				+    <ul>
			
 
				+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
			
 
				+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
			
 
				+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
			
 
				+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'HelloWorld',
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+h3 {
			
 
				+  margin: 40px 0 0;
			
 
				+}
			
 
				+ul {
			
 
				+  list-style-type: none;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+li {
			
 
				+  display: inline-block;
			
 
				+  margin: 0 10px;
			
 
				+}
			
 
				+a {
			
 
				+  color: #42b983;
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,8 @@
 
				+import { createApp } from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import store from './store'
			
 
				+import ElementPlus from 'element-plus';
			
 
				+import 'element-plus/dist/index.css'
			
 
				+
			
 
				+createApp(App).use(ElementPlus).use(store).use(router).mount('#app')
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,27 @@
 
				+import { createRouter, createWebHashHistory } from 'vue-router'
			
 
				+import HomeView from '../views/HomeView.vue'
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'home',
			
 
				+    component: HomeView
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/about',
			
 
				+    name: 'about',
			
 
				+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/health',
			
 
				+    name: 'health',
			
 
				+    component: () => import(/* webpackChunkName: "about" */ '../views/MyHealth.vue')
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+const router = createRouter({
			
 
				+  history: createWebHashHistory(),
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,24 @@
 
				+import { createStore } from 'vuex'
			
 
				+
			
 
				+export default createStore({
			
 
				+  state: {
			
 
				+    tabIndex: 0
			
 
				+  },
			
 
				+  getters: {
			
 
				+    tabIndex:(state) => {
			
 
				+      return state.tabIndex
			
 
				+    }
			
 
				+  },
			
 
				+  mutations: {
			
 
				+    setTabIndex: (state, tabindex) => {
			
 
				+      state.tabIndex = tabindex
			
 
				+    }
			
 
				+  },
			
 
				+  actions: {
			
 
				+    commitTabIndex: (context,tabIndex) => {
			
 
				+      context.commit('setTabIndex',tabIndex)
			
 
				+    }
			
 
				+  },
			
 
				+  modules: {
			
 
				+  }
			
 
				+})
			
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -0,0 +1,5 @@
 
				+<template>
			
 
				+  <div class="about">
			
 
				+    <h1>This is an about page</h1>
			
 
				+  </div>
			
 
				+</template>
			
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -0,0 +1,27 @@
 
				+<template>
			
 
				+  <div class="home">
			
 
				+    <div class="top-content">
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// @ is an alias to /src
			
 
				+// import HelloWorld from '@/components/HelloWorld.vue'
			
 
				+
			
 
				+export default {
			
 
				+  name: 'HomeView',
			
 
				+  components: {
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+<style>
			
 
				+  .top-content {
			
 
				+    width: 100vw;
			
 
				+    height: 24vh;
			
 
				+    background-image: url(../assets/top-head/headimg2.jpg);
			
 
				+    background-size: cover;
			
 
				+    background-position:center ;
			
 
				+  }
			
 
				+</style>
			
--- a/src/views/MyHealth.vue
+++ b/src/views/MyHealth.vue
@@ -0,0 +1,13 @@
 
				+<template>
			
 
				+    <div>HEALTH</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+    export default {
			
 
				+        name: "MyHealth"
			
 
				+    }
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+
			
 
				+</style>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,4 @@
 
				+const { defineConfig } = require('@vue/cli-service')
			
 
				+module.exports = defineConfig({
			
 
				+  transpileDependencies: true
			
 
				+})