winter před 6 měsíci
revize
b2bbc767c9
100 změnil soubory, kde provedl 85219 přidání a 0 odebrání
  1. +12
    -0
      .editorconfig
  2. +16
    -0
      .eslintrc.js
  3. +23
    -0
      .gitignore
  4. +13
    -0
      .npmignore
  5. +19
    -0
      .vscode/launch.json
  6. +28
    -0
      .vscode/settings.json
  7. +405
    -0
      README.md
  8. +14
    -0
      babel.config.js
  9. +31
    -0
      example/App.vue
  10. +2
    -0
      example/data/defaultTemp.js
  11. +387
    -0
      example/data/options.js
  12. +77
    -0
      example/data/test.js
  13. +15
    -0
      example/index.html
  14. +35
    -0
      example/main.js
  15. +45
    -0
      example/page/designer.vue
  16. +279
    -0
      example/page/index.vue
  17. +10
    -0
      lib/demo.html
  18. binární
      lib/fonts/element-icons.535877f5.woff
  19. binární
      lib/fonts/element-icons.732389de.ttf
  20. +33688
    -0
      lib/kr-print-designer.common.js
  21. +1
    -0
      lib/kr-print-designer.common.js.map
  22. +1
    -0
      lib/kr-print-designer.css
  23. +33698
    -0
      lib/kr-print-designer.umd.js
  24. +1
    -0
      lib/kr-print-designer.umd.js.map
  25. +2
    -0
      lib/kr-print-designer.umd.min.js
  26. +1
    -0
      lib/kr-print-designer.umd.min.js.map
  27. +11949
    -0
      package-lock.json
  28. +39
    -0
      package.json
  29. +132
    -0
      src/App.vue
  30. binární
      src/assets/image/barCode.png
  31. binární
      src/assets/logo.png
  32. +15
    -0
      src/assets/style/index.scss
  33. +52
    -0
      src/components/panel/index.vue
  34. +58
    -0
      src/components/panel/layers.vue
  35. +78
    -0
      src/components/panel/options/index.vue
  36. +66
    -0
      src/components/panel/page.vue
  37. +193
    -0
      src/components/panel/style.vue
  38. +173
    -0
      src/components/viewport/index.vue
  39. +139
    -0
      src/components/viewport/size-control.vue
  40. binární
      src/components/widgets/bar-code/PDF417.png
  41. binární
      src/components/widgets/bar-code/QRCode.png
  42. binární
      src/components/widgets/bar-code/barCode.png
  43. +97
    -0
      src/components/widgets/bar-code/index.vue
  44. +60
    -0
      src/components/widgets/html/index.vue
  45. +69
    -0
      src/components/widgets/image/index.vue
  46. +30
    -0
      src/components/widgets/index.js
  47. +82
    -0
      src/components/widgets/table/index.vue
  48. +75
    -0
      src/components/widgets/txt/index.vue
  49. +69
    -0
      src/index.js
  50. +162
    -0
      src/libs/lodop/LodopFuncs.js
  51. +296
    -0
      src/libs/lodop/index.js
  52. +104
    -0
      src/libs/lodop/tools.js
  53. +28
    -0
      src/libs/props.js
  54. +49
    -0
      src/mixins/move.js
  55. +7
    -0
      src/mixins/vptd.js
  56. +121
    -0
      src/plugins/store.js
  57. +17
    -0
      src/store/actions.js
  58. +14
    -0
      src/store/index.js
  59. +165
    -0
      src/store/mutation.js
  60. +34
    -0
      src/store/state.js
  61. +26
    -0
      src/utils/offset.js
  62. +1
    -0
      theme-chalk/alert.css
  63. +1
    -0
      theme-chalk/aside.css
  64. +1
    -0
      theme-chalk/autocomplete.css
  65. +1
    -0
      theme-chalk/avatar.css
  66. +1
    -0
      theme-chalk/backtop.css
  67. +1
    -0
      theme-chalk/badge.css
  68. +1
    -0
      theme-chalk/base.css
  69. +0
    -0
      theme-chalk/breadcrumb-item.css
  70. +1
    -0
      theme-chalk/breadcrumb.css
  71. +0
    -0
      theme-chalk/button-group.css
  72. +557
    -0
      theme-chalk/button.css
  73. +626
    -0
      theme-chalk/calendar.css
  74. +1
    -0
      theme-chalk/card.css
  75. +1
    -0
      theme-chalk/carousel-item.css
  76. +1
    -0
      theme-chalk/carousel.css
  77. +1
    -0
      theme-chalk/cascader-panel.css
  78. +1
    -0
      theme-chalk/cascader.css
  79. +0
    -0
      theme-chalk/checkbox-button.css
  80. +0
    -0
      theme-chalk/checkbox-group.css
  81. +1
    -0
      theme-chalk/checkbox.css
  82. +1
    -0
      theme-chalk/col.css
  83. +0
    -0
      theme-chalk/collapse-item.css
  84. +1
    -0
      theme-chalk/collapse.css
  85. +1
    -0
      theme-chalk/color-picker.css
  86. +1
    -0
      theme-chalk/container.css
  87. +1
    -0
      theme-chalk/date-picker.css
  88. +1
    -0
      theme-chalk/dialog.css
  89. +1
    -0
      theme-chalk/display.css
  90. +1
    -0
      theme-chalk/divider.css
  91. +1
    -0
      theme-chalk/drawer.css
  92. +0
    -0
      theme-chalk/dropdown-item.css
  93. +0
    -0
      theme-chalk/dropdown-menu.css
  94. +808
    -0
      theme-chalk/dropdown.css
  95. binární
      theme-chalk/fonts/element-icons.ttf
  96. binární
      theme-chalk/fonts/element-icons.woff
  97. +1
    -0
      theme-chalk/footer.css
  98. +0
    -0
      theme-chalk/form-item.css
  99. +1
    -0
      theme-chalk/form.css
  100. +1
    -0
      theme-chalk/header.css

+ 12
- 0
.editorconfig Zobrazit soubor

@@ -0,0 +1,12 @@
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

+ 16
- 0
.eslintrc.js Zobrazit soubor

@@ -0,0 +1,16 @@
// https://eslint.org/docs/user-guide/configuring

module.exports = {
"extends": [
"standard",
"plugin:vue/recommended"
],

"rules": {
"semi": "off",
"no-new": "off",
"vue/valid-template-root": "off",
"vue/require-default-prop": "off",
"vue/require-prop-types": "off"
}
}

+ 23
- 0
.gitignore Zobrazit soubor

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
#.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

+ 13
- 0
.npmignore Zobrazit soubor

@@ -0,0 +1,13 @@
# 忽略目录
example/
dist/
src/
node_modules/
.vscode/

# 忽略指定文件
vue.config.js
babel.config.js
.eslintrc.js
.editorconfig
*.map

+ 19
- 0
.vscode/launch.json Zobrazit soubor

@@ -0,0 +1,19 @@
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
]
}

+ 28
- 0
.vscode/settings.json Zobrazit soubor

@@ -0,0 +1,28 @@
/**
项目统一格式化,禁止使用prettier,beautify格式化代码
*/
{
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.format.enable": false,
"eslint.options": {
"configFile": "./.eslintrc.js"
},
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": false,
// ----1使用prettie格式化工具----
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"printWidth": 120,
"singleQuote": true,
"semi": false,
//将>多行JSX元素放在最后一行的末尾,而不是单独放在下一行
"jsxBracketSameLine": false
}
}
}

+ 405
- 0
README.md Zobrazit soubor

@@ -0,0 +1,405 @@
# kr-print-designer

## 简介

一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。[示例](https://myliuxia.github.io/demo/kr-print-designer/index.html)

## 安装

Vue 项目中引用该组件

```
npm install kr-print-designer
```

打印功能基于 C-Lodop 打印控件,需前往[下载](http://www.lodop.net/download.html)

## 引入

main.js

```javascript
import Vue from "vue";
import KrPrintDesigner from "kr-print-designer";
import "kr-print-designer/lib/kr-print-designer.css";

Vue.use(KrPrintDesigner);
```

demo.vue

```html
<template>
<div id="app">
<kr-print-designer
:temp-value="value"
:widget-options="widgets"
:lodop-license="licenseInfo"
@save="handleSave"
/>
</div>
</template>
```

lodop 打印/预览及设置 lodop 注册信息方法使用

```javascript
// 直接打印
this.$lodop.print(temp, data);

// 预览打印内容
this.$lodop.preview(temp, data);

// 预览打印模板
this.$lodop.previewTemp(temp);

// 设置Lodop产品注册信息
this.$lodop.setLicenses(licenseInfo);
```

## Attributes

| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ---------------- | ------ | ------ |
| tempValue | 模板对象 | Object | ; |
| widgetOptions | 模板设计选项配置 | Array | [] |

### tempValue 参数详解

#### 参数示例:

```javascript
{
title: 'demo',
width: 750,
height: 550,
pageWidth: 750,
pageHeight: 550,
tempItems: [],
}
```

#### 参数说明:

tempValue 为打印模板对象, 对象中参数具体解析如下:

##### tempValue:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | ------------------ | ------ | ------ | ------ |
| title | 模板名称 | String | —— | —— |
| width | 模板宽度 | Number | —— | 750 |
| height | 模板高度 | Number | —— | 550 |
| pageWidth | 模板纸张宽度(mm) | Number | —— | 750 |
| pageHeight | 模板纸张高度(mm) | Number | —— | 550 |
| tempItems | 模板打印项内容 | Array | —— | [] |

### widgetOptions 参数详解

#### 参数示例:

```javascript
[
{
type: "braid-txt",
isEdit: true,
title: "自定义文本",
value: "自定义文本",
defaultValue: "自定义文本"
},
{
type: "braid-txt",
isEdit: false,
title: "公司名称",
value: "{公司名称}",
defaultValue: "九州科瑞",
name: "companyName"
},
{
type: "bar-code",
title: "订单编号(条码)",
value: "{orderNumber}",
defaultValue: "1234567890",
name: "orderNumber"
lodopStyle: { QRCodeVersion: '1', QRCodeErrorLevel: 'L' },
},
{
type: "braid-html",
title: "分页",
value: "{第##页/共##页}",
defaultValue:
"<font ><span tdata='pageNO'>第##页</span>/<span tdata='pageCount'>共##页</span></font>"
},
{
type: "braid-image",
title: "logo",
value: "http://192.168.7.229/syy/file/files/view/5f9fb42dabebb4049ffbd019"
},
{
type: "braid-table",
title: "商品明细",
name: "details",
value: "{details}",
defaultValue: [
{
productName: "苹果ipone11pro",
skuName: "iphone11pro256g",
specModel: "165L",
quantity: 3,
price: "12.00"
},
{
productName: "苹果ipone11pro",
skuName: "iphone11pro124g",
specModel: "165L",
quantity: 3,
price: "12.00"
}
],
columnsAttr: [
{
title: "产品名称",
value: "{产品名称}",
name: "productName"
},
{
title: "sku名称",
value: "{sku名称}",
name: "skuName"
},
{
title: "规格型号",
value: "{规格型号}",
name: "specModel"
},
{
title: "数量",
value: "{数量}",
name: "quantity"
},
{
title: "单价",
value: "{单价}",
name: "price"
}
]
}
];
```

#### 参数说明:

widgetOptions 为设计打印模板的打印项配置, 打印项有多种类型,各种打印项参数具体解析如下:

#### braid-txt

##### Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ |
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
| isEdit | 是否可编辑 | Boolean | true / false | —— |
| dragable | 是否可拖拽 | Boolean | true / false | true |
| resizable | 尺寸是否可变 | Boolean | true / false | true |
| width | 打印项宽度(px) | Number | —— | 120 |
| height | 打印项高度(px) | Number | —— | 60 |
| left | 左偏移量(px) | Number | —— | 50 |
| top | 上偏移量(px) | Number | —— | 0 |
| title | 打印项名称 | String | —— | —— |
| value | 打印项内容 | String | —— | —— |
| defaultValue | 打印项默认内容 | String | —— | —— |
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
| style | 打印项样式 | Object | —— | {} |

##### Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------ | ------- | -------------------------------------------------------------- | --------- |
| zIndex | 层级 | Number | —— | 0 |
| FontSize | 字体大小(pt) | Number | —— | 9 |
| FontColor | 字体颜色 | String | —— | "#000000" |
| Bold | 字体是否加粗 | Boolean | true / false(是 / 否) | false |
| Italic | 字体是否设置斜体 | Boolean | true / false(是 / 否) | false |
| Underline | 字体是否设置下划线 | Boolean | true / false(是 / 否) | false |
| Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | left |
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |

#### braid-image

##### Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ |
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
| isEdit | 是否可编辑 | Boolean | true / false | false |
| dragable | 是否可拖拽 | Boolean | true / false | true |
| resizable | 尺寸是否可变 | Boolean | true / false | true |
| width | 打印项宽度(px) | Number | —— | 120 |
| height | 打印项高度(px) | Number | —— | 60 |
| left | 左偏移量(px) | Number | —— | 50 |
| top | 上偏移量(px) | Number | —— | 0 |
| title | 打印项名称 | String | —— | —— |
| value | 图片路劲 | String | —— | —— |
| defaultValue | 图片默认路劲 | String | —— | —— |
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
| style | 打印项样式 | Object | —— | {} |

##### Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ---------- | ------ | -------------------------------------------------------------- | ------ |
| zIndex | 层级 | Number | —— | 0 |
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |

#### braid-html

##### Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ---------------- |
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
| isEdit | 是否可编辑 | Boolean | true / false | false |
| dragable | 是否可拖拽 | Boolean | true / false | true |
| resizable | 尺寸是否可变 | Boolean | true / false | true |
| width | 打印项宽度(px) | Number | —— | 120 |
| height | 打印项高度(px) | Number | —— | 60 |
| left | 左偏移量(px) | Number | —— | 50 |
| top | 上偏移量(px) | Number | —— | 0 |
| title | 打印项名称 | String | —— | "html" |
| value | html 内容 | String | —— | "<div>html<div>" |
| defaultValue | 默认 html | String | —— | "<div>html<div>" |
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
| style | 打印项样式 | Object | —— | {} |

##### Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ---------------------------- | ------- | -------------------------------------------------------------- | ------ |
| zIndex | 层级 | Number | —— | 0 |
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |
| AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 |
| BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 |

#### braid-html

##### Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------ |
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
| isEdit | 是否可编辑 | Boolean | true / false | false |
| dragable | 是否可拖拽 | Boolean | true / false | true |
| resizable | 尺寸是否可变 | Boolean | true / false | true |
| width | 打印项宽度(px) | Number | —— | 240 |
| height | 打印项高度(px) | Number | —— | 60 |
| left | 左偏移量(px) | Number | —— | 50 |
| top | 上偏移量(px) | Number | —— | 10 |
| title | 打印项名称 | String | —— | "表格" |
| value | 表格数据 | Array | —— | [] |
| defaultValue | 表格默认数据 | Array | —— | [] |
| columnsAttr | 表格可选列配置 | Array | —— | [] |
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
| style | 打印项样式 | Object | —— | {} |

##### Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ---------------------------- | ------- | ---------------------------------------------------- | --------- |
| zIndex | 层级 | Number | —— | 0 |
| FontSize | 字体大小(pt) | Number | —— | 9 |
| FontColor | 字体颜色 | String | —— | "#000000" |
| BorderColor | 边框颜色 | String | —— | "#000000" |
| Alignment | 文字对齐方式 | String | "left" / "center" / "right"(左靠齐 / 居中/ 右靠齐) | 1 |
| AutoHeight | 是否设置自动高度 | Boolean | true / false(是 / 否) | 0 |
| BottomMargin | 打印项距离纸张的下边距(mm) | Number | —— | 0 |

##### columnsAttr:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----- | ------------------------------------------- | ------ | ------ | ------ |
| title | 表格列名称 | String | —— | —— |
| value | 表格列数据 | String | —— | —— |
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | —— |

#### bar-code

##### Attributes:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------- | ------- | ------------------------------------------------------------- | ------------ |
| type | 模板类型 | String | braid-txt / braid-table / braid-html / braid-image / bar-code | —— |
| isEdit | 是否可编辑 | Boolean | true / false | false |
| dragable | 是否可拖拽 | Boolean | true / false | true |
| resizable | 尺寸是否可变 | Boolean | true / false | true |
| width | 打印项宽度(px) | Number | —— | 120 |
| height | 打印项高度(px) | Number | —— | 60 |
| left | 左偏移量(px) | Number | —— | 50 |
| top | 上偏移量(px) | Number | —— | 0 |
| title | 打印项名称 | String | —— | "条码" |
| value | html 内容 | String | —— | "1234567890" |
| defaultValue | 默认 html | String | —— | "1234567890" |
| name | 动态打印项数据名称(对应打印数据 key-name) | String | —— | '' |
| lodopStyle | LODOP 默认打印项样式 | Object | —— | {} |
| style | 打印项样式 | Object | —— | {} |

##### Style:

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------- | -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| zIndex | 层级 | Number | —— | 0 |
| FontSize | 字体大小(pt) | Number | —— | false |
| ShowBarText | 是否显示条码值 | Boolean | false / true(不显示 / 显示) | 0 |
| codeType | 条码类型 | Number | '128A' / '128B' / '128C' / '128Auto' / 'EAN8' / 'EAN13' / 'EAN128A' / 'EAN128B' / 'EAN128C' / 'Code39' / '39Extended' / '2_5interleaved' / '2_5industrial' / '2_5matrix' / 'UPC_A' / 'UPC_E0' / 'UPC_E1' / 'UPCsupp2' / 'UPCsupp5' / 'Code93' / '93Extended' / 'MSI' / 'PostNet' / 'Codabar'/ 'QRCode'/ 'PDF417' | "Code39" |
| ItemType | 打印项类型 | Number | 0 / 1 / 2 / 3 / 4(普通项 / 页眉页脚/ 页号项/ 页数项/ 多页项) | 0 |

## Events

| 事件名称 | 说明 | 回调参数 |
| -------- | -------------- | ---------------- |
| save | 点击保存时触发 | 设计后的模板对象 |

## Methods

| 方法名称 | 说明 | 参数 |
| -------- | ------------------ | -------------------------------------------------------- |
| initTemp | 手动初始化模板数据 | Function(tempValue: object, widgetOptions:widgetOptions) |

## \$lodop 对象 Methods

| 名称 | 说明 | 参数 |
| ----------- | ------------------------------------ | ---------------------------------- |
| print | 对数据和模板解析,实现打印 | Function(temp: object, data:array) |
| preview | 对数据和模板解析,实现打印内容的预览 | Function(temp: object, data:array) |
| previewTemp | 对模板进行预览 | Function(temp: object ) |
| setLicenses | 设置 Lodop 软件产品注册信息 | Function(licenseInfo: object ) |

### setLicenses 方法详解

#### 回调示例:

```javascript
let licenseInfo = {
strCompanyName: "某某某公司",
strLicense: "******",
strLicenseA: "",
strLicenseB: ""
};

// 设置Lodop产品注册信息
this.$lodop.setLicenses(licenseInfo);
```

#### licenseInfo 对象值说明:

licenseInfo 为 Lodop 打印软件产品注册信息, 对象中参数具体解析如下:

| 值 | 说明 | 类型 | 可选值 | 默认值 |
| -------------- | ------------ | ------ | ------ | ------ |
| strCompanyName | 注册单位名称 | String | —— | —— |
| strLicense | 主注册号 | String | —— | —— |
| strLicenseA | 附加注册号 A | String | —— | —— |
| strLicenseB | 附加注册号 B | String | —— | —— |

+ 14
- 0
babel.config.js Zobrazit soubor

@@ -0,0 +1,14 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~theme-chalk"
}
]
]
}

