forked from github/dataease
feat:恢复样式
This commit is contained in:
wangjiahao
parent
c7d24c341d
commit
208878c062
@ -1,29 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="toolbar">
|
||||
|
||||
<el-tooltip content="撤消">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle @click="undo" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="重做">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="插入图片">
|
||||
<el-button class="el-icon-refresh-left" for="input" size="mini" circle />
|
||||
<input id="input" type="file" hidden @change="handleFileChange">
|
||||
</el-tooltip>
|
||||
<el-tooltip content="预览">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle @click="preview" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="清空">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle @click="clearCanvas" />
|
||||
</el-tooltip>
|
||||
<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>
|
||||
<el-button @click="undo">撤消</el-button>
|
||||
<el-button @click="redo">重做</el-button>
|
||||
<label for="input" class="insert">插入图片</label>
|
||||
<input id="input" type="file" hidden @change="handleFileChange">
|
||||
<el-button style="margin-left: 10px;" @click="preview">预览</el-button>
|
||||
<el-button @click="save">保存</el-button>
|
||||
<el-button @click="clearCanvas">清空画布</el-button>
|
||||
<div class="canvas-config">
|
||||
<span>画布大小</span>
|
||||
<input v-model="canvasStyleData.width">
|
||||
<span>*</span>
|
||||
<input v-model="canvasStyleData.height">
|
||||
</div>
|
||||
<div class="canvas-config">
|
||||
<span>画布比例</span>
|
||||
<input v-model="scale" @input="handleScaleChange"> %
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预览 -->
|
||||
@ -193,62 +187,62 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.toolbar {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
.toolbar {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.canvas-config {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
|
||||
input {
|
||||
width: 50px;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
padding: 0 5px;
|
||||
border: 1px solid #ddd;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 50px;
|
||||
margin-left: 10px;
|
||||
outline: none;
|
||||
padding: 0 5px;
|
||||
border: 1px solid #ddd;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.insert {
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #FFF;
|
||||
border: 1px solid #DCDFE6;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: #FFF;
|
||||
border: 1px solid #DCDFE6;
|
||||
color: #606266;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
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;
|
||||
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 {
|
||||
background-color: #ecf5ff;
|
||||
color: #3a8ee6;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #ecf5ff;
|
||||
color: #3a8ee6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -54,4 +54,7 @@ export default {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.chart-class{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,10 +17,6 @@ import directives from './directive'
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
|
||||
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.use(VueClipboard)
|
||||
|
||||
|
||||
@ -3,30 +3,29 @@
|
||||
<!-- <de-header>Header</de-header> -->
|
||||
<el-header class="de-header">
|
||||
<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 style="float: right;line-height: 35px;">
|
||||
<Toolbar />
|
||||
<!-- <span style="float: right;line-height: 35px;">-->
|
||||
|
||||
<el-tooltip content="返回目录">
|
||||
<el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip content="返回目录">-->
|
||||
<!-- <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<el-tooltip content="背景图">
|
||||
<el-button class="el-icon-full-screen" size="mini" circle />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip content="背景图">-->
|
||||
<!-- <el-button class="el-icon-full-screen" size="mini" circle />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<el-tooltip content="保存">
|
||||
<el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip content="保存">-->
|
||||
<!-- <el-button class="el-icon-circle-check" size="mini" circle @click="saveDrawing" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<el-tooltip content="预览">
|
||||
<el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
|
||||
</el-tooltip>
|
||||
<!-- <el-tooltip content="预览">-->
|
||||
<!-- <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
</span>
|
||||
<!-- </span>-->
|
||||
</el-row>
|
||||
</el-header>
|
||||
<de-container>
|
||||
@ -113,6 +112,13 @@ import componentList from '@/custom-component/component-list' // 左侧列表数
|
||||
import { listenGlobalKeyDown } from '@/utils/shortcutKey'
|
||||
import { mapState } from 'vuex'
|
||||
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 {
|
||||
components: {
|
||||
@ -121,7 +127,8 @@ export default {
|
||||
DeAsideContainer,
|
||||
FilterGroup,
|
||||
ViewSelect,
|
||||
Editor
|
||||
Editor,
|
||||
Toolbar
|
||||
|
||||
},
|
||||
data() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user