酒店管理系统（Vue + Element UI ）

登录页面：

部分代码：

<template>
  <div class="main">
    <!-- 背景画布 -->
    <canvas id="particle-canvas" width="1245" height="902"></canvas>
    <!-- 页面内容 -->
    <div class="content">
      <div class="login">
        <div class="title">怡多宝酒店管理系统</div>
        <el-form
          size="mini"
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="40px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="loginId">
            <el-input v-model="ruleForm.loginId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="loginPwd" >
            <!-- 给密码文本框添加一个键盘按下事件(该事件只对Enter键生效) -->
            <el-input
              type="password"
              v-model="ruleForm.loginPwd"
              autocomplete="off"
              @keydown.native.enter="loginPwdEnter"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="ruleForm.checkMe">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

 首页：

 部分代码：

<template>
  <div class="main">
    <!-- 左侧导航 -->
    <div class="left" :style="{backgroundColor:themeColor,width:(!isCollapse?'200px':'65px')}">
      <div class="logo">怡多宝</div>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :background-color="themeColor"
        text-color="#fff"
        active-text-color="#ffd04b"
        :collapse="isCollapse"
        style="border:none"
        router
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>账号管理</span>
          </template>
          <el-menu-item v-if="$store.state.admin.admin.roleId===1" index="/layout/role">角色管理</el-menu-item>
          <el-menu-item index="/layout/admin">账号管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-office-building"></i>
            <span>客房管理</span>
          </template>
          <el-menu-item v-if="$store.state.admin.admin.roleId===1" index="/layout/roomType">类型管理</el-menu-item>
          <el-menu-item index="/layout/room">客房管理</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/layout/guest">客户管理</el-menu-item>
        </el-submenu>
        <el-submenu index="4" v-if="$store.state.admin.admin.roleId===1">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>权限管理</span>
          </template>
          <el-menu-item index="/layout/permission">权限管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <!-- end左侧导航 -->
    <!-- 右侧内容 -->
    <div class="right">
      <!-- 顶部导航 -->
      <div class="nav" :style="{backgroundColor:themeColor}">
        <div class="icon" @click="isCollapse=!isCollapse">
            <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
        </div>
        <!-- router属性，设置导航栏，开始路由模式 -->
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          :background-color="themeColor"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="min-width:650px"
          router
        >
          <el-menu-item index="/layout"><i class="el-icon-s-home"></i>Home</el-menu-item>
          <el-menu-item index="/layout/message"><i class="el-icon-s-comment"></i>Message</el-menu-item>
          <el-menu-item index="/layout/email"><i class="el-icon-message"></i>Email</el-menu-item>
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-help"></i>Theme</template>
            <el-menu-item @click="changeTheme(item.value)" v-for="(item,index) in theme" :key="index">{{item.name}}</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-user-solid"></i>{{admin.name}}</template>
            <el-menu-item index="/layout/mine">个人中心</el-menu-item>
            <el-menu-item index="/layout/resetPwd">修改密码</el-menu-item>
            <el-menu-item @click="exit">退出系统</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- end顶部导航 -->
      <!-- 内容区域 -->
      <div class="content">
        <!-- 路由视图 -->
        <router-view></router-view>
      </div>
      <!-- end内容区域 -->
    </div>
    <!-- end右侧内容 -->
  </div>
</template>

角色管理：

 账号管理：

客房类型管理： 

客房管理： 

客户管理：