'admin-21.04.29:更新最新依赖、新增大图预览及其它组件演示效果优化'
This commit is contained in:
parent
9863d4ed0d
commit
6cf87bee90
@ -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",
|
||||
|
@ -45,6 +45,7 @@ export default {
|
||||
pagesListAdapt: 'ListAdapt',
|
||||
pagesWaterfall: 'Waterfall',
|
||||
pagesSteps: 'Steps',
|
||||
pagesPreview: 'Large preview',
|
||||
chartIndex: 'chartIndex',
|
||||
personal: 'personal',
|
||||
tools: 'tools',
|
||||
|
@ -45,6 +45,7 @@ export default {
|
||||
pagesListAdapt: '列表自适应',
|
||||
pagesWaterfall: '瀑布屏',
|
||||
pagesSteps: '步骤条',
|
||||
pagesPreview: '大图预览',
|
||||
chartIndex: '大数据图表',
|
||||
personal: '个人中心',
|
||||
tools: '工具类集合',
|
||||
|
@ -45,6 +45,7 @@ export default {
|
||||
pagesListAdapt: '清單自我調整',
|
||||
pagesWaterfall: '瀑布屏',
|
||||
pagesSteps: '步驟條',
|
||||
pagesPreview: '大圖預覽',
|
||||
chartIndex: '大資料圖表',
|
||||
personal: '個人中心',
|
||||
tools: '工具類集合',
|
||||
|
@ -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',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -654,7 +654,7 @@ export default defineComponent({
|
||||
onWartermarkChange();
|
||||
// 语言国际化
|
||||
if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
|
||||
}, 1000);
|
||||
}, 1100);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
27
src/views/pages/preview/index.vue
Normal file
27
src/views/pages/preview/index.vue
Normal 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>
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user