+ 31
- 0
example/App.vue Zobrazit soubor

@@ -0,0 +1,31 @@
<template>
<div id="app" data-theme="kr-designer">
<router-view />
</div>
</template>
<script>
export default {
data() {
return {}
},
created() {
let licenseInfo = {
strCompanyName: '某某某公司',
strLicense: '*****',
strLicenseA: '',
strLicenseB: '',
}

// 设置Lodop产品注册信息
this.$lodop.setLicenses(licenseInfo)
},

methods: {},
}
</script>

<style>
#app {
height: 100%;
}
</style>

+ 2
- 0
example/data/defaultTemp.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 387
- 0
example/data/options.js Zobrazit soubor

@@ -0,0 +1,387 @@
/**
* 出库单 模板设计选项
*/
export const OutStockOptions = [
{
type: 'braid-txt',
isEdit: 1,
title: '自定义文本',
value: '自定义文本',
defaultValue: '自定义文本',
name: ''
},
{
type: 'braid-txt',
isEdit: 0,
title: '公司名称',
value: '{公司名称}',
defaultValue: '某某公司',
name: 'companyName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '出库单号',
value: '{出库单号}',
defaultValue: 'CK-1234567890',
name: 'stockoutCode'
},
{
type: 'bar-code',
isEdit: 1,
title: '单号条码',
value: '{单号}',
defaultValue: 'CK-1234567890',
name: 'stockoutCode',
lodopStyle: { QRCodeVersion: '1', QRCodeErrorLevel: 'L' },
},
{
type: 'braid-txt',
isEdit: 1,
title: '客户/供应商',
value: '{客户/供应商}',
defaultValue: '中国苹果',
name: 'unitName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '经办人',
value: '{经办人}',
defaultValue: 'zj001',
name: 'handlerName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '出库类型',
value: '{出库类型}',
defaultValue: '销售出库',
name: 'stockoutType'
},
{
type: 'braid-txt',
isEdit: 1,
title: '出库仓库',
value: '{出库仓库}',
defaultValue: '北京仓库',
name: 'warehouseName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '出库时间',
value: '{出库时间}',
defaultValue: '2020-08-27 12:00:00',
name: 'businessDate'
},
{
type: 'braid-txt',
isEdit: 1,
title: '制单人',
value: '{制单人}',
defaultValue: 'jz002',
name: 'createUserName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '制单时间',
value: '{制单时间}',
defaultValue: '2020-08-27 12:00:00',
name: 'created'
},
{
type: 'braid-txt',
isEdit: 1,
title: '收货人(销售)',
value: '{收货人}',
defaultValue: '刘某某',
name: 'receivePerson'
},
{
type: 'braid-txt',
isEdit: 1,
title: '收货电话(销售)',
value: '{收货人电话}',
defaultValue: '收货人',
name: 'receivePhone'
},
{
type: 'braid-txt',
isEdit: 1,
title: '收货地址(销售)',
value: '{收货地址}',
defaultValue: '四川成都',
name: 'address'
},
{
type: 'braid-txt',
isEdit: 1,
title: '合计金额',
value: '{合计金额}',
defaultValue: '123.00',
name: 'totalPrice'
},
{
type: 'braid-txt',
isEdit: 1,
title: '摘要',
value: '{摘要}',
defaultValue: '北京采购入库成都摘要',
name: 'remark'
},
{
type: 'braid-html',
isEdit: 1,
title: '分页',
value: '{第##页/共##页}',
defaultValue: '<font><span tdata=\'pageNO\'>第##页</span>/<span tdata=\'pageCount\'>共##页</span></font>',
name: ''
},
{
type: 'braid-table',
isEdit: 0,
title: '出库商品明细',
name: 'details',
value: '{details}',
style: {},
defaultValue: [
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro256g',
specModel: '165L',
quantity: 3,
snCode: '[SPP1Y79G1]',
price: '23.00'
},
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro124g',
specModel: '165L',
quantity: 3,
snCode: ' [SPP1Y79G1]',
price: '12.00'
}

],
tabelHtml: '',
columnsAttr: [
{
title: '产品名称',
value: '{产品名称}',
name: 'productName',
},
{
title: 'sku名称',
value: '{sku名称}',
name: 'skuName',
},
{
title: '规格型号',
value: '{规格型号}',
name: 'specModel'
},
{
title: '数量',
value: '{数量}',
name: 'quantity'
},
{
title: '单价',
value: '{单价}',
name: 'price'
},
{
title: '产品序列号',
value: '产品序列号明细:<br>{产品序列号}',
name: 'snCode',
trSet: {
title: '产品序列号明细:',
col: 5,
margin: '50px'
},
}
],
columns: []
}
]

/**
* 入库单 模板设计选项
*/
export const InStockOptions = [
{
type: 'braid-txt',
isEdit: 1,
title: '自定义文本',
value: '自定义文本',
defaultValue: '自定义文本',
name: ''
},
{
type: 'braid-txt',
isEdit: 0,
title: '公司名称',
value: '{公司名称}',
defaultValue: '科技公司',
name: 'companyName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '入库单号',
value: '{入库单号}',
defaultValue: 'RK-1234567890',
name: 'purcheckCode'
},
{
type: 'bar-code',
isEdit: 1,
title: '单号条码',
value: '{单号}',
defaultValue: 'RK-1234567890',
name: 'stockoutCode'
},

{
type: 'braid-txt',
isEdit: 1,
title: '供应商/客户',
value: '{供应商/客户}',
defaultValue: '中国苹果',
name: 'unitName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '采购业务员',
value: '{采购业务员}',
defaultValue: 'zj001',
name: 'purchaseSaleManName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '入库类型',
value: '{入库类型}',
defaultValue: '采购入库',
name: 'purcheckType'
},
{
type: 'braid-txt',
isEdit: 1,
title: '入库仓库',
value: '{入库仓库}',
defaultValue: '成都仓库',
name: 'warehouseName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '入库时间',
value: '{入库时间}',
defaultValue: '2020-08-27 12:00:00',
name: 'businessDate'
},
{
type: 'braid-txt',
isEdit: 1,
title: '制单人',
value: '{制单人}',
defaultValue: 'jz002',
name: 'createUserName'
},
{
type: 'braid-txt',
isEdit: 1,
title: '制单时间',
value: '{制单时间}',
defaultValue: '2020-08-27 12:00:00',
name: 'created'
},
{
type: 'braid-txt',
isEdit: 1,
title: '摘要',
value: '{摘要}',
defaultValue: '北京采购入库成都摘要',
name: 'remark'
},
{
type: 'braid-txt',
isEdit: 1,
title: '合计金额',
value: '{合计金额}',
defaultValue: '12331.00',
name: 'totalPrice'
},
{
type: 'braid-html',
isEdit: 1,
title: '分页',
value: '{第##页/共##页}',
defaultValue: '<font ><span tdata=\'pageNO\'>第##页</span>/<span tdata=\'pageCount\'>共##页</span></font>',
name: ''
},
{
type: 'braid-table',
isEdit: 0,
title: '入库商品明细',
name: 'details',
value: '{details}',
style: {},
defaultValue: [
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro256g',
specModel: '165L',
quantity: 3,
snCode: '[SPP1Y79G1]',
price: '12.00'
},
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro124g',
specModel: '165L',
quantity: 3,
snCode: '[SPP1Y79G1] ',
price: '12.00'
}

],
columnsAttr: [
{
title: '产品名称',
value: '{产品名称}',
name: 'productName',
},
{
title: 'sku名称',
value: '{sku名称}',
name: 'skuName',
},
{
title: '规格型号',
value: '{规格型号}',
name: 'specModel'
},
{
title: '数量',
value: '{数量}',
name: 'quantity'
},
{
title: '单价',
value: '{单价}',
name: 'price'
},
{
title: '产品序列号',
value: '{产品序列号}',
name: 'snCode',
}
],
columns: []
}
]

+ 77
- 0
example/data/test.js Zobrazit soubor

@@ -0,0 +1,77 @@

export const OutStockData = [
{
companyName: '四川某某公司',
stockoutCode: 'CK-12345678910231',
unitName: '北京代理商',
handlerName: '刘某某',
stockoutType: '销售出库',
warehouseName: '京东北京仓',
businessDate: '2020-08-27 12:00:00',
createUserName: '胡某某',
created: '2020-08-27 12:00:00',
remark: '备注一下',
totalPrice: '129.00',
receivePerson: '易某某',
receivePhone: '18982068701',
address: '四川省成都市武侯区 天府软件园',
details: [
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro256g',
specModel: '165L',
quantity: 17,
snCode: '[SPP1Y79G1]',
price: '8999.00'
},
{
productName: '苹果手机壳123',
skuName: 'iphone11pro256g',
specModel: '165L',
quantity: 9,
snCode: '[SPP1Y79G1]',
price: '23.00'
},
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro124g',
specModel: '165L',
quantity: 13,
snCode: '[SPP1Y79G1]',
price: '7099.00'
}
]
}
]
export const InStockData = [
{
companyName: '某某偶科技公司',
purcheckCode: 'Rk-12345678910231',
unitName: '四川分销商',
purchaseSaleManName: '刘夏',
purcheckType: '采购入库',
warehouseName: '京东成都仓',
businessDate: '2020-08-27 12:00:00',
createUserName: '胡某某',
created: '2020-08-27 12:00:00',
remark: '备注一下',
totalPrice: '129.00',
details: [
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro256g',
specModel: '165L',
quantity: 3,
snCode: '[SPP1Y79G1]',
price: '12.00'
},
{
productName: '苹果ipone11pro',
skuName: 'iphone11pro124g',
specModel: '165L',
quantity: 3,
snCode: '[SPP1Y79G1]',
price: '12.00'
}]
}
]

+ 15
- 0
example/index.html Zobrazit soubor

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>

</html>

+ 35
- 0
example/main.js Zobrazit soubor

@@ -0,0 +1,35 @@
import Vue from 'vue'
import App from './App.vue'
import vuePrintDesigner from '../src'
import VueRouter from 'vue-router'
import Designer from './page/designer.vue'
import Index from './page/index.vue'
import { outStockTemp } from './data/defaultTemp'

// 默认设置一条模板示例
let tempList
try {
tempList = JSON.parse(localStorage.getItem('tempList')) || []
} catch (error) {
tempList = []
}

if (tempList.length == 0) {
localStorage.setItem('tempList', outStockTemp)
}



Vue.use(VueRouter)
Vue.use(vuePrintDesigner)
const routes = [
{ path: '/', component: Index },
{ path: '/designer', component: Designer }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')

+ 45
- 0
example/page/designer.vue Zobrazit soubor

@@ -0,0 +1,45 @@
<template>
<kr-print-designer ref="printDesigner" :temp-value="value" :widget-options="widgets" @save="handleSave" />
</template>
<script>
import { OutStockOptions, InStockOptions } from '../data/options'
export default {
data() {
return {
index: '',
value: {
title: 'demo',
width: 750,
height: 550,
pageWidth: 750,
pageHeight: 550,
tempItems: [],
},
widgets: OutStockOptions,
}
},

created() {
this.index = this.$route.query.index
try {
let tempList = JSON.parse(localStorage.getItem('tempList')) || []
this.value = tempList[this.index]
this.widgets = this.value.type == 1 ? OutStockOptions : InStockOptions
} catch (err) {
console.error(err)
}
},
methods: {
handleSave(data) {
let tempList = JSON.parse(localStorage.getItem('tempList')) || []
tempList[this.index] = data
localStorage.setItem('tempList', JSON.stringify(tempList))
this.$router.back()
},
// 手动初始话模板数据
initTemp(){
this.$refs.printDesigner.initTemp(this.value,this.widgets)
}
},
}
</script>

+ 279
- 0
example/page/index.vue Zobrazit soubor

@@ -0,0 +1,279 @@
<template>
<div class="box">
<div class="title">kr-print-designer 打印模板设计器</div>
<section>
<div class="section">模板管理</div>
<el-table :data="tempList" style="width: 100%" size="mini" border>
<el-table-column label="模板名称" prop="title"></el-table-column>
<el-table-column label="模板类型">
<template slot-scope="scope">
<span>{{scope.row.type == 1 ? '出库单' : '入库单'}}</span>
</template>
</el-table-column>
<el-table-column label="模板宽高">
<template slot-scope="scope">
<span>{{scope.row.width + ' * '+ scope.row.height}}</span>
</template>
</el-table-column>
<el-table-column label="纸张大小">
<template slot-scope="scope">
<span>{{scope.row.pageWidth + 'mm * '+ scope.row.pageHeight+'mm'}}</span>
</template>
</el-table-column>
<el-table-column align="right">
<template slot="header">
<el-button size="mini" type="primary" @click="openCreate">创建模板</el-button>
</template>
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">设计</el-button>
<el-button type="text" size="mini" @click="handlePreview(scope.$index, scope.row)">预览</el-button>
<el-button type="text" size="mini" @click="handleCopy(scope.row)">复制新增</el-button>
<el-button
v-if="!scope.row.default"
type="text"
size="mini"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="添加模板" :visible.sync="visible" width="310px">
<el-form ref="form" :model="form" size="small" :rules="rules" label-width="80px">
<el-form-item label="模板名称" prop="title">
<el-input v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="模板类型" prop="type">
<el-select v-model="form.type">
<el-option label="出库单" :value="1"></el-option>
<el-option label="入库单" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="模板宽度" prop="width">
<el-input v-model="form.width"></el-input>
</el-form-item>
<el-form-item label="模板高度" prop="height">
<el-input v-model="form.height"></el-input>
</el-form-item>
<el-form-item label="纸张宽度" prop="pageWidth">
<el-input v-model="form.pageWidth"></el-input>
</el-form-item>
<el-form-item label="纸张高度" prop="pageHeight">
<el-input v-model="form.pageHeight"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="visible = false">取 消</el-button>
<el-button type="primary" size="mini" @click="savaTemp">确 定</el-button>
</div>
</el-dialog>
</section>
<section>
<div class="section">模板打印测试</div>
<el-form ref="printForm" :model="printForm" size="small" :rules="printRules" :inline="true">
<el-form-item label="打印模板" prop="tempIndex">
<el-select v-model="printForm.tempIndex">
<el-option
v-for="(item,index) in tempList"
:key="index"
:label="item.title"
:value="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="测试数据" prop="data">
<el-input
type="textarea"
style="width:520px"
:rows="6"
v-model="printForm.data"
placeholder="数据模板对应的数据,数据格式为json对象"
></el-input>
</el-form-item>
<el-form-item>
<div>
<el-button size="mini" type="primary" @click="printPreview(1)">打印预览</el-button>
</div>
<div style="margin-top:10px">
<el-button size="mini" type="success" @click="printPreview(2)">直接打印</el-button>
</div>
</el-form-item>
</el-form>
</section>
<section>
<el-collapse>
<el-collapse-item title="测试数据" name="1">
<el-form ref="testData" :model="testData" size="small" :inline="true">
<el-form-item label="出库数据">
<el-input
type="textarea"
style="width:920px"
:rows="8"
v-model="testData.OutStock"
placeholder="数据模板对应的数据,数据格式为json对象"
></el-input>
</el-form-item>
<el-form-item label="入库数据">
<el-input
type="textarea"
style="width:920px"
:rows="8"
v-model="testData.InStock"
placeholder="数据模板对应的数据,数据格式为json对象"
></el-input>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</section>
</div>
</template>
<script>
import { Table, TableColumn, Dialog, MessageBox } from 'element-ui'
import Vue from 'vue'
Vue.prototype.$confirm = (...args) => MessageBox.confirm(...args)
const defaultTemp = () => ({
title: '',
type: 1, // 模板类型 1:出库单;2:入库单
width: '',
height: '',
pageWidth: '',
pageHeight: '',
tempItems: [],
})
import { OutStockData, InStockData } from '../data/test'
export default {
data() {
return {
visible: false,
value: {},
tempList: [],
form: defaultTemp(),
rules: {
title: { required: true, message: '请输入模板名称' },
type: { required: true, message: '请选择模板类型' },
width: { required: true, message: '请输入模板宽度' },
height: { required: true, message: '请输入模板高度' },
pageWidth: { required: true, message: '请输入纸张宽度' },
pageHeight: { required: true, message: '请输入纸张高度' },
},
printForm: {
tempIndex: '',
data: '',
},
printRules: {
tempIndex: { required: true, message: '请选择模板' },
data: { required: true, message: '请输入模板测试数据' },
},
testData: {
OutStock: JSON.stringify(OutStockData),
InStock: JSON.stringify(InStockData),
},
}
},
created() {
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Dialog)
this.tempList = JSON.parse(localStorage.getItem('tempList')) || []
},

methods: {
// 预览
handlePreview(index, row) {
this.$lodop.previewTemp(row)
},
// 设计
handleEdit(index, row) {
this.$router.push({
path: '/designer',
query: {
index: index,
},
})
},
// 删除
handleDelete(index, row) {
this.$confirm('确认删除该条数据吗?', '确认信息')
.then((isPass) => {
if (isPass) {
this.tempList.splice(index, 1)
localStorage.setItem('tempList', JSON.stringify(this.tempList))
}
})
.catch()
},
handleCopy(row) {
let copyTemp = JSON.parse(JSON.stringify(row))
copyTemp.title = copyTemp.title + '_copy'
copyTemp.default = false
this.tempList.push(copyTemp)
localStorage.setItem('tempList', JSON.stringify(this.tempList))
},

// 新增
openCreate() {
this.form = defaultTemp()
this.visible = true
},
// 保存新增
savaTemp() {
this.$refs.form.validate((valid) => {
if (valid) {
this.tempList.push(this.form)
localStorage.setItem('tempList', JSON.stringify(this.tempList))
this.visible = false
}
})
},
/**
* 测试打印预览/直接打印
* flag 1:打印预览,2:直接打印
*/
printPreview(flag) {
this.$refs.printForm.validate((valid) => {
if (valid) {
let printData
try {
printData = JSON.parse(this.printForm.data)
} catch (err) {
return this.$message('请输入正确格式的打印数据')
}
if (flag == 1) {
this.$lodop.preview(this.tempList[this.printForm.tempIndex], printData)
} else {
this.$confirm('确认直接打印吗?', '确认信息')
.then((isPass) => {
if (isPass) {
this.$lodop.print(this.tempList[this.printForm.tempIndex], printData)
}
})
.catch((err) => {
console.log(err)
})
}
}
})
},
},
}
</script>
<style scoped>
.box {
width: 1000px;
margin: auto;
padding: 10px 0;
font-family: Arial, Helvetica, sans-serif;
}
.title {
text-align: center;
font-size: 24px;
color: #1890ff;
margin: 20px;
font-weight: bold;
}
.section {
font-size: 18px;
color: #333333;
padding: 10px 0;
}
</style>

