lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改定时任务、表单构建样式

meizhou
selia-zx 6 months ago
parent
11d131c3ec
commit
a74c3ad306
4 changed files with 327 additions and 242 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      src/assets/styles/element-ui.scss
  2. 40
      src/components/Crontab/index.vue
  3. 7
      src/views/monitor/job/index.vue
  4. 485
      src/views/tool/build/index.vue

31
src/assets/styles/element-ui.scss
Unescape View File

@ -1382,3 +1382,34 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.el-tabs--border-card {
background: transparent;
border: 1px solid #0e5191 !important;
}
.el-tabs--border-card > .el-tabs__header {
background-color: transparent;
border-bottom: 1px solid #00386d;
}
.popup-main {
background: transparent !important;
}
.popup-result {
border: 1px solid #0e5191 !important;
}
.popup-result table span{
border: 1px solid #0e5191 !important;
}
.popup-result .title{
background: #405e7e !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
color: #fff !important;
border-right-color: transparent;
border-left-color: transparent;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item{
color: #c3cbd4;
}
.drawing-item:hover > .el-form-item, .drawing-row-item:hover > .el-form-item {
background: #b6b6b6 !important;
}

40
src/components/Crontab/index.vue
Unescape View File

@ -70,33 +70,33 @@
<p class="title">时间表达式</p> <p class="title">时间表达式</p>
<table> <table>
<thead> <thead>
<th v-for="item of tabTitles" width="40" :key="item">{{item}}</th> <th v-for="item of tabTitles" width="40" :key="item">{{ item }}</th>
<th>Cron 表达式</th> <th>Cron 表达式</th>
</thead> </thead>
<tbody> <tbody>
<td> <td>
<span>{{crontabValueObj.second}}</span> <span>{{ crontabValueObj.second }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.min}}</span> <span>{{ crontabValueObj.min }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.hour}}</span> <span>{{ crontabValueObj.hour }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.day}}</span> <span>{{ crontabValueObj.day }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.month}}</span> <span>{{ crontabValueObj.month }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.week}}</span> <span>{{ crontabValueObj.week }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueObj.year}}</span> <span>{{ crontabValueObj.year }}</span>
</td> </td>
<td> <td>
<span>{{crontabValueString}}</span> <span>{{ crontabValueString }}</span>
</td> </td>
</tbody> </tbody>
</table> </table>
@ -104,9 +104,21 @@
<CrontabResult :ex="crontabValueString"></CrontabResult> <CrontabResult :ex="crontabValueString"></CrontabResult>
<div class="pop_btn"> <div class="pop_btn">
<el-button size="small" type="primary" @click="submitFill">确定</el-button> <div class="primary-btn">
<el-button size="small" type="warning" @click="clearCron">重置</el-button> <el-button size="small" type="primary" @click="submitFill"
<el-button size="small" @click="hidePopup">取消</el-button> >确定</el-button
>
</div>
<div class="warning-btn">
<el-button size="small" type="warning" @click="clearCron"
>重置</el-button
>
</div>
<div class="cancel-btn">
<el-button size="small" type="cancel" @click="hidePopup"
>取消</el-button
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -329,7 +341,7 @@ export default {
}, },
}, },
computed: { computed: {
crontabValueString: function() { crontabValueString: function () {
let obj = this.crontabValueObj; let obj = this.crontabValueObj;
let str = let str =
obj.second + obj.second +
@ -363,7 +375,7 @@ export default {
// 隐藏部分组件 // 隐藏部分组件
}, },
}, },
mounted: function() { mounted: function () {
this.resolveExp(); this.resolveExp();
}, },
}; };

7
src/views/monitor/job/index.vue
Unescape View File

@ -285,16 +285,17 @@
<el-col :span="24"> <el-col :span="24">
<el-form-item label="cron表达式" prop="cronExpression"> <el-form-item label="cron表达式" prop="cronExpression">
<el-input <el-input
style="width: 76%"
v-model="form.cronExpression" v-model="form.cronExpression"
placeholder="请输入cron执行表达式" placeholder="请输入cron执行表达式"
> >
<template slot="append"> </el-input>
<div class="primary-btn">
<el-button type="primary" @click="handleShowCron"> <el-button type="primary" @click="handleShowCron">
生成表达式 生成表达式
<i class="el-icon-time el-icon--right"></i> <i class="el-icon-time el-icon--right"></i>
</el-button> </el-button>
</template> </div>
</el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" v-if="form.jobId !== undefined"> <el-col :span="24" v-if="form.jobId !== undefined">

