diff --git a/src/components/form/DescText/index.vue b/src/components/form/DescText/index.vue
new file mode 100644
index 0000000..a28404b
--- /dev/null
+++ b/src/components/form/DescText/index.vue
@@ -0,0 +1,26 @@
+<template>
+    <p :style="{'color':color,'text-align':textAlign}">
+        {{ value }}
+    </p>
+</template>
+
+<script>
+export default {
+    name: 'DescText',
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        color: {
+            type: String,
+            default: '#000000'
+        },
+        textAlign: {
+            type: String,
+            default: 'left'
+        }
+    },
+    methods: {}
+}
+</script>
diff --git a/src/components/form/ImageSelect/index.vue b/src/components/form/ImageSelect/index.vue
new file mode 100644
index 0000000..cd20b52
--- /dev/null
+++ b/src/components/form/ImageSelect/index.vue
@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <el-radio-group
+            v-if="!multiple"
+            v-model="selectValue"
+        >
+            <div v-for="option in options" :key="option.value" class="img-radio-item">
+                <el-image
+                    :preview-src-list="[option.image]"
+                    :src="option.image"
+                    class="image"
+                    fit="scale-down"
+                >
+                    <div slot="error" class="image-slot">
+                        <i class="el-icon-picture-outline" />
+                    </div>
+                </el-image>
+                <el-radio :label="option.value">{{ option.label }}</el-radio>
+            </div>
+        </el-radio-group>
+        <el-checkbox-group
+            v-else
+            v-model="selectValue"
+        >
+            <div v-for="option in options" :key="option.value" class="img-radio-item">
+                <el-image
+                    :preview-src-list="[option.image]"
+                    :src="option.image"
+                    class="image"
+                    fit="scale-down"
+                >
+                    <div slot="error" class="image-slot">
+                        <i class="el-icon-picture-outline" />
+                    </div>
+                </el-image>
+                <el-checkbox :label="option.value">{{ option.label }}</el-checkbox>
+            </div>
+        </el-checkbox-group>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ImageSelect',
+    props: {
+        value: {
+            type: Number,
+            default: 1
+        },
+        options: {
+            type: Array,
+            default: function() {
+                return []
+            },
+            required: true
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            selectValue: this.value
+        }
+    },
+    watch: {
+        selectValue(val) {
+            this.$emit('input', val)
+        },
+        value(val) {
+            this.selectValue = val
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .el-radio-button__inner,
+.el-radio-group,
+.el-checkbox-group {
+    display: flex !important;
+    flex-wrap: wrap;
+}
+.img-radio-item {
+    display: flex;
+    flex-direction: column !important;
+    align-content: center !important;
+    align-items: center !important;
+    border: 1px solid rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
+    margin: 3px !important;
+    background-color: #fff;
+    .image {
+        width: 100px;
+        height: 100px;
+        margin: 2px 15px 4px 15px;
+    }
+    .el-radio {
+        margin: 4px;
+    }
+}
+::v-deep .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    //background: #f5f7fa;
+    color: #909399;
+    font-size: 30px;
+}
+</style>
diff --git a/src/components/form/SignPad/index.css b/src/components/form/SignPad/index.css
new file mode 100644
index 0000000..43f5f73
--- /dev/null
+++ b/src/components/form/SignPad/index.css
@@ -0,0 +1,49 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+.signature-pad {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    font-size: 10px;
+    width: 100%;
+    height: 100%;
+    max-width: 900px;
+    max-height: 460px;
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 16px;
+}
+.signature-pad::before {
+    left: 20px;
+    -webkit-transform: skew(-3deg) rotate(-3deg);
+    transform: skew(-3deg) rotate(-3deg);
+}
+.signature-pad::after {
+    right: 20px;
+    -webkit-transform: skew(3deg) rotate(3deg);
+    transform: skew(3deg) rotate(3deg);
+}
+.signature-pad--body {
+    position: relative;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    border: 1px solid #f4f4f4;
+}
+.signature-pad--body canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
+}
diff --git a/src/components/form/SignPad/index.vue b/src/components/form/SignPad/index.vue
new file mode 100644
index 0000000..a07cb38
--- /dev/null
+++ b/src/components/form/SignPad/index.vue
@@ -0,0 +1,125 @@
+<template>
+    <div id="signature-pad" class="signature-pad">
+        <div class="signature-pad--body" style="min-height: 300px; width: 100%;">
+            <canvas v-show="!signImageUrl" class="canvasId" style="border: 2px dashed #f7f7f7;" />
+        </div>
+        <img v-if="signImageUrl" :src="signImageUrl">
+        <p class="desc-text">请在上面区域完成签名 然后点击确"确认"按钮</p>
+        <div v-if="!signImageUrl">
+            <el-button plain size="mini" type="danger" @click="clear">清除</el-button>
+            <el-button plain size="mini" type="warning" @click="undo">回撤</el-button>
+            <el-button size="mini" type="success" @click="savePng">确认</el-button>
+        </div>
+        <div v-if="signImageUrl">
+            <el-button size="mini" type="primary" @click="reSign">重签</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import SignaturePad from 'signature_pad'
+
+export default {
+    name: 'SignPad',
+    components: {},
+    data() {
+        return {
+            signaturePad: null,
+            canvas: null,
+            signImageUrl: '',
+            config: {
+                minWidth: 1,
+                maxWidth: 3,
+                penColor: 'rgb(66, 133, 244)'
+            }
+        }
+    },
+    mounted() {
+        this.init()
+        window.onresize = () => {
+            return (() => {
+                this.resizeCanvas()
+            })()
+        }
+        this.resizeCanvas()
+    },
+    methods: {
+        resizeCanvas() {
+            console.log('resizeCanvas')
+            let canvas = this.canvas
+            // When zoomed out to less than 100%, for some very strange reason,
+            // some browsers report devicePixelRatio as less than 1
+            // and only part of the canvas is cleared then.
+            let ratio = Math.max(window.devicePixelRatio || 1, 1)
+            // This part causes the canvas to be cleared
+            canvas.width = canvas.offsetWidth * ratio
+            canvas.height = canvas.offsetHeight * ratio
+            canvas.getContext('2d').scale(ratio, ratio)
+
+            // This library does not listen for canvas changes, so after the canvas is automatically
+            // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
+            // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
+            // that the state of this library is consistent with visual state of the canvas, you
+            // have to clear it manually.
+            this.signaturePad.clear()
+        },
+        init() {
+            this.canvas = document.querySelector('.canvasId')
+            let canvas = this.canvas
+            this.signaturePad = new SignaturePad(canvas, this.config)
+            // canvas.height = 300
+            // canvas.width = 500
+        },
+        clear() {
+            this.signaturePad.clear()
+        },
+        undo() {
+            let data = this.signaturePad.toData()
+            if (data) {
+                data.pop() // remove the last dot or line
+                this.signaturePad.fromData(data)
+            }
+        },
+        savePng() {
+            if (this.signaturePad.isEmpty()) {
+                this.msgError('请先填写')
+                return
+            }
+            let data = this.signaturePad.toDataURL('image/png')
+            let file = this.dataURLtoFile(data, `${new Date().getTime()}.png`)
+            let param = new FormData() // 创建form对象
+            param.append('file', file) // 通过append向form对象添加数据
+            let config = {
+                headers: {'Content-Type': 'multipart/form-data'}
+            }
+            this.$api.post('/project/file/upload/77f1648542af4caf98deb8345a3d0406', param, config).then(res => {
+                this.signImageUrl = res.data
+            })
+        },
+        reSign() {
+            this.signImageUrl = ''
+            this.signaturePad.clear()
+        },
+        dataURLtoFile(dataurl, filename) {
+            // 获取到base64编码
+            const arr = dataurl.split(',')
+            // 将base64编码转为字符串
+            const bstr = window.atob(arr[1])
+            let n = bstr.length
+            const u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n)
+            }
+            return new File([u8arr], filename, {
+                type: 'image/png'
+            })
+        }
+    }
+}
+</script>
+<style scoped>
+@import "index.css";
+.sign-pad-container {
+    padding: 1px;
+}
+</style>
diff --git a/src/components/form/index.js b/src/components/form/index.js
new file mode 100644
index 0000000..31fb11f
--- /dev/null
+++ b/src/components/form/index.js
@@ -0,0 +1,8 @@
+const ImageSelect = require('./ImageSelect/index').default
+const DescText = require('./DescText/index').default
+export default {
+    install: Vue => {
+        Vue.component(ImageSelect.name, ImageSelect)
+        Vue.component(DescText.name, DescText)
+    }
+}