Skip to content

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

feat:恢复样式

上级 c7d24c34
隐藏空白字符变更
内嵌 并排
正在显示 包含 91 行增加 和 91 行删除
frontend/src/components/Toolbar.vue
浏览文件 @ 208878c0
<template> <template>
<div> <div>
<div class="toolbar"> <div class="toolbar">
<el-button @click="undo">撤消</el-button>
<el-tooltip content="撤消"> <el-button @click="redo">重做</el-button>
<el-button class="el-icon-refresh-left" size="mini" circle @click="undo" /> <label for="input" class="insert">插入图片</label>
</el-tooltip> <input id="input" type="file" hidden @change="handleFileChange">
<el-tooltip content="重做"> <el-button style="margin-left: 10px;" @click="preview">预览</el-button>
<el-button class="el-icon-refresh-left" size="mini" circle @click="redo" /> <el-button @click="save">保存</el-button>
</el-tooltip> <el-button @click="clearCanvas">清空画布</el-button>
<el-tooltip content="插入图片"> <div class="canvas-config">
<el-button class="el-icon-refresh-left" for="input" size="mini" circle /> <span>画布大小</span>
<input id="input" type="file" hidden @change="handleFileChange"> <input v-model="canvasStyleData.width">
</el-tooltip> <span>*</span>
<el-tooltip content="预览"> <input v-model="canvasStyleData.height">
<el-button class="el-icon-refresh-left" size="mini" circle @click="preview" /> </div>
</el-tooltip> <div class="canvas-config">
<el-tooltip content="清空"> <span>画布比例</span>
<el-button class="el-icon-refresh-left" size="mini" circle @click="clearCanvas" /> <input v-model="scale" @input="handleScaleChange"> %
</el-tooltip> </div>
<el-tooltip content="保存">
<el-button class="el-icon-circle-check" size="mini" circle @click="save" />
</el-tooltip>
<el-tooltip content="预览">
<el-button class="el-icon-view" size="mini" circle @click="preview" />
</el-tooltip>
</div> </div>
<!-- 预览 --> <!-- 预览 -->
...@@ -193,62 +187,62 @@ export default { ...@@ -193,62 +187,62 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.toolbar { .toolbar {
height: 35px; height: 50px;
line-height: 35px; line-height: 50px;
background: #fff; background: #fff;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
.canvas-config { .canvas-config {
display: inline-block; display: inline-block;
margin-left: 10px;
font-size: 14px;
color: #606266;
input {
width: 50px;
margin-left: 10px; margin-left: 10px;
font-size: 14px; outline: none;
padding: 0 5px;
border: 1px solid #ddd;
color: #606266; color: #606266;
}
input { span {
width: 50px; margin-left: 10px;
margin-left: 10px; }
outline: none;
padding: 0 5px;
border: 1px solid #ddd;
color: #606266;
}
span {
margin-left: 10px;
}
} }
.insert { .insert {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
background: #FFF; background: #FFF;
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
color: #606266; color: #606266;
-webkit-appearance: none; -webkit-appearance: none;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
outline: 0;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
margin-left: 10px;
&:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0; outline: 0;
margin: 0; }
transition: .1s;
font-weight: 500;
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
margin-left: 10px;
&:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0;
}
&:hover { &:hover {
background-color: #ecf5ff; background-color: #ecf5ff;
color: #3a8ee6; color: #3a8ee6;
} }
} }
} }
</style> </style>
frontend/src/custom-component/UserView.vue
浏览文件 @ 208878c0
<template> <template>
<div class="rect-shape"> <div class="rect-shape">
<chart-component v-if="showCard" :ref="element.propValue.id" :chart-id="element.propValue.id" :chart="chart" /> <chart-component v-if="showCard" :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
</div> </div>
</template> </template>
...@@ -54,4 +54,7 @@ export default { ...@@ -54,4 +54,7 @@ export default {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.chart-class{
height: 100%;
}
</style> </style>
frontend/src/main.js
浏览文件 @ 208878c0
...@@ -17,10 +17,6 @@ import directives from './directive' ...@@ -17,10 +17,6 @@ import directives from './directive'
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'
import '@/custom-component' // 注册自定义组件 import '@/custom-component' // 注册自定义组件
import '@/assets/iconfont/iconfont.css'
import '@/styles/animate.css'
import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/reset.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueClipboard) Vue.use(VueClipboard)
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ 208878c0
...@@ -3,30 +3,29 @@ ...@@ -3,30 +3,29 @@
<!-- <de-header>Header</de-header> --> <!-- <de-header>Header</de-header> -->
<el-header class="de-header"> <el-header class="de-header">
<el-row class="panel-design-head"> <el-row class="panel-design-head">
<span style="float: left;line-height: 35px; color: gray"> <span style="float: left;line-height: 50px; color: gray">
<span>名称：测试仪表板</span> <span>名称：测试仪表板</span>
</span> </span>
<span style="float: right;line-height: 35px;"> <Toolbar />
<!-- <span style="float: right;line-height: 35px;">-->
<el-tooltip content="返回目录"> <!-- <el-tooltip content="返回目录">-->
<el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" /> <!-- <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />-->
</el-tooltip> <!-- </el-tooltip>-->
<el-tooltip content="背景图"> <!-- <el-tooltip content="背景图">-->
<el-button class="el-icon-full-screen" size="mini" circle /> <!-- <el-button class="el-icon-full-screen" size="mini" circle />-->
</el-tooltip> <!-- </el-tooltip>-->
<el-tooltip content="保存"> <!-- <el-tooltip content="保存">-->
<el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" /> <!-- <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />-->
</el-tooltip> <!-- </el-tooltip>-->
<el-tooltip content="预览"> <!-- <el-tooltip content="预览">-->
<el-button class="el-icon-view" size="mini" circle @click="preViewShow" /> <!-- <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />-->
</el-tooltip> <!-- </el-tooltip>-->
</span> <!-- </span>-->
</el-row> </el-row>
</el-header> </el-header>
<de-container> <de-container>
...@@ -113,6 +112,13 @@ import componentList from '@/custom-component/component-list' // 左侧列表数 ...@@ -113,6 +112,13 @@ import componentList from '@/custom-component/component-list' // 左侧列表数
import { listenGlobalKeyDown } from '@/utils/shortcutKey' import { listenGlobalKeyDown } from '@/utils/shortcutKey'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { uuid } from 'vue-uuid' import { uuid } from 'vue-uuid'
import Toolbar from '@/components/Toolbar'
// 引入样式
import '@/assets/iconfont/iconfont.css'
import '@/styles/animate.css'
import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/reset.css'
export default { export default {
components: { components: {
...@@ -121,7 +127,8 @@ export default { ...@@ -121,7 +127,8 @@ export default {
DeAsideContainer, DeAsideContainer,
FilterGroup, FilterGroup,
ViewSelect, ViewSelect,
Editor Editor,
Toolbar
}, },
data() { data() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论