| | |
| | | socket: any; |
| | | socketData: string; |
| | | data: Array<any>; |
| | | id: string |
| | | id: string; |
| | | defaultImg: string |
| | | } |
| | | export default { |
| | | name: 'intelligentLine', |
| | |
| | | socketData: '', |
| | | socket: null, |
| | | data: [], |
| | | id: '' |
| | | id: '', |
| | | defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href |
| | | }); |
| | | |
| | | onMounted(() => { |
| | |
| | | |
| | | .picbox { |
| | | width: 100%; |
| | | height: 180px; |
| | | height: 200px; |
| | | padding: 10px; |
| | | margin-bottom: 40px; |
| | | margin-bottom: 20px; |
| | | box-sizing: border-box; |
| | | |
| | | img { |
| | | display: block; |
| | | .imgbox{ |
| | | width: 100%; |
| | | height: 100px; |
| | | margin-bottom: 8px; |
| | | height: 120px; |
| | | position: relative; |
| | | margin-bottom: 10px; |
| | | border-radius: 4px; |
| | | overflow: hidden; |
| | | img { |
| | | display: block; |
| | | width: 100%; |
| | | height: auto; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | bottom: 0; |
| | | right: 0; |
| | | margin: auto; |
| | | } |
| | | } |
| | | |
| | | p { |
| | | font-size: 14px; |
| | | white-space: nowrap; |
| | | color: rgba(255, 255, 255, 0.8); |
| | | margin-top: 10px; |
| | | margin-bottom: 4px; |
| | | span { |
| | | color: #fff; |
| | | } |
| | |
| | | .item { |
| | | width: calc((100vw - 40px) / 6); |
| | | height: calc((100vh - 130px) / 5); |
| | | padding: 0 20px 20px 50px; |
| | | padding: 0 40px 20px 50px; |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | border-left: 1px solid #36fcfc; |
| | |
| | | padding: 10px; |
| | | margin-bottom: 40px; |
| | | box-sizing: border-box; |
| | | |
| | | img { |
| | | display: block; |
| | | .imgbox{ |
| | | width: 100%; |
| | | height: 100px; |
| | | position: relative; |
| | | margin-bottom: 6px; |
| | | border-radius: 4px; |
| | | overflow: hidden; |
| | | img { |
| | | display: block; |
| | | width: 100%; |
| | | height: auto; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | bottom: 0; |
| | | right: 0; |
| | | margin: auto; |
| | | } |
| | | } |
| | | p { |
| | | font-size: 14px; |
| | |
| | | padding: 10px; |
| | | margin-bottom: 30px; |
| | | box-sizing: border-box; |
| | | |
| | | img { |
| | | display: block; |
| | | .imgbox{ |
| | | width: 100%; |
| | | height: 80px; |
| | | position: relative; |
| | | margin-bottom: 10px; |
| | | border-radius: 4px; |
| | | overflow: hidden; |
| | | img { |
| | | display: block; |
| | | width: 100%; |
| | | height: auto; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | bottom: 0; |
| | | right: 0; |
| | | margin: auto; |
| | | } |
| | | } |
| | | p { |
| | | font-size: 12px; |
| | |
| | | } |
| | | } |
| | | |
| | | @keyframes warn { |
| | | 0% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0; |
| | | } |
| | | |
| | | 25% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0.1; |
| | | } |
| | | |
| | | 50% { |
| | | transform: scale(0.5); |
| | | -webkit-transform: scale(0.5); |
| | | opacity: 0.3; |
| | | } |
| | | |
| | | 75% { |
| | | transform: scale(0.8); |
| | | -webkit-transform: scale(0.8); |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | 100% { |
| | | transform: scale(1); |
| | | -webkit-transform: scale(1); |
| | | opacity: 0; |
| | | } |
| | | } |
| | | |
| | | @keyframes warn1 { |
| | | 0% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0; |
| | | } |
| | | |
| | | 25% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0.1; |
| | | } |
| | | |
| | | 50% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0.3; |
| | | } |
| | | |
| | | 75% { |
| | | transform: scale(0.5); |
| | | -webkit-transform: scale(0.5); |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | 100% { |
| | | transform: scale(0.8); |
| | | -webkit-transform: scale(0.8); |
| | | opacity: 0; |
| | | } |
| | | } |
| | | |
| | | @keyframes circle { |
| | | 0% { |
| | | transform: rotate(0); |
| | | -webkit-transform: rotate(0); |
| | | } |
| | | 100% { |
| | | transform: rotate(360deg); |
| | | -webkit-transform: rotate(360deg); |
| | | } |
| | | } |
| | | @keyframes run { |
| | | to { |
| | | transform: translateX(calc((100vw - 180px) / 6 - 80px)); |
| | | } |
| | | } |
| | | .container { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | background: url('../../../assets/loginPage/map-bg.jpg') no-repeat center; |
| | | background-size: 100% 100%; |
| | | .big-title { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | font-weight: bold; |
| | | text-align: center; |
| | | color: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | .btns { |
| | | display: flex; |
| | | align-items: center; |
| | | .fullbtn { |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 20px; |
| | | .toFull { |
| | | font-weight: bolder; |
| | | color: #00ffff; |
| | | margin-right: 10px; |
| | | } |
| | | @keyframes warn { |
| | | 0% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0; |
| | | } |
| | | |
| | | .backBtn { |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | width: 14px; |
| | | height: 14px; |
| | | margin-right: 10px; |
| | | } |
| | | 25% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0.1; |
| | | } |
| | | |
| | | 50% { |
| | | transform: scale(0.5); |
| | | -webkit-transform: scale(0.5); |
| | | opacity: 0.3; |
| | | } |
| | | |
| | | 75% { |
| | | transform: scale(0.8); |
| | | -webkit-transform: scale(0.8); |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | 100% { |
| | | transform: scale(1); |
| | | -webkit-transform: scale(1); |
| | | opacity: 0; |
| | | } |
| | | } |
| | | .blocks { |
| | | |
| | | @keyframes warn1 { |
| | | 0% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0; |
| | | } |
| | | |
| | | 25% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0.1; |
| | | } |
| | | |
| | | 50% { |
| | | transform: scale(0.3); |
| | | -webkit-transform: scale(0.3); |
| | | opacity: 0.3; |
| | | } |
| | | |
| | | 75% { |
| | | transform: scale(0.5); |
| | | -webkit-transform: scale(0.5); |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | 100% { |
| | | transform: scale(0.8); |
| | | -webkit-transform: scale(0.8); |
| | | opacity: 0; |
| | | } |
| | | } |
| | | |
| | | @keyframes circle { |
| | | 0% { |
| | | transform: rotate(0); |
| | | -webkit-transform: rotate(0); |
| | | } |
| | | 100% { |
| | | transform: rotate(360deg); |
| | | -webkit-transform: rotate(360deg); |
| | | } |
| | | } |
| | | @keyframes run { |
| | | to { |
| | | transform: translateX(calc((100vw - 180px) / 6 - 80px)); |
| | | } |
| | | } |
| | | .container { |
| | | width: 100%; |
| | | height: calc(100% - 90px); |
| | | padding: 10px 40px 35px; |
| | | box-sizing: border-box; |
| | | |
| | | &>div{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | background: url('../../../assets/loginPage/map-bg.jpg') no-repeat center; |
| | | background-size: 100% 100%; |
| | | .big-title { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | font-weight: bold; |
| | | text-align: center; |
| | | color: #fff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | overflow: hidden; |
| | | overflow-x: auto; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .line-map { |
| | | .btns { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | align-items: center; |
| | | .fullbtn { |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 20px; |
| | | .toFull { |
| | | font-weight: bolder; |
| | | color: #00ffff; |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | |
| | | .line-item { |
| | | .backBtn { |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | width: 14px; |
| | | height: 14px; |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | } |
| | | .blocks { |
| | | width: 100%; |
| | | height: calc(100% - 90px); |
| | | padding: 10px 40px 35px; |
| | | box-sizing: border-box; |
| | | |
| | | .area-head { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 80px; |
| | | padding-left: 38px; |
| | | border-left: 1px solid #36fcfc; |
| | | &>div{ |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | overflow: hidden; |
| | | overflow-x: auto; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .indicator { |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | position: absolute; |
| | | border: 1px solid #00ff66; |
| | | top: -18px; |
| | | left: -18px; |
| | | .line-map { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | |
| | | .indi-dot { |
| | | .line-item { |
| | | |
| | | .area-head { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 80px; |
| | | padding-left: 38px; |
| | | border-left: 1px solid #36fcfc; |
| | | |
| | | .indicator { |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 20px; |
| | | left: 7px; |
| | | top: 7px; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border: 1px solid #00ff66; |
| | | border-radius: 50%; |
| | | background-color: #00ff66; |
| | | z-index: 2; |
| | | } |
| | | .indi-pulse { |
| | | position: absolute; |
| | | width: 56px; |
| | | height: 56px; |
| | | left: -11px; |
| | | top: -11px; |
| | | border: 1px solid #00ff66; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border-radius: 50%; |
| | | z-index: 1; |
| | | opacity: 0; |
| | | -webkit-animation: warn 2s ease-out; |
| | | -moz-animation: warn 2s ease-out; |
| | | animation: warn 2s ease-out; |
| | | -webkit-animation-iteration-count: infinite; |
| | | -moz-animation-iteration-count: infinite; |
| | | animation-iteration-count: infinite; |
| | | box-shadow: 1px 1px 30px #00ff66; |
| | | } |
| | | .indi-pulse1 { |
| | | position: absolute; |
| | | width: 56px; |
| | | height: 56px; |
| | | left: -11px; |
| | | top: -11px; |
| | | border: 1px solid #3399ff; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border-radius: 50%; |
| | | z-index: 1; |
| | | opacity: 0; |
| | | -webkit-animation: warn1 2s ease-out; |
| | | -moz-animation: warn1 2s ease-out; |
| | | animation: warn1 2s ease-out; |
| | | -webkit-animation-iteration-count: infinite; |
| | | -moz-animation-iteration-count: infinite; |
| | | animation-iteration-count: infinite; |
| | | box-shadow: 1px 1px 30px #3399ff; |
| | | } |
| | | } |
| | | .someUndone { |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | position: absolute; |
| | | border: 1px solid #ccc; |
| | | top: -18px; |
| | | left: -18px; |
| | | top: -18px; |
| | | left: -18px; |
| | | |
| | | .indi-dot { |
| | | .indi-dot { |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 20px; |
| | | left: 7px; |
| | | top: 7px; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border: 1px solid #00ff66; |
| | | border-radius: 50%; |
| | | background-color: #00ff66; |
| | | z-index: 2; |
| | | } |
| | | .indi-pulse { |
| | | position: absolute; |
| | | width: 56px; |
| | | height: 56px; |
| | | left: -11px; |
| | | top: -11px; |
| | | border: 1px solid #00ff66; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border-radius: 50%; |
| | | z-index: 1; |
| | | opacity: 0; |
| | | -webkit-animation: warn 2s ease-out; |
| | | -moz-animation: warn 2s ease-out; |
| | | animation: warn 2s ease-out; |
| | | -webkit-animation-iteration-count: infinite; |
| | | -moz-animation-iteration-count: infinite; |
| | | animation-iteration-count: infinite; |
| | | box-shadow: 1px 1px 30px #00ff66; |
| | | } |
| | | .indi-pulse1 { |
| | | position: absolute; |
| | | width: 56px; |
| | | height: 56px; |
| | | left: -11px; |
| | | top: -11px; |
| | | border: 1px solid #3399ff; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border-radius: 50%; |
| | | z-index: 1; |
| | | opacity: 0; |
| | | -webkit-animation: warn1 2s ease-out; |
| | | -moz-animation: warn1 2s ease-out; |
| | | animation: warn1 2s ease-out; |
| | | -webkit-animation-iteration-count: infinite; |
| | | -moz-animation-iteration-count: infinite; |
| | | animation-iteration-count: infinite; |
| | | box-shadow: 1px 1px 30px #3399ff; |
| | | } |
| | | } |
| | | .someUndone { |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 20px; |
| | | left: 7px; |
| | | top: 7px; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border: 1px solid #ccc; |
| | | border-radius: 50%; |
| | | background-color: #ccc; |
| | | z-index: 2; |
| | | } |
| | | } |
| | | .somewarning { |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | position: absolute; |
| | | border: 1px solid #ff0000; |
| | | top: -18px; |
| | | left: -18px; |
| | | top: -18px; |
| | | left: -18px; |
| | | |
| | | .indi-dot { |
| | | .indi-dot { |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 20px; |
| | | left: 7px; |
| | | top: 7px; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border: 1px solid #ccc; |
| | | border-radius: 50%; |
| | | background-color: #ccc; |
| | | z-index: 2; |
| | | } |
| | | } |
| | | .somewarning { |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | position: absolute; |
| | | width: 20px; |
| | | border: 1px solid #ff0000; |
| | | top: -18px; |
| | | left: -18px; |
| | | |
| | | .indi-dot { |
| | | position: absolute; |
| | | width: 20px; |
| | | height: 20px; |
| | | left: 7px; |
| | | top: 7px; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border: 1px solid #ff0000; |
| | | border-radius: 50%; |
| | | background-color: #ff0000; |
| | | z-index: 2; |
| | | } |
| | | } |
| | | .arrow { |
| | | position: absolute; |
| | | width: 58px; |
| | | height: 20px; |
| | | left: 7px; |
| | | top: 7px; |
| | | -webkit-border-radius: 50%; |
| | | -moz-border-radius: 50%; |
| | | border: 1px solid #ff0000; |
| | | border-radius: 50%; |
| | | background-color: #ff0000; |
| | | z-index: 2; |
| | | left: 38px; |
| | | top: -10px; |
| | | background: url('../../../assets/loginPage/arrow-r.png') 0 / cover no-repeat; |
| | | animation: run 2s steps(4) 0s infinite; |
| | | } |
| | | .top-line { |
| | | width: 100%; |
| | | border-top: 2px solid #36fcfc; |
| | | } |
| | | .fadeLine { |
| | | width: 100%; |
| | | border-top: 1px solid rgba(54,252,252,.6); |
| | | } |
| | | } |
| | | .arrow { |
| | | position: absolute; |
| | | width: 58px; |
| | | height: 20px; |
| | | left: 38px; |
| | | top: -10px; |
| | | background: url('../../../assets/loginPage/arrow-r.png') 0 / cover no-repeat; |
| | | animation: run 2s steps(4) 0s infinite; |
| | | .fadeBorder { |
| | | border-left: 1px solid #ccc; |
| | | } |
| | | .top-line { |
| | | .more-info { |
| | | width: 100%; |
| | | border-top: 2px solid #36fcfc; |
| | | } |
| | | .fadeLine { |
| | | width: 100%; |
| | | border-top: 1px solid rgba(54,252,252,.6); |
| | | } |
| | | } |
| | | .fadeBorder { |
| | | border-left: 1px solid #ccc; |
| | | } |
| | | .more-info { |
| | | width: 100%; |
| | | |
| | | .warning { |
| | | & > section { |
| | | border: 1px solid #ff0000; |
| | | .warning { |
| | | & > section { |
| | | border: 1px solid #ff0000; |
| | | |
| | | .dot { |
| | | border: 1px solid #ff0000; |
| | | background: #ff0000; |
| | | .dot { |
| | | border: 1px solid #ff0000; |
| | | background: #ff0000; |
| | | } |
| | | .pulse { |
| | | border: 1px solid #ff0000; |
| | | box-shadow: 1px 1px 30px #ff0000; |
| | | } |
| | | .pulse1 { |
| | | border: 1px solid #ff0000; |
| | | box-shadow: 1px 1px 30px #ff0000; |
| | | } |
| | | } |
| | | .pulse { |
| | | border: 1px solid #ff0000; |
| | | box-shadow: 1px 1px 30px #ff0000; |
| | | } |
| | | .pulse1 { |
| | | border: 1px solid #ff0000; |
| | | box-shadow: 1px 1px 30px #ff0000; |
| | | |
| | | & > div { |
| | | div { |
| | | span.target { |
| | | color: #ff2929; |
| | | font-weight: bolder; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .undone { |
| | | & > section { |
| | | border: 1px solid #ccc; |
| | | |
| | | & > div { |
| | | div { |
| | | span.target { |
| | | color: #ff2929; |
| | | font-weight: bolder; |
| | | .dot { |
| | | border: 1px solid #ccc; |
| | | background: #ccc; |
| | | } |
| | | .pulse { |
| | | display: none; |
| | | } |
| | | .pulse1 { |
| | | display: none; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .undone { |
| | | & > section { |
| | | border: 1px solid #ccc; |
| | | } |
| | | .finish { |
| | | .area-head { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 80px; |
| | | border-left: none; |
| | | } |
| | | } |
| | | .pic-tit { |
| | | display: flex; |
| | | width: calc((100vw - 120px) / 7); |
| | | height: 160px; |
| | | padding: 20px; |
| | | transform: translate(-20px, -40%); |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | |
| | | .dot { |
| | | border: 1px solid #ccc; |
| | | background: #ccc; |
| | | } |
| | | .pulse { |
| | | display: none; |
| | | } |
| | | .pulse1 { |
| | | display: none; |
| | | } |
| | | } |
| | | img { |
| | | width: calc((100vw - 120px) / 7 - 40px); |
| | | height: 90px; |
| | | margin-bottom: 10px; |
| | | border-radius: 4px; |
| | | } |
| | | p { |
| | | font-size: 16px; |
| | | color: #00ffff; |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | |
| | | .water { |
| | | transform: none; |
| | | } |
| | | .start { |
| | | padding: 40px 0; |
| | | p { |
| | | margin-top: -21px; |
| | | margin-left: 20px; |
| | | } |
| | | span { |
| | | width: 1px; |
| | | height: 50px; |
| | | background: #36fcfc; |
| | | position: absolute; |
| | | top: -10px; |
| | | left: 0; |
| | | } |
| | | section { |
| | | position: absolute; |
| | | top: 30px; |
| | | left: -14px; |
| | | } |
| | | } |
| | | } |
| | | .finish { |
| | | .area-head { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 80px; |
| | | border-left: none; |
| | | } |
| | | .tip { |
| | | width: 100%; |
| | | font-size: 30px; |
| | | text-align: center; |
| | | margin-top: 100px; |
| | | color: #fff; |
| | | font-weight: bolder; |
| | | } |
| | | .pic-tit { |
| | | display: flex; |
| | | width: calc((100vw - 120px) / 7); |
| | | height: 160px; |
| | | padding: 20px; |
| | | transform: translate(-20px, -40%); |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | |
| | | img { |
| | | width: calc((100vw - 120px) / 7 - 40px); |
| | | height: 90px; |
| | | margin-bottom: 10px; |
| | | border-radius: 4px; |
| | | } |
| | | p { |
| | | font-size: 16px; |
| | | color: #00ffff; |
| | | font-weight: bold; |
| | | } |
| | | } |
| | | |
| | | .water { |
| | | transform: none; |
| | | } |
| | | .start { |
| | | padding: 40px 0; |
| | | p { |
| | | margin-top: -21px; |
| | | margin-left: 20px; |
| | | } |
| | | span { |
| | | width: 1px; |
| | | height: 50px; |
| | | background: #36fcfc; |
| | | position: absolute; |
| | | top: -10px; |
| | | left: 0; |
| | | } |
| | | section { |
| | | position: absolute; |
| | | top: 30px; |
| | | left: -14px; |
| | | } |
| | | } |
| | | } |
| | | .tip { |
| | | width: 100%; |
| | | font-size: 30px; |
| | | text-align: center; |
| | | margin-top: 100px; |
| | | color: #fff; |
| | | font-weight: bolder; |
| | | } |
| | | .current-task { |
| | | position: absolute; |
| | | width: calc((500vw - 600px) / 7); |
| | | z-index: 999999; |
| | | top: 0; |
| | | right: 0; |
| | | padding: 0 60px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .task-des { |
| | | padding: 10px 20px; |
| | | .current-task { |
| | | position: absolute; |
| | | width: calc((500vw - 600px) / 7); |
| | | z-index: 999999; |
| | | top: 0; |
| | | right: 0; |
| | | padding: 0 60px; |
| | | display: flex; |
| | | align-items: center; |
| | | border: 1px solid #36fcfc; |
| | | justify-content: space-between; |
| | | |
| | | .task-des-l { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | font-size: 20px; |
| | | color: #36fcfc; |
| | | border-right: 1px solid #36fcfc; |
| | | padding-right: 20px; |
| | | img { |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | .task-des-r { |
| | | width: calc((200vw - 240px) / 7); |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | font-size: 20px; |
| | | line-height: 28px; |
| | | color: #fcfc36; |
| | | padding-left: 20px; |
| | | } |
| | | } |
| | | .current-data { |
| | | width: 267px; |
| | | height: 138px; |
| | | padding: 20px 30px; |
| | | box-sizing: border-box; |
| | | background: url('../../../assets/loginPage/xj-bg.png') no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | .data-area { |
| | | .task-des { |
| | | padding: 10px 20px; |
| | | display: flex; |
| | | align-items: center; |
| | | border-bottom: 1px solid #040c3b; |
| | | font-weight: bold; |
| | | padding-bottom: 10px; |
| | | box-sizing: border-box; |
| | | border: 1px solid #36fcfc; |
| | | |
| | | img { |
| | | width: 30px; |
| | | height: 30px; |
| | | margin-right: 10px; |
| | | animation: circle 1s ease-in-out infinite; |
| | | } |
| | | |
| | | div { |
| | | font-size: 15px; |
| | | color: rgba(4, 12, 59, 0.8); |
| | | |
| | | span { |
| | | color: #040c3b; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .data-spot { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | margin-top: 10px; |
| | | |
| | | & > div { |
| | | .task-des-l { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | width: 50%; |
| | | font-size: 14px; |
| | | color: rgba(4, 12, 59, 0.8); |
| | | font-size: 20px; |
| | | color: #36fcfc; |
| | | border-right: 1px solid #36fcfc; |
| | | padding-right: 20px; |
| | | img { |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | .task-des-r { |
| | | width: calc((200vw - 240px) / 7); |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | font-size: 20px; |
| | | line-height: 28px; |
| | | color: #fcfc36; |
| | | padding-left: 20px; |
| | | } |
| | | } |
| | | .current-data { |
| | | width: 267px; |
| | | height: 138px; |
| | | padding: 20px 30px; |
| | | box-sizing: border-box; |
| | | background: url('../../../assets/loginPage/xj-bg.png') no-repeat center; |
| | | background-size: 100% 100%; |
| | | |
| | | p { |
| | | margin-top: 6px; |
| | | color: #040c3b; |
| | | .data-area { |
| | | display: flex; |
| | | align-items: center; |
| | | border-bottom: 1px solid #040c3b; |
| | | font-weight: bold; |
| | | padding-bottom: 10px; |
| | | box-sizing: border-box; |
| | | |
| | | img { |
| | | width: 30px; |
| | | height: 30px; |
| | | margin-right: 10px; |
| | | animation: circle 1s ease-in-out infinite; |
| | | } |
| | | |
| | | &:first-of-type { |
| | | border-right: 1px solid #040c3b; |
| | | div { |
| | | font-size: 15px; |
| | | color: rgba(4, 12, 59, 0.8); |
| | | |
| | | span { |
| | | color: #040c3b; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .data-spot { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | margin-top: 10px; |
| | | |
| | | & > div { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | width: 50%; |
| | | font-size: 14px; |
| | | color: rgba(4, 12, 59, 0.8); |
| | | |
| | | p { |
| | | margin-top: 6px; |
| | | color: #040c3b; |
| | | } |
| | | |
| | | &:first-of-type { |
| | | border-right: 1px solid #040c3b; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .star-pic { |
| | | position: absolute; |
| | | width: calc((100vw - 120px) / 7); |
| | | height: calc((100vw - 120px) / 7); |
| | | z-index: 999999999; |
| | | bottom: 40px; |
| | | right: 40px; |
| | | padding: 20px; |
| | | .star-pic { |
| | | position: absolute; |
| | | width: calc((100vw - 120px) / 7); |
| | | height: calc((100vw - 120px) / 7); |
| | | z-index: 999999999; |
| | | bottom: 40px; |
| | | right: 40px; |
| | | padding: 20px; |
| | | |
| | | .star-bg { |
| | | position: inherit; |
| | | width: 100%; |
| | | height: 100%; |
| | | left: 0; |
| | | top: 0; |
| | | img { |
| | | .star-bg { |
| | | position: inherit; |
| | | width: 100%; |
| | | height: auto; |
| | | animation: circle 30s linear infinite; |
| | | height: 100%; |
| | | left: 0; |
| | | top: 0; |
| | | img { |
| | | width: 100%; |
| | | height: auto; |
| | | animation: circle 30s linear infinite; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .star { |
| | | position: inherit; |
| | | width: 100%; |
| | | height: 100%; |
| | | left: 0; |
| | | top: 0; |
| | | img { |
| | | .star { |
| | | position: inherit; |
| | | width: 100%; |
| | | height: auto; |
| | | height: 100%; |
| | | left: 0; |
| | | top: 0; |
| | | img { |
| | | width: 100%; |
| | | height: auto; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |