.launchButtonBox{ position: fixed!important; bottom: 10px; right: 20px; left: auto; } .launchButtonNotice{ width: 270px; padding: 10px; margin: 0 auto; display: block; clear: both; border-radius: 4px; background-color: #fff; box-shadow: 0 3px 15px 0 rgba(0,0,0,.25)!important; position: absolute; bottom: 60px; right: 0; color: #222; line-height: 1.5; font-size: 14px; display: none; } .launchButtonNotice:after{ content: ""; display: block; width: 0; height: 0; border: 6px solid transparent; border-top-color: rgba(255,255,255,1); z-index: 1; position: absolute; bottom: -12px; right: 40px; } .launchButtonNotice a{ color: #07a9fe;!important; text-decoration: none; } .launchIcon{ background: #ff305f; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; position: absolute; top: -4px; left: 0px; color: #fff; display: none; } .launchButton{ height: 48px!important; width: auto!important; z-index: 10000000000000!important; background: #fac917; border: 0!important; border-radius: 20px; box-shadow: 0 3px 15px 0 rgba(0,0,0,.25)!important; box-sizing: border-box!important; padding: 0 25px; cursor: pointer!important; outline: 0!important; display: inline-block; margin: 0!important; -webkit-font-smoothing: antialiased!important; -webkit-tap-highlight-color: transparent!important; color: #ffffff; position: relative; } .launchButton:hover { box-shadow: 0 3px 20px 0 rgba(0,0,0,.5)!important; } .launchButton svg{ width: 28px; height: 48px; } .launchButtonText { color: #312927; display: inline-block!important; font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,fira sans,droid sans,helvetica neue,sans-serif!important; font-size: 1em!important; line-height: 48px!important; font-weight: 700!important; overflow: hidden!important; text-overflow: ellipsis!important; vertical-align: top!important; white-space: nowrap!important; transition: .6s ease-in-out!important; } .launchButtonNotice .flyAvatar{ width: 30px; height: 30px; border-radius: 50%; display: inline-block; border:1px solid #cccccc; float: left; } .flyAvatar{ width: 30px; height: 30px; border-radius: 50%; display: inline-block; border:2px solid #fff; float: left; margin-right: 5px; } .layui-layer-title .flyAvatar{ margin-top: 5px; } .launchButtonNotice .flyUsername{ font-weight: bold; float: left; margin-left: 4px; } .launchButtonNotice .flyUser{ height: 32px; overflow: hidden; line-height: 32px; margin-bottom: 4px; } .launchButtonNotice .flyClose{ float: right; display: inline-block; text-align: center; width: 30px; height: 30px; line-height: 30px; cursor: pointer; } #layui-layer1{ display: none; } .launchPointer{ background: #3cc51f; width: 10px; height: 10px; display: inline-block; border-radius: 50%; position: absolute; top: 25px; left: 42px; border:2px solid #fff; } .launchPointer.offline{ background: #ce3c39; } .folderBtn { display: inline-block; background-color: transparent; overflow: hidden; font-size: 1px; } .folderBtn:before { content: ''; float: left; background-color: #9da0a0; width: 15px; height: 3px; margin-left: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; box-shadow: 2px 2px 0 0 #9da0a0; } .folderBtn:after { content: ''; float: left; clear: left; background-color: #d4d6d6; width: 33px; height: 22px; border-radius: 1px; } @-webkit-keyframes bounce-up { 25% {-webkit-transform: translateY(4px);} 50%, 100% {-webkit-transform: translateY(0);} 75% {-webkit-transform: translateY(-4px);} } @keyframes bounce-up { 25% {transform: translateY(4px);} 50%, 100% {transform: translateY(0);} 75% {transform: translateY(-4px);} } .animateUpDown{ -webkit-animation: bounce-up 0.5s linear infinite; animation: bounce-up 0.5s linear infinite; } @media screen and (max-width: 500px) { .launchButtonBox{ width: 100%; left: 0; right: 0; bottom: 5px; text-align: center; } .launchButtonNotice{ width: 90%; left: 0; right: 0; text-align: left; } .launchButtonNotice:after{ right: 49%; } }