<!DOCTYPE html>
<html lang="zh" class="fp-enabled" style="overflow: hidden; height: 100%;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="icon" href="images/logo-ico.ico">
  <meta name="renderer" content="webkit">
  <title>星石云</title>
  <meta name="description" content="星石云">
  <meta name="keywords" content="星石云">
  <meta name="apple-itunes-app" content="app-id=444442371">
  <link href="css/jquery.fullpage.min.css" rel="stylesheet" type="text/css">
  <link href="css/landing_page.min.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">
    var Constants = {
      // HTML5_NOT_SUPPORT_VIDEO: '浏览器版本太老，请<a href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank">更新浏览器</a>观看视频',
      // HOUR: '小时',
      // CORPORATE_ONLINE_ROBOT: '咨询在线客服'
    };

    var PageInfo = {
      // videojsCssSrc: "/static/videojs/video-js.min-74IuK8vnf_yEwxLDti0Lpg.css",
      // videoJsSrc: "/static/videojs/video.min-kEZFRw5bLluhZDaT9ZO_4g.js"
    };
  </script>
  <script src="js/jquery-1.9.1.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/common.css">

  <script src="js/vue.js"></script>
  <style>
    body {	font-family: 'myFont',"PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;}
    @media screen and (max-width: 768px) {

      html,
      body {
        overflow: scroll !important;
      }

      .lower-height .content-container {
        padding-top: -1px !important;
      }
    }
    .anli-box {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}
.anli-box img {
    width: 100%;
    height: auto;
    margin: auto;
    height: 200px;
}
.anli-box .mask {
    position: absolute;
    top: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background-color: rgba(32,32,32,0);
    overflow: hidden;
    opacity: inherit;
}
.anli-box .mask .title2 {
    width: 9rem;
}
.anli-box .mask h4 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 50px;
    line-height: 40px;
    font-size: 1.1rem;
    color: #FFFFFF;
    letter-spacing: 0;
    padding: 5px 0;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    -webkit-transform: translateY(400%);
    -moz-transform: translateY(400%);
    -ms-transform: translateY(400%);
    -o-transform: translateY(400%);
    transform: translateY(400%);
}
.anli-box .mask:hover {
    background-color: rgba(32,32,32,0.7);
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}
.anli-box .mask:hover h4 {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}
.anli-box .mask .title1 {
    width: 7rem;
}
.fp-tableCell {
  display: flex;
  align-items: center;
  justify-content: center;
}
  </style>
</head>

