Skip to content

D
dataease
提交 6e2dd018 authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat:增加支持文本超链接

上级 21059d19
隐藏空白字符变更
内嵌 并排
正在显示 包含 423 行增加 和 190 行删除
frontend/src/components/canvas/components/Editor/Hyperlinks.vue 0 → 100644
浏览文件 @ 6e2dd018
<template>
<el-popover
ref="popover"
width="340"
trigger="click"
>
<el-row>
<el-form ref="form" size="mini" label-width="70px">
<el-form-item :label="$t('panel.is_enable')">
<el-switch v-model="linkInfo.enable" size="mini" />
<span v-show="linkInfo.enable" style="color: #909399; font-size: 8px;margin-left: 3px">
Tips:{{ $t('panel.link_open_tips') }}
</span>
</el-form-item>
<el-form-item :label="$t('panel.open_mode')">
<el-radio-group v-model="linkInfo.openMode" :disabled="!linkInfo.enable">
<el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
<el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.hyperLinks')">
<el-input v-model="linkInfo.content" :disabled="!linkInfo.enable" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
</el-form-item>
</el-form>
</el-row>
<i slot="reference" class="icon iconfont icon-chaolianjie" />
</el-popover>
</template>
<script>
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
props: {
linkInfo: {
type: Object,
required: true
}
},
data() {
return {
componentType: null,
linkageActiveStatus: false,
editFilter: [
'view',
'custom'
]
}
},
computed: {
...mapState([
'curComponent'
])
},
methods: {
onSubmit() {
this.curComponent.hyperlinks = deepCopy(this.linkInfo)
this.popoverClose()
},
onClose() {
this.$emit('close')
this.popoverClose()
},
popoverClose() {
this.$refs.popover.showPopper = false
}
}
}
</script>
<style lang="scss" scoped>
.slot-class{
color: white;
}
.bottom {
margin-top: 20px;
text-align: center;
}
.ellip{
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/
background-color: #f7f8fa;
color: #3d4d66;
font-size: 12px;
line-height: 24px;
height: 24px;
border-radius: 3px;
}
.select-filed{
/*width: 100%;*/
margin-left: 10px;
margin-right: 10px;
overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow:ellipsis;/*超出部分文字以...显示*/
color: #3d4d66;
font-size: 12px;
line-height: 35px;
height: 35px;
border-radius: 3px;
}
>>>.el-popover{
height: 200px;
overflow: auto;
}
</style>
frontend/src/components/canvas/components/TextAttr.vue
浏览文件 @ 6e2dd018
<template>
<el-card class="el-card-main" :style="mainStyle">
<div style="position: relative;">
<div id="main-attr" style="position: relative;">
<div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
<el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
<el-radio-button
......@@ -76,13 +76,23 @@
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="超链接">
<Hyperlinks :link-info="this.curComponent.hyperlinks" />
</el-tooltip>
</div>
</div>
</el-card>
</template>
<script>
import { mapState } from 'vuex'
import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks'
export default {
components: { Hyperlinks },
props: {
scrollLeft: {
type: Number,
......@@ -96,6 +106,7 @@ export default {
data() {
return {
innerOpacity: 0,
mainWidthOffset: 600,
textAlignOptions: [
{
icon: 'iconfont icon-juzuo',
......@@ -125,6 +136,8 @@ export default {
if (this.styleInfo['opacity']) {
this.innerOpacity = this.styleInfo['opacity'] * 100
}
this.mainWidthOffset = document.getElementById('main-attr').offsetWidth - 50
// console.log('mainWidthOffset:' + this.mainWidthOffset)
},
computed: {
letterDivColor() {
......@@ -181,7 +194,7 @@ export default {
ps = x + 60
}
// 防止toolbar超出边界
const xGap = ps + 565 - this.canvasWidth
const xGap = ps + this.mainWidthOffset - this.canvasWidth
// console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
if (xGap > 0) {
return ps - xGap
......@@ -213,7 +226,6 @@ export default {
.el-card-main {
height: 34px;
z-index: 10;
width: 620px;
position: absolute;
}
......
frontend/src/components/canvas/custom-component/VText.vue
浏览文件 @ 6e2dd018
......@@ -18,7 +18,7 @@
<div v-if="!canEdit" :style="{ verticalAlign: element.style.verticalAlign }" @dblclick="setEdit" v-html="element.propValue" />
</div>
<div v-else class="v-text">
<div :style="{ verticalAlign: element.style.verticalAlign }" v-html="element.propValue" />
<div :style="{ verticalAlign: element.style.verticalAlign }" v-html="textInfo" />
</div>
</template>
......@@ -56,6 +56,13 @@ export default {
}
},
computed: {
textInfo() {
if (this.element && this.element.hyperlinks && this.element.hyperlinks.enable) {
return "<a target='" + this.element.hyperlinks.openMode + "' href='" + this.element.hyperlinks.content + "'>" + this.element.propValue + '</a>'
} else {
return this.element.propValue
}
}
},
watch: {
......@@ -123,9 +130,9 @@ export default {
selectText(element) {
const selection = window.getSelection()
const range = document.createRange()
range.selectNodeContents(element)
selection.removeAllRanges()
selection.addRange(range)
// range.selectNodeContents(element)
// selection.removeAllRanges()
// selection.addRange(range)
},
removeSelectText() {
......
frontend/src/components/canvas/custom-component/component-list.js
浏览文件 @ 6e2dd018
......@@ -11,6 +11,13 @@ export const commonAttr = {
isLock: false // 是否锁定组件
}
// 超链接配置
export const HYPERLINKS = {
openMode: '_blank',
enable: false,
content: 'http://'
}
export const assistList = [
{
id: '10001',
......@@ -71,6 +78,7 @@ const list = [
backgroundColor: '#ffffff',
borderRadius: 0
},
hyperlinks: HYPERLINKS,
x: 1,
y: 1,
sizex: 10,
......
frontend/src/lang/en.js
浏览文件 @ 6e2dd018
......@@ -1319,7 +1319,13 @@ export default {
suspension: 'suspension',
new_element_distribution: 'New element Distribution',
subject_no_edit: 'System Subject Can Not Edit',
subject_name_not_null: 'Subject Name Can Not Be Null And Less Than 20 charts'
subject_name_not_null: 'Subject Name Can Not Be Null And Less Than 20 charts',
is_enable: 'Enable',
open_mode: 'Open Model',
new_window: 'New Window',
now_window: 'Now Window',
hyperLinks: 'hyperlinks',
link_open_tips: 'Open When Panel Not In Edit Status'
},
plugin: {
local_install: 'Local installation',
......
frontend/src/lang/tw.js
浏览文件 @ 6e2dd018
......@@ -1322,7 +1322,13 @@ export default {
suspension: '悬浮',
new_element_distribution: '当前元素移入分布方式',
subject_no_edit: '系统主题不能修改',
subject_name_not_null: '主题名称需要1~20字符'
subject_name_not_null: '主题名称需要1~20字符',
is_enable: '是否启用',
open_mode: '打开方式',
new_window: '新窗口',
now_window: '当前窗口',
hyperLinks: '超链接',
link_open_tips: '仪表板非编辑状态可打开链接'
},
plugin: {
local_install: '本地安裝',
......
frontend/src/lang/zh.js
浏览文件 @ 6e2dd018
......@@ -1327,7 +1327,13 @@ export default {
suspension: '悬浮',
new_element_distribution: '当前元素移入分布方式',
subject_no_edit: '系统主题不能修改',
subject_name_not_null: '主题名称需要1~20字符'
subject_name_not_null: '主题名称需要1~20字符',
is_enable: '是否启用',
open_mode: '打开方式',
new_window: '新窗口',
now_window: '当前窗口',
hyperLinks: '超链接',
link_open_tips: '仪表板非编辑状态可打开链接'
},
plugin: {
local_install: '本地安装',
......
frontend/src/styles/deicon/demo_index.html
浏览文件 @ 6e2dd018
......@@ -38,7 +38,7 @@
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
......@@ -46,350 +46,362 @@
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2459092" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe9b2;</span>
<div class="name">超链接</div>
<div class="code-name">&amp;#xe9b2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">科学技术</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe69c;</span>
<div class="name">符号-数据矩阵</div>
<div class="code-name">&amp;#xe69c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb85;</span>
<div class="name">视图矩阵_o</div>
<div class="code-name">&amp;#xeb85;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">悬浮</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6db;</span>
<div class="name">右悬浮-选中</div>
<div class="code-name">&amp;#xe6db;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f6;</span>
<div class="name">悬浮</div>
<div class="code-name">&amp;#xe6f6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8e6;</span>
<div class="name">悬浮按钮</div>
<div class="code-name">&amp;#xe8e6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">44.tabs</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">洗浴</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe973;</span>
<div class="name">线性图标-取消下钻</div>
<div class="code-name">&amp;#xe973;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ed;</span>
<div class="name">线性图标-取消下钻</div>
<div class="code-name">&amp;#xe6ed;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6f7;</span>
<div class="name">联动</div>
<div class="code-name">&amp;#xe6f7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">下钻</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">上钻</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">取消联动</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">edit-2</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">edit-2</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe706;</span>
<div class="name">详情</div>
<div class="code-name">&amp;#xe706;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">弧形框</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">弧形框</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe642;</span>
<div class="name">透明</div>
<div class="code-name">&amp;#xe642;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">弧度</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">放大</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe696;</span>
<div class="name">设 置</div>
<div class="code-name">&amp;#xe696;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe655;</span>
<div class="name">屏幕_全屏</div>
<div class="code-name">&amp;#xe655;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe659;</span>
<div class="name">font-weight-bold</div>
<div class="code-name">&amp;#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">letter_spacing</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe679;</span>
<div class="name">letter-spacing</div>
<div class="code-name">&amp;#xe679;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">字体颜色</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c3;</span>
<div class="name">format_letter_spacing_2</div>
<div class="code-name">&amp;#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe710;</span>
<div class="name">font_size</div>
<div class="code-name">&amp;#xe710;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe972;</span>
<div class="name">居中</div>
<div class="code-name">&amp;#xe972;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">居右</div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe688;</span>
<div class="name">居左</div>
<div class="code-name">&amp;#xe688;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">实线</div>
<div class="code-name">&amp;#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe640;</span>
<div class="name">画笔</div>
<div class="code-name">&amp;#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">点线</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">虚线</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">背景色‘</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">矩形</div>
<div class="code-name">&amp;#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe959;</span>
<div class="name">text</div>
<div class="code-name">&amp;#xe959;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">picture</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ab;</span>
<div class="name">输入</div>
<div class="code-name">&amp;#xe6ab;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe628;</span>
<div class="name">树</div>
<div class="code-name">&amp;#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">查询搜索</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">季度</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7de;</span>
<div class="name">数字顺序</div>
<div class="code-name">&amp;#xe7de;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a6;</span>
<div class="name">树列表</div>
<div class="code-name">&amp;#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe639;</span>
<div class="name">日期</div>
<div class="code-name">&amp;#xe639;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dd;</span>
<div class="name">左侧-区间</div>
<div class="code-name">&amp;#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66f;</span>
<div class="name">列表</div>
<div class="code-name">&amp;#xe66f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8ca;</span>
<div class="name">下拉框</div>
<div class="code-name">&amp;#xe8ca;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8d0;</span>
<div class="name">下拉树</div>
<div class="code-name">&amp;#xe8d0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">重置</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe691;</span>
<div class="name">日</div>
<div class="code-name">&amp;#xe691;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe692;</span>
<div class="name">年</div>
<div class="code-name">&amp;#xe692;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe695;</span>
<div class="name">月</div>
<div class="code-name">&amp;#xe695;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
......@@ -408,9 +420,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1633678290478') format('woff2'),
url('iconfont.woff?t=1633678290478') format('woff'),
url('iconfont.ttf?t=1633678290478') format('truetype');
src: url('iconfont.woff2?t=1634191971474') format('woff2'),
url('iconfont.woff?t=1634191971474') format('woff'),
url('iconfont.ttf?t=1634191971474') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -435,7 +447,25 @@
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-chaolianjie"></span>
<div class="name">
超链接
</div>
<div class="code-name">.icon-chaolianjie
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-kexuejishu"></span>
<div class="name">
科学技术
</div>
<div class="code-name">.icon-kexuejishu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shujujuzhen"></span>
<div class="name">
......@@ -444,7 +474,7 @@
<div class="code-name">.icon-shujujuzhen
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shitujuzhen_o"></span>
<div class="name">
......@@ -453,7 +483,7 @@
<div class="code-name">.icon-shitujuzhen_o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuanfu1"></span>
<div class="name">
......@@ -462,7 +492,7 @@
<div class="code-name">.icon-xuanfu1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-youxuanfu-copy"></span>
<div class="name">
......@@ -471,7 +501,7 @@
<div class="code-name">.icon-youxuanfu-copy
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuanfu"></span>
<div class="name">
......@@ -480,7 +510,7 @@
<div class="code-name">.icon-xuanfu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuanfuanniu"></span>
<div class="name">
......@@ -489,7 +519,7 @@
<div class="code-name">.icon-xuanfuanniu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tabs"></span>
<div class="name">
......@@ -498,7 +528,7 @@
<div class="code-name">.icon-tabs
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiyu"></span>
<div class="name">
......@@ -507,7 +537,7 @@
<div class="code-name">.icon-xiyu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoshangzuan"></span>
<div class="name">
......@@ -516,7 +546,7 @@
<div class="code-name">.icon-quxiaoshangzuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoxiazuan"></span>
<div class="name">
......@@ -525,7 +555,7 @@
<div class="code-name">.icon-quxiaoxiazuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-linkage"></span>
<div class="name">
......@@ -534,7 +564,7 @@
<div class="code-name">.icon-linkage
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiazuan"></span>
<div class="name">
......@@ -543,7 +573,7 @@
<div class="code-name">.icon-xiazuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shangzuan"></span>
<div class="name">
......@@ -552,7 +582,7 @@
<div class="code-name">.icon-shangzuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoliandong"></span>
<div class="name">
......@@ -561,7 +591,7 @@
<div class="code-name">.icon-quxiaoliandong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edit-outline"></span>
<div class="name">
......@@ -570,7 +600,7 @@
<div class="code-name">.icon-edit-outline
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-edit"></span>
<div class="name">
......@@ -579,7 +609,7 @@
<div class="code-name">.icon-edit
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiangqing1"></span>
<div class="name">
......@@ -588,7 +618,7 @@
<div class="code-name">.icon-xiangqing1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weibiaoti-1"></span>
<div class="name">
......@@ -597,7 +627,7 @@
<div class="code-name">.icon-weibiaoti-1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weibiaoti-"></span>
<div class="name">
......@@ -606,7 +636,7 @@
<div class="code-name">.icon-weibiaoti-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-touming"></span>
<div class="name">
......@@ -615,7 +645,7 @@
<div class="code-name">.icon-touming
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fangxing-"></span>
<div class="name">
......@@ -624,7 +654,7 @@
<div class="code-name">.icon-fangxing-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fangda"></span>
<div class="name">
......@@ -633,7 +663,7 @@
<div class="code-name">.icon-fangda
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shezhi"></span>
<div class="name">
......@@ -642,7 +672,7 @@
<div class="code-name">.icon-shezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quanping1"></span>
<div class="name">
......@@ -651,7 +681,7 @@
<div class="code-name">.icon-quanping1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-font-weight-bold"></span>
<div class="name">
......@@ -660,7 +690,7 @@
<div class="code-name">.icon-font-weight-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-letter_spacing"></span>
<div class="name">
......@@ -669,7 +699,7 @@
<div class="code-name">.icon-letter_spacing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-letter-spacing"></span>
<div class="name">
......@@ -678,7 +708,7 @@
<div class="code-name">.icon-letter-spacing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zimua"></span>
<div class="name">
......@@ -687,7 +717,7 @@
<div class="code-name">.icon-zimua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-format_letter_spacing_"></span>
<div class="name">
......@@ -696,7 +726,7 @@
<div class="code-name">.icon-format_letter_spacing_
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-font_size"></span>
<div class="name">
......@@ -705,7 +735,7 @@
<div class="code-name">.icon-font_size
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-align-center"></span>
<div class="name">
......@@ -714,7 +744,7 @@
<div class="code-name">.icon-align-center
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juyou"></span>
<div class="name">
......@@ -723,7 +753,7 @@
<div class="code-name">.icon-juyou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juzuo"></span>
<div class="name">
......@@ -732,7 +762,7 @@
<div class="code-name">.icon-juzuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-solid_line"></span>
<div class="name">
......@@ -741,7 +771,7 @@
<div class="code-name">.icon-solid_line
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-huabi"></span>
<div class="name">
......@@ -750,7 +780,7 @@
<div class="code-name">.icon-huabi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianxian"></span>
<div class="name">
......@@ -759,7 +789,7 @@
<div class="code-name">.icon-dianxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xuxian"></span>
<div class="name">
......@@ -768,7 +798,7 @@
<div class="code-name">.icon-xuxian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-beijingse1"></span>
<div class="name">
......@@ -777,7 +807,7 @@
<div class="code-name">.icon-beijingse1
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juxing"></span>
<div class="name">
......@@ -786,7 +816,7 @@
<div class="code-name">.icon-juxing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-text"></span>
<div class="name">
......@@ -795,7 +825,7 @@
<div class="code-name">.icon-text
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-picture"></span>
<div class="name">
......@@ -804,7 +834,7 @@
<div class="code-name">.icon-picture
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuru"></span>
<div class="name">
......@@ -813,7 +843,7 @@
<div class="code-name">.icon-shuru
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tree"></span>
<div class="name">
......@@ -822,7 +852,7 @@
<div class="code-name">.icon-tree
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chaxunsousuo"></span>
<div class="name">
......@@ -831,7 +861,7 @@
<div class="code-name">.icon-chaxunsousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jidu"></span>
<div class="name">
......@@ -840,7 +870,7 @@
<div class="code-name">.icon-jidu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shuzishunxu"></span>
<div class="name">
......@@ -849,7 +879,7 @@
<div class="code-name">.icon-shuzishunxu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-Group-"></span>
<div class="name">
......@@ -858,7 +888,7 @@
<div class="code-name">.icon-Group-
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-riqi"></span>
<div class="name">
......@@ -867,7 +897,7 @@
<div class="code-name">.icon-riqi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zuoce-qujian"></span>
<div class="name">
......@@ -876,7 +906,7 @@
<div class="code-name">.icon-zuoce-qujian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-liebiao"></span>
<div class="name">
......@@ -885,7 +915,7 @@
<div class="code-name">.icon-liebiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xialakuang"></span>
<div class="name">
......@@ -894,7 +924,7 @@
<div class="code-name">.icon-xialakuang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xialashu"></span>
<div class="name">
......@@ -903,7 +933,7 @@
<div class="code-name">.icon-xialashu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zhongzhi"></span>
<div class="name">
......@@ -912,7 +942,7 @@
<div class="code-name">.icon-zhongzhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ri"></span>
<div class="name">
......@@ -921,7 +951,7 @@
<div class="code-name">.icon-ri
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-nian"></span>
<div class="name">
......@@ -930,7 +960,7 @@
<div class="code-name">.icon-nian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yue"></span>
<div class="name">
......@@ -939,7 +969,7 @@
<div class="code-name">.icon-yue
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
......@@ -966,7 +996,23 @@
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chaolianjie"></use>
</svg>
<div class="name">超链接</div>
<div class="code-name">#icon-chaolianjie</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-kexuejishu"></use>
</svg>
<div class="name">科学技术</div>
<div class="code-name">#icon-kexuejishu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shujujuzhen"></use>
......@@ -974,7 +1020,7 @@
<div class="name">符号-数据矩阵</div>
<div class="code-name">#icon-shujujuzhen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shitujuzhen_o"></use>
......@@ -982,7 +1028,7 @@
<div class="name">视图矩阵_o</div>
<div class="code-name">#icon-shitujuzhen_o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuanfu1"></use>
......@@ -990,7 +1036,7 @@
<div class="name">悬浮</div>
<div class="code-name">#icon-xuanfu1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-youxuanfu-copy"></use>
......@@ -998,7 +1044,7 @@
<div class="name">右悬浮-选中</div>
<div class="code-name">#icon-youxuanfu-copy</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuanfu"></use>
......@@ -1006,7 +1052,7 @@
<div class="name">悬浮</div>
<div class="code-name">#icon-xuanfu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuanfuanniu"></use>
......@@ -1014,7 +1060,7 @@
<div class="name">悬浮按钮</div>
<div class="code-name">#icon-xuanfuanniu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tabs"></use>
......@@ -1022,7 +1068,7 @@
<div class="name">44.tabs</div>
<div class="code-name">#icon-tabs</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiyu"></use>
......@@ -1030,7 +1076,7 @@
<div class="name">洗浴</div>
<div class="code-name">#icon-xiyu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoshangzuan"></use>
......@@ -1038,7 +1084,7 @@
<div class="name">线性图标-取消下钻</div>
<div class="code-name">#icon-quxiaoshangzuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoxiazuan"></use>
......@@ -1046,7 +1092,7 @@
<div class="name">线性图标-取消下钻</div>
<div class="code-name">#icon-quxiaoxiazuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-linkage"></use>
......@@ -1054,7 +1100,7 @@
<div class="name">联动</div>
<div class="code-name">#icon-linkage</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiazuan"></use>
......@@ -1062,7 +1108,7 @@
<div class="name">下钻</div>
<div class="code-name">#icon-xiazuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shangzuan"></use>
......@@ -1070,7 +1116,7 @@
<div class="name">上钻</div>
<div class="code-name">#icon-shangzuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoliandong"></use>
......@@ -1078,7 +1124,7 @@
<div class="name">取消联动</div>
<div class="code-name">#icon-quxiaoliandong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edit-outline"></use>
......@@ -1086,7 +1132,7 @@
<div class="name">edit-2</div>
<div class="code-name">#icon-edit-outline</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-edit"></use>
......@@ -1094,7 +1140,7 @@
<div class="name">edit-2</div>
<div class="code-name">#icon-edit</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiangqing1"></use>
......@@ -1102,7 +1148,7 @@
<div class="name">详情</div>
<div class="code-name">#icon-xiangqing1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weibiaoti-1"></use>
......@@ -1110,7 +1156,7 @@
<div class="name">弧形框</div>
<div class="code-name">#icon-weibiaoti-1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weibiaoti-"></use>
......@@ -1118,7 +1164,7 @@
<div class="name">弧形框</div>
<div class="code-name">#icon-weibiaoti-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-touming"></use>
......@@ -1126,7 +1172,7 @@
<div class="name">透明</div>
<div class="code-name">#icon-touming</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fangxing-"></use>
......@@ -1134,7 +1180,7 @@
<div class="name">弧度</div>
<div class="code-name">#icon-fangxing-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fangda"></use>
......@@ -1142,7 +1188,7 @@
<div class="name">放大</div>
<div class="code-name">#icon-fangda</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shezhi"></use>
......@@ -1150,7 +1196,7 @@
<div class="name">设 置</div>
<div class="code-name">#icon-shezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quanping1"></use>
......@@ -1158,7 +1204,7 @@
<div class="name">屏幕_全屏</div>
<div class="code-name">#icon-quanping1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-font-weight-bold"></use>
......@@ -1166,7 +1212,7 @@
<div class="name">font-weight-bold</div>
<div class="code-name">#icon-font-weight-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-letter_spacing"></use>
......@@ -1174,7 +1220,7 @@
<div class="name">letter_spacing</div>
<div class="code-name">#icon-letter_spacing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-letter-spacing"></use>
......@@ -1182,7 +1228,7 @@
<div class="name">letter-spacing</div>
<div class="code-name">#icon-letter-spacing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zimua"></use>
......@@ -1190,7 +1236,7 @@
<div class="name">字体颜色</div>
<div class="code-name">#icon-zimua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-format_letter_spacing_"></use>
......@@ -1198,7 +1244,7 @@
<div class="name">format_letter_spacing_2</div>
<div class="code-name">#icon-format_letter_spacing_</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-font_size"></use>
......@@ -1206,7 +1252,7 @@
<div class="name">font_size</div>
<div class="code-name">#icon-font_size</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-align-center"></use>
......@@ -1214,7 +1260,7 @@
<div class="name">居中</div>
<div class="code-name">#icon-align-center</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juyou"></use>
......@@ -1222,7 +1268,7 @@
<div class="name">居右</div>
<div class="code-name">#icon-juyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juzuo"></use>
......@@ -1230,7 +1276,7 @@
<div class="name">居左</div>
<div class="code-name">#icon-juzuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-solid_line"></use>
......@@ -1238,7 +1284,7 @@
<div class="name">实线</div>
<div class="code-name">#icon-solid_line</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-huabi"></use>
......@@ -1246,7 +1292,7 @@
<div class="name">画笔</div>
<div class="code-name">#icon-huabi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianxian"></use>
......@@ -1254,7 +1300,7 @@
<div class="name">点线</div>
<div class="code-name">#icon-dianxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xuxian"></use>
......@@ -1262,7 +1308,7 @@
<div class="name">虚线</div>
<div class="code-name">#icon-xuxian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-beijingse1"></use>
......@@ -1270,7 +1316,7 @@
<div class="name">背景色‘</div>
<div class="code-name">#icon-beijingse1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juxing"></use>
......@@ -1278,7 +1324,7 @@
<div class="name">矩形</div>
<div class="code-name">#icon-juxing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-text"></use>
......@@ -1286,7 +1332,7 @@
<div class="name">text</div>
<div class="code-name">#icon-text</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-picture"></use>
......@@ -1294,7 +1340,7 @@
<div class="name">picture</div>
<div class="code-name">#icon-picture</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuru"></use>
......@@ -1302,7 +1348,7 @@
<div class="name">输入</div>
<div class="code-name">#icon-shuru</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tree"></use>
......@@ -1310,7 +1356,7 @@
<div class="name">树</div>
<div class="code-name">#icon-tree</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chaxunsousuo"></use>
......@@ -1318,7 +1364,7 @@
<div class="name">查询搜索</div>
<div class="code-name">#icon-chaxunsousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jidu"></use>
......@@ -1326,7 +1372,7 @@
<div class="name">季度</div>
<div class="code-name">#icon-jidu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuzishunxu"></use>
......@@ -1334,7 +1380,7 @@
<div class="name">数字顺序</div>
<div class="code-name">#icon-shuzishunxu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-Group-"></use>
......@@ -1342,7 +1388,7 @@
<div class="name">树列表</div>
<div class="code-name">#icon-Group-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-riqi"></use>
......@@ -1350,7 +1396,7 @@
<div class="name">日期</div>
<div class="code-name">#icon-riqi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zuoce-qujian"></use>
......@@ -1358,7 +1404,7 @@
<div class="name">左侧-区间</div>
<div class="code-name">#icon-zuoce-qujian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-liebiao"></use>
......@@ -1366,7 +1412,7 @@
<div class="name">列表</div>
<div class="code-name">#icon-liebiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xialakuang"></use>
......@@ -1374,7 +1420,7 @@
<div class="name">下拉框</div>
<div class="code-name">#icon-xialakuang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xialashu"></use>
......@@ -1382,7 +1428,7 @@
<div class="name">下拉树</div>
<div class="code-name">#icon-xialashu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zhongzhi"></use>
......@@ -1390,7 +1436,7 @@
<div class="name">重置</div>
<div class="code-name">#icon-zhongzhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ri"></use>
......@@ -1398,7 +1444,7 @@
<div class="name">日</div>
<div class="code-name">#icon-ri</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-nian"></use>
......@@ -1406,7 +1452,7 @@
<div class="name">年</div>
<div class="code-name">#icon-nian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yue"></use>
......@@ -1414,7 +1460,7 @@
<div class="name">月</div>
<div class="code-name">#icon-yue</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
......
frontend/src/styles/deicon/iconfont.css
浏览文件 @ 6e2dd018
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1633678290478') format('woff2'),
url('iconfont.woff?t=1633678290478') format('woff'),
url('iconfont.ttf?t=1633678290478') format('truetype');
src: url('iconfont.woff2?t=1634191971474') format('woff2'),
url('iconfont.woff?t=1634191971474') format('woff'),
url('iconfont.ttf?t=1634191971474') format('truetype');
}
.iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-chaolianjie:before {
content: "\e9b2";
}
.icon-kexuejishu:before {
content: "\e60f";
}
.icon-shujujuzhen:before {
content: "\e69c";
}
......
frontend/src/styles/deicon/iconfont.js
浏览文件 @ 6e2dd018
This source diff could not be displayed because it is too large. You can view the blob instead.
frontend/src/styles/deicon/iconfont.json
浏览文件 @ 6e2dd018
......@@ -5,6 +5,20 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "3229030",
"name": "超链接",
"font_class": "chaolianjie",
"unicode": "e9b2",
"unicode_decimal": 59826
},
{
"icon_id": "23880814",
"name": "科学技术",
"font_class": "kexuejishu",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "1766500",
"name": "符号-数据矩阵",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论