1

src/permission.js

@@ -18,5 +18,9 @@ router.beforeEach((to, from, next) => {
 router.afterEach(() => {
     NProgress.done()
 })
-
+// router.beforeEach((to, from, next) => {
+//     // 让页面回到顶部
+//     document.documentElement.scrollTop = 0
+//     next()
+// })
 export default router

src/router/basic.js

@@ -8,31 +8,40 @@
  */
 export default [
     {
-        path: '/Basic/Console',
-        name: "Console",
-        title: "控制台",
+        path: '/Basic/home',
+        name: "home",
+        title: "首页",
         hide: false,
         icon: 'container',
-        component: resolve => require(['@/views/Basic/Console'], resolve),
-        meta: {title: '控制台'},
+        component: resolve => require(['@/views/Basic/home'], resolve),
+        meta: {title: '首页'},
     },
     {
-        path: '/Basic/Console/settled',
+        path: '/Basic/home/settled',
         name: "settled",
-        title: "控制台-入驻企业申请",
+        title: "首页-入驻企业申请",
         icon: 'container', 
         hide: true,
-        component: resolve => require(['@/views/Basic/Console/settled.vue'], resolve),
-        meta: {title: '控制台-入驻企业申请'},
+        component: resolve => require(['@/views/Basic/home/settled.vue'], resolve),
+        meta: {title: '首页-入驻企业申请'},
     },
     {
-        path: '/Basic/other',
-        name: "other",
-        title: "其他",
+        path: '/Basic/home/newOrder',
+        name: "newOrder",
+        title: "首页-购买功能",
+        icon: 'container', 
+        hide: true,
+        component: resolve => require(['@/views/Basic/home/newOrder.vue'], resolve),
+        meta: {title: '首页-购买功能'},
+    },
+    {
+        path: '/Basic/adminSet',
+        name: "adminSet",
+        title: "管理员设置",
         hide: false,
         icon: 'container',
-        component: resolve => require(['@/views/Basic/other'], resolve),
-        meta: {title: '其他'},
+        component: resolve => require(['@/views/Basic/adminSet'], resolve),
+        meta: {title: '管理员设置'},
     },
     
 ]

src/router/index.js

@@ -17,16 +17,19 @@ Vue.use(Router);
 
 import Layout from "@/views/Layout"
 import basic from "./basic" // 基础功能
-
+import manage from "./manage" // 管理平台
 const router = [
     {
         path: "/",
         name: "Layout",
         title: "外框",
         component: Layout,
-        redirect: '/Basic/Console',
+        redirect: '/Basic/home',
         meta: {title: '首页'},
-        children: [...basic]
+        children: [
+            ...basic,
+            ...manage
+        ]
     },
     {
         path: "/login",
@@ -37,5 +40,19 @@ const router = [
 ]
 
 export default new Router({
-    routes: router
+    mode: 'history',
+    routes: router,
+    scrollBehavior(to, from, savedPosition) {
+        console.log(savedPosition);
+        if (savedPosition) {
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    console.log('savedPosition', savedPosition)
+                    resolve(savedPosition)
+                }, 500);
+            })
+        } else {
+            return { x: 0, y: 0 }
+        }
+    }
 })

src/router/manage.js

