perf:change i18n-demo to resizeable

Author: PanJiaChen

src/views/i18n-demo/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <el-card class="box-card">
+  <div>
+    <el-card class="box-card" style="margin-top:40px;">
       <div slot="header" class="clearfix">
         <svg-icon icon-class="international" />
         <span style='margin-left:10px;'>{{$t('i18nView.title')}}</span>
@@ -13,29 +13,30 @@
         <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
       </div>
     </el-card>
-    <el-row :gutter="20" style="margin:100px 50px 50px;">
+
+    <el-row :gutter="20" style="margin:100px 15px 50px;">
       <el-col :span="12">
         <div class="block">
           <el-date-picker v-model="date" type="date" :placeholder="$t('i18nView.datePlaceholder')"></el-date-picker>
         </div>
         <div class="block">
-          <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+          <el-pagination :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next"
             :total="400">
           </el-pagination>
         </div>
         <div class="block">
-          <el-button  size="small">{{$t('i18nView.default')}}</el-button>
-          <el-button size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
-          <el-button size="small" type="success">{{$t('i18nView.success')}}</el-button>
-          <el-button size="small" type="info">{{$t('i18nView.info')}}</el-button>
-          <el-button size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
-          <el-button size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
+          <el-button class="item-btn" size="small">{{$t('i18nView.default')}}</el-button>
+          <el-button class="item-btn" size="small" type="primary">{{$t('i18nView.primary')}}</el-button>
+          <el-button class="item-btn" size="small" type="success">{{$t('i18nView.success')}}</el-button>
+          <el-button class="item-btn" size="small" type="info">{{$t('i18nView.info')}}</el-button>
+          <el-button class="item-btn" size="small" type="warning">{{$t('i18nView.warning')}}</el-button>
+          <el-button class="item-btn" size="small" type="danger">{{$t('i18nView.danger')}}</el-button>
         </div>
       </el-col>
       <el-col :span="12">
         <el-table :data="tableData" fit highlight-current-row border style="width: 100%">
-          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="180"></el-table-column>
-          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="180"></el-table-column>
+          <el-table-column prop="name" :label="$t('i18nView.tableName')" width="100" align="center"></el-table-column>
+          <el-table-column prop="date" :label="$t('i18nView.tableDate')" width="120" align="center"></el-table-column>
           <el-table-column prop="address" :label="$t('i18nView.tableAddress')"></el-table-column>
         </el-table>
       </el-col>
@@ -100,7 +101,10 @@ export default {
   width: 600px;
   margin: 20px auto;
 }
-
+.item-btn{
+  margin-bottom: 15px;
+  margin-left: 0px;
+}
 .block {
   padding: 25px;
 }