Merge branch 'master' of http://git.ycjcjy.com/civilized_city/miniapp

src/app.config.js

@@ -1,6 +1,6 @@
 export default defineAppConfig({
   pages: [
-    'pages/index/index',
+    'pages/login/index',
     'pages/home/index',
     'pages/index3/index',
     'pages/index4/index',
@@ -11,7 +11,7 @@ export default defineAppConfig({
   tabBar: {
     list: [
       {
-        "pagePath": "pages/index/index",
+        "pagePath": "pages/login/index",
         "text": "首页"
       },
       {

src/pages/index/index.jsx

@@ -1,47 +0,0 @@
-import { Component } from 'react'
-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 (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,77 +0,0 @@
-.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/pages/login/components/Bottom.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View, Image } from '@tarojs/components';
+import WeChat from '../../../assets/image/WeChat.png';
+import style from './bottom.module.less';
+
+export default (props) => {
+  return (
+    <View>
+      <View className={style['txt-box2']}>——其他登录方式——</View>
+      <View className={style['img-box2']}>
+        <Image className={style['img-wechat']}
+          src={WeChat}
+        />
+      </View>
+      <View className={style['wechat-login']}>微信登录</View>
+    </View>
+  )
+}

src/pages/login/components/Form.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, Image, Input } from '@tarojs/components';
+import { Form, Button } from '@antmjs/vantui'
+import user from '../../../assets/image/user.png';
+import password from '../../../assets/image/password.png';
+import style from './form.module.less';
+
+export default (props) => {
+  return (
+    <Form className={style.form}>
+      <View className={style['input-box']}>
+        <Image src={user} className={style['img-icon']} />账号<Input className={style.input} placeholder='请输入您的登录账号' />
+      </View>
+      <View className={style['input-box']}>
+        <Image src={password} className={style['img-icon']} />密码<Input className={style.input} placeholder='请输入您的登录密码' />
+      </View>
+      <View
+        className={style['forget-pwd']}
+      >
+        忘记密码?
+      </View>
+      <Button
+        type='primary'
+        className={style.submit}
+      >
+        登录
+      </Button>
+    </Form>
+  )
+}

src/pages/login/components/Head.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View, Image } from '@tarojs/components';
+import logo from '../../../assets/image/logo.png';
+import style from './head.module.less';
+
+export default (props) => {
+  return (
+    <View>
+      <View className={style['img-box']}>
+        <Image className={style['img-logo']}
+          src={logo}
+        />
+      </View>
+      <View className={style['txt-box']}>欢迎登录霍山文明创城</View>
+    </View>
+  )
+
+}

src/pages/login/components/bottom.module.less

@@ -0,0 +1,23 @@
+.txt-box2 {
+  font-size: 30px;
+  color: rgb(174, 174, 174);
+  margin: 10px auto;
+  text-align: center;
+  margin-top: 100px;
+}
+.img-box2 {
+  width: 100px;
+  height: 100px;
+  margin: 0 auto;
+  .img-wechat {
+    width: 100px;
+    height: 100px;
+    margin-top: 8px;
+  }
+}
+.wechat-login {
+  font-size: 25px;
+  color: rgb(174, 174, 174);
+  text-align: center;
+  margin: 12px auto;
+}

src/pages/login/components/form.module.less

@@ -0,0 +1,36 @@
+.form {
+  width: 620px;
+  .input-box {
+    display: flex;
+    border-bottom: 1px solid #e9eaea;
+    width: 600px;
+    margin: 26px auto;
+    padding-bottom: 30px;
+    margin-top: 60px;
+    .img-icon {
+      margin-right: 30px;
+      width: 42px;
+      height: 44px;
+    }
+    .input {
+      color: rgb(174, 174, 174);
+      margin-left: 15px;
+      padding-left: 20px;
+      flex-direction: column;
+      border-left: 1px solid black;
+    }
+  }
+  .forget-pwd {
+    font-size: 28px;
+    color: var(--main-bg-color);
+    float: right;
+    margin-right: 72px;
+    margin-bottom: 104px;
+  }
+  .submit {
+    width: 666px;
+    margin: 80px auto;
+    background-color: var(--main-bg-color);
+    color: #fff;
+  }
+}

src/pages/login/components/head.module.less

@@ -0,0 +1,13 @@
+.img-box {
+  width: 235px;
+  height: 235px;
+  margin: 0 auto;
+  .img-logo {
+    width: 235px;
+    height: 235px;
+  }
+}
+.txt-box {
+  text-align: center;
+  margin-bottom: 90px;
+}

src/pages/index/index.config.js → src/pages/login/index.config.js

@@ -1,3 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '登录'
 })

src/pages/login/index.jsx

@@ -0,0 +1,19 @@
+import Page from '@/layouts/index';
+import { View } from '@tarojs/components';
+import Head from "./components/Head";
+import Form from "./components/Form";
+import Bottom from "./components/Bottom";
+import './index.less'
+
+export default (props) => {
+  return (
+    <Page className='index'>
+      <View className='login-box'>
+        <Head />
+        <Form />
+        <Bottom />
+      </View>
+    </Page>
+
+  )
+}

src/pages/login/index.less

@@ -0,0 +1,3 @@
+.login-box {
+  margin-top: 60px;
+}

src/routes.js

@@ -5,8 +5,8 @@ const routes = [
    *  Tab 页面
    *********************************/
   {
-    name: '首页',
-    page: 'pages/index/index',
+    name: '登录',
+    page: 'pages/login/index',
     pkg: 'main',
     isTab: true,
     type: 'main',