From 4829c39f423b5d7bbc96c742a5498279cbaeda24 Mon Sep 17 00:00:00 2001
From: shangbin <shangbin03@meituan.com>
Date: Mon, 13 Dec 2021 20:29:50 +0800
Subject: [PATCH] =?UTF-8?q?update:=20vant=E7=BB=84=E4=BB=B6=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E5=AE=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/rawComponents/vant/button.vue   |   3 +-
 src/rawComponents/vant/display.vue  | 191 +++++++++++++++-------------
 src/rawComponents/vant/form.vue     | 103 +++++++--------
 src/rawComponents/vant/icon.vue     |   4 +-
 src/rawComponents/vant/index.vue    |   2 +-
 src/rawComponents/vant/layout.vue   | 116 +++++++++--------
 src/rawComponents/vant/nav.vue      | 146 +++++++++++----------
 src/rawComponents/vant/template.vue |   2 +-
 8 files changed, 299 insertions(+), 268 deletions(-)

diff --git a/src/rawComponents/vant/button.vue b/src/rawComponents/vant/button.vue
index fab57f7..75c01bb 100644
--- a/src/rawComponents/vant/button.vue
+++ b/src/rawComponents/vant/button.vue
@@ -45,7 +45,8 @@
         <van-cell title="单元格" value="内容" />
         <van-cell title="单元格" value="内容" label="描述信息" />
       </van-cell-group>
-      <van-cell-group inset>
+      <br>
+      <van-cell-group inset lc-mark>
         <van-cell title="单元格" value="内容" />
         <van-cell title="单元格" value="内容" label="描述信息" />
       </van-cell-group>
diff --git a/src/rawComponents/vant/display.vue b/src/rawComponents/vant/display.vue
index 5cc87ca..113775f 100644
--- a/src/rawComponents/vant/display.vue
+++ b/src/rawComponents/vant/display.vue
@@ -1,92 +1,101 @@
   <template >
