全局样式

.env.production

@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # 生产环境
-VUE_APP_BASE_API = 'http://106.15.121.64/api'
+VUE_APP_BASE_API = 'http://18.163.50.191:19005/api'

.postcssrc.js

@@ -3,11 +3,6 @@ module.exports = {
   plugins: {
     autoprefixer: {
       overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
-    },
-    'postcss-pxtorem': {
-      rootValue: 32,
-      propList: ['*'],
-      selectorBlackList: ['van-']
     }
   }
 }

server/.autod.conf.js

@@ -1,29 +0,0 @@
-'use strict';
-
-module.exports = {
-  write: true,
-  prefix: '^',
-  plugin: 'autod-egg',
-  test: [
-    'test',
-    'benchmark',
-  ],
-  dep: [
-    'egg',
-    'egg-scripts',
-  ],
-  devdep: [
-    'egg-ci',
-    'egg-bin',
-    'egg-mock',
-    'autod',
-    'autod-egg',
-    'eslint',
-    'eslint-config-egg',
-  ],
-  exclude: [
-    './test/fixtures',
-    './dist',
-  ],
-};
-

server/.eslintignore

@@ -1 +0,0 @@
-coverage

server/.eslintrc

@@ -1,3 +0,0 @@
-{
-  "extends": "eslint-config-egg"
-}

server/.github/workflows/nodejs.yml

@@ -1,31 +0,0 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  build:
-
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        node-version: [10.x]
-        os: [ubuntu-latest, windows-latest, macos-latest]
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm i -g npminstall && npminstall
-    - run: npm run ci
-      env:
-        CI: true

server/.gitignore

@@ -1,14 +0,0 @@
-logs/
-npm-debug.log
-yarn-error.log
-node_modules/
-package-lock.json
-yarn.lock
-coverage/
-.idea/
-run/
-.DS_Store
-*.sw*
-*.un~
-typings/
-.nyc_output/

server/.travis.yml

@@ -1,12 +0,0 @@
-
-language: node_js
-node_js:
-  - '10'
-before_install:
-  - npm i npminstall -g
-install:
-  - npminstall
-script:
-  - npm run ci
-after_script:
-  - npminstall codecov && codecov

server/README.md

