100ZONE
/
SmartCommunity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
							<!DOCTYPE html>
<html>

<head>
  <meta>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>demo</title>
  <style>
    html,
    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #eeeeee;
    }

    html {
      height: 100vh;
    }

    header {
      text-align: center;
      padding: 20px 0;
      font-weight: bold;
    }

    section {
      width: 1100px;
      margin: 20px auto;
    }

    h1 {
      color: #686c6e;
    }

    code {
      font-family: 'Inconsolata', Monaco, Consolas, 'Andale Mono', monospace;
      border: solid 1px rgba(51, 51, 51, 0.12);
      background: #f5f2f0;
      padding: 15px 20px;
      display: block;
    }

    a {
      text-decoration: none;
      color: #409eff;
    }

    ul.demo {
      margin: 0;
      padding: 0;
    }

    ul.demo>li {
      list-style: none;
      margin: 20px;
      padding: 0;
      float: left;
      width: calc(50% - 20px);
      width: -webkit-calc(50% - 20px);
      background: #fff;
      overflow: hidden;
      border-radius: 4px;
      cursor: pointer;
      -webkit-transition: all .15s linear;
      transition: all .15s linear;
      -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    }

    ul.demo>li:hover {
      -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
      box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
    }

    ul.demo>li:nth-child(odd) {
      margin-left: 0;
    }

    ul.demo>li:nth-child(even) {
      margin-right: 0;
    }

    ul.demo>li>a>img {
      width: 100%;
      height: 250px;
    }

    ul.demo>li>a>.title {
      text-align: center;
      margin: 10px 0;
    }

  </style>
</head>

<body>
  <header>
    <h1>vue-gemini-scrollbar</h1>
  </header>
  <section>
    <code>npm install vue-gemini-scrollbar --save</code>
  </section>
  <section>
    <p>All demos were rewrite by
      <a href="https://github.com/lx544690189/vue-gemini-scrollbar">vue-gemini-scrollbar</a> from
      <a href="https://github.com/noeldelgado/gemini-scrollbar">gemini-scrollbar/examples</a>
    </p>
  </section>
  <section>
    <ul class="demo">
      <li>
        <a href="./demo/00-sidebar.html">
          <img src="imgs/demo-sidebar.png" alt="sidebar">
          <div class="title">sidebar</div>
        </a>
      </li>
      <li>
        <a href="./demo/01-body.html">
          <img src="imgs/demo-body.png" alt="sidebar">
          <div class="title">body</div>
        </a>
      </li>
      <li>
        <a href="./demo/03-grid.html">
          <img src="imgs/demo-grid.png" alt="sidebar">
          <div class="title">grid</div>
        </a>
      </li>
      <li>
        <a href="./demo/04-random-tests.html">
          <img src="imgs/demo-random-tests.png" alt="sidebar">
          <div class="title">random</div>
        </a>
      </li>
      <li>
        <a href="./demo/05-destroy.html">
          <img src="imgs/demo-destroy.png" alt="sidebar">
          <div class="title">destroy</div>
        </a>
      </li>
    </ul>
  </section>
  <script src="js/vue.js" type="text/javascript"></script>
  <script src="js/vue-gemini-scrollbar.js" type="text/javascript"></script>
  <script type="text/javascript">
    var scrollbar = new Vue.$geminiScrollbar({
      element: document.body
    }).create();

  </script>
</body>

</html>