bi-element-ui 1.1.9 → 1.1.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.browserslistrc +3 -3
- package/.eslintignore +1 -1
- package/.prettierrc +8 -8
- package/.prettierrc.json +8 -8
- package/.vscode/extensions.json +3 -3
- package/.vscode/settings.json +2 -2
- package/README.md +148 -148
- package/cypress.json +3 -3
- package/dist/css/about.734427a8.css +1 -0
- package/dist/css/chunk-vendors.8b3b4be2.css +22 -0
- package/dist/css/index.9e71d803.css +1 -0
- package/dist/js/about.4ff3d4f9.js +2 -0
- package/dist/js/chunk-vendors.d907e1f2.js +387 -0
- package/dist/js/index.66b4892a.js +11 -0
- package/lib/{bi-element-ui.common.js → Bi-element-ui.common.js} +136967 -136910
- package/lib/{bi-element-ui.umd.js → Bi-element-ui.umd.js} +136967 -136910
- package/lib/{bi-element-ui.umd.min.js → Bi-element-ui.umd.min.js} +46 -46
- package/package-lock2.json +17309 -17309
- package/package.json +1 -1
- package/src/components/BiDatePicker/datePickerOption.js +163 -163
- package/src/components/BiDatePicker/index.vue +59 -59
- package/src/components/BiTable/columu.vue +81 -81
- package/src/components/BiTable/forced.js +63 -63
- package/src/components/BiTable/index.js +6 -6
- package/src/components/BiTable/render.vue +13 -13
- package/src/components/BiTable/table.vue +179 -179
- package/src/components/BiTableColumn/Group.vue +275 -275
- package/src/components/BiTableColumn/api.js +16 -16
- package/src/components/BiTooltipIcon/index.vue +63 -63
- package/src/components/EditBtn.vue +15 -15
- package/src/components/FreeButton/index.vue +50 -50
- package/src/components/Pagination/index.vue +91 -91
- package/src/components/Pagination/scrollTo.js +65 -65
- package/src/router/index.js +44 -44
- package/src/store/index.js +11 -11
- package/src/views/Date.vue +96 -96
- package/src/views/Home.vue +11 -0
- package/src/views/Layout.vue +34 -34
- package/src/views/Scene.vue +111 -111
- package/src/views/showData.vue +2 -2
- package/tests/e2e/.eslintrc.js +10 -10
- package/tests/e2e/plugins/index.js +25 -25
- package/tests/e2e/specs/test.js +8 -8
- package/tests/e2e/support/commands.js +25 -25
- package/tests/e2e/support/index.js +20 -20
- package/tests/unit/example.spec.js +13 -13
- package//345/211/215/347/253/257ui/346/240/267/345/274/217/350/247/204/350/214/203.md +101 -101
- package/pnpm-lock.yaml +0 -13329
- /package/lib/{bi-element-ui.css → Bi-element-ui.css} +0 -0
@@ -1,25 +1,25 @@
|
|
1
|
-
// ***********************************************
|
2
|
-
// This example commands.js shows you how to
|
3
|
-
// create various custom commands and overwrite
|
4
|
-
// existing commands.
|
5
|
-
//
|
6
|
-
// For more comprehensive examples of custom
|
7
|
-
// commands please read more here:
|
8
|
-
// https://on.cypress.io/custom-commands
|
9
|
-
// ***********************************************
|
10
|
-
//
|
11
|
-
//
|
12
|
-
// -- This is a parent command --
|
13
|
-
// Cypress.Commands.add("login", (email, password) => { ... })
|
14
|
-
//
|
15
|
-
//
|
16
|
-
// -- This is a child command --
|
17
|
-
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
|
18
|
-
//
|
19
|
-
//
|
20
|
-
// -- This is a dual command --
|
21
|
-
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
|
22
|
-
//
|
23
|
-
//
|
24
|
-
// -- This is will overwrite an existing command --
|
25
|
-
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
|
1
|
+
// ***********************************************
|
2
|
+
// This example commands.js shows you how to
|
3
|
+
// create various custom commands and overwrite
|
4
|
+
// existing commands.
|
5
|
+
//
|
6
|
+
// For more comprehensive examples of custom
|
7
|
+
// commands please read more here:
|
8
|
+
// https://on.cypress.io/custom-commands
|
9
|
+
// ***********************************************
|
10
|
+
//
|
11
|
+
//
|
12
|
+
// -- This is a parent command --
|
13
|
+
// Cypress.Commands.add("login", (email, password) => { ... })
|
14
|
+
//
|
15
|
+
//
|
16
|
+
// -- This is a child command --
|
17
|
+
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
|
18
|
+
//
|
19
|
+
//
|
20
|
+
// -- This is a dual command --
|
21
|
+
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
|
22
|
+
//
|
23
|
+
//
|
24
|
+
// -- This is will overwrite an existing command --
|
25
|
+
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
|
@@ -1,20 +1,20 @@
|
|
1
|
-
// ***********************************************************
|
2
|
-
// This example support/index.js is processed and
|
3
|
-
// loaded automatically before your test files.
|
4
|
-
//
|
5
|
-
// This is a great place to put global configuration and
|
6
|
-
// behavior that modifies Cypress.
|
7
|
-
//
|
8
|
-
// You can change the location of this file or turn off
|
9
|
-
// automatically serving support files with the
|
10
|
-
// 'supportFile' configuration option.
|
11
|
-
//
|
12
|
-
// You can read more here:
|
13
|
-
// https://on.cypress.io/configuration
|
14
|
-
// ***********************************************************
|
15
|
-
|
16
|
-
// Import commands.js using ES2015 syntax:
|
17
|
-
import './commands'
|
18
|
-
|
19
|
-
// Alternatively you can use CommonJS syntax:
|
20
|
-
// require('./commands')
|
1
|
+
// ***********************************************************
|
2
|
+
// This example support/index.js is processed and
|
3
|
+
// loaded automatically before your test files.
|
4
|
+
//
|
5
|
+
// This is a great place to put global configuration and
|
6
|
+
// behavior that modifies Cypress.
|
7
|
+
//
|
8
|
+
// You can change the location of this file or turn off
|
9
|
+
// automatically serving support files with the
|
10
|
+
// 'supportFile' configuration option.
|
11
|
+
//
|
12
|
+
// You can read more here:
|
13
|
+
// https://on.cypress.io/configuration
|
14
|
+
// ***********************************************************
|
15
|
+
|
16
|
+
// Import commands.js using ES2015 syntax:
|
17
|
+
import './commands'
|
18
|
+
|
19
|
+
// Alternatively you can use CommonJS syntax:
|
20
|
+
// require('./commands')
|
@@ -1,13 +1,13 @@
|
|
1
|
-
import { expect } from 'chai'
|
2
|
-
import { shallowMount } from '@vue/test-utils'
|
3
|
-
import HelloWorld from '@/components/HelloWorld.vue'
|
4
|
-
|
5
|
-
describe('HelloWorld.vue', () => {
|
6
|
-
it('renders props.msg when passed', () => {
|
7
|
-
const msg = 'new message'
|
8
|
-
const wrapper = shallowMount(HelloWorld, {
|
9
|
-
propsData: { msg }
|
10
|
-
})
|
11
|
-
expect(wrapper.text()).to.include(msg)
|
12
|
-
})
|
13
|
-
})
|
1
|
+
import { expect } from 'chai'
|
2
|
+
import { shallowMount } from '@vue/test-utils'
|
3
|
+
import HelloWorld from '@/components/HelloWorld.vue'
|
4
|
+
|
5
|
+
describe('HelloWorld.vue', () => {
|
6
|
+
it('renders props.msg when passed', () => {
|
7
|
+
const msg = 'new message'
|
8
|
+
const wrapper = shallowMount(HelloWorld, {
|
9
|
+
propsData: { msg }
|
10
|
+
})
|
11
|
+
expect(wrapper.text()).to.include(msg)
|
12
|
+
})
|
13
|
+
})
|
@@ -1,101 +1,101 @@
|
|
1
|
-
# 前端 ui 样式规范
|
2
|
-
|
3
|
-
### 字体
|
4
|
-
|
5
|
-
```css
|
6
|
-
.text-12 {
|
7
|
-
font-size: 12px;
|
8
|
-
line-height: 18px;
|
9
|
-
}
|
10
|
-
.text-14 {
|
11
|
-
font-size: 14px;
|
12
|
-
line-height: 20px;
|
13
|
-
}
|
14
|
-
.text-16 {
|
15
|
-
font-size: 16px;
|
16
|
-
line-height: 22px;
|
17
|
-
}
|
18
|
-
.text-24 {
|
19
|
-
font-size: 16px;
|
20
|
-
line-height: 34px;
|
21
|
-
}
|
22
|
-
```
|
23
|
-
|
24
|
-
### 布局
|
25
|
-
|
26
|
-
```html
|
27
|
-
<div class="container"></div>
|
28
|
-
```
|
29
|
-
|
30
|
-
```css
|
31
|
-
.container {
|
32
|
-
padding: 20px;
|
33
|
-
}
|
34
|
-
.container + .container {
|
35
|
-
margin-top: 10px;
|
36
|
-
}
|
37
|
-
```
|
38
|
-
|
39
|
-
### 表单布局
|
40
|
-
|
41
|
-
![搜索条件布局][service_life]
|
42
|
-
|
43
|
-
```html
|
44
|
-
<div class="search-form">
|
45
|
-
<div class="search-item">
|
46
|
-
<div class="item-label">常规搜索项</div>
|
47
|
-
<div class="item-content"><el-input /></div>
|
48
|
-
</div>
|
49
|
-
<div class="search-item">
|
50
|
-
<div class="select-label"><el-select /></div>
|
51
|
-
<div class="select-content"><el-input /></div>
|
52
|
-
</div>
|
53
|
-
</div>
|
54
|
-
```
|
55
|
-
|
56
|
-
### 表格
|
57
|
-
|
58
|
-
```vue
|
59
|
-
<template>
|
60
|
-
<el-table :data="tableData" border height="200" :summary-method="getSummaries" show-summary>
|
61
|
-
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
|
62
|
-
<el-table-column prop="name" label="姓名"> </el-table-column>
|
63
|
-
<el-table-column prop="amount1" label="数值 1(元)"> </el-table-column>
|
64
|
-
<el-table-column prop="amount2" label="数值 2(元)"> </el-table-column>
|
65
|
-
<el-table-column prop="amount3" label="数值 3(元)"> </el-table-column>
|
66
|
-
</el-table>
|
67
|
-
</template>
|
68
|
-
<script>
|
69
|
-
export default {
|
70
|
-
data() {
|
71
|
-
return {
|
72
|
-
tableData: [
|
73
|
-
{
|
74
|
-
id: '12987122',
|
75
|
-
name: '王小虎',
|
76
|
-
amount1: '234',
|
77
|
-
amount2: '3.2',
|
78
|
-
amount3: 10
|
79
|
-
},
|
80
|
-
{
|
81
|
-
id: '12987123',
|
82
|
-
name: '王小虎',
|
83
|
-
amount1: '165',
|
84
|
-
amount2: '4.43',
|
85
|
-
amount3: 12
|
86
|
-
}
|
87
|
-
]
|
88
|
-
}
|
89
|
-
},
|
90
|
-
methods: {
|
91
|
-
getSummaries() {
|
92
|
-
// 合计行现支持 返回 数组和对象两种方式
|
93
|
-
// return ['总计','xxxx','123','45','32']
|
94
|
-
// return { id:'总计',name:'xxxx',amount1:'123',amount2:'45',amount3:'32', }
|
95
|
-
}
|
96
|
-
}
|
97
|
-
}
|
98
|
-
</script>
|
99
|
-
```
|
100
|
-
|
101
|
-
[service_life]: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gNzUK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgAiwFhAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A9stP+PpPx/lWnWZaf8fSfj/KtOgAooooAKKKKACiiigAooooAKKKZIBjJGcdqAHbhkD1pA2SwHbvUZBVBkcg5GPSlUnIUYUdfXNADTnec8/pRhQQxOAakZSRgYA70xRu+UKMdyKAHuCEzkdOSaj/AIR8pOelTEAjBFNWNRjuRQAxCflxuPY+lTUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUm4ZA9abIBjJGcdqYQVQZHIORj0oAkDZLAdu9RHO855/SnKTkKMKOvrmnMpIwMAd6AI8KCGJwDUjghM5HTkmmKN3yhRjuRUpAIwRQBD/CPlJz0pUJ+XG49j6U9Y1GO5FPoAKKKKAMy0/wCPpPx/lWnWZaf8fSfj/KtOgAooooAKKKKACio4riGaSZI5FZ4X2SAHlGwGwfwYH8ajnv7S2E5muI08iLzpQW5ROfmI644PPsaALFFRLdQNdNbLKpmWNZGQHkKSQD9CVP5U/eucbhn0zQA6muVCEt0qK0vbW/hEtpcRzIVVsowPDKGXPpkEH6Gnzf6sf76/+hCgCPeQ4Ahk54PI/wAaA0hADQvge6/41PgZzjmloAhyxABhkP4r/jThIwHED/mv+NPJAGSRilJAxk9elAEfmN/zxk/Nf8aPMb/njJ+a/wCNPyM4yM9cUuRnGeaAI/Mb/njJ+a/40eY3/PGT81/xqSigCPzG/wCeMn5r/jR5jf8APGT81/xqSigCPzG/54yfmv8AjR5jf88ZPzX/ABqSigCPzG/54yfmv+NHmN/zxk/Nf8akooAj8xv+eMn5r/jR5jf88ZPzX/GpKKAI/Mb/AJ4yfmv+NHmN/wA8ZPzX/GpKKAI/Mb/njJ+a/wCNHmN/zxk/Nf8AGpKKAI/Mb/njJ+a/40eY3/PGT81/xqSigCPzG/54yfmv+NHmN/zxk/Nf8akooAiLsQQYZOfdf8aZuKuAIZOeDyv+NWKTAznHNAEAaQgBoXwPdf8AGnZYgAwyH8V/xqaigBiOGyACpHUHtT6jH/Hw/wDuL/M1JQAUUUUAFFFFAGZaf8fSfj/KtOsy0/4+k/H+VadABRRRQAVT1RS1i5Ftc3LKQRFbTeU7c44Yso755ParlVb60lvIlSG/ubJg2S9uIyT7HerDH4UAcVYed/b2rAeH9bb/AFJKLqKBl+TufP5z9T+FXfGFsrRtbrcRmWa0EMELxkupMsaZEg52kuoYEnOBjoa0o/DM8NzPcx+I9WE0+3zG22/zbRgf8sfSppvDkNxcx3M17dSTosaiRtnJj3lTgLjO5g3TGUXsMUAcPbi2TWNNdnZbqe6aKdBaSSxrHC7KBG2CQDjpk4LMSe1aU9nEPiItnG1rbTlZLmO/htUEwkdSBEx24Y7fNYZ5I6jjJ6iz8PxWdxZSi7uJFtEkCI+3DO5JZ2wAcnJ4GB7VK2g2Bs7i2CSItxKZpZEkYSM5PJ353Dj5eDwOBigDnPAMPlo6B55DaQJZSSylRl4iVKKAoyEGOST94j1rspvuD/fX/wBCFZeneGrDSb83NmHjjEZSO2GPKi3bd5UYyC2xc89QT1JzqTfcH++v/oQoAkpHDFCFxntkZFLRQBizqrpCNqqSobAUHHPTk9PapJMi2tpQp8sH+FtmCSB2PoTVxbCFeg/hxzz+NO+xxeVGhAJjIIYgZ4OadxFCFx52cybyw+Ykc5YL/d6e3Srt3uZ41iAMy5cfQdvx4H/6qFsI0bIJ+8GPA7HP86mjiWMswyWY5Zj1NAx0ciyxrIv3WGRTqjSFY3dlyN5yV7Z9akpAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAQyu8L7zloj94Acr7+4pYjI5MjZVT91COcep9/apaKAIx/wAfD/7i/wAzUlRj/j4f/cX+ZqSgAooooAKKKKAMy0/4+k/H+VadZlp/x9J+P8q06ACiiigAooooAKKKKACiiigApsi70IBweCD7jmnUUAR5m/uR/wDfZ/wozN/zzj/77P8AhUlFAEeZv+ecf/fZ/wAKMzf884/++z/hUlFAEeZv+ecf/fZ/wozN/wA84/8Avs/4VJRQBHmb/nnH/wB9n/CjM3/POP8A77P+FSUUAR5m/wCecf8A32f8KMzf884/++z/AIVJRQBHmb/nnH/32f8ACjM3/POP/vs/4VJRQBHmb/nnH/32f8KMzf8APOP/AL7P+FSUUAR5m/55x/8AfZ/wozN/zzj/AO+z/hUlFAEeZv8AnnH/AN9n/CjM3/POP/vs/wCFSUUAR5m/55x/99n/AAozN/zzj/77P+FSUUAR5m/55x/99n/CjM3/ADzj/wC+z/hUlFAEeZv+ecf/AH2f8KMzf884/wDvs/4VJRQBHmb/AJ5x/wDfZ/wozN/zzj/77P8AhUlFAEeZv+ecf/fZ/wAKMzf884/++z/hUlFADEVgzO+NxwMDsB/+un0UUAFFFFABRRRQBmWn/H0n4/yrTrMtP+PpPx/lWnQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAZlp/wAfSfj/ACrTrMtP+PpPx/lWnQAVCEWSSQuobBwAeewP9amqOP783+//AOyigA8iH/nlH/3yKPIh/wCeUf8A3yKkrnda1m9sdRaGB4RGsSPh4ixYnzSedwwMR+h60Ab3kQ/88o/++RR5EP8Azyj/AO+RWRpurzXk5jPleWk04klZgMhZHVFUZ64AJPT8+KE/iC4W8uFW7tlhWTERVEfcuBznzR3z2oA6byIf+eUf/fIo8iH/AJ5R/wDfIqro9619pkMsrxNPtHmiJgQrenBOPzq9QBH5EP8Azyj/AO+RR5EP/PKP/vkVJRQBH5EP/PKP/vkUeRD/AM8o/wDvkUskqxbS2QpON3YfWhpVWRY+Szdh2HqaAI5IYg8QESctz8o54NP8iH/nlH/3yKJPvw/7/wD7KakoAj8iH/nlH/3yKPIh/wCeUf8A3yKJ5PLhZt23A67ScfgKpzXdwsiBACM/NiMkdPXIzz9KYFzyIf8AnlH/AN8ijyIf+eUf/fIqs93Is0ahVYFMtztJPXp/wE96Le6kkcbwpVzgbWU7T+B54oAs+RD/AM8o/wDvkUeRD/zyj/75FMlnMVzErEbJOOnIPr9OQPypLyZ4Y0KEDLHJIzwFJ9R6UASeRD/zyj/75FHkQ/8APKP/AL5FVUu5Wcp8hbaPYA5YEn8hxTrm6aOZVR0C4OehOfzFAFjyIf8AnlH/AN8ijyIf+eUf/fIqG0uGlLh2QkH5cYBIx6ZNWqQEfkQ/88o/++RR5EP/ADyj/wC+RUlFAEfkQ/8APKP/AL5FHkQ/88o/++RUlFAEfkQ/88o/++RR5EP/ADyj/wC+RUlFAEfkQ/8APKP/AL5FHkQ/88o/++RUlFAEfkQ/88o/++RR5EP/ADyj/wC+RUlFAEfkQ/8APKP/AL5FHkQ/88o/++RUlFAEfkQ/88o/++RR5EP/ADyT/vkVJRQBHENpkUdFbA/IH+tSVHH9+b/f/wDZRUlABRRRQAUUUUAZlp/x9J+P8q06zLT/AI+k/H+VadABUcf35v8Af/8AZRUlQh1jkkDsFycgngdAP6UATVz2s6VPeakbiKF3RYVVx5irvwWACe4Dv1wPuj1I3fPh/wCesf8A30KPPh/56x/99CgDnNK0eS01EXH9lwxr506Mfk3FGkd0cY6AA7cdfm9ubd9o0UU0t3ALstKV3RWywnoMZG8e3r3rY8+H/nrH/wB9Cjz4f+esf/fQoAraTBNBplutyoFwUBlwFHze+3jPbirtR+fD/wA9Y/8AvoUefD/z1j/76FAElFR+fD/z1j/76FHnw/8APWP/AL6FADyAylSAQeCDTIoEhB25yepJyfYUefD/AM9Y/wDvoUefD/z1j/76FABJ9+H/AH//AGU1JUEk0ReIiVOG5+YccGn+fD/z1j/76FACzKXgkVeSVIH5VnS2Uz+Y7KhbaAAFBzx2zWh58P8Az1j/AO+hR58P/PWP/voUwKk9o8nkHCHYMH5BkfKe/wBaZbW00csbMrHDZP0Ckdye5q958P8Az1j/AO+hR58P/PWP/voUARC3MyyNP96QY2j+AfX196ZLFNPCsci/Or43g8EYIz+RPHrVjz4f+esf/fQo8+H/AJ6x/wDfQoAo/ZHMhb7OpbapyxB5BbI/HNW5rdZCr/MrKDjaBk/nT/Ph/wCesf8A30KPPh/56x/99CgCK1R1LlwwGfl3hc4x7VZqPz4f+esf/fQo8+H/AJ6x/wDfQpASUVH58P8Az1j/AO+hR58P/PWP/voUASUVH58P/PWP/voUefD/AM9Y/wDvoUASUVH58P8Az1j/AO+hR58P/PWP/voUASUVH58P/PWP/voUefD/AM9Y/wDvoUASUVH58P8Az1j/AO+hR58P/PWP/voUASUVH58P/PWP/voUefD/AM9Y/wDvoUASUVH58P8Az1j/AO+hR58P/PVP++hQAR/fm/3/AP2UVJUcR3GRh0Zsj8gP6VJQAUUUUAFFFFAGZaf8fSfj/KtOsy0/4+k/H+VadABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQBl2ZzdKPr/KtSsqy/4+x+P8q1aACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigApMgHGRmlqIKDESRzzzQA8thgoGTQrZYgjBFCjOD3xSJy7n3oAfRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//9k=
|
1
|
+
# 前端 ui 样式规范
|
2
|
+
|
3
|
+
### 字体
|
4
|
+
|
5
|
+
```css
|
6
|
+
.text-12 {
|
7
|
+
font-size: 12px;
|
8
|
+
line-height: 18px;
|
9
|
+
}
|
10
|
+
.text-14 {
|
11
|
+
font-size: 14px;
|
12
|
+
line-height: 20px;
|
13
|
+
}
|
14
|
+
.text-16 {
|
15
|
+
font-size: 16px;
|
16
|
+
line-height: 22px;
|
17
|
+
}
|
18
|
+
.text-24 {
|
19
|
+
font-size: 16px;
|
20
|
+
line-height: 34px;
|
21
|
+
}
|
22
|
+
```
|
23
|
+
|
24
|
+
### 布局
|
25
|
+
|
26
|
+
```html
|
27
|
+
<div class="container"></div>
|
28
|
+
```
|
29
|
+
|
30
|
+
```css
|
31
|
+
.container {
|
32
|
+
padding: 20px;
|
33
|
+
}
|
34
|
+
.container + .container {
|
35
|
+
margin-top: 10px;
|
36
|
+
}
|
37
|
+
```
|
38
|
+
|
39
|
+
### 表单布局
|
40
|
+
|
41
|
+
![搜索条件布局][service_life]
|
42
|
+
|
43
|
+
```html
|
44
|
+
<div class="search-form">
|
45
|
+
<div class="search-item">
|
46
|
+
<div class="item-label">常规搜索项</div>
|
47
|
+
<div class="item-content"><el-input /></div>
|
48
|
+
</div>
|
49
|
+
<div class="search-item">
|
50
|
+
<div class="select-label"><el-select /></div>
|
51
|
+
<div class="select-content"><el-input /></div>
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
```
|
55
|
+
|
56
|
+
### 表格
|
57
|
+
|
58
|
+
```vue
|
59
|
+
<template>
|
60
|
+
<el-table :data="tableData" border height="200" :summary-method="getSummaries" show-summary>
|
61
|
+
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
|
62
|
+
<el-table-column prop="name" label="姓名"> </el-table-column>
|
63
|
+
<el-table-column prop="amount1" label="数值 1(元)"> </el-table-column>
|
64
|
+
<el-table-column prop="amount2" label="数值 2(元)"> </el-table-column>
|
65
|
+
<el-table-column prop="amount3" label="数值 3(元)"> </el-table-column>
|
66
|
+
</el-table>
|
67
|
+
</template>
|
68
|
+
<script>
|
69
|
+
export default {
|
70
|
+
data() {
|
71
|
+
return {
|
72
|
+
tableData: [
|
73
|
+
{
|
74
|
+
id: '12987122',
|
75
|
+
name: '王小虎',
|
76
|
+
amount1: '234',
|
77
|
+
amount2: '3.2',
|
78
|
+
amount3: 10
|
79
|
+
},
|
80
|
+
{
|
81
|
+
id: '12987123',
|
82
|
+
name: '王小虎',
|
83
|
+
amount1: '165',
|
84
|
+
amount2: '4.43',
|
85
|
+
amount3: 12
|
86
|
+
}
|
87
|
+
]
|
88
|
+
}
|
89
|
+
},
|
90
|
+
methods: {
|
91
|
+
getSummaries() {
|
92
|
+
// 合计行现支持 返回 数组和对象两种方式
|
93
|
+
// return ['总计','xxxx','123','45','32']
|
94
|
+
// return { id:'总计',name:'xxxx',amount1:'123',amount2:'45',amount3:'32', }
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
98
|
+
</script>
|
99
|
+
```
|
100
|
+
|
101
|
+
[service_life]: data:image/jpeg;base64,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
|