+ 10
- 0
lib/demo.html Zobrazit soubor

@@ -0,0 +1,10 @@
<meta charset="utf-8">
<title>kr-print-designer demo</title>
<script src="./kr-print-designer.umd.js"></script>

<link rel="stylesheet" href="./kr-print-designer.css">


<script>
console.log(kr-print-designer)
</script>

binární
lib/fonts/element-icons.535877f5.woff Zobrazit soubor


binární
lib/fonts/element-icons.732389de.ttf Zobrazit soubor


+ 33688
- 0
lib/kr-print-designer.common.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
lib/kr-print-designer.common.js.map
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
lib/kr-print-designer.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 33698
- 0
lib/kr-print-designer.umd.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
lib/kr-print-designer.umd.js.map
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 2
- 0
lib/kr-print-designer.umd.min.js
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
lib/kr-print-designer.umd.min.js.map
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 11949
- 0
package-lock.json
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 39
- 0
package.json Zobrazit soubor

@@ -0,0 +1,39 @@
{
"name": "kr-print-designer",
"version": "1.1.8",
"description": "一个基于Vue、ElementUi、Lodop的打印模板设计器。实现打印模板的设计、预览和打印功能。",
"publish": true,
"main": "lib/kr-print-designer.umd.min.js",
"files": [
"/lib"
],
"keyword": "lodop print-designer",
"author": "liuxia",
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name kr-print-designer --dest lib src/index.js"
},
"dependencies": {
"nanoid": "^1.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"babel-plugin-component": "^1.1.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"element-ui": "2.13.0",
"vue": "^2.6.11",
"vue-router": "^3.4.8",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

+ 132
- 0
src/App.vue Zobrazit soubor

@@ -0,0 +1,132 @@
<template>
<div class="kr-designer" data-theme="kr-designer">
<viewport class="kr-designer-view" />
<div class="kr-designer-tool">
<el-scrollbar class="kr-designer-tool_con">
<panel class="control-panel" />
</el-scrollbar>
<div class="kr-designer-tool_bar">
<el-button size="mini" type="success" @click="saveTemp">保存</el-button>
<el-button size="mini" type="primary" @click="previewTemp">预览</el-button>
</div>
</div>
</div>
</template>

<script>
import Viewport from './components/viewport/index.vue'
import Panel from './components/panel/index.vue'
import cloneDeep from 'lodash/cloneDeep'

export default {
name: 'kr-print-designer',
components: { Viewport, Panel },
props: {
widgetOptions: {
type: Array,
default: () => [],
},
tempValue: {
type: Object,
default: () => ({ title: 'demo', width: 750, height: 550, pageWidth: 750, pageHeight: 550, tempItems: [] }),
},
},
created() {
this.initTemp(this.tempValue, this.widgetOptions)
},
methods: {
// 保存模板
saveTemp() {
let page = this.$vptd.state.page
this.$emit('save', cloneDeep(page))
},
// 预览模板
previewTemp() {
let page = { ...this.$vptd.state.page }
this.$lodop.previewTemp(cloneDeep(page))
},

// 初始化设计器
initTemp(tempValue, widgetOptions) {
this.$vptd.dispatch('designerInit', {
tempValue: cloneDeep(tempValue),
options: cloneDeep(widgetOptions),
})
},
},
}
</script>

<style lang="scss">
body,
html {
padding: 0;
margin: 0;
height: 100%;
box-sizing: border-box;
}
.kr-designer {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
width: 100%;
height: 100%;
text-align: left;
display: flex;
flex-direction: row;
.kr-designer-view {
flex: 1;
display: flex;
flex-direction: column;
}
.kr-designer-tool {
width: 400px;
height: 100%;
display: flex;
flex-direction: column;
.el-scrollbar__wrap {
overflow: auto;
}
&_con {
flex: 1;
height: 100%;
width: 100%;
overflow: hidden;
}
&_bar {
padding: 10px;
text-align: center;
}
}
}

.kr-form {
.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
.min-input {
width: 100px;
}
.unit-text {
font-size: 12px;
color: #999999;
margin-left: 5px;
}
}

.kr-collapse {
color: #555555;
width: 400px;

.el-collapse-item__header {
box-sizing: border-box;
padding-left: 10px;
}

.el-collapse-item__content {
box-sizing: border-box;
padding: 10px;
}
}
</style>

binární
src/assets/image/barCode.png Zobrazit soubor

Před Za
Šířka: 199  |  Výška: 57  |  Velikost: 519 B

binární
src/assets/logo.png Zobrazit soubor

Před Za
Šířka: 200  |  Výška: 200  |  Velikost: 6.7 KiB

+ 15
- 0
src/assets/style/index.scss Zobrazit soubor

@@ -0,0 +1,15 @@
[data-theme="kr-designer"] {
.widgets {
outline: none;
font-size: 12px;
&:hover {
outline: 1px solid #ddd !important;
}
&.active {
outline: 1px solid #2196f3 !important;
&:hover {
outline: 1px solid #2196f3 !important;
}
}
}
}

+ 52
- 0
src/components/panel/index.vue Zobrazit soubor

@@ -0,0 +1,52 @@
<template>
<div class="kr-collapse">
<el-collapse v-model="activeNames">
<el-collapse-item title name="1">
<template slot="title">
<span>页面参数</span>
</template>
<page />
</el-collapse-item>
<el-collapse-item name="2">
<template slot="title">
<span>样式</span>
</template>
<appearance class="pd-l-10" />
</el-collapse-item>
<el-collapse-item name="3">
<template slot="title">
<span>组件</span>
</template>
<options />
</el-collapse-item>
<el-collapse-item name="4">
<template slot="title">
<span>已加组件</span>
</template>
<layers />
</el-collapse-item>
</el-collapse>
</div>
</template>

<script>
import page from './page.vue'
import style from './style.vue'
import options from './options/index.vue'
import layers from './layers.vue'

export default {
components: {
page,
appearance: style,
options,
layers,
},

data() {
return {
activeNames: ['1', '2', '3', '4'],
}
},
}
</script>

+ 58
- 0
src/components/panel/layers.vue Zobrazit soubor

@@ -0,0 +1,58 @@
<template>
<div class="tag-box">
<el-tag
v-for="(layer,index) in layers"
:key="index"
:closable="layer === activeElement?true:false"
size="small"
:type="layer === activeElement?'':'info'"
@click="(e) => {activeLayer(e, layer)}"
@close="(e) => {dele(e, layer)}"
>{{ layer.title }}</el-tag>
</div>
</template>

<script>
import { cumulativeOffset, checkInView } from '../../utils/offset'

export default {
computed: {
// 已添加的组件
layers() {
return this.$vptd.state.page.tempItems
},
activeElement() {
return this.$vptd.state.activeElement
},
},
methods: {
activeLayer(e, item) {
this.$vptd.commit('select', {
uuid: item.uuid,
})
let viewport = document.querySelector('#viewport')
if (viewport) {
let target = viewport.querySelector(`[data-uuid='${item.uuid}']`)
if (target && !checkInView(target)) {
viewport.scrollTop = cumulativeOffset(target).top - 50
}
} else {
console.error('未找到 "#viewport" 的节点')
}
},

// 删除元件
dele(e, item) {
this.$vptd.commit('delete', item.uuid)
},
},
}
</script>
<style lang="scss" scoped>
.tag-box {
.el-tag {
margin-bottom: 10px;
margin-right: 10px;
}
}
</style>

+ 78
- 0
src/components/panel/options/index.vue Zobrazit soubor

@@ -0,0 +1,78 @@
<template>
<div class="options-box">
<template v-for="(item,index) in optionItems">
<el-popover
v-if="item.type == 'braid-table'"
:key="index"
placement="top"
width="200"
v-model="tablePopover"
>
<div>
<el-checkbox-group v-model="item.selectCol">
<el-row>
<el-col v-for="col in item.columnsAttr" :key="col.name" :span="12">
<el-checkbox :label="col.name">{{col.title}}</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
<el-button size="mini" type="primary" @click="(e) => {addTempItem(e,item)}">确定</el-button>
</div>
<el-button size="mini" slot="reference">{{ item.title }}</el-button>
</el-popover>
<el-button
v-else
size="mini"
:key="index"
@click="(e) => {addTempItem(e,item)}"
>{{ item.title }}</el-button>
</template>
</div>
</template>

<script>
export default {
data() {
return {
tablePopover: false,
}
},
computed: {
optionItems() {
return this.$vptd.state.optionItems
},
},
methods: {
// 添加组件
addTempItem(e, item) {
switch (item.type) {
case 'braid-table': {
let selectCol = []
item.selectCol.forEach((itemName) => {
let colInfo = item.columnsAttr.find((col) => col.name === itemName)
if (colInfo) {
selectCol.push(colInfo)
}
})
item.columns = selectCol //表格显示的字段
this.$vptd.dispatch('addTempItem', item)
this.tablePopover = false
break
}
default:
this.$vptd.dispatch('addTempItem', item)
}
},
},
}
</script>

<style lang="scss" scoped>
.options-box {
.el-button {
margin-bottom: 10px;
margin-right: 10px;
margin-left: 0;
}
}
</style>

+ 66
- 0
src/components/panel/page.vue Zobrazit soubor

@@ -0,0 +1,66 @@
<template>
<div>
<el-form label-width="80px" :model="pageInfo" size="mini" class="kr-form">
<el-row>
<el-form-item label="模板名称">
<el-input v-model="pageInfo.title" class="full-w"></el-input>
</el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="模板宽度">
<el-input-number
v-model="pageInfo.width"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模板高度">
<el-input-number
v-model="pageInfo.height"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="纸张宽度">
<el-input-number
v-model="pageInfo.pageWidth"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<span class="unit-text">(mm)</span>
</el-form-item>
</el-row>
<el-row>
<el-form-item label="纸张高度">
<el-input-number
v-model="pageInfo.pageHeight"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
<span class="unit-text">(mm)</span>
</el-form-item>
</el-row>
</el-form>
</div>
</template>

<script>
export default {
computed: {
pageInfo() {
return this.$vptd.state.page
},
},
}
</script>


+ 193
- 0
src/components/panel/style.vue Zobrazit soubor

@@ -0,0 +1,193 @@
<template>
<div>
<!-- 公共属性 -->
<el-form label-width="80px" :model="activeElement" size="mini" class="kr-form">
<el-row>
<el-col :span="12">
<el-form-item label="宽度">
<el-input-number
v-model="activeElement.width"
controls-position="right"
:min="1"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="高度">
<el-input-number
v-model="activeElement.height"
controls-position="right"
:min="1"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="横坐标">
<el-input-number
v-model="activeElement.left"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="纵坐标">
<el-input-number
v-model="activeElement.top"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
</el-row>

<el-row>
<el-col :span="12">
<el-form-item label="字号">
<el-input-number
:disabled="activeElement.style.FontSize===undefined"
v-model="activeElement.style.FontSize"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="加粗">
<el-switch
:disabled="activeElement.style.Bold===undefined"
v-model="activeElement.style.Bold"
:active-value="true"
:inactive-value="false"
></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="字体颜色">
<el-color-picker
:disabled="activeElement.style.FontColor===undefined"
v-model="activeElement.style.FontColor"
></el-color-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="边框颜色">
<el-color-picker
:disabled="activeElement.style.BorderColor===undefined"
v-model="activeElement.style.BorderColor"
></el-color-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="条码值">
<el-switch
:disabled="activeElement.style.ShowBarText===undefined"
v-model="activeElement.style.ShowBarText"
:active-value="true"
:inactive-value="false"
></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="对齐方式">
<el-radio-group
:disabled="activeElement.style.Alignment===undefined"
v-model="activeElement.style.Alignment"
>
<el-radio :label="'left'">左对齐</el-radio>
<el-radio :label="'center'">居中</el-radio>
<el-radio :label="'right'">右对齐</el-radio>
</el-radio-group>
</el-form-item>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="条码类型">
<el-select
:disabled="activeElement.style.codeType===undefined"
v-model="activeElement.style.codeType"
class="min-input"
>
<el-option v-for="val in codeTypeArray" :key="val" :label="val" :value="val" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="打印类型">
<el-select
:disabled="activeElement.style.ItemType===undefined"
v-model="activeElement.style.ItemType"
class="min-input"
>
<el-option
v-for="val in itemTypeArray"
:key="val.value"
:label="val.label"
:value="val.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="高度自动">
<el-switch
:disabled="activeElement.style.AutoHeight===undefined"
v-model="activeElement.style.AutoHeight"
:active-value="true"
:inactive-value="false"
></el-switch>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下边距">
<el-input-number
:disabled="activeElement.style.BottomMargin===undefined || !activeElement.style.AutoHeight"
v-model="activeElement.style.BottomMargin"
controls-position="right"
:min="0"
class="min-input"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import { getCodeTypeArray, getItemTypeArray } from '../../libs/props.js'

export default {
data() {
return {
codeTypeArray: getCodeTypeArray(),
itemTypeArray: getItemTypeArray(),
}
},
computed: {
activeElement() {
return this.$vptd.state.activeElement
},
// 页面高度
height() {
return this.$vptd.state.page.height
},
},
}
</script>
<style lang="scss" scoped>
.mini-form {
::v-deep.el-form-item--mini.el-form-item {
margin-bottom: 10px;
}
}
</style>

+ 173
- 0
src/components/viewport/index.vue Zobrazit soubor

@@ -0,0 +1,173 @@
<template>
<div id="viewport" data-type="viewport" class="holder">
<div
:style="{
height: page.height + 'px',
width: page.width + 'px',
backgroundImage: 'url('+backImg+')'
}"
class="screen"
>
<!-- 组件 -->
<component
v-for="val in widgetStore"
:is="val.type"
:data-title="val.type"
:class="{'active': widgetId === val.uuid}"
:key="val.uuid"
:val="val"
:data-type="val.type"
:data-uuid="val.uuid"
class="layer"
></component>

<!-- 参考线 -->
<!-- <ref /> -->

<!-- 尺寸控制器 -->
<control />
</div>
</div>
</template>

<script>
import control from './size-control.vue'
import move from '../../mixins/move'

export default {
components: {
control, // 尺寸控制
},

mixins: [move],

data() {
return {}
},

computed: {
// 已添加的组件
widgetStore() {
return this.$vptd.state.page.tempItems
},
// 背景图地址
backImg() {
return this.$vptd.state.page.imageUrl ? this.$vptd.state.page.imageUrl : ''
},

// 画布高度
page() {
return this.$vptd.state.page
},
// 选中项id
widgetId() {
return this.$vptd.state.uuid
},
},

mounted() {
// 采用事件代理的方式监听元件的选中操作
let viewportDom = document.getElementById('viewport')
if (viewportDom) {
viewportDom.addEventListener('mousedown', this.handleSelection, false)
} else {
console.error('未找的‘viewport’节点')
}

// 绑定键盘上下左右键用于元件的移动
document.addEventListener(
'keydown',
(e) => {
e.stopPropagation()
var target = this.$vptd.state.activeElement
// 左
if (e.keyCode === 37 && target.left) {
target.left -= 1
return
}
// 上
if (e.keyCode === 38 && target.top) {
e.preventDefault()
target.top -= 1
return
}
// 右
if (e.keyCode === 39 && target.left) {
target.left += 1
return
}
// 下
if (e.keyCode === 40 && target.top) {
e.preventDefault()
target.top += 1
}
},
true
)
},

methods: {
/**
* 目标元素获得焦点
*/
handleSelection(e) {
var target = this.selectTarget(e.target)
if (target) {
var uuid = target.getAttribute('data-uuid')
// 设置选中元素
this.$vptd.commit('select', {
uuid: uuid || -1,
})
// 绑定移动事件:除背景图以外的元件才能移动
target = this.$vptd.state.activeElement
if (target.dragable) {
this.initmovement(e) // 参见 mixins
}
} else {
// 取消选中元素
this.$vptd.commit('select', {
uuid: -1,
})
}
},
/**
* 获得选中的目标,如果没有返回false
*/
selectTarget(target) {
let type = target.getAttribute('data-type')
if (type) {
if (type === 'viewport') {
return false
} else {
return target
}
} else {
return this.selectTarget(target.parentNode)
}
},
},
}
</script>

<style scoped>
.holder {
display: flex;
justify-content: center;
overflow: auto;
font-size: 0;
border: 1px solid #f5f5f5;
border-width: 0 1px;
background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0),
linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
background-position: 0 0, 13px 13px;
background-size: 26px 26px;
}
.screen {
margin: 25px auto;
transform-origin: center top;
position: relative;
box-shadow: 0 0 5px 1px #cccccc;
background-color: #ffffff;
background-repeat: no-repeat;
}
</style>

+ 139
- 0
src/components/viewport/size-control.vue Zobrazit soubor

@@ -0,0 +1,139 @@
<template>
<div v-show="optionsType !=='page'">
<!-- 左 -->
<div
:style="{
height: elm.height + 'px',
top: elm.top + 'px',
left: elm.left + 'px'
}"
class="verti"
@mousedown="handlemousedown($event, 'left', 'left', 'width')"
>
<div class="square" />
</div>

<!-- 右 -->
<div
:style="{
height: elm.height + 'px',
top: elm.top + 'px',
left: elm.left + elm.width + 'px'
}"
class="verti"
@mousedown="handlemousedown($event, 'right', 'width')"
>
<div class="square" />
</div>

<!-- 上 -->
<div
:style="{
width: elm.width + 'px',
top: elm.top + 'px',
left: elm.left + 'px'
}"
class="horiz"
@mousedown="handlemousedown($event, 'up', 'top', 'height')"
>
<div class="square" />
</div>

<!-- 下 -->
<div
:style="{
width: elm.width + 'px',
top: elm.top + elm.height + 'px',
left: elm.left + 'px'
}"
class="horiz"
@mousedown="handlemousedown($event, 'down', 'height')"
>
<div class="square" />
</div>
</div>
</template>

<script>
export default {
data() {
return {
type: '', // 调整方向 left | right | up | down
}
},
computed: {
optionsType() {
return this.$vptd.state.type
},
elm() {
let target = this.$vptd.state.activeElement
if (!target.resizable) return ''
return target
},
},

methods: {
handlemousedown(e, type, originX, originY) {
e.stopPropagation()
this.type = type

this.$vptd.commit('initmove', {
startX: e.pageX,
startY: e.pageY,
originX: this.elm[originX],
originY: this.elm[originY],
})

document.addEventListener('mousemove', this.handlemousemove, true)
document.addEventListener('mouseup', this.handlemouseup, true)
},

handlemousemove(e) {
e.stopPropagation()
e.preventDefault()

this.$vptd.commit('resize', {
x: e.pageX,
y: e.pageY,
type: this.type,
})
},

handlemouseup() {
document.removeEventListener('mousemove', this.handlemousemove, true)
document.removeEventListener('mouseup', this.handlemouseup, true)
this.$vptd.commit('stopmove')
},
},
}
</script>

