wangpeng
/
integrated_traffic_admin_vue
forked from integrated_whb/integrated_whb_admin_vue
1
0
Fork 0
Code Pull Requests Activity

菜单图标样式

pull/1/head
LiuJiaNan 2024-02-05 17:18:17 +08:00
parent b74bc37a4a
commit a88c748046
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/system/route/components/list.vue
View File

@ -156,13 +156,13 @@
title="设置图标" title="设置图标"
width="40%" width="40%"
@close="iconDialog.visible = false"> @close="iconDialog.visible = false">
<div> <div class="link">
<a href="https://iconpark.oceanengine.com/official" target="_blank"> <a href="https://iconpark.oceanengine.com/official" target="_blank">
点击此处 点击此处
</a> </a>
查看所有图标 查看所有图标
</div> </div>
<div class="mt"> <div>
<el-form label-width="80px"> <el-form label-width="80px">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
@ -179,8 +179,8 @@
</el-form> </el-form>
</div> </div>
<div class="icon_container"> <div class="icon_container">
<div v-for="(item, index) in iconDialog.svgList" :key="index"> <template v-for="(item, index) in iconDialog.svgList">
<el-tooltip :content="item.title"> <el-tooltip :content="item.title" :key="index">
<div <div
:class="{ active: iconDialog.iconIndex === index }" :class="{ active: iconDialog.iconIndex === index }"
class="item" class="item"
@ -190,14 +190,13 @@
:is="'icon-' + item.name" :is="'icon-' + item.name"
:stroke-width="3" :stroke-width="3"
theme="outline" theme="outline"
fill="#fff" fill="#a5b2c2"
size="38" size="38"
/> />
</div> </div>
</el-tooltip> </el-tooltip>
</template>
</div> </div>
</div>
<div class="mt flex-end">
<pagination <pagination
:total="iconDialog.pagination.total" :total="iconDialog.pagination.total"
:page.sync="iconDialog.pagination.currentPage" :page.sync="iconDialog.pagination.currentPage"
@ -205,7 +204,6 @@
small small
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@pagination="fnSearchIcon" /> @pagination="fnSearchIcon" />
</div>
<template #footer> <template #footer>
<el-button type="primary" @click="confirmIcon">保存</el-button> <el-button type="primary" @click="confirmIcon">保存</el-button>
<el-button @click="iconDialog.visible = false">关闭</el-button> <el-button @click="iconDialog.visible = false">关闭</el-button>
@ -566,13 +564,20 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.link{
margin-bottom: 10px;
a{
color: #409EFF;
}
}
.icon_container { .icon_container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 10px;
.item { .item {
flex-basis: calc(5% - 10px); flex-basis: calc(10% - 13px);
border: 1px solid #fff; border: 1px solid #ccc;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;