@@ -0,0 +1,62 @@
+export default [
+    {
+        path: '/Manage/SettleRequestManage',
+        name: "SettleRequestManage",
+        title: "入驻申请管理",
+        hide: false,
+        icon: 'container',
+        component: resolve => require(['@/views/Manage/SettleRequestManage'], resolve),
+        meta: {title: '入驻申请管理'},
+    },
+    {
+        path: '/Manage/CustomerList',
+        name: "CustomerList",
+        title: "客户列表",
+        hide: false,
+        icon: 'container',
+        component: resolve => require(['@/views/Manage/CustomerList'], resolve),
+        meta: {title: '客户列表'},
+    },
+    {
+        path: '/Manage/VillageManage',
+        name: "VillageManage",
+        title: "小区管理",
+        hide: false,
+        icon: 'container',
+        component: resolve => require(['@/views/Manage/VillageManage'], resolve),
+        meta: {title: '小区管理'},
+    },
+    {
+        path: '/Manage/OrderManage',
+        name: "OrderManage",
+        title: "订单管理",
+        hide: false,
+        icon: 'container',
+        component: resolve => require(['@/views/Manage/OrderManage'], resolve),
+        meta: {title: '订单管理'},
+    },
+    {
+        path: '/Manage/ChargingManage',
+        name: "ChargingManage",
+        title: "收费管理",
+        icon: 'container',
+        redirect: '/ChargingManage/ChargingStandard',
+        meta: {title: '收费管理'},
+        children: [
+            {
+                path: '/ChargingManage/ChargingStandard',
+                name: "ChargingStandard",
+                title: "收费标准",
+                component: resolve => require(['@/views/Manage/ChargingManage/ChargingStandard'], resolve),
+                meta: { title: '收费标准' },
+            },
+            {
+                path: '/ChargingManage/FinancialBill',
+                name: "FinancialBill",
+                title: "财务账单",
+                component: resolve => require(['@/views/Manage/ChargingManage/FinancialBill'], resolve),
+                meta: { title: '财务账单' },
+            }
+        ]
+    },
+]

src/styles/index.less

@@ -7,4 +7,7 @@
     padding-left:10px;
     margin-left: 10px;
     margin-bottom: 10px;
+}
+#app{
+    background: #E5E5E5;
 }

src/views/Basic/Console/settled.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>2</div>
-</template>
-
-<script>
-export default {
- name: "settled"
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/Basic/home/index.vue

@@ -43,7 +43,7 @@
                                         </a-card-meta>
                                     </a-card>
                                     <a-card class="card-add">
-                                        <div class="card-a-content-add">
+                                        <div class="card-a-content-add" @click="addVillage">
                                             点击新建小区
                                         </div>
                                     </a-card>
@@ -71,6 +71,11 @@
                                             <span>取消</span> -->
                                 </template>
                             </a-card>
+                            <a-card hoverable class="addOrder">
+                                <div class="card-b-content-add" @click="newOrder">
+                                    点击新建订单
+                                </div>
+                            </a-card>
                         </div>
                         <div class="card-b-content" v-else>
                             <div>当前无订单</div>
@@ -81,6 +86,39 @@
             
         </a-row>
     </div>
+     <a-modal
+        :visible="visible"
+        :confirm-loading="confirmLoading"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        >
+        <div class="modalContent">
+            <div class="cardTitle">小区信息</div>
+            <a-form-model
+                ref="ruleForm"
+                :model="form"
+                :rules="rules"
+                :label-col="inline"
+                layout="vertical"
+                :wrapper-col="wrapperCol"
+            >
+            <a-form-model-item label="小区全称">
+                <a-input style="60%"></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="小区地址">
+                 <a-input style="60%"></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="小区图片">
+                <span>要求文件大小不超过5mb，支持jpg、png格式</span>
+                <a-row>
+                <a-col :span='12'>
+                    <div class="uploadImg">+</div>
+                </a-col>
+                </a-row>
+            </a-form-model-item>
+            </a-form-model>
+        </div>
+    </a-modal>
   </div>
 </template>
 
@@ -140,11 +178,23 @@ export default {
                   status:'生效中'
               }
           ],
+          visible: false,
+          confirmLoading: false,
       }
   },
   methods:{
       settled(){
           this.$router.push({name:'settled'})
+      },
+      addVillage(){
+          this.visible=true
+      },
+      handleOk(){},
+      handleCancel(){
+          this.visible = false
+      },
+      newOrder(){
+          this.$router.push({name:'newOrder'})
       }
   }
 };
@@ -264,8 +314,33 @@ export default {
                         white-space: nowrap;
             }
         }
-        
+        .addOrder{
+            border:1px dashed #9DB7DF;
+            border-radius: 3%;
+            width: 80%;
+            height: 200px;
+            margin:auto;
+            margin-top:20px;
+            .card-b-content-add{
+                color:#9DB7DF;
+                font-size:16px;
+                cursor:pointer;
+                text-align: center;
+                vertical-align: middle;
+                line-height: 72px;
+            }
+        }
     }
 }