<style scoped>
.verti,
.horiz {
position: absolute;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.verti {
width: 0;
cursor: ew-resize;
}
.horiz {
height: 0;
cursor: ns-resize;
}
.square {
box-sizing: border-box;
width: 6px;
height: 6px;
border: 1px solid #2196f3;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

binární
src/components/widgets/bar-code/PDF417.png Zobrazit soubor

Před Za
Šířka: 744  |  Výška: 134  |  Velikost: 543 B

binární
src/components/widgets/bar-code/QRCode.png Zobrazit soubor

Před Za
Šířka: 260  |  Výška: 260  |  Velikost: 1.2 KiB

binární
src/components/widgets/bar-code/barCode.png Zobrazit soubor

Před Za
Šířka: 199  |  Výška: 57  |  Velikost: 519 B

+ 97
- 0
src/components/widgets/bar-code/index.vue Zobrazit soubor

@@ -0,0 +1,97 @@
<template>
<div
class="bar-code"
:style="{
position: 'absolute',
width: val.width + 'px',
height: val.height + 'px',
left: val.left + 'px',
top: val.top +'px',
zIndex: val.zIndex,
}"
>
<img :src="codeUrl" />
<div
class="text"
:style="{
display:val.style.ShowBarText ? '' : 'none',
fontSize: val.style.FontSize + 'pt',
fontWeight: val.style.Bold ? 'bold' : 'normal'
}"
>1234567890</div>
</div>
</template>

<script>
const WIDGET_NAME = 'bar-code'
export default {
name: WIDGET_NAME,
setting: {
type: WIDGET_NAME,
isEdit: false,
dragable: true, // 是否可拖拽
resizable: true, // 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
title: '条码',
value: '1234567890',
defaultValue: '1234567890',
name: '',
style: {
zIndex: 0,
FontSize: 9,
ShowBarText: false, // 条码是否显示值 0--不显示 1--显示
codeType: 'Code39', // 条码类型
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
},
},
props: ['val'],
data() {
return {
// codeImg: require('../../../assets/image/barCode.png'),
}
},
computed: {
// 'QRCode', 'PDF417'
codeUrl() {
if (this.val.style.codeType === 'QRCode') {
return require('./QRCode.png')
} else if (this.val.style.codeType === 'PDF417') {
return require('./PDF417.png')
} else {
return require('./barCode.png')
}
},
},
}
</script>
<style lang="scss" scoped>
.bar-code {
&:hover {
outline: 1px solid #ddd !important;
}
&.active {
outline: 1px solid #2196f3 !important;
&:hover {
outline: 1px solid #2196f3 !important;
}
}
img {
width: 100%;
height: 100%;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
.text {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
background-color: #ffffff;
}
}
</style>

+ 60
- 0
src/components/widgets/html/index.vue Zobrazit soubor

@@ -0,0 +1,60 @@
<template>
<div
class="widgets"
v-html="val.value"
:contenteditable="!!val.isEdit"
@blur="(e) => updateText(e, val.uuid)"
:style="{
position:'absolute',
left: val.left + 'px' ,
top: val.top + 'px',
width: val.width + 'px',
minHeight: val.height + 'px',
zIndex: val.style.zIndex,
fontSize: val.style.FontSize + 'pt',
color: val.style.FontColor,
}"
></div>
</template>

<script>
const WIDGET_NAME = 'braid-html'

export default {
name: WIDGET_NAME,
setting: {
type: WIDGET_NAME,
isEdit: false,
dragable: true, // 是否可拖拽
resizable: true, // 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
title: 'html',
value: '<div>html<div>',
defaultValue: '<div>html<div>',
name: '',
style: {
zIndex: 0,
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
AutoHeight: false, // 高度自动(模板在该元素位置以下的元素都关联打印)
BottomMargin: 0, // 距离下边距
},
},
props: [
'val', // 文本对象
],
methods: {
updateText(e, uuid) {
let text = e.target.innerHTML
this.$vptd.commit('updateData', {
uuid: uuid,
key: 'value',
value: text,
})
},
},
}
</script>


+ 69
- 0
src/components/widgets/image/index.vue Zobrazit soubor

@@ -0,0 +1,69 @@
<template>
<div
class="widgets"
:style="{
position: 'absolute',
width: val.width + 'px',
height: val.height + 'px',
left: val.left + 'px',
top: val.top +'px',
zIndex: val.zIndex
}"
>
<img class="braid-image" :title="val.title" :src="val.value || val.defaultValue" />
</div>
</template>

<script>
const WIDGET_NAME = 'braid-image'
export default {
name: WIDGET_NAME,
setting: {
type: WIDGET_NAME,
title: '图片',
isEdit: false,
dragable: true, // 是否可拖拽
resizable: true, // 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
value: '',
defaultValue: '',
name: '',
style: {
zIndex: 0,
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
},
},
props: [
'val', // 图片对象
],
data() {
return {}
},
computed: {
imageUrl() {
return this.val.value
},
},
watch: {
val(newVal) {
this.imageUrl = newVal.value
},
},
}
</script>

<style scoped>
.braid-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
</style>

+ 30
- 0
src/components/widgets/index.js Zobrazit soubor

@@ -0,0 +1,30 @@

// import braidPic from './pic/index.vue'
import braidTxt from './txt/index.vue'
import barCode from './bar-code/index.vue'
import table from './table/index.vue'
import image from './image/index.vue'
import html from './html/index.vue'


const install = function (Vue) {
Vue.component(braidTxt.name, braidTxt)
Vue.component(barCode.name, barCode)
Vue.component(table.name, table)
Vue.component(image.name, image)
Vue.component(html.name, html)
}

const getWidgetsSetting = function () {
return {
[braidTxt.name]: braidTxt.setting,
[barCode.name]: barCode.setting,
[table.name]: table.setting,
[image.name]: image.setting,
[html.name]: html.setting,
}
}
export default {
install,
getWidgetsSetting
}

+ 82
- 0
src/components/widgets/table/index.vue Zobrazit soubor

@@ -0,0 +1,82 @@
<template>
<div
class="widgets"
:style="{
left: val.left + 'px' ,
top: val.top + 'px',
width: val.width + 'px',
height: val.height + 'px',
textAlign: val.style.Alignment,
fontSize: val.style.FontSize + 'pt',
color: val.style.FontColor,
}"
style="position:absolute;overflow:hidden"
>
<table
border="1"
width="100%"
cellspacing="0"
cellpadding="2"
style="border-collapse:collapse;font-size:12px;"
bordercolor="#000000"
>
<tr>
<th
v-for="item in columns"
:key="item.name"
:width="item.name==='_seq'?40:''"
>{{item.title}}</th>
</tr>
<tr>
<td v-for="item in columns" :key="item.name">{{item.value}}</td>
</tr>
</table>
</div>
</template>

<script>
const WIDGET_NAME = 'braid-table'

export default {
name: WIDGET_NAME,
setting: {
type: WIDGET_NAME,
isEdit: false, // 是否可编辑
dragable: true, // 是否可拖拽
resizable: true, // 尺寸是否可变
width: 240,
height: 60,
left: 50,
top: 10,
title: '表格',
value: [],
defaultValue: [],
tabelHtml: '',
columnsAttr: [], // 表格列选项
columns: [], // 已选表格列表
selectCol: [], // 已选表格列name数组(用于多选框双向绑定)
name: '',
style: {
zIndex: 0,
Alignment: 'left', // 对齐方式 1--左靠齐 2--居中 3--右靠齐
FontSize: 9,
FontColor: '#000000',
BorderColor: '#000000',
AutoHeight: false, // 高度自动(模板在该元素位置以下的元素都关联打印)
BottomMargin: 0, // 距离下边距
},
},
props: [
'val', // 文本对象
],
computed: {
// 去掉type='row'的数据
columns() {
let col = this.val.columns || []
return col
},
},
methods: {},
}
</script>


+ 75
- 0
src/components/widgets/txt/index.vue Zobrazit soubor

@@ -0,0 +1,75 @@
<template>
<div
class="widgets"
v-html="val.value"
:contenteditable="!!val.isEdit"
@blur="(e) => updateText(e, val.uuid)"
:style="{
position:'absolute',
left: val.left + 'px' ,
top: val.top + 'px',
width: val.width + 'px',
minHeight: val.height + 'px',
zIndex: val.style.zIndex,
fontSize: val.style.FontSize + 'pt',
color: val.style.FontColor,
textAlign: val.style.Alignment,
fontWeight: val.style.Bold ? 'bold': 'normal'
}"
></div>
</template>

<script>
// let itemAttr = {
// type: 'braid-txt',
// isEdit: 0,
// title: '收货人手机',
// value: '{收货人手机}',
// defaultValue: '18982068702',
// name: 'buyerPhone'
// }

const WIDGET_NAME = 'braid-txt'

export default {
name: WIDGET_NAME,
setting: {
type: WIDGET_NAME,
isEdit: true,
dragable: true, // 是否可拖拽
resizable: true, // 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
title: '自定义文本',
value: '自定义文本',
defaultValue: '自定义文本',
name: '',
style: {
zIndex: 0,
FontSize: 9,
FontColor: '#000000',
Bold: false, // 1代表粗体,0代表非粗体
Italic: false, // 1代表斜体,0代表非斜体
Underline: false, // 1代表有下划线,0代表无下划线
Alignment: 'left', // 对齐方式
ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
},
},
props: [
'val', // 文本对象
],
methods: {
updateText(e, uuid) {
let text = e.target.innerHTML
this.$vptd.commit('updateData', {
uuid: uuid,
key: 'value',
value: text,
})
},
},
}
</script>


+ 69
- 0
src/index.js Zobrazit soubor

@@ -0,0 +1,69 @@
import KrPrintDesigner from './App.vue'
import {
Button,
Scrollbar,
Input,
InputNumber,
Switch,
Select,
Option,
RadioGroup,
Radio,
Popover,
Checkbox,
CheckboxGroup,
Row,
Col,
Collapse,
CollapseItem,
Form,
FormItem,
Tag,
ColorPicker,
} from 'element-ui';
import './assets/style/index.scss'
// LODOP打印服务
import './libs/lodop/LodopFuncs.js'
import lodop from './libs/lodop/index.js'
import vptd from './store/index'
import widgets from '@/components/widgets/index'

const install = function (Vue, opts = {}) {
Vue.component(Button.name, Button)
Vue.component(Scrollbar.name, Scrollbar)
Vue.component(Input.name, Input)
Vue.component(InputNumber.name, InputNumber)
Vue.component(Switch.name, Switch)
Vue.component(Select.name, Select)
Vue.component(Option.name, Option)
Vue.component(RadioGroup.name, RadioGroup)
Vue.component(Radio.name, Radio)
Vue.component(Popover.name, Popover)
Vue.component(Checkbox.name, Checkbox)
Vue.component(CheckboxGroup.name, CheckboxGroup)
Vue.component(Row.name, Row)
Vue.component(Col.name, Col)
Vue.component(Collapse.name, Collapse)
Vue.component(CollapseItem.name, CollapseItem)
Vue.component(Form.name, Form)
Vue.component(FormItem.name, FormItem)
Vue.component(Tag.name, Tag)
Vue.component(ColorPicker.name, ColorPicker)


Vue.use(widgets);
Vue.component('kr-print-designer', KrPrintDesigner)
Vue.prototype.$lodop = lodop
Vue.prototype.$vptd = vptd

};

if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}


export default {
install,
KrPrintDesigner
}

+ 162
- 0
src/libs/lodop/LodopFuncs.js Zobrazit soubor

@@ -0,0 +1,162 @@
import { MessageBox } from 'element-ui'
//==本JS是加载Lodop插件及CLodop服务的综合示例,可直接使用,建议看懂后融进自己页面程序==
var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState
//==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
try {
var ua = navigator.userAgent
if (ua.match(/Windows\sPhone/i))
return true
if (ua.match(/iPhone|iPod|iPad/i))
return true
if (ua.match(/Android/i))
return true
if (ua.match(/Edge\D?\d+/i))
return true

var verTrident = ua.match(/Trident\D?\d+/i)
var verIE = ua.match(/MSIE\D?\d+/i)
var verOPR = ua.match(/OPR\D?\d+/i)
var verFF = ua.match(/Firefox\D?\d+/i)
var x64 = ua.match(/x64/i)
if ((!verTrident) && (!verIE) && (x64))
return true
else if (verFF) {
verFF = verFF[0].match(/\d+/)
if ((verFF[0] >= 41) || (x64))
return true
} else if (verOPR) {
verOPR = verOPR[0].match(/\d+/)
if (verOPR[0] >= 32)
return true
} else if ((!verTrident) && (!verIE)) {
var verChrome = ua.match(/Chrome\D?\d+/i)
if (verChrome) {
verChrome = verChrome[0].match(/\d+/)
if (verChrome[0] >= 41)
return true
}
}
return false
} catch (err) {
return true
}
}
//==引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
if (needCLodop()) {
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement

var JS1 = document.createElement('script')
JS1.src = 'http://localhost:8000/CLodopfuncs.js?priority=1'
head.insertBefore(JS1, head.firstChild)

var JS2 = document.createElement('script')
JS2.src = 'http://localhost:18000/CLodopfuncs.js?priority=0'
head.insertBefore(JS2, head.firstChild)

CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i))

if (JS1.attachEvent) {
CLodopJsState = 'loading'
var onChange = function () {
if (window.event.srcElement.readyState == 'loaded')
CLodopJsState = 'complete'
}
JS1.attachEvent('onreadystatechange', onChange)
JS2.attachEvent('onreadystatechange', onChange)
}
}
// /
//==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
let exeUrl = 'http://www.lodop.net/download.html'
var strHtmInstall = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,安装后请刷新页面或重新进入。</font>'
var strHtmUpdate = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,升级后请重新进入。</font>'
var strHtm64_Install = '<br><font color=\'#FF00FF\'>打印控件未安装!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,安装后请刷新页面或重新进入。</font>'
var strHtm64_Update = '<br><font color=\'#FF00FF\'>打印控件需要升级!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,升级后请重新进入。</font>'
var strHtmFireFox = '<br><font color=\'#FF00FF\'>(注意:如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它)</font>'
var strHtmChrome = '<br><font color=\'#FF00FF\'>(如果此前正常,仅因浏览器升级或重安装而出问题,需重新执行以上安装)</font>'
var strCLodopInstall_1 = '<br><font color=\'#FF00FF\'>Web打印服务CLodop未安装启动,点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,'
var strCLodopInstall_2 = '<br>(若此前已安装过,可<a href=\'CLodop.protocol:setup\' target=\'_self\'>点这里直接再次启动</a>)'
var strCLodopInstall_3 = ',成功后请刷新本页面。</font>'
var strCLodopUpdate = '<br><font color=\'#FF00FF\'>Web打印服务CLodop需升级!点击这里<a href=' + exeUrl + ' target=\'_blank\'>下载</a>,,升级后请刷新页面。</font>'
var LODOP
try {
var ua = navigator.userAgent
var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i))
if (needCLodop()) {
try {
LODOP = window.getCLodop()
} catch (err) { '' }
if (!LODOP && (document.readyState !== 'complete' || (isIE && CLodopJsState == 'loading'))) {
alert('网页还没下载完毕,请稍等一下再操作.')
return
}
if (!LODOP) {
MessageBox.alert(strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3, '提示', {
dangerouslyUseHTMLString: true
})
//document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTML
return
} else {
if (window.CLODOP.CVERSION < '3.0.9.3') {

MessageBox.alert(strCLodopUpdate, '提示', { dangerouslyUseHTMLString: true })
//document.body.innerHTML = strCLodopUpdate + document.body.innerHTML
}
if (oEMBED && oEMBED.parentNode)
oEMBED.parentNode.removeChild(oEMBED)
if (oOBJECT && oOBJECT.parentNode)
oOBJECT.parentNode.removeChild(oOBJECT)
}
} else {
var is64IE = isIE && !!(ua.match(/x64/i))
//==如果页面有Lodop就直接使用,否则新建:==
if (oOBJECT || oEMBED) {
if (isIE)
LODOP = oOBJECT
else
LODOP = oEMBED
} else if (!CreatedOKLodopObject) {
LODOP = document.createElement('object')
LODOP.setAttribute('width', 0)
LODOP.setAttribute('height', 0)
LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;')
if (isIE)
LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA')
else
LODOP.setAttribute('type', 'application/x-print-lodop')
document.documentElement.appendChild(LODOP)
CreatedOKLodopObject = LODOP
} else
LODOP = CreatedOKLodopObject
//==Lodop插件未安装时提示下载地址:==
if ((!LODOP) || (!LODOP.VERSION)) {
if (ua.indexOf('Chrome') >= 0)

MessageBox.alert(strHtmChrome, '提示', { dangerouslyUseHTMLString: true })
//document.body.innerHTML = strHtmChrome + document.body.innerHTML
if (ua.indexOf('Firefox') >= 0)
MessageBox.alert((is64IE ? strHtm64_Install : strHtmInstall) + strHtmFireFox, '提示', { dangerouslyUseHTMLString: true })
// document.body.innerHTML = strHtmFireFox + document.body.innerHTML
// document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML
return LODOP
}
}
if (LODOP.VERSION < '6.2.2.6') {
if (!needCLodop())
MessageBox.alert((is64IE ? strHtm64_Update : strHtmUpdate), '提示', { dangerouslyUseHTMLString: true })
//document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML
}
//===如下空白位置适合调用统一功能(如注册语句、语言选择等):==



//=======================================================
return LODOP
} catch (err) {
alert('getLodop出错:' + err)
}
}

export default getLodop

+ 296
- 0
src/libs/lodop/index.js Zobrazit soubor

@@ -0,0 +1,296 @@
import getLodop from './LodopFuncs'
import cloneDeep from 'lodash/cloneDeep'
import { tableTempTohtml, imageTempTohtml, strTempToValue, htmlTempTohtml } from './tools'

let strCompanyName = ''
let strLicense = ''
let strLicenseA = ''
let strLicenseB = ''

export default { print, preview, previewTemp, setLicenses }

/**
* 设置Lodop打印软件产品注册信息
* @param {*} licenseInfo
*/
function setLicenses(licenseInfo) {
strCompanyName = licenseInfo.strCompanyName || ''
strLicense = licenseInfo.strLicense || ''
strLicenseA = licenseInfo.strLicenseA || ''
strLicenseB = licenseInfo.strLicenseB || ''
}
/**
* 打印功能
* @param {*Object} temp 打印模板
* @param {*Array} data 打印数据
*/
function print(temp, data) {
let LODOP = _CreateLodop(temp.title, temp.width, temp.height, temp.pageWidth, temp.pageHeight)
let tempItems = cloneDeep(temp.tempItems)
let printContent = _TempParser(tempItems, data)
if (printContent.length > 1) {
// 打印多份
printContent.forEach((aPrint, index) => {
LODOP.NewPageA()
aPrint.forEach((printItem) => {
_AddPrintItem(LODOP, printItem, index)
})
})
} else {
// 单份
printContent[0].forEach((printItem) => {
_AddPrintItem(LODOP, printItem)
})
}

let flag = LODOP.PRINT()
return flag
}

/**
* 打印预览功能
* @param {*Object} temp 打印模板
* @param {*Array} data 打印数据
*/
function preview(temp, data) {
let LODOP = _CreateLodop(temp.title, temp.width, temp.height, temp.pageWidth, temp.pageHeight)
let tempItems = cloneDeep(temp.tempItems)
let printContent = _TempParser(tempItems, data)
if (data.length > 1) {
// 打印多份
printContent.forEach((aPrint, index) => {
LODOP.NewPageA()
aPrint.forEach((printItem) => {
_AddPrintItem(LODOP, printItem, index)
})
})
} else {
// 单份
printContent[0].forEach((printItem) => {
_AddPrintItem(LODOP, printItem)
})
}

let flag = LODOP.PREVIEW()
return flag
}