@@ -1,33 +0,0 @@
-# egg-server-admin
-
-
-
-## QuickStart
-
-<!-- add docs here for user -->
-
-see [egg docs][egg] for more detail.
-
-### Development
-
-```bash
-$ npm i
-$ npm run dev
-$ open http://localhost:7001/
-```
-
-### Deploy
-
-```bash
-$ npm start
-$ npm stop
-```
-
-### npm scripts
-
-- Use `npm run lint` to check code style.
-- Use `npm test` to run unit test.
-- Use `npm run autod` to auto detect dependencies upgrade, see [autod](https://www.npmjs.com/package/autod) for more detail.
-
-
-[egg]: https://eggjs.org

server/app.js

@@ -1,5 +0,0 @@
-// app.js
-'use strict';
-module.exports = app => {
-
-};

server/app/controller/system.js

@@ -1,88 +0,0 @@
-'use strict';
-const Controller = require('../core/base_controller');
-const pMap = require('p-map');
-class HomeController extends Controller {
-  // 登录
-  async login() {
-    const {
-      ctx,
-    } = this;
-    try {
-      const res = await ctx.helper.http('/user/login', ctx.request.body);
-      this.success(res);
-    } catch (error) {
-      this.notFound(error);
-    }
-  }
-  // 注册
-  async register() {
-    const {
-      ctx,
-    } = this;
-    try {
-      const res = await ctx.helper.http('/user/register', ctx.request.body);
-      this.success(res);
-    } catch (error) {
-      this.notFound(error);
-    }
-  }
-  // 重置密码
-  async forget() {
-    const {
-      ctx,
-    } = this;
-    try {
-      const res = await ctx.helper.http('/user/forget', ctx.request.body);
-      this.success(res);
-    } catch (error) {
-      this.notFound(error);
-    }
-  }
-  // 获取登录用户详情
-  async getUser() {
-    const {
-      ctx,
-    } = this;
-    try {
-      const res = await ctx.helper.http('/user/getUser');
-      this.success(res);
-    } catch (error) {
-      this.notFound(error);
-    }
-  }
-  // 获取列表
-  async getList() {
-    const {
-      ctx,
-    } = this;
-    try {
-      const res = await ctx.helper.http('/list/getList', ctx.request.body);
-      this.success(res);
-    } catch (error) {
-      this.notFound(error);
-    }
-  }
-  // 聚合数据
-  async makeUpList() {
-    const {
-      ctx,
-    } = this;
-    const urls = [{ name: 'product', url: '/product' }, { name: 'news', url: '/news' }, { name: 'order', url: '/order' }, { name: 'tree', url: '/tree' }];
-    const arr = {};
-    await pMap(urls, async item => {
-      const res = await ctx.helper.http(item.url);
-      arr[item.name] = res.data;
-    });
-    this.success({ code: 1, msg: 'success', data: arr });
-  }
-  // 十万条数据
-  getMuchList(){
-    let arr=[]
-    for(let i=0;i<100000;i++){
-      arr.push(i)
-    }
-    this.success({code:1,msg:'success',data:arr})
-  }
-}
-
-module.exports = HomeController;

server/app/core/base_controller.js

@@ -1,25 +0,0 @@
-'use strict';
-const { Controller } = require('egg');
-class BaseController extends Controller {
-  get user() {
-    return this.ctx.session.user;
-  }
-  success(res) {
-    // 后端数据返回不是驼峰式，可以通过该方法清洗数据，数据大性能可能有影响
-    this.ctx.helper.formaterResponse(res.data);
-    this.ctx.body = {
-      code: res.code,
-      data: res.data,
-      msg: res.msg,
-    };
-  }
-  notFound(msg) {
-    msg = msg || 'not found';
-    this.ctx.body = {
-      code: -1,
-      data: '',
-      msg,
-    };
-  }
-}
-module.exports = BaseController;

server/app/extend/helper.js

@@ -1,85 +0,0 @@
-'use strict';
-/* 这里统一放一些工具函数 */
-module.exports = {
-  // http请求
-  async http(url, data, method = 'POST') {
-    const { ctx } = this;
-    let targetUrl;
-    if (url.includes('http')) {
-      targetUrl = url;
-    } else {
-      targetUrl = this.app.config.baseUrl + url;
-    }
-    try {
-      const res = await ctx.curl(targetUrl, {
-        method,
-        data,
-        dataType: 'json',
-        timing: true,
-        headers: ctx.header,
-      });
-      /* timing ：{
-          queuing：分配 socket 耗时
-          dnslookup：DNS 查询耗时
-          connected：socket 三次握手连接成功耗时
-          requestSent：请求数据完整发送完毕耗时
-          waiting：收到第一个字节的响应数据耗时
-          contentDownload：全部响应数据接收完毕耗时
-          }
-      */
-      if (res.res.timing.contentDownload > 1000) {
-        ctx.logger.info(
-          `${method}请求${targetUrl}响应耗时：${res.res.timing.contentDownload}ms`
-        );
-      }
-      // 这里可以根据后台返回状态码判断请求成功或失败
-      if (res.data.code !== 1) {
-        throw res.data.msg;
-      }
-      return res.data;
-    } catch (error) {
-      ctx.logger.warn('请求错误：' + error);
-      throw error;
-    }
-  },
-  // 下划转驼峰
-  camelCase(val) {
-    const arr = val.split('_');
-    if (arr.length > 1) {
-      if (arr[0] === '') {
-        arr.splice(0, 1);
-      }
-      for (let i = 1; i < arr.length; i++) {
-        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
-      }
-      val = arr.join('');
-      return val;
-    }
-    return false;
-  },
-  // 响应数据下划转驼峰
-  formaterResponse(obj) {
-    if (Array.isArray(obj)) {
-      obj.forEach(item => {
-        return this.formaterResponse(item);
-      });
-    } else {
-      Object.keys(obj).forEach(key => {
-        const value = obj[key];
-        if (this.camelCase(key)) {
-          obj[this.camelCase(key)] = value;
-          delete obj[key];
-        }
-        if (Array.isArray(value)) {
-          value.forEach(node => {
-            return this.formaterResponse(node);
-          });
-        }
-        if (Object.prototype.toString.call(value) === '[object Object]') {
-          return this.formaterResponse(value);
-        }
-      });
-      return obj;
-    }
-  },
-};

server/app/router.js

@@ -1,8 +0,0 @@
-'use strict';
-
-/**
- * @param {Egg.Application} app - egg application
- */
-module.exports = app => {
-  require('./router/system')(app);
-};

server/app/router/system.js

@@ -1,13 +0,0 @@
-'use strict';
-
-// 系统接口
-module.exports = app => {
-  const { system } = app.controller;
-  app.router.post('/login', system.login);
-  app.router.post('/register', system.register);
-  app.router.post('/forget', system.forget);
-  app.router.post('/getUser', system.getUser);
-  app.router.post('/getList', system.getList);
-  app.router.post('/getMuchList', system.getMuchList);
-
-};

server/appveyor.yml

@@ -1,14 +0,0 @@
-environment:
-  matrix:
-    - nodejs_version: '10'
-
-install:
-  - ps: Install-Product node $env:nodejs_version
-  - npm i npminstall && node_modules\.bin\npminstall
-
-test_script:
-  - node --version
-  - npm --version
-  - npm run test
-
-build: off

server/config/config.default.js

@@ -1,40 +0,0 @@
-/* eslint valid-jsdoc: "off" */
-
-'use strict';
-
-/**
- * @param {Egg.EggAppInfo} appInfo app info
- */
-module.exports = appInfo => {
-  /**
-   * built-in config
-   * @type {Egg.EggAppConfig}
-   **/
-  const config = exports = {};
-  config.security = {
-    csrf: {
-      headerName: 'token',
-      enable: false,
-    },
-    domainWhiteList: [ '*' ],
-  };
-  // 跨域配置
-  config.cors = {
-    origin: '*',
-    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
-  };
-  // use for cookie sign key, should change to your own and keep security
-  config.keys = appInfo.name + 'Lowkey_52033';
-
-  // add your middleware config here
-  config.middleware = [];
-  // add your user config here
-  const userConfig = {
-    // myAppName: 'egg',
-  };
-
-  return {
-    ...config,
-    ...userConfig,
-  };
-};

server/config/config.local.js

@@ -1,9 +0,0 @@
-/* eslint valid-jsdoc: "off" */
-'use strict';
-module.exports = () => {
-  return {
-    // baseUrl: 'https://cnodejs.org/api/v1',
-    // baseUrl: 'http://localhost:3000',
-    baseUrl: 'http://106.15.121.64/server',
-  };
-};

server/config/config.prod.js

@@ -1,32 +0,0 @@
-/* eslint valid-jsdoc: "off" */
-
-'use strict';
-
-/**
- * @param {Egg.EggAppInfo} appInfo app info
- */
-module.exports = appInfo => {
-  /**
-   * built-in config
-   * @type {Egg.EggAppConfig}
-   **/
-  const config = exports = {
-    baseUrl: 'http://106.15.121.64/server',
-  };
-
-  // use for cookie sign key, should change to your own and keep security
-  config.keys = appInfo.name + '_1586587199716_572';
-
-  // add your middleware config here
-  config.middleware = [];
-
-  // add your user config here
-  const userConfig = {
-    // myAppName: 'egg',
-  };
-
-  return {
-    ...config,
-    ...userConfig,
-  };
-};

server/config/plugin.js

@@ -1,10 +0,0 @@
-'use strict';
-
-/** @type Egg.EggPlugin */
-module.exports = {
-  // had enabled by egg
-  cors: {
-    enable: true,
-    package: 'egg-cors',
-  },
-};

server/jsconfig.json

@@ -1,5 +0,0 @@
-{
-  "include": [
-    "**/*"
-  ]
-}

server/package.json

@@ -1,50 +0,0 @@
-{
-  "name": "egg-server-templete",
-  "version": "1.0.0",
-  "description": "",
-  "private": true,
-  "egg": {
-    "declarations": true
-  },
-  "dependencies": {
-    "egg": "^2.15.1",
-    "egg-cors": "^2.2.3",
-    "egg-scripts": "^2.11.0",
-    "lodash": "^4.17.15",
-    "mockjs": "^1.1.0",
-    "p-map": "^4.0.0"
-  },
-  "devDependencies": {
-    "autod": "^3.0.1",
-    "autod-egg": "^1.1.0",
-    "egg-bin": "^4.11.0",
-    "egg-ci": "^1.11.0",
-    "egg-mock": "^3.21.0",
-    "eslint": "^5.13.0",
-    "eslint-config-egg": "^7.1.0"
-  },
-  "engines": {
-    "node": ">=10.0.0"
-  },
-  "scripts": {
-    "start": "egg-scripts start --daemon --title=egg-server-sikai-node",
-    "stop": "egg-scripts stop --title=egg-server-sikai-node",
-    "dev": "egg-bin dev",
-    "debug": "egg-bin debug",
-    "test": "npm run lint -- --fix && npm run test-local",
-    "test-local": "egg-bin test",
-    "cov": "egg-bin cov",
-    "lint": "eslint .",
-    "ci": "npm run lint && npm run cov",
-    "autod": "autod"
-  },
-  "ci": {
-    "version": "10"
-  },
-  "repository": {
-    "type": "git",
-    "url": ""
-  },
-  "author": "lowKey",
-  "license": "MIT"
-}

src/App.vue

@@ -1,12 +1,48 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view></router-view>
+    <TabBar v-if="showTabBar"></TabBar>
   </div>
 </template>
 
+<script>
+import TabBar from '@/components/TabBar.vue'
+
+export default {
+  name: 'App',
+  components: {
+    TabBar
+  },
+  computed: {
+    showTabBar() {
+      // Hide TabBar on login, register and profile detail pages
+      const hideTabBarRoutes = ['/login', '/register', '/profile/detail']
+      return !hideTabBarRoutes.includes(this.$route.path)
+    }
+  }
+}
+</script>
+
 <style>
-html,body{
+html {
+  font-size: 16px;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  height: 100%;
+}
+
+#app {
+  font-family: Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
   height: 100%;
+  padding-bottom: 50px;
 }
-#app{height: 100%;}
 </style>

src/assets/css/main.css

@@ -1,37 +1,12 @@
-*{
-	margin:0
-}
-.content {
-	display: flex;
-	flex-direction: column;
-	justify-content:center;
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
-/* 头部 logo */
-.header {
-	width:161px;
-	height:161px;
-	box-shadow:0px 0px 60px 0px rgba(0,0,0,0.1);
-	border-radius:50%;
-	background-color: #000000; 
-	margin-top: 128px;
-	margin-bottom: 72px;
-	margin-left: auto;
-	margin-right: auto;
-}
-.header img{
-	width:161px;
-	height:161px;
-	border-radius:50%;
-}
 
 /* 主体 */
-.main {
-	display: flex;
-	flex-direction: column;
-	padding-left: 70px;
-	padding-right: 70px;
-}
+
 .tips {
 	color: #999999;
 	font-size: 28px;
@@ -44,19 +19,11 @@
 	margin-top: 96px;
 }
 
-/* 其他登录方式 */
-.other_login{
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	margin-top: 256px;
-	text-align: center;
-}
+
 .login_icon{
 	border: none;
 	font-size: 64px;
-	margin: 0 64px 0 64px;
+	margin: 0 64px;
 	color: rgba(0,0,0,0.7)
 }
 .wechat_color{
@@ -86,6 +53,5 @@
 }
 .footer span{
 	font-size: 24px;
-	margin-left: 15px;
-	margin-right: 15px;
+	margin: 0 15px;
 }

src/components/TabBar.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="tab-bar">
+    <div
+      class="tab-item"
+      v-for="tab in tabs"
+      :key="tab.path"
+      @click="switchTab(tab.path)"
+      :class="{ active: currentPath === tab.path }"
+    >
+      <img
+        :src="getIcon(tab)"
+        class="tab-icon"
+        alt=""
+      />
+      <span>{{ tab.title }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TabBar',
+  data() {
+    return {
+      currentPath: '/home',
+      tabs: [
+        {
+          path: '/home',
+          title: '首页',
+          icon: 'index0.png',
+          iconActive: 'index1.png'
+        },
+        {
+          path: '/mall',
+          title: '退休计划',
+          icon: 'hang0.png',
+          iconActive: 'hang1.png'
+        },
+        {
+          path: '/dynamic',
+          title: '邀请百姓',
+          icon: 'gang0.png',
+          iconActive: 'gang1.png'
+        },
+        {
+          path: '/profile',
+          title: '资产',
+          icon: 'mine0.png',
+          iconActive: 'mine1.png'
+        }
+      ]
+    }
+  },
+  methods: {
+    switchTab(path) {
+      this.currentPath = path
+      this.$router.push(path)
+    },
+    getIcon(tab) {
+      return require(`@/assets/${this.currentPath === tab.path ? tab.iconActive : tab.icon}`)
+    }
+  },
+  created() {
+    this.currentPath = this.$route.path
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 50px;
+  background-color: #fff;
+  display: flex;
+  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
+  z-index: 999;
+
+  .tab-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #666;
+    font-size: 14px;
+
+    .tab-icon {
+      width: 24px;
+      height: 24px;
+      margin-bottom: 2px;
+    }
+
+    &.active {
+      color: rgb(237, 75, 57);
+    }
+  }
+}
+</style> 

src/components/watch-login/watch-button.vue

@@ -49,12 +49,12 @@ export default {
   justify-content: center;
   align-items: center;
   color: #ffffff;
-  font-size: 30px;
-  width: 601px;
-  height: 100px;
+  font-size: 18px;
+  width: 100%;
+  height: 50px;
   background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
   box-shadow: 0px 0px 13px 0px rgba(164, 217, 228, 0.4);
-  border-radius: 2.5rem;
+  border-radius: 25px;
   margin: 0 auto;
   outline: none;
 }
@@ -63,63 +63,30 @@ export default {
   justify-content: center;
   align-items: center;
   color: #ffffff;
-  font-size: 30px;
-  width: 100px;
-  height: 100px;
+  font-size: 18px;
+  width: 50px;
+  height: 50px;
   background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6));
   box-shadow: 0px 0px 13px 0px rgba(164, 217, 228, 0.4);
-  border-radius: 2.5rem;
+  border-radius: 25px;
   margin: 0 auto;
   outline: none;
 }
 .buttonBorder {
   border: none;
-  border-radius: 2.5rem;
-  -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.2);
-  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.2);
-  -webkit-transition: all 0.4s cubic-bezier(0.57, 0.19, 0.51, 0.95);
-  -moz-transition: all 0.4s cubic-bezier(0.57, 0.19, 0.51, 0.95);
-  -ms-transition: all 0.4s cubic-bezier(0.57, 0.19, 0.51, 0.95);
-  -o-transition: all 0.4s cubic-bezier(0.57, 0.19, 0.51, 0.95);
+  border-radius: 25px;
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
   transition: all 0.4s cubic-bezier(0.57, 0.19, 0.51, 0.95);