-
+.uploadImg{
+  background: #0000000A;
+  border:2px solid #00000029;
+  color: #00000029;
+  width: 180px;
+  height: 120px;
+  text-align: center;
+  line-height: 110px;
+  font-size:60px;
+  cursor: pointer;
+}
 </style>

src/views/Basic/home/newOrder.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="content">
+   
+    <a-form-model
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+      :label-col="inline"
+      layout="vertical"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-model-item><div class="cardTitle">基础信息</div></a-form-model-item>
+      <a-form-model-item label="订单号" prop="code">
+        <a-input disabled style="width:60%"/>
+      </a-form-model-item>
+      <a-form-model-item label="选择功能模块" prop="code">
+        <a-select style="width:60%"/>
+      </a-form-model-item>
+      <a-form-model-item label="选择有效时长" prop="code">
+        <a-select style="width:60%"/>
+      </a-form-model-item>
+      <a-form-model-item label="购买金额">
+        <span style="color:#D53131">25，000</span>
+      </a-form-model-item>
+      <a-form-model-item label="企业名称">
+        <span>广西印象物业服务有限公司</span>
+      </a-form-model-item>
+      <a-form-model-item label="选择小区">
+        <a-input style="width:60%" placeholder="请输入小区全称"/>
+      </a-form-model-item>
+      <a-form-model-item><div class="cardTitle">高级配置</div></a-form-model-item>
+      <a-row>
+        <a-col :span='12'>
+          <a-form-model-item label="域名信息" prop="">
+            <a-input v-model="form.verificationCode"
+                placeholder="请输入域名信息"
+                style="width:130%"
+            />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span='12'>
+          <a-form-model-item label="服务器IP" prop="">
+            <a-input v-model="form.verificationCode"
+                placeholder="请输入服务器IP"
+                style="width:130%"
+            />
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='12'>
+          <a-form-model-item label="是否定制" prop="">
+            <a-select v-model="form.verificationCode"
+                style="width:100%"
+            />
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-form-model-item label="定制需求">
+        <a-textarea
+          v-model="value"
+          placeholder="请输入定制需求"
+          disabled
+          :auto-size="{ minRows: 3, maxRows: 5 }"
+        />
+      </a-form-model-item>
+      <a-form-model-item label="其他附件">
+        <span>建议上传小于5M，支持上传word、excel格式的文件</span>
+        <a-row  style="margin-top:5px">
+          <a-col :span='12'>
+            <a-upload
+              name="file"
+              :multiple="true"
+              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+              :headers="headers"
+              @change="handleChange"
+            >
+              <a-button> <a-icon type="upload" /> 选择文件</a-button>
+            </a-upload>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="onSubmit"> 提交 </a-button>
+        <a-button style="margin-left: 10px" @click="resetForm">
+          重置
+        </a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 表单
+      labelCol: { span: 4 },
+      wrapperCol: { span: 10 },
+      other: "",
+      form: {
+        tel: "",
+        name: "",
+        address:""
+      },
+      rules: {
+        tel: [
+          {
+            required: true,
+            message: "请输入手机号",
+            trigger: "blur",
+          },
+          {
+            min: 11,
+            max: 11,
+            message: "姓名长度必须为 11 位",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "blur",
+          },
+          {
+            min: 3,
+            max: 5,
+            message: "姓名长度必须为 3 至 5位",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 获取验证码
+    getCode(){},
+    onSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 重置
+    resetForm() {
+      this.$refs.ruleForm.resetFields();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.content {
+  background: #fff;
+  padding-left: 125px;
+  padding-top: 48px;
+}
+.cardTitle{
+  margin-left: -10px;
+  margin-bottom: -10px;
+}
+/deep/.ant-col .ant-form-item-label{
+  margin-top: -10px;
+}
+.uploadImg{
+  background: #0000000A;
+  border:2px solid #00000029;
+  color: #00000029;
+  width: 180px;
+  height: 120px;
+  text-align: center;
+  line-height: 110px;
+  font-size:60px;
+  cursor: pointer;
+}
+</style>  

src/views/Basic/home/settled.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="content">
+   
+    <a-form-model
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+      :label-col="inline"
+      layout="vertical"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-model-item><div class="cardTitle">关联账号</div></a-form-model-item>
+      <a-form-model-item ref="tel" label="手机号" prop="tel">
+        <a-input
+          v-model="form.tel"
+          style="width:60%"
+          @blur="
+            () => {
+              $refs.tel.onFieldBlur();
+            }
+          "
+        />
+        <a-row style="margin-top:10px">
+          <a-col :span='8' style="margin-right:10px">
+             <a-input
+                v-model="form.verificationCode"
+                placeholder="请输入验证码"
+              />
+          </a-col>
+          <a-col :span='6'>
+              <a-button type="primary" @click="getCode">获取验证码</a-button>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <a-form-model-item><div class="cardTitle">基础信息</div></a-form-model-item>
+      <a-row>
+        <a-col :span='12'>
+          <a-form-model-item label="企业名称" prop="">
+            <a-input v-model="form.verificationCode"
+                placeholder="请输入企业名称"
+                style="width:130%"
+            />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span='12'>
+          <a-form-model-item label="社会信用代码" prop="">
+            <a-input v-model="form.verificationCode"
+                placeholder="请输入社会信用代码"
+                style="width:130%"
+            />
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='12'>
+          <a-form-model-item label="企业地址" prop="">
+            <a-input v-model="form.verificationCode"
+                placeholder="请选择企业地址"
+                style="width:100%"
+            />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span='12'>
+          <a-form-model-item label="详细地址" prop="">
+            <a-input v-model="form.address"
+                placeholder="请输入详细地址"
+                style="width:130%"
+            />
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span='12'>
+          <a-form-model-item label="法人姓名" prop="">
+            <a-input v-model="form.verificationCode"
+                placeholder="请输入法人姓名"
+                style="width:130%"
+            />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span='12'>
+          <a-form-model-item label="法人身份证号" prop="">
+            <a-input v-model="form.address"
+                placeholder="请输入法人身份证号"
+                style="width:130%"
+            />
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-form-model-item label="营业执照有效期限">
+        <a-range-picker @change="onChange" />
+      </a-form-model-item>
+      <a-form-model-item label="法人身份证">
+        <span><span style="color:#1F519B">请上传法人身份证正面照、反面照，</span>文件大小不超过5mb，支持jpg、png格式</span>
+        <a-row>
+          <a-col :span='12'>
+            头像面
+            <div class="uploadImg">+</div>
+          </a-col>
+          <a-col :span='12'>
+            国徽面
+            <div class="uploadImg">+</div>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <a-form-model-item label="营业执照">
+        <span><span style="color:#1F519B">请上传公司营业执照，</span>文件大小不超过5mb，支持jpg、png格式</span>
+        <a-row>
+          <a-col :span='12'>
+            公司营业执照
+            <div class="uploadImg">+</div>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <a-form-model-item label="其他附件">
+        <span><span style="color:#1F519B">如从事某些特定行业，需要上传对应的资质证书，</span>文件大小不超过5mb，支持jpg、png格式</span>
+        <a-row>
+          <a-col :span='12'>
+            <div class="uploadImg">+</div>
+          </a-col>
+        </a-row>
+      </a-form-model-item>
+      <a-form-model-item label="联系人姓名">
+        <a-input style="width:60%"></a-input>
+      </a-form-model-item>
+       <a-form-model-item label="联系人邮箱">
+        <a-input style="width:60%"></a-input>
+      </a-form-model-item>
+       <a-form-model-item label="联系人电话">
+        <a-input style="width:60%"></a-input>
+      </a-form-model-item>
+       <a-form-model-item label="联系人地址">
+        <a-input style="width:60%"></a-input>
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="onSubmit"> 提交 </a-button>
+        <a-button style="margin-left: 10px" @click="resetForm">
+          重置
+        </a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 表单
+      labelCol: { span: 4 },
+      wrapperCol: { span: 10 },
+      other: "",
+      form: {
+        tel: "",
+        name: "",
+        address:""
+      },
+      rules: {
+        tel: [
+          {
+            required: true,
+            message: "请输入手机号",
+            trigger: "blur",
+          },
+          {
+            min: 11,
+            max: 11,
+            message: "姓名长度必须为 11 位",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "blur",
+          },
+          {
+            min: 3,
+            max: 5,
+            message: "姓名长度必须为 3 至 5位",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 获取验证码
+    getCode(){},
+    onSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 重置
+    resetForm() {
+      this.$refs.ruleForm.resetFields();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.content {
+  background: #fff;
+  padding-left: 125px;
+  padding-top: 48px;
+}
+.cardTitle{
+  margin-left: -10px;
+  margin-bottom: -10px;
+}
+/deep/.ant-col .ant-form-item-label{
+  margin-top: -10px;
+}
+.uploadImg{
+  background: #0000000A;
+  border:2px solid #00000029;
+  color: #00000029;
+  width: 180px;
+  height: 120px;
+  text-align: center;
+  line-height: 110px;
+  font-size:60px;
+  cursor: pointer;
+}
+</style>  

src/views/Login/index.vue

@@ -7,17 +7,278 @@
  * @FilePath: /ansu-business/src/views/Login/index.vue
 -->
 <template>
-    <div>
-1
+  <div>
+    <div class="logo-box">
+      <img src="@/assets/images/logo.png" alt="" />
     </div>
+    <div class="login-box">
+      <a-row>
+        <a-col :span="12" class="box-a">
+          <img src="@/assets/images/logo.png" alt="" />
+        </a-col>
+        <a-col :span="1" class="box-cen"></a-col>
+        <!-- 登录 -->
+        <a-col :span="11" class="box-b" v-if="status === 1">
+           <a-tabs v-model="activeName" @change="tabsSwitch">
+                <a-tab-pane key="1" tab="密码登录">
+                </a-tab-pane>
+                <a-tab-pane key="2" tab="验证码登录">
+                </a-tab-pane>
+            </a-tabs>
+            <div class="login-input">
+                <a-input placeholder="请输入手机号码"></a-input>
+                <a-input type="password" placeholder="请输入密码"></a-input>
+                <a-row>
+                  <a-col :span="12" style="margin-left:23px"><a-checkbox></a-checkbox>&nbsp;&nbsp;三天之内免登陆</a-col>
+                </a-row>
+                <a-button type="primary" style="width:90%;margin:30px">
+                    登录
+                </a-button>
+                <a-row style="margin-top:20px;margin-left:23px">
+                  <a-col :span="14">
+                    <a-checkbox></a-checkbox>&nbsp;&nbsp;我已同意用户协议
+                  </a-col>
+                   <a-col :span="10">
+                    <span class="logintext" @click="status=3">忘记密码</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="logintext" @click="status=2">免费注册</span>
+                  </a-col>
+                </a-row>
+            </div>
+        </a-col>
+        <!-- 注册 -->
+        <a-col :span="11" class="box-b" v-if="status === 2">
+          <div class="cardTitle">新建账号</div>
+          <a-form-model
+            ref="ruleForm"
+            :model="form"
+            :rules="rules"
+            :label-col="inline"
+            layout="vertical"
+            :wrapper-col="wrapperCol"
+          >
+            <a-form-model-item ref="tel" label="手机号码" prop="tel">
+              <a-input
+                v-model="form.tel"
+                style="width: 100%"
+                placeholder="请输入手机号"
+                @blur="
+                  () => {
+                    $refs.tel.onFieldBlur();
+                  }
+                "
+              />
+              <a-row style="margin-top: 20px">
+                <a-col :span="16" style="margin-right: 10px">
+                  <a-input
+                    style="width:100%"
+                    v-model="form.verificationCode"
+                    placeholder="请输入验证码"
+                  />
+                </a-col>
+                <a-col :span="6">
+                  <a-button type="primary" @click="getCode"
+                    >获取验证码</a-button
+                  >
+                </a-col>
+              </a-row>
+            </a-form-model-item>
+            <a-form-model-item label="设置密码" prop="psw">
+                <a-input placeholder="请输入密码"/>
+            </a-form-model-item>
+            <a-form-model-item label="确认密码" prop="confirmPsw">
+                <a-input placeholder="请再次输入密码"/>
+            </a-form-model-item>
+            <a-form-model-item>
+                <a-button type="primary" style="width:100%">
+                    确定
+                </a-button>
+            </a-form-model-item>
+            <a-form-model-item>
+                <span>已有账号？</span><span class="logintext" @click="status=1">登录</span>
+            </a-form-model-item>
+          </a-form-model>
+        </a-col>
+        <!-- 找回密码 -->
+        <a-col :span="11" class="box-b" v-if="status === 3">
+          <div class="cardTitle">找回密码</div>
+          <a-form-model
+            ref="ruleForm"
+            :model="form"
+            :rules="rules"
+            :label-col="inline"
+            layout="vertical"
+            :wrapper-col="wrapperCol"
+          >
+            <a-form-model-item ref="tel" label="手机号码" prop="tel">
+              <a-input
+                v-model="form.tel"
+                style="width: 100%"
+                placeholder="请输入手机号"
+                @blur="
+                  () => {
+                    $refs.tel.onFieldBlur();
+                  }
+                "
+              />
+              <a-row style="margin-top: 20px">
+                <a-col :span="16" style="margin-right: 10px">
+                  <a-input
+                    style="width:100%"
+                    v-model="form.verificationCode"
+                    placeholder="请输入验证码"
+                  />
+                </a-col>
+                <a-col :span="6">
+                  <a-button type="primary" @click="getCode"
+                    >获取验证码</a-button
+                  >
+                </a-col>
+              </a-row>
+            </a-form-model-item>
+            <a-form-model-item label="设置密码" prop="psw">
+                <a-input placeholder="请输入密码"/>
+            </a-form-model-item>
+            <a-form-model-item label="确认密码" prop="confirmPsw">
+                <a-input placeholder="请再次输入密码"/>
+            </a-form-model-item>
+            <a-form-model-item>
+                <a-button type="primary" style="width:100%">
+                    确定
+                </a-button>
+            </a-form-model-item>
+            <a-form-model-item>
+                <span>已有账号？</span><span class="logintext" @click="status=1">登录</span>
+            </a-form-model-item>
+          </a-form-model>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "Login"
-}
+  name: "Login",
+  data() {
+    return {
+      status: 1,
+      activeName:'1',
+      form:{
+          tel:''
+      },
+      rules: {
+        tel: [
+          {
+            required: true,
+            message: "请输入手机号",
+            trigger: "blur",
+          },
+          {
+            min: 11,
+            max: 11,
+            message: "姓名长度必须为 11 位",
+            trigger: "blur",
+          },
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "blur",
+          },
+          {
+            min: 3,
+            max: 5,
+            message: "姓名长度必须为 3 至 5位",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    login() {
+      this.$router.push({ name: "Console" });
+    },
+    // 获取验证码
+    getCode(){},
+    onSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 重置
+    resetForm() {
+      this.$refs.ruleForm.resetFields();
+    },
+    tabsSwitch(){
+        console.log(this.activeName);
+    }
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
+.logo-box {
+  text-align: left;
+  background: #ffffff;
+  width: 100%;
+  height: 93px;
+  line-height: 93px;
+  margin-bottom: 42px;
+  img {
+    width: 126px;
+    height: 61px;
+    background: #ffffff;
+    margin-left: 32px;
+  }
+}
+.login-box {
+  background: #ffffff;
+  height: 500px;
+  width: 989px;
+  margin: auto;
+}
+.box-a {
+  height: 500px;
+  padding: 10px;
+}
+.box-cen {
+  background: #e5e5e5;
+  height: 500px;
+}
+.box-b {
+  height: 500px;
+  text-align: left;
+  padding:30px;
+}
+.cardTitle{
+    margin-left: -10px;
+    font-size: 18px;
+    color: #000000;
+    font-weight: 500;
+    margin-bottom: 40px;
+}
+.logintext{
+    color: #205FBD;
+    cursor: pointer;
+}
+/deep/.ant-form-item{
+    margin-top:-10px;
+}
+.login-input{
+  text-align: left;
+  margin-top: 20px;
+    /deep/.ant-input{
+        border: 0px;
+        border-bottom: 1px solid #f4eded;
+        border-radius:0 ;
+        width: 90%;
+        margin: 25px;
+    }
+}
 </style>