'admin-21.04.29:更新最新依赖、新增大图预览及其它组件演示效果优化'

This commit is contained in:
lyt 2021-04-29 17:42:01 +08:00
parent 9863d4ed0d
commit 6cf87bee90
14 changed files with 85 additions and 6 deletions

View File

@ -32,7 +32,7 @@
"devDependencies": {
"@types/axios": "^0.14.0",
"@types/clipboard": "^2.0.1",
"@types/node": "^15.0.0",
"@types/node": "^15.0.1",
"@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.10.6",
"@typescript-eslint/eslint-plugin": "^4.22.0",
@ -43,7 +43,7 @@
"eslint": "^7.25.0",
"eslint-plugin-vue": "^7.9.0",
"prettier": "^2.2.1",
"sass": "^1.32.11",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"typescript": "^4.2.4",
"vite": "^2.2.3",

View File

@ -45,6 +45,7 @@ export default {
pagesListAdapt: 'ListAdapt',
pagesWaterfall: 'Waterfall',
pagesSteps: 'Steps',
pagesPreview: 'Large preview',
chartIndex: 'chartIndex',
personal: 'personal',
tools: 'tools',

View File

@ -45,6 +45,7 @@ export default {
pagesListAdapt: '列表自适应',
pagesWaterfall: '瀑布屏',
pagesSteps: '步骤条',
pagesPreview: '大图预览',
chartIndex: '大数据图表',
personal: '个人中心',
tools: '工具类集合',

View File

@ -45,6 +45,7 @@ export default {
pagesListAdapt: '清單自我調整',
pagesWaterfall: '瀑布屏',
pagesSteps: '步驟條',
pagesPreview: '大圖預覽',
chartIndex: '大資料圖表',
personal: '個人中心',
tools: '工具類集合',

View File

@ -697,6 +697,21 @@ export const dynamicRoutes = [
icon: 'iconfont icon-step',
},
},
{
path: '/pages/preview',
name: 'pagesPreview',
component: () => import('/@/views/pages/preview/index.vue'),
meta: {
title: 'message.router.pagesPreview',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
auth: ['admin', 'test'],
icon: 'iconfont icon-15tupianyulan',
},
},
],
},
{

View File

@ -583,6 +583,25 @@
background-color: set-color(info);
}
/* Result 结果
------------------------------- */
// success
.el-result .icon-success {
fill: set-color(success);
}
// warning
.el-result .icon-warning {
fill: set-color(warning);
}
// error
.el-result .icon-error {
fill: set-color(danger);
}
// info
.el-result .icon-info {
fill: set-color(info);
}
/* Alert 警告
------------------------------- */
// success

View File

@ -1,6 +1,6 @@
// 字体图标 url
const cssCdnUrlList: Array<string> = [
'//at.alicdn.com/t/font_2298093_vcabyobusxq.css',
'//at.alicdn.com/t/font_2298093_omfjza0tsa.css',
'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
];
// 第三方 js url

View File

@ -654,7 +654,7 @@ export default defineComponent({
onWartermarkChange();
//
if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
}, 1000);
}, 1100);
});
});
});

View File

@ -56,7 +56,11 @@ export default {
height: 120px;
overflow: hidden;
display: flex;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
.iconfont-warp-value {
i {
color: var(--color-primary);

View File

@ -57,7 +57,11 @@ export default {
height: 120px;
overflow: hidden;
display: flex;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
.iconfont-warp-value {
i {
color: var(--color-primary);

View File

@ -72,7 +72,7 @@
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-form-item>
<el-button type="primary" icon="el-icon-position">更新个人信息</el-button>
<el-button type="primary" icon="iconfont icon-biaodan">更新个人信息</el-button>
</el-form-item>
</el-col>
</el-row>

View File

@ -53,7 +53,11 @@ export default {
height: 120px;
overflow: hidden;
display: flex;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
.iconfont-warp-value {
i {
color: var(--color-primary);

View File

@ -0,0 +1,27 @@
<template>
<div class="preview-container">
<el-card shadow="hover" header="element-plus 大图预览">
<el-image style="width: 100px; height: 100px; border-radius: 5px" :src="url" :preview-src-list="srcList" title="点击查看大图预览"> </el-image>
</el-card>
</div>
</template>
<script lang="ts">
import { toRefs, reactive } from 'vue';
export default {
name: 'pagesPreview',
setup() {
const state = reactive({
url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
srcList: [
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
],
});
return {
...toRefs(state),
};
},
};
</script>

View File

@ -6,7 +6,10 @@
<el-step title="第二步" icon="iconfont icon-2_round_solid"></el-step>
<el-step title="第三步" icon="iconfont icon-3_round_solid"></el-step>
</el-steps>
<el-button @click="onNextSteps" size="small" class="mt15" type="primary">下一步</el-button>
<el-result icon="error" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
<el-result icon="success" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
<el-button @click="onNextSteps" size="small" class="mt15" type="primary" icon="iconfont icon-step">下一步</el-button>
</el-card>
</div>
</template>