/* 自定义样式 */ body { background-color: #f2f2f2; font-family: "Microsoft YaHei", sans-serif; margin: 0; padding: 0; padding-top: 60px; /* 为固定的顶部导航栏留出空间 */ min-height: 100vh; display: flex; flex-direction: column; } .footer { background-color: #ffffff; padding: 16px 0; border-top: 1px solid #e0e0e0; color: #666666; font-size: 14px; margin-top: 20px; text-align: center; } /* 参数配置页面样式 */ .content-container { flex: 1; padding: 20px 0; } .content-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .back-button-container { margin-bottom: 24px; display: flex; justify-content: flex-end; } .back-button { display: inline-flex; align-items: center; color: #009688; text-decoration: none; transition: color 0.3s ease; } .back-button:hover { color: #007d6e; } .form-card { max-width: 500px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 32px; } .form-header { text-align: center; margin-bottom: 24px; } .icon-container { width: 64px; height: 64px; background-color: #e6f7f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px auto; } .form-title { font-size: 24px; font-weight: bold; color: #333333; margin: 0 0 8px 0; } .form-subtitle { font-size: 14px; color: #666666; margin: 0; } /* 消息提示样式 */ .error-message, .success-message, .info-message { margin-bottom: 16px; padding: 12px 16px; border-radius: 4px; display: flex; align-items: flex-start; } .error-message { background-color: #fff1f0; border: 1px solid #ffccc7; color: #cf1322; } .success-message { background-color: #f6ffed; border: 1px solid #b7eb8f; color: #389e0d; } .info-message { background-color: #e6f7ff; border: 1px solid #91d5ff; color: #0958d9; display: flex; align-items: center; } /* 表单样式 */ .form-content { space-y: 16px; } .form-group { margin-bottom: 16px; } .form-label { display: block; font-size: 14px; font-weight: 500; color: #333333; margin-bottom: 8px; } .required-mark { color: #ff4d4f; } .form-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; transition: all 0.3s ease; } /* 自定义下拉选择器样式,确保下拉箭头显示 */ .custom-select { height: 38px !important; padding: 0 10px !important; padding-right: 30px !important; border: 1px solid #e6e6e6 !important; border-radius: 2px !important; background-color: #fff !important; font-size: 14px !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; position: relative !important; } /* 使用绝对定位的div作为下拉箭头容器 */ .custom-select-wrapper { position: relative !important; display: inline-block !important; } /* 为部门选择器设置特定宽度 */ #filterDepartment { width: 150px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 1h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 10px 6px !important; } /* 为状态选择器设置特定宽度 */ #filterStatus { width: 120px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 1h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 10px 6px !important; } .form-input:focus { border-color: #009688; box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2); outline: none; } .form-actions { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; } .btn-primary, .btn-secondary { flex: 1; height: 40px; padding: 0 16px; border: none; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .btn-primary { background-color: #009688; color: #ffffff; } .btn-primary:hover { background-color: #007d6e; } .btn-secondary { background-color: #ffffff; border: 1px solid #d9d9d9; color: #666666; } .btn-secondary:hover { border-color: #009688; color: #009688; } /* 顶部导航栏样式 */ .header-navbar { background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 60px; display: flex; align-items: center; } .header-container { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } .header-logo { display: flex; align-items: center; } .header-icon { font-size: 24px; color: #009688; margin-right: 10px; } .header-title { font-size: 20px; font-weight: bold; color: #333333; margin: 0; } .header-user { display: flex; align-items: center; } /* 用户下拉菜单样式 */ .user-dropdown-container { position: relative; } .user-dropdown-toggle { display: flex; align-items: center; cursor: pointer; color: #666666; transition: color 0.3s ease; } .user-dropdown-toggle:hover { color: #009688; } .user-welcome { color: #666666; } .dropdown-icon { margin-left: 8px; font-size: 12px; transition: transform 0.3s ease; } .dropdown-icon.rotate { transform: rotate(180deg); } .user-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; width: 192px; background-color: #ffffff; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 2000; } .user-dropdown.show { opacity: 1; visibility: visible; } .dropdown-content { padding: 4px 0; } .dropdown-item { display: block; padding: 8px 16px; font-size: 14px; color: #333333; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .dropdown-item:hover { background-color: #009688; color: #ffffff; } .dropdown-icon-item { margin-right: 8px; } .dropdown-divider { height: 1px; background-color: #e0e0e0; margin: 4px 0; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .card { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; margin-bottom: 20px; } .header { background-color: #009688; color: #fff; padding: 15px 0; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .header h1 { margin: 0; font-size: 24px; text-align: center; } /* 主样式中的footer定义已包含所有必要样式 */ /* 登录和注册页面样式 */ .login-container, .register-container { max-width: 400px; margin: 50px auto; } .login-title, .register-title { text-align: center; margin-bottom: 20px; color: #009688; } /* 表单样式优化 */ .layui-form-item { margin-bottom: 20px; } .layui-input { height: 40px; line-height: 40px; border-radius: 4px; } .layui-btn { height: 40px; line-height: 40px; border-radius: 4px; } .layui-btn-primary { border-color: #009688; color: #009688; } .layui-btn-primary:hover { border-color: #009688; color: #fff; background-color: #009688; } /* 表格样式优化 */ .layui-table { border-radius: 4px; overflow: hidden; } .layui-table th { background-color: #f8f8f8; font-weight: bold; } /* 导航菜单样式 */ .nav-menu { background-color: #393D49; border-radius: 4px; overflow: hidden; margin-bottom: 20px; } .nav-menu .layui-nav-item { line-height: 50px; } .nav-menu .layui-nav-item a { color: #fff; padding: 0 20px; } .nav-menu .layui-nav-item.layui-this a { background-color: #009688; } /* 查询表单样式 */ .search-form { padding: 20px; background-color: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin-bottom: 20px; } /* 响应式调整 */ @media screen and (max-width: 768px) { .container { padding: 10px; } .login-container, .register-container { margin: 20px auto; } }