x-mavon-editor 0.0.1

package/mavon-editor.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "vue";
+interface VueMavonEditor {
+  markdownIt: any;
+  mavonEditor: Component;
+  LeftToolbar: Component;
+  RightToolbar: Component;
+  install: (Vue: any) => any;
+}
+declare let editor: VueMavonEditor;
+export default editor;

package/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "x-mavon-editor",
+  "version": "0.0.1",
+  "description": "Vue markdown editor",
+  "main": "dist/mavon-editor.js",
+  "types": "./mavon-editor.d.ts",
+  "scripts": {
+    "dev": "webpack-dev-server --progress --config webpack/webpack.dev.js",
+    "ci-build": "webpack --progress --config webpack/webpack.build.js",
+    "build": "run-s lint test ci-build",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint --ext .js,.vue src/",
+    "lint:fix": "eslint --fix --ext .js,.vue src/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hinesboy/mavonEditor.git"
+  },
+  "keywords": [
+    "javascript",
+    "vue",
+    "markdown",
+    "editor",
+    "html"
+  ],
+  "files": [
+    "dist",
+    "mavon-editor.d.ts",
+    "src"
+  ],
+  "author": "hinesboy",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hinesboy/mavonEditor/issues"
+  },
+  "homepage": "https://github.com/hinesboy/mavonEditor#readme",
+  "dependencies": {
+    "xss": "^1.0.10"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^1.1.2",
+    "auto-textarea": "^1.4.0",
+    "autoprefixer": "^8.3.0",
+    "babel-core": "^6.0.0",
+    "babel-eslint": "^8.0.2",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "copy-webpack-plugin": "^4.2.3",
+    "css-loader": "^0.28.1",
+    "eslint": "^4.11.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-plugin-html": "^4.0.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.11.1",
+    "github-markdown-css": "^2.6.0",
+    "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.28.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^23.6.0",
+    "jest-raw-loader": "^1.0.1",
+    "jest-serializer-vue": "^2.0.2",
+    "katex": "^0.11.1",
+    "keycode": "^2.1.9",
+    "less": "^2.7.2",
+    "less-loader": "^4.0.4",
+    "markdown-it": "^13.0.2",
+    "markdown-it-abbr": "^2.0.0",
+    "markdown-it-container": "^4.0.0",
+    "markdown-it-deflist": "^3.0.0",
+    "markdown-it-emoji": "^3.0.0",
+    "markdown-it-footnote": "^4.0.0",
+    "markdown-it-for-inline": "~2.0.1",
+    "markdown-it-gridtables": "^0.6.0",
+    "markdown-it-highlightjs-external": "^1.0.1",
+    "markdown-it-images-preview": "^1.0.0",
+    "markdown-it-ins": "^4.0.0",
+    "markdown-it-katex-external": "^1.0.0",
+    "markdown-it-mark": "^4.0.0",
+    "markdown-it-sub": "^2.0.0",
+    "markdown-it-sup": "^2.0.0",
+    "markdown-it-task-lists": "^2.1.1",
+    "markdown-it-toc": "^1.1.0",
+    "merges-utils": "^1.0.3",
+    "optimize-css-assets-webpack-plugin": "^1.3.1",
+    "postcss": "^5.0.10",
+    "postcss-advanced-variables": "1.2.2",
+    "postcss-atroot": "^0.1.2",
+    "postcss-color-function": "^3.0.0",
+    "postcss-custom-media": "^5.0.0",
+    "postcss-custom-properties": "^5.0.0",
+    "postcss-custom-selectors": "^3.0.0",
+    "postcss-extend": "^1.0.1",
+    "postcss-loader": "^1.3.3",
+    "postcss-media-minmax": "^2.1.0",
+    "postcss-mixins": "^5.4.1",
+    "postcss-nested": "^1.0.0",
+    "postcss-nested-import": "^0.1.0",
+    "postcss-nesting": "^2.0.6",
+    "postcss-partial-import": "^3.1.1",
+    "postcss-property-lookup": "^1.1.3",
+    "postcss-selector-matches": "^2.0.0",
+    "postcss-selector-not": "^2.0.0",
+    "raw-loader": "^0.5.1",
+    "style-loader": "^0.17.0",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^2.5.1",
+    "url-loader": "^0.5.8",
+    "vue": "^2.3.4",
+    "vue-jest": "^3.0.7",
+    "vue-loader": "^13.7.0",
+    "vue-style-loader": "^3.0.0",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.4.1",
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-dev-server": "^2.11.5",
+    "webpack-md5-hash": "^0.0.5"
+  }
+}

