some modify

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/.svn
 
 # local env files
 .env.local

src/views/demo/document.vue

@@ -12,7 +12,6 @@
       <div class="text-info">并在main.js中引入他们即可使用</div>
 
       <highlight-code>
-// components中highlightCode组件是本例中用来增强代码高亮的, 你应该不需要它, 可以选择移除
 // main.js
 import datavComponents from './components/index.js'
 import datavPlugins from './plugin/index.js'

src/views/demo/index.vue

@@ -45,6 +45,18 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    initActiveIndex () {
+      const { $route: { name }, menuData } = this
+
+      this.activeIndex = menuData.findIndex(({ routerName }) => routerName === name)
+    }
+  },
+  created () {
+    const { initActiveIndex } = this
+
+    initActiveIndex()
   }
 }
 </script>

src/views/demo/other.vue

@@ -1,5 +1,65 @@
 <template>
   <div id="other">
+    <border-box-7 class="other-item">
+      <div class="component">
+        <water-level-pond :level="[60, 40]" />
+      </div>
+
+      <div class="config-info">
+        <div class="title">Water-Level-Pond</div>
+
+        <highlight-code>
+&lt;water-level-pond :level="[60, 40]" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+// level必须为数组
+// 可绑定colors属性 非必须 未配置该项自动使用默认色
+// 当colors属性为数组时 波浪自动应用渐变色
+// noGradient为true时可关闭波浪渐变色效果
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="other-item">
+      <div class="component">
+        <water-level-pond :level="[60, 40]" type="rect" :waveNum="2" :waveHeight="0.3" />
+      </div>
+
+      <div class="config-info">
+        <div class="title">Water-Level-Pond</div>
+
+        <highlight-code>
+&lt;water-level-pond :level="[60, 40]" type="rect" :waveNum="2" :waveHeight="0.3" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+// 矩形样式
+// waveNum 可设置波峰个数
+// waveHeight 可设置波峰高度
+        </highlight-code>
+      </div>
+    </border-box-7>
+
+    <border-box-7 class="other-item">
+      <div class="component">
+        <water-level-pond :level="[60, 40]" type="roundRect" borderColor="rgba(45, 219, 216, 0.5)" />
+      </div>
+
+      <div class="config-info">
+        <div class="title">Water-Level-Pond</div>
+
+        <highlight-code>
+&lt;water-level-pond :level="[60, 40]" type="roundRect" borderColor="rgba(45, 219, 216, 0.5)" /&gt;
+        </highlight-code>
+
+        <highlight-code>
+// 圆角矩形样式
+// 可特殊设置边框颜色 文字与边框颜色同步
+        </highlight-code>
+      </div>
+    </border-box-7>
+
     <border-box-7 class="other-item">
       <div class="component">
         <percent-pond :percent="66" />
@@ -9,7 +69,7 @@
         <div class="title">Percent-Pond</div>
 
         <highlight-code>
-&lt;percent-pond :percent="1399" /&gt;
+&lt;percent-pond :percent="66" /&gt;
         </highlight-code>
       </div>
     </border-box-7>
@@ -32,7 +92,10 @@
 
 <script>
 export default {
-  name: 'Other'
+  name: 'Other',
+  data () {
+    return {}
+  }
 }
 </script>
 
@@ -59,6 +122,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: center;
+    flex-shrink: 0;
   }
 
   .config-info {
@@ -71,6 +135,11 @@ export default {
     }
   }
 
+  .water-level-pond {
+    width: 150px;
+    height: 200px;
+  }
+
   .percent-pond {
     width: 300px;
     height: 80px;