-      <div >
-          <div >
-              <div class="demonstration-vant" >Collapse 折叠面板:</div>
-              <van-collapse v-model="activeNames" lc-mark >
-                  <van-collapse-item title="标题1" name="1" >内容</van-collapse-item>
-                  <van-collapse-item title="标题2" name="2" >内容</van-collapse-item>
-                  <van-collapse-item title="标题3" name="3" disabled >内容</van-collapse-item>
-              </van-collapse>
-          </div>
-          <div >
-              <div class="demonstration-vant" >CountDown 倒计时:</div>
-              <van-count-down :time="time" lc-mark ></van-count-down>
-              <van-count-down :time="time" lc-mark format="DD 天 HH 时 mm 分 ss 秒" ></van-count-down>
-              <van-count-down :time="time" lc-mark >
-                  <template #default="timeData" >
-                      <span class="block" >{{ timeData.hours }}</span>
-                      <span class="colon" >:</span>
-                      <span class="block" >{{ timeData.minutes }}</span>
-                      <span class="colon" >:</span>
-                      <span class="block" >{{ timeData.seconds }}</span>
-                  </template>
-              </van-count-down>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Divider 分割线:</div>
-              <van-divider lc-mark ></van-divider>
-              <van-divider lc-mark >文字</van-divider>
-              <van-divider lc-mark content-position="left" >文字</van-divider>
-              <van-divider lc-mark content-position="right" >文字</van-divider>
-              <van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" >文字</van-divider>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Empty 空状态:</div>
-              <van-empty image="error" lc-mark description="描述文字" ></van-empty>
-              <van-empty image="network" lc-mark description="描述文字" ></van-empty>
-              <van-empty image="search" lc-mark description="描述文字" ></van-empty>
-          </div>
-          <div >
-              <div class="demonstration-vant" >List 列表:</div>
-              <van-list v-model="loading" :finished="finished" lc-mark finished-text="没有更多了" @load="onLoad" >
-                  <van-cell v-for="item in list" :key="item" :title="item" ></van-cell>
-              </van-list>
-          </div>
-          <div >
-              <div class="demonstration-vant" >NoticeBar 通知栏:</div>
-              <van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" ></van-notice-bar>
-              <van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark ></van-notice-bar>
-              <van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark ></van-notice-bar>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Progress 进度条:</div>
-              <div style="margin: 20px 0" >
-                  <van-progress :percentage="50" lc-mark ></van-progress>
-              </div>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Skeleton 骨架屏:</div>
-              <van-skeleton title :row="3" lc-mark ></van-skeleton>
-              <van-skeleton title avatar :row="3" lc-mark ></van-skeleton>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Steps 步骤条:</div>
-              <van-steps :active="active" lc-mark >
-                  <van-step >买家下单</van-step>
-                  <van-step >商家接单</van-step>
-                  <van-step >买家提货</van-step>
-                  <van-step >交易完成</van-step>
-              </van-steps>
-              <van-steps direction="vertical" :active="0" lc-mark >
-                  <van-step >
-                      <h3 >【城市】物流状态1</h3>
-                      <p >2016-07-12 12:40</p>
-                  </van-step>
-                  <van-step >
-                      <h3 >【城市】物流状态2</h3>
-                      <p >2016-07-11 10:00</p>
-                  </van-step>
-                  <van-step >
-                      <h3 >快件已发货</h3>
-                      <p >2016-07-10 09:30</p>
-                  </van-step>
-              </van-steps>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Swipe 轮播:</div>
-          </div>
+  <div>
+    <div>
+      <div class="demonstration-vant">Collapse 折叠面板</div>
+      <van-collapse v-model="activeNames" lc-mark>
+        <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
+        <van-collapse-item title="标题2" name="2">内容</van-collapse-item>
+        <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
+      </van-collapse>
+    </div>
+    <div>
+      <div class="demonstration-vant">CountDown 倒计时</div>
+      <van-count-down :time="time" lc-mark></van-count-down>
+      <van-count-down :time="time" lc-mark format="DD 天 HH 时 mm 分 ss 秒"></van-count-down>
+      <van-count-down :time="time" lc-mark>
+        <template #default="timeData">
+          <span class="block">{{ timeData.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ timeData.seconds }}</span>
+        </template>
+      </van-count-down>
+    </div>
+    <div>
+      <div class="demonstration-vant">Divider 分割线</div>
+      <van-divider lc-mark></van-divider>
+      <van-divider lc-mark>文字</van-divider>
+      <van-divider lc-mark content-position="left">文字</van-divider>
+      <van-divider lc-mark content-position="right">文字</van-divider>
+      <van-divider lc-mark :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">文字</van-divider>
+    </div>
+    <div>
+      <div class="demonstration-vant">Empty 空状态</div>
+      <van-empty image="error" lc-mark description="描述文字"></van-empty>
+      <van-empty image="network" lc-mark description="描述文字"></van-empty>
+      <van-empty image="search" lc-mark description="描述文字"></van-empty>
+    </div>
+    <div>
+      <div class="demonstration-vant">List 列表</div>
+      <van-list v-model="loading" :finished="finished" lc-mark finished-text="没有更多了" @load="onLoad">
+        <van-cell v-for="item in list" :key="item" :title="item"></van-cell>
+      </van-list>
+    </div>
+    <div>
+      <div class="demonstration-vant">NoticeBar 通知栏</div>
+      <van-notice-bar left-icon="volume-o" lc-mark text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"></van-notice-bar>
+      <van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" lc-mark></van-notice-bar>
+      <van-notice-bar :scrollable="false" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" lc-mark></van-notice-bar>
+    </div>
+    <div>
+      <div class="demonstration-vant">Progress 进度条</div>
+      <div style="margin: 20px 0">
+        <van-progress :percentage="50" lc-mark></van-progress>
       </div>
