UNPKG

iep-ui

Version:

An enterprise-class UI design language and Vue-based implementation

679 lines (678 loc) 14.9 kB
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ /* stylelint-disable no-duplicate-selectors */ /* stylelint-disable */ /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; background-color: transparent; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: none; border-radius: 4px; background-color: transparent; } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 6px; -webkit-box-shadow: none; background-color: rgba(144, 147, 153, 0.3); } /*定义最上方和最下方的按钮*/ ::-webkit-scrollbar-button { display: none; background-color: #252540; border: 1px solid #252540; } .ant-iep-page-header { margin: 0; padding: 0; color: rgba(0, 0, 0, 0.85); font-size: 14px; font-variant: tabular-nums; line-height: 1.5715; list-style: none; font-feature-settings: 'tnum'; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); width: 100%; padding: 16px 22px; box-sizing: border-box; } .ant-iep-page-header-station { display: flex; justify-content: space-between; align-items: center; } .ant-iep-page-header-station-left { display: flex; flex-direction: column; width: 15%; } .ant-iep-page-header-station-left-title { font-weight: bold; font-size: 20px; text-align: left; color: #333; white-space: nowrap; } .ant-iep-page-header-station-left-address { display: flex; justify-content: flex-start; align-items: center; margin-top: 4px; } .ant-iep-page-header-station-left-address .iep-icon { width: 18px; height: 18px; } .ant-iep-page-header-station-left-address .iep-icon svg { width: 18px; height: 18px; } .ant-iep-page-header-station-left-address-text { font-weight: 400; font-size: 14px; color: #333; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .ant-iep-page-header-station-middle { display: flex; justify-content: space-between; align-items: center; flex: 1; padding: 0 4%; } .ant-iep-page-header-station-middle-item { display: flex; flex-direction: column; } .ant-iep-page-header-station-middle-item span:first-child { font-weight: 400; font-size: 14px; letter-spacing: 0.01em; text-align: left; color: #9dabc6; } .ant-iep-page-header-station-middle-item span:last-child { font-weight: bold; font-size: 16px; } .ant-iep-page-header-station-right { width: 14%; display: flex; justify-content: space-between; align-items: center; position: relative; padding-left: 20px; } .ant-iep-page-header-station-right::before { content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 80%; background: #e5e5e5; transform: translateY(-50%); } .ant-iep-page-header-station-right-info { display: flex; justify-content: flex-start; align-items: center; gap: 0 10px; } .ant-iep-page-header-station-right-info img { width: 36px; -o-object-fit: cover; object-fit: cover; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .ant-iep-page-header-station-right-info-text { display: flex; flex-direction: column; } .ant-iep-page-header-station-right-info-text span { line-height: 1; } .ant-iep-page-header-station-right-info-text span:first-child { font-weight: 400; font-size: 14px; text-align: left; color: #333; } .ant-iep-page-header-station-right-info-text span:last-child { font-weight: bold; font-size: 16px; text-align: left; color: #333; margin-top: 6px; } .ant-iep-page-header-station-right-status span { position: relative; font-weight: 900; font-size: 16px; color: #03c98c; padding-left: 10px; } .ant-iep-page-header-station-right-status span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #03c98c; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .ant-iep-page-header-station-right-status .off { color: #9dabc6; } .ant-iep-page-header-station-right-status .off::before { background: #9dabc6; } .ant-iep-page-header-car { display: flex; justify-content: space-between; align-items: center; } .ant-iep-page-header-car-left { display: flex; flex-direction: column; width: 25%; } .ant-iep-page-header-car-left-title .car-1 { border-radius: 4px; background: linear-gradient(129.67deg, #299bff 0%, #0468e8 100%); padding: 2px; display: inline-flex; justify-content: center; align-items: center; } .ant-iep-page-header-car-left-title .car-2 { border-radius: 4px; background: transparent; padding: 6px 10px; border: 2px solid #fff; font-weight: 900; font-size: 20px; color: #fff; display: inline-flex; justify-content: center; align-items: center; } .ant-iep-page-header-car-left-info { display: flex; justify-content: flex-start; align-items: center; margin-top: 6px; gap: 0 20px; } .ant-iep-page-header-car-left-info-item { display: flex; justify-content: center; align-items: center; color: #333333; } .ant-iep-page-header-car-left-info .iep-icon { width: 18px; height: 18px; margin-right: 4px; } .ant-iep-page-header-car-left-info .iep-icon svg { width: 18px; height: 18px; } .ant-iep-page-header-car-left-info-text { font-weight: 400; font-size: 14px; color: #333; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .ant-iep-page-header-car-middle { display: flex; justify-content: flex-end; align-items: center; flex: 1; padding: 0 4%; } .ant-iep-page-header-car-middle img { width: 36px; -o-object-fit: cover; object-fit: cover; } .ant-iep-page-header-car-middle-text { display: flex; flex-direction: column; margin-left: 4px; } .ant-iep-page-header-car-middle-text span { line-height: 1; } .ant-iep-page-header-car-middle-text span:first-child { font-weight: 400; font-size: 14px; color: #333; } .ant-iep-page-header-car-middle-text span:last-child { font-weight: bold; font-size: 18px; color: #333; margin-top: 3px; } .ant-iep-page-header-car-right { width: 14%; display: flex; justify-content: space-between; align-items: center; position: relative; padding-left: 20px; } .ant-iep-page-header-car-right::before { content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 80%; background: #e5e5e5; transform: translateY(-50%); } .ant-iep-page-header-car-right-info { display: flex; justify-content: flex-start; align-items: center; gap: 0 10px; } .ant-iep-page-header-car-right-info img { width: 36px; -o-object-fit: cover; object-fit: cover; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .ant-iep-page-header-car-right-info-text { display: flex; flex-direction: column; } .ant-iep-page-header-car-right-info-text span { line-height: 1; } .ant-iep-page-header-car-right-info-text span:first-child { font-weight: 400; font-size: 14px; text-align: left; color: #333; } .ant-iep-page-header-car-right-info-text span:last-child { font-weight: bold; font-size: 16px; text-align: left; color: #333; margin-top: 6px; } .ant-iep-page-header-car-right-status span { position: relative; font-weight: 900; font-size: 16px; color: #03c98c; padding-left: 10px; } .ant-iep-page-header-car-right-status span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #03c98c; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .ant-iep-page-header-car-right-status .off { color: #9dabc6; } .ant-iep-page-header-car-right-status .off::before { background: #9dabc6; } .ant-iep-page-header-mp { display: flex; justify-content: space-between; align-items: center; } .ant-iep-page-header-mp-left { display: flex; flex-direction: column; width: 20%; } .ant-iep-page-header-mp-left-title { font-weight: bold; font-size: 20px; text-align: left; color: #333; } .ant-iep-page-header-mp-left-address { display: flex; justify-content: flex-start; align-items: center; margin-top: 4px; } .ant-iep-page-header-mp-left-address .iep-icon { width: 18px; height: 18px; } .ant-iep-page-header-mp-left-address .iep-icon svg { width: 18px; height: 18px; } .ant-iep-page-header-mp-left-address-sub { font-weight: 400; font-size: 14px; text-align: left; color: #ff7e00; } .ant-iep-page-header-mp-left-address-text { font-weight: 400; font-size: 14px; color: #333; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .ant-iep-page-header-mp-middle { display: flex; justify-content: flex-end; align-items: center; flex: 1; padding: 0 4%; gap: 0 20px; } .ant-iep-page-header-mp-middle-item { display: flex; justify-content: center; align-items: center; } .ant-iep-page-header-mp-middle-item img { width: 32px; -o-object-fit: cover; object-fit: cover; } .ant-iep-page-header-mp-middle-item span { font-weight: bold; font-size: 16px; color: #333; } .ant-iep-page-header-mp-right { width: 10%; display: flex; justify-content: flex-end; align-items: center; position: relative; padding-left: 20px; } .ant-iep-page-header-mp-right::before { content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 80%; background: #e5e5e5; transform: translateY(-50%); } .ant-iep-page-header-mp-right-info { display: flex; justify-content: flex-start; align-items: center; gap: 0 10px; } .ant-iep-page-header-mp-right-info img { width: 36px; -o-object-fit: cover; object-fit: cover; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .ant-iep-page-header-mp-right-info-text { display: flex; flex-direction: column; } .ant-iep-page-header-mp-right-info-text span { line-height: 1; } .ant-iep-page-header-mp-right-info-text span:first-child { font-weight: 400; font-size: 14px; text-align: left; color: #333; } .ant-iep-page-header-mp-right-info-text span:last-child { font-weight: bold; font-size: 16px; text-align: left; color: #333; margin-top: 6px; } .ant-iep-page-header-mp-right-status span { position: relative; font-weight: 900; font-size: 16px; color: #03c98c; padding-left: 10px; } .ant-iep-page-header-mp-right-status span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #03c98c; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .ant-iep-page-header-mp-right-status .off { color: #9dabc6; } .ant-iep-page-header-mp-right-status .off::before { background: #9dabc6; } .ant-iep-page-header-event { display: flex; justify-content: space-between; align-items: center; } .ant-iep-page-header-event-left { display: flex; flex-direction: column; } .ant-iep-page-header-event-left-top { display: flex; justify-content: flex-start; align-items: center; } .ant-iep-page-header-event-left-top img { width: 32px; -o-object-fit: cover; object-fit: cover; } .ant-iep-page-header-event-left-top span { font-weight: bold; font-size: 20px; text-align: left; color: #333; } .ant-iep-page-header-event-left-bottom { font-weight: 400; font-size: 14px; text-align: left; color: #333; } .ant-iep-page-header-event-middle { display: flex; justify-content: flex-start; align-items: center; flex: 1; padding: 0 4%; gap: 0 20px; } .ant-iep-page-header-event-right { width: 14%; display: flex; justify-content: space-between; align-items: center; } .ant-iep-page-header-custom { display: flex; justify-content: space-between; align-items: center; gap: 0 16px; } .ant-iep-page-header-custom-left { display: flex; flex-direction: column; } .ant-iep-page-header-custom-left-top { display: flex; justify-content: flex-start; align-items: center; } .ant-iep-page-header-custom-left-top-title span { font-weight: bold; font-size: 20px; text-align: left; color: #333; white-space: nowrap; } .ant-iep-page-header-custom-left-bottom { display: flex; justify-content: flex-start; align-items: center; margin-top: 4px; gap: 0 12px; } .ant-iep-page-header-custom-left-bottom-item { display: flex; justify-content: flex-start; align-items: center; } .ant-iep-page-header-custom-left-bottom-item .iep-icon { width: 18px; height: 18px; } .ant-iep-page-header-custom-left-bottom-item .iep-icon svg { width: 18px; height: 18px; } .ant-iep-page-header-custom-left-bottom-item span { font-weight: 400; font-size: 14px; color: #333; margin-left: 6px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .ant-iep-page-header-custom-center { flex: 1; } .ant-iep-page-header-custom-right { display: flex; justify-content: flex-end; align-items: center; position: relative; padding-left: 20px; gap: 0 16px; } .ant-iep-page-header-custom-right::before { content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 80%; background: #e5e5e5; transform: translateY(-50%); } .ant-iep-page-header-custom-right img { width: 40px; -o-object-fit: cover; object-fit: cover; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: 6px; } .ant-iep-page-header-custom-right-item { display: flex; justify-content: flex-end; align-items: center; } .ant-iep-page-header-custom-right-item-text { display: flex; flex-direction: column; } .ant-iep-page-header-custom-right-item-text span { line-height: 1; } .ant-iep-page-header-custom-right-item-text span:first-child { font-weight: 400; font-size: 14px; text-align: left; color: #333; } .ant-iep-page-header-custom-right-item-text span:last-child { font-weight: bold; font-size: 16px; text-align: left; color: #333; margin-top: 6px; } .ant-iep-page-header-custom-right-item-status { margin-left: 30px; } .ant-iep-page-header-custom-right-item-status span { position: relative; font-weight: 900; font-size: 16px; color: #03c98c; padding-left: 10px; } .ant-iep-page-header-custom-right-item-status span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #03c98c; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .ant-iep-page-header-custom-right-item-status .off { color: #9dabc6; } .ant-iep-page-header-custom-right-item-status .off::before { background: #9dabc6; }