body { font-size: 20px; -webkit-text-size-adjust: none; max-width: 100%; overflow-x: hidden; vertical-align: top; font-family: Arial,Helvetica,sans-serif; background-color: #000f2d; } *{margin: 0px; padding: 0px;} ul,li{list-style: none;} .main { width: 100vw; height: 100vh; background: url(./images/home_bg.jpg) no-repeat center center; background-size: cover; } .home_header { height: 10vh; width: 100%; position: relative; } .header_left { font-size: 1.6vw; color: #a6d6ff; display: block; float: left; line-height: 10vh; font-weight: normal; padding-left: 4vw; position: relative; } .icon_warehouse { background: url(./images/icon_warehouse.png) no-repeat center center; background-size: contain; width: 2vw; height: 9.5vh; display: inline-block; position: absolute; left: 1vw; top: 0px; } .home_header h1 { color: #fff; font-size: 3vw; width: 100%; height: 10vh; line-height: 10vh; display: flex; position: absolute; align-content: center; left: 0px; top: 0px; justify-content:center; } .home_header h1 span { display: block; } .home_header h1 img { width: 4vw; height: auto;vertical-align: middle;margin-top: -0.8vw; } .header_right { font-size: 1.6vw; color: #a6d6ff; display:block; float: right;line-height: 10vh; font-weight: normal; padding-right: 30px; } .home_mainbody { max-height: 90vh; width: 100vw; overflow: hidden; box-sizing: border-box; display: flex; } .home_mainbody_left { width: 58vw; /* overflow: hidden; */ /* padding: 0 0.5vw; */ margin-left:1vw; height: 89vh; box-sizing: border-box; border: 3px solid #17d4ee; border-radius: 10px; background-color: rgba(6,22,45,0.5); box-shadow: 0px 0px 20px rgba(0,0,0,1) } .home_mainbody_right { width: 38vw;overflow: hidden; margin-left:1vw; margin-right:1vw; height: 89vh; box-sizing: border-box; border: 3px solid #ddd; border-radius: 10px; background-color:#fff; box-shadow: 0px 0px 20px rgba(0,0,0,1) } .tab_content { clear: both; overflow: scroll; height: 80vh; } .tab_header { height: 6vh; background: url(./images/bg_line.png) no-repeat center bottom; background-size: contain; } .tab_header span { color: #a6d6ff; position: relative; font-size: 1.4vw; height: 6vh; display: flex; align-content: center; align-items: center; justify-content: center; white-space:nowrap;/* 禁止换行 */ overflow: hidden;/*溢出隐藏*/ text-overflow: ellipsis;/*超出省略号表示*/ } .tab_content li { background: url(./images/bg_line.png) no-repeat center bottom; background-size: contain; color: #fff; position: relative; height: 8vh; } .tab_content .li_active:after { content: ""; display: block; position: absolute; left: 0.5vw; right: 0.5vw; top: 0; height: 8vh; background-color: #ffcf4b; border-radius: 10px; z-index: 0; box-sizing: border-box; border: 2px solid #fff; /* box-shadow: 0px 0px 10px rgba(255,249,101,1); */ animation: showdowcss 0.6s infinite alternate; } @keyframes showdowcss{ 0%{ box-shadow: 0px 0px 10px rgba(235,255,0,0); } 100% { box-shadow: 0px 0px 10px rgba(235,255,0,1); } } .tab_content li span { font-size: 1.4vw; position: relative; z-index: 10; display: flex; align-content: center; align-items: center; justify-content: center; height: 8vh; /* line-height:5.5vw; */ white-space:nowrap;/* 禁止换行 */ overflow: hidden;/*溢出隐藏*/ text-overflow: ellipsis;/*超出省略号表示*/ } .tab_content .li_active { color: #000 !important; background:none !important; } .tab_content .li_active span { font-size: 1.5vw !important; } .home_mainbody_left span { float: left; font-weight: normal; text-align: center; box-sizing: border-box; } .home_mainbody_left .sp1 { width: 22%; } .home_mainbody_left .sp2 { width: 22%; } .home_mainbody_left .sp3 { width: 14%; } .home_mainbody_left .sp4 { width: 21%; } .home_mainbody_left .sp5 { width: 21%; } /* 百度地图相关 */ .BMapLib_sendToPhone { display: none; } /*====工具借还=====*/ .home_mainbody_tool { margin-right: 1vw; width: 98vw; margin-left:1vw; height: 89vh; box-sizing: border-box; border: 3px solid #17d4ee; border-radius: 10px; background-color: rgba(6,22,45,0.5); box-shadow: 0px 0px 20px rgba(0,0,0,1) } .home_mainbody_tool span { float: left; font-weight: normal; box-sizing: border-box; text-align: center; } .home_mainbody_tool span:nth-child(1) { width: 12%; text-align: center; } .home_mainbody_tool span:nth-child(2) { width: 12%; text-align: center; } .home_mainbody_tool span:nth-child(3) { width: 25%; text-align: left; white-space:nowrap;/* 禁止换行 */ overflow: hidden;/*溢出隐藏*/ text-overflow: ellipsis;/*超出省略号表示*/ } .home_mainbody_tool span:nth-child(4) { width: 13%; text-align: center; } .home_mainbody_tool span:nth-child(5) { width: 14%; text-align: center; } .home_mainbody_tool span:nth-child(6) { width:10%; text-align: center; } .home_mainbody_tool span:nth-child(7) { width:14%; text-align: center; } .tab_tool li { background: url(./images/bg_line.png) no-repeat center bottom; background-size: contain; color: #fff; position: relative; /* height: 8vh; */ padding-top: 1vh; padding-bottom: 1vh; overflow: hidden; } .toolimg { width: 8vh; border-radius: 5px; } .tab_tool li span { font-size: 1.4vw; height: 8vh; line-height:8vh; }