Skip to content

O
open-website
提交 c24cbe92 authored 作者: 郑伟娜's avatar 郑伟娜
浏览文件
操作

开放平台官网首页

上级
流水线 #276 已失败 于阶段
      隐藏空白字符变更
      内嵌 并排
      正在显示 包含 1519 行增加 和 0 行删除
      css/index.css 0 → 100644
      浏览文件 @ c24cbe92
      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 0 → 100644
      浏览文件 @ c24cbe92
      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
      index.html 0 → 100644
      浏览文件 @ c24cbe92
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="北京胜天半子科技有限公司">
      <meta name="description" content="北京胜天半子科技有限公司">
      <title>开放平台官网</title>
      <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.3/swiper-bundle.min.css" rel="stylesheet">
      <link href="./css/index.css" rel="stylesheet">
      <link type="image/x-inon" rel="icon" href="http://open.jxhh.com/icon.ico">
      </head>
      <body>
      <!-- 顶部tab -->
      <header>
      <div class="header-container">
      <div class="tabs">
      <img class="logo" src="./image/logo.png" alt="">
      <ul class="tablist">
      <li class="tabitem"><a href="">首页</a></li>
      <li class="tabitem"><a href="">开放平台</a></li>
      <li class="tabitem"><a href="">云仓</a></li>
      <li class="tabitem"><a href="">关于我们</a></li>
      </ul>
      </div>
      <div class="btn-box">
      <button class="register">注册</button>
      <button class="loginBtn">登录</button>
      </div>
      </div>
      </header>
      <!-- 轮播图 -->
      <div class="swiper">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
      <img class="banner" src="./image/banner1.png" alt="">
      </div>
      <div class="swiper-slide">
      <img class="banner" src="./image/banner1.png" alt="">
      </div>
      <div class="swiper-slide">
      <img class="banner" src="./image/banner1.png" alt="">
      </div>
      </div>
      <div class="swiper-pagination"></div>
      </div>
      <!-- 产品服务 -->
      <div class="productService">
      <div class="title-box">
      <h1 class="title">产品服务</h1>
      <div class="line"></div>
      </div>
      <div class="serviceContent">
      <div class="contentHeight">
      <div class="contentBg">
      <img class="icon" src="./image/product1.png" alt="">
      <h3>聚合供应链</h3>
      <div class="line"></div>
      <p class="desc">聚合供应链提供一站式私域电商运营解决方案，聚焦社交电商、直播、社区团购、线下集采等多场景应用，打通不同平台交易链路，通过技术及供应链整合全渠道优质货源及终端流量，为中小电商企业赋能。</p>
      </div>
      </div>
      <div class="contentHeight" style="margin-left: 30px;">
      <div class="contentBg">
      <img class="icon" src="./image/product2.png" alt="">
      <h3>聚合云仓</h3>
      <div class="line"></div>
      <p class="desc">聚合供应链提供一站式私域电商运营解决方案，聚焦社交电商、直播、社区团购、线下集采等多场景应用，打通不同平台交易链路，通过技术及供应链整合全渠道优质货源及终端流量，为中小电商企业赋能。</p>
      </div>
      </div>
      </div>
      </div>
      <!-- 核心优势 -->
      <div class="core">
      <div class="title-box">
      <h1 class="title">核心优势</h1>
      <div class="line"></div>
      </div>
      <div class="core-content">
      <div class="content-bg bg1">
      <div class="content">
      <img class="content-icon" src="./image/house.png" alt="">
      <h4>海量货源</h4>
      <div class="line"></div>
      <div class="desc">京东、阿里、天猫、苏宁直接供货，正品有保证</div>
      </div>
      </div>
      <div class="content-bg bg2">
      <div class="content">
      <img class="content-icon" src="./image/interest.png" alt="">
      <h4>超高利润</h4>
      <div class="line"></div>
      <div class="desc">协议价供货，远低于平台销售价，支持在线比价</div>
      </div>
      </div>
      <div class="content-bg bg3">
      <div class="content">
      <img class="content-icon" src="./image/file.png" alt="">
      <h4>自动化下单</h4>
      <div class="line"></div>
      <div class="desc">自动完成下单流程，无需导出订单，平台供应链直接发货</div>
      </div>
      </div>
      </div>
      <div class="core-content core-content-mg">
      <div class="content-bg bg4">
      <div class="content">
      <img class="content-icon" src="./image/service.png" alt="">
      <h4>售后无忧</h4>
      <div class="line"></div>
      <div class="desc">专属客服接待，遵循合作平台售后规则</div>
      </div>
      </div>
      <div class="content-bg bg5">
      <div class="content">
      <img class="content-icon" src="./image/umbrella.png" alt="">
      <h4>智能风控</h4>
      <div class="line"></div>
      <div class="desc">双重前置校验验证商品状态及库存</div>
      </div>
      </div>
      </div>
      </div>
      <!-- 全品类商品 -->
      <div class="goods-box">
      <div class="title-box">
      <h1 class="title">全品类<span style="color: #1D8EFE; font-size: 40px;">百万</span>余款商品任你选</h1>
      </div>
      <div class="swiper-container goods-swiper">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
      <img class="" src="./image/icon1.png" alt="">
      <div>母婴亲子</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon3.png" alt="">
      <div>食品饮料</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon5.png" alt="">
      <div>美妆个护</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon7.png" alt="">
      <div>箱包皮具</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon9.png" alt="">
      <div>家居日用</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon2.png" alt="">
      <div>电脑办公</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon4.png" alt="">
      <div>数码电子</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon6.png" alt="">
      <div>服装配饰</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon8.png" alt="">
      <div>宠物用品</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon10.png" alt="">
      <div>餐厨器具</div>
      </div>
      </div>
      <div class="swiper-pagination"></div>
      </div>
      </div>
      <!-- 变现 -->
      <div class="logo-box">
      <div class="logo-bg"></div>
      <div class="card">
      <ul class="card-list">
      <li class="card-item border-b border-r"><img src="./image/nine.png" alt=""></li>
      <li class="card-item border-b border-r"><img src="./image/every.png" alt=""></li>
      <li class="card-item border-b border-r"><img src="./image/reliable.png" alt=""></li>
      <li class="card-item border-b border-r"><img src="./image/dvb.png" alt=""></li>
      <li class="card-item border-b border-r"><img src="./image/cloud.png" alt=""></li>
      <li class="card-item border-b"><img src="./image/shop.png" alt=""></li>
      </ul>
      <ul class="card-list">
      <li class="card-item border-r"><img src="./image/maker.png" alt=""></li>
      <li class="card-item border-r"><img src="./image/surprised.png" alt=""></li>
      <li class="card-item border-r"><img src="./image/wan.png" alt=""></li>
      <li class="card-item border-r"><img src="./image/face.png" alt=""></li>
      <li class="card-item border-r"><img src="./image/up.png" alt=""></li>
      <li class="card-item"><img src="./image/dragon.png" alt=""></li>
      </ul>
      </div>
      </div>
      <!-- 即刻开始 -->
      <div class="start-box">
      <div class="title-box">
      <h1 class="title" style="color: #fff;">简单几步，即刻开始</h1>
      </div>
      <div class="step">
      <div class="line"></div>
      <ul class="step-list">
      <li class="step-item">
      <img src="./image/register.png" alt="">
      <div class="title">注册认证</div>
      </li>
      <li class="step-item">
      <img src="./image/experience.png" alt="">
      <div class="title">下单体验</div>
      </li>
      <li class="step-item">
      <img src="./image/dasboard.png" alt="">
      <div class="title">开发测试</div>
      </li>
      <li class="step-item">
      <img src="./image/online.png" alt="">
      <div class="title">部署上线</div>
      </li>
      </ul>
      </div>
      </div>
      <!-- 底部 -->
      <footer>
      <div class="footer-box">
      <div class="footer-tab">
      <ul class="tablist">
      <li class="tabitem border-r">解决方案</li>
      <li class="tabitem border-r">产品服务</li>
      <li class="tabitem border-r">渠道合作</li>
      <li class="tabitem border-r">关于我们</li>
      <li class="tabitem">新闻资讯</li>
      </ul>
      <div class="copyright">Copyright © 2015 - 2019 北京胜天半子科技有限公司 All Rights Reserved.  京ICP备19033223号-1 <img src="./image/national.png" alt="" style="height: 13px;"> 京ICP备19033223号-1</div>
      </div>
      <div class="footer-address">
      <div class="title">联系我们</div>
      <div class="tel">联系电话：4000-188-199</div>
      <div class="address">公司地址:北京市丰台区诺德中心一期四号楼21层</div>
      </div>
      </div>
      </footer>
      <!-- 侧边 -->
      <div class="fixed-container">
      <div class="fixed-item1 border-b">
      <img class="item-icon" src="./image/phone2.png" alt="">
      <span>电话沟通</span>
      <div class="card-tel">
      <div class="tel-box">
      <img src="./image/phone3.png" alt="">
      <div>
      <div>咨询热线</div>
      <p class="tel-style">010-5335 9558</p>
      <p class="tel-style">4000-188-199</p>
      </div>
      </div>
      <div class="tel-box">
      <img src="./image/time.png" alt="">
      <div>
      <div>工作时间</div>
      <p>周一至周五 <span class="time">9:00-18:00</span></p>
      </div>
      </div>
      </div>
      </div>
      <div class="fixed-item2">
      <img class="item-icon" src="./image/message.png" alt="">
      <span>微信咨询</span>
      <div class="code">
      <img src="./image/wx.jpg" alt="">
      </div>
      </div>
      </div>
      <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.3/swiper-bundle.min.js"></script>
      <script>
      window.onload = function () {
      (function () {
      let w = document.documentElement.clientWidth;
      let htmlNode = document.querySelector('html');
      if (w >= 750) {
      } else {
      window.location.href = 'mobile.html';
      }
      })();
      new Swiper ('.swiper', {
      loop: true,
      pagination: {
      el: '.swiper-pagination',
      clickable: true,
      },
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
      },
      })
      new Swiper('.goods-swiper', {
      autoplay: true,
      pagination: '.swiper-pagination',
      slidesPerView: 5,
      slidesPerColumn: 2,
      paginationClickable: true,
      spaceBetween: 1,
      grid: {
      fill: 'row',
      rows: 2
      },
      });
      window.onscroll = function() {
      if (window.scrollY > 0) {
      document.querySelector('header').style.background = '#fff'
      document.querySelector('header').style.boxShadow = '0px 0px 9px 2px #bbb'
      document.querySelector('.register').style.color = '#1D8EFE'
      document.querySelector('.register').style.borderColor = '#1D8EFE'
      let li = document.querySelectorAll('.tabs .tablist .tabitem a')
      for( let i = 0; i < li.length; i++) {
      li[i].style.color = '#000'
      }
      } else {
      document.querySelector('header').style.background = 'transparent'
      document.querySelector('header').style.boxShadow = 'none'
      document.querySelector('.register').style.color = '#fff'
      document.querySelector('.register').style.borderColor = '#fff'
      let li = document.querySelectorAll('.tabs .tablist .tabitem a')
      for( let i = 0; i < li.length; i++) {
      li[i].style.color = '#fff'
      }
      }
      }
      }
      </script>
      </body>
      </html>
      \ No newline at end of file
      mobile.html 0 → 100644
      浏览文件 @ c24cbe92
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="北京胜天半子科技有限公司">
      <meta name="description" content="北京胜天半子科技有限公司">
      <title>开放平台官网</title>
      <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.3/swiper-bundle.min.css" rel="stylesheet">
      <link href="./css/mobile.css" rel="stylesheet">
      <link type="image/x-inon" rel="icon" href="http://open.jxhh.com/icon.ico">
      </head>
      <body>
      <!-- 侧边导航 -->
      <div class="navigation">
      <img class="logo" src="./image/logo.png" alt="">
      <img class="nav-icon" src="./image/more2.png" alt="">
      <div class="nav-list isShow">
      <ul>
      <li><a href="">首页</a></li>
      <li><a href="">开放平台</a></li>
      <li><a href="">云仓</a></li>
      <li><a href="">关于我们</a></li>
      <li><a href="">登录</a></li>
      <li><a href="">注册</a></li>
      </ul>
      </div>
      </div>
      <!-- 轮播图 -->
      <div class="swiper banner-swiper">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
      <img class="banner" src="./image/banner1.png" alt="">
      </div>
      <div class="swiper-slide">
      <img class="banner" src="./image/banner1.png" alt="">
      </div>
      <div class="swiper-slide">
      <img class="banner" src="./image/banner1.png" alt="">
      </div>
      </div>
      <div class="swiper-pagination"></div>
      </div>
      <!-- 产品服务 -->
      <div class="productService">
      <div class="productService-title">产品服务</div>
      <div class="swiper productService-swiper">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
      <div class="contentHeight">
      <div class="contentBg">
      <img class="icon" src="./image/product1.png" alt="">
      <h3>聚合供应链</h3>
      <div class="line"></div>
      <p class="desc">聚合供应链提供一站式私域电商运营解决方案，聚焦社交电商、直播、社区团购、线下集采等多场景应用，打通不同平台交易链路，通过技术及供应链整合全渠道优质货源及终端流量，为中小电商企业赋能。</p>
      </div>
      </div>
      </div>
      <div class="swiper-slide">
      <div class="contentBg">
      <img class="icon" src="./image/product2.png" alt="">
      <h3>聚合云仓</h3>
      <div class="line"></div>
      <p class="desc">聚合供应链提供一站式私域电商运营解决方案，聚焦社交电商、直播、社区团购、线下集采等多场景应用，打通不同平台交易链路，通过技术及供应链整合全渠道优质货源及终端流量，为中小电商企业赋能。</p>
      </div>
      </div>
      </div>
      <div class="swiper-pagination"></div>
      </div>
      </div>
      <!-- 核心优势 -->
      <div class="core">
      <div class="core-title">核心优势</div>
      <div class="swiper core-swiper">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
      <div class="content-bg bg1">
      <div class="content">
      <img class="content-icon" src="./image/house.png" alt="">
      <h4>海量货源</h4>
      <div class="line"></div>
      <div class="desc">京东、阿里、天猫、苏宁直接供货，正品有保证</div>
      </div>
      </div>
      </div>
      <div class="swiper-slide">
      <div class="content-bg bg2">
      <div class="content">
      <img class="content-icon" src="./image/interest.png" alt="">
      <h4>超高利润</h4>
      <div class="line"></div>
      <div class="desc">协议价供货，远低于平台销售价，支持在线比价</div>
      </div>
      </div>
      </div>
      <div class="swiper-slide">
      <div class="content-bg bg3">
      <div class="content">
      <img class="content-icon" src="./image/file.png" alt="">
      <h4>自动化下单</h4>
      <div class="line"></div>
      <div class="desc">自动完成下单流程，无需导出订单，平台供应链直接发货</div>
      </div>
      </div>
      </div>
      <div class="swiper-slide">
      <div class="content-bg bg4">
      <div class="content">
      <img class="content-icon" src="./image/service.png" alt="">
      <h4>售后无忧</h4>
      <div class="line"></div>
      <div class="desc">专属客服接待，遵循合作平台售后规则</div>
      </div>
      </div>
      </div>
      <div class="swiper-slide">
      <div class="content-bg bg5">
      <div class="content">
      <img class="content-icon" src="./image/umbrella.png" alt="">
      <h4>智能风控</h4>
      <div class="line"></div>
      <div class="desc">双重前置校验验证商品状态及库存</div>
      </div>
      </div>
      </div>
      </div>
      <div class="swiper-pagination"></div>
      </div>
      </div>
      <!-- 全品类商品 -->
      <div class="goods-box">
      <div class="title-box">
      <h1 class="title">全品类百万余款商品任你选</h1>
      </div>
      <div class="swiper-container goods-swiper">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
      <img class="" src="./image/icon1.png" alt="">
      <div>母婴亲子</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon3.png" alt="">
      <div>食品饮料</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon5.png" alt="">
      <div>美妆个护</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon7.png" alt="">
      <div>箱包皮具</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon9.png" alt="">
      <div>家居日用</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon2.png" alt="">
      <div>电脑办公</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon4.png" alt="">
      <div>数码电子</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon6.png" alt="">
      <div>服装配饰</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon8.png" alt="">
      <div>宠物用品</div>
      </div>
      <div class="swiper-slide">
      <img class="" src="./image/icon10.png" alt="">
      <div>餐厨器具</div>
      </div>
      </div>
      <div class="swiper-pagination"></div>
      </div>
      </div>
      <!-- 变现 -->
      <div class="logo-box">
      <div class="title-box">
      <h1 class="title">他们正在变现，期待你的加入</h1>
      </div>
      <div class="card">
      <ul class="card-list">
      <li class="card-item"><img src="./image/nine.png" alt=""></li>
      <li class="card-item"><img src="./image/every.png" alt=""></li>
      <li class="card-item"><img src="./image/reliable.png" alt=""></li>
      <li class="card-item"><img src="./image/dvb.png" alt=""></li>
      <li class="card-item"><img src="./image/cloud.png" alt=""></li>
      <li class="card-item"><img src="./image/shop.png" alt=""></li>
      <li class="card-item"><img src="./image/maker.png" alt=""></li>
      <li class="card-item"><img src="./image/surprised.png" alt=""></li>
      <li class="card-item"><img src="./image/wan.png" alt=""></li>
      <li class="card-item"><img src="./image/face.png" alt=""></li>
      <li class="card-item"><img src="./image/up.png" alt=""></li>
      <li class="card-item"><img src="./image/dragon.png" alt=""></li>
      </ul>
      </div>
      </div>
      <!-- 即刻开始 -->
      <div class="start-box">
      <div class="title-box">
      <h1 class="title" style="color: #fff;">简单几步，即刻开始</h1>
      </div>
      <div class="step">
      <div class="line"></div>
      <ul class="step-list">
      <li class="step-item">
      <img src="./image/register.png" alt="">
      <div class="title">注册认证</div>
      </li>
      <li class="step-item">
      <img src="./image/experience.png" alt="">
      <div class="title">下单体验</div>
      </li>
      <li class="step-item">
      <img src="./image/dasboard.png" alt="">
      <div class="title">开发测试</div>
      </li>
      <li class="step-item">
      <img src="./image/online.png" alt="">
      <div class="title">部署上线</div>
      </li>
      </ul>
      </div>
      </div>
      <!-- 底部 -->
      <footer>
      <div class="footer-box">
      <div class="footer-tab">
      <ul class="tablist">
      <li class="tabitem">企业简介</li>
      <li class="tabitem">发展历程</li>
      <li class="tabitem">团队介绍</li>
      <li class="tabitem">新闻动态</li>
      <li class="tabitem">荣誉资质</li>
      </ul>
      </div>
      <div class="phone">联系电话：4000-188-199<span style="margin-left: .2rem;">010-5335-9558</span></div>
      <div class="address">公司地址:北京市丰台区诺德中心一期四号楼21层</div>
      <div class="copyright">Copyright © 2015 - 2019 北京胜天半子科技有限公司 All Rights Reserved. 
      京ICP备19033223号-1 <img src="./image/national.png" alt="" style="height: .2rem;"> 京ICP备19033223号-1</div>
      </div>
      </footer>
      <!-- 侧边 -->
      <div class="fixed-container">
      <div class="fixed-item1">
      <img class="item-icon" src="./image/fixed-phone.png" alt="">
      <span>电话</span>
      <div class="card-tel">
      <div class="tel-box">
      <img src="./image/phone3.png" alt="">
      <div>
      <div>咨询热线</div>
      <p class="tel-style">010-5335 9558</p>
      <p class="tel-style">4000-188-199</p>
      </div>
      </div>
      <div class="tel-box">
      <img src="./image/time.png" alt="">
      <div>
      <div>工作时间</div>
      <p>周一至周五 <span class="time">9:00-18:00</span></p>
      </div>
      </div>
      </div>
      </div>
      <div class="fixed-item2">
      <img class="item-icon" src="./image/fixed-wx.png" alt="">
      <span>微信</span>
      <div class="code">
      <img src="./image/wx.jpg" alt="">
      </div>
      </div>
      </div>
      <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.0.3/swiper-bundle.min.js"></script>
      <script>
      window.onload = function () {
      (function () {
      let w = document.documentElement.clientWidth;
      let htmlNode = document.querySelector('html');
      if (w >= 750) {
      htmlNode.style.fontSize = 16 + 'px';
      window.location.href = 'index.html';
      } else {
      htmlNode.style.fontSize = (w / 750) * 100 + 'px';
      }
      })();
      new Swiper ('.banner-swiper', {
      loop: true,
      navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
      },
      });
      new Swiper('.productService-swiper', {
      slidesPerView : 'auto',
      spaceBetween: 10,
      slidesOffsetBefore: 10,
      slidesOffsetAfter: 10
      });
      new Swiper('.core-swiper', {
      slidesPerView : 'auto',
      spaceBetween: 10,
      slidesOffsetBefore: 10,
      slidesOffsetAfter: 10
      });
      new Swiper('.goods-swiper', {
      autoplay: true,
      pagination: '.swiper-pagination',
      slidesPerView: 3,
      slidesPerColumn: 2,
      paginationClickable: true,
      spaceBetween: 1,
      grid: {
      fill: 'row',
      rows: 2
      },
      });
      let item1 = document.querySelector('.nav-icon');
      item1.onmouseover = function() {
      document.querySelector('.isShow').style.opacity = 1;
      }
      item1.onmouseout = function() {
      document.querySelector('.isShow').style.opacity = 0;
      }
      }
      </script>
      </body>
      </html>
      \ No newline at end of file
      Markdown 格式
      0% 或
      您添加了 0 人 到此讨论。请谨慎行事。
      请先完成此评论的编辑！
      请 注册 或者 后发表评论