| | |
| | | <template> |
| | | <div class="container"> |
| | | <div class="big-title" @click="goBack()"><span></span>大型实验室智能巡检系统<span></span></div> |
| | | <div class="big-title" @click="goBack()"><span></span>国泰新华智能巡检系统<span></span></div> |
| | | <div style="font-size: 14px;color: #00ffff">{{present}}</div> |
| | | <div class="backBtn" @click="goBack()"> |
| | | <img src="../../../assets/loginPage/back-icon.png"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="pic-tit water"> |
| | | <img src="../../../assets/loginPage/equipment.JPG"> |
| | | <img src="../../../assets/loginPage/equipment.jpg"> |
| | | <p>实验室装置区</p> |
| | | </div> |
| | | <div></div> |
| | | <div class="pic-tit"> |
| | | <img src="../../../assets/loginPage/wind.JPG"> |
| | | <img src="../../../assets/loginPage/wind.jpg"> |
| | | <p>实验室风机系统</p> |
| | | </div> |
| | | <div class="item item-l warning"> |
| | |
| | | <div></div> |
| | | <div></div> |
| | | <div class="pic-tit water"> |
| | | <img src="../../../assets/loginPage/watersys.JPG"> |
| | | <img src="../../../assets/loginPage/watersys.jpg"> |
| | | <p>实验室循环水系统</p> |
| | | </div> |
| | | <div class="item item-t"> |
| | |
| | | .item{ |
| | | width: calc((100vw - 120px)/ 7); |
| | | height: calc((100vh - 130px)/ 5); |
| | | padding: 20px 40px 20px 20px; |
| | | padding: 20px 30px 20px 20px; |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | font-size: 16px; |
| | | font-size: 20px; |
| | | color: #36FCFC; |
| | | border-right: 1px solid #36FCFC; |
| | | padding-right: 20px; |
| | | img{ |
| | | margin-bottom: 10px; |
| | | } |
| | | } |
| | | .task-des-r{ |
| | | width: 320px; |
| | | width: calc((200vw - 240px)/ 7); |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | font-size: 16px; |
| | | font-size: 20px; |
| | | line-height: 28px; |
| | | color: #FCFC36; |
| | | padding-left: 20px; |
| | |
| | | } |
| | | .star-pic{ |
| | | position: absolute; |
| | | width: calc(40vh - 80px); |
| | | height: calc(40vh - 80px); |
| | | width: calc((100vw - 120px)/ 7); |
| | | height: calc((100vw - 120px)/ 7); |
| | | z-index: 999999; |
| | | top: calc(40vh - 120px); |
| | | left: 50%; |
| | | transform: translateX(-65%); |
| | | bottom: 40px; |
| | | right: 40px; |
| | | padding: 20px; |
| | | |
| | | .star-bg{ |
| | |
| | | .section-1{ |
| | | position: absolute; |
| | | left: 70px; |
| | | top: -10px; |
| | | top: -20px; |
| | | width: calc((200vw - 240px) / 7 + 60px); |
| | | height: 630px; |
| | | height: calc(80vh - 109px); |
| | | background: rgba(0,100,190,.1); |
| | | border: 1px solid rgba(0,100,190,.4); |
| | | border-radius: 8px; |
| | |
| | | .section-2{ |
| | | position: absolute; |
| | | left: calc((400vw - 480px)/ 7 + 70px); |
| | | top: 150px; |
| | | top: calc((100vh - 130px)/ 5 - 20px); |
| | | width: calc((200vw - 240px) / 7 + 60px); |
| | | height: 470px; |
| | | height: calc((300vh - 390px)/ 5 - 5px); |
| | | background: rgba(0,100,190,.1); |
| | | border: 1px solid rgba(0,100,190,.4); |
| | | border-radius: 8px; |
| | |
| | | .section-3{ |
| | | position: absolute; |
| | | left: 100px; |
| | | top: 630px; |
| | | top: calc(80vh - 119px); |
| | | width: calc((500vw - 600px)/ 7 + 30px); |
| | | height: 180px; |
| | | height: calc((100vh - 130px)/ 5 + 20px); |
| | | background: rgba(0,100,190,.1); |
| | | border: 1px solid rgba(0,100,190,.4); |
| | | border-radius: 8px; |