diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..821466f
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,3 @@
+NODE_ENV = 'development'
+VUE_APP_URL = ''
+VUE_APP_CDN = ''
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..3e595a6
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,3 @@
+NODE_ENV  = 'production'
+VUE_APP_URL = ''
+VUE_APP_CDN = ''
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcf..ad01042 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index 3e5a139..c5f5595 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>智慧小区后台管理系统</title>
   </head>
   <body>
     <noscript>
diff --git a/src/assets/images/loginBg.png b/src/assets/images/loginBg.png
new file mode 100644
index 0000000..8f90586
Binary files /dev/null and b/src/assets/images/loginBg.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
index ad01042..b3fdd44 100644
Binary files a/src/assets/images/logo.png and b/src/assets/images/logo.png differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
new file mode 100644
index 0000000..94d5ba2
--- /dev/null
+++ b/src/components/table/index.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="main">
+    <div style="margin-bottom: 16px">
+      <!-- 批量操作 -->
+      <a-select
+        type="primary"
+        :disabled="!hasSelected"
+        :loading="loading"
+        style="width: 120px"
+        @change="Actions"
+        placeholder="请选择操作"
+      >
+        批量
+        <a-select-option v-for="item in ActionsList" :key="item.value">
+          {{ item.label }}
+        </a-select-option>
+      </a-select>
+      <span style="margin-left: 8px">
+        <template v-if="hasSelected">
+          {{ `已选择 ${selectedRowKeys.length} 条` }}
+        </template>
+      </span>
+    </div>
+    <!-- 表格 -->
+    <a-table
+      :columns="columns"
+      :data-source="tableData"
+      :pagination="pagination"
+      :scroll="{ x: 1300 }"
+      :row-selection="{
+        selectedRowKeys: selectedRowKeys,
+        onChange: selectionChoosed,
+      }"
+      :row-key="
+        (record, index) => {
+          return index;
+        }
+      "
+    >
+      <!-- 外头传进来的操作栏信息，data为表格循环出来的当前行数据信息 -->
+      <span slot="action" slot-scope="text, record">
+        <slot name="actionBox" :data="record"></slot>
+      </span>
+    </a-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 表格分页
+      pagination: {
+        showTotal: (total) => `共 ${total} 条`,
+        showSizeChanger: true,
+        showQuickJumper: true,
+      },
+      loading: false,
+      // 选择的index
+      selectedRowKeys: [],
+    };
+  },
+  computed: {
+    // 是否选择selection
+    hasSelected() {
+      return this.selectedRowKeys.length > 0;
+    },
+  },
+  // 组件属性
+  props: {
+    columns: Array,
+    tableData: Array,
+    ActionsList: Array,
+  },
+  methods: {
+    // 选择selection
+    selectionChoosed(selectedRowKeys, data) {
+      this.selectedRowKeys = selectedRowKeys;
+      this.$emit("selectionChoosed", data);
+    },
+    // 页码切换
+    handleTableChange(val) {
+      this.$emit("handleTableChange", val);
+    },
+    // 功能
+    Actions(val) {
+      this.$emit("Actions", val);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#commonTable {
+  margin: 24px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 52a96e4..99c7154 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,7 +17,10 @@ Vue.use(mixins);
 import store from "@/store";
 import router from "@/permission";
 Vue.config.productionTip = false
+import commonTable from './components/table'
 
+// 注册组件
+Vue.component('commonTable', commonTable)
 new Vue({
   render: h => h(App),
   router,
diff --git a/src/styles/antd.less b/src/styles/antd.less
index 7442381..b6cc3b9 100644
--- a/src/styles/antd.less
+++ b/src/styles/antd.less
@@ -1,6 +1,6 @@
 .ant-layout {
     width: 100% !important;
-    // height: 100% !important;
+    height: 100% !important;
 }
 .ant-layout-sider-children {
     background-color: #2a334f;
diff --git a/src/views/Authority/index.vue b/src/views/Authority/index.vue
index c5de821..338460d 100644
--- a/src/views/Authority/index.vue
+++ b/src/views/Authority/index.vue
@@ -1,42 +1,155 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-22 15:56:04
- * @LastEditTime: 2021-11-22 17:14:10
- * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /ansu-business/src/views/Waybill/index.vue
--->
 <template>
   <div>
-    <a-button type="primary" @click="log()"> Primary </a-button>
-    <a-button>Default</a-button>
-    <a-button type="dashed"> Dashed </a-button>
-    <a-button type="danger"> Danger </a-button>
-    <a-config-provider :auto-insert-space-in-button="false">
-      <a-button type="primary"> 按钮 </a-button>
-    </a-config-provider>
-    <a-button type="primary"> 按钮 </a-button>
-    <a-button type="link"> Link </a-button>
+    <commonTable
+      :columns="columns"
+      :tableData="tableData"
+      :ActionsList="ActionsList"
+      @handleTableChange="handleTableChange"
+      @Actions="Actions"
+      @selectionChoosed="selectionChoosed"
+    >
+      <template v-slot:actionBox="data">
+        <a href="javascript:;" @click="del(data)">del</a>
+        <span style="margin: 5px">|</span>
+        <a href="javascript:;">detail</a>
+      </template>
+    </commonTable>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Billing",
-  data(){
-      return{
+  data() {
+    return {
+      tableChoosed: [],
+      // 分页
+      pagination: {
+        current: 1,
+        total: 0,
+        pageSize: 10,
+      },
+      //   列
+      columns: [
+        {
+          title: "Name",
+          dataIndex: "name",
+          width: "200",
+        },
+        {
+          title: "Gender",
+          dataIndex: "gender",
+          width: "200",
+          customRender: function (gender) {
+            if (gender === 1) {
+              return "是";
+            } else {
+              return "否";
+            }
+          },
+        },
+        {
+          title: "Gender1",
+          dataIndex: "gender1",
+          width: "200",
+        },
+        {
+          title: "Gender2",
+          dataIndex: "gender2",
+          width: "200",
+        },
+        {
+          title: "Gender3",
+          dataIndex: "gender3",
+          width: "200",
+        },
+        {
+          title: "Gender4",
+          dataIndex: "gender4",
+          width: "200",
+        },
+        {
+          title: "Gender5",
+          dataIndex: "gender5",
+          width: "200",
+        },
+        {
+          title: "Gender6",
+          dataIndex: "gender6",
+          width: "200",
+        },
+        {
+          title: "status",
+          dataIndex: "status",
 
-      }
+          width: "200",
+        },
+        {
+          title: "操作",
+          dataIndex: "action",
+          key: "action",
+          width: "180",
+          fixed: "right",
+          scopedSlots: { customRender: "action" },
+        },
+      ],
+      //   数据
+      tableData: [
+        { name: 1, gender: 1 },
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+      ],
+      ActionsList: [
+        {
+          label: "批量删除",
+          value: 1,
+        },
+        {
+          label: "批量导出",
+          value: 2,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleTableChange(pagination) {
+      console.log(pagination);
+      const pager = { ...this.pagination };
+      pager.current = pagination.current;
+      pager.pageSize = pagination.pageSize;
+      this.pagination = pager;
+    },
+    del(data) {
+      console.log(data);
+    },
+    Actions(data) {
+      console.log(data);
+    },
+    selectionChoosed(data) {
+      console.log(data);
+      this.tableChoosed = data
+    },
   },
-  methods:{
-      log(){
-        //   console.log();
-        this.$message.success('1')
-        this.$router.push({name:'Authority_details'})
-      }
-  }
 };
 </script>
 
-<style lang="less" scoped>
-</style>
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
index 0955f23..fcdac25 100644
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -1,23 +1,281 @@
-<!--
- * @Author: your name
- * @Date: 2021-11-22 16:20:34
- * @LastEditTime: 2021-11-22 16:20:34
- * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: /ansu-business/src/views/Login/index.vue
--->
 <template>
-    <div>
-
+  <div class="bg">
+    <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  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  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  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>
-
+.bg{
+  background-image: url(../../assets/images/loginBg.png);
+  height: 100vh;
+  background-size:cover;
+}
+.logo-box {
+  text-align: left;
+  background: #ffffff;
+  width: 100%;
+  height: 93px;
+  line-height: 93px;
+  margin-bottom: 93px;
+  img {
+    width: 61px;
+    height: 61px;
+    background: #ffffff;
+    margin-left: 42px;
+  }
+}
+.login-box {
+  background: #ffffff;
+  height: 500px;
+  width: 489px;
+  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>
