*,::before,::after{ padding: 0; margin: 0; /*去除在所有的浏览器当中点击过后有一个高亮的效果*/ -webkit-tap-highlight-color: transparent; /*需要设置所有的元素宽度以边框开始计算*/ -webkit-box-sizing: border-box; box-sizing: border-box; } /*清楚移动端浏览器对表单的默认样式*/ input[type="text"],input[type="search"],input[type="tel"],textarea,button{ border: 0; resize: none; outline: none; -webkit-appearance: none; /*清除移动浏览默认的样式,表单的立体阴影一类*/ } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-family: PingFangSC-Regular; font-size: 0.32rem; color: #CCCCCC; letter-spacing: 0; } a { color:#333;text-decoration:none } a:active, a:hover { text-decoration:none } /*清除浮动*/ .clearfix::after, .clearfix::before{ content: "."; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } body,input{ font: 14px/1.5 Arial,verdana,'Hiragino Sans GB','Microsoft Yahei',sans-serif; font-family: PingFangSC-Regular, Roboto-Regular; -webkit-font-smoothing:antialiased; padding-bottom:constant(safe-area-inset-bottom); } .main-box{ width: 7.5rem; margin: 0 auto; overflow: hidden; } .bg-blue { background: #FFF; } .main-box>img:nth-child(1){ width: 7.5rem; height: auto; } .send-form{ position: relative; width: 7.5rem; background-color: #FFF; box-shadow: inset 2px -15px 15px 5px rgba(255,132,97,0.16); } .send-form>form{ padding: 0.4rem; padding-top: 0.2rem; } .send-form>form>div:nth-child(1), .send-form>form>div:nth-child(2){ width: 6.7rem; display: flex; flex-direction: row; padding: 0.26rem; border: 1px solid #f5f5f5; } .send-form>form>div:nth-child(1) { border-radius: 4px 4px 0 0; } .send-form>form>div:nth-child(2){ border-top: 0; border-radius: 0 0 4px 4px; } .send-form>form>div:nth-child(1)>label, .send-form>form>div:nth-child(2)>label { width: 1.32rem; height: 0.44rem; font-family: PingFangSC-Regular; font-size: 0.32rem; color: #333333; letter-spacing: 0; margin-right: 0.4rem; } .send-form>form>div:nth-child(1)>input, .send-form>form>div:nth-child(2)>input { width: 4.26rem; height: 0.44rem; font-family: PingFangSC-Regular; font-size: 0.32rem; color: #000; letter-spacing: 0; } .send-form>form>button{ width: 6.7rem; height: 1rem; background: linear-gradient(to right, #FF9F60 , #FF6C60 ); color: #FFF; border-radius: 6px; font-family: PingFangSC-Regular; font-size: 0.34rem; letter-spacing: 0; margin-top: 0.4rem; margin-bottom:0.16rem; box-shadow: 0 2px 8px 0 rgba(255,132,97,0.45); } .successCase{ width: 7.5rem; background-color: #163EA7; padding-bottom: 0.2rem; } .successCase>div:nth-child(1){ width: 7.5rem; height: auto; display: flex; } .successCase>div:nth-child(1)>img{ width: 4.5rem; height: 1.21rem; margin: 0.36rem auto; } /* 成功案例01 */ .successCase>div:nth-child(2){ border-radius: 10px; width: 6.86rem; margin: 0 0.32rem 0.32rem; background: #FFF; } .successCase>div:nth-child(2)>div:nth-child(1){ width: 6.86rem; background: #5856D6; border-radius: 10px 10px 0 0; color: #FFFFFF; padding: 0.1rem 0.24rem; display: flex; align-items: center; } .successCase>div:nth-child(2)>div:nth-child(1)>text:nth-child(1) { font-weight: 700; font-size: 0.9rem; line-height: 1rem; background: linear-gradient(to top, #5856D6 , #B6B4FF); -webkit-background-clip: text; background-clip: text; color: transparent; } .successCase>div:nth-child(2)>div:nth-child(1)>text:nth-child(2) { font-size: 0.48rem; font-weight: 700; letter-spacing: 0; background: linear-gradient(to top, #5856D6 , rgb(220, 219, 255) ,#FFFFFF ); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 10px; } .successCase>div:nth-child(2)>div:nth-child(2){ padding: 0.48rem; box-shadow: inset 1px -10px 15px 6px rgba(0,127,255,0.08); } .successCase>div:nth-child(2)>div:nth-child(2)>div:nth-child(1){ display: flex; flex-direction: row; align-items: center; } .successCase>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>img:nth-child(1) { width: 0.5rem; height: auto; margin-left: -10px; } .successCase>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>img:nth-child(2) { width: 5.28rem; height: auto; margin-left: 10px; } .successCase>div:nth-child(2)>div:nth-child(2)>p:nth-child(2), .successCase>div:nth-child(2)>div:nth-child(2)>p:nth-child(3) { font-family: PingFangSC-Regular; font-size: 0.28rem; color: #333333; letter-spacing: 0; text-align: justify; line-height: 0.42rem; margin: 0.4rem 0 0.2rem; } .successCase>div:nth-child(2)>div:nth-child(2)>p:nth-child(3){ margin: 0 0 0.4rem; } .successCase>div:nth-child(2)>div:nth-child(2)>img:nth-child(4) { width: 5.9rem; height: auto; } .successCase>div:nth-child(2)>div:nth-child(2)>div:nth-child(5) { font-size: 0.26rem; color: #666666; letter-spacing: 0; text-align: justify; line-height: 0.44rem; padding-top: 0.2rem; } /* 成功案例01 */ /* 成功案例02 */ .successCase>div:nth-child(3){ border-radius: 10px; width: 6.86rem; margin: 0 0.32rem 0.32rem 0.32rem; background: #FFF; } .successCase>div:nth-child(3)>div:nth-child(1){ width: 6.86rem; background: #5856D6; border-radius: 10px 10px 0 0; color: #FFFFFF; padding: 0.1rem 0.24rem; display: flex; align-items: center; } .successCase>div:nth-child(3)>div:nth-child(1)>text:nth-child(1) { font-weight: 700; font-size: 0.9rem; line-height: 1rem; background: linear-gradient(to top, #5856D6 , #B6B4FF); -webkit-background-clip: text; background-clip: text; color: transparent; } .successCase>div:nth-child(3)>div:nth-child(1)>text:nth-child(2) { font-size: 0.48rem; font-weight: 700; letter-spacing: 0; background: linear-gradient(to top, #5856D6 , rgb(220, 219, 255) ,#FFFFFF ); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 10px; } .successCase>div:nth-child(3)>div:nth-child(2){ padding: 0.48rem; box-shadow: inset 1px -10px 15px 6px rgba(0,127,255,0.08); } .successCase>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1){ display: flex; flex-direction: row; align-items: center; } .successCase>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>img:nth-child(1) { width: 0.5rem; height: auto; margin-left: -10px; } .successCase>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>img:nth-child(2) { width: 5.28rem; height: auto; margin-left: 10px; } .successCase>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>p:nth-child(2), .successCase>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3) { font-family: PingFangSC-Regular; font-size: 0.28rem; color: #333333; letter-spacing: 0; text-align: justify; line-height: 0.42rem; margin: 0.4rem 0 0.2rem; } .successCase>div:nth-child(3)>div:nth-child(2)>div:nth-child(1)>p:nth-child(3){ margin: 0; } .successCase>div:nth-child(3)>div:nth-child(2)>img:nth-child(2) { width: 6.86rem; height: auto; margin-left: -0.48rem; } .successCase>div:nth-child(3)>div:nth-child(2)>div:nth-child(3) { width: 5.9rem; font-size: 0.28rem; letter-spacing: 0; color: #333333; line-height: 0.44rem; margin-top: -0.2rem; } /* 成功案例02 */ /* 成功案例03 */ .successCase>div:nth-child(4){ border-radius: 10px; width: 6.86rem; margin: 0 0.32rem 0.32rem; background: #FFF; } .successCase>div:nth-child(4)>div:nth-child(1){ width: 6.86rem; background: #5856D6; border-radius: 10px 10px 0 0; color: #FFFFFF; padding: 0.1rem 0.24rem; display: flex; align-items: center; } .successCase>div:nth-child(4)>div:nth-child(1)>text:nth-child(1) { font-weight: 700; font-size: 0.9rem; line-height: 1rem; background: linear-gradient(to top, #5856D6 , #B6B4FF); -webkit-background-clip: text; background-clip: text; color: transparent; } .successCase>div:nth-child(4)>div:nth-child(1)>text:nth-child(2) { font-size: 0.48rem; font-weight: 700; letter-spacing: 0; background: linear-gradient(to top, #5856D6 , rgb(220, 219, 255) ,#FFFFFF ); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 10px; } .successCase>div:nth-child(4)>div:nth-child(2){ padding: 0.48rem; box-shadow: inset 1px -10px 15px 6px rgba(0,127,255,0.08); } .successCase>div:nth-child(4)>div:nth-child(2)>div:nth-child(1){ display: flex; flex-direction: row; align-items: center; } .successCase>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>img:nth-child(1) { width: 0.5rem; height: auto; margin-left: -10px; } .successCase>div:nth-child(4)>div:nth-child(2)>div:nth-child(1)>img:nth-child(2) { width: 5.28rem; height: auto; margin-left: 10px; } .successCase>div:nth-child(4)>div:nth-child(2)>p:nth-child(2) { font-family: PingFangSC-Regular; font-size: 0.28rem; color: #666666; letter-spacing: 0; text-align: justify; line-height: 0.42rem; margin: 0.4rem 0 0.4rem; } .successCase>div:nth-child(4)>div:nth-child(2)>img:nth-child(3) { width: 5.9rem; height: auto; } .successCase>div:nth-child(4)>div:nth-child(2)>p:nth-child(4) { font-size: 0.28rem; color: #333333; letter-spacing: 0; text-align: justify; line-height: 0.42rem; padding-top: 0.2rem; } /* 成功案例03 */ /* 适用场景 */ .successCase>div:nth-child(5){ border-radius: 10px; width: 6.86rem; margin: 0 0.32rem; background: #FFF; } .successCase>div:nth-child(5)>div:nth-child(1){ width: 6.86rem; background: #5856D6; border-radius: 10px 10px 0 0; color: #FFFFFF; padding: 0.1rem 0.24rem; display: flex; align-items: center; } .successCase>div:nth-child(5)>div:nth-child(1)>text:nth-child(1) { font-size: 0.48rem; font-weight: 700; letter-spacing: 0; background: linear-gradient(to top, #5856D6 , rgb(220, 219, 255) ,#FFFFFF ); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 10px; } .successCase>div:nth-child(5)>div:nth-child(2){ padding: 0.48rem; box-shadow: inset 1px -10px 15px 6px rgba(0,127,255,0.08); } .successCase>div:nth-child(5)>div:nth-child(2)>p:nth-child(1) { font-family: PingFangSC-Regular; font-size: 0.3rem; font-weight: 700; color: #333333; letter-spacing: 0; text-align: justify; line-height: 0.42rem; margin-bottom: 0.2rem; } .successCase>div:nth-child(5)>div:nth-child(2)>img:nth-child(2) { width: 5.9rem; height: auto; } /* 适用场景 */ .successCase>div:nth-child(6){ opacity: 0.4; font-size: 0.3rem; color: #FFFFFF; text-align: center; line-height: 0.4rem; margin: 0.5rem 0; } .successCase>div:nth-child(6)>p:nth-child(1){ margin-bottom: 10px; -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; } .successCase>div:nth-child(6)>p:nth-child(2){ font-size: 0.28rem; } .successCase>div:nth-child(7){ width: 7.5rem; height: 1.12rem; } .customer-btn{ position: fixed; bottom: 0; width: 7.5rem; height: 1.2rem; background: #FFF; display: flex; flex-direction: row; padding-bottom: env(safe-area-inset-bottom); } .customer-btn>div:nth-child(1){ width: 1.58rem; height: 0.84rem; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0.16rem 0; } .customer-btn>div:nth-child(1)>img { width: 0.48rem; height: 0.48rem; } .customer-btn>div:nth-child(1)>div { font-family: PingFangSC-Medium; font-size: 0.22rem; color: #666666; text-align: center; line-height: 0.32rem; } .customer-btn>div:nth-child(2) { width: 2.8rem; height: 0.84rem; line-height: 0.84rem; text-align: center; font-size: 0.32rem; color: #FFF; border-radius: 4px; margin: 0.16rem 0.16rem 0.6rem 0; box-shadow: 0 2px 8px 0 rgba(67,175,252,0.45); background: linear-gradient(to right, #58CDFF , #3296FB ); } .customer-btn>div:nth-child(2)>a { color: #FFF; font-size: 0.32rem; } .customer-btn>button:nth-child(3) { width: 2.8rem; height: 0.84rem; line-height: 0.84rem; text-align: center; font-size: 0.32rem; color: #FFF; border-radius: 4px; margin: 0.16rem 0.16rem 0.6rem 0; box-shadow: 0 2px 8px 0 rgba(255,132,97,0.45); background: linear-gradient(to right, #FF9F60 , #FF6C60 ); }