package/src/components/md-toolbar-left.vue

@@ -0,0 +1,489 @@
+<template>
+    <div class="v-left-item">
+        <slot name="left-toolbar-before" />
+        <button :disabled="!editable" type="button" v-if="toolbars.bold" @click="$clicks('bold')"
+                class="op-icon fa fa-mavon-bold" aria-hidden="true"
+                :title="`${d_words.tl_bold} (ctrl+b)`"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.italic" @click="$clicks('italic')"
+                class="op-icon fa fa-mavon-italic" aria-hidden="true"
+                :title="`${d_words.tl_italic} (ctrl+i)`"></button>
+        <div :class="{'selected': s_header_dropdown_open}" :disabled="!editable" type="button" v-if="toolbars.header" @mouseleave="$mouseleave_header_dropdown" @mouseenter="$mouseenter_header_dropdown"
+                class="op-icon fa fa-mavon-header dropdown dropdown-wrapper" aria-hidden="true"
+                :title="`${d_words.tl_header} (ctrl+h)`">
+            <transition name="fade">
+                <div class="op-header popup-dropdown" :class="{'transition': transition}" v-show="s_header_dropdown_open" @mouseenter="$mouseenter_header_dropdown" @mouseleave="$mouseleave_header_dropdown">
+                    <div title="#"  class="dropdown-item" @click.stop="$click_header('header1')"><span>{{d_words.tl_header_one}}</span></div>
+                    <div title="## " class="dropdown-item" @click.stop="$click_header('header2')"><span>{{d_words.tl_header_two}}</span></div>
+                    <div title="### " class="dropdown-item" @click.stop="$click_header('header3')"><span>{{d_words.tl_header_three}}</span></div>
+                    <div title="#### " class="dropdown-item" @click.stop="$click_header('header4')"><span>{{d_words.tl_header_four}}</span></div>
+                    <div title="##### " class="dropdown-item" @click.stop="$click_header('header5')"><span>{{d_words.tl_header_five}}</span></div>
+                    <div title="###### " class="dropdown-item" @click.stop="$click_header('header6')"><span>{{d_words.tl_header_six}}</span></div>
+                </div>
+            </transition>
+        </div>
+        <span v-if="toolbars.header || toolbars.italic || toolbars.bold" class="op-icon-divider"></span>
+        <button :disabled="!editable" type="button" v-if="toolbars.underline" @click="$clicks('underline')"
+                class="op-icon fa fa-mavon-underline"
+                :title="`${d_words.tl_underline} (ctrl+u)`" aria-hidden="true"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.strikethrough" @click="$clicks('strikethrough')"
+                class="op-icon fa fa-mavon-strikethrough"
+                :title="`${d_words.tl_strikethrough} (ctrl+shift+d)`" aria-hidden="true"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.mark" @click="$clicks('mark')"
+                class="op-icon fa fa-mavon-thumb-tack" :title="`${d_words.tl_mark} (ctrl+m)`"
+                aria-hidden="true"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.superscript" @click="$clicks('superscript')"
+                class="op-icon fa fa-mavon-superscript"
+                aria-hidden="true" :title="`${d_words.tl_superscript} (ctrl+alt+s)`"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.subscript" @click="$clicks('subscript')"
+                class="op-icon fa fa-mavon-subscript"
+                aria-hidden="true" :title="`${d_words.tl_subscript} (ctrl+shift+s)`"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.alignleft" @click="$clicks('alignleft')"
+                class="op-icon fa fa-mavon-align-left"
+                aria-hidden="true" :title="`${d_words.tl_alignleft} (ctrl+l)`">
+        </button>
+        <button :disabled="!editable" type="button" v-if="toolbars.aligncenter" @click="$clicks('aligncenter')"
+                class="op-icon fa fa-mavon-align-center"
+                aria-hidden="true" :title="`${d_words.tl_aligncenter} (ctrl+e)`"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.alignright" @click="$clicks('alignright')"
+                class="op-icon fa fa-mavon-align-right"
+                aria-hidden="true" :title="`${d_words.tl_alignright} (ctrl+r)`"></button>
+        <span
+                v-if="toolbars.superscript || toolbars.subscript || toolbars.underline || toolbars.strikethrough || toolbars.mark"
+                class="op-icon-divider"></span>
+        <button :disabled="!editable" type="button" v-if="toolbars.quote" @click="$clicks('quote')"
+                class="op-icon fa fa-mavon-quote-left" aria-hidden="true"
+                :title="`${d_words.tl_quote} (ctrl+q)`"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.ol" @click="$clicks('ol')"
+                class="op-icon fa fa-mavon-list-ol" aria-hidden="true"
+                :title="`${d_words.tl_ol} (ctrl+o)`"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.ul" @click="$clicks('ul')"
+                class="op-icon fa fa-mavon-list-ul" aria-hidden="true"
+                :title="`${d_words.tl_ul} (ctrl+alt+u)`"></button>
+        <span v-if="toolbars.ul || toolbars.ol || toolbars.quote" class="op-icon-divider"></span>
+        <button :disabled="!editable" type="button" v-if="toolbars.link" @click.stop="$toggle_imgLinkAdd('link')"
+                class="op-icon fa fa-mavon-link" aria-hidden="true"
+                :title="`${d_words.tl_link} (ctrl+l)`"></button>
+        <div :disabled="!editable" :class="{'selected': s_img_dropdown_open}" type="button" v-if="toolbars.imagelink" @mouseleave="$mouseleave_img_dropdown" @mouseenter="$mouseenter_img_dropdown"
+                class="op-icon fa fa-mavon-picture-o dropdown dropdown-wrapper"
+                aria-hidden="true">
+            <transition name="fade">
+                <div  class="op-image popup-dropdown" :class="{'transition': transition}" v-show="s_img_dropdown_open" @mouseleave="$mouseleave_img_dropdown" @mouseenter="$mouseenter_img_dropdown">
+                    <div  class="dropdown-item" @click.stop="$toggle_imgLinkAdd('imagelink')"><span>{{d_words.tl_image}}</span></div>
+                    <div class="dropdown-item" style="overflow: hidden">
+                        <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="$imgAdd($event)" multiple="multiple"/>{{d_words.tl_upload}}
+                    </div>
+
+                    <div
+                        v-for="(item, index) in img_file"
+                        v-if="item && item[1]"
+                        class="dropdown-item dropdown-images"
+                        :title="item[1].name"
+                        :key="index"
+                        @click.stop="$imgFileListClick(index)"
+                    >
+                        <span>{{item[1].name}}</span>
+                        <button slot="right" type="button" @click.stop="$imgDel(index)"
+                                class="op-icon fa fa-mavon-times" aria-hidden="true"
+                                :title="d_words.tl_upload_remove"></button>
+                        <!-- 缩略图展示 -->
+                        <img class = "image-show" :class="{'transition': transition}" :src="item[1].miniurl" alt="none">
+                    </div>
+                </div>
+            </transition>
+        </div>
+        <button :disabled="!editable" type="button" v-if="toolbars.code" @click="$clicks('code')"
+                class="op-icon fa fa-mavon-code" aria-hidden="true"
+                :title="`${d_words.tl_code} (ctrl+alt+c)`"></button>
+        <button :disabled="!editable" type="button" v-if="toolbars.table" @click="$clicks('table')"
+                class="op-icon fa fa-mavon-table" aria-hidden="true"
+                :title="`${d_words.tl_table} (ctrl+alt+t)`"></button>
+        <span v-if="toolbars.link || toolbars.imagelink || toolbars.code || toolbars.table"
+              class="op-icon-divider"></span>
+        <button type="button" v-if="toolbars.undo" @click="$clicks('undo')" class="op-icon fa fa-mavon-undo"
+                aria-hidden="true" :title="`${d_words.tl_undo} (ctrl+z)`"></button>
+        <button type="button" v-if="toolbars.redo" @click="$clicks('redo')" class="op-icon fa fa-mavon-repeat"
+                aria-hidden="true"
+                :title="`${d_words.tl_redo} (ctrl+y)`"></button>
+        <button type="button" v-if="toolbars.trash" @click="$clicks('trash')" class="op-icon fa fa-mavon-trash-o"
+                aria-hidden="true"
+                :title="`${d_words.tl_trash} (ctrl+breakspace)`"></button>
+        <button type="button" v-if="toolbars.save" @click="$clicks('save')" class="op-icon fa fa-mavon-floppy-o"
+                aria-hidden="true"
+                :title="`${d_words.tl_save} (ctrl+s)`"></button>
+        <slot name="left-toolbar-after" />
+
+        <!-- 添加image链接 -->
+        <transition name="fade">
+            <div class="add-image-link-wrapper"  v-if="s_img_link_open">
+                <div class="add-image-link">
+                    <i @click.stop.prevent="s_img_link_open = false" class="fa fa-mavon-times"
+                       aria-hidden="true"></i>
+                    <h3 class="title">{{link_type == 'link' ? d_words.tl_popup_link_title : d_words.tl_popup_img_link_title}}</h3>
+                    <div class="link-text input-wrapper">
+                        <input ref="linkTextInput" type="text" v-model="link_text" :placeholder="link_type == 'link' ? d_words.tl_popup_link_text : d_words.tl_popup_img_link_text">
+                    </div>
+                    <div class="link-addr input-wrapper">
+                        <input type="text" v-model="link_addr" :placeholder="link_type == 'link' ? d_words.tl_popup_link_addr : d_words.tl_popup_img_link_addr">
+                    </div>
+                    <div class="op-btn cancel" @click.stop="s_img_link_open = false">{{d_words.tl_popup_link_cancel}}</div>
+                    <div class="op-btn sure" @click.stop="$imgLinkAdd()">{{d_words.tl_popup_link_sure}}</div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+<script type="text/ecmascript-6">
+    export default {
+        name: 's-md-toolbar-left',
+        props: {
+            editable: { // 是否开启编辑
+                type: Boolean,
+                default: true
+            },
+            transition: { // TODO: 是否开启动画过渡
+                type: Boolean,
+                default: true
+            },
+            toolbars: { // 工具栏
+                type: Object,
+                required: true
+            },
+            d_words: {
+                type: Object,
+                required: true
+            },
+            image_filter: {
+                type: Function,
+                default: null
+            }
+        },
+        data() {
+            return {
+                // [index, file]
+                img_file: [[0, null]],
+                img_timer: null,
+                header_timer: null,
+                s_img_dropdown_open: false,
+                s_header_dropdown_open: false,
+                s_img_link_open: false,
+                trigger: null,
+                num: 0,
+                link_text: '',
+                link_addr: '',
+                link_type: 'link'
+            }
+        },
+        methods: {
+            $imgLinkAdd() {
+                this.$emit('toolbar_left_addlink', this.link_type, this.link_text, this.link_addr);
+                this.s_img_link_open = false;
+            },
+            $toggle_imgLinkAdd(type) {
+                this.link_type = type;
+                this.link_text = this.link_addr = '';
+                this.s_img_link_open = true;
+                this.$nextTick(() => {
+                    this.$refs.linkTextInput.focus()
+                })
+                this.s_img_dropdown_open = false;
+            },
+            $imgFileListClick(pos) {
+                this.$emit('imgTouch', this.img_file[pos]);
+            },
+            $changeUrl(index,url) {
+                this.img_file[index][0] = url;
+            },
+            $imgFileAdd($file) {
+                // this.img_file[0][0] = this.num;
+                // this.img_file[0][1] = $file;
+                // this.img_file.unshift([(this.num + 1), null]);
+                // this.num = this.num + 1;
+                this.img_file.push([++this.num, $file])
+                this.$emit('imgAdd', this.num, $file);
+                this.s_img_dropdown_open = false;
+            },
+            $imgFilesAdd($files) {
+                // valid means if the image_filter exist.
+                let valid = (typeof this.image_filter === 'function');
+                for (let i = 0; i < $files.length; i++) {
+                    if (valid && this.image_filter($files[i]) === true) {
+                        this.$imgFileAdd($files[i]);
+                    } else if (!valid && $files[i].type.match(/^image\//i)) {
+                        this.$imgFileAdd($files[i]);
+                    }
+                }
+            },
+            $imgAdd($e) {
+                this.$imgFilesAdd($e.target.files);
+                $e.target.value = ''; // 初始化
+            },
+            $imgDel(pos) {
+                this.$emit('imgDel', this.img_file[pos]);
+               this.img_file.splice(pos, 1);
+               this.num--;
+
+                this.s_img_dropdown_open = false;
+            },
+            isEqualName(filename, pos) {
+                if (this.img_file[pos][1]) {
+                    if (this.img_file[pos][1].name === filename || this.img_file[pos][1]._name === filename) {
+                        return true
+                    }
+                }
+                return false
+            },
+            $imgDelByFilename(filename) {
+                var pos = 0;
+                while (this.img_file.length > pos) {
+                    if (this.img_file[pos][1] === filename || this.isEqualName(filename, pos)) {
+                        this.$imgDel(pos);
+                        return true;
+                    }
+                    pos += 1;
+                }
+                return false;
+            },
+            $imgAddByFilename(filename, $file) {
+                for (var i = 0; i < this.img_file.length; i++)
+                    { if (this.img_file[i][0] === filename) return false; }
+                this.img_file[0][0] = filename;
+                this.img_file[0][1] = $file;
+                this.img_file[0][2] = filename;
+                this.img_file.unshift(['./' + (this.num), null])
+                this.$emit('imgAdd', this.img_file[1][0], $file, false);
+                return true;
+            },
+            $imgAddByUrl(filename, $url) {
+                for (var i = 0; i < this.img_file.length; i++)
+                    { if (this.img_file[i][0] === filename) return false; }
+                this.img_file[0][0] = filename;
+                this.img_file[0][1] = $url;
+                this.img_file.unshift(['./' + (this.num), null])
+                return true;
+            },
+            $imgUpdateByFilename(filename, $file) {
+                for (var i = 0; i < this.img_file.length; i++) {
+                    if (this.img_file[i][0] === filename || this.isEqualName(filename, i)) {
+                        this.img_file[i][1] = $file;
+                        this.$emit('imgAdd', filename, $file, false);
+                        return true;
+                    }
+                }
+                return false;
+            },
+            // 工具栏功能图标click-----------------
+            $mouseenter_img_dropdown() {
+                if (this.editable) {
+                    clearTimeout(this.img_timer)
+                    this.s_img_dropdown_open = true
+                }
+            },
+            $mouseleave_img_dropdown() {
+                let vm = this
+                this.img_timer = setTimeout(function() {
+                    vm.s_img_dropdown_open = false
+                },200)
+            },
+            $mouseenter_header_dropdown() {
+                if (this.editable) {
+                    clearTimeout(this.header_timer)
+                    this.s_header_dropdown_open = true
+                }
+            },
+            $mouseleave_header_dropdown() {
+                let vm = this
+                this.header_timer = setTimeout(function() {
+                    vm.s_header_dropdown_open = false
+                },200)
+            },
+            $clicks(_type) {
+                // 让父节点来绑定事件并
+                if (this.editable) {
+                    this.$emit('toolbar_left_click', _type);
+                }
+            },
+            $click_header(_type) {
+                // 让父节点来绑定事件并
+                this.$emit('toolbar_left_click', _type);
+                this.s_header_dropdown_open = false
+            },
+            handleClose(e) {
+                this.s_img_dropdown_open = false;
+            }
+        },
+        watch:{
+            s_img_link_open(newVlaue) {
+              // fix issue #644
+              this.$parent.$el.style.zIndex = newVlaue ? 1501 : 1500;
+            }
+        }
+    }
+</script>
+<style lang="stylus" scoped>
+    .op-icon.dropdown-wrapper.dropdown
+        position relative
+        &[type=button]
+            -webkit-appearance unset
+        .popup-dropdown
+            position absolute
+            display block
+            background #fff
+            top 32px
+            left -45px
+            min-width 130px
+            z-index 1600
+            border 1px solid #ebeef5
+            border-radius 4px
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
+            .dropdown-item:first-child
+                border-top-left-radius 3px
+                border-top-right-radius 3px
+            .dropdown-item:last-child
+                border-bottom-left-radius 3px
+                border-bottom-right-radius 3px
+            &.op-header
+                left -30px
+                min-width 90px
+            &.fade-enter-active, &.fade-leave-active
+                opacity 1
+            &.fade-enter, &.fade-leave-active
+                opacity 0
+            &.transition
+              &, .dropdown-item
+                transition all 0.2s linear 0s
+        .dropdown-item
+            height 40px
+            line-height @height
+            font-size 14px
+            color #606266
+            position relative
+            &:hover
+                color #303133
+                background-color #e9e9eb
+            input
+                position absolute
+                font-size 100px
+                right 0
+                top 0
+                opacity 0
+                cursor pointer
+        .dropdown-images
+            box-sizing border-box
+            button
+                position absolute
+                top -1px
+                right 5px
+                font-size: 14px
+                &:hover
+                    color #F56C6C
+                    background-color: transparent
+            span
+                display inline-block
+                width 80px
+                white-space nowrap
+                overflow hidden
+                text-overflow ellipsis
+            &:hover
+                .image-show
+                    display block !important
+            .image-show
+                display none
+                position absolute
+                left -128px
+                top 0
+                width 120px
+                height 90px
+                object-fit contain
+                border 1px solid #F2F6FC
+                &.transition
+                    transition all 0.2s linear 0s
+            &.transition
+                transition all 0.2s linear 0s
+.add-image-link-wrapper
+    position fixed
+    left 0
+    right 0
+    top 0
+    bottom 0
+    background rgba(0, 0, 0, 0.7)
+    z-index 1600
+    transition all 0.1s linear 0s
+    &.fade-enter-active, &.fade-leave-active
+        opacity 1
+    &.fade-enter, &.fade-leave-active
+        opacity 0
+    .add-image-link
+        position fixed
+        box-sizing border-box
+        text-align center
+        width 24%
+        left 38%
+        @media only screen and (max-width 1500px)
+            width 34%
+            left 33%
+        @media only screen and (max-width 1000px)
+            width 50%
+            left 25%
+        @media only screen and (max-width 600px)
+            width 80%
+            left 10%
+        height auto
+        padding 40px
+        top 25%
+        transition all 0.1s linear 0s
+        z-index 3
+        background #fff
+        border-radius 2px
+
+        i
+            font-size 24px
+            position absolute
+            right 8px
+            top 6px
+            color rgba(0, 0, 0, 0.7)
+            cursor pointer
+        .title
+            font-size 20px
+            margin-bottom 30px
+            margin-top 10px
+            font-weight 500 !important
+        .input-wrapper
+            margin-top 10px
+            width 80%
+            border  1px solid #eeece8
+            text-align left
+            margin-left 10%
+            height 35px
+            input
+                height 32px
+                line-height 32px
+                font-size 15px
+                width 90%
+                margin-left 8px
+                border none
+                outline none
+        .op-btn
+            width 100px
+            height 35px
+            display inline-block
+            margin-top 30px
+            cursor pointer
+            text-align center
+            line-height @height
+            opacity 0.9
+            border-radius 2px
+            letter-spacing 1px
+            font-size 15px
+        .op-btn.sure
+            background #2185d0
+            color #fff
+            margin-left 5%
+            &:hover
+                opacity 1
+        .op-btn.cancel
+            border 1px solid #bcbcbc
+            color #bcbcbc
+            &:hover
+                color #000
+
+</style>