/**
* 模板预览功能
* @param {*Object} temp 打印模板
*/
function previewTemp(temp) {
let LODOP = _CreateLodop(temp.title, temp.width, temp.height, temp.pageWidth, temp.pageHeight)

let printContent = _TempParser(temp.tempItems)
printContent[0].forEach(printItem => {
_AddPrintItem(LODOP, printItem)
})
let flag = LODOP.PREVIEW()
return flag
}


/**
* LODOP 根据属性创建打印
* @param pageName 纸张名称
* @param width 可视区域宽度(单位px)
* @param height 可视区域高度(单位px)
* @param pageWidth 纸张宽度(mm)
* @param pageHeight 纸张高度(mm)
* @param top 可视区域上边距(单位px)
* @param left 可视区域左边距(单位px)
*/
function _CreateLodop(pageName, width, height, pageWidth = 0, pageHeight = 0, top = 0, left = 0) {
let LODOP = getLodop()

// console.log(strCompanyName, strLicense, strLicenseA, strLicenseB)

// 设置软件产品注册信息
LODOP.SET_LICENSES(strCompanyName, strLicense, strLicenseA, strLicenseB)

LODOP.PRINT_INITA(top, left, width, height, pageName)
LODOP.SET_PRINT_PAGESIZE(1, pageWidth ? pageWidth + 'mm' : 0, pageHeight ? pageHeight + 'mm' : 0, '')

return LODOP
}

/**
* 解析模板和数据生成打印项
* @param {*Array} tempItem 模板打赢项
* @param {Array} data 打印数据,
* @return {Array} 若data为null则返回处理后的模板
*/
function _TempParser(tempItem, data) {
let temp = cloneDeep(tempItem)
//修改模板答应项顺序
//将自适应高度的打印项(item.style.AutoHeight == true)放在第一项
let flag = temp.findIndex(item => item.style.AutoHeight)
if (flag != -1) {
let autoItem = temp[flag]
temp.splice(flag, 1)
temp.unshift(autoItem)
// 处理位于自适应打印项下方的打印项
temp.forEach(item => {
// 位于自适应高度项下的打印项修改top、left,并添加关联属性(style.LinkedItem)
if (item.top > autoItem.top && item.style.ItemType == 0) {
item.top = item.top - autoItem.top - autoItem.height
item.left = item.left - autoItem.left
item.style.LinkedItem = 1
}
})
}

if (data && data.length > 0) {
// 解析打印模板和数据,生成生成打印内容
let tempContent = []
data.forEach(dataItem => {
let conItem = temp.map(tempItem => {
let item = cloneDeep(tempItem)
if (item.name) {
item.defaultValue = dataItem[item.name]
item.value = strTempToValue(item.value, item.defaultValue)
}
return item
})
tempContent.push(conItem)
})
return tempContent
} else {
return [temp]
}
}


/**
* 添加打印项
* @param {lodop} LODOP 打印实例
* @param {Object} printItem 打印项内容
* @param {Number} pageIndex 当前打印页的开始序号
*/
function _AddPrintItem(LODOP, tempItem, pageIndex = 0) {
let printItem = cloneDeep(tempItem)
// TempItemStyle转换为LodopItemStyle
let lodopStyle = _createLodopStyle(printItem.style)

// 批量打印时,修改关联打印项的关联序号
if (lodopStyle.LinkedItem == 1) {
lodopStyle.LinkedItem = 1 + pageIndex
}
// 添加打印项
switch (printItem.type) {
case 'braid-txt':
LODOP.ADD_PRINT_TEXT(
printItem.top,
printItem.left,
printItem.width,
printItem.height,
printItem.value
)
break
case 'bar-code':
LODOP.ADD_PRINT_BARCODE(
printItem.top,
printItem.left,
printItem.width,
printItem.height,
lodopStyle.codeType,
printItem.value
)
break
case 'braid-html':
{
let html = htmlTempTohtml(printItem.defaultValue, printItem.style)
if (lodopStyle.AutoHeight) {
LODOP.ADD_PRINT_HTM(
printItem.top,
printItem.left,
printItem.width,
'BottomMargin:' + lodopStyle.BottomMargin + 'mm',
html
)
} else {
LODOP.ADD_PRINT_HTM(
printItem.top,
printItem.left,
printItem.width,
printItem.height,
html
)

}
}
break
case 'braid-table':
{
let html = tableTempTohtml(printItem.columns ? printItem.columns : [], printItem.defaultValue, printItem.style)
if (lodopStyle.AutoHeight) {
LODOP.ADD_PRINT_TABLE(
printItem.top,
printItem.left,
printItem.width,
'BottomMargin:' + lodopStyle.BottomMargin + 'mm',
html
)
} else {
LODOP.ADD_PRINT_TABLE(
printItem.top,
printItem.left,
printItem.width,
printItem.height,
html
)

}
}
break
case 'braid-image':
{
let html = imageTempTohtml(printItem.value)
LODOP.ADD_PRINT_IMAGE(
printItem.top,
printItem.left,
printItem.width,
printItem.height,
html
)
}
break
default: ''
}
// 设置打印项样式
Object.keys(lodopStyle).forEach(key => {
LODOP.SET_PRINT_STYLEA(0, key, lodopStyle[key])
})
// 设置默认LodopStyle
let defaultLodopStyle = printItem.lodopStyle
if (defaultLodopStyle) {
Object.keys(defaultLodopStyle).forEach(key => {
LODOP.SET_PRINT_STYLEA(0, key, defaultLodopStyle[key])
})
}

}

/**
* 将模板设计样式转换为lodop样式
* @param style 模板样式
* @returns lodop样式对象
*/
function _createLodopStyle(style) {
let lodopStyle = {
zIndex: style.zIndex
}

for (let key in style) {
if (['Bold', 'Italic', 'Underline', 'ShowBarText'].indexOf(key) > -1) {
lodopStyle[key] = style[key] ? 1 : 0
} else if (key === 'Alignment') {
lodopStyle[key] = style[key] == 'left' ? 1 : style[key] == 'center' ? 2 : 3
} else {
lodopStyle[key] = style[key]
}
}

return lodopStyle
}

+ 104
- 0
src/libs/lodop/tools.js Zobrazit soubor