<body class="fp-viewing-0" style="overflow: hidden; height: 100%;">
  <div id="app">
    <header>
      <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-white header-color">
        <div class="container">
          <div class="ml-2">
            <div class="logo-box">
              <a href="./index.html"></a>
            </div>
          </div>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span
              class="navbar-toggler-icon"></span> </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto mr-2">
              <li class="nav-item active"> <a class="nav-link" href="./index.html">首页 <span
                    class="sr-only">(current)</span></a>
              </li>
              <!-- <li class="nav-item productDown dropdown active"> <a class="nav-link product-pc" href="###">解决方案</a>
          <div class="nav-son">
            <div class="row nav-main">
              <div class="col-xl-2 col-lg-2">
                <h4>金融</h4>
                <p><a href="./finance-details-operationsManagement.html">金融一体化运维</a></p>
                <p><a href="./finance-details-datav.html">数据中心可视化</a></p>
              </div>
            </div>
          </div>
          <a class="nav-link dropdown-toggle product-mb" href="" id="navbarDropdown" role="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">解决方案</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <h6 class="dropdown-header">金融</h6>
            <a class="dropdown-item" href="./finance-details-operationsManagement.html">金融一体化运维</a>
            <a class="dropdown-item" href="./finance-details-datav.html">数据中心可视化</a>
          </div>
        </li> -->
              <li class="nav-item"> <a class="nav-link" href="./product.html">产品与服务</a> </li>
              <li class="nav-ite"> <a class="nav-link" href="./case.html">客户案例</a> </li>
              <li class="nav-item"> <a class="nav-link" href="./concatUs.html">联系我们</a> </li>
              <li class="nav-item"> <a class="nav-link" href="./aboutUs.html">关于我们</a> </li>
            </ul>

          </div>
        </div>
      </nav>
    </header>

    <div class="content-container fullpage-wrapper">

      <div class="section gray-bg fp-section active fp-table">
        <div class="fp-tableCell">
          <div class="section-inner">
            <!-- nutstore-app-recommend-container -->
            <div class="">
              <!-- <div class="nutstore-app-recommend"> -->
              <!-- recommend-list -->
              <ul>
                <li class="active pos-r">
                  <a href="javascript:void(0);">
                    <img src="images/home-banner.png" alt="" height="100%">
                  </a>
                  <div class="pos-a col-fff aa">
                    <h1 class="">立即使用星石云 <br> 开启简单工作</h1>
                    <p class="">我们专注于以互联⽹运营的模式进⾏产 <br> 品规划、设计与研发，拥有卓越的⽤户 <br> 体验和安全保障。</p>
                    <div class="dis-ib mr-15">
                      <h1 style="color: #FCF300;"> 15</h1>
                      <p class="f-14">为15个行业提供覆盖全生命 <br> 周期的文件管理及协作服务</p>
                    </div>
                    <div class="dis-ib">
                      <h1 style="color: #FFC600;">1000+</h1>
                      <p class="f-14">为1000+企业用户提供覆盖 <br> 全生命周期的文件管理及协作服务 </p>
                    </div>
                  </div>
                </li>
              </ul>

              <!-- <ul id="recommend-list-control-bar">
                <li data-index="0" class="active"></li>
                <li data-index="1" class=""></li>
                <li data-index="2" class=""></li>
              </ul> -->
              <!-- </div> -->
            </div>
          </div>
        </div>
      </div>



      <div class="section fp-section fp-table" data-anchor="">
        <div class="fp-tableCell dis-b" style="    background-color: #fafafc;">
          <div class="section-inner">
            <section class="indAbout">

              <h2 class="text-center">为企业提供安全的数据协作平台</h2>
              <p class="text-c col-8D8FA5">通过星⽯云企业可以轻松的实现海量⽂件的聚合，存储以及规范化管理</p>
              <div class="h2-line"></div>
              <h3></h3>
              <ul>
                <li>
                  <div class="imgBox">
                    <img class="img1" src="images/home-icon1.png" alt="">
                  </div>
                  <div class="text">
                    <div class="title">传输存储加密
                    </div>
                    <p class="infor">
                      传输存储全链路加密 ，文 <br>
                      件安全不泄露
                    </p>
                  </div>
                </li>
                <li>
                  <div class="imgBox">
                    <img class="img1" src="./images/home-icon2.png" alt="">
                  </div>
                  <div class="text">
                    <div class="title">多重备份
                    </div>
                    <p class="infor">

                      历史版本和三重 加密备份，<br>
                      避免 资料丢失风险


                    </p>
                  </div>
                </li>
                <li>
                  <div class="imgBox">
                    <img class="img1" src="./images/home-icon3.png" alt="">
                  </div>
                  <div class="text">
                    <div class="title">数据恢复
                    </div>
                    <p class="infor">

                      数据异常提供硬盘数据恢复


                    </p>
                  </div>
                </li>
                <li>
                  <div class="imgBox">
                    <img class="img1" src="./images/home-icon4.png" alt="">
                  </div>
                  <div class="text">
                    <div class="title">灵活权限设置
                    </div>
                    <p class="infor">

                      灵活的人员权限设置 ，保<br>
                      证文件访问
                      可控


                    </p>
                  </div>
                </li>
                <li>
                  <div class="imgBox">
                    <img class="img1" src="./images/home-icon5.png" alt="">
                  </div>
                  <div class="text">
                    <div class="title">操作记录
                    </div>
                    <p class="infor">
                      后台详细文件操作记 录及 <br>
                      风控报告，文件 安全隐患
                      一览无余

                    </p>
                  </div>
                </li>
                <li>
                  <div class="imgBox">
                    <img class="img1" src="./images/home-icon6.png" alt="">
                  </div>
                  <div class="text">
                    <div class="title">文件异常检测
                    </div>
                    <p class="infor">
                      当用户频繁删除或大批量创建外链文件等异常行为
                      发生时，系统推送异常行
                      为预警给管理员

                  </div>
                </li>
              </ul>
              <div class="waves" id="waves">

              </div>
            </section>
          </div>
        </div>
      </div>
      <div class="section fp-section fp-table" data-anchor="">
        <div class="fp-tableCell dis-b" style="padding-top: 100px;">
          <div class="section-inner">
            <h2 class="text-center">为企业提供安全的数据协作平台</h2>
            <p class="text-c col-8D8FA5">通过星⽯云企业可以轻松的实现海量⽂件的聚合，存储以及规范化管理</p>
            <div class="container">
              <div class="row">
                <div class="box-l col-12 col-sm-6 col-md-6 col-lg-3" style="padding-right: 0;">
                  <a href="javascript:void(0);" :class="active == index?'activees':''" v-for="(item,index) in list"
                    @click="check(index)">
                    <img :src="active == index?item.iconActive:item.icon" alt="" width="32">
                    <span>{{item.name}}</span>
                  </a>
                </div>
                <div class="box-r col-12 col-sm-6 col-md-6 col-lg-9">
                  <img :src="list[active].img" alt="">
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="section gray-bg fp-section fp-table" data-anchor="" style="    display: flex;
      align-items: center;
      justify-content: center;">
        1
        <div class="fp-tableCell dis-b" style="height: initial;padding-top: 100px;">
          <div class="section-inner">
            <h2 class="text-center">为什么选择星石云协作平台</h2>
            <p class="text-c col-8D8FA5">部⻔间以及与企业外部的⽂件共享，并灵活设置权限</p>
            <div class="container">
              <div class="row">
                <div class="box-l1 col-12 col-sm-6 col-md-6 col-lg-3 mt-20">
                  <a href="javascript:void(0);">
                    <h5 class="col-000">产品可持续迭代</h5>
                    <span>
                      <img src="images/icon-sure.png" alt="" width="20">
                      星石云私有云产品可定期进行产品迭代更新，保持
                      与公有云同样的功能和产品稳定性
                    </span>

                  </a>
                  <a href="javascript:void(0);">
                    <h5 class="col-000">安全的数据存储</h5>
                    <span>
                      <img src="images/icon-sure.png" alt="" width="20">
                      文件多副本存储，采用最终一致性数据模型，保持数据在故障环境下不会丢失
                    </span>
                  </a>
                  <a href="javascript:void(0);">
                    <h5 class="col-000">更稳定健壮的系统</h5>
                    <span>
                      <img src="images/icon-sure.png" alt="" width="20">
                      所有服务能力均具备高可用和负载均衡能力，部署 在独立的网络隔离环境；具备故障恢复和容灾能力
                    </span>
                  </a>
                </div>
                <div class="box-r col-12 col-sm-6 col-md-6 col-lg-6">
                  <div style="margin: 20px;">
                    <img src="images/home-content2.png" alt="">
                  </div>

                </div>
                <div class="box-l1 col-12 col-sm-6 col-md-6 col-lg-3 mt-20">
                  <a href="javascript:void(0);">
                    <h5 class="col-000">海量文件存储</h5>
                    <span>
                      <img src="images/icon-sure.png" alt="" width="20">
                      支持千万级的文件量存储，存储和服务均可以通过
                      快速的一键弹性伸缩能力进行底层能力扩展，便于
                      企业长远的容量规划
                    </span>

                  </a>
                  <a href="javascript:void(0);">
                    <h5 class="col-000">系统兼容性高</h5>
                    <span>
                      <img src="images/icon-sure.png" alt="" width="20">
                      完美兼容企业原有环境，能实现在容
                      器、虚拟化、 物理机、以及多种环
                      境下的部署
                    </span>
                  </a>
                  <a href="javascript:void(0);">
                    <h5 class="col-000">性能更优且可扩展</h5>
                    <span>
                      <img src="images/icon-sure.png" alt="" width="20">
                      优异的并发吞吐支持，支持独立对存
                      储空间或服务
                      能力单独做扩容
                    </span>
                  </a>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="section fp-section fp-table" data-anchor="" style="overflow:auto;">
        <div class="fp-tableCell dis-b" style="overflow: auto;display: table-cell;">
          <div class="slimScrollDiv">
            <div class="fp-scrollable">
          <div class="section-inner">
            <div class="container mb-20">
              <div class="row">
                <h2 class="col-xl-12 col-sm-12 col-12 text-c"  style="padding-top: 120px;">为各行业提供覆盖全生命周期的文件管理及协作服务</h2>
                <!-- <div class="col-xl-4 col-sm-4 col-4 text-right">
                  <img class="mr-15 cursor" src="images/icon-left.png" alt="" width="40" @click="goPage(0)">
                  <img class="cursor" src="images/icon-right.png" alt="" width="40" @click="goPage(1)">
                </div> -->
              </div>
            </div>

            <div class="container mb-20">
              <div class="row">
                <div class="col-lg-3 col-sm-6 col-md-6 col-6 m-0 anli-box" v-for='(item,index) in list1'  @click="goDetails(item.type)">
                    <img :src="item.img">
                    <div class="mask">
                        <h4 class="title1 text-c">{{item.title}}</h4>
                    </div>
                </div>
              </div>
            </div>

            <div>
              <footer class="bg-1976D2" style="margin-top: 30px;">
                <div class="container text-left">
                  <div class="row">
                    <div class="col-xl-4 col-12 text-left">
                      <img src="images/icon-logo-white.png" alt="" style="width: 300px;height: inherit;">
                      <p style="width: 300px;transform: scale(0.8, 0.8);font-size: 1.1rem;">专业团队，服务贯穿整个项目，帮助客户打造企业文件管理及办公新模式。</p>
        
                    </div>
                    <div class="col-xl-3 col-12">
                      <div class="row">
                        <div class="col-xl-6 col-4">
                          <h4>星石云</h4>
                          <p><a href="./index.html">首页</a></p>
                          <p><a href="./product.html">产品与服务</a></p>
                          <p><a href="./case.html">客户案例</a></p>
                          <p><a href="./concatUs.html">联系我们</a></p>
                          <p><a href="./aboutUs.html">关于我们</a></p>
                        </div>
                        <div class="col-xl-6 col-4">
                          <h4>关于我们</h4>
                          <p><a href="./aboutUs.html">公司介绍</a></p>
                          <p><a href="./aboutUs.html">星石云发展史</a></p>
                        </div>
                      </div>
                    </div>
                    <div class="col-xl-3 col-12 text-right">
                      <h4>北京中科创硕科技有限公司</h4>
                      <p>电话：18600008210</p>
                      <p>邮箱：yzhang@zkbsn.com </p>
                      <p>地址：北京市昌平区回龙观东大街298号六层603室</p>
                      
                    </div>
                    <div class="col-xl-2 col-12 text-right">
                        <img src="images/home-gfwx.png">
                    </div>
                  </div>
                </div>
              </footer>
              <section class="yewei">
                <div class="container">
                  <div class="row">
                    <div class="col-xl-12 col-12 text-center yewei-text">
                      2017-2024 © ZKCSO All Rights Reserved. 北京中科创硕科技有限公司官网 <a href='http://beian.miit.gov.cn/'
                        style='color: #fff;
      '>京ICP备18044572号-3</a>
                    </div>
                  </div>
                </div>
              </section>
            </div>

          </div>
        </div>
      </div>
        </div>
      </div>
    </div>
    <script src="js/lib2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap-landing.min.js" type="text/javascript"></script>
    <script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
    <script src="js/landing_page.min.js" type="text/javascript"></script>

    <div class="mediumFloat">
      <div class="xianxia">
        <div style="border: 1px solid #8FCAF9;border-radius: 6px;">
          <div class="itemdiv weixin" style="border-radius: 6px 6px 0 0;">
            <span @mouseover="wxShow()"
                  @mouseleave="wxHide()">
              <img :src="imgList.img1" alt="" lazy />
              <p>微信</p>
            </span>
          </div>
    
          <div class="itemdiv dianhua">
            <span @mouseover="dianhuaShow()">
                  <img :src="imgList.img2" alt="" lazy />
                  <p>联系电话</p>
            </span>
          </div>
    
          <div class="itemdiv qq" @mouseover="dianhuaShow1 = false"  style="border-radius: 0 0 6px 6px;border: 0;">
                <span @click="goQQ()">
                    <img :src="imgList.img4" alt="" lazy />
                    <p>QQ</p>
                </span>
          </div>
        </div>
  
        <div class="itemdiv" @mouseover="dianhuaShow1 = false" style="background: #1976D2;margin-top: 10px;border-radius: 6px;border: 1px solid #8FCAF9;">
              <span @click="goTop()" style="    display: flex;
              align-items: center;
              justify-content: center;">
                <img src="images/ico-top.png" alt="" lazy />
              </span>
        </div>
          
  
      </div>
  
      <!-- 微信客服 -->
      <div class="weixinCon"
           v-show="wxshow">
             <img :src="imgList.img3" alt="" />
        <p>官方微信</p>
      </div>
      <!-- 电话客服 -->
      <div class="dianhuaCon"
                @mouseleave="dianhuaHide()"
           v-show="dianhuaShow1">
        <p class="p1">咨询电话:18600008210</p>
        <p class="p2">免费咨询服务电话</p>
      </div>
  
    </div>

  </div>

