From 43339fee20a33eb26d2939619a5f03462bf5bed4 Mon Sep 17 00:00:00 2001
From: hooray <304327508@qq.com>
Date: Wed, 21 Oct 2020 02:04:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImagePreview/index.vue         |  7 +-
 src/components/PageHeader/index.vue           |  9 +-
 src/components/PageMain/index.vue             | 18 +++-
 src/components/Result/index.vue               |  2 +-
 src/components/Time/index.vue                 | 96 -------------------
 src/router/modules/component.example.js       | 16 ++--
 src/views/component_example/actionbar.vue     | 82 ++++++++++++++++
 src/views/component_example/area.vue          |  1 +
 .../component_example/batchactionbar.vue      |  6 ++
 src/views/component_example/image.preview.vue |  3 +-
 src/views/component_example/pageheader.vue    |  9 +-
 src/views/component_example/pagemain.vue      | 23 ++++-
 src/views/component_example/result.vue        |  4 +-
 src/views/component_example/searchbar.vue     | 60 +++++++++++-
 .../component_example/table.autoheight.vue    |  2 +-
 src/views/component_example/trend.vue         | 62 +++++++-----
 src/views/component_example/upload.vue        | 10 +-
 17 files changed, 259 insertions(+), 151 deletions(-)
 delete mode 100644 src/components/Time/index.vue

diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index 5a193c24..5374950e 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -1,13 +1,10 @@
 <template>
     <div>
-        <el-image class="img" :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" @click="dialogVisible = true">
+        <el-image class="img" :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
             <div slot="error" class="image-slot">
                 <svg-icon name="image-load-fail" />
             </div>
         </el-image>
-        <el-dialog :visible.sync="dialogVisible" title="预览" width="800px">
-            <img :src="src" style="display: block; max-width: 100%; margin: 0 auto;">
-        </el-dialog>
     </div>
 </template>
 
@@ -55,7 +52,7 @@ export default {
         transition: all 0.3s;
         cursor: pointer;
         &:hover {
-            transform: scale(1.2) rotateZ(-10deg);
+            transform: scale(1.2);
         }
     }
     ::v-deep .image-slot {
diff --git a/src/components/PageHeader/index.vue b/src/components/PageHeader/index.vue
index cc4e2bea..a26df720 100644
--- a/src/components/PageHeader/index.vue
+++ b/src/components/PageHeader/index.vue
@@ -2,9 +2,11 @@
     <div class="header">
         <div>
             <div class="title">{{ title }}</div>
-            <div v-if="content" class="content">{{ content }}</div>
+            <div class="content">
+                <slot name="content">{{ content }}</slot>
+            </div>
         </div>
-        <div v-if="$slots.default">
+        <div>
             <slot />
         </div>
     </div>
@@ -42,6 +44,9 @@ export default {
         color: #909399;
         font-size: 14px;
         margin-top: 10px;
+        &:empty {
+            display: none;
+        }
     }
 }
 </style>
diff --git a/src/components/PageMain/index.vue b/src/components/PageMain/index.vue
index a0f7146b..7a68311d 100644
--- a/src/components/PageMain/index.vue
+++ b/src/components/PageMain/index.vue
@@ -1,19 +1,35 @@
 <template>
     <div class="page-main">
+        <div v-if="title" class="title-container">{{ title }}</div>
         <slot />
     </div>
 </template>
 
 <script>
 export default {
-    name: 'PageMain'
+    name: 'PageMain',
+    props: {
+        title: {
+            type: String,
+            default: ''
+        }
+    }
 }
 </script>
 
 <style lang="scss" scoped>
 .page-main {
+    position: relative;
     margin: 20px;
     padding: 20px;
     background-color: #fff;
+    .title-container {
+        width: calc(100% + 40px);
+        padding: 14px 20px;
+        margin-left: -20px;
+        margin-top: -20px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #eee;
+    }
 }
 </style>
