| | |
| | | background: #fff2df; |
| | | } |
| | | |
| | | &.unactivated { |
| | | color: #708195; |
| | | background: #eef2f6; |
| | | } |
| | | |
| | | &.danger { |
| | | color: var(--visitor-danger); |
| | | background: #fff3f3; |
| | |
| | | border-radius: 18px; |
| | | background: linear-gradient(180deg, rgba(248, 252, 255, 0.96), rgba(239, 247, 255, 0.62)); |
| | | box-shadow: inset 0 0 0 1px rgba(222, 233, 250, 0.72); |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .chart-legend { |
| | |
| | | .quick-grid { |
| | | display: grid; |
| | | grid-template-columns: repeat(2, minmax(0, 1fr)); |
| | | gap: 12px; |
| | | gap: 14px 16px; |
| | | padding: 18px 0 0; |
| | | } |
| | | |
| | | .quick-entry { |
| | | height: 52px; |
| | | height: 64px; |
| | | display: grid; |
| | | grid-template-columns: 38px 1fr; |
| | | grid-template-columns: 42px 1fr; |
| | | align-items: center; |
| | | gap: 12px; |
| | | padding: 0 14px; |
| | | gap: 18px; |
| | | padding: 0 20px; |
| | | border: 1px solid #dbe8ff; |
| | | border-radius: 12px; |
| | | color: #19304f; |
| | | background: #fff; |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | font-weight: 800; |
| | | cursor: pointer; |
| | | transition: transform 0.16s ease, box-shadow 0.16s ease; |
| | | outline: none; |
| | | transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; |
| | | } |
| | | |
| | | .quick-entry:hover { |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 10px 24px rgba(47, 103, 255, 0.12); |
| | | border-color: #8bb4ff; |
| | | color: #3974e8; |
| | | background: linear-gradient(90deg, rgba(111, 163, 255, 0.12), rgba(111, 163, 255, 0.03)); |
| | | box-shadow: 0 10px 24px rgba(47, 103, 255, 0.14), inset 0 0 0 1px rgba(111, 163, 255, 0.08); |
| | | } |
| | | |
| | | .quick-entry:hover .quick-icon { |
| | | background: linear-gradient(145deg, #8db8ff, #6497f4); |
| | | box-shadow: 0 8px 18px rgba(79, 137, 241, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.36); |
| | | } |
| | | |
| | | .quick-entry.active, |
| | | .quick-entry:active, |
| | | .quick-entry:focus-visible { |
| | | border-color: #a86cff; |
| | | color: #7146e8; |
| | | background: linear-gradient(90deg, rgba(168, 108, 255, 0.12), rgba(168, 108, 255, 0.03)); |
| | | box-shadow: 0 8px 20px rgba(137, 83, 255, 0.14), inset 0 0 0 1px rgba(168, 108, 255, 0.12); |
| | | } |
| | | |
| | | .quick-entry.active .quick-icon, |
| | | .quick-entry:active .quick-icon, |
| | | .quick-entry:focus-visible .quick-icon { |
| | | background: linear-gradient(135deg, #8f5bff, #bd8cff); |
| | | box-shadow: 0 8px 18px rgba(143, 91, 255, 0.28); |
| | | } |
| | | |
| | | .quick-icon { |
| | | width: 34px; |
| | | height: 34px; |
| | | position: relative; |
| | | width: 42px; |
| | | height: 42px; |
| | | display: grid; |
| | | place-items: center; |
| | | border-radius: 12px; |
| | | border-radius: 13px; |
| | | color: #fff; |
| | | background: var(--entry-color); |
| | | box-shadow: 0 8px 18px rgba(47, 103, 255, 0.18); |
| | | background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)), var(--entry-color); |
| | | box-shadow: 0 8px 18px rgba(82, 112, 180, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.34); |
| | | |
| | | i { |
| | | font-size: 19px; |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | |
| | | @media (max-width: 1280px) { |
| | |
| | | grid-template-columns: 190px 1fr; |
| | | border: 1px solid rgba(221, 232, 247, 0.92); |
| | | border-radius: 14px; |
| | | background: var(--visitor-card); |
| | | background: #fff; |
| | | box-shadow: 0 16px 40px rgba(34, 69, 126, 0.08); |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .config-nav { |
| | | .config-card > .config-nav { |
| | | padding: 18px 12px; |
| | | border-right: 1px solid #eef3f8; |
| | | background-color: #fff !important; |
| | | |
| | | h1 { |
| | | margin: 0 0 28px; |
| | |
| | | font-size: 13px; |
| | | text-align: left; |
| | | cursor: pointer; |
| | | outline: 0; |
| | | |
| | | &.active { |
| | | color: #1781ff; |
| | | background: #e6f7ff; |
| | | font-weight: 800; |
| | | box-shadow: none; |
| | | } |
| | | } |
| | | |
| | | .nav-folder { |
| | | width: 13px; |
| | | height: 10px; |
| | | display: inline-block; |
| | | border: 1.5px solid currentColor; |
| | | border-top: 0; |
| | | position: relative; |
| | | } |
| | | |
| | | .nav-folder::before { |
| | | content: ""; |
| | | position: absolute; |
| | | left: 0; |
| | | top: -5px; |
| | | width: 7px; |
| | | height: 5px; |
| | | border: 1.5px solid currentColor; |
| | | border-bottom: 0; |
| | | .config-nav-icon { |
| | | width: 16px; |
| | | height: 16px; |
| | | flex: 0 0 16px; |
| | | color: currentColor; |
| | | fill: none !important; |
| | | stroke: currentColor; |
| | | font-size: 15px; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .config-workspace { |
| | |
| | | margin-bottom: 28px; |
| | | |
| | | h2 { |
| | | position: relative; |
| | | min-height: 22px; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | margin: 0 0 14px; |
| | | padding-left: 12px; |
| | | color: #10213b; |
| | | font-size: 15px; |
| | | line-height: 22px; |
| | | font-weight: 800; |
| | | } |
| | | |
| | | h2::before { |
| | | content: ""; |
| | | position: absolute; |
| | | left: 0; |
| | | top: 1px; |
| | | width: 4px; |
| | | height: 22px; |
| | | flex: 0 0 4px; |
| | | align-self: center; |
| | | border-radius: 2px; |
| | | background: #2e8064; |
| | | } |
| | | |
| | |
| | | border-bottom: 1px solid #edf2f7; |
| | | color: #10213b; |
| | | font-size: 14px; |
| | | line-height: 20px; |
| | | font-weight: 800; |
| | | |
| | | input { |
| | |
| | | |
| | | .row-label { |
| | | min-width: 140px; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | align-self: stretch; |
| | | } |
| | | } |
| | | |
| | |
| | | width: 18px; |
| | | height: 18px; |
| | | flex: 0 0 18px; |
| | | border: 2px solid #3b8267; |
| | | border-radius: 2px; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #4c9378; |
| | | fill: none !important; |
| | | stroke: currentColor; |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | vertical-align: middle; |
| | | } |
| | | |
| | | .system-entry .row-icon { |
| | | width: 16px; |
| | | height: 16px; |
| | | flex-basis: 16px; |
| | | } |
| | | |
| | | .appointment-time-row { |
| | | height: 48px; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | border-bottom: 1px solid #edf2f7; |
| | | color: #10213b; |
| | | font-size: 14px; |
| | | line-height: 20px; |
| | | font-weight: 800; |
| | | |
| | | .row-label { |
| | | min-width: 176px; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | align-self: stretch; |
| | | } |
| | | } |
| | | |
| | | .time-day { |
| | | color: #26384f; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .appointment-time-input { |
| | | width: 118px !important; |
| | | |
| | | .el-input__inner { |
| | | height: 30px; |
| | | padding: 0 28px 0 10px; |
| | | border-color: #cfd8e3; |
| | | color: #26384f; |
| | | font-size: 13px; |
| | | line-height: 30px; |
| | | } |
| | | |
| | | .el-input__prefix { |
| | | display: none; |
| | | } |
| | | |
| | | .el-input__suffix { |
| | | right: 6px; |
| | | line-height: 30px; |
| | | } |
| | | } |
| | | |
| | | .switch-control { |
| | |
| | | .print-layout { |
| | | display: grid; |
| | | grid-template-columns: minmax(420px, 1fr) 360px; |
| | | align-items: start; |
| | | gap: 44px; |
| | | } |
| | | |
| | | .print-settings .config-section h2 { |
| | | height: 20px; |
| | | min-height: 20px; |
| | | line-height: 20px; |
| | | } |
| | | |
| | | .print-settings .config-section h2::before { |
| | | align-self: center; |
| | | } |
| | | |
| | | .print-field-list { |
| | |
| | | border-radius: 6px; |
| | | color: #253855; |
| | | font-size: 13px; |
| | | cursor: pointer; |
| | | cursor: grab; |
| | | user-select: none; |
| | | |
| | | input { |
| | |
| | | height: 13px; |
| | | margin: 0; |
| | | accent-color: #2d725d; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | |
| | | .print-field-item.sortable-chosen { |
| | | .print-field-chosen { |
| | | background: #eef6ff; |
| | | box-shadow: 0 6px 16px rgba(31, 88, 160, 0.14); |
| | | cursor: grabbing; |
| | | } |
| | | |
| | | .print-field-ghost { |
| | | opacity: 0.45; |
| | | background: #f3f8ff; |
| | | } |
| | | |
| | | .print-field-drag { |
| | | width: 16px; |
| | | color: #6f86a3; |
| | | cursor: grab; |
| | | text-align: center; |
| | | touch-action: none; |
| | | } |
| | | |
| | | .print-field-drag:active { |
| | | cursor: grabbing; |
| | | } |
| | | |
| | | .sort-hint { |
| | |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .sort-hint-icon { |
| | | color: #f6b817; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .print-preview { |
| | | width: 360px; |
| | | max-width: 100%; |
| | | align-self: start; |
| | | } |
| | | |
| | | .preview-title { |
| | | height: 34px; |
| | | height: 26px; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 10px; |
| | | color: #111827; |
| | | font-size: 14px; |
| | | font-weight: 800; |
| | | |
| | | button { |
| | | width: 22px; |
| | | height: 22px; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 0; |
| | | border: 0; |
| | | color: #6f747b; |
| | | background: transparent; |
| | | font-size: 16px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | button:hover { |
| | | color: #2d725d; |
| | | } |
| | | } |
| | | |
| | | .preview-stage { |
| | | width: 100%; |
| | | min-height: 392px; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | justify-content: center; |
| | | padding: 10px 18px 24px; |
| | | background: #f0f0f0; |
| | | } |
| | | |
| | | .ticket-preview { |
| | | width: 290px; |
| | | min-height: 365px; |
| | | margin: 36px 0 0 36px; |
| | | box-sizing: border-box; |
| | | padding: 18px 34px 24px; |
| | | border: 1px solid #cfd5dd; |
| | | background: #fff; |
| | | box-shadow: 0 0 0 36px #f0f0f0; |
| | | |
| | | h3 { |
| | | margin: 0 0 18px; |
| | |
| | | } |
| | | |
| | | .logo-upload { |
| | | width: 316px; |
| | | max-width: 100%; |
| | | height: 38px; |
| | | display: flex; |
| | | display: grid; |
| | | grid-template-columns: auto minmax(0, 1fr); |
| | | align-items: center; |
| | | gap: 8px; |
| | | position: relative; |
| | | padding: 0 12px; |
| | | border: 1px solid #d9e3ef; |
| | | border-radius: 20px; |
| | |
| | | background: #f7faff; |
| | | font-size: 12px; |
| | | overflow: hidden; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .logo-upload input[type="file"] { |
| | | position: absolute; |
| | | inset: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | opacity: 0; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .logo-upload input[type="file"]:disabled { |
| | | cursor: not-allowed; |
| | | } |
| | | |
| | | .logo-upload-button, |
| | | .logo-file-name { |
| | | position: relative; |
| | | z-index: 1; |
| | | line-height: 1; |
| | | } |
| | | |
| | | .logo-upload-button { |
| | | height: 24px; |
| | | display: inline-flex; |
| | | align-items: center; |
| | | padding: 0 10px; |
| | | border: 1px solid #c8d2df; |
| | | border-radius: 2px; |
| | | color: #26384f; |
| | | background: #fff; |
| | | font-weight: 700; |
| | | } |
| | | |
| | | .logo-file-name { |
| | | min-width: 0; |
| | | overflow: hidden; |
| | | color: #6f7f92; |
| | | font-weight: 600; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .config-actions { |
| | |
| | | |
| | | .protocol-card { |
| | | min-height: calc(100vh - 118px); |
| | | position: relative; |
| | | padding: 18px 26px 82px; |
| | | border-radius: 6px; |
| | | background: #fff; |
| | |
| | | &.ordered::before { |
| | | left: 0; |
| | | top: 2px; |
| | | content: "1\A2\A3"; |
| | | content: "1.\A 2.\A 3."; |
| | | white-space: pre; |
| | | font-size: 8px; |
| | | font-family: Arial, sans-serif; |
| | | font-size: 7px; |
| | | font-weight: 700; |
| | | line-height: 8px; |
| | | } |
| | |
| | | |
| | | .protocol-editor { |
| | | min-height: 405px; |
| | | position: relative; |
| | | padding: 14px 8px; |
| | | color: #1f2d3d; |
| | | background: #fff; |
| | | font-size: 14px; |
| | | line-height: 1.8; |
| | | white-space: pre-wrap; |
| | | overflow-wrap: break-word; |
| | | outline: 0; |
| | | overflow: auto; |
| | | |
| | | &:empty::before { |
| | | &.is-empty::before { |
| | | content: attr(data-placeholder); |
| | | position: absolute; |
| | | top: 14px; |
| | | left: 8px; |
| | | color: #7c8da6; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | &.is-empty:focus::before { |
| | | display: none; |
| | | } |
| | | |
| | | p { |
| | |
| | | } |
| | | |
| | | .protocol-actions { |
| | | position: fixed; |
| | | left: 252px; |
| | | bottom: 28px; |
| | | position: absolute; |
| | | left: 26px; |
| | | bottom: 24px; |
| | | } |
| | | |
| | | .protocol-save-button { |
| | |
| | | min-width: 680px; |
| | | } |
| | | |
| | | .protocol-actions { |
| | | left: 238px; |
| | | } |
| | | } |
| | | |
| | | .version-page { |
| | |
| | | .version-form { |
| | | display: grid; |
| | | gap: 14px; |
| | | padding: 18px 48px 20px 20px; |
| | | padding: 18px 54px 20px; |
| | | } |
| | | |
| | | .version-create-dialog { |
| | | .el-dialog__header { |
| | | padding: 20px 54px 10px; |
| | | text-align: left; |
| | | } |
| | | |
| | | .el-dialog__title { |
| | | font-size: 14px; |
| | | font-weight: 700; |
| | | } |
| | | |
| | | .el-dialog__body { |
| | | padding: 0; |
| | | } |
| | | } |
| | | |
| | | .version-row { |
| | |
| | | |
| | | > span:first-child { |
| | | padding-top: 8px; |
| | | text-align: right; |
| | | font-size: 12px; |
| | | font-weight: 600; |
| | | text-align: left; |
| | | } |
| | | |
| | | &.required > span:first-child::before { |
| | |
| | | } |
| | | |
| | | .version-input-line { |
| | | display: grid; |
| | | grid-template-columns: 18px 1fr; |
| | | align-items: center; |
| | | position: relative; |
| | | |
| | | > span { |
| | | position: absolute; |
| | | z-index: 1; |
| | | left: 10px; |
| | | top: 9px; |
| | | color: #24364f; |
| | | line-height: 1; |
| | | } |
| | | |
| | | input { |
| | | padding-left: 25px; |
| | | } |
| | | } |
| | | |
| | | .version-row textarea { |
| | | height: 68px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .version-upload-field { |
| | | width: 100%; |
| | | } |
| | | |
| | | .upload-drop { |
| | | width: 242px; |
| | | width: 100%; |
| | | height: 102px; |
| | | display: grid; |
| | | place-items: center; |
| | |
| | | color: #24364f; |
| | | background: #f9fbfe; |
| | | } |
| | | |
| | | &.drag-over { |
| | | border-color: #2e73ff; |
| | | color: #2e73ff; |
| | | background: #f5f9ff; |
| | | } |
| | | } |
| | | |
| | | .upload-tip { |
| | | width: 100%; |
| | | margin: 10px 0 0; |
| | | color: #8a9ab0; |
| | | font-size: 11px; |
| | |
| | | input:checked + .switch-control::after { |
| | | transform: translateX(26px); |
| | | } |
| | | |
| | | input:checked + .switch-control { |
| | | background: #22b573; |
| | | } |
| | | } |
| | | |
| | | .area-page, |