/**index.wxss**/ /*************loading*****************/ #loading-wrapper { position: relative; width: 100%; height: 100vh; overflow:hidden; z-index:99; transition:all 2s; } #loading-text { display: block; position: absolute; top: 55%; color: #999; width: 100%; height: 30px; text-align: center; font-family: 'PT Sans Narrow', sans-serif; font-size: 22rpx; } #loading-content { display: block; position: relative; left: 50%; top: 45%; width: 160rpx; height: 160rpx; margin: -80rpx 0 0 -80rpx; border: 1px solid #F00; } #loading-content:after { content: ""; position: absolute; border: 1px solid #0F0; left: 15px; right: 15px; top: 15px; bottom: 15px; } #loading-content:before { content: ""; position: absolute; border: 1px solid #00F; left: 5px; right: 5px; top: 5px; bottom: 5px; } #loading-content { border: 1px solid transparent; border-top-color: #4D658D; border-bottom-color: #4D658D; border-radius: 50%; -webkit-animation: loader 2s linear infinite; -moz-animation: loader 2s linear infinite; -o-animation: loader 2s linear infinite; animation: loader 2s linear infinite; } #loading-content:before { border: 1px solid transparent; border-top-color: #D4CC6A; border-bottom-color: #D4CC6A; border-radius: 50%; -webkit-animation: loader 3s linear infinite; -moz-animation: loader 2s linear infinite; -o-animation: loader 2s linear infinite; animation: loader 3s linear infinite; } #loading-content:after { border: 1px solid transparent; border-top-color: #84417C; border-bottom-color: #84417C; border-radius: 50%; -webkit-animation: loader 1.5s linear infinite; animation: loader 1.5s linear infinite; -moz-animation: loader 2s linear infinite; -o-animation: loader 2s linear infinite; } @-webkit-keyframes loaders { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } #header { width: 800px; margin: 0 auto; text-align: center; height: 100px; background-color: #666; } #content { width: 800px; height: 1000px; margin: 0 auto; text-align: center; background-color: #888; } .banner{position:relative;} .bannerImg{ width:100%; height:288rpx;} .clude{ position:absolute; top:25rpx; right:145rpx; width:98rpx; height:48rpx; transition:all 5s; animation:clude 5s infinite; } .clude1{ position:absolute; bottom:20%; right:8%; width:78rpx; height:40rpx; transition:all 5s; } @keyframes clude{ 0%{ transform:scale(0.6) translate(5rpx,5rpx); opacity: 0.1; } 20%{ transform:scale(0.7) translate(-10rpx,-5rpx); opacity: 0.3; } 40%{ transform:scale(0.8) translate(12rpx,2rpx); opacity: 0.4; } 60%{ transform:scale(0.9) translate(5rpx,5rpx); opacity: 0.5; } 80%{ transform:scale(1) translate(-1rpx,-3rpx); opacity: 0.7; } 100%{ transform:scale(1) translate(15rpx,5rpx); opacity: 1; } } @keyframes clude1{ 0%{ transform:scale(0.6) translate(-5rpx,-5rpx); opacity: 0.1; } 20%{ transform:scale(0.7) translate(10rpx,5rpx); opacity: 0.3; } 40%{ transform:scale(0.8) translate(-12rpx,-2rpx); opacity: 0.4; } 60%{ transform:scale(0.9) translate(-5rpx,-5rpx); opacity: 0.5; } 80%{ transform:scale(1) translate(1rpx,3rpx); opacity: 0.7; } 100%{ transform:scale(1) translate(-15rpx,-5rpx); opacity: 1; } } .custom{ width:120rpx; height:30rpx; border-radius:20rpx; background:#3497fd; line-height:30rpx; text-align:center; font-size:22rpx; color:#fff; margin-top:20rpx; } .module{ width:100%; height:140rpx; display:flex; margin-top:40rpx; margin-bottom:26rpx; text-align: center; } .module_item{ width:25%; text-align:center; } .item_top{ width:100%; height:60%; } .module_item span image{ width:84rpx;height:84rpx } .module_item .text{ width:100%; height:40%; color:#151515; font-size:20rpx; text-align:center; line-height:70rpx; } /********************服务类别*************************/ .service_tlt{ position:relative; left:24rpx; margin-bottom:26rpx;} .service_tlt image{ width:154rpx; height:40rpx;} .service_tlt .text1{ position:absolute; left:24rpx; top:0rpx; height:40rpx; display:inline-block; line-height:40rpx; font-size:30rpx; color:#fff; } .service_cont{ padding:0rpx 8rpx; } .service_cont text{display:block;} .service_left{ background:#f5f5f5; } .service_top{ background:#f5f5f5; padding:0rpx 18rpx; align-items:center; height:100%; } .serviceTright{ align-items:center; } .service_bottom{ background:#f5f5f5; padding:0rpx 18rpx 0rpx 18rpx; height:100%; align-items:center; } .service_left .text1{ margin-top:30rpx; } .service_left{text-align:center;} .service_cont .text2{ font-size:18rpx; color:#969696;} .service_right{ } .serviceTLeft .text1{ font-size:38rpx; color:#ffb66d; } .service_bottom{margin-top:8rpx;} .serviceBLeft{color:#21c5d4;font-size:38rpx;} .service_top image{width:135rpx;height:105rpx;} .serviceBright image{width:116rpx;height:116rpx;} .solely_more{ text-align:center; width:100%; position:relative; } .solely_more image{ width:100%; height:264rpx; } .service_cont{ width:98%; padding:0 1%; height:300rpx; flex-direction:row; display:flex; } .service_left{ width:50%; height:100%; overflow:hidden; background:#f5f5f5; } .service_right{ width:49%; margin-left:1%; height:100%; overflow:hidden; } .service_leftT{ width:100%; height:40%; align-items:center; } .service_leftB{ width:100%; height:60%; align-items:center; text-align:center; } .service_rightT{ width:100%; height:49%; background:#f5f5f5; align-items:center; } .service_rightB{ width:100%; margin-top:2%; height:49%; background:#f5f5f5; } .service_leftT .text1{ font-size:40rpx; color:#4fa8ff; } .service_left image{ width:129rpx; height:129rpx; } .solely_more{ margin-top:8rpx; text-align:center; width:100%; position:relative; } .solely_more text{ font-size:38rpx; color:#b4a078;} .solely_more .company_name{ position:absolute; top:72rpx; margin:0rpx auto; left:250rpx; width:250rpx; text-align:center; } .solely_more .more{ width:250rpx; height:58rpx; text-align:center; line-height:58rpx; font-size:28rpx; color:#b4a078; margin-top:18rpx; background:#f4e9ca; } .case{margin-top:32rpx; margin-bottom:130rpx; } .case_cont image{ width:485rpx; height:306rpx; float:right; } .case_right{ width:33%; height:306rpx; background:#dbf1f6; overflow:hidden; } .right_in{ height:256rpx; padding:50rpx 30rpx 0rpx 20rpx; } .case_cont .text1{ display:block; height:53%; font-size:22rpx; line-height:34rpx; color:#323232; overflow:hidden; word-break: break-all; text-overflow:ellipsis; } .right_more{ margin-top:15%; height:30%; } .case_more{ font-size:18rpx; background:#6ad6e2; width:142rpx; height:40rpx; line-height:40rpx; text-align:center; color:#fff; border-radius: 5rpx;} .case_top{margin-bottom:13rpx;} .case_top .case_left{ width:67%; height:306rpx; } .case_bottom .case_left{ width:67%; height:306rpx; text-align:right; } .case_bottom .case_left image{ float:right; } .case_bottom .case_right{ width:33%; } .img_scale{ width:485rpx; height:306rpx; overflow:hidden; } .service_left image{ transition:all 10s; animation:rotate 10s infinite; } .service_left:hover.service_left image{ transform:rotate(360deg); } @keyframes rotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .swiper-ai image{ width: 100%; } .swiper-ai swiper{ height:240px; }