</body>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      active: 0,
      list: [{
        icon: 'images/home-icon7.png',
        iconActive: 'images/home-icon7-active.png',
        img: 'images/home-content1.png',
        name: "团队文件共享"
      }, {
        icon: 'images/home-icon8.png',
        iconActive: 'images/home-icon8-active.png',
        img: 'images/home-content5.png',
        name: "内容管理"
      }, {
        icon: 'images/home-icon9.png',
        iconActive: 'images/home-icon9-active.png',
        img: 'images/home-content3.png',
        name: "核心数据安全"
      }, {
        icon: 'images/home-icon10.png',
        iconActive: 'images/home-icon10-active.png',
        img: 'images/home-content4.png',
        name: "企业知识库"
      }],
      page:1,
      list1: [
        {
          img: 'images/icon-ye-8.png',
          title: "能源行业",
          content: '企业内部系统众多，文件分散，权限混 乱，管理及维护困难——建立统一的文档 管理系统，通过API、多终端.....',
          type:0,
          end:2
        },
        {
          img: 'images/icon-ye-7.png',
          title: "医药行业",
          content: '现有文件管理方式传统，主要通过邮件 和纸质书籍来管理，经常损坏丢失不易 调阅查找—— 打造星石云盘......',
          type:1,
          end:2
        },
        {
          img: 'images/icon-ye-5.png',
          title: "高校行业",
          content: '原有系统稳定性差，资源存储散乱 —— 打 造“教育云盘”，教学知识被有序沉淀。师 生间缺乏实时沟通渠.....',
          type:2,
          end:4
        },
        {
          img: 'images/icon-ye-1.png',
          title: "零售行业",
          content: '产品资料种类繁多，更新频繁，无法及 时推送到培训师和客户的手中——建立统 一的文件存储平台....',
          type:3,
          end:4
        },
        {
          img: 'images/icon-ye-2.png',
          title: "地产行业",
          content: '公司分散，人员流动大 ——企业文件统一 管理，无缝交接，提升数据流通价值， 延续企业知识体系....',
          type:4,
          end:6
        },
        {
          img: 'images/icon-ye-6.png',
          title: "制造行业",
          content: '文件散乱，分布在FTP、QQ、邮箱、个 人PC等各处——打造制造企业云文件管 理平台，汇聚企业所有文件....',
          type:5,
          end:6
        },
        {
          img: 'images/icon-ye-3.png',
          title: "集团公司",
          content: '集团层面、区域公司、产业板块、项目 团队、外部企业之间各业务条线交错纵 横，场景复杂，文件交互....',
          tart:6,
          end:8
        },
        {
          img: 'images/icon-ye-4.png',
          title: "政府部门",
          content: '政府文件集中有序管理 个人文件实时 同步 文件操作方便易用',
          type:7,
          end:8
        }
      ],
      newList:[
        {
          img: 'images/icon-ye-1.png',
          title: "能源行业",
          content: '企业内部系统众多，文件分散，权限混 乱，管理及维护困难——建立统一的文档 管理系统，通过API、多终端.....',
          type:0,
          end:2
        },
        {
          img: 'images/icon-ye-2.png',
          title: "医药行业",
          content: '现有文件管理方式传统，主要通过邮件 和纸质书籍来管理，经常损坏丢失不易 调阅查找—— 打造星石云盘......',
          type:1,
          end:2
        }
      ],
      wxshow: false, // 初始化点击的索引值
      dianhuaShow1: false,
      imgList:{
          img1:'images/ico-erweima1.png',
          img2:'images/ico-dianhau.png',
          img3:'images/home-gfwx.png',
          img4:'images/ico-qq.png',
      }
    },
    methods: {
      check: function (index) {
        this.active = index
      },
      goPage (type) {
        if (type == 0) {
          if (this.page == 1) {
            return
          }
          this.page --;
          this.newList = this.list1.slice(Number(this.newList[0].end)-4,Number(this.newList[0].end) - 2)
        } else {
          if (this.page == 4) {
            return
          }
          this.page ++;
          this.newList = this.list1.slice(Number(this.newList[0].end),Number(this.newList[0].end) +2)
        }
      },
      goDetails (index) {
            window.location.href = "./details.html?type=" + index
        },
        wxShow() {
      this.wxshow = true;
      this.dianhuaShow1 = false;
    },
    goQQ() {
      window.open('http://wpa.qq.com/msgrd?v=3&uin=861497177&site=qq&menu=yes')
    },
    wxHide() {
      this.wxshow = false
    },
    dianhuaShow() {
      this.dianhuaShow1 = true
    },
    dianhuaHide() {
      this.dianhuaShow1 = false
    },
    goTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
      $('.fullpage-wrapper').css('transform','translate3d(0px, -70px, 0px)');
      $('.section').removeClass('active');
      $('.section:first-child').addClass('active');
    }
    }
  })
</script>

</html>