<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">
      <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">
      <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>