-  </template>
+    </div>
+    <div>
+      <div class="demonstration-vant">Skeleton 骨架屏</div>
+      <van-skeleton title :row="3" lc-mark></van-skeleton>
+      <br>
+      <van-skeleton title avatar :row="3" lc-mark></van-skeleton>
+    </div>
+    <div>
+      <div class="demonstration-vant">Steps 步骤条</div>
+      <van-steps :active="active" lc-mark>
+        <van-step>买家下单</van-step>
+        <van-step>商家接单</van-step>
+        <van-step>买家提货</van-step>
+        <van-step>交易完成</van-step>
+      </van-steps>
+      <van-steps direction="vertical" :active="0" lc-mark>
+        <van-step>
+          <h3>【城市】物流状态1</h3>
+          <p>2016-07-12 12:40</p>
+        </van-step>
+        <van-step>
+          <h3>【城市】物流状态2</h3>
+          <p>2016-07-11 10:00</p>
+        </van-step>
+        <van-step>
+          <h3>快件已发货</h3>
+          <p>2016-07-10 09:30</p>
+        </van-step>
+      </van-steps>
+    </div>
+    <div>
+      <div class="demonstration-vant">Swipe 轮播</div>
+      <div>
+        <van-swipe lc-mark class="my-swipe" :autoplay="3000" indicator-color="white">
+          <van-swipe-item>1</van-swipe-item>
+          <van-swipe-item>2</van-swipe-item>
+          <van-swipe-item>3</van-swipe-item>
+          <van-swipe-item>4</van-swipe-item>
+        </van-swipe>
+      </div>
+    </div>
+  </div>
+</template>
   <script>
 export default {
   data() {
@@ -105,10 +114,11 @@ export default {
     };
   },
   methods: {
-    onLoad() {},
+    onLoad() { },
   },
 };  </script>
