zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf:change i18n-demo to resizeable

This commit is contained in:
Pan 2017-11-29 11:33:11 +08:00
parent d99cb068aa
commit dd3e22d5a1
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/i18n-demo/index.vue
View File

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