*{padding:0;margin:0;box-sizing:border-box}#app,.homeBody{width:100vw;height:100vh}.headerBody{height:60px;width:100%;background-color:#102d50;padding:0 20px;display:flex;justify-content:space-between}.logoBox{height:60px;width:250px;color:#fff;line-height:60px}.changePageBox{height:60px;display:flex}.changePageBoxItem{line-height:50px;margin-right:15px;color:#fff;padding:5px}.active{background-color:#3f9dfe}.dataBody,.mainView{height:calc(100vh - 60px);width:100vw}.dataTypeChooseBox{width:50px;height:300px;position:absolute;right:10px;top:100px;background-color:#fff;z-index:999;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)}.leftControllerBox{width:300px;background-color:#102d50b2;position:absolute;left:10px;top:10px;z-index:999;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-radius:10px;padding:20px;border:2px solid #3f9dfe}.controllItemBox{height:40px;display:flex;justify-content:space-between;align-items:center}.controllItemBox,.controllItemBox2{width:100%;color:#fff;margin-top:20px}.listGroupbox{width:100%;display:flex;flex-wrap:wrap}.el-radio__label{color:#fff!important}.lengedBox{height:20px;position:absolute;right:10px;bottom:10px;z-index:999;border-radius:10px;overflow:hidden;border:1px solid #3f9dfe;display:flex}.lengedBoxItem{width:50px;background-color:#3f9dfe;color:#fff}.lengedBoxItem,.lengedBoxItem2{height:20px;opacity:.9;text-align:center;line-height:20px}.lengedBoxItem2{width:30px}.mytext{color:#fff;font-size:12px;mix-blend-mode:difference}.timeLineBox{height:40px;width:80vw;position:absolute;z-index:999;bottom:50px;left:10vw;background-color:#102d50b2;border-radius:20px;border:1px solid #3f9dfe;display:flex;padding:0 30px}.playBtn{width:10%;display:flex;align-items:center}.timeline{width:90%;position:relative;top:-10px}