-  <style scoped>.colon {
+  <style scoped>
+.colon {
   display: inline-block;
   margin: 0 4px;
   color: #ee0a24;
@@ -127,4 +137,5 @@ export default {
   line-height: 150px;
   text-align: center;
   background-color: #39a9ed;
-}</style>
+}
+</style>
diff --git a/src/rawComponents/vant/form.vue b/src/rawComponents/vant/form.vue
index 9e6853a..1d560ae 100644
--- a/src/rawComponents/vant/form.vue
+++ b/src/rawComponents/vant/form.vue
@@ -1,51 +1,54 @@
-  <template >
-      <div >
-          <div >
-              <div class="demonstration-vant" >Form 表单:</div>
-              <van-form @submit="onSubmit6" lc-mark >
-                  <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" ></van-field>
-                  <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" ></van-field>
-                  <div style="margin: 16px" >
-                      <van-button round block type="info" native-type="submit" >提交</van-button>
-                  </div>
-              </van-form>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Picker 选择器:</div>
-              <van-picker title="标题" show-toolbar lc-mark :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" ></van-picker>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Rate 评分:</div>
-              <van-rate v-model="value" lc-mark ></van-rate>
-              <van-rate v-model="value" lc-mark icon="like" void-icon="like-o" ></van-rate>
-              <van-rate v-model="value" :size="25" lc-mark color="#ffd21e" void-icon="star" void-color="#eee" ></van-rate>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Search 搜索:</div>
-              <div style="padding: 10px 0" >
-                  <van-search v-model="search" lc-mark placeholder="请输入搜索关键词" ></van-search>
-              </div>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Slider 滑块:</div>
-              <div style="margin: 10px" >
-                  <van-slider v-model="slideValue" @change="onChange" lc-mark ></van-slider>
-              </div>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Stepper 步进器:</div>
-              <van-stepper lc-mark v-model="stepValue" ></van-stepper>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Switch 开关:</div>
-              <van-switch v-model="checked" lc-mark ></van-switch>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Uploader 文件上传:</div>
-              <van-uploader :after-read="afterRead" lc-mark ></van-uploader>
-          </div>
+<template >
+  <div>
+    <div>
+      <div class="demonstration-vant">Form 表单</div>
+      <van-form @submit="onSubmit6" lc-mark>
+        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
+          :rules="[{ required: true, message: '请填写用户名' }]"></van-field>
+        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
+          :rules="[{ required: true, message: '请填写密码' }]"></van-field>
+        <div style="margin: 16px">
+          <van-button round block plain native-type="submit">提交</van-button>
+        </div>
+      </van-form>
+    </div>
+    <div>
+      <div class="demonstration-vant">Picker 选择器</div>
+      <van-picker title="标题" show-toolbar lc-mark :columns="columns" @confirm="onConfirm" @cancel="onCancel"
+        @change="onChange"></van-picker>
+    </div>
+    <div>
+      <div class="demonstration-vant">Rate 评分</div>
+      <van-rate v-model="value" lc-mark></van-rate>
+      <van-rate v-model="value" lc-mark icon="like" void-icon="like-o"></van-rate>
+      <van-rate v-model="value" :size="25" lc-mark color="#ffd21e" void-icon="star" void-color="#eee"></van-rate>
+    </div>
+    <div>
+      <div class="demonstration-vant">Search 搜索</div>
+      <div style="padding: 10px 0">
+        <van-search v-model="search" lc-mark placeholder="请输入搜索关键词"></van-search>
       </div>
-  </template>
+    </div>
+    <div>
+      <div class="demonstration-vant">Slider 滑块</div>
+      <div style="margin: 10px">
+        <van-slider v-model="slideValue" @change="onChange" lc-mark></van-slider>
+      </div>
+    </div>
+    <div>
+      <div class="demonstration-vant">Stepper 步进器</div>
+      <van-stepper lc-mark v-model="stepValue"></van-stepper>
+    </div>
+    <div>
+      <div class="demonstration-vant">Switch 开关</div>
+      <van-switch v-model="checked" lc-mark></van-switch>
+    </div>
+    <div>
+      <div class="demonstration-vant">Uploader 文件上传</div>
+      <van-uploader :after-read="afterRead" lc-mark></van-uploader>
+    </div>
+  </div>
+</template>
   <script>
 export default {
   data() {
@@ -66,9 +69,9 @@ export default {
     onSubmit6(values) {
       console.log("submit", values);
     },
-    onConfirm(value, index) {},
-    onChange(picker, value, index) {},
-    onCancel() {},
+    onConfirm(value, index) { },
+    onChange(picker, value, index) { },
+    onCancel() { },
     afterRead(file) {
       // 此时可以自行将文件上传至服务器
       console.log(file);
diff --git a/src/rawComponents/vant/icon.vue b/src/rawComponents/vant/icon.vue
index 901c788..a165e38 100644
--- a/src/rawComponents/vant/icon.vue
+++ b/src/rawComponents/vant/icon.vue
@@ -1,7 +1,7 @@
   <template >
       <div >
           <div >
-              <div class="demonstration-vant" >Icon 图标:</div>
+              <div class="demonstration-vant" >Icon 图标</div>
               <van-icon lc-mark class="icon-c" name="chat-o" ></van-icon>
               <van-icon lc-mark class="icon-c" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" ></van-icon>
               <van-icon lc-mark class="icon-c" name="chat-o" dot ></van-icon>
@@ -13,7 +13,7 @@
               <van-icon lc-mark class="icon-c" name="chat-o" size="3rem" ></van-icon>
           </div>
           <div >
-              <div class="demonstration-vant" >Image 图片:</div>
+              <div class="demonstration-vant" >Image 图片</div>
               <van-image width="100" lc-mark height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" ></van-image>
           </div>
       </div>
diff --git a/src/rawComponents/vant/index.vue b/src/rawComponents/vant/index.vue
index 29d582c..0abb4ea 100644
--- a/src/rawComponents/vant/index.vue
+++ b/src/rawComponents/vant/index.vue
@@ -54,7 +54,7 @@ export default {
 
 .demonstration-vant::before {
   content: "";
-  background-color: #b700ff;
+  background-color: #0004ff;
   display: inline-block;
   height: 1em;
   margin-right: 4px;
diff --git a/src/rawComponents/vant/layout.vue b/src/rawComponents/vant/layout.vue
index 0623522..1592cd5 100644
--- a/src/rawComponents/vant/layout.vue
+++ b/src/rawComponents/vant/layout.vue
@@ -1,60 +1,66 @@
   <template >
-      <div >
-          <div >
-              <div class="demonstration-vant" >Field 输入框:</div>
-              <div lc-mark >
-                  <van-field lc-mark v-model="text" label="文本" ></van-field>
-                  <van-field lc-mark v-model="tel" type="tel" label="手机号" ></van-field>
-                  <van-field lc-mark v-model="digit" type="digit" label="整数" ></van-field>
-                  <van-field lc-mark v-model="number" type="number" label="数字" ></van-field>
-                  <van-field lc-mark v-model="password" type="password" label="密码" ></van-field>
-              </div>
-          </div>
-          <div >
-              <div class="demonstration-vant" >DatetimePicker 时间选择:</div>
-              <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate" :max-date="maxDate" ></van-datetime-picker>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Checkbox 复选框:</div>
-              <van-checkbox-group lc-mark v-model="result" >
-                  <van-checkbox name="a" >复选框 a</van-checkbox>
-                  <van-checkbox lc-mark name="b" >复选框 b</van-checkbox>
-              </van-checkbox-group>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Checkbox 复选框(全选与反选):</div>
-              <div lc-mark >
-                  <van-checkbox-group lc-mark v-model="result" ref="checkboxGroup" >
-                      <van-checkbox lc-mark name="a" >复选框 a</van-checkbox>
-                      <van-checkbox name="b" >复选框 b</van-checkbox>
-                      <van-checkbox name="c" >复选框 c</van-checkbox>
-                  </van-checkbox-group>
-                  <van-button type="primary" @click="checkAll" >全选</van-button>
-                  <van-button type="info" @click="toggleAll" >反选</van-button>
-              </div>
-          </div>
-          <div >
-              <van-radio-group lc-mark v-model="radio10" >
-                  <van-radio name="1" >单选框 1</van-radio>
-                  <van-radio lc-mark name="2" >单选框 2</van-radio>
-              </van-radio-group>
-              <van-radio-group lc-mark v-model="radio10" >
-                  <van-cell-group >
-                      <van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark >
-                          <template #right-icon >
-                              <van-radio name="1" ></van-radio>
-                          </template>
-                      </van-cell>
-                      <van-cell title="单选框 2" clickable @click="radio10 = '2'" >
-                          <template #right-icon >
-                              <van-radio name="2" ></van-radio>
-                          </template>
-                      </van-cell>
-                  </van-cell-group>
-              </van-radio-group>
-          </div>
+  <div>
+    <div>
+      <div class="demonstration-vant">Field 输入框</div>
+      <div lc-mark style="padding: 10px;">
+        <van-field lc-mark v-model="text" label="文本"></van-field>
+        <van-field lc-mark v-model="tel" type="tel" label="手机号"></van-field>
+        <van-field lc-mark v-model="digit" type="digit" label="整数"></van-field>
+        <van-field lc-mark v-model="number" type="number" label="数字"></van-field>
+        <van-field lc-mark v-model="password" type="password" label="密码"></van-field>
       </div>
-  </template>
+    </div>
+    <div>
+      <div class="demonstration-vant">DatetimePicker 时间选择</div>
+      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" lc-mark :min-date="minDate"
+        :max-date="maxDate"></van-datetime-picker>
+    </div>
+    <div>
+      <div class="demonstration-vant">Checkbox 复选框</div>
+      <van-checkbox-group lc-mark v-model="result">
+        <van-checkbox name="a">复选框 a</van-checkbox>
+        <van-checkbox lc-mark name="b">复选框 b</van-checkbox>
+      </van-checkbox-group>
+    </div>
+    <div>
+      <div class="demonstration-vant">Checkbox 复选框(全选与反选)</div>
+      <div lc-mark>
+        <van-checkbox-group v-model="result" ref="checkboxGroup">
+          <van-checkbox name="a">复选框 a</van-checkbox>
+          <van-checkbox name="b">复选框 b</van-checkbox>
+          <van-checkbox lc-mark name="c">复选框 c</van-checkbox>
+        </van-checkbox-group>
+        <br>
+        <van-button type="primary" size="small" @click="checkAll">全选</van-button>
+        <van-button plain size="small" @click="toggleAll">反选</van-button>
+      </div>
+    </div>
+    <div>
+      <div class="demonstration-vant">Radio 单选框</div>
+      <div>
+        <van-radio-group lc-mark v-model="radio10">
+          <van-radio name="1">单选框 1</van-radio>
+          <van-radio lc-mark name="2">单选框 2</van-radio>
+        </van-radio-group>
+        <br>
+        <van-radio-group lc-mark v-model="radio10">
+          <van-cell-group>
+            <van-cell title="单选框 1" clickable @click="radio10 = '1'" lc-mark>
+              <template #right-icon>
+                <van-radio name="1"></van-radio>
+              </template>
+            </van-cell>
+            <van-cell title="单选框 2" clickable @click="radio10 = '2'">
+              <template #right-icon>
+                <van-radio name="2"></van-radio>
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </div>
+    </div>
+  </div>
+</template>
   <script>
 export default {
   data() {
diff --git a/src/rawComponents/vant/nav.vue b/src/rawComponents/vant/nav.vue
index 355b2eb..843d3d8 100644
--- a/src/rawComponents/vant/nav.vue
+++ b/src/rawComponents/vant/nav.vue
@@ -1,63 +1,69 @@
-  <template >
-      <div >
-          <div >
-              <div class="demonstration-vant" >Grid 宫格:</div>
-              <van-grid lc-mark >
-                  <van-grid-item icon="photo-o" text="文字" ></van-grid-item>
-                  <van-grid-item icon="photo-o" text="文字" ></van-grid-item>
-                  <van-grid-item icon="photo-o" text="文字" ></van-grid-item>
-                  <van-grid-item icon="photo-o" text="文字" ></van-grid-item>
-              </van-grid>
-          </div>
-          <div >
-              <div class="demonstration-vant" >NavBar 导航栏:</div>
-              <van-nav-bar lc-mark title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" ></van-nav-bar>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Pagination 分页:</div>
-              <van-pagination lc-mark v-model="currentPage13" :total-items="24" :items-per-page="5" ></van-pagination>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Sidebar 侧边导航:</div>
-              <van-sidebar v-model="activeKey" lc-mark >
-                  <van-sidebar-item title="标签名称" ></van-sidebar-item>
-                  <van-sidebar-item title="标签名称" ></van-sidebar-item>
-                  <van-sidebar-item title="标签名称" ></van-sidebar-item>
-              </van-sidebar>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Tab 标签页:</div>
-              <van-tabs v-model="active14" lc-mark >
-                  <van-tab title="标签 1" >内容 1</van-tab>
-                  <van-tab title="标签 2" >内容 2</van-tab>
-                  <van-tab title="标签 3" >内容 3</van-tab>
-                  <van-tab title="标签 4" >内容 4</van-tab>
-              </van-tabs>
-          </div>
-          <div >
-              <div class="demonstration-vant" >AddressEdit 地址编辑:</div>
-              <van-address-edit :area-list="areaList" show-postal lc-mark show-delete show-set-default show-search-result :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" @change-detail="onChangeDetail" ></van-address-edit>
-          </div>
-          <div >
-              <div class="demonstration-vant" >AddressList 地址列表:</div>
-              <van-address-list v-model="chosenAddressId" :list="list15" lc-mark :disabled-list="disabledList" disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" ></van-address-list>
-          </div>
-          <div >
-              <div class="demonstration-vant" >Card 商品卡片:</div>
-              <van-card num="2" lc-mark price="2" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" ></van-card>
-          </div>
-          <div >
-              <div class="demonstration-vant" >ActionBar 行动栏:</div>
-              <van-goods-action lc-mark >
-                  <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" ></van-action-bar-icon>
-                  <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" ></van-action-bar-icon>
-                  <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" ></van-action-bar-icon>
-                  <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" ></van-goods-action-button>
-              </van-goods-action>
-          </div>
+<template>
+  <div>
+    <div>
+      <div class="demonstration-vant">Grid 宫格</div>
+      <van-grid lc-mark>
+        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
+        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
+        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
+        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
+      </van-grid>
+    </div>
+    <div>
+      <div class="demonstration-vant">NavBar 导航栏</div>
+      <van-nav-bar lc-mark title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft"
+        @click-right="onClickRight"></van-nav-bar>
+    </div>
+    <div>
+      <div class="demonstration-vant">Pagination 分页</div>
+      <van-pagination lc-mark v-model="currentPage13" :total-items="24" :items-per-page="5"></van-pagination>
+    </div>
+    <div>
+      <div class="demonstration-vant">Sidebar 侧边导航</div>
+      <van-sidebar v-model="activeKey" lc-mark>
+        <van-sidebar-item title="标签名称"></van-sidebar-item>
+        <van-sidebar-item title="标签名称"></van-sidebar-item>
+        <van-sidebar-item title="标签名称"></van-sidebar-item>
+      </van-sidebar>
+    </div>
+    <div>
+      <div class="demonstration-vant">Tab 标签页</div>
+      <van-tabs v-model="active14" lc-mark>
+        <van-tab title="标签 1">内容 1</van-tab>
+        <van-tab title="标签 2">内容 2</van-tab>
+        <van-tab title="标签 3">内容 3</van-tab>
+        <van-tab title="标签 4">内容 4</van-tab>
+      </van-tabs>
+    </div>
+    <div>
+      <div class="demonstration-vant">ActionBar 动作栏</div>
+      <div style="position: relative;" lc-mark>
+        <van-action-bar>
+          <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
+          <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
+          <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
+          <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
+        </van-action-bar>
       </div>
-  </template>
-  <script>
+    </div>
+    <div>
+      <div class="demonstration-vant">AddressEdit 地址编辑</div>
+      <van-address-edit :area-list="areaList" show-postal lc-mark show-delete show-set-default show-search-result
+        :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
+        @delete="onDelete" @change-detail="onChangeDetail"></van-address-edit>
+    </div>
+    <div>
+      <div class="demonstration-vant">Card 商品卡片</div>
+      <van-card num="2" lc-mark price="2" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg">
+      </van-card>
+    </div>
+    <div>
+      <div class="demonstration-vant">ActionBar 行动栏</div>
+      <van-submit-bar style="position: relative;" lc-mark :price="3050" button-text="提交订单" @submit="onSubmit" />
+    </div>
+  </div>
+</template>
+<script>
 export default {
   data() {
     return {
@@ -131,19 +137,23 @@ export default {
         this.searchResult = [];
       }
     },
-    onSubmit11(){},
-    onClickEditAddress(){}
+    onSubmit11() { },
+    onClickEditAddress() { },
   },
-};  </script>
-  <style scoped>:v-deep(.van-tabbar--fixed) {
+};
+</script>
+<style scoped>
+:v-deep(.van-tabbar--fixed) {
   position: initial;
 }
 :v-deep(.van-address-list__bottom) {
-  position: initial;
-}
-:v-deep(.van-goods-action) {
-  position: initial;
+  position: relative;
 }
 :v-deep(.van-submit-bar) {
   position: initial;
-}</style>
+}
+.van-action-bar {
+  position: relative;
+  padding-bottom: 0;
+}
+</style>
diff --git a/src/rawComponents/vant/template.vue b/src/rawComponents/vant/template.vue
index 66e477e..d581d6a 100644
--- a/src/rawComponents/vant/template.vue
+++ b/src/rawComponents/vant/template.vue
@@ -1,7 +1,7 @@
   <template >
       <div >
           <div >
-              <div class="demonstration-vant" >NumberKeyboard 数字键盘:</div>
+              <div class="demonstration-vant" >NumberKeyboard 数字键盘</div>
           </div>
       </div>
   </template>