add 官网移植

Andy
1 parent dcf87b64
Showing 36 changed files with 848 additions and 14 deletions
public/index.html
src/assets/about/banner.png
src/assets/about/email.png
src/assets/about/fax.png
src/assets/about/tel.png
src/assets/center/center.png
src/assets/center/enterprise.png
src/assets/center/monitor.png
src/assets/center/ower.png
src/assets/home/banner.png
src/assets/home/berth-list.png
src/assets/home/berth.png
src/assets/home/news-bg.png
src/assets/park/banner.png
src/assets/park/code.png
src/assets/park/nav1.png
src/assets/park/nav2.png
src/assets/park/pay1.png
src/assets/park/pay2.png
src/assets/park/service1.png
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
+    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb"></script>
   </head>
   <body>
     <noscript>
 import Vue from 'vue'
 import Router from 'vue-router'
+import home from '@/views/home'
  
 Vue.use(Router)
  
 /* Layout */
 import Layout from '@/layout'
+export const defaultRoutes = [
+
+    {
+      path: '/',
+      redirect:'/home'
+    },
+    {
+      path: '/home',
+      name: 'home',
+      component:home,
+      meta: {
+        title: '首页'
+      }
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('@/views/about'),
+      meta: {
+        title: '关于我们'
+      }
+    },
+    {
+      path: '/service',
+      name: 'service',
+      component: () => import('@/views/login/index'),
+      hidden: true,
+      meta: {
+        title: '停车服务'
+      }
+    },
+    /*{
+      path: '/service',
+      name: 'service',
+      component: () => import('../views/service'),
+      meta: {
+        title: '停车服务'
+      }
+    },*/
+    {
+      path: '/center',
+      name: 'center',
+      component: () => import('@/views/center'),
+      meta: {
+        title: '官网中心'
+      }
+    },
+    {
+      path: '/park',
+      name: 'park',
+      component: () => import('@/views/park'),
+      meta: {
+        title: '黄石停车'
+      }
+    },
+
+  ];
  
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -44,7 +102,7 @@ export const constantRoutes = [
   },
  
   {
-    path: '/',
+    path: '/dashboard',
     component: Layout,
     redirect: '/dashboard',
     children: [{
@@ -135,9 +193,13 @@ export const constantRoutes = [
 ]
  
 const createRouter = () => new Router({
+
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
+  linkExactActiveClass:'navActive',
+  routes: defaultRoutes,
+  // routes: [defaultRoutes,constantRoutes],
+
 })
  
 const router = createRouter()
@@ -6,7 +6,7 @@
  
 body {
   height: 100%;
-  background: #f0f2f5;
+  //background: #f0f2f5;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -150,3 +150,101 @@ p{
   cursor: pointer;
 }
  
+/*自定义导航选中样式*/
+.navActive {
+  border-bottom: 2px solid #fff !important;
+}
+
+.banner {
+  width: 100%;
+  height: 550px;
+}
+
+.sectionBG {
+  width: 100%;
+  height: 529px;
+}
+
+.grayBg {
+  background: rgba(248, 248, 248, 1);
+}
+
+.commonWidth {
+  width: 1200px;
+  height: 100%;
+  display: flex;
+  margin: 0 auto;
+  padding-top: 40px;
+}
+
+.anchorBL{display:none;}  /*去掉百度地图logo*/
+
+// 官网 移植 reset 样式部分
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+ol, ul {
+  list-style: none;
+}
+/*隐藏*/
+.dn {
+  display: none;
+}
+
+.margin0-12 {
+  margin: 0 12px;
+}
+
+.margin12-0 {
+  margin: 12px 0;
+}
+
+.flexfm {
+  flex: 1;
+}
+
+.pos-rel {
+  position: relative;
+}
+
+.pos-abs {
+  position: absolute;
+}
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.displayFlex {
+  display: flex;
+}
+
+.averageFlex {
+  flex: 1
+}
+
+.contentWidth {
+  width: 1200px;
+  margin: 0 auto;
+}
@@ -7,14 +7,13 @@
         <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
         <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
       </div>
-      <div class="bullshit">
-        <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">All rights reserved
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+      <div class="bullshit" style="padding-top: 128px">
+        <div class="bullshit__oops"></div>
+        <div class="bullshit__info">
         </div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
-        <a href="" class="bullshit__return-home">Back to home</a>
+        <div class="bullshit__headline">页面未找到</div>
+        <div class="bullshit__info"></div>
+        <a href="" class="bullshit__return-home" style="margin-left: 95px">返回首页</a>
       </div>
     </div>
   </div>
@@ -34,10 +33,12 @@ export default {
  
 <style lang="scss" scoped>
 .wscn-http404-container{
-  transform: translate(-50%,-50%);
-  position: absolute;
-  top: 40%;
-  left: 50%;
+  width: 900px;
+  /*<!--transform: translate(-50%,-50%);-->*/
+  /*position: absolute;*/
+  /*top: 40%;*/
+  /*left: 50%;*/
+  margin: 0 auto;
 }
 .wscn-http404 {
   position: relative;
+<template>
+  <div >
+    <div class="banner">
+      <p class="banner-title">关于我们</p >
+      <p class="banner-des">智慧停车，助你轻松出行我</p >
+    </div>
+    <h1 >工作机会</h1>
+    <ul class="work-list">
+      <li>
+        <p class="work-title">【招聘职位】总裁秘书</p >
+        <p class="work-date">发布时间：2019/05/28</p >
+        <div class="n_cont">
+
+          <p>岗位职责：</p >
+
+          <p>1.负责协调总经理与公司内外部的沟通，传达贯彻总经理对公司内外部工作的管理思想和领导意图；</p >
+
+          <p>2. 参与公司发展规划、业务经营计划的编制和公司重大决策的讨论。协助各部门将相关汇报、意见、建议反馈给总经理；</p >
+
+          <p>3. 负责总裁有关文件的起草、修改、审核，整理各类文书、文件、报告、总结及其他材料；</p >
+
+          <p>4. 负责总裁管辖范围内工作进度的跟进、督促，处理与反馈。</p >
+
+          <p>&nbsp;</p >
+
+          <p>&nbsp;</p >
+
+          <p>任职要求：</p >
+
+          <p>1.大学本科及以上学历，经济管理、文秘、英语等相关专业；</p >
+
+          <p>2.3年以上同类企业文秘工作经验，能熟练的英文对话交流；</p >
+
+          <p>3.掌握文秘知识，熟悉公文写作知识，熟练使用办公软件；</p >
+
+          <p>4.具有一定的组织能力、协调能力、沟通能力、分析能力、语言表达能力和文公写作能力。</p >
+
+        </div>
+      </li>
+      <li>
+        <p class="work-title">【招聘职位】销售总监</p >
+        <p class="work-date">发布时间：2019/05/28</p >
+        <div class="n_cont">
+
+          <p>岗位职责：</p >
+          <p>1、负责销售团队管理，带领团队完成销售目标、业绩指标、销售收入、合同回款及项目结案；</p >
+
+          <p>2、负责所辖区域（新老客户）或专注产品的市场、销售及项目运作；</p >
+
+          <p>3、协调并整合公司内部及外部资源，推进计划达成，满足客户需求及公司业绩经营目标要求</p >
+
+          <p>4、负责公司分派的项目/客户运作；</p >
+
+          <p>&nbsp;</p >
+
+          <p>&nbsp;</p >
+
+          <p>任职要求：</p >
+          <p>1、从事智能交通、智能停车、数字城管、智慧城市等相关领域或公安、交管、城管、一卡通、停车行业等的市场销售2年以上工作经验，并有独立运作合同的谈判、沟通、运作、签署与履约实施经历；</p >
+
+          <p>2、具备独立开拓区域市场与销售成交的经验及相应能力，具备销售市场综合素养与技巧能力；</p >
+
+
+
+        </div>
+      </li>
+    </ul>
+    <h1>联系我们</h1>
+    <h3>“黄石停车”融合智能交通、移动互联网、物联网以及电子支付等技术</h3>
+    <ul class="contact-list">
+      <li>
+        <p>电话</p >
+        <p>0714-653588</p >
+      </li>
+      <li>
+        <p>传真</p >
+        <p>0714-653538222</p >
+      </li>
+      <li>
+        <p>邮箱</p >
+        <p>hsci@sina.com</p >
+      </li>
+    </ul>
+    <div id="map" class="map"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'about',
+    mounted() {
+      // 百度地图API功能
+      var sContent = '<div style="margin:0;line-height:20px;padding:2px;">' +
+        '<h3 style="font-size: 15px;color: #CC2727;font-weight: 600">黄石市城市发展投资集团有限公司</h3> ' +
+        '<span style="font-weight: 600;">地址</span>：湖北省黄石市磁湖东路28号<br/>' +
+        '<span style="font-weight: 600;">邮编</span>：435000<br/>' +
+        '<span style="font-weight: 600;">电话</span>：0714—6535388<br/>' +
+        '<span style="font-weight: 600;">传真</span>：0714—653538222<br/>' +
+        '<span style="font-weight: 600;">邮箱</span>：hsci@sina.com<br/>' +
+        '</div>';
+      var map = new BMap.Map("map");
+      var point = new BMap.Point(115.078186, 30.232887);
+      var point1 = new BMap.Point(115.078186, 30.230887);
+      var marker = new BMap.Marker(point1); //创建marker对象
+
+      map.addOverlay(marker); //在地图中添加marker
+
+      map.centerAndZoom(point, 15);
+      var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
+      map.openInfoWindow(infoWindow, point); //开启信息窗口
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .banner {
+    background: url("../assets/about/banner.png") no-repeat;
+    background-size: 100% 100%;
+    text-align: left;
+    .banner-title {
+      width: 1200px;
+      margin: 0 auto;
+      padding: 200px 0 30px;
+      font-size: 65px;
+      font-weight: bold;
+      color: rgba(255, 255, 255, 1);
+    }
+    .banner-des {
+      width: 1200px;
+      margin: 0 auto;
+      font-size: 20px;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 1);
+      letter-spacing: 2px;
+    }
+  }
+
+  h1 {
+    padding: 30px 0 30px;
+    font-size: 38px;
+    font-weight: 600;
+    color: rgba(49, 70, 89, 1);
+  }
+
+  h3 {
+    font-size: 16px;
+    font-weight: 300;
+    color: rgba(49, 70, 89, 1);
+  }
+
+  .work-list {
+    width: 1200px;
+    margin: 10px auto;
+    color: #5a5a5a;
+    display: flex;
+    > li {
+      flex: 1;
+    }
+  }
+
+  .work-title{
+    color: #1d50a2;
+    font-size: 20px;
+  }
+
+  .work-date{
+    margin: 10px auto;
+  }
+
+  .n_cont{
+    max-width: 550px;
+    text-align: left;
+    line-height: 20px;
+  }
+
+  .contact-list {
+    width: 1200px;
+    margin: 30px auto;
+    overflow: hidden;
+    font-size: 20px;
+    color: #314659;
+    text-align: left;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-content: space-between;
+    li {
+      flex: 1;
+      padding-left: 106px;
+      height: 80px;
+      position: relative;
+      &:before {
+        content: '';
+        position: absolute;
+        width: 80px;
+        height: 80px;
+        left: 0;
+        top: 0;
+      }
+      &:nth-of-type(1):before {
+        background: url("../assets/about/tel.png");
+      }
+      &:nth-of-type(2):before {
+        background: url("../assets/about/fax.png");
+      }
+      &:nth-of-type(3):before {
+        background: url("../assets/about/email.png");
+      }
+      p:nth-of-type(1) {
+        margin: 20px 0 10px;
+      }
+    }
+  }
+
+  .map {
+    width: 1200px;
+    height: 472px;
+    margin: 0 auto 30px;
+    z-index: 999;
+  }
+</style>
+<template>
+  <div>
+    <div class="banner"></div>
+    <div class=" sectionBG" style="background: #FFF">
+      <div class="commonWidth">
+        <div class="flexfm">
+          <img src="../assets/center/enterprise.png" alt="">
+        </div>
+        <div class="flexfm des-wrap">
+          <div class="des">
+            <h2>企业云平台</h2>
+            <h3>为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产 </h3>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grayBg sectionBG">
+      <div class="commonWidth">
+        <div class="flexfm des-wrap">
+          <div class="des">
+            <h2>运营监控中心</h2>
+            <h3>建立综合停车数据资源，搭建基础分析模型，提供新一代的数据分析与商业智能 BI解决方案，致力于缓解拥堵实现车位运营智能化</h3>
+          </div>
+        </div>
+        <div class="flexfm">
+          <img src="../assets/center/monitor.png" alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class=" sectionBG" style="background: #FFF">
+      <div class="commonWidth">
+        <div class="flexfm">
+          <img src="../assets/center/ower.png" alt="">
+        </div>
+        <div class="flexfm des-wrap">
+          <div class="des">
+            <h2>车主服务平台</h2>
+            <h3>移动掌上互联，为车主提供附近车位，个性导航，语音播报，手机缴费， 订单详情，积分会员，共享车位，无感支付等多样化移动应用，解决</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'center'
+}
+</script>
+
+<style scoped lang="scss">
+  .banner {
+    background: url("../assets/center/center.png");
+  }
+
+  .des-wrap {
+    position: relative;
+    .des {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      text-align: left;
+    }
+    h2 {
+      margin-bottom: 15px;
+      font-size: 20px;
+      color: rgba(13, 26, 38, 1);
+    }
+    h3 {
+      line-height: 20px;
+      color: rgba(49, 70, 89, 1);
+    }
+  }
+</style>
+<template>
+  <div>
+    <div class="banner"></div>
+    <div class="berth">
+      <h1 class="title">泊位分布</h1>
+      <div class="map" id="map"></div>
+      <div class="berth-num">
+        <p>区域泊位规划</p>
+        <ul class="berth-list">
+          <li>
+            <span class="fl">黄石铁山区</span>
+            <span class="fr">123</span>
+          </li>
+          <li>
+            <span class="fl">黄石下陆区</span>
+            <span class="fr">5007</span>
+          </li>
+          <li>
+            <span class="fl">黄石黄石港区</span>
+            <span class="fr">2395</span>
+          </li>
+          <li>
+            <span class="fl">黄石西塞山区</span>
+            <span class="fr">1188</span>
+          </li>
+          <li>
+            <span class="fl">黄石经济开发区</span>
+            <span class="fr">413</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="news-wrap">
+      <h1 class="title">新闻中心</h1>
+      <div class="fl news-bg"></div>
+      <ul class="fl news-con">
+        <li>
+          <ul>
+            <li class="fl date">
+              <h3>06</h3>
+              <h5>06</h5>
+            </li>
+            <li class="fl des">
+              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16613')"><a>集聚人才新优势   激活发展新动能</a></h3>
+              <p>6月6日上午，市城发集团召开优秀青年人才表彰会，对四家重才爱才先进单位和十名优秀青年人才进行了表彰。</p>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <ul>
+            <li class="fl date">
+              <h3>06</h3>
+              <h5>06</h5>
+            </li>
+            <li class="fl des">
+              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16611')"><a>黄石城发集团春季招聘体检公告</a></h3>
+              <p>根据《黄石市城市发展投资集团有限公司春季招聘公告》及复试情况，现将体检人员名单及有关事项公告如下。</p>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <ul>
+            <li class="fl date">
+              <h3>06</h3>
+              <h5>05</h5>
+            </li>
+            <li class="fl des">
+              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16610')"><a>黄石城发集团再添新成员</a></h3>
+              <p>6月4日，市妇联和市城发集团签订协议，将市妇联所属市天宝幼儿园和市儿童活动中心移交给市城发集团。</p>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'home',
+    mounted() {
+      // 百度地图API功能
+      var map = new BMap.Map("map");
+      var point = new BMap.Point(115.078186, 30.232887);
+      map.centerAndZoom(point, 15);
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .banner {
+    background: url("../assets/home/banner.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .berth {
+    width: 1200px;
+    height: 823px;
+    padding: 50px 0;
+    position: relative;
+    margin: 0 auto;
+  }
+  .map{
+    width: 1200px;
+    height: 600px;
+  }
+
+  .berth-num{
+    width: 323px;
+    height: 368px;
+    position: absolute;
+    top:200px;
+    right: 20px;
+    background: url("../assets/home/berth.png") no-repeat;
+    p{
+      padding-top: 20px;
+      font-size: 20px;
+    }
+  }
+  .berth-list{
+    margin-top: 50px;
+    li{
+      height: 21px;
+      line-height: 21px;
+      font-size: 16px;
+      color: #314659;
+      padding: 0 40px 30px 60px;
+      background: url("../assets/home/berth-list.png") no-repeat 30px 0;
+      margin-bottom: 15px;
+    }
+  }
+  .news-wrap{
+    width: 1200px;
+    margin: 0 auto;
+    padding: 50px 0;
+    overflow: hidden;
+  }
+  .title{
+    padding-bottom: 50px;
+    font-size:38px;
+    font-family:PingFangSC-Semibold;
+    font-weight:600;
+    color:rgba(49,70,89,1);
+    line-height:46px;
+  }
+  .news-bg{
+    width: 535px;
+    height: 401px;
+    margin-right: 45px;
+    background: url("../assets/home/news-bg.png") no-repeat;
+  }
+
+  .news-con {
+    width: 535px;
+    height: 401px;
+  }
+
+  .news-con>li{
+    height: 129px;
+    border-bottom: 1px solid rgba(216,216,216,1);
+    ul{
+      padding: 25px 0 0;
+      overflow: hidden;
+    }
+  }
+
+  .date{
+    width: 83px;
+    height: 83px;
+    margin-right: 20px;
+    background: #FF5656;
+    position: relative;
+    h3{
+      padding-top: 15px;
+      font-size:32px;
+      color:rgba(255,255,255,1);
+    }
+    h5{
+      font-size: 12px;
+      text-align: right;
+      padding-right: 10px;
+      color: #Fff;
+    }
+    &:before{
+      content: '';
+      position: absolute;
+      right: 14px;
+      bottom: 27px;
+      transform: rotate(-45deg);
+      width: 25px;
+      height: 1px;
+      background:rgba(255,255,255,1)
+    }
+  }
+  .des h3{
+    padding-bottom: 15px;
+    font-size: 20px;
+    color: #0D1A26;
+    cursor: pointer;
+  }
+  .des p {
+    width: 430px;
+    line-height: 22px;
+    color: #314659;
+  }
+</style>
@@ -176,6 +176,7 @@ export default {
       display: inline-block;
       height: 47px;
       width: 85%;
+      float: left;
  
       input {
         background: transparent;
@@ -246,6 +247,7 @@ export default {
       vertical-align: middle;
       width: 30px;
       display: inline-block;
+      float: left;
     }
  
     .title-container {
+<template>
+  <div>
+    <div class="banner">
+      <h1>一键导航 轻松停车</h1>
+      <h2>One-click navigation for easy parkin</h2>
+      <div style="width: 1200px;margin: 0 auto;text-align: left">
+        <img src="../assets/park/code.png" alt="">
+      </div>
+
+    </div>
+    <div class="section" style="background: #FFF">
+      <h1>“黄石停车”APP</h1>
+      <h4>“黄石停车”停车APP融合智能交通、移动互联网、物联网以及电子支付等技术，针对城市“停车难”，帮助车主快速寻找停车位，大大提高停车效率</h4>
+      <ul class="section-con">
+        <li>
+          <img src="../assets/park/nav1.png" alt="">
+        </li>
+        <li>
+          <img src="../assets/park/nav2.png" alt="">
+        </li>
+        <li>
+          <p style="padding: 100px 0 20px">停车一键导航</p>
+          <ul class="section-list">
+            <li>目的地附近停车场推荐</li>
+            <li>快速一键导航停车场</li>
+            <li>最佳停车路径规划</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <div class="section" style="background: #F8F8F8">
+      <ul class="section-con">
+        <li>
+          <p style="padding: 100px 0 20px">在线缴费快速出场</p>
+          <ul class="section-list">
+            <li>支持微信、支付宝</li>
+            <li>多种在线支付方式</li>
+            <li>提前支付，快速离场</li>
+            <li>减少通道排队时间</li>
+          </ul>
+        </li>
+        <li>
+          <img src="../assets/park/pay1.png" alt="">
+        </li>
+        <li>
+          <img src="../assets/park/pay2.png" alt="">
+        </li>
+      </ul>
+    </div>
+
+    <div class="section" style="background: #FFF">
+      <ul class="section-con" style="width: 800px">
+        <li>
+          <img src="../assets/park/service1.png" alt="">
+        </li>
+        <li>
+          <img src="../assets/park/service2.png" alt="">
+        </li>
+        <li>
+          <p style="padding: 100px 0 20px">我的服务</p>
+          <ul class="section-list">
+            <li>为用户直接提供周边第三方服务入口 </li>
+            <li>方便用户出行以及获得更多相关服务</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'park'
+}
+</script>
+
+<style scoped lang="scss">
+  .banner {
+    background: url("../assets/park/banner.png") no-repeat;
+    background-size: 100% 100%;
+    h1{
+      width: 1200px;
+      text-align: left;
+      padding: 100px 0 30px;
+      margin: 0 auto;
+      font-size:65px;
+      font-family:PingFangSC-Semibold;
+      font-weight:600;
+      color:rgba(73,73,73,1);
+    }
+    h2{
+      width: 1200px;
+      text-align: left;
+      margin: 0 auto 30px;
+      font-size:18px;
+      font-family:PingFang-SC-Medium;
+      font-weight:500;
+      color:rgba(73,73,73,1);
+      line-height:25px;
+      letter-spacing:4px;
+    }
+  }
+
+
+  .section {
+    padding: 30px 0;
+    text-align: center;
+    h1 {
+      padding: 0 0 30px 0;
+      font-size: 38px;
+      font-weight: 600;
+      color: rgba(49, 70, 89, 1);
+    }
+    h4 {
+      width: 660px;
+      margin: 0 auto 30px;
+      font-size: 16px;
+      font-weight: 300;
+      color: rgba(49, 70, 89, 1);
+      line-height: 32px;
+    }
+  }
+
+  .section-con {
+    width: 730px;
+    margin: 0 auto;
+    overflow: hidden;
+    > li {
+      float: left;
+      margin-right: 90px;
+      text-align: left;
+      &:last-of-type {
+        margin-right: 0;
+
+      }
+      p {
+        font-size: 20px;
+        color: rgba(13, 26, 38, 1);
+      }
+
+    }
+  }
+
+  .section-list {
+    li {
+      margin-bottom: 10px;
+      color: #314659;
+      position: relative;
+      padding-left: 15px;
+      &:before {
+        content: '';
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        left: 0;
+        top: 3px;
+        border-radius: 50%;
+        background: rgba(255, 86, 86, 1);
+      }
+    }
+  }
+</style>