feats

src/pages/index/index.jsx

@@ -1,9 +1,10 @@
 import { Component } from 'react'
-import { View, Text, Input, Image } from '@tarojs/components'
-import { Form, FormItem, Button } from '@antmjs/vantui'
+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) => {
@@ -14,8 +15,7 @@ export default (props) => {
           src={logo}
         />
       </View>
-
-      <Text className='txt-1'>欢迎登录霍山文明创建</Text>
+      <View className='index-txt'>欢迎登录霍山文明创城</View>
       <Form className='form'>
         <View className='index-3'>
           <Image src={user} className='img-2' />账号<Input className='input-1' placeholder='请输入您的登录账号' />
@@ -23,21 +23,25 @@ export default (props) => {
         <View className='index-3'>
           <Image src={password} className='img-2' />密码<Input className='input-1' placeholder='请输入您的登录密码' />
         </View>
-        {/* <FormItem label='账号' className='item'>
-            <Input className='input-1' placeholder='请输入您的登录账号' />
-          </FormItem>
-          <FormItem label='证件'>
-            <Input placeholder='请输入您的登录密码' />
-          </FormItem> */}
+        <Button
+          className='btn-1'
+        >
+          忘记密码?
+        </Button>
         <Button
           type='primary'
-          className='btn'
+          className='btn-2'
         >
           登录
         </Button>
       </Form>
-      <Text className='txt-2'>——其他登录方式——</Text>
-      <Text className='txt-3'>微信登录</Text>
+      <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,55 +1,77 @@
 .index {
+  margin-top: 60px;
   .index-2 {
     width: 235px;
     height: 235px;
     margin: 0 auto;
+    .img-1 {
+      width: 235px;
+      height: 235px;
+    }
   }
-  .img-1 {
-    width: 235px;
-    height: 235px;
-  }
-  .txt-1 {
-    display: block;
-    width: 320px;
-    margin: 10px auto;
-    margin-bottom: 80px;
+  .index-txt {
+    text-align: center;
+    margin-bottom: 100px;
   }
   .form {
     width: 620px;
     .index-3 {
       display: flex;
-      margin-bottom: 26px;
+      border-bottom: 1px solid #e9eaea;
+      width: 600px;
+      margin: 26px auto;
+      padding-bottom: 30px;
+      margin-top: 60px;
       .img-2 {
-        margin-left: 100px;
         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 {
-      width: 600px;
+    .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;
     }
   }
-  .txt-2 {
+  .index-txt2 {
     font-size: 30px;
     color: rgb(174, 174, 174);
-    display: block;
-    width: 330px;
     margin: 10px auto;
+    text-align: center;
+    margin-top: 110px;
   }
-  .txt-3 {
+  .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);
-    display: block;
-    width: 100px;
-    margin: 10px auto;
+    text-align: center;
+    margin: 30px auto;
   }
 }