.sideBar { position: fixed; right: 0; top: 40%; transform: translateY(-50%); z-index: 998; } .Fast_contact { position: fixed; right: 0; top: 50%; margin-top: 94px; z-index: 1001; } .Fast_contact ul li.onlineservice_li { width: 48px; height: 48px; position: relative; text-align: center; margin-bottom: 5px; background-color: rgba(9,104,178,1); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; opacity:.8; } .Fast_contact ul li.onlineservice_li:hover { opacity:1; } .Fast_contact ul>li.onlineservice_li>a { display: inline-block; width: 28px; height: 28px; margin-top: 10px; } .Fast_contact ul>li:hover .onlineservice_tips { -webkit-transform: rotateX(0); transform: rotateX(0); } .onlineservice_tips { padding: 5px 8px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; position: absolute; right: 58px; top: 6px; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transition: all .4s; transition: all .4s; } .onlineservice_tips li { width: auto; height: auto; white-space: nowrap; } .onlineservice_tips li a { display: block; min-height: 22px; text-align: center; line-height: 22px; color: #737578; font-size: 15px; } .onlineservice_tips:after { content: ""; display: inline-block; width: 10px; height: 10px; border: 1px solid #ccc; border-color: transparent #ccc #ccc transparent; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: -6px; top: 10px; background-color: #fff; transition: all .3s; } .side1 i { margin: 10px auto; width: 1px; height: 20px; background: #fff; transition: all 0.5s ease; } .side { height: 48px; position: absolute; transition: all 0.5s; } .side a { display: block; height: 48px; font-size: 0; } .side i, .side span { display: inline-block; vertical-align: middle; height: 100%; line-height: 50px; } .side i { width: 48px; text-align: center; background: rgba(9,104,178,1); transition: all 0.3s; border-radius:5px; opacity:.8; } .side i img { vertical-align: middle; } .side span { text-align: center; line-height: 50px; background: #232323; font-size: 13px; color: #fff; transition: all 1s; } .Fast_contact ul li.onlineservice_li:nth-child(1) { background-image: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2022122713371271627/cms/image/50db76bb-e145-424a-98d5-64d5b7e16010.png); background-repeat: no-repeat; background-size: 30px; background-position: center; } .Fast_contact ul li.onlineservice_li:nth-child(2) { background-image: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2022122713371271627/cms/image/abf01b0c-59ab-47a0-a419-7e63a171b696.png); background-repeat: no-repeat; background-size: 28px; background-position: center; } .Fast_contact ul li.onlineservice_li:nth-child(3) { background-image: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2022122713371271627/cms/image/dbac6bf1-426d-49b6-b598-05a73b0d09a7.png); background-repeat: no-repeat; display:none; background-size: 28px; background-position: center; } .Fast_contact ul li.onlineservice_li:nth-child(4) { background-image: url(https://omo-oss-image1.thefastimg.com//portal-saas/new2022122713371271627/cms/image/073c703e-603b-4c90-a1f0-43e22d230c3e.png); background-repeat: no-repeat; background-size: 26px; background-position: center; } .qcodePic { width: 100%; position: absolute; top: 50px; left: 0; display: none; z-index: 99; text-align: center; background: #fff; border: 1px solid #e5e5e5; } .qcodePic img{ width: 100%; } .side5:hover .qcodePic { display: block; } .side6 { right: 0px; width: 48px; top: 254px; cursor: pointer; } .side6 span { width: 90px; font-size: 14px; display:none; } .side:hover { right: 0; } .side:hover i { opacity:1; } .wxPic { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.8); z-index: 9999; display: none; } .wxPic img { width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .m-foot { position: fixed; bottom: 0; left: 0; z-index: 999; width: 100%; background: #f5f5f5; display: none; } .m-foot ul { font-size: 0; text-align: center; height: 54px; } .m-foot ul li { float: left; width: 20%; height: 54px; display: flex; justify-content: center; align-items: center; border-left: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb; } .m-foot ul li:nth-child(3) { background: #e80101; border-left: none; border-top: 1px solid #e80101; } .m-foot ul li:nth-child(3) span { color: #fff !important; } .m-foot ul li:first-child, .m-foot ul li:nth-child(4) { border-left: none; } .m-foot ul li span, .m-foot ul li img { display: block; margin: 6px auto; } .m-foot ul li span { line-height: 14px; font-size: 12px; color: #1a1a1a; transition: all 0.4s; } .m-foot ul li:hover span { color: #e80101; } .wyz { position: fixed; width: 50px; height: 50px !important; right: 6px; bottom: 150px; z-index: 90; display: none; } @media only screen and (max-width: 768px) { .sideBar { display: block; } .m-foot { display: block; } .wyz { display: block; } }