485
src/views/tool/build/index.vue
Unescape View File

@ -2,9 +2,7 @@
<div class="container"> <div class="container">
<div class="left-board"> <div class="left-board">
<div class="logo-wrapper"> <div class="logo-wrapper">
<div class="logo"> <div class="logo"><img :src="logo" alt="logo" /> Form Generator</div>
<img :src="logo" alt="logo"> Form Generator
</div>
</div> </div>
<el-scrollbar class="left-scrollbar"> <el-scrollbar class="left-scrollbar">
<div class="components-list"> <div class="components-list">
@ -21,7 +19,9 @@
@end="onEnd" @end="onEnd"
> >
<div <div
v-for="(element, index) in inputComponents" :key="index" class="components-item" v-for="(element, index) in inputComponents"
:key="index"
class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -58,12 +58,18 @@
<svg-icon icon-class="component" /> 布局型组件 <svg-icon icon-class="component" /> 布局型组件
</div> </div>
<draggable <draggable
class="components-draggable" :list="layoutComponents" class="components-draggable"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }" :clone="cloneComponent" :list="layoutComponents"
draggable=".components-item" :sort="false" @end="onEnd" :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
> >
<div <div
v-for="(element, index) in layoutComponents" :key="index" class="components-item" v-for="(element, index) in layoutComponents"
:key="index"
class="components-item"
@click="addComponent(element)" @click="addComponent(element)"
> >
<div class="components-body"> <div class="components-body">
@ -81,10 +87,20 @@
<el-button icon="el-icon-download" type="text" @click="download"> <el-button icon="el-icon-download" type="text" @click="download">
导出vue文件 导出vue文件
</el-button> </el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy"> <el-button
class="copy-btn-main"
icon="el-icon-document-copy"
type="text"
@click="copy"
>
复制代码 复制代码
</el-button> </el-button>
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty"> <el-button
class="delete-btn"
icon="el-icon-delete"
type="text"
@click="empty"
>
清空 清空
</el-button> </el-button>
</div> </div>
@ -96,7 +112,12 @@
:disabled="formConf.disabled" :disabled="formConf.disabled"
:label-width="formConf.labelWidth + 'px'" :label-width="formConf.labelWidth + 'px'"
> >
<draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup"> <draggable
class="drawing-board"
:list="drawingList"
:animation="340"
group="componentsGroup"
>
<draggable-item <draggable-item
v-for="(element, index) in drawingList" v-for="(element, index) in drawingList"
:key="element.renderKey" :key="element.renderKey"
@ -131,28 +152,38 @@
:show-file-name="showFileName" :show-file-name="showFileName"
@confirm="generate" @confirm="generate"
/> />
<input id="copyNode" type="hidden"> <input id="copyNode" type="hidden" />
</div> </div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable' import draggable from "vuedraggable";
import beautifier from 'js-beautify' import beautifier from "js-beautify";
import ClipboardJS from 'clipboard' import ClipboardJS from "clipboard";
import render from '@/utils/generator/render' import render from "@/utils/generator/render";
import RightPanel from './RightPanel' import RightPanel from "./RightPanel";
import { inputComponents, selectComponents, layoutComponents, formConf } from '@/utils/generator/config' import {
import { beautifierConf, titleCase } from '@/utils/index' inputComponents,
import { makeUpHtml, vueTemplate, vueScript, cssStyle } from '@/utils/generator/html' selectComponents,
import { makeUpJs } from '@/utils/generator/js' layoutComponents,
import { makeUpCss } from '@/utils/generator/css' formConf,
import drawingDefault from '@/utils/generator/drawingDefault' } from "@/utils/generator/config";
import logo from '@/assets/logo/logo.png' import { beautifierConf, titleCase } from "@/utils/index";
import CodeTypeDialog from './CodeTypeDialog' import {
import DraggableItem from './DraggableItem' makeUpHtml,
vueTemplate,
vueScript,
cssStyle,
} from "@/utils/generator/html";
import { makeUpJs } from "@/utils/generator/js";
import { makeUpCss } from "@/utils/generator/css";
import drawingDefault from "@/utils/generator/drawingDefault";
import logo from "@/assets/logo/logo.png";
import CodeTypeDialog from "./CodeTypeDialog";
import DraggableItem from "./DraggableItem";
let oldActiveId let oldActiveId;
let tempActiveData let tempActiveData;
export default { export default {
components: { components: {
@ -160,7 +191,7 @@ export default {
render, render,
RightPanel, RightPanel,
CodeTypeDialog, CodeTypeDialog,
DraggableItem DraggableItem,
}, },
data() { data() {
return { return {
@ -179,208 +210,214 @@ export default {
dialogVisible: false, dialogVisible: false,
generateConf: null, generateConf: null,
showFileName: false, showFileName: false,
activeData: drawingDefault[0] activeData: drawingDefault[0],
} };
}, },
created() { created() {
// 防止 firefox 下 拖拽 会新打卡一个选项卡 // 防止 firefox 下 拖拽 会新打卡一个选项卡
document.body.ondrop = event => { document.body.ondrop = (event) => {
event.preventDefault() event.preventDefault();
event.stopPropagation() event.stopPropagation();
} };
}, },
watch: { watch: {
// eslint-disable-next-line func-names // eslint-disable-next-line func-names
'activeData.label': function (val, oldVal) { "activeData.label": function (val, oldVal) {
if ( if (
this.activeData.placeholder === undefined this.activeData.placeholder === undefined ||
|| !this.activeData.tag !this.activeData.tag ||
|| oldActiveId !== this.activeId oldActiveId !== this.activeId
) { ) {
return return;
} }
this.activeData.placeholder = this.activeData.placeholder.replace(oldVal, '') + val this.activeData.placeholder =
this.activeData.placeholder.replace(oldVal, "") + val;
}, },
activeId: { activeId: {
handler(val) { handler(val) {
oldActiveId = val oldActiveId = val;
},
immediate: true,
}, },
immediate: true
}
}, },
mounted() { mounted() {
const clipboard = new ClipboardJS('#copyNode', { const clipboard = new ClipboardJS("#copyNode", {
text: trigger => { text: (trigger) => {
const codeStr = this.generateCode() const codeStr = this.generateCode();
this.$notify({ this.$notify({
title: '成功', title: "成功",
message: '代码已复制到剪切板，可粘贴。', message: "代码已复制到剪切板，可粘贴。",
type: 'success' type: "success",
}) });
return codeStr return codeStr;
} },
}) });
clipboard.on('error', e => { clipboard.on("error", (e) => {
this.$message.error('代码复制失败') this.$message.error("代码复制失败");
}) });
}, },
methods: { methods: {
activeFormItem(element) { activeFormItem(element) {
this.activeData = element this.activeData = element;
this.activeId = element.formId this.activeId = element.formId;
}, },
onEnd(obj, a) { onEnd(obj, a) {
if (obj.from !== obj.to) { if (obj.from !== obj.to) {
this.activeData = tempActiveData this.activeData = tempActiveData;
this.activeId = this.idGlobal this.activeId = this.idGlobal;
} }
}, },
addComponent(item) { addComponent(item) {
const clone = this.cloneComponent(item) const clone = this.cloneComponent(item);
this.drawingList.push(clone) this.drawingList.push(clone);
this.activeFormItem(clone) this.activeFormItem(clone);
}, },
cloneComponent(origin) { cloneComponent(origin) {
const clone = JSON.parse(JSON.stringify(origin)) const clone = JSON.parse(JSON.stringify(origin));
clone.formId = ++this.idGlobal clone.formId = ++this.idGlobal;
clone.span = formConf.span clone.span = formConf.span;
clone.renderKey = +new Date() // 改变renderKey后可以实现强制更新组件 clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
if (!clone.layout) clone.layout = 'colFormItem' if (!clone.layout) clone.layout = "colFormItem";
if (clone.layout === 'colFormItem') { if (clone.layout === "colFormItem") {
clone.vModel = `field${this.idGlobal}` clone.vModel = `field${this.idGlobal}`;
clone.placeholder !== undefined && (clone.placeholder += clone.label) clone.placeholder !== undefined && (clone.placeholder += clone.label);
tempActiveData = clone tempActiveData = clone;
} else if (clone.layout === 'rowFormItem') { } else if (clone.layout === "rowFormItem") {
delete clone.label delete clone.label;
clone.componentName = `row${this.idGlobal}` clone.componentName = `row${this.idGlobal}`;
clone.gutter = this.formConf.gutter clone.gutter = this.formConf.gutter;
tempActiveData = clone tempActiveData = clone;
} }
return tempActiveData return tempActiveData;
}, },
AssembleFormData() { AssembleFormData() {
this.formData = { this.formData = {
fields: JSON.parse(JSON.stringify(this.drawingList)), fields: JSON.parse(JSON.stringify(this.drawingList)),
...this.formConf ...this.formConf,
} };
}, },
generate(data) { generate(data) {
const func = this[`exec${titleCase(this.operationType)}`] const func = this[`exec${titleCase(this.operationType)}`];
this.generateConf = data this.generateConf = data;
func && func(data) func && func(data);
}, },
execRun(data) { execRun(data) {
this.AssembleFormData() this.AssembleFormData();
this.drawerVisible = true this.drawerVisible = true;
}, },
execDownload(data) { execDownload(data) {
const codeStr = this.generateCode() const codeStr = this.generateCode();
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' }) const blob = new Blob([codeStr], { type: "text/plain;charset=utf-8" });
this.$download.saveAs(blob, data.fileName) this.$download.saveAs(blob, data.fileName);
}, },
execCopy(data) { execCopy(data) {
document.getElementById('copyNode').click() document.getElementById("copyNode").click();
}, },
empty() { empty() {
this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then( this.$confirm("确定要清空所有组件吗？", "提示", { type: "warning" }).then(
() => { () => {
this.drawingList = [] this.drawingList = [];
} }
) );
}, },
drawingItemCopy(item, parent) { drawingItemCopy(item, parent) {
let clone = JSON.parse(JSON.stringify(item)) let clone = JSON.parse(JSON.stringify(item));
clone = this.createIdAndKey(clone) clone = this.createIdAndKey(clone);
parent.push(clone) parent.push(clone);
this.activeFormItem(clone) this.activeFormItem(clone);
}, },
createIdAndKey(item) { createIdAndKey(item) {
item.formId = ++this.idGlobal item.formId = ++this.idGlobal;
item.renderKey = +new Date() item.renderKey = +new Date();
if (item.layout === 'colFormItem') { if (item.layout === "colFormItem") {
item.vModel = `field${this.idGlobal}` item.vModel = `field${this.idGlobal}`;
} else if (item.layout === 'rowFormItem') { } else if (item.layout === "rowFormItem") {
item.componentName = `row${this.idGlobal}` item.componentName = `row${this.idGlobal}`;
} }
if (Array.isArray(item.children)) { if (Array.isArray(item.children)) {
item.children = item.children.map(childItem => this.createIdAndKey(childItem)) item.children = item.children.map((childItem) =>
this.createIdAndKey(childItem)
);
} }
return item return item;
}, },
drawingItemDelete(index, parent) { drawingItemDelete(index, parent) {
parent.splice(index, 1) parent.splice(index, 1);
this.$nextTick(() => { this.$nextTick(() => {
const len = this.drawingList.length const len = this.drawingList.length;
if (len) { if (len) {
this.activeFormItem(this.drawingList[len - 1]) this.activeFormItem(this.drawingList[len - 1]);
} }
}) });
}, },
generateCode() { generateCode() {
const { type } = this.generateConf const { type } = this.generateConf;
this.AssembleFormData() this.AssembleFormData();
const script = vueScript(makeUpJs(this.formData, type)) const script = vueScript(makeUpJs(this.formData, type));
const html = vueTemplate(makeUpHtml(this.formData, type)) const html = vueTemplate(makeUpHtml(this.formData, type));
const css = cssStyle(makeUpCss(this.formData)) const css = cssStyle(makeUpCss(this.formData));
return beautifier.html(html + script + css, beautifierConf.html) return beautifier.html(html + script + css, beautifierConf.html);
}, },
download() { download() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = true this.showFileName = true;
this.operationType = 'download' this.operationType = "download";
}, },
run() { run() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = false this.showFileName = false;
this.operationType = 'run' this.operationType = "run";
}, },
copy() { copy() {
this.dialogVisible = true this.dialogVisible = true;
this.showFileName = false this.showFileName = false;
this.operationType = 'copy' this.operationType = "copy";
}, },
tagChange(newTag) { tagChange(newTag) {
newTag = this.cloneComponent(newTag) newTag = this.cloneComponent(newTag);
newTag.vModel = this.activeData.vModel newTag.vModel = this.activeData.vModel;
newTag.formId = this.activeId newTag.formId = this.activeId;
newTag.span = this.activeData.span newTag.span = this.activeData.span;
delete this.activeData.tag delete this.activeData.tag;
delete this.activeData.tagIcon delete this.activeData.tagIcon;
delete this.activeData.document delete this.activeData.document;
Object.keys(newTag).forEach(key => { Object.keys(newTag).forEach((key) => {
if (this.activeData[key] !== undefined if (
&& typeof this.activeData[key] === typeof newTag[key]) { this.activeData[key] !== undefined &&
newTag[key] = this.activeData[key] typeof this.activeData[key] === typeof newTag[key]
} ) {
}) newTag[key] = this.activeData[key];
this.activeData = newTag }
this.updateDrawingList(newTag, this.drawingList) });
this.activeData = newTag;
this.updateDrawingList(newTag, this.drawingList);
}, },
updateDrawingList(newTag, list) { updateDrawingList(newTag, list) {
const index = list.findIndex(item => item.formId === this.activeId) const index = list.findIndex((item) => item.formId === this.activeId);
if (index > -1) { if (index > -1) {
list.splice(index, 1, newTag) list.splice(index, 1, newTag);
} else { } else {
list.forEach(item => { list.forEach((item) => {
if (Array.isArray(item.children)) this.updateDrawingList(newTag, item.children) if (Array.isArray(item.children))
}) this.updateDrawingList(newTag, item.children);
} });
}
} }
} },
},
};
</script> </script>
<style lang='scss'> <style lang="scss">
.editor-tabs{ .editor-tabs {
background: #121315; background: #121315;
.el-tabs__header{ .el-tabs__header {
margin: 0; margin: 0;
border-bottom-color: #121315; border-bottom-color: #121315;
.el-tabs__nav{ .el-tabs__nav {
border-color: #121315; border-color: #121315;
} }
} }
.el-tabs__item{ .el-tabs__item {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
color: #888a8e; color: #888a8e;
@ -389,15 +426,15 @@ export default {
margin-right: 5px; margin-right: 5px;
user-select: none; user-select: none;
} }
.el-tabs__item.is-active{ .el-tabs__item.is-active {
background: #1e1e1e; background: #1e1e1e;
border-bottom-color: #1e1e1e!important; border-bottom-color: #1e1e1e !important;
color: #fff; color: #fff;
} }
.el-icon-edit{ .el-icon-edit {
color: #f1fa8c; color: #f1fa8c;
} }
.el-icon-document{ .el-icon-document {
color: #a95812; color: #a95812;
} }
} }
@ -413,24 +450,24 @@ export default {
overflow-x: hidden !important; overflow-x: hidden !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.center-tabs{ .center-tabs {
.el-tabs__header{ .el-tabs__header {
margin-bottom: 0!important; margin-bottom: 0 !important;
} }
.el-tabs__item{ .el-tabs__item {
width: 50%; width: 50%;
text-align: center; text-align: center;
} }
.el-tabs__nav{ .el-tabs__nav {
width: 100%; width: 100%;
} }
} }
.reg-item{ .reg-item {
padding: 12px 6px; padding: 12px 6px;
background: #f8f8f8; background: #f8f8f8;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
.close-btn{ .close-btn {
position: absolute; position: absolute;
right: -6px; right: -6px;
top: -6px; top: -6px;
@ -445,16 +482,16 @@ export default {
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
&:hover{ &:hover {
background: rgba(210, 23, 23, 0.5) background: rgba(210, 23, 23, 0.5);
} }
} }
& + .reg-item{ & + .reg-item {
margin-top: 18px; margin-top: 18px;
} }
} }
.action-bar{ .action-bar {
& .el-button+.el-button { & .el-button + .el-button {
margin-left: 15px; margin-left: 15px;
} }
& i { & i {
@ -465,37 +502,37 @@ export default {
} }
} }
.custom-tree-node{ .custom-tree-node {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
.node-operation{ .node-operation {
float: right; float: right;
} }
i[class*="el-icon"] + i[class*="el-icon"]{ i[class*="el-icon"] + i[class*="el-icon"] {
margin-left: 6px; margin-left: 6px;
} }
.el-icon-plus{ .el-icon-plus {
color: #409EFF; color: #409eff;
} }
.el-icon-delete{ .el-icon-delete {
color: #157a0c; color: #157a0c;
} }
} }
.left-scrollbar .el-scrollbar__view{ .left-scrollbar .el-scrollbar__view {
overflow-x: hidden; overflow-x: hidden;
} }
.el-rate{ .el-rate {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
} }
.el-upload__tip{ .el-upload__tip {
line-height: 1.2; line-height: 1.2;
} }
$selectedColor: #f6f7ff; $selectedColor: #f6f7ff;
$lighterBlue: #409EFF; $lighterBlue: #409eff;
.container { .container {
position: relative; position: relative;
@ -514,14 +551,14 @@ $lighterBlue: #409EFF;
transition: transform 0ms !important; transition: transform 0ms !important;
} }
} }
.components-draggable{ .components-draggable {
padding-bottom: 20px; padding-bottom: 20px;
} }
.components-title{ .components-title {
font-size: 14px; font-size: 14px;
color: #ffffff; color: #ffffff;
margin: 6px 2px; margin: 6px 2px;
.svg-icon{ .svg-icon {
color: #666; color: #666;
font-size: 18px; font-size: 18px;
} }
@ -534,7 +571,7 @@ $lighterBlue: #409EFF;
cursor: move; cursor: move;
border: 1px dashed #436efc; border: 1px dashed #436efc;
border-radius: 3px; border-radius: 3px;
.svg-icon{ .svg-icon {
color: #777; color: #777;
font-size: 15px; font-size: 15px;
} }
@ -554,15 +591,15 @@ $lighterBlue: #409EFF;
top: 0; top: 0;
height: 100vh; height: 100vh;
} }
.left-scrollbar{ .left-scrollbar {
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
} }
.center-scrollbar { .center-scrollbar {
height: calc(100vh - 42px); height: calc(100vh - 42px);
overflow: hidden; overflow: hidden;
border-left: 1px solid #f1e8e8; border-left: 1px solid #0e5191;
border-right: 1px solid #f1e8e8; border-left: 1px solid #0e5191;
box-sizing: border-box; box-sizing: border-box;
} }
.center-board { .center-board {
@ -571,7 +608,7 @@ $lighterBlue: #409EFF;
margin: 0 350px 0 260px; margin: 0 350px 0 260px;
box-sizing: border-box; box-sizing: border-box;
} }
.empty-info{ .empty-info {
position: absolute; position: absolute;
top: 46%; top: 46%;
left: 0; left: 0;
@ -581,27 +618,27 @@ $lighterBlue: #409EFF;
color: #ccb1ea; color: #ccb1ea;
letter-spacing: 4px; letter-spacing: 4px;
} }
.action-bar{ .action-bar {
position: relative; position: relative;
height: 42px; height: 42px;
text-align: right; text-align: right;
padding: 0 15px; padding: 0 15px;
box-sizing: border-box;; box-sizing: border-box;
border: 1px solid #f1e8e8; border: 1px solid #0e5191;
border-top: none; border-top: none;
border-left: none; border-left: none;
.delete-btn{ .delete-btn {
color: #F56C6C; color: #f56c6c;
} }
} }
.logo-wrapper{ .logo-wrapper {
position: relative; position: relative;
height: 42px; height: 42px;
background: #4b6e91; background: #4b6e91;
border-bottom: 1px solid #f1e8e8; border-bottom: 1px solid #0e5191;
box-sizing: border-box; box-sizing: border-box;
} }
.logo{ .logo {
position: absolute; position: absolute;
left: 12px; left: 12px;
top: 6px; top: 6px;
@ -610,16 +647,16 @@ $lighterBlue: #409EFF;
font-weight: 600; font-weight: 600;
font-size: 17px; font-size: 17px;
white-space: nowrap; white-space: nowrap;
> img{ > img {
width: 30px; width: 30px;
height: 30px; height: 30px;
vertical-align: top; vertical-align: top;
} }
.github{ .github {
display: inline-block; display: inline-block;
vertical-align: sub; vertical-align: sub;
margin-left: 15px; margin-left: 15px;
> img{ > img {
height: 22px; height: 22px;
} }
} }
@ -662,32 +699,33 @@ $lighterBlue: #409EFF;
background-color: $selectedColor; background-color: $selectedColor;
} }
.active-from-item { .active-from-item {
& > .el-form-item{ & > .el-form-item {
background: #4b6e91; background: #4b6e91;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: initial; display: initial;
} }
& > .component-name{ & > .component-name {
color: $lighterBlue; color: $lighterBlue;
} }
} }
.el-form-item{ .el-form-item {
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
.drawing-item{ .drawing-item {
position: relative; position: relative;
cursor: move; cursor: move;
&.unfocus-bordered:not(.activeFromItem) > div:first-child { &.unfocus-bordered:not(.activeFromItem) > div:first-child {
border: 1px dashed #ccc; border: 1px dashed #ccc;
} }
.el-form-item{ .el-form-item {
padding: 12px 10px; padding: 12px 10px;
} }
} }
.drawing-row-item{ .drawing-row-item {
position: relative; position: relative;
cursor: move; cursor: move;
box-sizing: border-box; box-sizing: border-box;
@ -698,19 +736,19 @@ $lighterBlue: #409EFF;
.drawing-row-item { .drawing-row-item {
margin-bottom: 2px; margin-bottom: 2px;
} }
.el-col{ .el-col {
margin-top: 22px; margin-top: 22px;
} }
.el-form-item{ .el-form-item {
margin-bottom: 0; margin-bottom: 0;
} }
.drag-wrapper{ .drag-wrapper {
min-height: 80px; min-height: 80px;
} }
&.active-from-item{ &.active-from-item {
border: 1px dashed $lighterBlue; border: 1px dashed $lighterBlue;
} }
.component-name{ .component-name {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -720,17 +758,20 @@ $lighterBlue: #409EFF;
padding: 0 6px; padding: 0 6px;
} }
} }
.drawing-item, .drawing-row-item{ .drawing-item,
.drawing-row-item {
&:hover { &:hover {
& > .el-form-item{ & > .el-form-item {
background: $selectedColor; background: $selectedColor;
border-radius: 6px; border-radius: 6px;
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: initial; display: initial;
} }
} }
& > .drawing-item-copy, & > .drawing-item-delete{ & > .drawing-item-copy,
& > .drawing-item-delete {
display: none; display: none;
position: absolute; position: absolute;
top: -10px; top: -10px;
@ -744,29 +785,29 @@ $lighterBlue: #409EFF;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
} }
& > .drawing-item-copy{ & > .drawing-item-copy {
right: 56px; right: 56px;
border-color: $lighterBlue; border-color: $lighterBlue;
color: $lighterBlue; color: $lighterBlue;
background: #fff; background: #fff;
&:hover{ &:hover {
background: $lighterBlue; background: $lighterBlue;
color: #fff; color: #fff;
} }
} }
& > .drawing-item-delete{ & > .drawing-item-delete {
right: 24px; right: 24px;
border-color: #F56C6C; border-color: #f56c6c;
color: #F56C6C; color: #f56c6c;
background: #fff; background: #fff;
&:hover{ &:hover {
background: #F56C6C; background: #f56c6c;
color: #fff; color: #fff;
} }
} }
} }
.delete-btn::before, .delete-btn::before,
.delete-btn::after{ .delete-btn::after {
display: none !important; display: none !important;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save