-  background:#e56463;
+  background: #e56463;
 }
 
 /* 旋转动画 */
 .rotate_loop {
-  -webkit-transition-property: -webkit-transform;
-  -webkit-transition-duration: 1s;
-  -moz-transition-property: -moz-transform;
-  -moz-transition-duration: 1s;
-  -webkit-animation: rotate 1s linear infinite;
-  -moz-animation: rotate 1s linear infinite;
-  -o-animation: rotate 1s linear infinite;
+  transition-property: transform;
+  transition-duration: 1s;
   animation: rotate 1s linear infinite;
 }
-@-webkit-keyframes rotate {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@-moz-keyframes rotate {
-  from {
-    -moz-transform: rotate(0deg);
-  }
-  to {
-    -moz-transform: rotate(359deg);
-  }
-}
-@-o-keyframes rotate {
-  from {
-    -o-transform: rotate(0deg);
-  }
-  to {
-    -o-transform: rotate(359deg);
-  }
-}
+
 @keyframes rotate {
   from {
     transform: rotate(0deg);

src/components/watch-login/watch-input.vue

@@ -163,40 +163,42 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: 36px; /* Input 高度 */
+  height: 50px;
   color: #333333;
-  padding: 32px;
-  margin-top: 24px;
-  margin-bottom: 24px;
+  padding: 0 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  background: #fff;
+  border-radius: 25px;
+  box-shadow: 0 0 20px 0 rgba(43, 86, 112, 0.1);
 }
 .img {
-  width: 32px;
-  height: 32px;
-  font-size: 32px;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
 }
 .main-input {
   flex: 1;
   text-align: left;
-  font-size: 28px;
-  /* line-height: 100px; */
+  font-size: 16px;
   padding-right: 10px;
   margin-left: 20px;
   border: none;
   outline: none;
+  height: 45px;
 }
 .vercode {
   color: rgba(0, 0, 0, 0.7);
-  font-size: 24px;
-  line-height: 100px;
+  font-size: 14px;
+  line-height: 50px;
 }
 .vercode-run {
   color: rgba(0, 0, 0, 0.4) !important;
 }
 .oBorder {
   border: none;
-  border-radius: 2.5rem;
-  -webkit-box-shadow: 0 0 60px 0 rgba(43, 86, 112, 0.1);
-  box-shadow: 0 0 60px 0 rgba(43, 86, 112, 0.1);
+  border-radius: 25px;
+  box-shadow: 0 0 20px 0 rgba(43, 86, 112, 0.1);
   background: #fff;
 }
 </style>

src/router/index.js

@@ -1,29 +1,54 @@
 import Vue from "vue";
-import Router from "vue-router";
-Vue.use(Router);
+import VueRouter from "vue-router";
+import Home from "@/views/Home.vue";
+import Mall from "@/views/Mall.vue";
+import Dynamic from "@/views/Dynamic.vue";
+import Profile from "@/views/Profile.vue";
+import ProfileDetail from "@/views/ProfileDetail.vue";
+import Register from "@/views/register.vue";
+
+Vue.use(VueRouter);
 
 const routes = [
+  {
+    path: "/",
+    redirect: "/home"
+  },
   {
     path: "/home",
-    name: "home",
-    component: () => import(/* webpackChunkName: "home" */ "../views/home")
+    name: "Home",
+    component: Home
   },
   {
-    path: "/muchList",
-    name: "muchList",
-    component: () => import(/* webpackChunkName: "muchList" */ "../views/home/list")
+    path: "/mall",
+    name: "Mall",
+    component: Mall
   },
   {
-    path: "/login",
-    name: "login",
-    component: () =>
-      import(/* webpackChunkName: "login" */ "../views/login.vue")
+    path: "/dynamic",
+    name: "Dynamic",
+    component: Dynamic
+  },
+  {
+    path: "/profile",
+    name: "Profile",
+    component: Profile
+  },
+  {
+    path: "/profile/detail",
+    name: "ProfileDetail",
+    component: ProfileDetail
   },
   {
     path: "/register",
-    name: "register",
+    name: "Register",
+    component: Register
+  },
+  {
+    path: "/login",
+    name: "login",
     component: () =>
-      import(/* webpackChunkName: "register" */ "../views/register.vue")
+      import(/* webpackChunkName: "login" */ "../views/login.vue")
   },
   {
     path: "/forget",
@@ -32,10 +57,14 @@ const routes = [
       import(/* webpackChunkName: "forget" */ "../views/forget.vue")
   },
   {
-    path: "",
-    redirect: "home",
-    component: () => import("../views/home")
+    path: "/muchList",
+    name: "muchList",
+    component: () => import(/* webpackChunkName: "muchList" */ "../views/home/list")
   }
 ];
 
-export default new Router({ routes });
+const router = new VueRouter({
+  routes
+});
+
+export default router;

src/views/Dynamic.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="dynamic">
+    <h1>动态</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dynamic'
+}
+</script>
+
+<style scoped>
+.dynamic {
+  padding: 20px;
+}
+</style> 

src/views/Home.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="home">
+    <h1>首页</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home'
+}
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+}
+</style> 

