Mr.Shi

MrShi

2024-02-02 81172472ec22b77e0ee385d08fd4435c396ce10f

Mr.Shi

 company/src/api/business/taxes.js

@@ -20,3 +20,10 @@
        trim: true
    })
}

// åˆ—表查询
export function list(data) {
    return request.post('/business/taxes/list', data, {
        trim: true
    })
}

 company/src/components/enterprise/OperaInsuranceApplyWindow.vue

@@ -24,13 +24,12 @@
                        <el-date-picker
                            @change="getTimeVal"
                            v-model="form.applyStartTime"
                            type="datetime"
                            type="date"
                            class="date_picker"
                            default-time="00:00:00"
                            :disabled="!form.solutionId"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            format="yyyy-MM-dd hh:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                        <span style="color: #F95601; font-size: 14px;">（次日生效投保请于17:30前提交，超时提交以保险单为准）</span>
@@ -40,10 +39,11 @@
                    <el-date-picker
                        disabled
                        v-model="form.applyEndTime"
                        type="datetime"
                        default-time="00:00:00"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        format="yyyy-MM-dd hh:mm:ss"
                        type="date"
                        class="date_picker"
                        :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
@@ -319,7 +319,7 @@
                startDate: time
            }).then(res => {
                this.price = res.cyclePrice
                this.form.applyEndTime = res.endDate.substring(0, 10)
                this.form.applyEndTime = res.endDate
                this.tableData.forEach(item => {
                    item.fee = res.cyclePrice
                })

 company/src/components/enterprise/additionSubtractionApplication.vue

@@ -19,8 +19,8 @@
                            v-model="form.applyStartTime"
                            type="date"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd"
                            format="yyyy å¹´ MM æœˆ dd æ—¥"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                        <span style="color: #F95601; font-size: 14px;">（次日生效投保请于17:30前提交，超时提交以保险单为准）</span>

 company/src/components/enterprise/editFactoryChange.vue

@@ -16,10 +16,10 @@
                    <div style="display: flex; flex-direction: column;">
                        <el-date-picker
                            v-model="form.applyStartTime"
                            type="datetime"
                            type="date"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            format="yyyy-MM-dd hh:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                        <span style="color: #F95601; font-size: 14px;">（次日生效投保请于17:30前提交，超时提交以保险单为准）</span>

 company/src/components/enterprise/entrustedInvoicingApplication.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,253 @@
<template>
    <GlobalWindow
        :title="title"
        width="100%"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <div class="info">
            <div class="info_list">
                <div class="info_list_item">
                    <div class="info_list_item_label">开票名称：</div>
                    <div class="info_list_item_val">{{userInfo.company.name}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">纳税人识别号：</div>
                    <div class="info_list_item_val">{{userInfo.company.code}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">开户行：</div>
                    <div class="info_list_item_val">{{userInfo.company.taxBank}}</div>
                </div>
                <div class="info_list_item">
                    <div class="info_list_item_label">账号：</div>
                    <div class="info_list_item_val">
                        {{userInfo.company.taxAccount}}
                    </div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">地址、电话：</div>
                    <div class="info_list_item_val">{{userInfo.company.invoiceAddr}} {{userInfo.company.phone}}</div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">开票金额：</div>
                    <div class="info_list_item_val" style="color:rgba(249, 86, 1, 0.996078431372549);">{{total}}</div>
                </div>
                <div class="info_list_item" style="width: 100%;">
                    <div class="info_list_item_label">接收方式：</div>
                    <div class="info_list_item_val">电子发票</div>
<!--                    <div v-if="model.type === 1" class="info_list_item_val">纸质发票</div>-->
                </div>
            </div>
            <el-table
                :data="form.list"
                border
                show-summary
                :summary-method="getSummaries"
                style="width: 100%; margin-bottom: 20px;">
                <el-table-column
                    label="序号"
                    align="center"
                    width="80">
                    <template slot-scope="scope">
                        <span>{{scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="solutionsName"
                    label="保险方案">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="code"
                    label="保单号">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="金额">
                    <template slot-scope="{row}">
                        <span style="color:rgba(249, 86, 1, 0.996078431372549);">{{row.totalPrice}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </GlobalWindow>
</template>

<script>
    import BaseOpera from '@/components/base/BaseOpera'
    import GlobalWindow from '@/components/common/GlobalWindow'
    import { mapState } from 'vuex'
    export default {
        name: 'entrustedInvoicingApplication',
        extends: BaseOpera,
        components: { GlobalWindow },
        data () {
            return {
                form: {
                    id: null,
                    backInfo:'',
                    list: []
                },
                rules: {
                    backInfo: [
                        { required: true, message: '请输入退回说明' }
                    ]
                }
            }
        },
        created () {
            console.log(this.userInfo)
            this.config({
                api: '/business/taxes',
                'field.id': 'id'
            })
        },
        computed: {
            ...mapState(['userInfo']),
            total () {
                let price = 0
                this.form.list.forEach(item => {
                    price += item.totalPrice
                })
                return price;
            }
        },
        methods: {
            open (title, target) {
                this.title = title
                this.visible = true
                this.$nextTick(() => {
                    for (const key in this.form) {
                        this.form[key] = target[key]
                    }
                })
            },
            getSummaries (param) {
                const { columns, data } = param
                const sums = []
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计'
                    } else if (index == 4) {
                        let price = 0
                        data.forEach(item => {
                            price += item.totalPrice
                        })
                        sums[index] = price
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    ::v-deep .el-table__footer-wrapper tbody td {
        cursor: pointer;
        text-align: center;
        &:nth-child(5) {
            color:rgba(249, 86, 1, 0.996078431372549);
        }
    }
    /*   ::v-deep .el-table__header-wrapper   th:first-child .cell{
          color:rgba(249, 86, 1, 0.996078431372549) !important
       }
       ::v-deep  table:first-of-type th:first-child .cell{
            //color:rgba(249, 86, 1, 0.996078431372549) !important
       }
       ::v-deep   .el-table--border th:first-child .cell {
         &:nth-child(2) {
           color:rgba(249, 86, 1, 0.996078431372549);
         }
       }*/


    .info {
        width: 100%;
        .info_label {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            span {
                font-size: 14px;
                font-weight: 500;
                color: #000000;
            }
        }
        .info_list {
            width: 100%;
            display: flex;
            align-items: left;
            flex-wrap: wrap;
            .info_list_item {
                width: 50%;
                display: flex;
                align-items: start;
                font-size: 14px;
                margin-bottom: 20px;
                .info_list_item_label {
                    width: 150px;
                    flex-shrink: 0;
                }
                .info_list_item_val {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    .image {
                        width: 100px;
                        height: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    .form {
        width: 100%;
        display: flex;
        flex-direction: column;
        .form_item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0 !important;
            }
            .form_item_label {
                width: 100px;
                flex-shrink: 0;
                font-size: 14px;
                color: black;
            }
            .form_item_val {
                flex: 1;
                min-height: 35px;
                display: flex;
                align-items: center;
                input {
                    width: 100%;
                    height: 100%;
                    font-size: 14px;
                    color: black;
                    padding: 5px 10px;
                    outline: none;
                    box-sizing: border-box;
                    border: 1px solid #ececec;
                }
            }
        }
    }
</style>

 company/src/components/enterprise/entrustmentHistory.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,93 @@
<template>
    <GlobalWindow
        :title="title"
        width="100%"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <div style="width: 100%; display: flex; align-items: center; margin-bottom: 20px;">
            ä¿é™©æ–¹æ¡ˆï¼š{{form.solutionsName}} <div style="width: 20px;"></div> ä¿å•å·ï¼š{{form.code || '-'}}
        </div>
        <el-table
            :data="list"
            border
            ref="table"
            style="width: 100%">
            <el-table-column label="序号" width="80px">
                <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="solutionName"
                label="申请开票时间">
            </el-table-column>
            <el-table-column
                prop="bdCode"
                label="开票状态">
            </el-table-column>
            <el-table-column
                prop="applyChangeId"
                label="开票金额（元）">
            </el-table-column>
            <el-table-column
                prop="duName"
                label="接收方式">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="{row}">
                    <el-button type="text">申请详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </GlobalWindow>
</template>

<script>
    import BaseOpera from '@/components/base/BaseOpera'
    import GlobalWindow from '@/components/common/GlobalWindow'
    import { list } from '@/api/business/taxes'
    export default {
        name: 'entrustmentHistory',
        extends: BaseOpera,
        components: { GlobalWindow },
        data () {
            return {
                form: {
                    id: null,
                    solutionsName: '',
                    code: ''
                },
                list: []
            }
        },
        created () {
            this.config({
                api: '/business/dispatchUnit',
                'field.id': 'id'
            })
        },
        methods: {
            open (title, target) {
                this.title = title
                this.visible = true
                // ç¼–辑
                this.$nextTick(() => {
                    for (const key in this.form) {
                        this.form[key] = target[key]
                    }
                    this.getList()
                })
            },
            getList() {
                list({ insuranceApplyId: this.form.id })
                    .then(res => {
                        console.log(res)
                        this.list = res
                    })
            }
        }
    }
</script>

 company/src/components/enterprise/factoryChange.vue

@@ -16,10 +16,10 @@
                    <div style="display: flex; flex-direction: column;">
                        <el-date-picker
                            v-model="form.applyStartTime"
                            type="datetime"
                            type="date"
                            :picker-options="pickerOptions"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            format="yyyy-MM-dd hh:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                        <span style="color: #F95601; font-size: 14px;">（次日生效投保请于17:30前提交，超时提交以保险单为准）</span>

 company/src/views/business/taxes.vue

@@ -19,7 +19,7 @@
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="申请开票企业" prop="companyId">
            <el-form-item label="申请开票企业" prop="companyId" v-if="userInfo.type === 0">
              <el-select v-model="searchForm.companyId" placeholder="请选择" @change="search">
                <el-option
                    v-for="item in companyList"
@@ -54,7 +54,7 @@
                        <span v-if="row.status === 3">已冲红</span>
                    </template>
                </el-table-column>
                <el-table-column prop="companyName" label="申请企业" min-width="100px"></el-table-column>
                <el-table-column prop="companyName" label="申请企业" min-width="100px" v-if="userInfo.type === 0"></el-table-column>
                <el-table-column prop="createDate" label="申请开票时间" min-width="100px"></el-table-column>
                <el-table-column prop="creatorName" label="申请人" min-width="100px"></el-table-column>
                <el-table-column prop="price" label="开票金额（元）" min-width="100px"></el-table-column>
@@ -83,7 +83,7 @@
                <el-table-column label="操作" min-width="180px">
                    <template slot-scope="{row}">
                        <el-button v-if="row.status==0" type="text" @click="$refs.OperaTaxesUploadWindow.open('上传发票',row)">上传发票</el-button>
                        <el-button v-if="row.status ==1 " type="text" @click="$refs.OperaTaxesUploadWindow.open('修改发票',row)">修改发票</el-button>
                        <el-button v-if="row.status == 1 && userInfo.type === 0" type="text" @click="$refs.OperaTaxesUploadWindow.open('修改发票',row)">修改发票</el-button>
                        <el-button type="text"    @click="$refs.OperaTaxesWindow.open('申请详情',row)">申请详情</el-button>
                    </template>
                </el-table-column>
@@ -136,6 +136,7 @@
import { pageAll as companyAll } from '@/api/business/company'
import { doneApply } from '@/api/business/taxes'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import { mapState } from 'vuex'
export default {
  name: 'Taxes',
  extends: BaseTable,
@@ -157,6 +158,9 @@
      visible: false
    }
  },
    computed: {
      ...mapState(['userInfo'])
    },
  created () {
    this.config({
      module: '发票信息表',

 company/src/views/enterprise/directInvoicing.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,149 @@
<template>
    <TableLayout>
        <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
        <template v-slot:table-wrap>
            <ul style="margin-bottom: 30px;width: 100%;display: flex;align-items: center;justify-content: space-between;">
                <li style="font-size: 18px;font-weight: bold;">申请开票</li>
                <li><el-button type="primary" @click="apply">提交开票</el-button></li>
            </ul>
            <el-table
                    v-loading="isWorking.search"
                    :data="tableData.list"
                    stripe
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" fixed="left" width="55"></el-table-column>
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="statusInfo" label="状态"></el-table-column>
                <el-table-column prop="solutionsName" label="保险方案"></el-table-column>
                <el-table-column prop="code" label="保单号"></el-table-column>
                <el-table-column label="产生费用（元）">
                    <template slot-scope="{row}">
                        <span>{{row.currentFee}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="已开票费用（元）">
                    <template slot-scope="{row}">
                        <span>{{row.taxesMoney}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fee" label="未开票费用（元）">
                    <template slot-scope="{row}">
                        <span>{{row.currentFee - row.taxesMoney}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="taxesLast" label="上次开票时间"></el-table-column>
                <el-table-column prop="startTime" label="投保生效日期"></el-table-column>
                <el-table-column prop="endTime" label="投保失效日期"></el-table-column>
                <el-table-column label="操作" min-width="180px">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="$refs.entrustmentHistory.open('开票历史', row)">开票历史</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                    :pagination="tableData.pagination"
            >
            </pagination>
        </template>
        <!--   ç”³è¯·    -->
        <entrustedInvoicingApplication ref="entrustedInvoicingApplication" @success="handlePageChange" />
        <!--    å¼€ç¥¨åŽ†å²    -->
        <entrustmentHistory ref="entrustmentHistory" @success="handlePageChange" />
    </TableLayout>
</template>

<script>
    import BaseTable from '@/components/base/BaseTable'
    import TableLayout from '@/layouts/TableLayout'
    import Pagination from '@/components/common/Pagination'
    import entrustedInvoicingApplication from '@/components/enterprise/entrustedInvoicingApplication'
    import entrustmentHistory from '@/components/enterprise/entrustmentHistory'
    export default {
        name: 'directInvoicing',
        extends: BaseTable,
        components: { TableLayout, Pagination, entrustedInvoicingApplication, entrustmentHistory },
        data () {
            return {
                searchForm: {
                    type: 0
                }
            }
        },
        created () {
            this.config({
                module: '投保申请信息表',
                api: '/business/insuranceApply',
                'field.id': 'id',
                'field.main': 'id'
            })
            this.search()
        },
        methods: {
            apply() {
                if (this.tableData.selectedRows.length === 0) {
                    this.$message.warning('至少选择一项内容')
                    return
                }
                for (let i = 0; i < this.tableData.selectedRows.length; i++) {
                    if (this.tableData.selectedRows[i].currentFee - this.tableData.selectedRows[i].taxesMoney === 0) {
                        this.$message.warning(`第${i + 1}项可开票金额为0，不能进行开票！`)
                        return
                    }
                }
                let obj = {}
                obj.list = JSON.parse(JSON.stringify(this.tableData.selectedRows))
                obj.list.forEach(item => {
                    item.totalPrice = item.currentFee - item.taxesMoney
                })
                console.log(obj.list)
                this.$refs.entrustedInvoicingApplication.open('申请开票', obj)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .form {
        width: 100%;
        display: flex;
        flex-direction: column;
        .form_item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0 !important;
            }
            .form_item_label {
                width: 100px;
                flex-shrink: 0;
                font-size: 14px;
                color: black;
            }
            .form_item_val {
                flex: 1;
                min-height: 35px;
                display: flex;
                align-items: center;
                input {
                    width: 100%;
                    height: 100%;
                    font-size: 14px;
                    color: black;
                    padding: 5px 10px;
                    outline: none;
                    box-sizing: border-box;
                    border: 1px solid #ececec;
                }
            }
        }
    }
</style>

 company/src/views/enterprise/entrustedInvoicing.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,149 @@
<template>
    <TableLayout>
        <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
        <template v-slot:table-wrap>
            <ul style="margin-bottom: 30px;width: 100%;display: flex;align-items: center;justify-content: space-between;">
                <li style="font-size: 18px;font-weight: bold;">申请开票</li>
                <li><el-button type="primary" @click="apply">提交开票</el-button></li>
            </ul>
            <el-table
                v-loading="isWorking.search"
                :data="tableData.list"
                stripe
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" fixed="left" width="55"></el-table-column>
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="statusInfo" label="状态"></el-table-column>
                <el-table-column prop="solutionsName" label="保险方案"></el-table-column>
                <el-table-column prop="code" label="保单号"></el-table-column>
                <el-table-column label="产生费用（元）">
                    <template slot-scope="{row}">
                        <span>{{row.currentFee}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="已开票费用（元）">
                    <template slot-scope="{row}">
                        <span>{{row.taxesMoney}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fee" label="未开票费用（元）">
                    <template slot-scope="{row}">
                        <span>{{row.currentFee - row.taxesMoney}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="taxesLast" label="上次开票时间"></el-table-column>
                <el-table-column prop="startTime" label="投保生效日期"></el-table-column>
                <el-table-column prop="endTime" label="投保失效日期"></el-table-column>
                <el-table-column label="操作" min-width="180px">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="$refs.entrustmentHistory.open('开票历史', row)">开票历史</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :pagination="tableData.pagination"
            >
            </pagination>
        </template>
        <!--   ç”³è¯·    -->
        <entrustedInvoicingApplication ref="entrustedInvoicingApplication" @success="handlePageChange" />
        <!--    å¼€ç¥¨åŽ†å²    -->
        <entrustmentHistory ref="entrustmentHistory" @success="handlePageChange" />
    </TableLayout>
</template>

<script>
    import BaseTable from '@/components/base/BaseTable'
    import TableLayout from '@/layouts/TableLayout'
    import Pagination from '@/components/common/Pagination'
    import entrustedInvoicingApplication from '@/components/enterprise/entrustedInvoicingApplication'
    import entrustmentHistory from '@/components/enterprise/entrustmentHistory'
    export default {
        name: 'entrustedInvoicing',
        extends: BaseTable,
        components: { TableLayout, Pagination, entrustedInvoicingApplication, entrustmentHistory },
        data () {
            return {
                searchForm: {
                    type: 1
                }
            }
        },
        created () {
            this.config({
                module: '投保申请信息表',
                api: '/business/insuranceApply',
                'field.id': 'id',
                'field.main': 'id'
            })
            this.search()
        },
        methods: {
            apply() {
                if (this.tableData.selectedRows.length === 0) {
                    this.$message.warning('至少选择一项内容')
                    return
                }
                for (let i = 0; i < this.tableData.selectedRows.length; i++) {
                    if (this.tableData.selectedRows[i].currentFee - this.tableData.selectedRows[i].taxesMoney === 0) {
                        this.$message.warning(`第${i + 1}项可开票金额为0，不能进行开票！`)
                        return
                    }
                }
                let obj = {}
                obj.list = JSON.parse(JSON.stringify(this.tableData.selectedRows))
                obj.list.forEach(item => {
                    item.totalPrice = item.currentFee - item.taxesMoney
                })
                console.log(obj.list)
                this.$refs.entrustedInvoicingApplication.open('申请开票', obj)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .form {
        width: 100%;
        display: flex;
        flex-direction: column;
        .form_item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0 !important;
            }
            .form_item_label {
                width: 100px;
                flex-shrink: 0;
                font-size: 14px;
                color: black;
            }
            .form_item_val {
                flex: 1;
                min-height: 35px;
                display: flex;
                align-items: center;
                input {
                    width: 100%;
                    height: 100%;
                    font-size: 14px;
                    color: black;
                    padding: 5px 10px;
                    outline: none;
                    box-sizing: border-box;
                    border: 1px solid #ececec;
                }
            }
        }
    }
</style>