| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .section-title { |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | margin: 18px 0 8px 0; |
| | | color: #fff; |
| | | background: #007aff; |
| | | padding: 8px 18px; |
| | | border-radius: 8px 8px 0 0; |
| | | display: inline-block; |
| | | } |
| | | .section-title { |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | margin: 18px 0 8px 0; |
| | | color: #fff; |
| | | background: #007aff; |
| | | padding: 8px 18px; |
| | | border-radius: 8px 8px 0 0; |
| | | display: inline-block; |
| | | } |
| | | |
| | | .history-title { |
| | | background: #555; |
| | | } |
| | | .history-title { |
| | | background: #555; |
| | | } |
| | | |
| | | .highlight-row { |
| | | background: #ffe9b3 !important; |
| | | font-weight: bold; |
| | | } |
| | | .highlight-row { |
| | | background: #ffe9b3 !important; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .report-table .summary-row { |
| | | background: #f0f8ff; |
| | | font-weight: 600; |
| | | } |
| | | .report-table .summary-row { |
| | | background: #f0f8ff; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .report-table .no-data { |
| | | text-align: center; |
| | | color: #777; |
| | | font-size: 14px; |
| | | } |
| | | .report-table .no-data { |
| | | text-align: center; |
| | | color: #777; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .report-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-bottom: 8px; |
| | | } |
| | | .report-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .header-buttons { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | .header-buttons { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .refresh-btn-header { |
| | | background: #00A2E9; |
| | | color: #fff; |
| | | border: none; |
| | | font-size: 16px; |
| | | border-radius: 8px; |
| | | padding: 8px 20px; |
| | | transition: background 0.15s; |
| | | } |
| | | .refresh-btn-header { |
| | | background: #00A2E9; |
| | | color: #fff; |
| | | border: none; |
| | | font-size: 16px; |
| | | border-radius: 8px; |
| | | padding: 8px 20px; |
| | | transition: background 0.15s; |
| | | } |
| | | |
| | | .refresh-btn-header:hover { |
| | | background: #0086c0; |
| | | } |
| | | .refresh-btn-header:hover { |
| | | background: #0086c0; |
| | | } |
| | | |
| | | .reset-btn-header { |
| | | background: #ff6b6b; |
| | | color: #fff; |
| | | border: none; |
| | | font-size: 14px; |
| | | border-radius: 8px; |
| | | padding: 8px 16px; |
| | | transition: background 0.15s; |
| | | } |
| | | .reset-btn-header { |
| | | background: #ff6b6b; |
| | | color: #fff; |
| | | border: none; |
| | | font-size: 14px; |
| | | border-radius: 8px; |
| | | padding: 8px 16px; |
| | | transition: background 0.15s; |
| | | } |
| | | |
| | | .reset-btn-header:hover { |
| | | background: #e94d4d; |
| | | } |
| | | .reset-btn-header:hover { |
| | | background: #e94d4d; |
| | | } |
| | | |
| | | .page { |
| | | padding: 1.2vh 2vw; |
| | | display: flex; |
| | | flex-direction: column; |
| | | box-sizing: border-box; |
| | | } |
| | | .page { |
| | | padding: 1.2vh 2vw; |
| | | display: flex; |
| | | flex-direction: column; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .wide-layout { |
| | | max-width: none; |
| | | width: 100%; |
| | | } |
| | | |
| | | .page.has-overlay .status-section > :not(.overlay) { |
| | | pointer-events: none; |
| | | } |
| | | .page.has-overlay .status-section > :not(.overlay) { |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .page.has-overlay .status-section > .overlay { |
| | | pointer-events: auto; |
| | | } |
| | | .page.has-overlay .status-section > .overlay { |
| | | pointer-events: auto; |
| | | } |
| | | |
| | | .report-table-wrapper { |
| | | width: 100%; |
| | |
| | | |
| | | .table-scroll { |
| | | width: 100%; |
| | | overflow-x: unset; /* 或 auto,如果有特殊情况可用unset */ |
| | | overflow-x: scroll !important; |
| | | min-height: 40px; |
| | | } |
| | | |
| | | .report-title { |
| | | font-size: 32px; |
| | | font-weight: 600; |
| | | text-align: center; |
| | | margin: 0; |
| | | } |
| | | .report-title { |
| | | font-size: 32px; |
| | | font-weight: 600; |
| | | text-align: center; |
| | | margin: 0; |
| | | } |
| | | |
| | | /* 2. 区块标题 */ |
| | | .section-title, .history-title { |
| | |
| | | .current-user-section, |
| | | .defective-section, |
| | | .submit-section { |
| | | font-size: 22px; |
| | | font-size: 30px; |
| | | } |
| | | |
| | | /* 5. 输入框字体 */ |
| | |
| | | .report-table { |
| | | width: 100%; |
| | | min-width: 1800px; |
| | | /*min-width: unset;*/ /* 取消最小宽度限制 */ |
| | | border-collapse: collapse; |
| | | background: #fff; |
| | | } |
| | | |
| | | .report-table th, .report-table td { |
| | | border: 1px solid #555; |
| | | padding: 6px 8px; |
| | | text-align: center; |
| | | white-space: nowrap; |
| | | } |
| | | .report-table th, .report-table td { |
| | | border: 1px solid #555; |
| | | padding: 6px 8px; |
| | | text-align: center; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .status-section { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | } |
| | | .status-section { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 10px; |
| | | } |
| | | |
| | | .status-row { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | gap: 10px; |
| | | background: #f9f9f9; |
| | | padding: 10px 14px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 1px 4px rgba(0,0,0,.06); |
| | | } |
| | | .status-row { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | gap: 10px; |
| | | background: #f9f9f9; |
| | | padding: 10px 14px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 1px 4px rgba(0,0,0,.06); |
| | | } |
| | | |
| | | .status-box { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .status-box { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .result-box { |
| | | background: #f0f8ff; |
| | | padding: 4px 12px; |
| | | border-radius: 6px; |
| | | border-left: 5px solid #007aff; |
| | | } |
| | | .result-box { |
| | | background: #f0f8ff; |
| | | padding: 4px 12px; |
| | | border-radius: 6px; |
| | | border-left: 5px solid #007aff; |
| | | } |
| | | |
| | | input.highlight { |
| | | width: 9vw; |
| | | min-width: 110px; |
| | | font-weight: 600; |
| | | border: none; |
| | | background: #fff; |
| | | text-align: center; |
| | | font-size: 18px; |
| | | padding: 6px 0; |
| | | border-radius: 6px; |
| | | box-shadow: inset 0 1px 3px rgba(0,0,0,.12); |
| | | } |
| | | input.highlight { |
| | | width: 9vw; |
| | | min-width: 110px; |
| | | font-weight: 600; |
| | | border: none; |
| | | background: #fff; |
| | | text-align: center; |
| | | font-size: 18px; |
| | | padding: 6px 0; |
| | | border-radius: 6px; |
| | | box-shadow: inset 0 1px 3px rgba(0,0,0,.12); |
| | | } |
| | | |
| | | .operator-box { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 28px; |
| | | font-weight: bold; |
| | | color: #007aff; |
| | | margin: 0 6px; |
| | | } |
| | | .operator-box { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 28px; |
| | | font-weight: bold; |
| | | color: #007aff; |
| | | margin: 0 6px; |
| | | } |
| | | |
| | | .btn-group { |
| | | margin-left: auto; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | .btn-group { |
| | | margin-left: auto; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .refresh-btn-inline, .reset-btn-inline { |
| | | transition: .15s; |
| | | } |
| | | .refresh-btn-inline, .reset-btn-inline { |
| | | transition: .15s; |
| | | } |
| | | |
| | | .refresh-btn-inline { |
| | | background: #00A2E9; |
| | | color: #fff; |
| | | border: none; |
| | | font-size: 18px; |
| | | border-radius: 10px; |
| | | padding: 8px 30px; |
| | | } |
| | | .refresh-btn-inline { |
| | | background: #00A2E9; |
| | | color: #fff; |
| | | font-size: 18px; |
| | | border-radius: 10px; |
| | | padding: 8px 30px; |
| | | border: none; |
| | | } |
| | | |
| | | .refresh-btn-inline:hover { |
| | | background: #0086c0; |
| | | } |
| | | .refresh-btn-inline:hover { |
| | | background: #0086c0; |
| | | } |
| | | |
| | | .reset-btn-inline { |
| | | background: #ff6b6b; |
| | | color: #fff; |
| | | border: none; |
| | | font-size: 16px; |
| | | border-radius: 10px; |
| | | padding: 8px 18px; |
| | | } |
| | | .reset-btn-inline { |
| | | background: #ff6b6b; |
| | | color: #fff; |
| | | font-size: 16px; |
| | | border-radius: 10px; |
| | | padding: 8px 18px; |
| | | border: none; |
| | | } |
| | | |
| | | .reset-btn-inline:hover { |
| | | background: #e94d4d; |
| | | } |
| | | .reset-btn-inline:hover { |
| | | background: #e94d4d; |
| | | } |
| | | |
| | | .flex-row { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20px; |
| | | align-items: stretch; |
| | | } |
| | | .flex-row { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20px; |
| | | align-items: stretch; |
| | | } |
| | | |
| | | .flex-grow { |
| | | flex: 1 1 540px; |
| | | } |
| | | .flex-grow { |
| | | flex: 1 1 540px; |
| | | } |
| | | |
| | | .gap-lg { |
| | | gap: 30px; |
| | | } |
| | | .gap-lg { |
| | | gap: 30px; |
| | | } |
| | | |
| | | .defective-section { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 14px; |
| | | font-size: 18px; |
| | | } |
| | | .defective-section { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 14px; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .submit-section { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .submit-section { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .inp { |
| | | padding: 8px; |
| | | font-size: 16px; |
| | | border: 1px solid #808080; |
| | | border-radius: 8px; |
| | | box-sizing: border-box; |
| | | } |
| | | .inp { |
| | | padding: 8px; |
| | | font-size: 16px; |
| | | border: 1px solid #808080; |
| | | border-radius: 8px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .bad-input { |
| | | width: 320px; |
| | | max-width: 100%; |
| | | height: 66px; |
| | | border: 3px solid #808080; |
| | | font-size: 34px; |
| | | text-align: center; |
| | | } |
| | | .bad-input { |
| | | width: 320px; |
| | | max-width: 100%; |
| | | height: 66px; |
| | | border: 3px solid #808080; |
| | | font-size: 34px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .details-btn { |
| | | padding: 12px 34px; |
| | | background: #00a2e9; |
| | | color: #fff; |
| | | font-size: 20px; |
| | | border: none; |
| | | cursor: pointer; |
| | | border-radius: 12px; |
| | | } |
| | | .details-btn { |
| | | padding: 12px 34px; |
| | | background: #00a2e9; |
| | | color: #fff; |
| | | font-size: 20px; |
| | | border: none; |
| | | cursor: pointer; |
| | | border-radius: 12px; |
| | | } |
| | | |
| | | .details-btn:hover { |
| | | background: #008ac2; |
| | | } |
| | | .details-btn:hover { |
| | | background: #008ac2; |
| | | } |
| | | |
| | | .current-user-section { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 18px; |
| | | border: 1.5px solid #f00; |
| | | border-radius: 10px; |
| | | padding: 14px 22px; |
| | | background: #fff; |
| | | gap: 14px; |
| | | flex: 0 0 auto; |
| | | } |
| | | .current-user-section { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 26px; |
| | | border: 1.5px solid #f00; |
| | | border-radius: 10px; |
| | | padding: 14px 22px; |
| | | background: #fff; |
| | | gap: 14px; |
| | | flex: 0 0 auto; |
| | | } |
| | | |
| | | .current-user-name { |
| | | font-weight: bold; |
| | | font-size: 22px; |
| | | } |
| | | .current-user-name { |
| | | font-weight: bold; |
| | | font-size: 22px; |
| | | } |
| | | |
| | | .select-user-btn { |
| | | padding: 6px 22px; |
| | | background: #eee; |
| | | border: 1px solid #aaa; |
| | | border-radius: 8px; |
| | | font-size: 16px; |
| | | } |
| | | .select-user-btn { |
| | | padding: 6px 22px; |
| | | background: #eee; |
| | | border: 1px solid #aaa; |
| | | border-radius: 8px; |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .select-user-btn:hover { |
| | | background: #ddd; |
| | | } |
| | | .select-user-btn:hover { |
| | | background: #ddd; |
| | | } |
| | | |
| | | .overlay { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0,0,0,.45); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 1000; |
| | | } |
| | | .overlay { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0,0,0,.45); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .popup { |
| | | background: #fff; |
| | | padding: 2vh; |
| | | border: 1px solid #ccc; |
| | | box-shadow: 0 0 14px rgba(0,0,0,.12); |
| | | width: 72vw; |
| | | max-width: 1400px; |
| | | height: 70vh; |
| | | font-size: 1.4vw; |
| | | max-height: 80vh; |
| | | overflow-y: auto; |
| | | border-radius: 12px; |
| | | z-index: 1001; |
| | | } |
| | | .popup { |
| | | background: #fff; |
| | | padding: 2vh; |
| | | border: 1px solid #ccc; |
| | | box-shadow: 0 0 14px rgba(0,0,0,.12); |
| | | width: 72vw; |
| | | max-width: 1400px; |
| | | height: 70vh; |
| | | font-size: 1.4vw; |
| | | max-height: 80vh; |
| | | overflow-y: auto; |
| | | border-radius: 12px; |
| | | z-index: 1001; |
| | | } |
| | | |
| | | .user-select-popup { |
| | | width: 860px; |
| | | max-width: 80vw; |
| | | height: auto; |
| | | min-height: 480px; |
| | | padding: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | /* 选人弹窗更宽,名字更大,关闭按钮更小 */ |
| | | .user-select-popup { |
| | | width: 1600px; |
| | | max-width: 99vw; |
| | | min-width: 1000px; |
| | | height: auto; |
| | | min-height: 520px; |
| | | padding: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | font-size: 32px; |
| | | } |
| | | |
| | | .user-search-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | padding: 18px 32px 0 32px; |
| | | background: #fff; |
| | | flex-wrap: wrap; |
| | | } |
| | | .user-search-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 18px; |
| | | padding: 24px 64px 0 64px; |
| | | background: #fff; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .user-search-input { |
| | | flex: 1 1 260px; |
| | | padding: 10px 14px; |
| | | font-size: 16px; |
| | | border: 1px solid #bbb; |
| | | border-radius: 8px; |
| | | outline: none; |
| | | } |
| | | .user-search-input { |
| | | flex: 1 1 260px; |
| | | padding: 16px 20px; |
| | | font-size: 28px; |
| | | border: 1px solid #bbb; |
| | | border-radius: 8px; |
| | | outline: none; |
| | | height: 54px; |
| | | } |
| | | |
| | | .user-search-input:focus { |
| | | border-color: #007aff; |
| | | box-shadow: 0 0 0 2px rgba(0,122,255,.15); |
| | | } |
| | | .user-search-input:focus { |
| | | border-color: #007aff; |
| | | box-shadow: 0 0 0 2px rgba(0,122,255,.15); |
| | | } |
| | | |
| | | .user-search-clear { |
| | | padding: 10px 18px; |
| | | background: #ff9f43; |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 8px; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | } |
| | | .user-search-clear { |
| | | padding: 12px 28px; |
| | | background: #ff9f43; |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 8px; |
| | | font-size: 24px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .user-search-clear:hover { |
| | | background: #ff8920; |
| | | } |
| | | .user-search-clear:hover { |
| | | background: #ff8920; |
| | | } |
| | | |
| | | .user-search-info { |
| | | font-size: 14px; |
| | | color: #555; |
| | | } |
| | | .user-search-info { |
| | | font-size: 22px; |
| | | color: #555; |
| | | } |
| | | |
| | | .user-list-scroll { |
| | | flex: 1 1 auto; |
| | | overflow-y: auto; |
| | | padding: 24px 32px 0 32px; |
| | | } |
| | | .user-list-scroll { |
| | | flex: 1 1 auto; |
| | | overflow-y: auto; |
| | | padding: 32px 64px 0 64px; |
| | | } |
| | | |
| | | .user-list-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); |
| | | gap: 12px 12px; |
| | | } |
| | | .user-list-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); |
| | | gap: 22px 22px; |
| | | } |
| | | |
| | | .user-list-btn { |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | align-items: center; |
| | | gap: 4px; |
| | | padding: 10px 8px; |
| | | height: 75px; |
| | | font-size: 14px; |
| | | background: #00a2e9; |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | box-sizing: border-box; |
| | | word-break: break-word; |
| | | } |
| | | .user-list-btn { |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | align-items: center; |
| | | gap: 2px; /* 原8px,减小行间距 */ |
| | | padding: 10px 10px; /* 适当减小上下内边距 */ |
| | | height: 100px; /* 可适当减小高度 */ |
| | | font-size: 30px; |
| | | background: #00a2e9; |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | box-sizing: border-box; |
| | | word-break: break-word; |
| | | } |
| | | |
| | | .user-list-btn .user-code { |
| | | font-weight: 600; |
| | | font-size: 14px; |
| | | } |
| | | .user-list-btn .user-code { |
| | | font-weight: 700; |
| | | font-size: 36px; |
| | | line-height: 1.1; /* 紧凑一点 */ |
| | | } |
| | | |
| | | .user-list-btn .user-name { |
| | | font-size: 13px; |
| | | } |
| | | .user-list-btn .user-name { |
| | | font-size: 32px; |
| | | line-height: 1.1; /* 紧凑一点 */ |
| | | } |
| | | |
| | | .user-list-btn.selected { |
| | | background: #0072c9; |
| | | box-shadow: 0 0 0 3px rgba(255,255,255,.6) inset; |
| | | } |
| | | .user-list-btn.selected { |
| | | background: #0072c9; |
| | | box-shadow: 0 0 0 3px rgba(255,255,255,.6) inset; |
| | | } |
| | | |
| | | .user-list-btn:hover { |
| | | background: #008ed0; |
| | | } |
| | | .user-list-btn:hover { |
| | | background: #008ed0; |
| | | } |
| | | |
| | | .no-user-result { |
| | | padding: 40px 0; |
| | | text-align: center; |
| | | font-size: 18px; |
| | | color: #666; |
| | | } |
| | | .no-user-result { |
| | | padding: 40px 0; |
| | | text-align: center; |
| | | font-size: 28px; |
| | | color: #666; |
| | | } |
| | | |
| | | .user-popup-footer { |
| | | flex-shrink: 0; |
| | | padding: 22px 32px 32px 32px; |
| | | background: #fff; |
| | | text-align: center; |
| | | } |
| | | .user-popup-footer { |
| | | flex-shrink: 0; |
| | | padding: 24px 64px 32px 64px; |
| | | background: #fff; |
| | | text-align: center; |
| | | } |
| | | |
| | | .clean-btn { |
| | | width: 48%; |
| | | padding: 1.6vh; |
| | | color: #fff; |
| | | font-size: 1.4vw; |
| | | border: none; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | border-radius: .6vw; |
| | | background: #007aff; |
| | | } |
| | | .clean-btn { |
| | | width: 24%; |
| | | padding: 10px 0; |
| | | color: #fff; |
| | | font-size: 20px; |
| | | border: none; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | border-radius: 0.6vw; |
| | | background: #007aff; |
| | | } |
| | | |
| | | .clean-btn.wide-btn { |
| | | width: 60%; |
| | | font-size: 20px; |
| | | } |
| | | .clean-btn.wide-btn { |
| | | width: 30%; |
| | | font-size: 22px; |
| | | padding: 12px 0; |
| | | } |
| | | |
| | | .clean-btn:hover { |
| | | background: #0062c9; |
| | | } |
| | | .clean-btn:hover { |
| | | background: #0062c9; |
| | | } |
| | | |
| | | .reason-section { |
| | | margin: 14px 0 18px; |
| | | } |
| | | .reason-section { |
| | | margin: 14px 0 18px; |
| | | } |
| | | |
| | | .reason-buttons { |
| | | display: grid; |
| | | grid-template-columns: repeat(5,1fr); |
| | | gap: 12px; |
| | | } |
| | | .reason-buttons { |
| | | display: grid; |
| | | grid-template-columns: repeat(5,1fr); |
| | | gap: 12px; |
| | | } |
| | | |
| | | .reason-btn { |
| | | padding: 10px 6px; |
| | | background: #808080; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | border: none; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | } |
| | | .reason-btn { |
| | | padding: 10px 6px; |
| | | background: #808080; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | border: none; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .reason-btn.selected { |
| | | background: #FFD700; |
| | | color: #000; |
| | | } |
| | | .reason-btn.selected { |
| | | background: #FFD700; |
| | | color: #000; |
| | | } |
| | | |
| | | .bottom-section { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-top: 16px; |
| | | gap: 16px; |
| | | } |
| | | .bottom-section { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-top: 16px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .save-btn, .cancel-btn { |
| | | flex: 1; |
| | | padding: 16px 0; |
| | | background: #00A2E9; |
| | | color: #fff; |
| | | font-size: 20px; |
| | | border: none; |
| | | border-radius: 10px; |
| | | } |
| | | .save-btn, .cancel-btn { |
| | | flex: 1; |
| | | padding: 16px 0; |
| | | background: #00A2E9; |
| | | color: #fff; |
| | | font-size: 20px; |
| | | border: none; |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | .save-btn:hover, .cancel-btn:hover { |
| | | background: #0086c0; |
| | | } |
| | | .save-btn:hover, .cancel-btn:hover { |
| | | background: #0086c0; |
| | | } |
| | | |
| | | .table1 { |
| | | width: 100%; |
| | | border-spacing: 3px; |
| | | } |
| | | .table1 { |
| | | width: 100%; |
| | | border-spacing: 3px; |
| | | } |
| | | |
| | | @media (max-width:1400px) { |
| | | input.highlight { |
| | | font-size: 16px; |
| | | } |
| | | @media (max-width:1400px) { |
| | | input.highlight { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .user-list-btn { |
| | | height: 70px; |
| | | font-size: 13px; |
| | | } |
| | | .user-list-btn { |
| | | height: 70px; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .user-list-btn .user-code { |
| | | font-size: 13px; |
| | | } |
| | | .user-list-btn .user-code { |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .user-list-btn .user-name { |
| | | font-size: 12px; |
| | | } |
| | | .user-list-btn .user-name { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .reason-btn { |
| | | font-size: 12px; |
| | | } |
| | | .reason-btn { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .refresh-btn-header { |
| | | font-size: 14px; |
| | | padding: 6px 16px; |
| | | } |
| | | .refresh-btn-header { |
| | | font-size: 14px; |
| | | padding: 6px 16px; |
| | | } |
| | | |
| | | .reset-btn-header { |
| | | font-size: 12px; |
| | | padding: 6px 12px; |
| | | } |
| | | } |
| | | .reset-btn-header { |
| | | font-size: 12px; |
| | | padding: 6px 12px; |
| | | } |
| | | } |
| | | </style> |