src/views/Mall.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="mall">
+    <h1>商城</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Mall'
+}
+</script>
+
+<style scoped>
+.mall {
+  padding: 20px;
+}
+</style> 

src/views/Profile.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="profile">
+    <div class="header">
+      <div class="title">个人中心</div>
+    </div>
+    <div class="content">
+      <div class="user-info" @click="goToDetail">
+        <div class="avatar">
+          <img src="" alt="avatar">
+        </div>
+        <div class="info">
+          <div class="name">张三</div>
+          <div class="phone">138****8888</div>
+        </div>
+        <div class="arrow">
+          <i class="iconfont icon-right"></i>
+        </div>
+      </div>
+      <div class="menu-list">
+        <div class="menu-item">
+          <i class="iconfont icon-wallet"></i>
+          <span>我的钱包</span>
+        </div>
+        <div class="menu-item">
+          <i class="iconfont icon-order"></i>
+          <span>我的订单</span>
+        </div>
+        <div class="menu-item">
+          <i class="iconfont icon-settings"></i>
+          <span>设置</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Profile',
+  methods: {
+    goToDetail() {
+      this.$router.push('/profile/detail')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.profile {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+
+  .header {
+    height: 44px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #eee;
+
+    .title {
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .content {
+    .user-info {
+      display: flex;
+      align-items: center;
+      padding: 20px 15px;
+      background-color: #fff;
+      margin-bottom: 10px;
+
+      .avatar {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-right: 15px;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .info {
+        flex: 1;
+
+        .name {
+          font-size: 18px;
+          font-weight: 500;
+          margin-bottom: 5px;
+        }
+
+        .phone {
+          font-size: 16px;
+          color: #666;
+        }
+      }
+
+      .arrow {
+        color: #999;
+        font-size: 20px;
+      }
+    }
+
+    .menu-list {
+      background-color: #fff;
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        padding: 16px;
+        border-bottom: 1px solid #eee;
+
+        i {
+          font-size: 20px;
+          margin-right: 10px;
+          color: #666;
+        }
+
+        span {
+          font-size: 16px;
+          color: #333;
+        }
+      }
+    }
+  }
+}
+</style> 

src/views/ProfileDetail.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="profile-detail">
+    <div class="header">
+      <div class="back" @click="goBack">
+        <i class="iconfont icon-back"></i>
+      </div>
+      <div class="title">个人详情</div>
+    </div>
+    <div class="content">
+      <div class="info-item">
+        <span class="label">用户名</span>
+        <span class="value">张三</span>
+      </div>
+      <div class="info-item">
+        <span class="label">手机号</span>
+        <span class="value">138****8888</span>
+      </div>
+      <div class="info-item">
+        <span class="label">注册时间</span>
+        <span class="value">2024-03-20</span>
+      </div>
+      <div class="info-item">
+        <span class="label">账户余额</span>
+        <span class="value">¥ 1,000.00</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProfileDetail',
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.profile-detail {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+
+  .header {
+    position: relative;
+    height: 44px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #eee;
+
+    .back {
+      position: absolute;
+      left: 15px;
+      font-size: 20px;
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 500;
+    }
+  }
+
+  .content {
+    padding: 15px;
+    background-color: #fff;
+    margin-top: 10px;
+
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 15px 0;
+      border-bottom: 1px solid #eee;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .label {
+        color: #666;
+        font-size: 16px;
+      }
+
+      .value {
+        color: #333;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style> 

src/views/login.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="login">
-    <div class="content">
+    <div class="contents">
       <!-- 头部logo -->
       <div class="header">
-        <img src="@/assets/logo-home.png" />
-        <div>农泉财富</div>
+        <img src="@/assets/logo-home.png" alt="logo" />
+        <div class="title">农泉财富</div>
       </div>
       <!-- 主体表单 -->
       <div class="main">
@@ -89,15 +89,85 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
 .login {
-  background-image: url('~@/assets/dabag.png');
-  background-size: 100% 100%;
   height: 100%;
+  width: 100%;
+  background: url('~@/assets/dabag.png') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+}
+
+.contents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.header {
+  width: 100px;
+  height: 80px;
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  img {
+    width: 80px;
+    width: 80px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+}
+
+.title {
+  font-size: 24px;
+  color: #fff;
+  margin-top: 16px;
+  font-weight: 500;
+}
+
+.main {
+  width: 100%;
+  max-width: 320px;
+  margin: 60px 0 0 0;
+}
+
+.wbutton {
+  margin-top: 40px;
+  width: 100%;
+  max-width: 320px;
+}
+
+.footer {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  
+  a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 14px;
+    opacity: 0.9;
+    transition: opacity 0.3s;
+    
+    &:hover {
+      opacity: 1;
+    }
+  }
+  
+  span {
+    color: #fff;
+    opacity: 0.5;
+  }
 }
 </style>
+
 <style>
 @import url("../components/watch-login/css/icon.css");
-@import url("../assets/css/main.css");
 </style>
 

src/views/register.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="register">
     <div class="content">
-      <div class="back" @click="goBack">X</div>
+      <div class="back" @click="goBack">
+        X
+      </div>
       <!-- 头部logo -->
       <div class="header">
-        <img src="@/assets/logo-home.png" />
+        <img src="@/assets/logo-home.png" alt="logo" />
+        <div class="title">农泉财富</div>
       </div>
       <!-- 主体 -->
       <div class="main">
@@ -14,7 +17,7 @@
           placeholder="请输入手机号"
           v-model="phoneData"
         ></wInput>
-         <wInput
+        <wInput
           type="text"
           maxlength="4"
           placeholder="姓名"
@@ -39,6 +42,7 @@
         text="注 册"
         :rotate="isRotate"
         @click.native="startReg()"
+        class="wbutton"
       ></wButton>
 
       <!-- 底部信息 -->
@@ -47,9 +51,7 @@
           @tap="isShowAgree"
           class="cuIcon"
           :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'"
-          >同意</span
-        >
-        <!-- 协议地址 -->
+        >同意</span>
         <span>《协议》</span>
       </div>
     </div>
@@ -148,22 +150,89 @@ export default {
   }
 };
 </script>
+
 <style lang="scss" scoped>
 .register {
-  background-image: url('~@/assets/dabag.png');
-  background-size: 100% 100%;
-  height: 100%;
+  height: 100vh;
+  width: 100%;
+  background: url('~@/assets/dabag.png') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   position: relative;
 }
+
 .back {
   position: absolute;
   top: 20px;
   left: 20px;
-  font-size: 40px;
   color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.header {
+  width: 100px;
+  height: 80px;
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  
+  img {
+    width: 80px;
+    height: 80px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+}
+
+.title {
+  font-size: 24px;
+  color: #fff;
+  margin-top: 16px;
+  font-weight: 500;
+}
+
+.main {
+  width: 100%;
+  max-width: 320px;
+  margin: 60px 0 0 0;
+}
+
+.wbutton {
+  margin-top: 40px;
+  width: 100%;
+  max-width: 320px;
+}
+
+.footer {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  color: #fff;
+  font-size: 14px;
+  
+  .cuIcon {
+    margin-right: 4px;
+    font-size: 16px;
+  }
+  
+  span {
+    opacity: 0.9;
+  }
 }
 </style>
+
 <style>
 @import url("../components/watch-login/css/icon.css");
-@import url("../assets/css/main.css");
 </style>

vue.config.js

@@ -23,6 +23,14 @@ module.exports = {
         })
       );
     }
+    // 添加 CDN 配置
+    config.plugins.forEach((plugin) => {
+      if (plugin.constructor.name === 'HtmlWebpackPlugin') {
+        plugin.options.cdn = {
+          js: []
+        };
+      }
+    });
   },
   devServer: {
     open: true,