feats

package.json

@@ -35,24 +35,25 @@
   ],
   "author": "",
   "dependencies": {
+    "@antmjs/vantui": "^2.3.5",
     "@babel/runtime": "^7.7.7",
     "@tarojs/components": "3.5.7",
     "@tarojs/helper": "3.5.7",
-    "@tarojs/plugin-platform-weapp": "3.5.7",
+    "@tarojs/plugin-framework-react": "3.5.7",
     "@tarojs/plugin-platform-alipay": "3.5.7",
-    "@tarojs/plugin-platform-tt": "3.5.7",
-    "@tarojs/plugin-platform-swan": "3.5.7",
     "@tarojs/plugin-platform-jd": "3.5.7",
     "@tarojs/plugin-platform-qq": "3.5.7",
+    "@tarojs/plugin-platform-swan": "3.5.7",
+    "@tarojs/plugin-platform-tt": "3.5.7",
+    "@tarojs/plugin-platform-weapp": "3.5.7",
+    "@tarojs/react": "3.5.7",
     "@tarojs/router": "3.5.7",
     "@tarojs/runtime": "3.5.7",
     "@tarojs/shared": "3.5.7",
     "@tarojs/taro": "3.5.7",
     "@tarojs/taro-h5": "3.5.7",
-    "@tarojs/plugin-framework-react": "3.5.7",
-    "@tarojs/react": "3.5.7",
-    "react-dom": "^18.0.0",
-    "react": "^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",

src/pages/index/index.jsx

@@ -1,24 +1,47 @@
 import { Component } from 'react'
-import { View, Text } from '@tarojs/components'
+import { View, Input, Image } from '@tarojs/components'
+import { Form, Button } from '@antmjs/vantui'
+import logo from '../../assets/image/logo.png';
+import user from '../../assets/image/user.png';
+import password from '../../assets/image/password.png';
+import WeChat from '../../assets/image/WeChat.png';
 import './index.less'
 
-export default class Index extends Component {
-
-  componentWillMount () { }
-
-  componentDidMount () { }
-
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
-    return (
-      <View className='index'>
-        <Text>Hello world!</Text>
+export default (props) => {
+  return (
+    <View className='index'>
+      <View className='index-2'>
+        <Image className='img-1'
+          src={logo}
+        />
+      </View>
+      <View className='index-txt'>欢迎登录霍山文明创城</View>
+      <Form className='form'>
+        <View className='index-3'>
+          <Image src={user} className='img-2' />账号<Input className='input-1' placeholder='请输入您的登录账号' />
+        </View>
+        <View className='index-3'>
+          <Image src={password} className='img-2' />密码<Input className='input-1' placeholder='请输入您的登录密码' />
+        </View>
+        <Button
+          className='btn-1'
+        >
+          忘记密码?
+        </Button>
+        <Button
+          type='primary'
+          className='btn-2'
+        >
+          登录
+        </Button>
+      </Form>
+      <View className='index-txt2'>——其他登录方式——</View>
+      <View className='index-4'>
+        <Image className='img-3'
+          src={WeChat}
+        />
       </View>
-    )
-  }
+      <View className='index-txt3'>微信登录</View>
+    </View>
+  )
 }

src/pages/index/index.less

@@ -1,4 +1,77 @@
-
-.index {
-  color: red;
-}
+.index {
+  margin-top: 60px;
+  .index-2 {
+    width: 235px;
+    height: 235px;
+    margin: 0 auto;
+    .img-1 {
+      width: 235px;
+      height: 235px;
+    }
+  }
+  .index-txt {
+    text-align: center;
+    margin-bottom: 100px;
+  }
+  .form {
+    width: 620px;
+    .index-3 {
+      display: flex;
+      border-bottom: 1px solid #e9eaea;
+      width: 600px;
+      margin: 26px auto;
+      padding-bottom: 30px;
+      margin-top: 60px;
+      .img-2 {
+        margin-right: 30px;
+        width: 42px;
+        height: 44px;
+      }
+      .input-1 {
+        color: rgb(174, 174, 174);
+        margin-left: 15px;
+        padding-left: 20px;
+        flex-direction: column;
+        border-left: 1px solid black;
+      }
+    }
+    .btn-1 {
+      width: 190px;
+      height: 66px;
+      font-size: 28px;
+      color: #1a7565;
+      float: right;
+      margin-right: 72px;
+      margin-bottom: 104px;
+    }
+    .btn-2 {
+      width: 666px;
+      margin: 80px auto;
+      background-color: rgb(26, 117, 100);
+      color: #fff;
+    }
+  }
+  .index-txt2 {
+    font-size: 30px;
+    color: rgb(174, 174, 174);
+    margin: 10px auto;
+    text-align: center;
+    margin-top: 110px;
+  }
+  .index-4 {
+    width: 100px;
+    height: 100px;
+    margin: 0 auto;
+    .img-3 {
+      width: 100px;
+      height: 100px;
+      margin-top: 8px;
+    }
+  }
+  .index-txt3 {
+    font-size: 25px;
+    color: rgb(174, 174, 174);
+    text-align: center;
+    margin: 30px auto;
+  }
+}

src/routes.js

@@ -0,0 +1,53 @@
+
+const routes = [
+
+  /**********************************
+   *  Tab 页面
+   *********************************/
+  {
+    name: '首页',
+    page: 'pages/index/index',
+    pkg: 'main',
+    isTab: true,
+    type: 'main',
+    shortcut: {
+      chat: false,
+      consultant: true,
+    },
+    // auth: ['phone', 'avatar']
+  },
+]
+
+/**
+ * 获取 app pages 列表
+ */
+function getPages () {
+  const grp = routes.reduce((g, r) => {
+    const { pkg, page } = r
+    const pg = g[pkg] || []
+
+    return Object.assign(g, {
+      [`${pkg}`]: pg.concat(page),
+    })
+  }, {});
+
+  const pages = grp.main;
+  const subPackages = Object.keys(grp).filter(x => x !== 'main').reduce(((pkg, key) => {
+    return pkg.concat({
+      root: key,
+      pages: grp[key],
+    })
+  }), [])
+
+
+  return {
+    pages,
+    subPackages,
+  }
+}
+
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  routes,
+  getPages,
+};