@@ -0,0 +1,104 @@
/**
* 通过模板和模板数据生成打印内容
* @param temp 打印模板
* @param data 模板数据
*/
export const tempToPrint = (temp, data) => {
let printContent = temp.map(item => {
var reg = /({[^{]*})/g
let value = item.value.replace(reg, data[item.name] || '')
return {
top: item.top,
left: item.left,
width: item.width,
height: item.height,
value: value
}
})
return printContent
}
/**
* braid-tabel类型的模板转换成html
* @param columns 表格列配置信息
* @param data 表格数据
*/
export const tableTempTohtml = (columns, data, style) => {

// 表格全局样式
let styleStr = 'text-align:' + style.Alignment + ';'
styleStr += 'font-size:' + style.FontSize + 'pt;'
styleStr += 'color:' + style.FontColor + ';'


let html = '<style> table td,table th {word-break: break-all;box-sizing:border-box;border:1px solid ' + style.BorderColor + '}</style>'
html += '<table border=1 width=\'100%\' cellspacing=\'0\' frame="box" cellpadding=\'2\' style=\'border-collapse:collapse;' + styleStr + '\' bordercolor=\'' + style.BorderColor + '\'>'
// 解析表头
html += '<thead><tr>'
columns.forEach(column => {

if (column.name === '_seq') { // 序号列
html += '<th width="30">'
} else {
html += '<th>'
}
html += column.title
html += '</th>'
})
html += '</tr></thead>'
html += '<tbody>'

// 解析内容
if (Array.isArray(data)) {
data.forEach((item, idx) => {

html += '<tr>'
columns.forEach(column => {
if (column.name === '_seq') {
html += '<td>'
html += (idx + 1)
} else {
html += '<td>'
html += item[column.name]
}
html += '</td>'
})
html += '</tr>'
})
}

html += '</tbody>'
html += '</table>'
return html
}

/**
* braid-image类型的模板转换成html
* @param value 图片相对地址
*/
export const imageTempTohtml = (value) => {

let html = '<img style=\'width:100%\' src=\'' + value + '\'/>'

return html
}

/**
* 将字符串模板中{}内的内容替换成指定值
* @param str 表格列配置信息
* @param value 表格数据
*/
export const strTempToValue = (str, value) => {
let reg = /({[^}^{]*})/g
return str.replace(reg, value || '')
}
export const htmlTempTohtml = (val, style) => {
// 表格全局样式
let styleStr = 'text-align:' + style.Alignment + ';'
styleStr += 'font-size:' + style.FontSize + 'pt;'
styleStr += 'color:' + style.FontColor + ';'
let html = '<span style=\'' + styleStr + '\'>'
html += val
html += '</span>'
// console.log(html)
return html
}

+ 28
- 0
src/libs/props.js Zobrazit soubor

@@ -0,0 +1,28 @@

export const getDefaultProps = () => ({
uuid: '',
type: 'braid-txt',
name: '',
isEdit: true,
dragable: true, // 是否可拖拽
resizable: true, // 尺寸是否可变
width: 120,
height: 40,
left: 50,
top: 0,
value: '自定义文本',
title: '自定义文本',
defaultValue: '自定义文本',
style: { zIndex: 1 }
})

export const getCodeTypeArray = () => (['128A', '128B', '128C', '128Auto', 'EAN8', 'EAN13', 'EAN128A', 'EAN128B', 'EAN128C', 'Code39', '39Extended', '2_5interleaved', '2_5industrial', '2_5matrix', 'UPC_A', 'UPC_E0', 'UPC_E1', 'UPCsupp2', 'UPCsupp5', 'Code93', '93Extended', 'MSI', 'PostNet', 'Codabar', 'QRCode', 'PDF417'])

export const getItemTypeArray = () => ([
{ label: '普通项', value: 0 },
{ label: '页眉页脚', value: 1 },
{ label: '页号项', value: 2 },
{ label: '页数项', value: 3 },
{ label: '多页项', value: 4 },
])


+ 49
- 0
src/mixins/move.js Zobrazit soubor

@@ -0,0 +1,49 @@

export default {
methods: {
/**
* 初始化鼠标拖拽事件
* @param {*} e
*/
initmovement(e) {
var target = this.$vptd.state.activeElement

// 设置移动状态初始值
this.$vptd.commit('initmove', {
startX: e.pageX,
startY: e.pageY,
originX: target.left,
originY: target.top
})

// 绑定鼠标移动事件
document.addEventListener('mousemove', this.handlemousemove, true)

// 取消鼠标移动事件
document.addEventListener('mouseup', this.handlemouseup, true)
},

/**
* 鼠标移动
* @param {*} e
*/
handlemousemove(e) {
e.stopPropagation()
e.preventDefault()

this.$vptd.commit('move', {
x: e.pageX,
y: e.pageY
})
},

/**
* 鼠标up
*/
handlemouseup() {
document.removeEventListener('mousemove', this.handlemousemove, true)
document.removeEventListener('mouseup', this.handlemouseup, true)
this.$vptd.commit('stopmove')
}
}
}

+ 7
- 0
src/mixins/vptd.js Zobrazit soubor

@@ -0,0 +1,7 @@
import vptd from '../store'

export default {
beforeCreate() {
this.$vptd = vptd
}
}

+ 121
- 0
src/plugins/store.js Zobrazit soubor

@@ -0,0 +1,121 @@
import Vue from 'vue'

function resolveSource(source, type) {
return typeof type === 'function' ? type : source[type]
}

function normalizeMap(map) {
return Array.isArray(map)
? map.map(k => ({ k, v: k }))
: Object.keys(map).map(k => ({ k, v: map[k] }))
}

const createMapState = _store => states => {
const res = {}
const db = normalizeMap(states)
for (const k in db) {
let v = db[k]
res[k] = function () {
const store = _store || this.$vptd
return typeof v === 'function'
? v.call(this, store.state)
: store.state[v]
}
}
return res
}

const mapToMethods = (sourceName, runnerName, _store) => map => {
const res = {}
const db = normalizeMap(map)
for (const k in db) {
let v = db[k]
res[k] = function (payload) {
const store = _store || this.$vptd
const source = store[sourceName]
const runner = store[runnerName]
const actualSource = typeof v === 'function' ? v.call(this, source) : v
return runner.call(store, actualSource, payload)
}
}
return res
}

export default class Store {
constructor(
{ state, mutations = {}, actions = {}, plugins, subscribers = [] } = {}
) {
this.vm = new Vue({
data: {
$$state: typeof state === 'function' ? state() : state
}
})
this.mutations = mutations
this.actions = actions
this.subscribers = subscribers

if (plugins) {
plugins.forEach(p => this.use(p))
}

this.mapState = createMapState(this)
this.mapActions = mapToMethods('actions', 'dispatch', this)
this.mapMutations = mapToMethods('mutations', 'commit', this)
}

get state() {
return this.vm.$data.$$state
}

set state(v) {
if (process.env.NODE_ENV === 'development') {
throw new Error(
'[puex] store.state is read-only, use store.replaceState(state) instead'
)
}
}

$emit(event, ...args) {
return this.vm.$emit(event, ...args)
}

$on(event, callback) {
return this.vm.$on(event, callback)
}

subscribe(sub) {
this.subscribers.push(sub)
return () => this.subscribers.splice(this.subscribers.indexOf(sub), 1)
}

commit(type, payload) {
this.subscribers.forEach(sub => sub({ type, payload }, this.state))
const mutation = resolveSource(this.mutations, type)
return mutation && mutation(this.state, payload)
}

dispatch(type, payload) {
const action = resolveSource(this.actions, type)
const ctx = {
state: this.state,
dispatch: this.dispatch.bind(this),
commit: this.commit.bind(this),
store: this
}
return Promise.resolve(action && action(ctx, payload))
}

use(fn) {
fn(this)
return this
}

replaceState(state) {
this.vm.$data.$$state = state
return this
}
}

export const mapState = createMapState()
export const mapActions = mapToMethods('actions', 'dispatch')
export const mapMutations = mapToMethods('mutations', 'commit')

+ 17
- 0
src/store/actions.js Zobrazit soubor

@@ -0,0 +1,17 @@
export default {
// 添加模板项
addTempItem({ state, commit }, item) {
commit('addTempItem', item)
// 设置选中
commit('select', {
uuid: state.page.tempItems[state.page.tempItems.length - 1].uuid
})
},

// 初始化模板设计器
async designerInit({ state, commit }, tempInfo) {
commit('initOptionItems', tempInfo.options)
commit('initPage', tempInfo.tempValue)
}

}

+ 14
- 0
src/store/index.js Zobrazit soubor

@@ -0,0 +1,14 @@
import Store from '../plugins/store'

import state from './state'
import actions from './actions'
import mutations from './mutation'

/**
* 自定义状态管理器
*/
export default new Store({
state,
actions,
mutations
})

+ 165
- 0
src/store/mutation.js Zobrazit soubor

@@ -0,0 +1,165 @@
const generate = require('nanoid/generate')
import { getDefaultProps, styleMap } from '../libs/props.js'
export default {
// 初始化页面属性
initPage(state, pageInfo) {
state.page = pageInfo
// 补全默认样式
let tempItems = pageInfo.tempItems ? pageInfo.tempItems.map(item => {
let optionItem = { ...state.widgetSetting[item.type], ...item, style: { ...state.widgetSetting[item.type].style, ...(item.style || {}) } }
return optionItem
}) : []

state.page.tempItems = tempItems
},
// 初始化可选对象
initOptionItems(state, options) {
// 补全默认属性
let optionsObject = options ? options.map(item => {
let optionItem = { ...state.widgetSetting[item.type], ...item, style: { ...state.widgetSetting[item.type].style, ...(item.style || {}) } }
return optionItem
}) : []

state.optionItems = optionsObject

},

// 初始化选中对象
initActive(state) {
state.activeElement = getDefaultProps()
},

// 设置 mousemove 操作的初始值
initmove(state, payload) {
state.startX = payload.startX
state.startY = payload.startY
state.originX = payload.originX
state.originY = payload.originY
state.moving = true
},

// 选中元件与取消选中
select(state, temp) {
state.uuid = temp.uuid
if (temp.uuid === -1) {
state.activeElement = getDefaultProps()
state.type = 'page'
} else {
let widget = state.page.tempItems.find(w => w.uuid === temp.uuid)
if (widget) {
state.activeElement = widget
state.type = widget.type
}
}
},

// 元件移动结束
stopmove(state) {
state.moving = false
},

// 移动元件
move(state, track) {
var target = state.activeElement
var dx = track.x - state.startX
var dy = track.y - state.startY
var left = state.originX + Math.floor(dx * 100 / state.zoom)
var top = state.originY + Math.floor(dy * 100 / state.zoom)

target.left = left > 0 ? left : 0
target.top = top > 0 ? top : 0
},

// 调整元件尺寸
resize(state, track) {
var dx = track.x - state.startX
var dy = track.y - state.startY
var value

if (track.type === 'right') {
value = state.originX + Math.floor(dx * 100 / state.zoom)
state.activeElement.width = value > 10 ? value : 10
return
}

if (track.type === 'down') {
value = state.originX + Math.floor(dy * 100 / state.zoom)
state.activeElement.height = value > 10 ? value : 10
return
}

if (track.type === 'left') {
var left = state.originX + Math.floor(dx * 100 / state.zoom)
var width = state.originY - Math.floor(dx * 100 / state.zoom)
state.activeElement.left = left > 0 ? left : 0
state.activeElement.width = width > 10 ? width : 10
return
}

if (track.type === 'up') {
var top = state.originX + Math.floor(dy * 100 / state.zoom)
var height = state.originY - Math.floor(dy * 100 / state.zoom)
state.activeElement.top = top > 0 ? top : 0
state.activeElement.height = height > 10 ? height : 10
}
},

// 更新元件初始 top 值
updateSrollTop(state, top) {
state.top = top
},

// 页面缩放
zoom(state, val) {
state.zoom = val
},

// 删除选中元件
delete(state, uuid) {
var type = state.type
if (type === 'page') return
let index = 0
state.page.tempItems.forEach((item, idx) => {
if (item.uuid === uuid) {
index = idx
}
})
// 删除元件
state.page.tempItems.splice(index, 1)

// 重置 activeElement
state.activeElement = getDefaultProps()
state.type = 'page'
state.uuid = -1
},

// 添加组件
addTempItem(state, item) {
let def = { uuid: generate('1234567890abcdef', 10) }
let setting = JSON.parse(JSON.stringify(item))

state.page.tempItems.push(Object.assign(setting, def))
},



// 更新数据
updateData(state, { uuid, value }) {
let widget = state.page.tempItems.find(w => w.uuid === uuid)
widget ? widget.value = value : ''
},

// 设置模板Id
setTempId(state, id) {
state.tempId = id
},

setLoading(state, flag) {
state.loading = flag
},
// 设置模板默认属性
setWidgetSetting(state, settingObj) {
state.widgetSetting = settingObj
}

}

+ 34
- 0
src/store/state.js Zobrazit soubor

@@ -0,0 +1,34 @@

import { getDefaultProps } from '../libs/props.js'
import widgets from '@/components/widgets/index'
export default {
zoom: 100, // 画布缩放百分比
type: 'page', // 选中元素类型
index: -1, // 选中元素索引
uuid: -1, // 选中元素uuid

originX: 0, // 选中元件的横向初始值
originY: 0, // 选中元件的纵向初始值
startX: 0, // 鼠标摁下时的横坐标
startY: 0, // 鼠标摁下时的纵坐标
moving: false, // 是否正在移动元件(参考线仅在移动元件时显示)

activeElement: getDefaultProps(), // 选中对象,要么是元件,要么是页面

// 模板信息
page: {
title: 'demo',
width: 750,
height: 550,
pageWidth: 750,
pageHeight: 550,
tempItems: [], // 模板已选项
},
optionItems: [], // 可选项

//模板参数
tempId: '', // 模板Id
loading: false, // 是否正在初始化中

widgetSetting: widgets.getWidgetsSetting(), // 模板组件默认属性
}

+ 26
- 0
src/utils/offset.js Zobrazit soubor

@@ -0,0 +1,26 @@
/**
* 获取元素位置
* @param {*} element
*/
export function cumulativeOffset(element) {
let top = el.offsetTop
let left = el.offsetLeft

return {
top: top,
left: left
}
}

/**
* 判断元素是否在窗口内
* @param {*} el
*/
export function checkInView(el) {
let rect = el.getBoundingClientRect()
return (
(rect.top > 0 && rect.top < window.innerHeight) &&
(rect.left < window.innerWidth &&
rect.right > 0)
)
}

+ 1
- 0
theme-chalk/alert.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#FFF;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}[data-theme=kr-designer] .el-alert.is-light .el-alert__closebtn{color:#C0C4CC}[data-theme=kr-designer] .el-alert.is-dark .el-alert__closebtn,[data-theme=kr-designer] .el-alert.is-dark .el-alert__description{color:#FFF}[data-theme=kr-designer] .el-alert.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-theme=kr-designer] .el-alert--success.is-light{background-color:#f0f9eb;color:#67C23A}[data-theme=kr-designer] .el-alert--success.is-light .el-alert__description{color:#67C23A}[data-theme=kr-designer] .el-alert--success.is-dark{background-color:#67C23A;color:#FFF}[data-theme=kr-designer] .el-alert--info.is-light{background-color:#f4f4f5;color:#909399}[data-theme=kr-designer] .el-alert--info.is-dark{background-color:#909399;color:#FFF}[data-theme=kr-designer] .el-alert--info .el-alert__description{color:#909399}[data-theme=kr-designer] .el-alert--warning.is-light{background-color:#fdf6ec;color:#E6A23C}[data-theme=kr-designer] .el-alert--warning.is-light .el-alert__description{color:#E6A23C}[data-theme=kr-designer] .el-alert--warning.is-dark{background-color:#E6A23C;color:#FFF}[data-theme=kr-designer] .el-alert--error.is-light{background-color:#fef0f0;color:#F56C6C}[data-theme=kr-designer] .el-alert--error.is-light .el-alert__description{color:#F56C6C}[data-theme=kr-designer] .el-alert--error.is-dark{background-color:#F56C6C;color:#FFF}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}[data-theme=kr-designer] .el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}[data-theme=kr-designer] .el-alert-fade-enter,[data-theme=kr-designer] .el-alert-fade-leave-active{opacity:0}

+ 1
- 0
theme-chalk/aside.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-aside{overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}

+ 1
- 0
theme-chalk/autocomplete.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
theme-chalk/avatar.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-avatar{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden;color:#fff;background:#C0C4CC;width:40px;height:40px;line-height:40px;font-size:14px}[data-theme=kr-designer] .el-avatar>img{display:block;height:100%;vertical-align:middle}[data-theme=kr-designer] .el-avatar--circle{border-radius:50%}[data-theme=kr-designer] .el-avatar--square{border-radius:4px}[data-theme=kr-designer] .el-avatar--icon{font-size:18px}[data-theme=kr-designer] .el-avatar--large{width:40px;height:40px;line-height:40px}[data-theme=kr-designer] .el-avatar--medium{width:36px;height:36px;line-height:36px}[data-theme=kr-designer] .el-avatar--small{width:28px;height:28px;line-height:28px}

+ 1
- 0
theme-chalk/backtop.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-backtop{position:fixed;background-color:#FFF;width:40px;height:40px;border-radius:50%;color:#409EFF;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:20px;-webkit-box-shadow:0 0 6px rgba(0,0,0,.12);box-shadow:0 0 6px rgba(0,0,0,.12);cursor:pointer;z-index:5}[data-theme=kr-designer] .el-backtop:hover{background-color:#F2F6FC}

+ 1
- 0
theme-chalk/badge.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#F56C6C;border-radius:10px;color:#FFF;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #FFF}.el-badge__content.is-fixed{position:absolute;top:0;right:10px;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.el-badge__content--primary{background-color:#409EFF}.el-badge__content--success{background-color:#67C23A}.el-badge__content--warning{background-color:#E6A23C}.el-badge__content--info{background-color:#909399}.el-badge__content--danger{background-color:#F56C6C}

+ 1
- 0
theme-chalk/base.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 0
- 0
theme-chalk/breadcrumb-item.css Zobrazit soubor


+ 1
- 0
theme-chalk/breadcrumb.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-breadcrumb{font-size:14px;line-height:1}[data-theme=kr-designer] .el-breadcrumb::after,[data-theme=kr-designer] .el-breadcrumb::before{display:table;content:""}[data-theme=kr-designer] .el-breadcrumb::after{clear:both}.el-breadcrumb__separator{margin:0 9px;font-weight:700;color:#C0C4CC}.el-breadcrumb__separator[class*=icon]{margin:0 6px;font-weight:400}.el-breadcrumb__item{float:left}.el-breadcrumb__inner{color:#606266}.el-breadcrumb__inner a,.el-breadcrumb__inner.is-link{font-weight:700;text-decoration:none;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1);color:#303133}.el-breadcrumb__inner a:hover,.el-breadcrumb__inner.is-link:hover{color:#409EFF;cursor:pointer}.el-breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__item:last-child .el-breadcrumb__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{font-weight:400;color:#606266;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}

+ 0
- 0
theme-chalk/button-group.css Zobrazit soubor


+ 557
- 0
theme-chalk/button.css Zobrazit soubor

@@ -0,0 +1,557 @@
[data-theme="kr-designer"] .el-button {
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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
[data-theme="kr-designer"] .el-button + .el-button {
margin-left: 10px;
}
[data-theme="kr-designer"] .el-button:focus,
[data-theme="kr-designer"] .el-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
[data-theme="kr-designer"] .el-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0;
}
[data-theme="kr-designer"] .el-button::-moz-focus-inner {
border: 0;
}
[data-theme="kr-designer"] .el-button [class*="el-icon-"] + span {
margin-left: 5px;
}
[data-theme="kr-designer"] .el-button.is-plain:focus,
[data-theme="kr-designer"] .el-button.is-plain:hover {
background: #fff;
border-color: #409eff;
color: #409eff;
}
[data-theme="kr-designer"] .el-button.is-plain:active {
background: #fff;
border-color: #3a8ee6;
color: #3a8ee6;
outline: 0;
}
[data-theme="kr-designer"] .el-button.is-active {
color: #3a8ee6;
border-color: #3a8ee6;
}
[data-theme="kr-designer"] .el-button.is-disabled,
[data-theme="kr-designer"] .el-button.is-disabled:focus,
[data-theme="kr-designer"] .el-button.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
[data-theme="kr-designer"] .el-button.is-disabled.el-button--text {
background-color: transparent;
}
[data-theme="kr-designer"] .el-button.is-disabled.is-plain,
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:focus,
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:hover {
background-color: #fff;
border-color: #ebeef5;
color: #c0c4cc;
}
[data-theme="kr-designer"] .el-button.is-loading {
position: relative;
pointer-events: none;
}
[data-theme="kr-designer"] .el-button.is-loading:before {
pointer-events: none;
content: "";
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
}
[data-theme="kr-designer"] .el-button.is-round {
border-radius: 20px;
padding: 12px 23px;
}
[data-theme="kr-designer"] .el-button.is-circle {
border-radius: 50%;
padding: 12px;
}
[data-theme="kr-designer"] .el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
[data-theme="kr-designer"] .el-button--primary:focus,
[data-theme="kr-designer"] .el-button--primary:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--primary.is-active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary.is-disabled,
[data-theme="kr-designer"] .el-button--primary.is-disabled:active,
[data-theme="kr-designer"] .el-button--primary.is-disabled:focus,
[data-theme="kr-designer"] .el-button--primary.is-disabled:hover {
color: #fff;
background-color: #a0cfff;
border-color: #a0cfff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain {
color: #409eff;
background: #ecf5ff;
border-color: #b3d8ff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain:focus,
[data-theme="kr-designer"] .el-button--primary.is-plain:hover {
background: #409eff;
border-color: #409eff;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:hover {
color: #8cc5ff;
background-color: #ecf5ff;
border-color: #d9ecff;
}
[data-theme="kr-designer"] .el-button--success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
[data-theme="kr-designer"] .el-button--success:focus,
[data-theme="kr-designer"] .el-button--success:hover {
background: #85ce61;
border-color: #85ce61;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success:active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--success.is-active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success.is-disabled,
[data-theme="kr-designer"] .el-button--success.is-disabled:active,
[data-theme="kr-designer"] .el-button--success.is-disabled:focus,
[data-theme="kr-designer"] .el-button--success.is-disabled:hover {
color: #fff;
background-color: #b3e19d;
border-color: #b3e19d;
}
[data-theme="kr-designer"] .el-button--success.is-plain {
color: #67c23a;
background: #f0f9eb;
border-color: #c2e7b0;
}
[data-theme="kr-designer"] .el-button--success.is-plain:focus,
[data-theme="kr-designer"] .el-button--success.is-plain:hover {
background: #67c23a;
border-color: #67c23a;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success.is-plain:active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:hover {
color: #a4da89;
background-color: #f0f9eb;
border-color: #e1f3d8;
}
[data-theme="kr-designer"] .el-button--warning {
color: #fff;
background-color: #e6a23c;
border-color: #e6a23c;
}
[data-theme="kr-designer"] .el-button--warning:focus,
[data-theme="kr-designer"] .el-button--warning:hover {
background: #ebb563;
border-color: #ebb563;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning:active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--warning.is-active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning.is-disabled,
[data-theme="kr-designer"] .el-button--warning.is-disabled:active,
[data-theme="kr-designer"] .el-button--warning.is-disabled:focus,
[data-theme="kr-designer"] .el-button--warning.is-disabled:hover {
color: #fff;
background-color: #f3d19e;
border-color: #f3d19e;
}
[data-theme="kr-designer"] .el-button--warning.is-plain {
color: #e6a23c;
background: #fdf6ec;
border-color: #f5dab1;
}
[data-theme="kr-designer"] .el-button--warning.is-plain:focus,
[data-theme="kr-designer"] .el-button--warning.is-plain:hover {
background: #e6a23c;
border-color: #e6a23c;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning.is-plain:active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:hover {
color: #f0c78a;
background-color: #fdf6ec;
border-color: #faecd8;
}
[data-theme="kr-designer"] .el-button--danger {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
}
[data-theme="kr-designer"] .el-button--danger:focus,
[data-theme="kr-designer"] .el-button--danger:hover {
background: #f78989;
border-color: #f78989;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger:active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--danger.is-active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger.is-disabled,
[data-theme="kr-designer"] .el-button--danger.is-disabled:active,
[data-theme="kr-designer"] .el-button--danger.is-disabled:focus,
[data-theme="kr-designer"] .el-button--danger.is-disabled:hover {
color: #fff;
background-color: #fab6b6;
border-color: #fab6b6;
}
[data-theme="kr-designer"] .el-button--danger.is-plain {
color: #f56c6c;
background: #fef0f0;
border-color: #fbc4c4;
}
[data-theme="kr-designer"] .el-button--danger.is-plain:focus,
[data-theme="kr-designer"] .el-button--danger.is-plain:hover {
background: #f56c6c;
border-color: #f56c6c;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger.is-plain:active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:hover {
color: #f9a7a7;
background-color: #fef0f0;
border-color: #fde2e2;
}
[data-theme="kr-designer"] .el-button--info {
color: #fff;
background-color: #909399;
border-color: #909399;
}
[data-theme="kr-designer"] .el-button--info:focus,
[data-theme="kr-designer"] .el-button--info:hover {
background: #a6a9ad;
border-color: #a6a9ad;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info:active {
background: #82848a;
border-color: #82848a;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--info.is-active {
background: #82848a;
border-color: #82848a;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info.is-disabled,
[data-theme="kr-designer"] .el-button--info.is-disabled:active,
[data-theme="kr-designer"] .el-button--info.is-disabled:focus,
[data-theme="kr-designer"] .el-button--info.is-disabled:hover {
color: #fff;
background-color: #c8c9cc;
border-color: #c8c9cc;
}
[data-theme="kr-designer"] .el-button--info.is-plain {
color: #909399;
background: #f4f4f5;
border-color: #d3d4d6;
}
[data-theme="kr-designer"] .el-button--info.is-plain:focus,
[data-theme="kr-designer"] .el-button--info.is-plain:hover {
background: #909399;
border-color: #909399;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info.is-plain:active {
background: #82848a;
border-color: #82848a;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:hover {
color: #bcbec2;
background-color: #f4f4f5;
border-color: #e9e9eb;
}
[data-theme="kr-designer"] .el-button--medium {
padding: 10px 20px;
font-size: 14px;
border-radius: 4px;
}
[data-theme="kr-designer"] .el-button--medium.is-round {
padding: 10px 20px;
}
[data-theme="kr-designer"] .el-button--medium.is-circle {
padding: 10px;
}
[data-theme="kr-designer"] .el-button--small {
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
}
[data-theme="kr-designer"] .el-button--small.is-round {
padding: 9px 15px;
}
[data-theme="kr-designer"] .el-button--small.is-circle {
padding: 9px;
}
[data-theme="kr-designer"] .el-button--mini {
padding: 7px 15px;
font-size: 12px;
border-radius: 3px;
}
[data-theme="kr-designer"] .el-button--mini.is-round {
padding: 7px 15px;
}
[data-theme="kr-designer"] .el-button--mini.is-circle {
padding: 7px;
}
[data-theme="kr-designer"] .el-button--text {
border-color: transparent;
color: #409eff;
background: 0 0;
padding-left: 0;
padding-right: 0;
}
[data-theme="kr-designer"] .el-button--text:focus,
[data-theme="kr-designer"] .el-button--text:hover {
color: #66b1ff;
border-color: transparent;
background-color: transparent;
}
[data-theme="kr-designer"] .el-button--text:active {
color: #3a8ee6;
border-color: transparent;
background-color: transparent;
}
[data-theme="kr-designer"] .el-button--text.is-disabled,
[data-theme="kr-designer"] .el-button--text.is-disabled:focus,
[data-theme="kr-designer"] .el-button--text.is-disabled:hover {
border-color: transparent;
}
[data-theme="kr-designer"] .el-button-group {
display: inline-block;
vertical-align: middle;
}
[data-theme="kr-designer"] .el-button-group::after,
[data-theme="kr-designer"] .el-button-group::before {
display: table;
content: "";
}
[data-theme="kr-designer"] .el-button-group::after {
clear: both;
}
[data-theme="kr-designer"] .el-button-group > .el-button {
float: left;
position: relative;
}
[data-theme="kr-designer"] .el-button-group > .el-button + .el-button {
margin-left: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button.is-disabled {
z-index: 1;
}
[data-theme="kr-designer"] .el-button-group > .el-button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child {
border-radius: 4px;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child.is-round {
border-radius: 20px;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child.is-circle {
border-radius: 50%;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:not(:first-child):not(:last-child) {
border-radius: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button:not(:last-child) {
margin-right: -1px;
}
[data-theme="kr-designer"] .el-button-group > .el-button.is-active,
[data-theme="kr-designer"] .el-button-group > .el-button:active,
[data-theme="kr-designer"] .el-button-group > .el-button:focus,
[data-theme="kr-designer"] .el-button-group > .el-button:hover {
z-index: 1;
}
[data-theme="kr-designer"] .el-button-group > .el-dropdown > .el-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--primary:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--primary:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--primary:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--success:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--success:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--success:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--warning:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--warning:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--warning:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--danger:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--danger:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--danger:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--info:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--info:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--info:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}

+ 626
- 0
theme-chalk/calendar.css Zobrazit soubor

@@ -0,0 +1,626 @@
[data-theme="kr-designer"] .el-button {
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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
[data-theme="kr-designer"] .el-button + .el-button {
margin-left: 10px;
}
[data-theme="kr-designer"] .el-button:focus,
[data-theme="kr-designer"] .el-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
[data-theme="kr-designer"] .el-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0;
}
[data-theme="kr-designer"] .el-button::-moz-focus-inner {
border: 0;
}
[data-theme="kr-designer"] .el-button [class*="el-icon-"] + span {
margin-left: 5px;
}
[data-theme="kr-designer"] .el-button.is-plain:focus,
[data-theme="kr-designer"] .el-button.is-plain:hover {
background: #fff;
border-color: #409eff;
color: #409eff;
}
[data-theme="kr-designer"] .el-button.is-plain:active {
background: #fff;
border-color: #3a8ee6;
color: #3a8ee6;
outline: 0;
}
[data-theme="kr-designer"] .el-button.is-active {
color: #3a8ee6;
border-color: #3a8ee6;
}
[data-theme="kr-designer"] .el-button.is-disabled,
[data-theme="kr-designer"] .el-button.is-disabled:focus,
[data-theme="kr-designer"] .el-button.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
[data-theme="kr-designer"] .el-button.is-disabled.el-button--text {
background-color: transparent;
}
[data-theme="kr-designer"] .el-button.is-disabled.is-plain,
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:focus,
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:hover {
background-color: #fff;
border-color: #ebeef5;
color: #c0c4cc;
}
[data-theme="kr-designer"] .el-button.is-loading {
position: relative;
pointer-events: none;
}
[data-theme="kr-designer"] .el-button.is-loading:before {
pointer-events: none;
content: "";
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
}
[data-theme="kr-designer"] .el-button.is-round {
border-radius: 20px;
padding: 12px 23px;
}
[data-theme="kr-designer"] .el-button.is-circle {
border-radius: 50%;
padding: 12px;
}
[data-theme="kr-designer"] .el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
[data-theme="kr-designer"] .el-button--primary:focus,
[data-theme="kr-designer"] .el-button--primary:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--primary.is-active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary.is-disabled,
[data-theme="kr-designer"] .el-button--primary.is-disabled:active,
[data-theme="kr-designer"] .el-button--primary.is-disabled:focus,
[data-theme="kr-designer"] .el-button--primary.is-disabled:hover {
color: #fff;
background-color: #a0cfff;
border-color: #a0cfff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain {
color: #409eff;
background: #ecf5ff;
border-color: #b3d8ff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain:focus,
[data-theme="kr-designer"] .el-button--primary.is-plain:hover {
background: #409eff;
border-color: #409eff;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:hover {
color: #8cc5ff;
background-color: #ecf5ff;
border-color: #d9ecff;
}
[data-theme="kr-designer"] .el-button--success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
[data-theme="kr-designer"] .el-button--success:focus,
[data-theme="kr-designer"] .el-button--success:hover {
background: #85ce61;
border-color: #85ce61;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success:active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--success.is-active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success.is-disabled,
[data-theme="kr-designer"] .el-button--success.is-disabled:active,
[data-theme="kr-designer"] .el-button--success.is-disabled:focus,
[data-theme="kr-designer"] .el-button--success.is-disabled:hover {
color: #fff;
background-color: #b3e19d;
border-color: #b3e19d;
}
[data-theme="kr-designer"] .el-button--success.is-plain {
color: #67c23a;
background: #f0f9eb;
border-color: #c2e7b0;
}
[data-theme="kr-designer"] .el-button--success.is-plain:focus,
[data-theme="kr-designer"] .el-button--success.is-plain:hover {
background: #67c23a;
border-color: #67c23a;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success.is-plain:active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:hover {
color: #a4da89;
background-color: #f0f9eb;
border-color: #e1f3d8;
}
[data-theme="kr-designer"] .el-button--warning {
color: #fff;
background-color: #e6a23c;
border-color: #e6a23c;
}
[data-theme="kr-designer"] .el-button--warning:focus,
[data-theme="kr-designer"] .el-button--warning:hover {
background: #ebb563;
border-color: #ebb563;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning:active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--warning.is-active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning.is-disabled,
[data-theme="kr-designer"] .el-button--warning.is-disabled:active,
[data-theme="kr-designer"] .el-button--warning.is-disabled:focus,
[data-theme="kr-designer"] .el-button--warning.is-disabled:hover {
color: #fff;
background-color: #f3d19e;
border-color: #f3d19e;
}
[data-theme="kr-designer"] .el-button--warning.is-plain {
color: #e6a23c;
background: #fdf6ec;
border-color: #f5dab1;
}
[data-theme="kr-designer"] .el-button--warning.is-plain:focus,
[data-theme="kr-designer"] .el-button--warning.is-plain:hover {
background: #e6a23c;
border-color: #e6a23c;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning.is-plain:active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:hover {
color: #f0c78a;
background-color: #fdf6ec;
border-color: #faecd8;
}
[data-theme="kr-designer"] .el-button--danger {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
}
[data-theme="kr-designer"] .el-button--danger:focus,
[data-theme="kr-designer"] .el-button--danger:hover {
background: #f78989;
border-color: #f78989;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger:active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--danger.is-active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger.is-disabled,
[data-theme="kr-designer"] .el-button--danger.is-disabled:active,
[data-theme="kr-designer"] .el-button--danger.is-disabled:focus,
[data-theme="kr-designer"] .el-button--danger.is-disabled:hover {
color: #fff;
background-color: #fab6b6;
border-color: #fab6b6;
}
[data-theme="kr-designer"] .el-button--danger.is-plain {
color: #f56c6c;
background: #fef0f0;
border-color: #fbc4c4;
}
[data-theme="kr-designer"] .el-button--danger.is-plain:focus,
[data-theme="kr-designer"] .el-button--danger.is-plain:hover {
background: #f56c6c;
border-color: #f56c6c;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger.is-plain:active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:hover {
color: #f9a7a7;
background-color: #fef0f0;
border-color: #fde2e2;
}
[data-theme="kr-designer"] .el-button--info {
color: #fff;
background-color: #909399;
border-color: #909399;
}
[data-theme="kr-designer"] .el-button--info:focus,
[data-theme="kr-designer"] .el-button--info:hover {
background: #a6a9ad;
border-color: #a6a9ad;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info:active {
background: #82848a;
border-color: #82848a;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--info.is-active {
background: #82848a;
border-color: #82848a;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info.is-disabled,
[data-theme="kr-designer"] .el-button--info.is-disabled:active,
[data-theme="kr-designer"] .el-button--info.is-disabled:focus,
[data-theme="kr-designer"] .el-button--info.is-disabled:hover {
color: #fff;
background-color: #c8c9cc;
border-color: #c8c9cc;
}
[data-theme="kr-designer"] .el-button--info.is-plain {
color: #909399;
background: #f4f4f5;
border-color: #d3d4d6;
}
[data-theme="kr-designer"] .el-button--info.is-plain:focus,
[data-theme="kr-designer"] .el-button--info.is-plain:hover {
background: #909399;
border-color: #909399;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info.is-plain:active {
background: #82848a;
border-color: #82848a;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:hover {
color: #bcbec2;
background-color: #f4f4f5;
border-color: #e9e9eb;
}
[data-theme="kr-designer"] .el-button--medium {
padding: 10px 20px;
font-size: 14px;
border-radius: 4px;
}
[data-theme="kr-designer"] .el-button--medium.is-round {
padding: 10px 20px;
}
[data-theme="kr-designer"] .el-button--medium.is-circle {
padding: 10px;
}
[data-theme="kr-designer"] .el-button--small {
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
}
[data-theme="kr-designer"] .el-button--small.is-round {
padding: 9px 15px;
}
[data-theme="kr-designer"] .el-button--small.is-circle {
padding: 9px;
}
[data-theme="kr-designer"] .el-button--mini {
padding: 7px 15px;
font-size: 12px;
border-radius: 3px;
}
[data-theme="kr-designer"] .el-button--mini.is-round {
padding: 7px 15px;
}
[data-theme="kr-designer"] .el-button--mini.is-circle {
padding: 7px;
}
[data-theme="kr-designer"] .el-button--text {
border-color: transparent;
color: #409eff;
background: 0 0;
padding-left: 0;
padding-right: 0;
}
[data-theme="kr-designer"] .el-button--text:focus,
[data-theme="kr-designer"] .el-button--text:hover {
color: #66b1ff;
border-color: transparent;
background-color: transparent;
}
[data-theme="kr-designer"] .el-button--text:active {
color: #3a8ee6;
border-color: transparent;
background-color: transparent;
}
[data-theme="kr-designer"] .el-button--text.is-disabled,
[data-theme="kr-designer"] .el-button--text.is-disabled:focus,
[data-theme="kr-designer"] .el-button--text.is-disabled:hover {
border-color: transparent;
}
[data-theme="kr-designer"] .el-button-group {
display: inline-block;
vertical-align: middle;
}
[data-theme="kr-designer"] .el-button-group::after,
[data-theme="kr-designer"] .el-button-group::before {
display: table;
content: "";
}
[data-theme="kr-designer"] .el-button-group::after {
clear: both;
}
[data-theme="kr-designer"] .el-button-group > .el-button {
float: left;
position: relative;
}
[data-theme="kr-designer"] .el-button-group > .el-button + .el-button {
margin-left: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button.is-disabled {
z-index: 1;
}
[data-theme="kr-designer"] .el-button-group > .el-button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child {
border-radius: 4px;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child.is-round {
border-radius: 20px;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child.is-circle {
border-radius: 50%;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:not(:first-child):not(:last-child) {
border-radius: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button:not(:last-child) {
margin-right: -1px;
}
[data-theme="kr-designer"] .el-button-group > .el-button.is-active,
[data-theme="kr-designer"] .el-button-group > .el-button:active,
[data-theme="kr-designer"] .el-button-group > .el-button:focus,
[data-theme="kr-designer"] .el-button-group > .el-button:hover {
z-index: 1;
}
[data-theme="kr-designer"] .el-button-group > .el-dropdown > .el-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--primary:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--primary:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--primary:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--success:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--success:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--success:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--warning:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--warning:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--warning:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--danger:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--danger:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--danger:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--info:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--info:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--info:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-calendar {
background-color: #fff;
}
.el-calendar__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid #ebeef5;
}
.el-calendar__title {
color: #000;
-ms-flex-item-align: center;
align-self: center;
}
.el-calendar__body {
padding: 12px 20px 35px;
}
[data-theme="kr-designer"] .el-calendar-table {
table-layout: fixed;
width: 100%;
}
[data-theme="kr-designer"] .el-calendar-table thead th {
padding: 12px 0;
color: #606266;
font-weight: 400;
}
[data-theme="kr-designer"] .el-calendar-table:not(.is-range) td.next,
[data-theme="kr-designer"] .el-calendar-table:not(.is-range) td.prev {
color: #c0c4cc;
}
[data-theme="kr-designer"] .el-calendar-table td {
border-bottom: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
vertical-align: top;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
[data-theme="kr-designer"] .el-calendar-table td.is-selected {
background-color: #f2f8fe;
}
[data-theme="kr-designer"] .el-calendar-table td.is-today {
color: #409eff;
}
[data-theme="kr-designer"] .el-calendar-table tr:first-child td {
border-top: 1px solid #ebeef5;
}
[data-theme="kr-designer"] .el-calendar-table tr td:first-child {
border-left: 1px solid #ebeef5;
}
[data-theme="kr-designer"]
.el-calendar-table
tr.el-calendar-table__row--hide-border
td {
border-top: none;
}
[data-theme="kr-designer"] .el-calendar-table .el-calendar-day {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
height: 85px;
}
[data-theme="kr-designer"] .el-calendar-table .el-calendar-day:hover {
cursor: pointer;
background-color: #f2f8fe;
}

+ 1
- 0
theme-chalk/card.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-card{border-radius:4px;border:1px solid #EBEEF5;background-color:#FFF;overflow:hidden;color:#303133;-webkit-transition:.3s;transition:.3s}[data-theme=kr-designer] .el-card.is-always-shadow,[data-theme=kr-designer] .el-card.is-hover-shadow:focus,[data-theme=kr-designer] .el-card.is-hover-shadow:hover{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.el-card__header{padding:18px 20px;border-bottom:1px solid #EBEEF5;-webkit-box-sizing:border-box;box-sizing:border-box}.el-card__body{padding:20px}

+ 1
- 0
theme-chalk/carousel-item.css Zobrazit soubor

@@ -0,0 +1 @@
.el-carousel__item,.el-carousel__mask{position:absolute;height:100%;top:0;left:0}.el-carousel__item{width:100%;display:inline-block;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item.is-animating{-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.el-carousel__item--card{width:50%;-webkit-transition:-webkit-transform .4s ease-in-out;transition:-webkit-transform .4s ease-in-out;transition:transform .4s ease-in-out;transition:transform .4s ease-in-out,-webkit-transform .4s ease-in-out}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{width:100%;background-color:#FFF;opacity:.24;-webkit-transition:.2s;transition:.2s}

+ 1
- 0
theme-chalk/carousel.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-carousel{position:relative}[data-theme=kr-designer] .el-carousel--horizontal{overflow-x:hidden}[data-theme=kr-designer] .el-carousel--vertical{overflow-y:hidden}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:0;padding:0;margin:0;height:36px;width:36px;cursor:pointer;-webkit-transition:.3s;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#FFF;position:absolute;top:50%;z-index:10;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__indicators{position:absolute;list-style:none;margin:0;padding:0;z-index:2}.el-carousel__indicators--horizontal{bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.el-carousel__indicators--vertical{right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;-webkit-transform:none;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#C0C4CC;opacity:.24}.el-carousel__indicators--labels{left:0;right:0;-webkit-transform:none;transform:none;text-align:center}.el-carousel__indicators--labels .el-carousel__button{height:auto;width:auto;padding:2px 18px;font-size:12px}.el-carousel__indicators--labels .el-carousel__indicator{padding:6px 4px}.el-carousel__indicator{background-color:transparent;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator--horizontal{display:inline-block;padding:12px 4px}.el-carousel__indicator--vertical{padding:4px 12px}.el-carousel__indicator--vertical .el-carousel__button{width:2px;height:15px}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#FFF;border:none;outline:0;padding:0;margin:0;cursor:pointer;-webkit-transition:.3s;transition:.3s}[data-theme=kr-designer] .carousel-arrow-left-enter,[data-theme=kr-designer] .carousel-arrow-left-leave-active{-webkit-transform:translateY(-50%) translateX(-10px);transform:translateY(-50%) translateX(-10px);opacity:0}[data-theme=kr-designer] .carousel-arrow-right-enter,[data-theme=kr-designer] .carousel-arrow-right-leave-active{-webkit-transform:translateY(-50%) translateX(10px);transform:translateY(-50%) translateX(10px);opacity:0}

+ 1
- 0
theme-chalk/cascader-panel.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
theme-chalk/cascader.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 0
- 0
theme-chalk/checkbox-button.css Zobrazit soubor


+ 0
- 0
theme-chalk/checkbox-group.css Zobrazit soubor


+ 1
- 0
theme-chalk/checkbox.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
theme-chalk/col.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 0
- 0
theme-chalk/collapse-item.css Zobrazit soubor


+ 1
- 0
theme-chalk/collapse.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
theme-chalk/color-picker.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
theme-chalk/container.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0}[data-theme=kr-designer] .el-container.is-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}

+ 1
- 0
theme-chalk/date-picker.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 1
- 0
theme-chalk/dialog.css Zobrazit soubor

@@ -0,0 +1 @@
.v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{100%{opacity:0}}@keyframes v-modal-out{100%{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}[data-theme=kr-designer] .el-dialog{position:relative;margin:0 auto 50px;background:#FFF;border-radius:2px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.3);box-shadow:0 1px 3px rgba(0,0,0,.3);-webkit-box-sizing:border-box;box-sizing:border-box;width:50%}[data-theme=kr-designer] .el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:0 0;border:none;outline:0;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409EFF}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px;word-break:break-all}.el-dialog__footer{padding:10px 20px 20px;text-align:right;-webkit-box-sizing:border-box;box-sizing:border-box}[data-theme=kr-designer] .el-dialog--center{text-align:center}[data-theme=kr-designer] .el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}[data-theme=kr-designer] .el-dialog--center .el-dialog__footer{text-align:inherit}[data-theme=kr-designer] .dialog-fade-enter-active{-webkit-animation:dialog-fade-in .3s;animation:dialog-fade-in .3s}[data-theme=kr-designer] .dialog-fade-leave-active{-webkit-animation:dialog-fade-out .3s;animation:dialog-fade-out .3s}@-webkit-keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes dialog-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes dialog-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}

+ 1
- 0
theme-chalk/display.css Zobrazit soubor

@@ -0,0 +1 @@
@media only screen and (max-width:767px){[data-theme=kr-designer] .hidden-xs-only{display:none!important}}@media only screen and (min-width:768px){[data-theme=kr-designer] .hidden-sm-and-up{display:none!important}}@media only screen and (min-width:768px) and (max-width:991px){[data-theme=kr-designer] .hidden-sm-only{display:none!important}}@media only screen and (max-width:991px){[data-theme=kr-designer] .hidden-sm-and-down{display:none!important}}@media only screen and (min-width:992px){[data-theme=kr-designer] .hidden-md-and-up{display:none!important}}@media only screen and (min-width:992px) and (max-width:1199px){[data-theme=kr-designer] .hidden-md-only{display:none!important}}@media only screen and (max-width:1199px){[data-theme=kr-designer] .hidden-md-and-down{display:none!important}}@media only screen and (min-width:1200px){[data-theme=kr-designer] .hidden-lg-and-up{display:none!important}}@media only screen and (min-width:1200px) and (max-width:1919px){[data-theme=kr-designer] .hidden-lg-only{display:none!important}}@media only screen and (max-width:1919px){[data-theme=kr-designer] .hidden-lg-and-down{display:none!important}}@media only screen and (min-width:1920px){[data-theme=kr-designer] .hidden-xl-only{display:none!important}}

+ 1
- 0
theme-chalk/divider.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-divider{background-color:#DCDFE6;position:relative}[data-theme=kr-designer] .el-divider--horizontal{display:block;height:1px;width:100%;margin:24px 0}[data-theme=kr-designer] .el-divider--vertical{display:inline-block;width:1px;height:1em;margin:0 8px;vertical-align:middle;position:relative}.el-divider__text{position:absolute;background-color:#FFF;padding:0 20px;font-weight:500;color:#303133;font-size:14px}.el-divider__text.is-left{left:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.el-divider__text.is-center{left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.el-divider__text.is-right{right:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}

+ 1
- 0
theme-chalk/drawer.css
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


+ 0
- 0
theme-chalk/dropdown-item.css Zobrazit soubor


+ 0
- 0
theme-chalk/dropdown-menu.css Zobrazit soubor


+ 808
- 0
theme-chalk/dropdown.css Zobrazit soubor

@@ -0,0 +1,808 @@
[data-theme="kr-designer"] .el-button {
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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
margin: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
[data-theme="kr-designer"] .el-button + .el-button {
margin-left: 10px;
}
[data-theme="kr-designer"] .el-button:focus,
[data-theme="kr-designer"] .el-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
[data-theme="kr-designer"] .el-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: 0;
}
[data-theme="kr-designer"] .el-button::-moz-focus-inner {
border: 0;
}
[data-theme="kr-designer"] .el-button [class*="el-icon-"] + span {
margin-left: 5px;
}
[data-theme="kr-designer"] .el-button.is-plain:focus,
[data-theme="kr-designer"] .el-button.is-plain:hover {
background: #fff;
border-color: #409eff;
color: #409eff;
}
[data-theme="kr-designer"] .el-button.is-plain:active {
background: #fff;
border-color: #3a8ee6;
color: #3a8ee6;
outline: 0;
}
[data-theme="kr-designer"] .el-button.is-active {
color: #3a8ee6;
border-color: #3a8ee6;
}
[data-theme="kr-designer"] .el-button.is-disabled,
[data-theme="kr-designer"] .el-button.is-disabled:focus,
[data-theme="kr-designer"] .el-button.is-disabled:hover {
color: #c0c4cc;
cursor: not-allowed;
background-image: none;
background-color: #fff;
border-color: #ebeef5;
}
[data-theme="kr-designer"] .el-button.is-disabled.el-button--text {
background-color: transparent;
}
[data-theme="kr-designer"] .el-button.is-disabled.is-plain,
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:focus,
[data-theme="kr-designer"] .el-button.is-disabled.is-plain:hover {
background-color: #fff;
border-color: #ebeef5;
color: #c0c4cc;
}
[data-theme="kr-designer"] .el-button.is-loading {
position: relative;
pointer-events: none;
}
[data-theme="kr-designer"] .el-button.is-loading:before {
pointer-events: none;
content: "";
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
}
[data-theme="kr-designer"] .el-button.is-round {
border-radius: 20px;
padding: 12px 23px;
}
[data-theme="kr-designer"] .el-button.is-circle {
border-radius: 50%;
padding: 12px;
}
[data-theme="kr-designer"] .el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
[data-theme="kr-designer"] .el-button--primary:focus,
[data-theme="kr-designer"] .el-button--primary:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--primary.is-active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary.is-disabled,
[data-theme="kr-designer"] .el-button--primary.is-disabled:active,
[data-theme="kr-designer"] .el-button--primary.is-disabled:focus,
[data-theme="kr-designer"] .el-button--primary.is-disabled:hover {
color: #fff;
background-color: #a0cfff;
border-color: #a0cfff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain {
color: #409eff;
background: #ecf5ff;
border-color: #b3d8ff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain:focus,
[data-theme="kr-designer"] .el-button--primary.is-plain:hover {
background: #409eff;
border-color: #409eff;
color: #fff;
}
[data-theme="kr-designer"] .el-button--primary.is-plain:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--primary.is-plain.is-disabled:hover {
color: #8cc5ff;
background-color: #ecf5ff;
border-color: #d9ecff;
}
[data-theme="kr-designer"] .el-button--success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
[data-theme="kr-designer"] .el-button--success:focus,
[data-theme="kr-designer"] .el-button--success:hover {
background: #85ce61;
border-color: #85ce61;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success:active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--success.is-active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success.is-disabled,
[data-theme="kr-designer"] .el-button--success.is-disabled:active,
[data-theme="kr-designer"] .el-button--success.is-disabled:focus,
[data-theme="kr-designer"] .el-button--success.is-disabled:hover {
color: #fff;
background-color: #b3e19d;
border-color: #b3e19d;
}
[data-theme="kr-designer"] .el-button--success.is-plain {
color: #67c23a;
background: #f0f9eb;
border-color: #c2e7b0;
}
[data-theme="kr-designer"] .el-button--success.is-plain:focus,
[data-theme="kr-designer"] .el-button--success.is-plain:hover {
background: #67c23a;
border-color: #67c23a;
color: #fff;
}
[data-theme="kr-designer"] .el-button--success.is-plain:active {
background: #5daf34;
border-color: #5daf34;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--success.is-plain.is-disabled:hover {
color: #a4da89;
background-color: #f0f9eb;
border-color: #e1f3d8;
}
[data-theme="kr-designer"] .el-button--warning {
color: #fff;
background-color: #e6a23c;
border-color: #e6a23c;
}
[data-theme="kr-designer"] .el-button--warning:focus,
[data-theme="kr-designer"] .el-button--warning:hover {
background: #ebb563;
border-color: #ebb563;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning:active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--warning.is-active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning.is-disabled,
[data-theme="kr-designer"] .el-button--warning.is-disabled:active,
[data-theme="kr-designer"] .el-button--warning.is-disabled:focus,
[data-theme="kr-designer"] .el-button--warning.is-disabled:hover {
color: #fff;
background-color: #f3d19e;
border-color: #f3d19e;
}
[data-theme="kr-designer"] .el-button--warning.is-plain {
color: #e6a23c;
background: #fdf6ec;
border-color: #f5dab1;
}
[data-theme="kr-designer"] .el-button--warning.is-plain:focus,
[data-theme="kr-designer"] .el-button--warning.is-plain:hover {
background: #e6a23c;
border-color: #e6a23c;
color: #fff;
}
[data-theme="kr-designer"] .el-button--warning.is-plain:active {
background: #cf9236;
border-color: #cf9236;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--warning.is-plain.is-disabled:hover {
color: #f0c78a;
background-color: #fdf6ec;
border-color: #faecd8;
}
[data-theme="kr-designer"] .el-button--danger {
color: #fff;
background-color: #f56c6c;
border-color: #f56c6c;
}
[data-theme="kr-designer"] .el-button--danger:focus,
[data-theme="kr-designer"] .el-button--danger:hover {
background: #f78989;
border-color: #f78989;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger:active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--danger.is-active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger.is-disabled,
[data-theme="kr-designer"] .el-button--danger.is-disabled:active,
[data-theme="kr-designer"] .el-button--danger.is-disabled:focus,
[data-theme="kr-designer"] .el-button--danger.is-disabled:hover {
color: #fff;
background-color: #fab6b6;
border-color: #fab6b6;
}
[data-theme="kr-designer"] .el-button--danger.is-plain {
color: #f56c6c;
background: #fef0f0;
border-color: #fbc4c4;
}
[data-theme="kr-designer"] .el-button--danger.is-plain:focus,
[data-theme="kr-designer"] .el-button--danger.is-plain:hover {
background: #f56c6c;
border-color: #f56c6c;
color: #fff;
}
[data-theme="kr-designer"] .el-button--danger.is-plain:active {
background: #dd6161;
border-color: #dd6161;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--danger.is-plain.is-disabled:hover {
color: #f9a7a7;
background-color: #fef0f0;
border-color: #fde2e2;
}
[data-theme="kr-designer"] .el-button--info {
color: #fff;
background-color: #909399;
border-color: #909399;
}
[data-theme="kr-designer"] .el-button--info:focus,
[data-theme="kr-designer"] .el-button--info:hover {
background: #a6a9ad;
border-color: #a6a9ad;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info:active {
background: #82848a;
border-color: #82848a;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--info.is-active {
background: #82848a;
border-color: #82848a;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info.is-disabled,
[data-theme="kr-designer"] .el-button--info.is-disabled:active,
[data-theme="kr-designer"] .el-button--info.is-disabled:focus,
[data-theme="kr-designer"] .el-button--info.is-disabled:hover {
color: #fff;
background-color: #c8c9cc;
border-color: #c8c9cc;
}
[data-theme="kr-designer"] .el-button--info.is-plain {
color: #909399;
background: #f4f4f5;
border-color: #d3d4d6;
}
[data-theme="kr-designer"] .el-button--info.is-plain:focus,
[data-theme="kr-designer"] .el-button--info.is-plain:hover {
background: #909399;
border-color: #909399;
color: #fff;
}
[data-theme="kr-designer"] .el-button--info.is-plain:active {
background: #82848a;
border-color: #82848a;
color: #fff;
outline: 0;
}
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:active,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:focus,
[data-theme="kr-designer"] .el-button--info.is-plain.is-disabled:hover {
color: #bcbec2;
background-color: #f4f4f5;
border-color: #e9e9eb;
}
[data-theme="kr-designer"] .el-button--medium {
padding: 10px 20px;
font-size: 14px;
border-radius: 4px;
}
[data-theme="kr-designer"] .el-button--medium.is-round {
padding: 10px 20px;
}
[data-theme="kr-designer"] .el-button--medium.is-circle {
padding: 10px;
}
[data-theme="kr-designer"] .el-button--small {
padding: 9px 15px;
font-size: 12px;
border-radius: 3px;
}
[data-theme="kr-designer"] .el-button--small.is-round {
padding: 9px 15px;
}
[data-theme="kr-designer"] .el-button--small.is-circle {
padding: 9px;
}
[data-theme="kr-designer"] .el-button--mini {
padding: 7px 15px;
font-size: 12px;
border-radius: 3px;
}
[data-theme="kr-designer"] .el-button--mini.is-round {
padding: 7px 15px;
}
[data-theme="kr-designer"] .el-button--mini.is-circle {
padding: 7px;
}
[data-theme="kr-designer"] .el-button--text {
border-color: transparent;
color: #409eff;
background: 0 0;
padding-left: 0;
padding-right: 0;
}
[data-theme="kr-designer"] .el-button--text:focus,
[data-theme="kr-designer"] .el-button--text:hover {
color: #66b1ff;
border-color: transparent;
background-color: transparent;
}
[data-theme="kr-designer"] .el-button--text:active {
color: #3a8ee6;
border-color: transparent;
background-color: transparent;
}
[data-theme="kr-designer"] .el-button--text.is-disabled,
[data-theme="kr-designer"] .el-button--text.is-disabled:focus,
[data-theme="kr-designer"] .el-button--text.is-disabled:hover {
border-color: transparent;
}
[data-theme="kr-designer"] .el-button-group {
display: inline-block;
vertical-align: middle;
}
[data-theme="kr-designer"] .el-button-group::after,
[data-theme="kr-designer"] .el-button-group::before {
display: table;
content: "";
}
[data-theme="kr-designer"] .el-button-group::after {
clear: both;
}
[data-theme="kr-designer"] .el-button-group > .el-button {
float: left;
position: relative;
}
[data-theme="kr-designer"] .el-button-group > .el-button + .el-button {
margin-left: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button.is-disabled {
z-index: 1;
}
[data-theme="kr-designer"] .el-button-group > .el-button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child {
border-radius: 4px;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child.is-round {
border-radius: 20px;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:first-child:last-child.is-circle {
border-radius: 50%;
}
[data-theme="kr-designer"]
.el-button-group
> .el-button:not(:first-child):not(:last-child) {
border-radius: 0;
}
[data-theme="kr-designer"] .el-button-group > .el-button:not(:last-child) {
margin-right: -1px;
}
[data-theme="kr-designer"] .el-button-group > .el-button.is-active,
[data-theme="kr-designer"] .el-button-group > .el-button:active,
[data-theme="kr-designer"] .el-button-group > .el-button:focus,
[data-theme="kr-designer"] .el-button-group > .el-button:hover {
z-index: 1;
}
[data-theme="kr-designer"] .el-button-group > .el-dropdown > .el-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--primary:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--primary:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--primary:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--success:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--success:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--success:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--warning:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--warning:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--warning:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--danger:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--danger:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--danger:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--info:first-child {
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-button-group .el-button--info:last-child {
border-left-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-button-group
.el-button--info:not(:first-child):not(:last-child) {
border-left-color: rgba(255, 255, 255, 0.5);
border-right-color: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"] .el-popper .popper__arrow,
[data-theme="kr-designer"] .el-popper .popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
[data-theme="kr-designer"] .el-popper .popper__arrow {
border-width: 6px;
-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
}
[data-theme="kr-designer"] .el-popper .popper__arrow::after {
content: " ";
border-width: 6px;
}
[data-theme="kr-designer"] .el-popper[x-placement^="top"] {
margin-bottom: 12px;
}
[data-theme="kr-designer"] .el-popper[x-placement^="top"] .popper__arrow {
bottom: -6px;
left: 50%;
margin-right: 3px;
border-top-color: #ebeef5;
border-bottom-width: 0;
}
[data-theme="kr-designer"]
.el-popper[x-placement^="top"]
.popper__arrow::after {
bottom: 1px;
margin-left: -6px;
border-top-color: #fff;
border-bottom-width: 0;
}
[data-theme="kr-designer"] .el-popper[x-placement^="bottom"] {
margin-top: 12px;
}
[data-theme="kr-designer"] .el-popper[x-placement^="bottom"] .popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #ebeef5;
}
[data-theme="kr-designer"]
.el-popper[x-placement^="bottom"]
.popper__arrow::after {
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
[data-theme="kr-designer"] .el-popper[x-placement^="right"] {
margin-left: 12px;
}
[data-theme="kr-designer"] .el-popper[x-placement^="right"] .popper__arrow {
top: 50%;
left: -6px;
margin-bottom: 3px;
border-right-color: #ebeef5;
border-left-width: 0;
}
[data-theme="kr-designer"]
.el-popper[x-placement^="right"]
.popper__arrow::after {
bottom: -6px;
left: 1px;
border-right-color: #fff;
border-left-width: 0;
}
[data-theme="kr-designer"] .el-popper[x-placement^="left"] {
margin-right: 12px;
}
[data-theme="kr-designer"] .el-popper[x-placement^="left"] .popper__arrow {
top: 50%;
right: -6px;
margin-bottom: 3px;
border-right-width: 0;
border-left-color: #ebeef5;
}
[data-theme="kr-designer"]
.el-popper[x-placement^="left"]
.popper__arrow::after {
right: 1px;
bottom: -6px;
margin-left: -6px;
border-right-width: 0;
border-left-color: #fff;
}
[data-theme="kr-designer"] .el-dropdown {
display: inline-block;
position: relative;
color: #606266;
font-size: 14px;
}
[data-theme="kr-designer"] .el-dropdown .el-button-group {
display: block;
}
[data-theme="kr-designer"] .el-dropdown .el-button-group .el-button {
float: none;
}
[data-theme="kr-designer"] .el-dropdown .el-dropdown__caret-button {
padding-left: 5px;
padding-right: 5px;
position: relative;
border-left: none;
}
[data-theme="kr-designer"] .el-dropdown .el-dropdown__caret-button::before {
content: "";
position: absolute;
display: block;
width: 1px;
top: 5px;
bottom: 5px;
left: 0;
background: rgba(255, 255, 255, 0.5);
}
[data-theme="kr-designer"]
.el-dropdown
.el-dropdown__caret-button.el-button--default::before {
background: rgba(220, 223, 230, 0.5);
}
[data-theme="kr-designer"]
.el-dropdown
.el-dropdown__caret-button:hover::before {
top: 0;
bottom: 0;
}
[data-theme="kr-designer"]
.el-dropdown
.el-dropdown__caret-button
.el-dropdown__icon {
padding-left: 0;
}
.el-dropdown__icon {
font-size: 12px;
margin: 0 3px;
}
[data-theme="kr-designer"] .el-dropdown .el-dropdown-selfdefine:focus:active,
[data-theme="kr-designer"]
.el-dropdown
.el-dropdown-selfdefine:focus:not(.focusing) {
outline-width: 0;
}
[data-theme="kr-designer"] .el-dropdown-menu {
position: absolute;
top: 0;
left: 0;
z-index: 10;
padding: 10px 0;
margin: 5px 0;
background-color: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-dropdown-menu__item {
list-style: none;
line-height: 36px;
padding: 0 20px;
margin: 0;
font-size: 14px;
color: #606266;
cursor: pointer;
outline: 0;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #ecf5ff;
color: #66b1ff;
}
.el-dropdown-menu__item i {
margin-right: 5px;
}
.el-dropdown-menu__item--divided {
position: relative;
margin-top: 6px;
border-top: 1px solid #ebeef5;
}
.el-dropdown-menu__item--divided:before {
content: "";
height: 6px;
display: block;
margin: 0 -20px;
background-color: #fff;
}
.el-dropdown-menu__item.is-disabled {
cursor: default;
color: #bbb;
pointer-events: none;
}
[data-theme="kr-designer"] .el-dropdown-menu--medium {
padding: 6px 0;
}
[data-theme="kr-designer"] .el-dropdown-menu--medium .el-dropdown-menu__item {
line-height: 30px;
padding: 0 17px;
font-size: 14px;
}
[data-theme="kr-designer"]
.el-dropdown-menu--medium
.el-dropdown-menu__item.el-dropdown-menu__item--divided {
margin-top: 6px;
}
[data-theme="kr-designer"]
.el-dropdown-menu--medium
.el-dropdown-menu__item.el-dropdown-menu__item--divided:before {
height: 6px;
margin: 0 -17px;
}
[data-theme="kr-designer"] .el-dropdown-menu--small {
padding: 6px 0;
}
[data-theme="kr-designer"] .el-dropdown-menu--small .el-dropdown-menu__item {
line-height: 27px;
padding: 0 15px;
font-size: 13px;
}
[data-theme="kr-designer"]
.el-dropdown-menu--small
.el-dropdown-menu__item.el-dropdown-menu__item--divided {
margin-top: 4px;
}
[data-theme="kr-designer"]
.el-dropdown-menu--small
.el-dropdown-menu__item.el-dropdown-menu__item--divided:before {
height: 4px;
margin: 0 -15px;
}
[data-theme="kr-designer"] .el-dropdown-menu--mini {
padding: 3px 0;
}
[data-theme="kr-designer"] .el-dropdown-menu--mini .el-dropdown-menu__item {
line-height: 24px;
padding: 0 10px;
font-size: 12px;
}
[data-theme="kr-designer"]
.el-dropdown-menu--mini
.el-dropdown-menu__item.el-dropdown-menu__item--divided {
margin-top: 3px;
}
[data-theme="kr-designer"]
.el-dropdown-menu--mini
.el-dropdown-menu__item.el-dropdown-menu__item--divided:before {
height: 3px;
margin: 0 -10px;
}

binární
theme-chalk/fonts/element-icons.ttf Zobrazit soubor


binární
theme-chalk/fonts/element-icons.woff Zobrazit soubor


+ 1
- 0
theme-chalk/footer.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-footer{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}

+ 0
- 0
theme-chalk/form-item.css Zobrazit soubor


+ 1
- 0
theme-chalk/form.css Zobrazit soubor

@@ -0,0 +1 @@
.el-form-item__content::after,[data-theme=kr-designer] .el-form-item::after{clear:both}[data-theme=kr-designer] .el-form--label-left .el-form-item__label{text-align:left}[data-theme=kr-designer] .el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}[data-theme=kr-designer] .el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}[data-theme=kr-designer] .el-form--inline .el-form-item__label{float:none;display:inline-block}[data-theme=kr-designer] .el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}[data-theme=kr-designer] .el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item__content::after,.el-form-item__content::before,[data-theme=kr-designer] .el-form-item::after,[data-theme=kr-designer] .el-form-item::before{display:table;content:""}[data-theme=kr-designer] .el-form-item{margin-bottom:22px}[data-theme=kr-designer] .el-form-item .el-form-item{margin-bottom:0}[data-theme=kr-designer] .el-form-item--mini.el-form-item,[data-theme=kr-designer] .el-form-item--small.el-form-item{margin-bottom:18px}[data-theme=kr-designer] .el-form-item .el-input__validateIcon{display:none}[data-theme=kr-designer] .el-form-item--medium .el-form-item__content,[data-theme=kr-designer] .el-form-item--medium .el-form-item__label{line-height:36px}[data-theme=kr-designer] .el-form-item--small .el-form-item__content,[data-theme=kr-designer] .el-form-item--small .el-form-item__label{line-height:32px}[data-theme=kr-designer] .el-form-item--small .el-form-item__error{padding-top:2px}[data-theme=kr-designer] .el-form-item--mini .el-form-item__content,[data-theme=kr-designer] .el-form-item--mini .el-form-item__label{line-height:28px}[data-theme=kr-designer] .el-form-item--mini .el-form-item__error{padding-top:1px}.el-form-item__label-wrap{float:left}.el-form-item__label-wrap .el-form-item__label{display:inline-block;float:none}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#606266;line-height:40px;padding:0 12px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-form-item__content{line-height:40px;position:relative;font-size:14px}.el-form-item__content .el-input-group{vertical-align:top}.el-form-item__error{color:#F56C6C;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-form-item__error--inline{position:relative;top:auto;left:auto;display:inline-block;margin-left:10px}[data-theme=kr-designer] .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,[data-theme=kr-designer] .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before{content:'*';color:#F56C6C;margin-right:4px}[data-theme=kr-designer] .el-form-item.is-error .el-input__inner,[data-theme=kr-designer] .el-form-item.is-error .el-input__inner:focus,[data-theme=kr-designer] .el-form-item.is-error .el-textarea__inner,[data-theme=kr-designer] .el-form-item.is-error .el-textarea__inner:focus{border-color:#F56C6C}[data-theme=kr-designer] .el-form-item.is-error .el-input-group__append .el-input__inner,[data-theme=kr-designer] .el-form-item.is-error .el-input-group__prepend .el-input__inner{border-color:transparent}[data-theme=kr-designer] .el-form-item.is-error .el-input__validateIcon{color:#F56C6C}[data-theme=kr-designer] .el-form-item--feedback .el-input__validateIcon{display:inline-block}

+ 1
- 0
theme-chalk/header.css Zobrazit soubor

@@ -0,0 +1 @@
[data-theme=kr-designer] .el-header{padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}

Některé soubory nejsou zobrazny, neboť je v této revizi změněno mnoho souborů

Načítá se…
Zrušit
Uložit