@import "./common/common"; @import "./common/header.css"; @import "./common/pro-header"; @import "./common/footer.css"; @import "./common/pro-banner"; @import "./common/sectionAbout";//左图右文 @import "./common/linkNews";//相关资讯 @import "./common/freeUse"; @import "./common/tabBar"; @import "./common/slideCase"; //客户案例 @import "./common/sectionPrice"; //价格 @import "./common/versionInfoTable"; //版本信息表格 @import "./common/problemAnswer"; //常见问题及解答 .navbar-iphone ul{ display: table; width: 100%; li{ display: table-cell; width: 33.3%; margin: 0; text-align: center; } } .price-fixed-box { position: fixed; top: 80px; left: 0; right: 0; height: 150px; padding: 21px 0 43px; background: rgba(251, 251, 255, 0.7); backdrop-filter: blur(4px); z-index: 99; opacity: 0; visibility: hidden; transition: all .4s ease-out; .container { display: flex; flex-wrap: wrap; justify-content: space-between; .price-empty-box { width: 260px; } .price-item-box { width: 152px; text-align: center; .price-item-title { font-size: 24px; font-weight: 500; color: #0A0D2C; line-height: 33px; } .price-item-btn { display: block; margin-top: 13px; padding: 10px 0; background: linear-gradient(180deg, #A0A2B4 0%, #BDBECD 100%); border-radius: 8px; font-size: 16px; text-align: center; font-weight: 500; color: #FFFFFF; line-height: 20px; letter-spacing: 1px; cursor: pointer; &:hover { box-shadow: 0px 7px 12px 0px rgba(89, 90, 101, 0.17) !important; backdrop-filter: blur(0px); cursor: pointer; } } } .price-item-box-bac1 { .price-item-btn { background: linear-gradient(180deg, #A0A2B4 0%, #BDBECD 100%); } } .price-item-box-bac2 { .price-item-btn { background: linear-gradient(180deg, #3DB8FF 0%, #76CDFF 100%); } } .price-item-box-bac3 { .price-item-btn { background: linear-gradient(180deg, #4F5BFF 0%, #757EFF 100%); } } .price-item-box-bac4 { .price-item-btn { background: linear-gradient(180deg, #FF6A6A 0%, #FF8686 100%); } } .price-item-box-bac5 { .price-item-btn { background: linear-gradient(180deg, #8A58FF 0%, #A57EFF 100%); } } .price-item-box-bac6 { .price-item-btn { background: linear-gradient(180deg, #F6BA39 0%, #FFD67C 100%); } } } } /*产品简介 功能介绍 价格*/ .productContent{ width: 100%; height: auto; overflow: hidden; .CIAIntroduce { .section-about { .right-content-area { p { text-indent: -12px; padding-left: 12px; } a { // min-width: 140px; // border-radius: 50px; // padding: 1rem 2.3rem; // font-size: 1.6rem; // background-color: #FF8A22; // background-image: none; // color: #fff; // border-color: #FF8A22; // &:hover { // background-color: #fb7442; // } } } } } //.productInfo{ // display: none; //} .allimg { width: 100%; height: 35vw; position: relative; .icon { display: block; position: relative; z-index: 8; cursor: pointer; width: 8vw; height: 8vw; border-radius: 9vw; background-color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; box-shadow: 0px 6px 4px 5px rgba(39,117,255, 0.1); transition: all .2s ease-in-out; transform: translateY(0); &:hover { transform: translateY(-10px); } img { width: 55%; } } .i-title { font-size: 1.2vw; text-align: center; font-weight: bold; } .icon1 { position: absolute; top: 5%; left: 50%; margin-left: -4vw; .icon2 { position: absolute; top: 87%; left: -145%; } .icon3 { position: absolute; top: 190%; left: 0%; } .icon4 { position: absolute; top: 87%; left: 145%; } .icon5 { position: absolute; top: 87%; left: 310%; } .icon6 { position: absolute; top: 87%; left: -310%; } } .line1 { position: absolute; top: 125%; left: -202%; width: 4vw; } .line2 { position: absolute; top: 15%; left: -92%; width: 7vw; } .line3 { position: absolute; top: 190%; left: -92%; width: 7vw; } .line4 { position: absolute; top: 15%; left: 105%; width: 22vw; } .line5 { position: absolute; top: 50%; left: 105%; width: 20vw; } .line6 { position: absolute; top: 186%; left: 105%; width: 20vw; } .line7 { position: absolute; top: 200%; left: 105%; width: 22vw; } } .productFeatures{ .section-about{ background: url('../images/bg2.png') 0 350px no-repeat; background-size: cover; .row{ padding: 90px 0; } /*功能介绍*/ .img-wrapper{ width: 40rem; } } } } /*产品简介*/ .section-info{ // background: url('../images/index/case-bg.png'); // background-size: cover; .item-bg { width: 80%; height: 100%; margin: 0 auto; padding: 30px 0px 20px; background:rgba(247,248,250,1); border-radius:10px; } } .versionInfoTable{ margin-bottom: 0; tr td{ width: 20%; &.noPadding { padding: 0; } } } .versionInfoTable .versionCont { margin: 0 5px 60px; border-bottom: none; background-color: #fff; } .versionFee{ min-height: 440px; box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.16); border-radius: 12px; overflow: hidden; transition: all .3s ease-out; &:hover { transform: translateY(-10px); box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.30); } .versionFeeInfo{ padding-bottom: 0; .versionBg { height: 90px; color: #fff; position: relative; &.bg1 { background: linear-gradient(180deg, #A0A2B4 0%, #BDBECD 100%); } &.bg2 { background: linear-gradient(180deg, #3DB8FF 0%, #76CDFF 100%); } &.bg3 { background: linear-gradient(180deg, #4F5BFF 0%, #757EFF 100%); } &.bg4 { background: linear-gradient(180deg, #FF6A6A 0%, #FF8686 100%); } &.bg5 { background: linear-gradient(180deg, #8A58FF 0%, #A57EFF 100%); } &.bg1 ~ button, &.bg2 ~ button, &.bg3 ~ button, &.bg4 ~ button, &.bg5 ~ button { font-size: 16px; font-weight: 500; color: #FFFFFF !important; line-height: 20px; letter-spacing: 1px; border: none; background: linear-gradient(180deg, #A0A2B4 0%, #BDBECD 100%); } &.bg2 ~ button { background: linear-gradient(180deg, #3DB8FF 0%, #76CDFF 100%); } &.bg3 ~ button { background: linear-gradient(180deg, #4F5BFF 0%, #757EFF 100%); } &.bg4 ~ button { background: linear-gradient(180deg, #FF6A6A 0%, #FF8686 100%); } &.bg5 ~ button { background: linear-gradient(180deg, #8A58FF 0%, #A57EFF 100%); } img { width: 80px; height: 80px; position: absolute; bottom: 0; right: 0; } h3 { color: #fff; font-size: 2.4rem; height: initial; line-height: 2.4rem; padding-top: 25px; padding-bottom: 0; } p { margin-bottom: 0; font-size: 12px; } } .priceContent { padding: 30px 0 25px; color: #0A0D2C; span { font-size: 1.2rem; &.price-num { font-size: 4.4rem; line-height: 6rem; } } } .versionInfo { padding: 10px 20px; text-align: left; margin-bottom: 10px; p { margin-bottom: 15px; span { display: inline-block; font-size: 1.4rem; margin-bottom: 0; color: #828499; &.right { float: right; } } } } .btn { border-radius: 8px; height: 40px; line-height: 40px; padding: 0; } p{ margin-bottom: 30px; } .tiptag{ height: 24px; font-size: 14px; line-height: 24px; margin-bottom: 20px; } .activeTip{ height: 16px; font-size: 14px; color: #ff8a3a; } .activeTip2{ height: 45px; font-size: 14px; color: #ff8a3a; } } } //CIA 通过ALert,您可以 .price-box { width: 100%; background:rgba(247,248,250,1); padding: 30px 0 70px; .item-bg { //background: #fff; } .price-title { height: 170px; h2 { height: 100px; text-align: center; line-height: 125px; font-size: 4.2rem; } .bottom { height: 14px; margin-top: 15px; .bimg { width: auto; height: auto; margin: 0 auto; } } } .item-wrapper { background: #fff; width: 100%; margin: 0 auto; padding: 20px 0 60px; box-shadow:0px 13px 30px 0px rgba(17,101,251,0.14); border-radius: 5px; position: relative; .topright { position: absolute; top: 0; right: 0; width: auto; height: auto; } .tuij { color: #fff; font-size: 16px; position: absolute; top: 0; right: 0; -webkit-transform: rotate(45deg); top: 15px; right: 13px; } .price-icon { img { width: auto; height: auto; margin: 0 auto; } } .item-title { .title1 { font-size: 28px; text-align: center; margin-bottom: 5px; } .title2 { font-size: 14px; color: #657180; text-align: center; } } .phone-num { height: 100px; padding-top: 25px; text-align: center; .p1 { font-size: 28px; } .p2 { color: #657180; font-size: 14px; margin-top: 5px; } } .item-num { height: 100px; line-height: 100px; p { font-size: 18px; text-align: center; .num-icon { color: #FF7D3E; } .num { color: #FF7D3E; font-size: 42px; } } } .price-btn { text-align: center; } .test-now { width: 200px; text-align: center; margin-left: -100px; color: #1165FB; font-size: 12px; position: absolute; bottom: 20px; left: 50%; cursor: pointer; } } } .advantage{ padding-top: 50px; position: relative; .right-border { position: absolute; top: 60%; right: 0; margin-top: -75px; width: 10px; height: 150px; border-left: 1px solid #eee; } .left-border { position: absolute; top: 60%; left: 0; margin-top: -75px; width: 10px; height: 150px; border-left: 1px solid #eee; } h3{ font-size: 3rem; color:@fontColor; line-height: 3.75rem; } h2{ font-size: 5.5rem; line-height: 8rem; color: @mainColor; margin: 30px 0; } p{ font-size: 2rem; line-height: 2rem; color: #657180; } } //功能免费版流量价格 .typePrice{ font-weight: normal; margin-top: 12px; font-size: 16px; //line-height: 34px; b{ color: #006dff; } } .section-product-nav{ //overflow: unset; li{ position: relative; } } .tagbox{ position: absolute; right: -52px; top: 15px; } .tiptext { display: block; font-size: 12px; color: #fff; width: 70px; height: 30px; background: red; position: relative; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; line-height: 30px; } .tiptext:before { content:""; position: absolute; right: 100%; top: 8px; width: 0; height: 0; border-top: 6px solid transparent; border-right: 12px solid red; border-bottom: 6px solid transparent; } .navbar-productMain ul .animation-box{ .animation-img{ width: auto; height: 60px; position: absolute; top: -33px; left:-60px; //display: none; opacity: 1; animation:fadeIn 5s infinite 1s; //动画名称 动画持续时间 动画次数 延迟时间 } .animation-text{ position: absolute; top: -33px; left: 25px; animation:fadeIn 5s infinite 1.3s; //动画名称 动画持续时间 动画次数 延迟时间 } &:hover .nav-link{ border-bottom: 2px solid rgba(0, 109, 255, 0); } } .navbar-productMain .animation-box.active .nav-link{ border-bottom: 2px solid rgba(0, 109, 255, 0); } @-webkit-keyframes fadeIn { 0% { opacity: 1; /*初始状态 透明度为0*/ top:-33px; } 25% { opacity: 0; top:23px; } 50% { opacity: 1; top:-33px; } 75% { opacity: 1; top:-33px; } 100% { opacity: 1; /*结尾状态 透明度为1*/ top:-33px; } } @media (max-width: 992px) { .advantage{ padding-top: 50px; h3{ font-size: 2rem; } h2{ font-size: 4rem; margin: 0; } p{ font-size: 1.4rem; line-height: 20px; } } .animation-box{ display: none !important; } .pacont { width: 100%!important; } .answer { width: 100%!important; position: initial!important; } .fixedVersion { display: none!important; } } .icon-introduce { position: relative; .text { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; .content { margin-top: -15px; margin-left: 40%; font-size: 1.5vw; } } } .CA-price-box { // font-family: 'Regular'; } .section-rotate { min-height: auto; padding-top: 160px; .banner-text { text-align: center; font-size: 40px; font-weight: 500; color: #0A0D2C; line-height: 62px; // font-family: 'Heavy'; } .banner-box { position: absolute; top: 0; z-index: -1; } } .innerTable { margin-bottom: 40px; border-radius: 12px; border: 1px solid #E1E4ED; overflow: hidden; table { width: 100%; thead { tr { background-color: #F7F8FC; border-bottom: 1px solid #E6E9F2; td { color: #0A0D2C; &:first-child { font-size: 22px; font-weight: 500; color: #0A0D2C; span { position: relative; &::before, &::after { position: absolute; width: 10px; height: 1px; bottom: 0; top: 0; margin: auto; background: #828499; content: ''; } &::before { left: -17px; } &::after { right: -17px; } } } .link { font-size: 12px; font-weight: 400; color: #404DFF; } } } } tbody { tr { &:last-child { border-bottom: none; } } } tr { border-bottom: 1px solid #E6E9F2; td { width: 15%; font-size: 14px; border: none; color: #606272; &:first-child { width: 25%; font-weight: 500; color: #0A0D2C; } .checkMark { color: #404DFF; font-size: 20px; } } } } } .problem-box { & > :nth-child(1) { .title { font-size: 40px; font-weight: 500; color: #0A0D2C; line-height: 62px; // font-family: 'Heavy'; } .problemOrAnswer { .problemOrAnswerBox { position: relative; padding-bottom: 50px; margin-bottom: 50px; .red { color: #FA4545; margin-bottom: 10px; } .blue { color: #006DFF; margin-bottom: 10px; font-size: 1.6rem; } .pacont { width: 50%; border-radius: 40px 40px 0px 40px; box-shadow: 0px 6px 22px 0px rgba(130, 132, 153, 0.22); background-color: #fff; position: relative; z-index: 1; } .answer { padding: 55px 60px 55px 200px; width: 65%; background: #F7F8FC; border-radius: 40px 40px 40px 0px; position: absolute; right: 0; top: 50px; line-height: 24px; font-size: 1.4rem; } } } } & >:nth-child(2) {} & > :nth-child(3) { margin-bottom: 180px; .problemOrAnswer{ .pacont{ box-shadow:0px 0px 30px 0px rgba(0,0,0,0.08); padding: 45px 60px; margin-bottom: 40px; h2{ font-size: 2.4rem; color: @fontColor; line-height: 33px; margin-bottom: 24px; } p{ font-size: 1.6rem; color: #657180; line-height: 22px; } } .pacont:hover{ box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3); } } } .problem-content-item { display: none; } } .modal-7-box { padding: 25px 0 65px; background: #0A0D2C; .container { display: flex; justify-content: space-between; .card-left { width: 307px; height: 199px; img { width: 100%; height: 100%; } } .card-right { padding-top: 62px; & > :first-child { font-size: 44px; font-weight: 600; color: #FFFFFF; line-height: 62px; } & >:last-child { display: block; float: right; width: 140px; height: 44px; margin-top: 23px; background: #545FFF; border-radius: 8px; font-size: 16px; font-weight: 500; color: #FFFFFF; line-height: 44px; letter-spacing: 1px; text-align: center; cursor: pointer; &:hover { background-color: #2C38E9; transition: all .3s; } } } } } .fixedVersion { display: none; background-color: transparent; } .col-1-5 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; min-height: 1px; } .modal-2 { .container { padding: 0; .content { padding-top: 55px; text-align: center; .tabs-box { display: inline-block; background: #F7F8FC; border-radius: 28px; backdrop-filter: blur(0px); .tabs-item { display: inline-block; padding: 13px 40px; font-size: 18px; font-weight: 500; color: #323334; line-height: 30px; cursor: pointer; border-radius: 50px; &:hover { color: #404DFF; border-color: #404DFF; background: #FFFFFF; box-shadow: 0px 4px 12px 0px rgba(130, 132, 153, 0.18); } } .tabs-item-active { color: #404DFF; border-color: #404DFF; background: #FFFFFF; box-shadow: 0px 4px 12px 0px rgba(130, 132, 153, 0.18); } } .text-desc { margin-top: 50px; text-align: center; font-size: 14px; font-weight: 400; color: #646566; line-height: 20px; } .tabs-content { display: flex; flex-wrap: wrap; margin-top: 50px; padding-bottom: 50px; justify-content: center; .price-card{ display: flex; overflow: hidden; flex-direction: column; width: 212px; height: auto; margin: 0 8px 16px; padding-bottom: 15px; background: #FFFFFF; box-shadow: 0px 10px 22px 0px rgba(130, 132, 153, 0.16); border-radius: 12px; opacity: 0; transform: translateX(100%); transition: all .4s ease-out; &:hover { transform: translateY(-15px) !important; transition-delay: 0s !important; box-shadow: 0px 14px 26px 0px rgba(130, 132, 153, 0.25); } .card-title { overflow: hidden; position: relative; padding: 17px 0; flex-shrink: 0; font-size: 24px; font-weight: 600; color: #FFFFFF; line-height: 30px; text-align: center; &::after { position: absolute; content: ''; width: 70px; height: 70px; bottom: -10px; right: -5px; } .card-desc { font-size: 12px; font-weight: 400; color: #FFFFFF; line-height: 17px; text-align: center; } } .card-top { overflow: hidden; display: flex; flex-direction: column; justify-content: space-around; flex-shrink: 0; .money { padding: 10px 0; font-size: 12px; font-weight: 400; color: #0A0D2C; line-height: 17px; text-align: center; & > span { font-size: 44px; font-weight: 500; color: #0A0D2C; line-height: 62px; } } .top-text { text-align: center; font-size: 24px; font-weight: 500; color: #323334; line-height: 33px; } } .register-now { display: block; width: 152px; margin: 20px auto 0; padding: 10px 0; flex-shrink: 0; font-size: 16px; font-weight: 500; color: #FFFFFF; letter-spacing: 1px; border-radius: 8px; text-align: center; background: linear-gradient(180deg, #A0A2B4 0%, #BDBECD 100%); cursor: pointer; } .register-now2 { background: linear-gradient(180deg, #3DB8FF 0%, #76CDFF 100%); border-radius: 8px; } .register-now3 { background: linear-gradient(180deg, #4F5BFF 0%, #757EFF 100%); border-radius: 8px; } .register-now4 { background: linear-gradient(180deg, #FF6A6A 0%, #FF8686 100%); border-radius: 8px; } .register-now5 { background: linear-gradient(180deg, #8A58FF 0%, #A57EFF 100%); border-radius: 8px; } .register-now6 { background: linear-gradient(180deg, #F6BA39 0%, #FFD67C 100%); border-radius: 8px; } .ahref { margin-top: 8px; text-align: center; a { font-size: 12px; font-weight: 400; color: #404DFF; line-height: 17px; cursor: pointer; } } .ahref-close { visibility: hidden; } .power { flex: 1; position: relative; min-height: 100px; margin-top: 20px; padding: 0 20px; & > div { margin-bottom: 16px; & > p { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 400; color: #828499; line-height: 17px; & > .iconfont { font-size: 14px; } } } .introduce { height: 40px; position: absolute; left: 0; right: 0; top: -50px; bottom: 0; margin: auto; transform: translateY(50%); font-size: 16px; text-align: center; color: #0A0D2C; line-height: 33px; text-align: center; .phone { margin-left: -5px; font-size: 26px; font-weight: 600; color: #854CD6; text-align: center; white-space: nowrap; } } } &:nth-child(2) { transition-delay: 0.2s; } &:nth-child(3) { transition-delay: 0.3s; } &:nth-child(4) { transition-delay: 0.4s; } &:nth-child(5) { transition-delay: 0.5s; } &:nth-child(6) { transition-delay: 0.6s; } } .card-item1 { .card-title { background: linear-gradient(180deg, #A0A2B4 0%, #BDBECD 100%); &::after { background: url(/images/sem/price/p-c-1.png) no-repeat; background-size: contain; } } } .card-item2 { .card-title { background: linear-gradient(180deg, #3DB8FF 0%, #76CDFF 100%); &::after { background: url(/images/sem/price/p-c-2.png) no-repeat; background-size: contain; } } } .card-item3 { .card-title { background: linear-gradient(180deg, #4F5BFF 0%, #757EFF 100%); &::after { background: url(/images/sem/price/p-c-3.png) no-repeat; background-size: contain; } } } .card-item4 { .card-title { background: linear-gradient(180deg, #FF6A6A 0%, #FF8686 100%); &::after { background: url(/images/sem/price/p-c-4.png) no-repeat; background-size: contain; } } } .card-item5 { .card-title { background: linear-gradient(180deg, #8A58FF 0%, #A57EFF 100%); &::after { background: url(/images/sem/price/p-c-5.png) no-repeat; background-size: contain; } } } .card-item6 { .card-title { background: linear-gradient(180deg, #F6BA39 0%, #FFD67C 100%); &::after { background: url(/images/sem/price/p-c-6.png) no-repeat; background-size: contain; } } } } } } } .ca-tbody, .cpt-tbody, .ct-tbody { display: none; } @media (min-width: 576px) { .col-1-5 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 1024px) { .col-1-5 { flex: 0 0 20%; max-width: 20%; } }