From 064c6c81fdb2ccf89c5cef81dc61adcc45fcf6ab Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期三, 17 八月 2022 20:41:03 +0800 Subject: [PATCH] Default Changelist --- src/views/intellectInspect/intelligentLine/index.vue | 998 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 517 insertions(+), 481 deletions(-) diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue index 0c02976..6fee9ce 100644 --- a/src/views/intellectInspect/intelligentLine/index.vue +++ b/src/views/intellectInspect/intelligentLine/index.vue @@ -105,7 +105,8 @@ socket: any; socketData: string; data: Array<any>; - id: string + id: string; + defaultImg: string } export default { name: 'intelligentLine', @@ -121,7 +122,8 @@ socketData: '', socket: null, data: [], - id: '' + id: '', + defaultImg: new URL('../../../assets/default-img.jpg',import.meta.url).href }); onMounted(() => { @@ -263,23 +265,35 @@ .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; } @@ -289,7 +303,7 @@ .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; @@ -464,13 +478,24 @@ 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; @@ -663,13 +688,24 @@ 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; @@ -832,533 +868,533 @@ } } -@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> -- Gitblit v1.9.2