Головна сторінка Огляд Довідка
Реєстрація Увійти
ch-校园卡
/
ihotel-manage
8
0
Відгалуження 0
Файли Проблеми 0 Запити на злиття 0 Wiki
Переглянути джерело

静态页面

MS-CIAZDCOIXVRW\Administrator 3 роки тому
батько
31b284522d
коміт
5f4a1f5b90
13 змінених файлів з 1230 додано та 14 видалено
Об'єднаний вигляд Показати статистику Diff
  1. 1 1
      admin/index.html
  2. BIN
      admin/src/assets/images/bg.png
  3. BIN
      admin/src/assets/images/eye.png
  4. BIN
      admin/src/assets/images/eye_close.png
  5. BIN
      admin/src/assets/images/password.png
  6. BIN
      admin/src/assets/images/user.png
  7. 18 1
      admin/src/layout/components/Navbar.vue
  8. 7 0
      admin/src/main.js
  9. 7 1
      admin/src/router/index.js
  10. 408 4
      admin/src/views/account/index.vue
  11. 263 0
      admin/src/views/login/index.vue
  12. 286 4
      admin/src/views/stat/index.vue
  13. 240 3
      admin/src/views/system/index.vue

+ 1 - 1
admin/index.html
Переглянути файл 

@@ -3,7 +3,7 @@
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <title>admin</title>
 
+    <title>智慧校园公寓管理端</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

BIN
admin/src/assets/images/bg.png
Переглянути файл


BIN
admin/src/assets/images/eye.png
Переглянути файл


BIN
admin/src/assets/images/eye_close.png
Переглянути файл


BIN
admin/src/assets/images/password.png
Переглянути файл


BIN
admin/src/assets/images/user.png
Переглянути файл


+ 18 - 1
admin/src/layout/components/Navbar.vue
Переглянути файл 

@@ -17,7 +17,7 @@
 
         </el-avatar>
 
         </el-avatar>
 
       </div>
 
       </div>
 
       <div class="name">名字</div>
 
       <div class="name">名字</div>
 
-      <div class="out">
 
+      <div class="out" @click="loginOut">
 
         <IconSvg :W="16" :H="16" name="quit" />
 
         <IconSvg :W="16" :H="16" name="quit" />
 
         <div class="title">退出</div>
 
         <div class="title">退出</div>
 
       </div>
 
       </div>
 
@@ -36,6 +36,22 @@ export default {
 
     };
 
     };
 
   },
 
   },
 
   methods: {
 
   methods: {
 
+    loginOut() {
 
+      // 提醒用户是否确定退出
 
+      this.$confirm("确定退出吗?", "提示", {
 
+        confirmButtonText: "确定",
 
+        cancelButtonText: "取消",
 
+        type: "warning",
 
+        roundButton: true,
 
+      })
 
+        .then(() => {
 
+          // 路由跳转登录页
 
+          this.$router.push(`/login?redirect=${this.$route.fullPath}`);
 
+        })
 
+        .catch(() => {
 
+          this.$message.info("已取消");
 
+        });
 
+    },
 
     informs() {
 
     informs() {
 
       this.$router.replace({ name: "Inform" }).catch((err) => {
 
       this.$router.replace({ name: "Inform" }).catch((err) => {
 
         console.log();
 
         console.log();
 
@@ -102,6 +118,7 @@ export default {
 
       display: flex;
 
       display: flex;
 
       align-items: center;
 
       align-items: center;
 
       padding-right: 18px;
 
       padding-right: 18px;
 
+      cursor: pointer;
 
 
 
       .title {
 
       .title {
 
         margin-left: 6px;
 
         margin-left: 6px;

+ 7 - 0
admin/src/main.js
Переглянути файл 

@@ -10,6 +10,13 @@ Vue.component('IconSvg', require('./components/SvgIcon').default)
 
 
 
 Vue.config.productionTip = false
 
 Vue.config.productionTip = false
 
 Vue.use(ElementUI);
 
 Vue.use(ElementUI);
 
+
 
+Vue.directive('fo', {
 
+	inserted(el, binding, vnode) {
 
+		// 聚焦元素
 
+		el.querySelector('input').focus()
 
+	}
 
+})
 
 /* eslint-disable no-new */
 
 /* eslint-disable no-new */
 
 new Vue({
 
 new Vue({
 
   el: '#app',
 
   el: '#app',

+ 7 - 1
admin/src/router/index.js
Переглянути файл 

@@ -49,6 +49,12 @@ export default new Router({
 
                     component: () => import('@/views/inform')
 
                     component: () => import('@/views/inform')
 
                 }
 
                 }
 
             ]
 
             ]
 
-        }
 
+        },
 
+        // 登录页
 
+        {
 
+            path: '/login',
 
+            component: () => import('@/views/login/index'),
 
+            hidden: true
 
+        },
 
     ]
 
     ]
 
 })
 
 })

+ 408 - 4
admin/src/views/account/index.vue
Переглянути файл 

@@ -1,13 +1,417 @@
 
 <template>
 
 <template>
 
-    <div>Account</div>
 
+  <div class="inform">
 
+    <el-card class="box-card" style="width: 1612px; height: 950px">
 
+      <!-- 标题区域 -->
 
+      <div slot="header" class="clearfix">
 
+        <div class="inform-title">账号管理</div>
 
+      </div>
 
+
 
+      <!-- 主体内容区域 -->
 
+      <div class="inform-body">
 
+        <!-- 筛选条件区域 -->
 
+        <div class="state">
 
+          <div class="left">
 
+            <el-col :span="18">
 
+              <el-input
 
+                size="small"
 
+                v-model="searchValue"
 
+                placeholder="请输入账号或员工姓名"
 
+                prefix-icon="el-icon-search"
 
+              >
 
+              </el-input>
 
+            </el-col>
 
+            <el-col :span="6">
 
+              <el-button size="small" type="primary">查询</el-button>
 
+            </el-col>
 
+          </div>
 
+          <div class="right">
 
+            <el-button type="primary" size="small" @click="handleAdd"
 
+              >添加账号</el-button
 
+            >
 
+          </div>
 
+        </div>
 
+        <!-- 表格区域 -->
 
+        <div class="inform-table">
 
+          <el-table
 
+            :data="tableData"
 
+            max-height="576"
 
+            height="576"
 
+            style="width: 1550px"
 
+            stripe
 
+            :cell-style="rowbg"
 
+            :header-cell-style="{
 
+              color: ' rgba(0, 0, 0, 1)',
 
+              background: 'rgba(240, 243, 247, 1)',
 
+            }"
 
+          >
 
+            <el-table-column prop="number" label="账号" align="center">
 
+            </el-table-column>
 
+
 
+            <el-table-column prop="name" align="center" label="员工姓名">
 
+            </el-table-column>
 
+
 
+            <el-table-column prop="identity" align="center" label="角色">
 
+            </el-table-column>
 
+            <el-table-column align="center" label="操作">
 
+              <template slot-scope="{ row }">
 
+                <el-row v-if="row.identity == '超级管理员'">/</el-row>
 
+                <el-row v-else>
 
+                  <el-button type="text" @click="handleEdit(row)">
 
+                    编辑
 
+                  </el-button>
 
+                  <el-button type="text" @click="handleDelete(row)"
 
+                    >删除
 
+                  </el-button>
 
+                </el-row>
 
+              </template>
 
+            </el-table-column>
 
+          </el-table>
 
+        </div>
 
+        <!-- 分页器区域 -->
 
+        <div class="block">
 
+          <el-pagination
 
+            background
 
+            layout="prev, pager, next, jumper"
 
+            :current-page.sync="currentPage"
 
+            :page-size="pageSize"
 
+            :total="total"
 
+            @current-change="handleCurrentChange"
 
+          >
 
+          </el-pagination>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 添加账号弹窗区域 -->
 
+      <el-dialog
 
+        :title="popTitle"
 
+        width="30%"
 
+        :visible.sync="dialogVisible"
 
+        :close-on-click-modal="false"
 
+        :before-close="handleClose"
 
+      >
 
+        <hr class="pop_title" />
 
+
 
+        <el-form
 
+          :model="ruleForm"
 
+          :rules="rules"
 
+          ref="ruleForm"
 
+          label-position="top"
 
+          class="demo-ruleForm"
 
+        >
 
+          <el-row :gutter="85">
 
+            <el-col :span="12">
 
+              <el-form-item label="员工姓名" prop="name">
 
+                <el-input
 
+                  v-model="ruleForm.name"
 
+                  placeholder="请输入员工姓名"
 
+                ></el-input>
 
+              </el-form-item>
 
+            </el-col>
 
+            <el-col :span="12">
 
+              <el-form-item label="手机号码" prop="phone">
 
+                <el-input
 
+                  v-model="ruleForm.phone"
 
+                  placeholder="请输入手机号码"
 
+                ></el-input>
 
+              </el-form-item>
 
+            </el-col>
 
+          </el-row>
 
+
 
+          <el-form-item label="角色" prop="identity">
 
+            <el-select v-model="ruleForm.identity" placeholder="请选择角色">
 
+              <el-option label="超级管理员" value="shanghai"></el-option>
 
+              <el-option label="管理员" value="beijing"></el-option>
 
+            </el-select>
 
+          </el-form-item>
 
+          <el-form-item label="权限分配" prop="type">
 
+            <el-checkbox-group v-model="ruleForm.type">
 
+              <el-checkbox label="房态管理" name="type"></el-checkbox>
 
+              <el-checkbox label="订单管理" name="type"></el-checkbox>
 
+              <el-checkbox label="员工管理" name="type"></el-checkbox>
 
+              <el-checkbox label="账号管理" name="type"></el-checkbox>
 
+              <el-checkbox label="统计报表" name="type"></el-checkbox>
 
+              <el-checkbox label="系统设置" name="type"></el-checkbox>
 
+            </el-checkbox-group>
 
+          </el-form-item>
 
+        </el-form>
 
+
 
+        <span slot="footer" class="dialog-footer">
 
+          <el-button @click="dialogVisible = false">取 消</el-button>
 
+          <el-button type="primary" @click="handleConfirm('ruleForm')"
 
+            >确 定
 
+          </el-button>
 
+        </span>
 
+      </el-dialog>
 
+    </el-card>
 
+  </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
 export default {
 
 export default {
 
-    name: 'Account'
 
-
 
-}
 
+  name: "Account",
 
+  data() {
 
+    return {
 
+      // 添加账号弹窗控制
 
+      dialogVisible: false,
 
+      // 添加账号弹窗标题
 
+      popTitle: "添加账号",
 
+      // 表格数据
 
+      tableData: [
 
+        {
 
+          number: "13645895689",
 
+          name: "王小虎",
 
+          identity: "超级管理员",
 
+        },
 
+        {
 
+          number: "13645898888",
 
+          name: "张三",
 
+          identity: "管理员",
 
+        },
 
+      ],
 
+      //  搜索框绑定数据
 
+      searchValue: "",
 
+      //   分页器当前页
 
+      currentPage: 1,
 
+      //   每页条数
 
+      pageSize: 8,
 
+      //   总条数
 
+      total: 50,
 
+      // 添加账号弹窗表格绑定数据
 
+      ruleForm: {
 
+        name: "",
 
+        phone: "",
 
+        identity: "",
 
+        type: [],
 
+      },
 
+      // 添加账号弹窗表格验证规则
 
+      rules: {
 
+        name: [
 
+          { required: true, message: "请输入员工姓名", trigger: "blur" },
 
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
 
+        ],
 
+        phone: [
 
+          { required: true, message: "请输入手机号码", trigger: "blur" },
 
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
 
+        ],
 
+        identity: [
 
+          { required: true, message: "请选择角色", trigger: "change" },
 
+        ],
 
+        type: [
 
+          {
 
+            type: "array",
 
+            required: true,
 
+            message: "请至少选择一个活动性质",
 
+            trigger: "change",
 
+          },
 
+        ],
 
+      },
 
+    };
 
+  },
 
+  methods: {
 
+    // 添加账号按钮回调
 
+    handleAdd() {
 
+      this.ruleForm.name = "";
 
+      this.ruleForm.phone = "";
 
+      this.ruleForm.identity = "";
 
+      this.ruleForm.type = [];
 
+      this.dialogVisible = true;
 
+      this.popTitle="添加账号"
 
+      this.$nextTick(() => {
 
+        this.$refs.ruleForm.resetFields();
 
+      });
 
+    },
 
+    // 编辑按钮回调
 
+    handleEdit(row) {
 
+      console.log(row);
 
+      this.dialogVisible = true;
 
+      this.popTitle="编辑账号"
 
+      Object.assign(this.ruleForm,row)
 
+    },
 
+    // 删除按钮回调
 
+    handleDelete(row) {
 
+      console.log(row);
 
+      this.$confirm("确定删除吗?", "提示", {
 
+        confirmButtonText: "确定",
 
+        cancelButtonText: "取消",
 
+        type: "warning",
 
+      })
 
+        .then(() => {
 
+          this.$message.success("删除成功");
 
+        })
 
+        .catch(() => {
 
+          this.$message.info("已取消删除");
 
+        });
 
+    },
 
+    // 分页器换页回调
 
+    handleCurrentChange(value) {
 
+      console.log(value);
 
+      this.currentPage = value;
 
+    },
 
+    // 添加账号弹窗关闭弹窗回调
 
+    handleClose(done) {
 
+      this.$confirm("确认关闭？")
 
+        .then((_) => {
 
+          done();
 
+        })
 
+        .catch((_) => {});
 
+    },
 
+    // 添加账号弹窗确定按钮回调
 
+    handleConfirm(formName) {
 
+      this.$refs[formName].validate((valid) => {
 
+        if (valid) {
 
+          alert("submit!");
 
+        } else {
 
+          console.log("error submit!!");
 
+          return false;
 
+        }
 
+      });
 
+    },
 
+    // 表格样式设置回调
 
+    rowbg(row) {
 
+      if (row.rowIndex % 2 != 0) {
 
+        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
 
+      }
 
+    },
 
+  },
 
+};
 
 </script>
 
 </script>
 
 
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
+.inform /deep/ .el-card {
 
+  width: 1612px;
 
+  height: 950px;
 
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
 
+  border-radius: 8px;
 
+  .clearfix {
 
+    height: 96px;
 
+    width: 100%;
 
+    border-bottom: 1px solid rgba(204, 204, 204, 1);
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    .inform-title {
 
+      width: 96px;
 
+      height: 36px;
 
+      color: rgba(0, 0, 0, 1);
 
+      font-size: 24px;
 
+      font-weight: 500;
 
+      margin-left: 33px;
 
+    }
 
+  }
 
+  .inform-body {
 
+    .state {
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: space-between;
 
+      padding: 33px 29px 34px 33px;
 
+      .left {
 
+        display: flex;
 
+        align-items: center;
 
+        .el-button {
 
+          margin-left: 10px;
 
+          background-color: rgba(41, 109, 227, 1);
 
+        }
 
+      }
 
+      .right {
 
+        .el-button {
 
+          background-color: rgba(41, 109, 227, 1);
 
+        }
 
+      }
 
+    }
 
+    .inform-table {
 
+      .el-table {
 
+        font-weight: 400;
 
+        font-size: 16px;
 
+        color: rgba(0, 0, 0, 1);
 
+        margin: 0 auto;
 
+        .el-table__header-wrapper {
 
+          border-radius: 5px;
 
+        }
 
+        tr {
 
+          height: 64px;
 
+        }
 
+        th {
 
+          font-weight: 400;
 
+        }
 
+      }
 
+    }
 
+    .block {
 
+      height: 36px;
 
+      margin: 66px 29px 0 0;
 
+      float: right;
 
+      .el-pagination {
 
+        padding: 0;
 
+        button {
 
+          width: 36px;
 
+          background: #fff;
 
+          color: rgba(0, 0, 0, 1);
 
+          height: 36px;
 
+          font-size: 14px;
 
+          border: 1px solid rgba(112, 112, 112, 1);
 
+          border-radius: 8px;
 
+        }
 
+        ul {
 
+          .active {
 
+            background: #fff;
 
+            color: rgba(0, 97, 255, 1);
 
+            border: 1px solid rgba(0, 97, 255, 1);
 
+            box-sizing: border-box;
 
+          }
 
+          .el-icon {
 
+            border: none;
 
+          }
 
+          li {
 
+            background: #fff;
 
+            color: rgba(0, 0, 0, 1);
 
+            width: 36px;
 
+            height: 36px;
 
+            font-size: 14px;
 
+            border: 1px solid rgba(112, 112, 112, 1);
 
+            border-radius: 8px;
 
+            line-height: 36px;
 
+          }
 
+        }
 
+        .el-pagination__jump {
 
+          color: rgba(0, 0, 0, 1);
 
+          font-size: 16px;
 
+          margin-left: 10px;
 
+          font-weight: 400;
 
+          height: 36px;
 
+          .el-input {
 
+            width: 65px;
 
+            height: 36px;
 
+            margin: 0 10px;
 
+            input {
 
+              width: 65px;
 
+              height: 36px;
 
+              border: 1px solid rgba(0, 0, 0, 1);
 
+              border-radius: 8px;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .pop_title {
 
+    color: #ccccccff;
 
+  }
 
+  .el-form {
 
+    padding: 0 30px;
 
+  }
 
+}
 
+.box-card {
 
+  /deep/ .el-card__header {
 
+    padding: 0;
 
+  }
 
+  /deep/ .el-card__body {
 
+    padding: 0;
 
+  }
 
+  /deep/ .el-dialog__header {
 
+    font-weight: bold;
 
+  }
 
+  /deep/ .el-dialog__body {
 
+    padding: 0;
 
+  }
 
+}
 
 </style>
 
 </style>

+ 263 - 0
admin/src/views/login/index.vue
Переглянути файл 

@@ -0,0 +1,263 @@
 
+<template>
 
+  <div class="login-container">
 
+    <el-form
 
+      ref="loginForm"
 
+      :model="loginForm"
 
+      :rules="loginRules"
 
+      class="login-form"
 
+    >
 
+      <div class="title-container">
 
+        <h3 class="title">智慧校园公寓管理端</h3>
 
+      </div>
 
+
 
+      <el-form-item prop="userName">
 
+        <span class="svg-container">
 
+          <div class="user"></div>
 
+        </span>
 
+        <el-input
 
+          v-model="loginForm.userName"
 
+          placeholder="用户名"
 
+          type="text"
 
+        />
 
+      </el-form-item>
 
+
 
+      <el-form-item prop="password">
 
+        <span class="svg-container">
 
+          <div class="password"></div>
 
+        </span>
 
+        <el-input
 
+          ref="password"
 
+          v-model="loginForm.password"
 
+          :type="passwordType"
 
+          placeholder="密码"
 
+          @keyup.enter.native="handleLogin"
 
+        />
 
+        <span class="show-pwd" @click="showPwd">
 
+          <div :class="passwordType === 'password' ? 'eye_close' : 'eye'"></div>
 
+        </span>
 
+      </el-form-item>
 
+
 
+      <el-button
 
+        :loading="loading"
 
+        type="primary"
 
+        style="width: 100%; margin-bottom: 30px"
 
+        @click="handleLogin"
 
+        >登录</el-button
 
+      >
 
+    </el-form>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "Login",
 
+  data() {
 
+    // 自定义校验规则
 
+    const validateUsername = (rule, value, callback) => {
 
+      if (!value) {
 
+        callback(new Error("请输入用户名"));
 
+      } else {
 
+        callback();
 
+      }
 
+    };
 
+    const validatePassword = (rule, value, callback) => {
 
+      if (value.length < 6) {
 
+        callback(new Error("密码不少于6位"));
 
+      } else {
 
+        callback();
 
+      }
 
+    };
 
+    return {
 
+      // 表格绑定数据
 
+      loginForm: {
 
+        userName: "",
 
+        password: "",
 
+      },
 
+      // 校验规则
 
+      loginRules: {
 
+        userName: [
 
+          { required: true, trigger: "blur", validator: validateUsername },
 
+        ],
 
+        password: [
 
+          { required: true, trigger: "blur", validator: validatePassword },
 
+        ],
 
+      },
 
+      // 加载中效果
 
+      loading: false,
 
+      // 密码显示隐藏控制
 
+      passwordType: "password",
 
+      redirect: undefined,
 
+    };
 
+  },
 
+  watch: {
 
+    // 监听路由地址变化
 
+    $route: {
 
+      handler: function (route) {
 
+        this.redirect = route.query && route.query.redirect;
 
+      },
 
+      immediate: true,
 
+    },
 
+  },
 
+  methods: {
 
+    // 密码显示隐藏控制函数
 
+    showPwd() {
 
+      if (this.passwordType === "password") {
 
+        this.passwordType = "";
 
+      } else {
 
+        this.passwordType = "password";
 
+      }
 
+      // 重新渲染后使密码框聚焦
 
+      this.$nextTick(() => {
 
+        this.$refs.password.focus();
 
+      });
 
+    },
 
+    // 登录函数
 
+    handleLogin() {
 
+      // 校验用户名密码是否符合验证规则
 
+      this.$refs.loginForm.validate((valid) => {
 
+        // 符合验证规则
 
+        if (valid) {
 
+          this.loading = true;
 
+          // 从仓库调用login函数
 
+          // this.$store
 
+          //   .dispatch("user/login", this.loginForm)
 
+          //   .then(() => {
 
+          this.$router.push({ path: this.redirect || "/" });
 
+          this.loading = false;
 
+          // })
 
+          // .catch(() => {
 
+          //   this.loading = false;
 
+          // });
 
+        }
 
+        // 不符合验证规则
 
+        else {
 
+          console.log("提交失败!!");
 
+          return false;
 
+        }
 
+      });
 
+    },
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="scss">
 
+/* 修复input 背景不协调 和光标变色 */
 
+
 
+$bg: #283443;
 
+$light_gray: #fff;
 
+$cursor: #fff;
 
+
 
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
 
+  .login-container .el-input input {
 
+    color: $bg;
 
+  }
 
+}
 
+
 
+/* 重置 element-ui css */
 
+.login-container {
 
+  .el-input {
 
+    display: inline-block;
 
+    height: 47px;
 
+    width: 85%;
 
+
 
+    input {
 
+      background: transparent;
 
+      border: 0px;
 
+      -webkit-appearance: none;
 
+      border-radius: 0px;
 
+      padding: 12px 5px 12px 15px;
 
+      color: $bg;
 
+      height: 47px;
 
+      caret-color: $bg;
 
+
 
+      &:-webkit-autofill {
 
+        box-shadow: 0 0 0px 1000px #e5e5e5 inset !important;
 
+        -webkit-text-fill-color: $bg !important;
 
+      }
 
+    }
 
+  }
 
+
 
+  .el-form-item {
 
+    border: 1px solid rgba(255, 255, 255, 0.1);
 
+    background: rgba(0, 0, 0, 0.1);
 
+    border-radius: 5px;
 
+    color: #454545;
 
+  }
 
+}
 
+</style>
 
+
 
+<style lang="scss" scoped>
 
+$bg: #2d3a4b;
 
+$dark_gray: #889aa4;
 
+
 
+.login-container {
 
+  width: 100vw;
 
+  height: 100vh;
 
+  min-width: 1280px;
 
+  min-height: 800px;
 
+  background: url(../../assets/images/bg.png);
 
+  background-size: 100% 100%;
 
+  overflow: hidden;
 
+
 
+  .login-form {
 
+    width: 520px;
 
+    margin-top: 310px;
 
+    margin-left: 1080px;
 
+  }
 
+
 
+  .svg-container {
 
+    padding: 6px 5px 6px 15px;
 
+    color: $bg;
 
+    vertical-align: middle;
 
+    width: 30px;
 
+    display: inline-block;
 
+    .user {
 
+      width: 20px;
 
+      height: 20px;
 
+      background: url(../../assets/images/user.png);
 
+      background-size: 100% 100%;
 
+    }
 
+    .password {
 
+      width: 20px;
 
+      height: 20px;
 
+      background: url(../../assets/images/password.png);
 
+      background-size: 100% 100%;
 
+    }
 
+  }
 
+
 
+  .title-container {
 
+    position: relative;
 
+
 
+    .title {
 
+      font-size: 28px;
 
+      margin: 0px auto 40px auto;
 
+      text-align: center;
 
+      font-weight: bold;
 
+    }
 
+  }
 
+
 
+  .show-pwd {
 
+    position: absolute;
 
+    right: 10px;
 
+    top: 7px;
 
+    font-size: 16px;
 
+    color: $bg;
 
+    cursor: pointer;
 
+    user-select: none;
 
+    .eye_close {
 
+      margin-top: 7px;
 
+      width: 20px;
 
+      height: 20px;
 
+      background: url(../../assets/images/eye_close.png);
 
+      background-size: 100% 100%;
 
+    }
 
+    .eye {
 
+      margin-top: 7px;
 
+      width: 20px;
 
+      height: 20px;
 
+      background: url(../../assets/images/eye.png);
 
+      background-size: 100% 100%;
 
+    }
 
+  }
 
+}
 
+</style>

+ 286 - 4
admin/src/views/stat/index.vue
Переглянути файл 

@@ -1,13 +1,295 @@
 
 <template>
 
 <template>
 
-    <div>home</div>
 
+  <div class="stat">
 
+    <el-card class="box-card" style="width: 1612px; height: 950px">
 
+      <!-- 标题区域 -->
 
+      <div slot="header" class="clearfix">
 
+        <div class="stat-title">统计报表</div>
 
+      </div>
 
+
 
+      <!-- 主体内容区域 -->
 
+      <div class="stat-body">
 
+        <!-- 筛选条件区域 -->
 
+        <div class="state">
 
+          <div class="left">
 
+            <el-col :span="20">
 
+              <el-date-picker
 
+                size="small"
 
+                v-model="searchValue"
 
+                type="daterange"
 
+                range-separator="至"
 
+                start-placeholder="开始日期"
 
+                end-placeholder="结束日期"
 
+                style="width: 260px"
 
+                value-format="yyyy-MM-dd"
 
+                @change="changeTime"
 
+              >
 
+              </el-date-picker>
 
+            </el-col>
 
+            <el-col :span="4">
 
+              <el-button size="small" type="primary">查询</el-button>
 
+            </el-col>
 
+          </div>
 
+          <div class="right">
 
+            <el-button type="primary" size="small" @click="handleExport"
 
+              >导出明细</el-button
 
+            >
 
+          </div>
 
+        </div>
 
+        <!-- 表格区域 -->
 
+        <div class="stat-table">
 
+          <el-table
 
+            :data="tableData"
 
+            max-height="576"
 
+            height="576"
 
+            style="width: 1550px"
 
+            stripe
 
+            :cell-style="rowbg"
 
+            :header-cell-style="{
 
+              color: ' rgba(0, 0, 0, 1)',
 
+              background: 'rgba(240, 243, 247, 1)',
 
+            }"
 
+          >
 
+            <el-table-column prop="time" align="center" label="时间">
 
+            </el-table-column>
 
+
 
+            <el-table-column prop="water" align="center" label="水费（元）">
 
+            </el-table-column>
 
+
 
+            <el-table-column
 
+              prop="electricity"
 
+              align="center"
 
+              label="电费（元）"
 
+            >
 
+            </el-table-column>
 
+
 
+            <el-table-column
 
+              prop="refund"
 
+              align="center"
 
+              label="退预付款（元）"
 
+            >
 
+            </el-table-column>
 
+
 
+            <el-table-column prop="count" align="center" label="合计（元）">
 
+            </el-table-column>
 
+          </el-table>
 
+        </div>
 
+        <!-- 分页器区域 -->
 
+        <div class="block">
 
+          <el-pagination
 
+            background
 
+            layout="prev, pager, next, jumper"
 
+            :current-page.sync="currentPage"
 
+            :page-size="pageSize"
 
+            :total="total"
 
+            @current-change="handleCurrentChange"
 
+          >
 
+          </el-pagination>
 
+        </div>
 
+      </div>
 
+    </el-card>
 
+  </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
 export default {
 
 export default {
 
-    name: 'Home'
 
-
 
-}
 
+  name: "stat",
 
+  data() {
 
+    return {
 
+      // 表格数据
 
+      tableData: [
 
+        {
 
+          time: "2022-07-20",
 
+          water: "50.00",
 
+          electricity: "50.00",
 
+          refund: "50.00",
 
+          count: "260.00",
 
+        },
 
+        {
 
+          time: "2022-08-20",
 
+          water: "60.00",
 
+          electricity: "66.00",
 
+          refund: "88.00",
 
+          count: "666.00",
 
+        },
 
+        {
 
+          time: "总计",
 
+          water: "60.00",
 
+          electricity: "66.00",
 
+          refund: "88.00",
 
+          count: "666.00",
 
+        },
 
+      ],
 
+      //  时间搜索框绑定数据
 
+      searchValue: "",
 
+      //   分页器当前页
 
+      currentPage: 1,
 
+      //   每页条数
 
+      pageSize: 8,
 
+      //   总条数
 
+      total: 50,
 
+    };
 
+  },
 
+  methods: {
 
+    // 时间搜索框数值改变触发回调
 
+    changeTime(val) {
 
+      console.log(val);
 
+    },
 
+    // 导出明细按钮回调
 
+    handleExport() {
 
+      this.$confirm("确定导出吗？", "提示", {
 
+        confirmButtonText: "确定",
 
+        cancelButtonText: "取消",
 
+        type: "warning",
 
+      })
 
+        .then(() => {
 
+          this.$message.success("导出成功");
 
+        })
 
+        .catch(() => {
 
+          this.$message.info("已取消");
 
+        });
 
+    },
 
+    // 分页器换页回调
 
+    handleCurrentChange(value) {
 
+      console.log(value);
 
+      this.currentPage = value;
 
+    },
 
+    // 表格样式设置回调
 
+    rowbg(row) {
 
+      if (row.rowIndex % 2 != 0) {
 
+        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
 
+      }
 
+      if (row.rowIndex == this.tableData.length - 1) {
 
+        return { fontWeight: "bold" };
 
+      }
 
+    },
 
+  },
 
+};
 
 </script>
 
 </script>
 
 
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
+.stat /deep/ .el-card {
 
+  width: 1612px;
 
+  height: 950px;
 
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
 
+  border-radius: 8px;
 
+  .clearfix {
 
+    height: 96px;
 
+    width: 100%;
 
+    border-bottom: 1px solid rgba(204, 204, 204, 1);
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    .stat-title {
 
+      width: 96px;
 
+      height: 36px;
 
+      color: rgba(0, 0, 0, 1);
 
+      font-size: 24px;
 
+      font-weight: 500;
 
+      margin-left: 33px;
 
+    }
 
+  }
 
+  .stat-body {
 
+    .state {
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: space-between;
 
+      padding: 33px 29px 34px 33px;
 
+      .left {
 
+        display: flex;
 
+        align-items: center;
 
+        .el-button {
 
+          margin-left: 10px;
 
+          background-color: rgba(41, 109, 227, 1);
 
+        }
 
+      }
 
+      .right {
 
+        .el-button {
 
+          background-color: rgba(41, 109, 227, 1);
 
+        }
 
+      }
 
+    }
 
+    .stat-table {
 
+      .el-table {
 
+        font-weight: 400;
 
+        font-size: 16px;
 
+        color: rgba(0, 0, 0, 1);
 
+        margin: 0 auto;
 
+        .el-table__header-wrapper {
 
+          border-radius: 5px;
 
+        }
 
+        tr {
 
+          height: 64px;
 
+        }
 
+        th {
 
+          font-weight: 400;
 
+        }
 
+      }
 
+    }
 
+    .block {
 
+      height: 36px;
 
+      margin: 66px 29px 0 0;
 
+      float: right;
 
+      .el-pagination {
 
+        padding: 0;
 
+        button {
 
+          width: 36px;
 
+          background: #fff;
 
+          color: rgba(0, 0, 0, 1);
 
+          height: 36px;
 
+          font-size: 14px;
 
+          border: 1px solid rgba(112, 112, 112, 1);
 
+          border-radius: 8px;
 
+        }
 
+        ul {
 
+          .active {
 
+            background: #fff;
 
+            color: rgba(0, 97, 255, 1);
 
+            border: 1px solid rgba(0, 97, 255, 1);
 
+            box-sizing: border-box;
 
+          }
 
+          .el-icon {
 
+            border: none;
 
+          }
 
+          li {
 
+            background: #fff;
 
+            color: rgba(0, 0, 0, 1);
 
+            width: 36px;
 
+            height: 36px;
 
+            font-size: 14px;
 
+            border: 1px solid rgba(112, 112, 112, 1);
 
+            border-radius: 8px;
 
+            line-height: 36px;
 
+          }
 
+        }
 
+        .el-pagination__jump {
 
+          color: rgba(0, 0, 0, 1);
 
+          font-size: 16px;
 
+          margin-left: 10px;
 
+          font-weight: 400;
 
+          height: 36px;
 
+          .el-input {
 
+            width: 65px;
 
+            height: 36px;
 
+            margin: 0 10px;
 
+            input {
 
+              width: 65px;
 
+              height: 36px;
 
+              border: 1px solid rgba(0, 0, 0, 1);
 
+              border-radius: 8px;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+.box-card {
 
+  /deep/ .el-card__header {
 
+    padding: 0;
 
+  }
 
+  /deep/ .el-card__body {
 
+    padding: 0;
 
+  }
 
+}
 
 </style>
 
 </style>

+ 240 - 3
admin/src/views/system/index.vue
Переглянути файл 

@@ -1,13 +1,250 @@
 
 <template>
 
 <template>
 
-    <div>home</div>
 
+  <div class="stat">
 
+    <el-card class="box-card" style="width: 1612px; height: 950px">
 
+      <!-- 标题区域 -->
 
+      <div slot="header" class="clearfix">
 
+        <div class="stat-title">系统设置</div>
 
+      </div>
 
+
 
+      <!-- 主体内容区域 -->
 
+      <div class="stat-body">
 
+        <!-- 预付款区域 -->
 
+        <div>
 
+          预付款每晚不得少于
 
+          <el-input
 
+            class="input-new-tag"
 
+            v-if="imprestShow"
 
+            v-model="inputValue_imprest"
 
+            v-fo
 
+            size="small"
 
+            @blur="handleInputConfirm('imprestShow', 'inputValue_imprest')"
 
+          >
 
+          </el-input>
 
+          <el-button
 
+            v-else
 
+            class="button-new-tag"
 
+            size="small"
 
+            @click="showInput('imprestShow', 'inputValue_imprest')"
 
+          >
 
+            {{ inputValue_imprest }}
 
+          </el-button>
 
+          元
 
+        </div>
 
+
 
+        <!-- 预定天数区域 -->
 
+        <div>
 
+          设置预定/续住天数提前
 
+          <el-input
 
+            class="input-new-tag"
 
+            v-if="reserveShow"
 
+            v-model="inputValue_reserve"
 
+            v-fo
 
+            size="small"
 
+            @blur="handleInputConfirm('reserveShow', 'inputValue_reserve')"
 
+          >
 
+          </el-input>
 
+          <el-button
 
+            v-else
 
+            class="button-new-tag"
 
+            size="small"
 
+            @click="showInput('reserveShow', 'inputValue_reserve')"
 
+          >
 
+            {{ inputValue_reserve }} </el-button
 
+          >天
 
+        </div>
 
+
 
+        <!-- 补助区域 -->
 
+        <div>
 
+          每人补助水量为<el-input
 
+            class="input-new-tag"
 
+            v-if="subsidyWaterShow"
 
+            v-model="inputValue_subsidyWater"
 
+            v-fo
 
+            size="small"
 
+            @blur="
 
+              handleInputConfirm('subsidyWaterShow', 'inputValue_subsidyWater')
 
+            "
 
+          >
 
+          </el-input>
 
+          <el-button
 
+            v-else
 
+            class="button-new-tag"
 
+            size="small"
 
+            @click="showInput('subsidyWaterShow', 'inputValue_subsidyWater')"
 
+          >
 
+            {{ inputValue_subsidyWater }} </el-button
 
+          >吨，每人补助电量为<el-input
 
+            class="input-new-tag"
 
+            v-if="subsidyElectricityShow"
 
+            v-model="inputValue_subsidyElectricity"
 
+            v-fo
 
+            size="small"
 
+            @blur="
 
+              handleInputConfirm(
 
+                'subsidyElectricityShow',
 
+                'inputValue_subsidyElectricity'
 
+              )
 
+            "
 
+          >
 
+          </el-input>
 
+          <el-button
 
+            v-else
 
+            class="button-new-tag"
 
+            size="small"
 
+            @click="
 
+              showInput(
 
+                'subsidyElectricityShow',
 
+                'inputValue_subsidyElectricity'
 
+              )
 
+            "
 
+          >
 
+            {{ inputValue_subsidyElectricity }} </el-button
 
+          >度
 
+        </div>
 
+
 
+        <!-- 通知人区域 -->
 
+        <div>
 
+          设置清扫/查房通知人<el-input
 
+            class="input-new-tag"
 
+            v-if="informShow"
 
+            v-model="inputValue_inform"
 
+            v-fo
 
+            size="small"
 
+            @blur="handleInputConfirm('informShow', 'inputValue_inform')"
 
+          >
 
+          </el-input>
 
+          <el-button
 
+            v-else
 
+            class="button-new-tag"
 
+            size="small"
 
+            @click="showInput('informShow', 'inputValue_inform')"
 
+          >
 
+            {{ inputValue_inform }}
 
+          </el-button>
 
+        </div>
 
+
 
+        <!-- 退房区域 -->
 
+        <div>
 
+          设置退房后<el-input
 
+            class="input-new-tag"
 
+            v-if="refundShow"
 
+            v-model="inputValue_refund"
 
+            v-fo
 
+            size="small"
 
+            @blur="handleInputConfirm('refundShow', 'inputValue_refund')"
 
+          >
 
+          </el-input>
 
+          <el-button
 
+            v-else
 
+            class="button-new-tag"
 
+            size="small"
 
+            @click="showInput('refundShow', 'inputValue_refund')"
 
+          >
 
+            {{ inputValue_refund }} </el-button
 
+          >分钟，断水断电
 
+        </div>
 
+      </div>
 
+    </el-card>
 
+  </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
 export default {
 
 export default {
 
-    name: 'Home'
 
+  name: "system",
 
+  data() {
 
+    return {
 
+      // 预付款输入框按钮框切换控制
 
+      imprestShow: false,
 
+      // 预付款绑定数据
 
+      inputValue_imprest: 20,
 
 
 
-}
 
+      // 预定天数输入框按钮框切换控制
 
+      reserveShow: false,
 
+      // 预定天数绑定数据
 
+      inputValue_reserve: 10,
 
+
 
+      // 补助区域水量输入框按钮框切换控制
 
+      subsidyWaterShow: false,
 
+      // 补助区域水量绑定数据
 
+      inputValue_subsidyWater: 5,
 
+
 
+      // 补助区域电量输入框按钮框切换控制
 
+      subsidyElectricityShow: false,
 
+      // 补助区域电量绑定数据
 
+      inputValue_subsidyElectricity: 9,
 
+
 
+      // 通知人输入框按钮框切换控制
 
+      informShow: false,
 
+      // 通知人绑定数据
 
+      inputValue_inform: 7,
 
+
 
+      // 退房输入框按钮框切换控制
 
+      refundShow: false,
 
+      // 退房绑定数据
 
+      inputValue_refund: 8,
 
+    };
 
+  },
 
+  methods: {
 
+    // 点击按钮 切换输入框 并聚焦
 
+    showInput(show, value) {
 
+      this[show] = true;
 
+      this[value] = null;
 
+    },
 
+    // 失去焦点 切换回按钮 并更新数据
 
+    handleInputConfirm(show, value) {
 
+      this[show] = false;
 
+    },
 
+  },
 
+};
 
 </script>
 
 </script>
 
 
 
 <style lang="scss" scoped>
 
 <style lang="scss" scoped>
 
+.stat /deep/ .el-card {
 
+  width: 1612px;
 
+  height: 950px;
 
+  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
 
+  border-radius: 8px;
 
+  .clearfix {
 
+    height: 96px;
 
+    width: 100%;
 
+    border-bottom: 1px solid rgba(204, 204, 204, 1);
 
+    box-sizing: border-box;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    .stat-title {
 
+      width: 96px;
 
+      height: 36px;
 
+      color: rgba(0, 0, 0, 1);
 
+      font-size: 24px;
 
+      font-weight: 500;
 
+      margin-left: 33px;
 
+    }
 
+  }
 
+  .stat-body {
 
+    padding: 30px 0 0 30px;
 
+    div {
 
+      height: 40px;
 
+      margin-bottom: 28px;
 
+      .input-new-tag {
 
+        margin: 0 10px;
 
+        width: 90px;
 
+      }
 
+      .button-new-tag {
 
+        margin: 0 10px;
 
+        width: 90px;
 
+        height: 32px;
 
+        vertical-align: middle;
 
+      }
 
+    }
 
+  }
 
+}
 
+.box-card {
 
+  /deep/ .el-card__header {
 
+    padding: 0;
 
+  }
 
+  /deep/ .el-card__body {
 
+    padding: 0;
 
+  }
 
+}
 
 </style>
 
 </style>