add：文件发放发送通知，40%

src/business/platform/form/utils/JForm.js

@@ -23,6 +23,7 @@ import {
   getSigPageUrl,
   generateUUID,
 } from '@/api/platform/file/attachment' //印章，快照
+import { save } from '@/api/platform/message/innerMessage'
 const _import = require('@/utils/util.import.' + process.env.NODE_ENV)
 import pinyin4js from 'pinyin4js';
 import store from '@/store'
@@ -60,7 +61,7 @@ _.extend(JForm, {
     this.$sealPre = sealPre // 对报表进行手动印章->预处理
     this.$getSigPageUrl = getSigPageUrl // 对报表进行手动印章->预处理->签章页面url
     this.$generateUUID = generateUUID // 自定义规则自动生成uuid
-    
+    this.$save = save // 发送消息接口
     this._ = _
     this.$store = store
     this.$router = router //添加router对象

src/layout/header-aside/components/header-message/index.vue

@@ -1,31 +1,15 @@
 <template>
     <div class="ibps-mr-5">
-        <el-tooltip
-            v-if="messageCount === 0"
-            :content="tooltipContent"
-            effect="dark"
-            placement="bottom"
-        >
+        <el-tooltip v-if="messageCount === 0" :content="tooltipContent" effect="dark" placement="bottom">
             <el-button class="ibps-ml-0 ibps-mr btn-text can-hover" type="text">
                 <el-badge :max="9999" :value="messageCount">
                     <ibps-icon name="bell-o" size="16" />
                 </el-badge>
             </el-button>
         </el-tooltip>
-        <el-popover
-            v-else
-            v-model="popShow"
-            placement="bottom-end"
-            width="350"
-            trigger="manual"
-            popper-class="header-message-popper"
-        >
-            <el-button
-                slot="reference"
-                class="ibps-ml-0 ibps-mr btn-text can-hover"
-                type="text"
-                @click="openPop"
-            >
+        <el-popover v-else v-model="popShow" placement="bottom-end" width="350" trigger="manual"
+            popper-class="header-message-popper">
+            <el-button slot="reference" class="ibps-ml-0 ibps-mr btn-text can-hover" type="text" @click="openPop">
                 <el-badge :max="9999" :value="messageCount">
                     <ibps-icon name="bell-o" size="16" />
                 </el-badge>
@@ -37,18 +21,12 @@
                 <div style="height: 250px;">
                     <el-scrollbar style="height: 100%; width: 100%;" wrap-class="ibps-scrollbar-wrapper ">
                         <ibps-list class="ibps-p-10">
-                            <ibps-list-item
-                                v-for="(message, index) in messageList"
-                                :key="index"
-                                @click.native="handelInteriorClick(message)"
-                            >
+                            <ibps-list-item v-for="(message, index) in messageList" :key="index"
+                                @click.native="handelInteriorClick(message)">
                                 <ibps-list-item-meta :title="message.subject" :description="message.ownerName">
-                                    <el-avatar
-                                        slot="avatar"
+                                    <el-avatar slot="avatar"
                                         :icon="message.messageType === 'bulletin' ? 'ibps-icon-bullhorn' : 'ibps-icon-user'"
-                                        shape="circle"
-                                        style="background-color: #87d068;"
-                                    />
+                                        shape="circle" style="background-color: #87d068;" />
                                 </ibps-list-item-meta>
                                 <div slot="extra">
                                     {{ message.createTime | formatRelativeTime({ year: 'yyyy-MM-dd' }) }}
@@ -58,174 +36,173 @@
                     </el-scrollbar>
                 </div>
                 <div class="message-more">
-                    <el-link type="primary" @click="clickMore">{{ $t('layout.header-aside.header-message.viewmore') }}</el-link>
+                    <el-link type="primary" @click="clickMore">{{ $t('layout.header-aside.header-message.viewmore')
+                    }}</el-link>
                 </div>
             </el-card>
         </el-popover>
 
         <!-- 消息明细 -->
-        <inner-detail-dialog
-            :id="editId"
-            :subId="subId"
-            :visible="dialogFormVisible"
-            :title="$t('layout.header-aside.header-message.details')"
-            inside
-            readonly
-            @callback="loadData"
-            @close="closeDialog"
-        />
+        <inner-detail-dialog :id="editId" :subId="subId" :visible="dialogFormVisible" :type="type"
+            :title="$t('layout.header-aside.header-message.details')" inside readonly @callback="loadData"
+            @close="closeDialog" />
     </div>
 </template>
 
 <script>
-    import { getMsgList, queryReceivePageList } from '@/api/platform/message/innerMessage'
-    import InnerDetailDialog from '@/views/platform/message/inner/detail/dialog'
-    import Watermark from './watermark/watermark-cont.js'
-    export default {
-        components: {
-            InnerDetailDialog
-        },
-        data() {
-            return {
-                editId: '',
-                subId: '',
-                dialogFormVisible: false,
-                isControl: true,
-                messageList: [],
-                messageCount: 0,
-                infoMessage: '',
-                countNumber: 0,
-                popShow: false
-            }
-        },
-        computed: {
-            tooltipContent() {
-                return this.messageCount === 0 ? this.$t('layout.header-aside.header-message.empty') : ''
-            }
+
+
+import { getMsgList, queryReceivePageList } from '@/api/platform/message/innerMessage'
+import InnerDetailDialog from '@/views/platform/message/inner/detail/dialog'
+import Watermark from './watermark/watermark-cont.js'
+export default {
+    components: {
+        InnerDetailDialog
+    },
+    data() {
+        return {
+            editId: '',
+            subId: '',
+            type: '',
+            dialogFormVisible: false,
+            isControl: true,
+            messageList: [],
+            messageCount: 0,
+            infoMessage: '',
+            countNumber: 0,
+            popShow: false
+        }
+    },
+    computed: {
+        tooltipContent() {
+            return this.messageCount === 0 ? this.$t('layout.header-aside.header-message.empty') : ''
+        }
+    },
+    mounted() {
+        //轮询弹窗任务提醒
+        // setTimeout(() => {
+        //     this.isControl=true
+        //     this.loadData()
+        // }, 1000)
+        // Watermark.set('线上试用版本','深圳市金源信通')
+        this.loadData()
+    },
+    beforeDestroy() {
+        Watermark.set('', '')
+    },
+    methods: {
+        // 加载数据
+        loadData() {
+            getMsgList({
+                parameters: [
+                    // { key: 'Q^subject^SL', value: '提醒' },
+                    // { key: 'Q^messageType^SL', value: 'system' }
+                ],
+                requestPage: { limit: 5, pageNo: 1, totalCount: 0 },
+                sorts: []
+            }).then((response) => {
+                const data = response.data
+                this.messageList = data.dataResult
+                this.messageCount = data.pageResult ? data.pageResult.totalCount : 0
+                if (this.countNumber == 0) {
+                    // if(response.data.pageResult.totalCount>0){
+                    //     this.$message.warning('您有'+response.data.pageResult.totalCount+'条未处理的 [ 待审批 / 被驳回任务消息 ]，请及时处理！！！')
+                    // }
+                } else if (this.countNumber < data.pageResult.totalCount) {
+                    //如果上次记录数量低于本次  进行提醒，准备待办
+                    let _this = this
+                    let h = this.$createElement
+                    let num = data.pageResult.totalCount - this.countNumber
+                    this.infoMessage = this.$notify({
+                        title: '您有新的待办任务产生！',
+                        message: h('p', null, [
+                            h('span', null, '任务内容: ' + data.dataResult[0].subject),
+                            h('br'),
+                            h('span', null, '生成时间: '),
+                            h('span', { style: 'color: #FF8C00;font-size:12px;' }, data.dataResult[0].createTime),
+                            h('br'),
+                            h('el-button', {
+                                attrs: {
+                                    size: 'mini',
+                                    type: 'primary',
+                                    plain: true
+                                },
+                                on: {
+                                    click: () => {
+                                        _this.cancelInfo()
+                                    }
+                                }
+                            }, '进入办理'),
+                            h('el-button', {
+                                attrs: {
+                                    size: 'mini',
+                                    plain: true
+                                },
+                                on: {
+                                    click: () => {
+                                        _this.$notify.closeAll()
+                                    } // 路由加载之后，调用关闭消息弹窗的方法
+                                }
+                            }, '忽略全部')
+                        ]),
+                        type: 'warning',
+                        duration: 0
+                    })
+                }
+                if (this.countNumber == 0) {
+                    this.countNumber = data.pageResult.totalCount
+                    // setInterval(() => {
+                    //     if(this.isControl &&  response.message == "获取收到的内部消息列表成功！"){
+                    //         this.loadData()
+                    //     }
+                    // }, 60000)
+                } else {
+                    this.countNumber = data.pageResult.totalCount
+                }
+            }).catch(() => {
+                this.isControl = false
+            })
         },
-        mounted() {
-            //轮询弹窗任务提醒
-            // setTimeout(() => {
-            //     this.isControl=true
-            //     this.loadData()
-            // }, 1000)
-            // Watermark.set('线上试用版本','深圳市金源信通')
-            this.loadData()
+        cancelInfo() {
+            this.$router.push('/officeDesk/pendingItems')
+            this.$notify.closeAll()
         },
-        beforeDestroy() {
-            Watermark.set('', '')
+        handelInteriorClick(message) {
+            this.subId = message.subId
+            this.editId = message.id
+            this.dialogFormVisible = true
+            this.type = message.tableName ? message.tableName : ''
         },
-        methods: {
-            // 加载数据
-            loadData() {
-                getMsgList({
-                    parameters: [
-                        // { key: 'Q^subject^SL', value: '提醒' },
-                        // { key: 'Q^messageType^SL', value: 'system' }
-                    ],
-                    requestPage: { limit: 5, pageNo: 1, totalCount: 0 },
-                    sorts: []
-                }).then((response) => {
-                    const data = response.data
-                    this.messageList = data.dataResult
-                    this.messageCount = data.pageResult ? data.pageResult.totalCount : 0
-                    if (this.countNumber == 0) {
-                        // if(response.data.pageResult.totalCount>0){
-                        //     this.$message.warning('您有'+response.data.pageResult.totalCount+'条未处理的 [ 待审批 / 被驳回任务消息 ]，请及时处理！！！')
-                        // }
-                    } else if (this.countNumber < data.pageResult.totalCount) {
-                        //如果上次记录数量低于本次  进行提醒，准备待办
-                        let _this = this
-                        let h = this.$createElement
-                        let num = data.pageResult.totalCount - this.countNumber
-                        this.infoMessage = this.$notify({
-                            title: '您有新的待办任务产生！',
-                            message: h('p', null, [
-                                h('span', null, '任务内容: ' + data.dataResult[0].subject),
-                                h('br'),
-                                h('span', null, '生成时间: '),
-                                h('span', { style: 'color: #FF8C00;font-size:12px;' }, data.dataResult[0].createTime),
-                                h('br'),
-                                h('el-button', {
-                                    attrs: {
-                                        size: 'mini',
-                                        type: 'primary',
-                                        plain: true
-                                    },
-                                    on: {
-                                        click: () => {
-                                            _this.cancelInfo()
-                                        }
-                                    }
-                                }, '进入办理'),
-                                h('el-button', {
-                                    attrs: {
-                                        size: 'mini',
-                                        plain: true
-                                    },
-                                    on: {
-                                        click: () => {
-                                            _this.$notify.closeAll()
-                                        } // 路由加载之后，调用关闭消息弹窗的方法
-                                    }
-                                }, '忽略全部')
-                            ]),
-                            type: 'warning',
-                            duration: 0
-                        })
-                    }
-                    if (this.countNumber == 0) {
-                        this.countNumber = data.pageResult.totalCount
-                        // setInterval(() => {
-                        //     if(this.isControl &&  response.message == "获取收到的内部消息列表成功！"){
-                        //         this.loadData()
-                        //     }
-                        // }, 60000)
-                    } else {
-                        this.countNumber = data.pageResult.totalCount
-                    }
-                }).catch(() => {
-                    this.isControl = false
-                })
-            },
-            cancelInfo() {
-                this.$router.push('/officeDesk/pendingItems')
-                this.$notify.closeAll()
-            },
-            handelInteriorClick(message) {
-                this.subId = message.subId
-                this.editId = message.id
-                this.dialogFormVisible = true
-            },
-            openPop() {
-                this.popShow = !this.popShow
-                if (this.popShow) {
-                    this.loadData()
-                }
-            },
-            clickMore() {
-                // 更多消息
-                this.popShow = !this.popShow
-                this.$router.push('/message')
-            },
-            closeDialog(visible) {
-                this.dialogFormVisible = visible
+        openPop() {
+            this.popShow = !this.popShow
+            if (this.popShow) {
                 this.loadData()
             }
         },
-        // 销毁事件
-        beforeDestroy() {
-            this.isControl = false
+        clickMore() {
+            // 更多消息
+            this.popShow = !this.popShow
+            this.$router.push('/message')
+        },
+        closeDialog(visible) {
+            this.dialogFormVisible = visible
+            this.loadData()
         }
+    },
+    // 销毁事件
+    beforeDestroy() {
+        this.isControl = false
     }
+}
 </script>
 <style lang="scss">
-    .header-message-popper {
-        padding: 0 !important;
-        .message-more {
-            padding: 15px 0;
-            text-align: center;
-            border-top: 1px solid #ebeef5;
-        }
+.header-message-popper {
+    padding: 0 !important;
+
+    .message-more {
+        padding: 15px 0;
+        text-align: center;
+        border-top: 1px solid #ebeef5;
     }
+}
 </style>

src/views/platform/message/inner/detail/dialog.vue

@@ -1,143 +1,131 @@
 <template>
-    <el-dialog
-        :title="title"
-        :visible.sync="dialogVisible"
-        :close-on-click-modal="false"
-        :close-on-press-escape="false"
-        :class="[inside ? 'inside-dialog' : 'inner-dialog']"
-        append-to-body
-        top="10vh"
-        width="65%"
-        @open="getFormData"
-        @close="closeDialog"
-    >
-        <inner-message
-            :id="id"
-            ref="innerMessage"
-            :inside="inside"
-            :readonly="readonly"
-            @callback="handleCallback"
-        />
+    <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
+        :class="[inside ? 'inside-dialog' : 'inner-dialog']" append-to-body top="10vh" width="65%" @open="getFormData"
+        @close="closeDialog">
+        <inner-message :id="id" ref="innerMessage" :inside="inside" :type="type" :readonly="readonly"
+            @callback="handleCallback" />
         <div slot="footer" class="el-dialog--center">
-            <ibps-toolbar
-                :actions="toolbars"
-                @action-event="handleActionEvent"
-            />
+            <ibps-toolbar :actions="toolbars" @action-event="handleActionEvent" />
         </div>
     </el-dialog>
 </template>
 <script>
-    import InnerMessage from './index'
-    export default {
-        components: { InnerMessage },
-        props: {
-            inside: {
-                type: Boolean,
-                default: false
-            },
-            visible: {
-                type: Boolean,
-                default: false
-            },
-            readonly: {
-                type: Boolean,
-                default: false
-            },
-            id: String,
-            // 子表ID
-            subId: String,
-            title: String
+import InnerMessage from './index'
+export default {
+    components: { InnerMessage },
+    props: {
+        inside: {
+            type: Boolean,
+            default: false
         },
-        data() {
-            const btn1 = [
-                { key: 'confirm', label: '确认' },
-                { key: 'cancel', label: '关闭' }
-            ]
-            const btn2 = [
-                { key: 'cancel', label: '关闭' }
-            ]
-            const toolbars = this.subId ? btn1 : btn2
-            return {
-                dialogVisible: this.visible,
-                dialogLoading: false,
-                toolbars
-            }
+        visible: {
+            type: Boolean,
+            default: false
         },
-        watch: {
-            visible: {
-                handler: function (val, oldVal) {
-                    this.dialogVisible = this.visible
-                },
-                immediate: true
-            }
+        readonly: {
+            type: Boolean,
+            default: false
         },
-        methods: {
-            handleActionEvent({ key }) {
-                switch (key) {
-                    case 'cancel':
-                        this.closeDialog()
-                        break
-                    case 'confirm':
-                        this.confirmMsg()
-                        break
-                    default:
-                        break
-                }
-            },
-            // 关闭当前窗口
-            closeDialog() {
-                this.$emit('close', false)
-            },
-            // 获取表单数据
-            getFormData() {
-                this.$nextTick(() => {
-                    this.$refs.innerMessage.getFormData()
-                    this.handleCallback(true)
-                })
+        id: String,
+        // 子表ID
+        subId: String,
+        title: String,
+        type: String
+    },
+    data() {
+        const btn1 = [
+            { key: 'confirm', label: '确认' },
+            { key: 'cancel', label: '关闭' }
+        ]
+        const btn2 = [
+            { key: 'cancel', label: '关闭' }
+        ]
+        const toolbars = this.type ? btn1 : btn2
+        return {
+            dialogVisible: this.visible,
+            dialogLoading: false,
+            toolbars
+        }
+    },
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
             },
-            // 消息确认，受控文件用
-            confirmMsg() {
-                // TODO
-                this.$confirm('是否已查阅受控文件？一经确认即代表xxxxxx', '提示', {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    type: 'warning',
-                    showClose: false,
-                    closeOnClickModal: false
-                }).then(() => {
-                    // TODO 受控文件逻辑处理
-                    console.log('暂无')
+            immediate: true
+        }
+    },
+    methods: {
+        handleActionEvent({ key }) {
+            switch (key) {
+                case 'cancel':
                     this.closeDialog()
-                }).catch(() => { })
-            },
-            handleCallback(res) {
-                this.$emit('callback', res)
+                    break
+                case 'confirm':
+                    this.confirmMsg()
+                    break
+                default:
+                    break
             }
+        },
+        // 关闭当前窗口
+        closeDialog() {
+            this.$emit('close', false)
+        },
+        // 获取表单数据
+        getFormData() {
+            this.$nextTick(() => {
+                this.$refs.innerMessage.getFormData()
+                this.handleCallback(true)
+            })
+        },
+        // 消息确认，受控文件用
+        confirmMsg() {
+            // TODO
+            this.$confirm('是否已查阅受控文件？一经确认即代表xxxxxx', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                showClose: false,
+                closeOnClickModal: false
+            }).then(() => {
+                // TODO 受控文件逻辑处理
+                console.log('暂无')
+                this.closeDialog()
+            }).catch(() => { })
+        },
+        handleCallback(res) {
+            this.$emit('callback', res)
         }
     }
+}
 </script>
 <style lang="scss">
-    .inner-dialog {
-        .el-dialog__body {
-            padding: 20px 20px;
-            height: calc(40vh) !important;
-        }
-        .list {
-            .el-form-item__content {
-                margin-left: 0px !important;
-                .el-table--border {
-                    height: 300px !important;
-                }
+.inner-dialog {
+    .el-dialog__body {
+        padding: 20px 20px;
+        height: calc(40vh) !important;
+    }
+
+    .list {
+        .el-form-item__content {
+            margin-left: 0px !important;
+
+            .el-table--border {
+                height: 300px !important;
             }
         }
-        .ibps-container-crud__header {
-            display: none;
-        }
     }
-    .inside-dialog {
-        .el-dialog__body {
-            padding: 20px 20px;
-            height: calc(50vh - 110px) !important;
-        }
+
+    .ibps-container-crud__header {
+        display: none;
+    }
+}
+
+.inside-dialog {
+    .el-dialog__body {
+        padding: 20px 20px;
+        height: calc(50vh - 110px) !important;
     }
+}
 </style>

src/views/platform/message/inner/detail/index.vue

@@ -1,12 +1,6 @@
 <template>
-  <el-form
-    ref="form"
-    v-loading="loading"
-    :element-loading-text="$t('common.loading')"
-    :label-width="formLabelWidth"
-    class="inner-detail"
-    @submit.native.prevent
-  >
+  <el-form ref="form" v-loading="loading" :element-loading-text="$t('common.loading')" :label-width="formLabelWidth"
+    class="inner-detail" @submit.native.prevent>
     <el-row>
       <el-col :span="12">
         <el-form-item label="主题:">
@@ -25,53 +19,51 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="消息类型:">
-           <div class="text-border">
-              <el-tag :type="form.messageType|optionsFilter(typeOptions,'type')">{{ form.messageType|optionsFilter(typeOptions,'label') }}</el-tag>
+          <div class="text-border">
+            <el-tag :type="form.messageType | optionsFilter(typeOptions, 'type')">{{
+              form.messageType | optionsFilter(typeOptions, 'label') }}</el-tag>
           </div>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="是否公告:">
+        <el-form-item label="是否公告:" :hidden="!type">
           <div class="text-border">
-          <el-tag :type="form.isPublic|optionsFilter(publicOrCanreplyOptions,'type')">{{ form.isPublic|optionsFilter(publicOrCanreplyOptions,'label') }}</el-tag>
+            <el-tag :type="form.isPublic | optionsFilter(publicOrCanreplyOptions, 'type')">{{
+              form.isPublic | optionsFilter(publicOrCanreplyOptions, 'label') }}</el-tag>
           </div>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="是否可回复:">
+        <el-form-item label="是否可回复:" :hidden="!type">
           <div class="text-border">
-          <el-tag :type="form.canreply|optionsFilter(publicOrCanreplyOptions,'type')">{{ form.canreply|optionsFilter(publicOrCanreplyOptions,'label') }}</el-tag>
+            <el-tag :type="form.canreply | optionsFilter(publicOrCanreplyOptions, 'type')">{{
+              form.canreply | optionsFilter(publicOrCanreplyOptions, 'label') }}</el-tag>
           </div>
         </el-form-item>
       </el-col>
       <el-col :span="24">
-        <el-form-item label="消息内容:">
+        <el-form-item label="消息内容:" :hidden="!type">
           <span class="original-content" v-html="$utils.formatText(form.content)" />
         </el-form-item>
       </el-col>
       <el-col :span="24">
         <el-form-item label="附件:">
-          <ibps-attachment-selector
-            v-model="form.fileMsg"
-            :download="readonly"
-            :readonly="readonly"
-            multiple
-          />
+          <ibps-attachment-selector v-model="form.fileMsg" :download="readonly" :readonly="readonly" multiple />
         </el-form-item>
-        
+
       </el-col>
       <!-- <el-col v-if="!inside" :span="24">
-        <el-form-item class="list">
-          <el-tabs v-model="activeName" class="detail" @tab-click="handleClick">
-            <el-tab-pane label="已回复信息列表" name="replied" style="height:300px;">
-              <reply-list :id="formId" ref="replyList" />
-            </el-tab-pane>
-            <el-tab-pane label="已读取人员列表" name="readed" style="height:300px;">
-              <readed-list :id="formId" ref="readedList" />
-            </el-tab-pane>
-          </el-tabs>
-        </el-form-item>
-      </el-col> -->
+                <el-form-item class="list">
+                  <el-tabs v-model="activeName" class="detail" @tab-click="handleClick">
+                    <el-tab-pane label="已回复信息列表" name="replied" style="height:300px;">
+                      <reply-list :id="formId" ref="replyList" />
+                    </el-tab-pane>
+                    <el-tab-pane label="已读取人员列表" name="readed" style="height:300px;">
+                      <readed-list :id="formId" ref="readedList" />
+                    </el-tab-pane>
+                  </el-tabs>
+                </el-form-item>
+              </el-col> -->
     </el-row>
   </el-form>
 </template>
@@ -103,7 +95,8 @@ export default {
       default: false
     },
     id: String,
-    title: String
+    title: String,
+    type: String
   },
   data() {
     return {
@@ -134,7 +127,8 @@ export default {
       this.form = ''
       this.loading = true
       get({
-        innerMessageId: this.formId
+        innerMessageId: this.formId,
+        type: this.type // 是否为空值，来决定消息是否要已读：空就已读，非空就未读
       }).then(response => {
         this.form = response.data
         if (this.$refs['replyList']) { this.$refs['replyList'].loadData() }
@@ -152,23 +146,24 @@ export default {
 }
 </script>
 <style lang="scss">
-.inner-detail{
-  .original-content{
-    p{
-      margin:0;
+.inner-detail {
+  .original-content {
+    p {
+      margin: 0;
     }
   }
 }
-  .text-border{
-    color: #000000;
-    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1),
+
+.text-border {
+  color: #000000;
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1),
     0 0 0 0 rgba(0, 0, 0, 0.1),
     0 0 0 0 rgba(0, 0, 0, 0.1),
     0 1px 0px 0 rgba(0, 0, 0, 0.1);
-    padding-left: 5px;
-    min-height: 38px;
-    font-size: 16px;
-    text-align: center;
-    width: 80%;
-  }
+  padding-left: 5px;
+  min-height: 38px;
+  font-size: 16px;
+  text-align: center;
+  width: 80%;
+}
 </style>