easy-component-ui 2.0.5 → 2.1.1

package/components/ea-message-box/index.js

@@ -1 +1,211 @@
-import Base from"../Base.js";import{EaMessageBox}from"./src/utils/EaMessageBoxClass.js";import"../ea-button/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaMessageBoxElement extends Base{#t;#e;#o;#n;#a;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML='\n            <div class="ea-dialog_wrap" part="container" role="dialog">\n                <div class="ea-dialog_board" part="dialog-body">\n                    <div class="ea-dialog_header" part="dialog-header">\n                        <span class="ea-dialog_header-title" part="dialog-title"></span>\n                        <ea-icon class="ea-dialog_header-close" icon="icon-cancel" part="close-icon"></ea-icon>\n                    </div>\n                    <div class="ea-dialog_content" part="dialog-content"></div>\n                    <div class="ea-dialog_footer" part="dialog-footer">\n                        <div class="ea-dialog_footer-cancel-button" part="footer-cancel-button"></div>\n                        <div class="ea-dialog_footer-confirm-button" part="footer-confirm-button"></div>\n                    </div>\n                </div>\n                <div class="ea-dialog_mask" part="mask-wrap"></div>\n            </div>\n        ',this.#t=t.querySelector(".ea-dialog_wrap"),this.#e=t.querySelector(".ea-dialog_header"),this.#o=t.querySelector(".ea-dialog_content"),this.#n=t.querySelector(".ea-dialog_footer"),this.#a=t.querySelector(".ea-dialog_footer-confirm-button"),this.#i=t.querySelector(".ea-dialog_footer-cancel-button"),this.build(t,stylesheet)}get open(){return this.getAttrBoolean("open")}set open(t){this.toggleAttr("open",t),this.#t.style.display=t?"block":"none"}get content(){return this.getAttribute("content")}set content(t){this.#o.innerHTML=t}get title(){return this.getAttribute("title")}set title(t){this.#e.innerHTML=t}get confirmButtonText(){return this.getAttribute("confirmButtonText")}set confirmButtonText(t){t&&(this.setAttribute("confirmButtonText",t),this.#a.innerHTML=`<ea-button size="medium" type="primary">${t}</ea-button>`,this.#a.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("confirm"))})))}get cancelButtonText(){return this.getAttribute("cancelButtonText")}set cancelButtonText(t){t&&(this.setAttribute("cancelButtonText",t),this.#i.innerHTML=`<ea-button size="medium">${t}</ea-button>`,this.#i.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("cancel"))})))}}customElements.get("ea-message-box")||customElements.define("ea-message-box",EaMessageBoxElement);const messageBox=new EaMessageBox;window.$alert=messageBox,window.$confirm=messageBox;
+import Base from '../Base.js';
+
+import { EaMessageBox } from './src/utils/EaMessageBoxClass.js';
+import "../ea-button/index.js"
+import "../ea-input/index.js"
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaMessageBoxElement extends Base {
+    #wrap;
+
+    #headerWrap;
+
+    #contentWrap;
+    #contentText
+    #contentInput;
+
+    #footerWrap;
+
+    #confirmButton;
+    #cancelButton;
+
+    #reg;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class="ea-dialog_wrap" part="container" role="dialog">
+                <div class="ea-dialog_board" part="dialog-body">
+                    <div class="ea-dialog_header" part="dialog-header">
+                        <span class="ea-dialog_header-title" part="dialog-title"></span>
+                        <ea-icon class="ea-dialog_header-close" icon="icon-cancel" part="close-icon"></ea-icon>
+                    </div>
+                    <div class="ea-dialog_content" part="dialog-content">
+                        <div class="ea-dialog_content-text" part="dialog-content-text"></div>
+                        <ea-input class="ea-dialog_content-input" part="dialog-input"></ea-input>
+                    </div>
+                    <div class="ea-dialog_footer" part="dialog-footer">
+                        <div class="ea-dialog_footer-cancel-button" part="footer-cancel-button"></div>
+                        <div class="ea-dialog_footer-confirm-button" part="footer-confirm-button"></div>
+                    </div>
+                </div>
+                <div class="ea-dialog_mask" part="mask-wrap"></div>
+            </div>
+        `;
+        this.#wrap = shadowRoot.querySelector('.ea-dialog_wrap');
+        this.#headerWrap = shadowRoot.querySelector('.ea-dialog_header');
+        this.#contentWrap = shadowRoot.querySelector('.ea-dialog_content');
+        this.#contentText = shadowRoot.querySelector('.ea-dialog_content-text');
+        this.#contentInput = shadowRoot.querySelector('.ea-dialog_content-input');
+        this.#footerWrap = shadowRoot.querySelector('.ea-dialog_footer');
+
+        this.#confirmButton = shadowRoot.querySelector('.ea-dialog_footer-confirm-button');
+        this.#cancelButton = shadowRoot.querySelector('.ea-dialog_footer-cancel-button');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- open 是否显示 -------
+    // #region
+    get open() {
+        return this.getAttrBoolean('open');
+    }
+
+    set open(flag) {
+        this.toggleAttr('open', flag);
+        this.#wrap.style.display = flag ? 'block' : 'none';
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- content 文字区域 -------
+    // #region
+    get content() {
+        return this.getAttribute('content');
+    }
+
+    set content(content) {
+        this.#contentText.innerHTML = content;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- isPrompt 是否为prompt -------
+    // #region
+    get isPrompt() {
+        return this.getAttrBoolean('isPrompt');
+    }
+
+    set isPrompt(isPrompt) {
+        this.toggleAttr('isPrompt', isPrompt);
+        this.#wrap?.classList.toggle('is-prompt', isPrompt);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- reg 当前输入框的验证规则 -------
+    // #region
+    get reg() {
+        return this.#reg;
+    }
+
+    set reg(reg) {
+        if (!this.isPrompt) return;
+        this.#reg = reg;
+
+        this.#contentInput.addEventListener('change', (e) => {
+            const value = e.detail.value;
+            const input = e.target.shadowRoot.querySelector('.ea-input_inner');
+            input.setAttribute('aria-invalid', !reg.test(value));
+            this.#contentInput.setAttribute('aria-invalid', !reg.test(value));
+
+            if (reg.test(value)) {
+
+            } else {
+
+            }
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- inputPlaceholder 输入框提示 -------
+    // #region
+    get inputPlaceholder() {
+        return this.getAttribute('input-placeholder');
+    }
+
+    set inputPlaceholder(placeholder) {
+        if (!placeholder) return;
+        this.#contentInput.placeholder = placeholder;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- title 标题 -------
+    // #region
+    get title() {
+        return this.getAttribute('title');
+    }
+
+    set title(title) {
+        this.#headerWrap.innerHTML = title;
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- confirmButtonText 确认按钮文本 -------
+    // #region
+    get confirmButtonText() {
+        return this.getAttribute('confirmButtonText');
+    }
+
+    set confirmButtonText(val) {
+        if (!val) return;
+
+        this.setAttribute('confirmButtonText', val);
+        this.#confirmButton.innerHTML = `<ea-button size="medium" type="primary">${val}</ea-button>`;
+        this.#confirmButton.addEventListener('click', () => {
+
+            if (this.isPrompt) {
+                this.dispatchEvent(new CustomEvent('confirm', {
+                    detail: {
+                        target: this.#contentInput,
+                        value: this.#contentInput.value,
+                    }
+                }));
+            } else {
+                this.dispatchEvent(new CustomEvent('confirm'));
+            }
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- cancelButtonText 取消按钮文本 -------
+    // #region
+    get cancelButtonText() {
+        return this.getAttribute('cancelButtonText');
+    }
+
+    set cancelButtonText(val) {
+        if (!val) return;
+
+        this.setAttribute('cancelButtonText', val);
+        this.#cancelButton.innerHTML = `<ea-button size="medium">${val}</ea-button>`;
+        this.#cancelButton.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('cancel'));
+        });
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.dispatchEvent(new CustomEvent('ready'));
+    }
+}
+
+if (!customElements.get('ea-message-box')) {
+    customElements.define('ea-message-box', EaMessageBoxElement);
+}
+
+const messageBox = new EaMessageBox(false);
+
+window.$alert = messageBox;
+window.$confirm = messageBox;
+
+const promptBox = new EaMessageBox(true);
+window.$prompt = promptBox;

package/components/ea-message-box/index.scss

@@ -0,0 +1,113 @@
+@import "../ea-ui-base-style.scss";
+
+:host {
+  --invalid-message: "";
+}
+
+.ea-dialog_wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2024;
+
+  .ea-dialog_board {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+
+    width: 420px;
+    padding-bottom: 10px;
+    border-radius: 4px;
+    border: 1px solid #ebeef5;
+    box-sizing: 0 2px 12px 0;
+
+    font-size: 18px;
+    text-align: left;
+
+    overflow: hidden;
+    backface-visibility: hidden;
+
+    .ea-dialog_header {
+      padding: 15px 15px 10px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .ea-dialog_header-title {
+        font-size: 18px;
+        line-height: 1;
+        color: #303133;
+      }
+
+      .ea-dialog_header-close {
+        display: inline-block;
+        font-size: 16px;
+        color: #909399;
+        cursor: pointer;
+      }
+    }
+
+    .ea-dialog_content {
+      padding: 10px 15px;
+      color: #606266;
+
+      font-size: 14px;
+
+      .ea-dialog_content-input {
+        display: none;
+      }
+    }
+
+    .ea-dialog_footer {
+      padding: 5px 15px 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      :first-child {
+        margin-right: 0.5rem;
+      }
+    }
+  }
+
+  &.is-prompt {
+    .ea-dialog_board {
+      .ea-dialog_content {
+        position: relative;
+
+        .ea-dialog_content-input {
+          margin-top: 15px;
+          padding-bottom: 15px;
+          display: block;
+
+          &::after {
+            content: var(--invalid-message);
+            position: absolute;
+            display: block;
+            bottom: 0;
+            transform-origin: top center;
+            transform: scaleY(0);
+
+            transition: transform 0.3s;
+          }
+
+          &[aria-invalid="true"] {
+            &::after {
+              transform-origin: top center;
+              transform: scaleY(1);
+
+              color: #f56c6c;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/components/ea-message-box/src/style/stylesheet.js

@@ -1 +1,87 @@
-export const stylesheet="\n.ea-dialog_wrap {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2024;\n}\n.ea-dialog_wrap .ea-dialog_board {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: aliceblue;\n  width: 420px;\n  padding-bottom: 10px;\n  border-radius: 4px;\n  border: 1px solid #ebeef5;\n  box-sizing: 0 2px 12px 0;\n  font-size: 18px;\n  text-align: left;\n  overflow: hidden;\n  backface-visibility: hidden;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_header {\n  padding: 15px 15px 10px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-title {\n  font-size: 18px;\n  line-height: 1;\n  color: #303133;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-close {\n  display: inline-block;\n  font-size: 16px;\n  color: #909399;\n  cursor: pointer;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_content {\n  padding: 10px 15px;\n  color: #606266;\n  font-size: 14px;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer {\n  padding: 5px 15px 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer :first-child {\n  margin-right: 0.5rem;\n}\n";
+export const stylesheet = `
+:host {
+  --invalid-message: "";
+}
+
+.ea-dialog_wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2024;
+}
+.ea-dialog_wrap .ea-dialog_board {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  width: 420px;
+  padding-bottom: 10px;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  box-sizing: 0 2px 12px 0;
+  font-size: 18px;
+  text-align: left;
+  overflow: hidden;
+  backface-visibility: hidden;
+}
+.ea-dialog_wrap .ea-dialog_board .ea-dialog_header {
+  padding: 15px 15px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-title {
+  font-size: 18px;
+  line-height: 1;
+  color: #303133;
+}
+.ea-dialog_wrap .ea-dialog_board .ea-dialog_header .ea-dialog_header-close {
+  display: inline-block;
+  font-size: 16px;
+  color: #909399;
+  cursor: pointer;
+}
+.ea-dialog_wrap .ea-dialog_board .ea-dialog_content {
+  padding: 10px 15px;
+  color: #606266;
+  font-size: 14px;
+}
+.ea-dialog_wrap .ea-dialog_board .ea-dialog_content .ea-dialog_content-input {
+  display: none;
+}
+.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer {
+  padding: 5px 15px 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.ea-dialog_wrap .ea-dialog_board .ea-dialog_footer :first-child {
+  margin-right: 0.5rem;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content {
+  position: relative;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content .ea-dialog_content-input {
+  margin-top: 15px;
+  padding-bottom: 15px;
+  display: block;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content .ea-dialog_content-input::after {
+  content: var(--invalid-message);
+  position: absolute;
+  display: block;
+  bottom: 0;
+  transform-origin: top center;
+  transform: scaleY(0);
+  transition: transform 0.3s;
+}
+.ea-dialog_wrap.is-prompt .ea-dialog_board .ea-dialog_content .ea-dialog_content-input[aria-invalid=true]::after {
+  transform-origin: top center;
+  transform: scaleY(1);
+  color: #f56c6c;
+}
+`;

package/components/ea-message-box/src/utils/EaMessageBoxClass.js

@@ -1 +1,60 @@
-import{createElement}from"../../../../utils/createElement.js";export class EaMessageBox{constructor(){}get attrs(){return["cancelButtonText","confirmButtonText"]}#e(e,t,n){n.forEach((n=>{t[n]&&(e[n]=t[n])}))}#t(e){e.remove()}open(e,t,n){const s=createElement("ea-message-box","");return document.body.appendChild(s),s.open=!0,s.content=e,s.title=t,this.#e(s,n,this.attrs),new Promise(((e,t)=>{s.addEventListener("cancel",(()=>{this.#t(s),t()})),s.addEventListener("confirm",(()=>{this.#t(s),e(!0)}))}))}}
+import { createElement } from "../../../../utils/createElement.js"
+
+export class EaMessageBox {
+    constructor(isPrompt) {
+        this.isPrompt = isPrompt;
+    }
+
+    get attrs() {
+        return ["cancelButtonText", "confirmButtonText"];
+    }
+
+    #handleElementAttrs(el, options, attrs) {
+        attrs.forEach(attr => {
+            if (options[attr]) el[attr] = options[attr];
+        });
+    }
+
+    #close(el) {
+        el.remove();
+    }
+
+    open(content, title, options) {
+        const EaMessageBox = createElement('ea-message-box');
+        EaMessageBox.addEventListener('ready', () => {
+            if (this.isPrompt) EaMessageBox.isPrompt = true;
+            EaMessageBox.reg = new RegExp(options.reg);
+            EaMessageBox.style.setProperty('--invalid-message', `"${options.invalidMessage}"`);
+            EaMessageBox.inputPlaceholder = options.inputPlaceholder;
+        });
+        document.body.appendChild(EaMessageBox);
+
+        EaMessageBox.open = true;
+
+        EaMessageBox.content = content;
+        EaMessageBox.title = title;
+
+        this.#handleElementAttrs(EaMessageBox, options, this.attrs);
+
+        return new Promise((resolve, reject) => {
+            EaMessageBox.addEventListener('cancel', () => {
+                this.#close(EaMessageBox);
+                reject();
+            });
+
+            EaMessageBox.addEventListener('confirm', (e) => {
+                if (this.isPrompt && !options.reg.test(e.detail.value)) {
+                    e.detail.target.setAttribute('aria-invalid', true);
+                    e.detail.target.focus();
+
+                    return;
+                }
+
+                this.#close(EaMessageBox);
+                if (this.isPrompt) resolve(e.detail.value);
+                else resolve(true);
+            });
+        });
+    }
+
+}

package/components/ea-option/index.css

@@ -0,0 +1,24 @@
+.ea-option_wrap {
+  position: relative;
+  padding: 0 20px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  color: #606266;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.ea-option_wrap.is-checked {
+  color: #409eff;
+  font-weight: 700;
+}
+.ea-option_wrap.is-disabled {
+  color: #c0c4cc;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.ea-option_wrap:hover {
+  background-color: #f5f7fa;
+}

package/components/ea-option/index.js

@@ -1 +1,74 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaOption extends Base{#e;constructor(){super();const e=this.attachShadow({mode:"open"});e.innerHTML="\n            <div class='ea-option_wrap' part='container'>\n                <slot></slot>\n            </div>\n        ",this.#e=e.querySelector(".ea-option_wrap"),this.build(e,stylesheet)}get value(){return this.getAttribute("value")||""}set value(e){this.setAttribute("value",e)}get checked(){return this.getAttrBoolean("checked")||!1}set checked(e){this.setAttribute("checked",e),this.#e.classList.toggle("is-checked",e)}get disabled(){return this.getAttrBoolean("disabled")||!1}set disabled(e){this.setAttribute("disabled",e),this.#e.classList.toggle("is-disabled",e)}connectedCallback(){this.value=this.value,this.disabled=this.disabled}}customElements.get("ea-option")||customElements.define("ea-option",EaOption);
+// @ts-nocheck
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaOption extends Base {
+    #container;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class='ea-option_wrap' part='container'>
+                <slot></slot>
+            </div>
+        `;
+
+        this.#container = shadowRoot.querySelector('.ea-option_wrap');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- value 选项值 -------
+    // #region
+    get value() {
+        return this.getAttribute('value') || '';
+    }
+
+    set value(val) {
+        this.setAttribute('value', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- checked 选项是否选中 -------
+    // #region
+    get checked() {
+        return this.getAttrBoolean('checked') || false;
+    }
+
+    set checked(val) {
+        this.setAttribute('checked', val);
+
+        this.#container.classList.toggle('is-checked', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- disabled 选项是否禁用 -------
+    // #region
+    get disabled() {
+        return this.getAttrBoolean('disabled') || false;
+    }
+
+    set disabled(val) {
+        this.setAttribute('disabled', val);
+
+        this.#container.classList.toggle('is-disabled', val);
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.value = this.value;
+
+        this.disabled = this.disabled;
+    }
+}
+
+if (!customElements.get('ea-option')) {
+    customElements.define('ea-option', EaOption);
+}

package/components/ea-option/index.scss

@@ -0,0 +1,31 @@
+.ea-option_wrap {
+  position: relative;
+  padding: 0 20px;
+
+  height: 30px;
+  line-height: 30px;
+
+  font-size: 14px;
+  color: #606266;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  cursor: pointer;
+
+  &.is-checked {
+    color: #409eff;
+    font-weight: 700;
+  }
+
+  &.is-disabled {
+    color: #c0c4cc;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    background-color: #f5f7fa;
+  }
+}

package/components/ea-option/src/style/stylesheet.js

@@ -1 +1,26 @@
-export const stylesheet="\n.ea-option_wrap {\n  position: relative;\n  padding: 0 20px;\n  height: 30px;\n  line-height: 30px;\n  font-size: 14px;\n  color: #606266;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ea-option_wrap.is-checked {\n  color: #409eff;\n  font-weight: 700;\n}\n.ea-option_wrap.is-disabled {\n  color: #c0c4cc;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n.ea-option_wrap:hover {\n  background-color: #f5f7fa;\n}\n";
+export const stylesheet = `
+.ea-option_wrap {
+  position: relative;
+  padding: 0 20px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  color: #606266;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.ea-option_wrap.is-checked {
+  color: #409eff;
+  font-weight: 700;
+}
+.ea-option_wrap.is-disabled {
+  color: #c0c4cc;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.ea-option_wrap:hover {
+  background-color: #f5f7fa;
+}
+`;

package/components/ea-option-gropu/index.css

@@ -0,0 +1,6 @@
+.ea-option-group_wrap .ea-option-group_title {
+  padding-left: 20px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 30px;
+}