开放平台官网首页

css/index.css

+body {
+  padding: 0px;
+  margin: 0px;
+}
+
+/* 顶部 */
+header {
+  width: 80%;
+  /* height: 70px; */
+  padding: 0 10%;
+  position: fixed;
+  z-index: 99;
+  background: transparent;
+}
+header .header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tabs {
+  display: flex;
+  align-items: center;
+}
+.logo {
+  height: 35px;
+  width: 114px;
+}
+.tabs .tablist {
+  display: flex;
+  list-style: none;
+}
+.tabs .tablist .tabitem {
+  color: #fff;
+  margin-left: 50px;
+  font-size: 18px;
+  cursor: pointer;
+}
+.tabs .tablist .tabitem a {
+  text-decoration: none;
+  color: #fff;
+}
+.btn-box button {
+  width: 79px;
+  height: 30px;
+  background: transparent;
+  color: #fff;
+  border: 1px solid #fff;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.loginBtn {
+  background: #1D8EFE !important;
+  border: 1px solid #1D8EFE !important;
+}
+
+/* banner轮播图 */
+.swiper {
+  width: 100%;
+  height: 550px;
+}
+.banner {
+  width: 100%;
+  height: 550px;
+}
+.swiper-pagination-bullet {
+  border-radius: 0;
+  background-color: #fff;
+  width: 24px;
+  height: 3px;
+}
+
+/* 产品服务 */
+.productService {
+  width: 100%;
+  height: 530px;
+  background: url(../image/rectangle.png) no-repeat;
+}
+.title-box {
+  text-align: center;
+}
+.title-box .title {
+  padding: 60px 0px 0px;
+  margin-bottom: 0px;
+}
+.title-box .line {
+  height: 4px;
+  width: 100px;
+  background: #1D8EFE;
+  display: inline-block;
+}
+.serviceContent {
+  display: flex;
+  justify-content: center;
+  margin-top: 60px;
+}
+.contentHeight {
+  height: 348px;
+  width: 620px;
+  background: #fff;
+}
+.contentBg {
+  margin-top: 47px;
+  height: 300px; 
+  background: url(../image/cylinder.png) no-repeat 100% 0;
+  padding-left: 40px;
+}
+.contentBg .icon {
+  height: 130px;
+  width: 130px;
+}
+.contentBg h3 {
+  color: #1D8EFE;
+  margin: 0 0 0 20px;
+
+}
+.contentBg .line {
+  height: 2px;
+  width: 30px;
+  background: #1D8EFE;
+  display: inline-block;
+  margin: 0 0 0 20px;
+
+}
+.contentBg .desc {
+  color: #666;
+  margin: 0 100px 0 20px;
+  line-height: 25px;
+}
+
+/* 核心优势 */
+.core {
+  padding-bottom: 60px;
+}
+.content-bg {
+  height: 330px;
+  width: 285px;
+  text-align: center;
+  margin: 0 20px;
+}
+.bg1 {
+  background: url(../image/background1.png) no-repeat 100% 100%;
+}
+.bg2 {
+  background: url(../image/background2.png) no-repeat 100% 100%;
+}
+.bg3 {
+  background: url(../image/background3.png) no-repeat 100% 100%;
+}
+.bg4 {
+  background: url(../image/background4.png) no-repeat 100% 100%;
+}
+.bg5 {
+  background: url(../image/background5.png) no-repeat 100% 100%;
+}
+.core-content {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+.content-bg .content-icon {
+  margin-top: 80px;
+}
+.content-bg h4 {
+  color: #fff;
+  margin: 0;
+}
+.content-bg .line {
+  height: 2px;
+  width: 30px;
+  background: #1D8EFE;
+  display: inline-block;
+}
+.content-bg .desc {
+  font-size: 16px;
+  color: #fff;
+  margin: 20px 30px 0;
+  line-height: 25px;
+}
+.content-bg .content {
+  height: 330px;
+  width: 285px;
+}
+.content-bg .content:hover {
+  background: url(../image/mask.png) no-repeat;
+}
+.core-content-mg {
+  margin-top: -50px;
+}
+
+/* 全品类商品 */
+.goods-box {
+  height: 700px;
+  background: url(../image/iceberg.png) no-repeat 100% 100%;
+}
+.goods-swiper {
+  width: 80%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  margin-top: 60px;
+}
+.goods-swiper .swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.goods-swiper .swiper-slide img {
+  margin-bottom: 20px;
+}
+
+/* 变现 */
+.logo-box .logo-bg {
+  height: 355px;
+  background: url(../image/logo-bg.png) no-repeat;
+}
+.card {
+  width: 80%;
+  background: #fff;
+  margin: -150px auto 100px;
+  padding: 80px 0;
+  box-shadow: 0px 38px 98px 2px rgba(51, 51, 51, 0.2);
+}
+.card-list {
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 0 150px;
+  margin: 0;
+}
+.card-item {
+  list-style: none;
+  padding: 20px;
+}
+.card-item img {
+  height: 108px;
+  width: 100%;
+}
+.card-list .border-b {
+  border-bottom: 1px solid rgba(229, 229, 229, .4);
+}
+.border-r {
+  border-right: 1px solid rgba(229, 229, 229, .4);
+}
+
+/* 即刻开始 */
+.start-box {
+  height: 612px;
+  background: url(../image/black.png) no-repeat;
+}
+.step {
+  width: 80%;
+  margin: 120px auto;
+  position: relative;
+}
+.step .line {
+  position: absolute;
+  top: 70px;
+  left: 2px;
+  z-index: 0;
+  width: 99%;
+  height: 1px;
+  border-top: 2px dashed #dfe0e1;
+}
+.step-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+.step-item {
+  list-style: none;
+  text-align: center;
+  z-index: 99;
+}
+.step-item .title {
+  color: #fff;
+  font-size: 26px;
+  margin-top: 20px;
+}
+
+/* 底部 */
+footer {
+  height: 234px;
+  width: 100%;
+  background: rgba(36, 42, 55, 1);
+}
+.footer-box {
+  width: 80%;
+  margin: 0px auto;
+  padding: 50px 0;
+  display: flex;
+}
+.footer-tab {
+  width: 65%;
+  border-right: 1px solid #fff;
+}
+.footer-tab .tablist {
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+.footer-tab .tablist .tabitem {
+  list-style: none;
+  color: #fff;
+  padding: 0 40px;
+}
+.footer-tab .tablist .tabitem .border-r {
+  border-right: 1px solid #fff;
+}
+.copyright {
+  margin-top: 80px;
+  font-size: 14px;
+  color: rgba(149, 155, 168, 1);
+}
+.footer-address {
+  margin-left: 50px;
+}
+.footer-address .title {
+  color: #fff;
+}
+.footer-address .tel {
+  margin-top: 40px;
+  font-size: 14px;
+  color: rgba(153, 153, 153, 1);
+}
+.footer-address .address {
+  margin-top: 20px;
+  font-size: 14px;
+  color: rgba(153, 153, 153, 1);
+}
+
+/* 侧边 */
+.fixed-container {
+  position: fixed;
+  bottom: 10%;
+  right: 0px;
+  width: 70px;
+  background: #1d8efe;
+  padding: 0 12px;
+  text-align: center;
+  z-index: 100;
+  border-radius: 4px 0px 0px 4px;
+}
+.fixed-item1, .fixed-item2 {
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 12px;
+  position: relative;
+
+}
+.fixed-item1:hover .card-tel{
+  opacity: 1
+}
+.fixed-item1 .card-tel {
+  opacity: 0;
+}
+.fixed-item2:hover .code {
+  opacity: 1
+}
+.fixed-item2 .code {
+  opacity: 0;
+}
+.item-icon {
+  height: 24px;
+  width: 24px;
+  margin-bottom: 10px;
+}
+.fixed-container .border-b {
+  border-bottom: 1px solid #fff;
+}
+.card-tel {
+  width: 150px;
+  position: absolute;
+  top: 0;
+  right: 100px;
+  padding: 10px;
+  background: #fff;
+  color: #374666;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(51, 51, 51, 0.13);
+  opacity: 0;
+  z-index: 999;
+}
+.tel-box {
+  display: flex;
+}
+.tel-box img {
+  height: 14px;
+  width: 14px;
+  margin-right: 10px;
+}
+.tel-box div {
+  text-align: left;
+}
+.tel-style {
+  color: #1d8efe;
+}
+.time {
+  color: #7C8CA5;
+}
+.code {
+  position: absolute;
+  top: -90px;
+  right: 100px;
+  padding: 10px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(51, 51, 51, 0.13);
+  opacity: 0;
+  z-index: 999;
+}
+.code img {
+  width: 120px;
+  height: 120px;
+}
\ No newline at end of file

css/mobile.css

+body {
+  margin: 0;
+  padding: 0;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* 侧边导航 */
+.logo {
+  height: .45rem;
+  position: fixed;
+  top: .2rem;
+  left: .2rem;
+  z-index: 999;
+}
+.nav-icon {
+  height: .3rem;
+  position: fixed;
+  top: .2rem;
+  right: .2rem;
+  z-index: 9999;
+}
+.isShow {
+  opacity: 0;
+}
+.nav-list {
+  width: 2.94rem;
+  position: fixed;
+  right: 0;
+  z-index: 999;
+  background: #fff;
+  font-size: .3rem;
+}
+.nav-list ul li {
+  padding: .2rem;
+}
+.nav-list ul li a {
+  text-decoration: none;
+  color: #000;
+}
+.nav-list ul li:hover {
+  background: #F0F0F5;
+}
+
+/* banner轮播图 */
+.productService-swiper {
+  width: 100%;
+  height: 3.62rem;
+}
+.banner {
+  width: 100%;
+  height: 3.62rem;
+}
+
+/* 产品服务 */
+.productService-title {
+  font-size: .4rem;
+  text-align: center;
+  padding: .2rem 0 .4rem;
+  font-weight: bold;
+}
+.productService-swiper {
+  height: 6.32rem;
+  margin-top: .1rem;
+}
+.productService-swiper .swiper-slide {
+  width: 5.84rem;
+}
+.contentHeight {
+  height: 6.32rem;
+  width: 5.8rem;
+}
+.contentBg {
+  height: 6.32rem;
+  background: url(../image/bg.png) no-repeat;
+  background-size: contain;
+  text-align: center;
+  font-size: 0;
+  border-radius: .2rem;
+  padding: 0 .4rem;
+}
+.contentBg .icon {
+  height: 1.37rem;
+  width: 1.41rem;
+  margin-top: .48rem;
+}
+.contentBg h3 {
+  font-size: .3rem;
+  color: #1D8EFE;
+  margin: 0;
+}
+.contentBg .line {
+  height: .04rem;
+  width: .4rem;
+  background: #1D8EFE;
+  display: inline-block;
+  margin-top: .1rem;
+}
+.contentBg .desc {
+  font-size: .28rem;
+  color: #333;
+  line-height: .4rem;
+}
+
+/* 核心优势 */
+.core {
+  padding-bottom: .2rem;
+}
+.core-swiper {
+  height: 4.02rem;
+}
+.core-swiper .swiper-slide {
+  width: 3.09rem;
+}
+.core-title {
+  font-size: .4rem;
+  text-align: center;
+  padding: .4rem 0;
+  font-weight: bold;
+}
+.content-bg {
+  height: 4.02rem;
+  width: 3.09rem;
+  text-align: center;
+  font-size: 0;
+}
+.bg1 {
+  background: url(../image/bg1.png) no-repeat;
+  background-size: contain;
+}
+.bg2 {
+  background: url(../image/bg2.png) no-repeat;
+  background-size: contain;
+}
+.bg3 {
+  background: url(../image/bg3.png) no-repeat;
+  background-size: contain;
+}
+.bg4 {
+  background: url(../image/bg4.png) no-repeat;
+  background-size: contain;
+}
+.bg5 {
+  background: url(../image/bg5.png) no-repeat;
+  background-size: contain;
+}
+.content-bg .content-icon {
+  height: .46rem;
+  margin-top: .63rem;
+}
+.content-bg h4 {
+  font-size: .32rem;
+  color: #fff;
+  margin: .2rem 0;
+}
+.content-bg .line {
+  height: .04rem;
+  width: .5rem;
+  background: #1D8EFE;
+  display: inline-block;
+}
+.content-bg .desc {
+  font-size: .28rem;
+  color: #fff;
+  margin: .3rem .3rem 0;
+  line-height: .35rem;
+}
+
+/* 全品类商品 */
+.goods-box {
+  height: 6.08rem;
+  background: url(../image/iceberg1.png) no-repeat;
+  background-size: contain;
+}
+.goods-box .title-box .title {
+  font-size: .4rem;
+  text-align: center;
+  padding: .4rem 0 .2rem;
+  font-weight: bold;
+}
+.goods-swiper {
+  width: 90%;
+  height: auto;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  border-radius: .1rem;
+}
+.goods-swiper .swiper-slide {
+  text-align: center;
+  background: #fff;
+  height: 1.91rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.goods-swiper .swiper-slide img {
+  height: .45rem;
+  margin-bottom: .2rem;
+}
+.goods-swiper .swiper-slide div {
+  font-size: .28rem;
+}
+
+/* 变现 */
+.logo-box {
+  background: #fff;
+  padding-bottom: .2rem;
+}
+.logo-box .title-box .title {
+  font-size: .4rem;
+  text-align: center;
+  padding: .2rem 0 .2rem;
+  font-weight: bold;
+}
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  margin: 0;
+  padding: 0 .2rem;
+}
+.card-item {
+  width: 2.044rem;
+  height: .915rem;
+  line-height: .915rem;
+  border: 1px solid #D2DDE5;
+  list-style: none;
+  margin-bottom: .2rem;
+}
+.card-item img {
+  height: 100%;
+  width: 100%;
+}
+
+/* 即刻开始 */
+.start-box {
+  height: 4.258rem;
+  background: url(../image/black.png) no-repeat;
+  background-size: cover;
+}
+.start-box .title-box .title {
+  font-size: .4rem;
+  text-align: center;
+  padding: .4rem 0;
+  font-weight: bold;
+}
+.step {
+  position: relative;
+  padding: 0 .4rem;
+}
+.step .line {
+  position: absolute;
+  top: .66rem;
+  left: 10%;
+  z-index: 0;
+  width: 80%;
+  height: .1rem;
+  border-top: .04rem dashed #dfe0e1;
+}
+.step-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+.step-item {
+  list-style: none;
+  text-align: center;
+  z-index: 99;
+}
+.step-item img {
+  height: 1.329rem;
+  width: 1.153rem;
+}
+.step-item .title {
+  color: #fff;
+  font-size: .28rem;
+  margin-top: .1rem;
+}
+
+/* 底部 */
+.footer-box {
+  background: #242A37;
+}
+.footer-tab {
+  padding-top: .6rem;
+}
+.tablist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.tabitem {
+  width: 33%;
+  font-size: .24rem;
+  color: #fff;
+  text-align: center;
+  padding-bottom: .6rem;
+}
+.footer-box .phone {
+  font-size: .22rem;
+  color: #fff;
+  text-align: center;
+  padding: 0 .4rem;
+}
+.footer-box .address {
+  font-size: .22rem;
+  color: #fff;
+  text-align: center;
+  padding: .2rem .4rem .4rem;
+  border-bottom: .01rem solid #5F5F5F;
+}
+.footer-box .copyright {
+  padding: .4rem;
+  font-size: .14rem;
+  color: #959BA8;
+  text-align: center;
+}
+
+/* 侧边 */
+.fixed-container {
+  position: fixed;
+  bottom: 10%;
+  right: .26rem;
+  width: .96rem;
+  background: #fff;
+  text-align: center;
+  z-index: 100;
+  border-radius: .48rem;
+  box-shadow: 0 0 .6rem 0 rgba(51, 51, 51, 0.13);
+}
+.fixed-item1, .fixed-item2 {
+  padding: .2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  font-size: .24rem;
+  position: relative;
+}
+.fixed-item1:hover .card-tel{
+  opacity: 1;
+}
+.fixed-item1 .card-tel {
+  opacity: 0;
+}
+.fixed-item2:hover .code {
+  opacity: 1;
+}
+.fixed-item2 .code {
+  opacity: 0;
+}
+.item-icon {
+  height: .33rem;
+  width: .33rem;
+  margin-bottom: .1rem;
+}
+.card-tel {
+  width: 3rem;
+  position: absolute;
+  top: 0;
+  right: 1rem;
+  padding: .2rem;
+  background: #fff;
+  color: #374666;
+  border-radius: .1rem;
+  box-shadow: 0 0 .6rem 0 rgba(51, 51, 51, 0.13);
+  opacity: 0;
+  z-index: 999;
+}
+.tel-box {
+  display: flex;
+}
+.tel-box img {
+  height: .25rem;
+  width: .25rem;
+  margin-right: .1rem;
+}
+.tel-box div {
+  text-align: left;
+}
+.tel-style {
+  color: #1d8efe;
+}
+.time {
+  color: #7C8CA5;
+}
+.code {
+  position: absolute;
+  top: -1rem;
+  right: 1rem;
+  padding: .2rem;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(51, 51, 51, 0.13);
+  opacity: 0;
+  z-index: 999;
+}
+.code img {
+  width: 2rem;
+  height: 2rem;
+}
\ No newline at end of file