diff --git a/src/components/Result/index.vue b/src/components/Result/index.vue
index fe8236d5..bff30e1f 100644
--- a/src/components/Result/index.vue
+++ b/src/components/Result/index.vue
@@ -47,7 +47,7 @@ $warning: #e6a23c;
 $error: #f56c6c;
 .result {
     width: 72%;
-    margin: 0 auto;
+    margin: 20px auto 0;
     text-align: center;
     .icon {
         i {
diff --git a/src/components/Time/index.vue b/src/components/Time/index.vue
deleted file mode 100644
index e547ed7c..00000000
--- a/src/components/Time/index.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-    <span :title="$dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')">{{ date }}</span>
-</template>
-
-<script>
-export default {
-    name: 'Time',
-    props: {
-        value: {
-            type: [Number, Date, String],
-            required: true
-        },
-        cutOff: {
-            type: String,
-            validator: val => ['', 'minute', 'hour', 'day', 'month', 'year'].includes(val),
-            default: ''
-        }
-    },
-    data() {
-        return {
-            date: '',
-            intervalMillisec: null,
-            oneSecond: 1000,
-            oneMinute: 60000,
-            oneHour: 3600000,
-            oneDay: 86400000,
-            oneMonth: 2623860000,
-            oneYear: 31567860000
-        }
-    },
-    computed: {
-        timestamp() {
-            return this.$dayjs(this.value).valueOf()
-        }
-    },
-    mounted() {
-        this.setTime()
-        this.startInterval()
-    },
-    beforeDestroy() {
-        if (this.timer) {
-            clearInterval(this.timer)
-        }
-    },
-    updated() {
-        if (this.timer) {
-            clearInterval(this.timer)
-        }
-        this.setTime()
-        this.startInterval()
-    },
-    methods: {
-        startInterval() {
-            this.intervalMillisec = this.getIntervalMillisec()
-            this.timer = setInterval(() => {
-                this.setTime()
-                if (this.intervalMillisec !== this.getIntervalMillisec()) {
-                    this.restartInterval()
-                }
-            }, this.intervalMillisec)
-        },
-        restartInterval() {
-            clearInterval(this.timer)
-            this.startInterval()
-        },
-        setTime() {
-            // 获取当前时间时间戳
-            const currentTime = new Date().getTime()
-            // 获取两个时间戳差值
-            const diff = Math.abs(currentTime - this.timestamp)
-            // 判断传入时间戳是否早于当前时间戳
-            const dirStr = this.timestamp <= currentTime ? '前' : '后'
-            if (diff < this.oneMinute) {
-                this.date = parseInt(diff / this.oneSecond) + '秒' + dirStr
-            } else if (diff >= this.oneMinute && diff < this.oneHour && this.cutOff != 'minute') {
-                this.date = parseInt(diff / this.oneMinute) + '分钟' + dirStr
-            } else if (diff >= this.oneHour && diff < this.oneDay && this.cutOff != 'hour') {
-                this.date = parseInt(diff / this.oneHour) + '小时' + dirStr
-            } else if (diff >= this.oneDay && diff < this.oneMonth && this.cutOff != 'day') {
-                this.date = parseInt(diff / this.oneDay) + '天' + dirStr
-            } else if (diff >= this.oneMonth && diff < this.oneYear && this.cutOff != 'month') {
-                this.date = parseInt(diff / this.oneMonth) + '个月' + dirStr
-            } else if (diff >= this.oneYear && this.cutOff != 'year') {
-                this.date = parseInt(diff / this.oneYear) + '年' + dirStr
-            } else {
-                this.date = this.$dayjs(this.timestamp).format('YYYY-MM-DD HH:mm:ss')
-            }
-        },
-        // 获取 setInterval 的周期，如果小于 1 分钟，则周期为 1 秒，否则则为 1 分钟
-        getIntervalMillisec() {
-            const diff = Math.abs(new Date().getTime() - this.timestamp)
-            return diff < 60000 ? 1000 : 60000
-        }
-    }
-}
-</script>
diff --git a/src/router/modules/component.example.js b/src/router/modules/component.example.js
index b91fc967..a2b8adbe 100644
--- a/src/router/modules/component.example.js
+++ b/src/router/modules/component.example.js
@@ -10,14 +10,6 @@ export default {
         icon: 'sidebar-component'
     },
     children: [
-        {
-            path: 'pagemain',
-            name: 'componentExamplePagemain',
-            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/pagemain'),
-            meta: {
-                title: '空白页'
-            }
-        },
         {
             path: 'pageheader',
             name: 'componentExamplePageheader',
@@ -26,6 +18,14 @@ export default {
                 title: '页头'
             }
         },
+        {
+            path: 'pagemain',
+            name: 'componentExamplePagemain',
+            component: () => import(/* webpackChunkName: 'component_example' */ '@/views/component_example/pagemain'),
+            meta: {
+                title: '内容块'
+            }
+        },
         {
             path: 'editor',
             name: 'componentExampleEditor',
diff --git a/src/views/component_example/actionbar.vue b/src/views/component_example/actionbar.vue
index db107d3e..0c80d11c 100644
--- a/src/views/component_example/actionbar.vue
+++ b/src/views/component_example/actionbar.vue
@@ -1,5 +1,11 @@
 <template>
     <div>
+        <page-header title="固定底部操作栏" content="避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页">
+            <template #content>
+                <p>FixedActionBar</p>
+                <p style="margin-bottom: 0;">避免因页面过长导致操作按钮需要滚动到页面底部才能操作，例如表单页</p>
+            </template>
+        </page-header>
         <page-main>
             <el-row>
                 <el-col :md="24" :lg="12">
@@ -42,6 +48,82 @@
                         <el-form-item label="活动形式">
                             <el-input v-model="form.desc" type="textarea" />
                         </el-form-item>
+                        <el-form-item label="活动名称">
+                            <el-input v-model="form.name" />
+                        </el-form-item>
+                        <el-form-item label="活动区域">
+                            <el-select v-model="form.region" placeholder="请选择活动区域">
+                                <el-option label="区域一" value="shanghai" />
+                                <el-option label="区域二" value="beijing" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="活动时间">
+                            <el-col :span="11">
+                                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
+                            </el-col>
+                            <el-col class="line" :span="2">-</el-col>
+                            <el-col :span="11">
+                                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
+                            </el-col>
+                        </el-form-item>
+                        <el-form-item label="即时配送">
+                            <el-switch v-model="form.delivery" />
+                        </el-form-item>
+                        <el-form-item label="活动性质">
+                            <el-checkbox-group v-model="form.type">
+                                <el-checkbox label="美食/餐厅线上活动" name="type" />
+                                <el-checkbox label="地推活动" name="type" />
+                                <el-checkbox label="线下主题活动" name="type" />
+                                <el-checkbox label="单纯品牌曝光" name="type" />
+                            </el-checkbox-group>
+                        </el-form-item>
+                        <el-form-item label="特殊资源">
+                            <el-radio-group v-model="form.resource">
+                                <el-radio label="线上品牌商赞助" />
+                                <el-radio label="线下场地免费" />
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item label="活动形式">
+                            <el-input v-model="form.desc" type="textarea" />
+                        </el-form-item>
+                        <el-form-item label="活动名称">
+                            <el-input v-model="form.name" />
+                        </el-form-item>
+                        <el-form-item label="活动区域">
+                            <el-select v-model="form.region" placeholder="请选择活动区域">
+                                <el-option label="区域一" value="shanghai" />
+                                <el-option label="区域二" value="beijing" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="活动时间">
+                            <el-col :span="11">
+                                <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
+                            </el-col>
+                            <el-col class="line" :span="2">-</el-col>
+                            <el-col :span="11">
+                                <el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
+                            </el-col>
+                        </el-form-item>
+                        <el-form-item label="即时配送">
+                            <el-switch v-model="form.delivery" />
+                        </el-form-item>
+                        <el-form-item label="活动性质">
+                            <el-checkbox-group v-model="form.type">
+                                <el-checkbox label="美食/餐厅线上活动" name="type" />
+                                <el-checkbox label="地推活动" name="type" />
+                                <el-checkbox label="线下主题活动" name="type" />
+                                <el-checkbox label="单纯品牌曝光" name="type" />
+                            </el-checkbox-group>
+                        </el-form-item>
+                        <el-form-item label="特殊资源">
+                            <el-radio-group v-model="form.resource">
+                                <el-radio label="线上品牌商赞助" />
+                                <el-radio label="线下场地免费" />
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item label="活动形式">
+                            <el-input v-model="form.desc" type="textarea" />
+                        </el-form-item>
                     </el-form>
                 </el-col>
             </el-row>
diff --git a/src/views/component_example/area.vue b/src/views/component_example/area.vue
index 306dd405..5d76d85c 100644
--- a/src/views/component_example/area.vue
+++ b/src/views/component_example/area.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <page-header title="省市区联动" content="CascaderArea" />
         <page-main>
             <cascader-area v-model="area" />
         </page-main>
diff --git a/src/views/component_example/batchactionbar.vue b/src/views/component_example/batchactionbar.vue
index ea849e8f..145bfc09 100644
--- a/src/views/component_example/batchactionbar.vue
+++ b/src/views/component_example/batchactionbar.vue
@@ -1,5 +1,11 @@
 <template>
     <div>
+        <page-header title="批量操作栏">
+            <template #content>
+                <p>BatchActionBar</p>
+                <p style="margin-bottom: 0;">该组件需要和 ElTable 搭配使用</p>
+            </template>
+        </page-header>
         <page-main>
             <batch-action-bar :data="dataList" :selection-data="selectionDataList" @checkAll="$refs.table.toggleAllSelection()" @checkNull="$refs.table.clearSelection()">
                 <el-button size="small">单个批量操作按钮</el-button>
diff --git a/src/views/component_example/image.preview.vue b/src/views/component_example/image.preview.vue
index 7b780abc..e9d09ecb 100644
--- a/src/views/component_example/image.preview.vue
+++ b/src/views/component_example/image.preview.vue
@@ -1,9 +1,8 @@
 <template>
     <div>
+        <page-header title="图片预览" content="ImagePreview" />
         <page-main>
             <image-preview src="https://s1.ax1x.com/2020/07/03/NOeqld.jpg" :width="200" />
-            <image-preview src="http://image.lookbi.com/four_season/uploads/supply//1/20200623/1592845429844750.png" :width="200" :height="150" />
-            <el-divider content-position="left">加载失败</el-divider>
             <image-preview src="" width="100px" height="100px" />
         </page-main>
     </div>
diff --git a/src/views/component_example/pageheader.vue b/src/views/component_example/pageheader.vue
index 2d4dc110..bff5ce50 100644
--- a/src/views/component_example/pageheader.vue
+++ b/src/views/component_example/pageheader.vue
@@ -1,8 +1,11 @@
 <template>
     <div>
-        <page-header title="页面标题" />
-        <page-header title="页面标题" content="这是一段页面的介绍。" />
-        <page-header title="页面标题" content="右侧提供了一块 slot 插槽">
+        <page-header title="页头" content="PageHeader" />
+        <page-header title="页面标题">
+            <template #content>
+                <p>提供两块插槽：</p>
+                <p>一块是 content 区域插槽，一块是右侧区域</p>
+            </template>
             <el-button icon="el-icon-arrow-left" round>返回</el-button>
         </page-header>
     </div>
diff --git a/src/views/component_example/pagemain.vue b/src/views/component_example/pagemain.vue
index 9339a680..9c033db4 100644
--- a/src/views/component_example/pagemain.vue
+++ b/src/views/component_example/pagemain.vue
@@ -1,7 +1,28 @@
 <template>
     <div>
+        <page-header title="内容块" content="PageMain" />
         <page-main>
-            &lt;page-main>&lt;/page-main> 是最常用的页面组件，几乎所有页面都会使用到
+            PageMain 是最常用的页面组件，几乎所有页面都会使用到
         </page-main>
+        <page-main title="你可以设置一个自定义的标题">
+            这里放页面内容
+        </page-main>
+        <el-row :gutter="20" style="margin: 0 10px;">
+            <el-col :span="8">
+                <page-main style="margin: 0;">
+                    还可以结合 ElRow 使用
+                </page-main>
+            </el-col>
+            <el-col :span="8">
+                <page-main style="margin: 0;">
+                    这里放页面内容
+                </page-main>
+            </el-col>
+            <el-col :span="8">
+                <page-main style="margin: 0;">
+                    这里放页面内容
+                </page-main>
+            </el-col>
+        </el-row>
     </div>
 </template>
diff --git a/src/views/component_example/result.vue b/src/views/component_example/result.vue
index c2a415d2..f8e0563f 100644
--- a/src/views/component_example/result.vue
+++ b/src/views/component_example/result.vue
@@ -1,11 +1,13 @@
 <template>
     <div>
+        <page-header title="处理结果" content="Result" />
         <page-main>
             <result type="success" title="提交成功" desc="提交结果页用于反馈一系列操作任务的处理结果。">
                 <el-button type="primary" size="small">返回列表</el-button>
                 <el-button size="small">打印</el-button>
             </result>
-            <el-divider />
+        </page-main>
+        <page-main>
             <result type="error" title="提交失败" desc="灰色额外区域可以显示一些补充的信息。请核对并修改以下信息后，再重新提交。">
                 <div slot="extra">
                     <div>您提交的内容有如下错误：</div>
diff --git a/src/views/component_example/searchbar.vue b/src/views/component_example/searchbar.vue
index 80150756..34044566 100644
--- a/src/views/component_example/searchbar.vue
+++ b/src/views/component_example/searchbar.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <page-header title="搜索面板" content="SearchBar" />
         <page-main>
             <search-bar show-more @toggle="searchMore = $event">
                 <el-form :model="search" size="small" label-width="120px">
@@ -54,6 +55,60 @@
                 </el-form>
             </search-bar>
         </page-main>
+        <page-main title="默认展开">
+            <search-bar show-more unfold @toggle="searchMore2 = $event">
+                <el-form :model="search" size="small" label-width="120px">
+                    <el-row>
+                        <el-col :span="12">
+                            <el-form-item label="姓名 / 手机号">
+                                <el-input v-model="search.name" placeholder="请输入姓名或者手机号，支持模糊查询" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="6">
+                            <el-form-item v-auth="'supplay.department.browse'" label="部门">
+                                <el-select v-model="search.department_id" clearable placeholder="请选择部门">
+                                    <el-option label="技术部" :value="1" />
+                                    <el-option label="设计部" :value="2" />
+                                    <el-option label="行政部" :value="3" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item v-auth="'supplay.department_job.browse'" label="职位">
+                                <el-select v-model="search.department_job_id" clearable placeholder="请选择职位">
+                                    <el-option label="程序员" :value="1" />
+                                    <el-option label="设计师" :value="2" />
+                                    <el-option label="人事" :value="3" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item v-auth="'supplay.role.browse'" label="角色">
+                                <el-select v-model="search.role_id" clearable placeholder="请选择角色">
+                                    <el-option label="主管" :value="1" />
+                                    <el-option label="普通职员" :value="2" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row v-show="searchMore2">
+                        <el-col :span="24">
+                            <el-form-item label="角色">
+                                <el-checkbox :value="true">备选项</el-checkbox>
+                                <el-checkbox :value="false">备选项</el-checkbox>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-form-item>
+                        <el-button type="primary" icon="el-icon-search">筛选</el-button>
+                        <el-button>导出</el-button>
+                        <el-button type="text">查看已导出记录</el-button>
+                    </el-form-item>
+                </el-form>
+            </search-bar>
+        </page-main>
     </div>
 </template>
 
@@ -61,13 +116,14 @@
 export default {
     data() {
         return {
-            searchMore: false,
             search: {
                 name: '',
                 department_id: '',
                 department_job_id: '',
                 role_id: ''
-            }
+            },
+            searchMore: false,
+            searchMore2: false
         }
     }
 }
diff --git a/src/views/component_example/table.autoheight.vue b/src/views/component_example/table.autoheight.vue
index 561fb2fb..6b0dc1c2 100644
--- a/src/views/component_example/table.autoheight.vue
+++ b/src/views/component_example/table.autoheight.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="table-auto-height">
-        <page-header title="表格自适应" content="缩小浏览器窗口高度试试" />
+        <page-header title="表格自适应" content="缩小浏览器窗口高度看看效果。该演示非组件，由于实际页面情况复杂且不可控，故提供了一种实现思路" />
         <page-main>
             <el-table :data="dataList" border stripe highlight-current-row>
                 <el-table-column type="index" width="50" />
diff --git a/src/views/component_example/trend.vue b/src/views/component_example/trend.vue
index ce2a2666..b9a07d1a 100644
--- a/src/views/component_example/trend.vue
+++ b/src/views/component_example/trend.vue
@@ -1,28 +1,42 @@
 <template>
     <div>
-        <page-header title="趋势符号" content="标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外。" />
-        <page-main>
-            <el-divider content-position="left">基础用法</el-divider>
-            <p>
-                <trend value="12.3" />
-            </p>
-            <p>
-                <trend value="12.3" type="down" />
-            </p>
-            <el-divider content-position="left">颜色反转</el-divider>
-            <p>
-                <trend value="12.3" reverse />
-            </p>
-            <p>
-                <trend value="12.3" type="down" reverse />
-            </p>
-            <el-divider content-position="left">前缀后缀</el-divider>
-            <p>
-                <trend value="12.3" prefix="$" />
-            </p>
-            <p>
-                <trend value="12.3" suffix="%" />
-            </p>
-        </page-main>
+        <page-header title="趋势符号">
+            <template #content>
+                <p>Trend</p>
+                <p style="margin-bottom: 0;">标记上升和下降趋势。通常用绿色代表“好”，红色代表“不好”，股票涨跌场景除外</p>
+            </template>
+        </page-header>
+        <el-row :gutter="20" style="margin: 0 10px;">
+            <el-col :md="8">
+                <page-main title="基础用法" style="margin: 0;">
+                    <p>
+                        <trend value="12.3" />
+                    </p>
+                    <p>
+                        <trend value="12.3" type="down" />
+                    </p>
+                </page-main>
+            </el-col>
+            <el-col :md="8">
+                <page-main title="颜色反转" style="margin: 0;">
+                    <p>
+                        <trend value="12.3" reverse />
+                    </p>
+                    <p>
+                        <trend value="12.3" type="down" reverse />
+                    </p>
+                </page-main>
+            </el-col>
+            <el-col :md="8">
+                <page-main title="前缀后缀" style="margin: 0;">
+                    <p>
+                        <trend value="12.3" prefix="$" />
+                    </p>
+                    <p>
+                        <trend value="12.3" suffix="%" />
+                    </p>
+                </page-main>
+            </el-col>
+        </el-row>
     </div>
 </template>
diff --git a/src/views/component_example/upload.vue b/src/views/component_example/upload.vue
index d0919eda..befdf454 100644
--- a/src/views/component_example/upload.vue
+++ b/src/views/component_example/upload.vue
@@ -1,11 +1,13 @@
 <template>
     <div>
-        <page-main>
-            <el-divider content-position="left">单图上传</el-divider>
+        <page-header title="上传" content="ImageUpload / ImagesUpload / FileUpload" />
+        <page-main title="单图上传">
             <image-upload :url.sync="image" action="http://scrm.1daas.com/api/upload/upload" name="image" :width="250" :height="150" :data="{'token':'TKD628431923530324'}" @onSuccess="handleSuccess1" />
-            <el-divider content-position="left">多图上传（默认最多3张）</el-divider>
+        </page-main>
+        <page-main title="多图上传（默认最多3张）">
             <images-upload :url="images" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKD628431923530324'}" @onSuccess="handleSuccess2" />
-            <el-divider content-position="left">文件上传（默认最多3个）</el-divider>
+        </page-main>
+        <page-main title="文件上传（默认最多3个）">
             <file-upload :files="files" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKD628431923530324'}" @onSuccess="handleSuccess3" />
         </page-main>
     </div>