archives/src/views/transfer/components/carry-spot-checks.vue

<template>
    <div>
        <HcDrawer v-model="isDrawer" to-id="carry-spot-checks-layout-target" ui="hc-carry-spot-checks-target" flex @close="onCarrySpotChecksDrawerClose">
            <div class="hc-carry-spot-checks-pdf">
                <div v-loading="pdfLoading" class="h-full">
                    <HcPdf v-if="ishowPdf" :src="pdfUrl" @rendered="getPdfTime" />
                </div>
                <el-tooltip :disabled="!isBubble" content="展开/收起 右侧目录" placement="top">
                    <div class="hc-csc-pdf-btn" @click="onCarryDataShow">
                        <HcIcon v-show="isCarryDataShow" name="arrow-right-s" />
                        <HcIcon v-show="!isCarryDataShow" name="arrow-left-s" />
                    </div>
                </el-tooltip>
            </div>
            <div v-show="isCarryDataShow" class="hc-carry-spot-checks-data">
                <div class="hc-csc-switch">
                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" :round="false" size="default" @change="tabTypeChange" />
                </div>
                <div class="hc-csc-info-box">
                    <el-scrollbar>
                        <div class="hc-info-text-item">
                            <div class="title">案卷题名：</div>
                            <div class="content">{{ fileInfo.name }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">
                                <span>密</span>
                                <span class="ml-7">级：</span>
                            </div>
                            <div class="content"> {{ fileInfo.secretLevelValue }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">保管期限：</div>
                            <div class="content"> {{ fileInfo.storageTimeValue }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">卷内文件：</div>
                            <div class="content"> {{ fileInfo.pageNumber }}</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">起止日期：</div>
                            <div v-if="fileInfo?.endDate !== '' || fileInfo?.startDate !== null" class="content">
                                {{ `${splitDate(fileInfo?.startDate)}~${splitDate(fileInfo?.endDate)}` }}
                            </div>
                            <div v-else class="content" />
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">立卷单位：</div>
                            <div class="content"> {{ fileInfo.unit }}</div>
                        </div>
                    </el-scrollbar>
                </div>
                <div :style="{ height: checkId ? '' : 'calc(100% - 363px)' }" class="hc-csc-data-box">
                    <HcTable
                        v-if="tabTypeKey === 'tab1'" :column="cscTableColumn1" :datas="cscTableData1"
                        :index-style="{ width: 60 }" :is-index="false" :loading="cscTableLoading" is-new
                    >
                        <template #name="{ row }">
                            <div :class="row.id === checkId ? 'bg-orange-400' : 'text-hover'" @click="changePdf(row)">{{ row?.fileName }}</div>
                        </template>
                    </HcTable>

                    <HcTable v-if="tabTypeKey === 'tab2'" :column="cscTableColumn2" :datas="cscTableData2" :is-index="false" :loading="cscTableLoading" is-new>
                        <template #name="{ row }">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{ row?.name }}</div>
                        </template>
                    </HcTable>

                    <HcTable
                        v-if="tabTypeKey === 'tab3'" :column="cscTableColumn3" :datas="cscTableData3"
                        :is-index="false" :loading="cscTableLoading" is-new
                    >
                        <template #name="{ row }">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{ row?.name }}</div>
                        </template>
                    </HcTable>

                    <HcTable
                        v-if="tabTypeKey === 'tab4'" :column="cscTableColumn4" :datas="cscTableData4"
                        :is-index="false" :loading="cscTableLoading" is-new
                    >
                        <template #name="{ row }">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'" class="hc-csc-associated-row">
                                <el-tag effect="dark">{{ row?.tag }}</el-tag>
                                <span class="ml-3">{{ row?.name }}</span>
                            </div>
                        </template>
                    </HcTable>

                    <MetaTable
                        v-if="tabTypeKey === 'tab5'" :ishow-file="ishowFile"
                        :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata"
                    />

                    <HcTable
                        v-if="tabTypeKey === 'tab6'" :column="cscTableColumn5" :datas="cscTableData5"
                        :loading="cscTableLoading" is-new
                    />

                    <el-tooltip
                        v-if="tabTypeKey === 'tab6' || tabTypeKey === 'tab5'" :disabled="!isBubble"
                        content="使用弹窗查看数据"
                        placement="top"
                    >
                        <div class="hc-table-info-btn" @click="cscTableDataModalShow">
                            <HcIcon name="airplay" />
                        </div>
                    </el-tooltip>
                </div>
                <div v-if="checkId" class="hc-csc-action-box">
                    <div class="header-box">
                        <div class="title">抽检意见：</div>
                        <!-- <div class="extra">
                            <el-checkbox v-model="reform.type" class="size-xl">需要整改</el-checkbox>
                        </div> -->
                    </div>
                    <div class="textarea-box">
                        <div v-if="ishowAllopinion">
                            <el-input
                                v-model="reform.content" :autosize="{ minRows: 1, maxRows: 2 }" placeholder="请填写抽检意见" resize="none"
                                type="textarea" @focus="contentClick"
                            />
                        </div>
                        <div v-else>
                            <el-input
                                ref="saveTagInput" v-model="reform.myOpinion" :autosize="{ minRows: 1, maxRows: 2 }" 
                                placeholder="请填写抽检意见" resize="none" type="textarea"
                            />
                        </div>
                    </div>
                    <div class="btn-box">
                        <el-button hc-btn style="height: 40px; padding: 0 15px;" type="warning" @click="onCarrySpotChecksDrawerClose">
                            <HcIcon name="close" />
                            <span>{{ closeText }}</span>
                        </el-button>
                        <el-button :loading="submitLoading" hc-btn type="primary" style="height: 40px; padding: 0 15px;" @click="submitOpinion">
                            <HcIcon name="check" />
                            <span>{{ checkText }}</span>
                        </el-button>
                    </div>
                </div>
                <div v-if="checkId.length == 0" class="btn-box" style="text-align: center;">
                    <el-button hc-btn style="height: 40px; padding: 0 15px;" type="warning" @click="onCarrySpotChecksDrawerClose">
                        <HcIcon name="close" />
                        <span>取消查阅</span>
                    </el-button>
                </div>
            </div>
        </HcDrawer>

        <!-- 使用弹窗查看数据 -->
        <hc-new-dialog
            v-model="cscTableDataModal" :footer="false" :title="cscTableDataTitle" is-table widths="1080px"
            @close="cscTableDataModalClose"
        >
            <MetaTable
                v-if="tabTypeKey === 'tab5'" :ishow-file="ishowFile"
                :loading="cscmetaTableLoading" :meta-data-table="cscmetaDataTabledata"
            />
            <HcTable
                v-if="tabTypeKey === 'tab6'" :column="cscTableColumn51" :datas="cscTableData5"
                :index-style="{ width: 60 }" :loading="cscTableLoading" is-new
            />
        </hc-new-dialog>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import MetaTable from './meta-table.vue'
import archiveQueryApi from '~api/using/query.js'
import { getArrValue, getObjValue, getRandom } from 'js-fast-way'
import tuningApi from '~api/archiveConfig/tuning.js'
import initialgApi from '~api/initial/initial'
import { useRouter } from 'vue-router'

//参数
const props = defineProps({
    projectId: {
        type: [String, Number],
        default: '',
    },
    contractId: {
        type: [String, Number],
        default: '',
    },
    show: {
        type: Boolean,
        default: false,
    },
    closeText: {
        type: [String, Number],
        default: '取消查阅',
    },
    checkText: {
        type: [String, Number],
        default: '保存抽检意见',
    },
    fileId: {
        type: [String, Number],
        default: '', //案卷ID
    },
    fileInfo: {
        type: Object,
        default: () => ({}),
    },
    isOpinion: {
        type: Boolean,
        default: false,
    },
    currentId: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['close', 'check'])

const useAppState = useAppStore()

//变量
const projectId = ref(props.projectId)
const contractId = ref(props.contractId)
const isOpinion = ref(props.isOpinion)
const isBubble = ref(useAppState.getBubble)
const isDrawer = ref(props.show)
const fileId = ref(props.fileId)//案卷ID
const fileInfo = ref(props.fileInfo)//案卷ID
const userInfo = ref(useAppState.getUserInfo)
const currentId = ref(props.currentId)
const router = useRouter()
//监听
watch(() => [
    props.show,
    useAppState.getBubble,
    props.fileId,
    props.fileInfo,
    props.projectId,
    props.isOpinion,
    props.currentId,
], ([show, bubble, FileId, FileInfo, ProjectId, isO, curId]) => {

    isDrawer.value = show
    isBubble.value = bubble
    fileId.value = FileId
    fileInfo.value = FileInfo
    projectId.value = ProjectId
    isOpinion.value = isO
    currentId.value = curId

    if (fileId.value && isDrawer.value) {
        getArchiveFileListData()


    }
    if (isO) {
        // checkId.value = fileInfo.value.fileId || ''
          checkId.value = fileInfo.value.id || ''
        ishowAllopinion.value = true
        getopiniondata()
    } else {
        checkId.value = ''
    }
})

onMounted(() => {
    console.log(fileId.value, 'fileId.value')

})
//类型tab数据和相关处理
const tabTypeKey = ref('tab1')
const tabTypeTab = ref([
    { key: 'tab1', name: '卷内文件' },
    { key: 'tab2', name: '竣工资料' },
    { key: 'tab3', name: '计量资料' },
    { key: 'tab4', name: '关联资料' },
    { key: 'tab5', name: '元数据' },
    { key: 'tab6', name: '验签包' },
])
const tabTypeChange = ({ key }) => {
    tabTypeKey.value = key
}

const cscTableLoading = ref(false)

//卷内目录
const cscTableColumn1 = [
    { key: 'name', name: '卷内文件题名', align: 'center' },
]
const cscTableData1 = ref([])
//获取卷内文件数据

const getArchiveFileListData = async () => {
    cscTableLoading.value = true

    const { error, code, msg, data } = await archiveQueryApi.getArchiveFileList({
        id: fileId.value, //案卷id

    })
    cscTableLoading.value = false
    //处理返回数据
    if (!error && code === 200) {
        //  fileInfo.value = data
        fileInfo.value.pageNumber = data.pageNumber
        fileInfo.value.storageTimeValue = data.storageTimeValue
        fileInfo.value.secretLevelValue = data.secretLevelValue
        fileInfo.value.endDate = data.endDate
        fileInfo.value.startDate = data.startDate
        fileInfo.value.name = data.name
        fileInfo.value.unit = data.unit
        cscTableData1.value = getArrValue(data['approvalFileList'])
        if (cscTableData1.value.length > 0) {
            checkmetaFileId.value = cscTableData1.value[0].id
            // pdfUrl.value = cscTableData1.value[0].pdfFileUrl
            let rawUrl = cscTableData1.value[0].pdfFileUrl
 
        pdfUrl.value = rawUrl

            checkId.value = cscTableData1.value[0].id
            getmetaInfo()
        }

    } else {

        cscTableData1.value = []
        pdfUrl.value = ''
       
        checkId.value = ''
    }
}
const ishowFile = ref(false)
const pdfLoading = ref(false)
const pdfUrl = ref('')
const ishowPdf = ref(true)
const checkId = ref('')
const checkmetaFileId = ref('')
const ishowAllopinion = ref(false)
const saveTagInput = ref(null)
const contentClick = () => {
    console.log(11111)
    ishowAllopinion.value = false
    nextTick(() => {
        saveTagInput.value?.focus()
    })
}
const changePdf = (row) => {
    console.log(row, 'row')
    ishowFile.value = true
    pdfLoading.value = false
    pdfShowTime.value = 0
    ishowPdf.value = false
    setTimeout(() => {
        ishowPdf.value = true
    }, 100)
    // pdfUrl.value = row['pdfFileUrl'] || ''
    let rawUrl = row['pdfFileUrl'] || ''

    pdfUrl.value = rawUrl
    checkId.value = row.id
    checkmetaFileId.value = row.id
    getmetaInfo()
    ishowAllopinion.value = true

    getopiniondata()


}
const pdfShowTime = ref(0)
const getPdfTime = (val)=>{
    pdfShowTime.value = val
}
const pdfTimer = ref(null)
// 方案1：监听路由离开（最可靠）
router.beforeEach((to, from, next) => {
  // 判断是否从专家页面离开
  if (from.path === '/transfer/leader-sampling' && pdfTimer.value) {
    clearTimeout(pdfTimer.value)
    pdfTimer.value = null
  }
  next()
})
watch([pdfUrl, isDrawer], ([newPdfUrl, newShouldCarryOutSpotChecks]) => {
  // 清除之前的定时器
  if (pdfTimer.value) {
    clearTimeout(pdfTimer.value)
    pdfTimer.value = null
  }
  
  if (newPdfUrl && newPdfUrl.length > 0 && newShouldCarryOutSpotChecks) {
    // 设置新的定时器并保存ID
    pdfTimer.value = setTimeout(() => {
      if (pdfUrl.value === newPdfUrl && newShouldCarryOutSpotChecks.value) {
        serReviewFile()
      }
    }, pdfShowTime.value ? pdfShowTime.value + 30000 : 30000)
  }
}, { deep: true })
//设置为已查阅
const serReviewFile = async () => {
    const { error, code, data, msg } = await initialgApi.updateInspectStatus({
        archiveId: fileId.value,
        projectId: projectId.value,
        conclusionId: currentId.value,
    })
    if (!error && code === 200) {
    window.$message.success(data)
     
    } else {
          window.$message.error(msg)
    }
}
const opid = ref('')

//获取抽检意见
const getopiniondata = async () => {

    const { error, code, data, msg } = await initialgApi.getArchiveFileOpinion({
        fileId: checkId.value,
        projectId: projectId.value,
        conclusionId: currentId.value,
    })
    if (!error && code === 200) {
        console.log(data, 'data')
        let opiniondata = getObjValue(data)
        reform.value.content = opiniondata?.allOpinion
        // reform.value.type = opiniondata?.allOpinion?.length > 0 ? true : false
        reform.value.myOpinion = opiniondata?.opinion
        opid.value = opiniondata?.id
    }
}
//获取元数据信息
//获取元数据
const cscmetaTableLoading = ref(false)
const cscmetaDataTabledata = ref([])
const getmetaInfo = async (fileId) => {

    cscmetaTableLoading.value = true
    const { error, code, data } = await tuningApi.getMetadataFileByid({
        fileId: checkmetaFileId.value,
    })
    cscmetaTableLoading.value = false
    if (!error && code === 200) {
        cscmetaDataTabledata.value = getArrValue(data)
    } else {
        cscmetaDataTabledata.value = []
    }
}
//竣工资料
const cscTableColumn2 = [
    { key: 'name', name: '竣工图资料', align: 'center' },
]
const cscTableData2 = ref([

   
])

//计量资料
const cscTableColumn3 = [
    { key: 'name', name: '计量资料', align: 'center' },
]
const cscTableData3 = ref([

])

//计量资料
const cscTableColumn4 = [
    { key: 'name', name: '关联文件', align: 'center' },
]
const cscTableData4 = ref([

])


//验签包
const cscTableColumn5 = [
    { key: 'user', name: '签名者' },
    { key: 'time', name: '签名时间' },
    { key: 'val', name: '摘要' },
]
const cscTableColumn51 = [
    { key: 'user', name: '签名者', width: 300 },
    { key: 'time', name: '签名时间', width: 200 },
    { key: 'val', name: '摘要' },
]
const cscTableData5 = ref([
    
  
])


//抽检意见
const reform = ref({
    // type: false,
    content: '',
})


//显示右侧目录
const isCarryDataShow = ref(true)
const onCarryDataShow = () => {
    isCarryDataShow.value = !isCarryDataShow.value
}

//使用弹窗查看数据
const cscTableDataModal = ref(false)
const cscTableDataTitle = ref('')
//显示弹窗
const cscTableDataModalShow = () => {
    const key = tabTypeKey.value
    if (key === 'tab5') {
        cscTableDataTitle.value = '元数据'
    } else if (key === 'tab6') {
        cscTableDataTitle.value = '验签包'
    }
    cscTableDataModal.value = true
}

//关闭弹窗
const cscTableDataModalClose = () => {
    cscTableDataModal.value = false
}

//关闭抽查
const onCarrySpotChecksDrawerClose = () => {
      if (pdfTimer.value) {
        clearTimeout(pdfTimer.value)
        pdfTimer.value = null
    }
    isDrawer.value = false
    ishowFile.value = false
    checkmetaFileId.value = ''
    checkId.value = ''
    pdfUrl.value = ''
    pdfShowTime.value = 0
    cscTableData1.value = []
    emit('close', false)
}

const checkClick = () => {
    emit('check')
}
const submitLoading = ref(false)
const submitOpinion = async () => {
    submitLoading.value = true
    const { error, code, data, msg } = await initialgApi.saveInspect({
        fileId: checkId.value,
        archiveId: fileId.value,
        // opinion:reform.value.content,
        opinion: reform.value.myOpinion,
        projectId: projectId.value,
        userId: userInfo.value.user_id,
        archiveName: fileInfo.value.name,
        id: opid.value || null,
        conclusionId: currentId.value,

    })
    submitLoading.value = false
    if (!error && code === 200) {
        window.$message.success(msg)
        serReviewFile()
    } else {
        window.$message?.error(msg || '操作失败')
    }
    // addOpinion
}
//截取日期
const splitDate = (val) => {
    if (val) {
        return val?.substring(0, 10)
    } else {
        return ''
    }
}
//查阅案卷pdf
const viewPdf = async (id) => {
    window.$message?.info('预览案卷需要合并pdf，需要一点时间')
    pdfLoading.value = true
    const { error, code, data, msg } = await tuningApi.printArchive({
        id: id,
    })
    pdfLoading.value = false
    if (!error && code === 200) {
        if (data) {
            return data
        } else {
            window.$message?.warning('文件不存在')
        }
    }
}
</script>

<style lang="scss" scoped>
.hc-carry-spot-checks-pdf {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    transition: 0.2s;
    .hc-csc-pdf-btn {
        position: absolute;
        right: 0;
        top: 50%;
        color: white;
        font-size: 25px;
        z-index: 111;
        cursor: pointer;
        width: 36px;
        height: 40px;
        display: flex;
        padding-left: 6px;
        align-items: center;
        justify-content: center;
        border-radius: 150px 0 0 150px;
        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
        box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
        background-size: 200%;
        transition: background-position 0.5s;
        &:hover {
            background-position: 100% 0;
        }
    }
}
.hc-carry-spot-checks-data {
    position: relative;
    height: 100%;
    width: 480px;
    padding-left: 14px;
    border-left: 1px solid #e9e9e9;
    transition: 0.2s;
    .hc-csc-switch {
        position: relative;
        margin-bottom: 10px;
    }
    .hc-csc-info-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: 224px;
        margin-bottom: 10px;
        .hc-info-text-item {
            position: relative;
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            .title {
                font-weight: bold;
            }
            .content {
                flex: 1;
                position: relative;
                color: #101010;
            }
        }
        .hc-info-text-item + .hc-info-text-item {
            margin-top: 8px;
        }
    }
    .hc-csc-data-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: calc(100% - 420px);
        margin-bottom: 16px;
        .hc-csc-associated-row {
            position: relative;
            text-align: left;
            display: flex;
            align-items: center;
        }
        .hc-table-info-btn {
            position: absolute;
            right: -5px;
            top: -12px;
            color: white;
            font-size: 20px;
            z-index: 111;
            cursor: pointer;
            border-radius: 50px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
            box-shadow: -2px 0 10px 0 rgba(32, 37, 50, 0.03), 0 10px 21px 20px rgba(32, 37, 50, 0.03);
            background-size: 200%;
            transition: background-position 0.5s;
            &:hover {
                background-position: 100% 0;
            }
        }
    }
    .hc-csc-action-box {
        position: relative;
        background: white;
        border-radius: 10px;
        padding: 12px;
        // height: 240px;
        .header-box {
            position: relative;
            display: flex;
            align-items: center;
            .title {
                flex: 1;
                color: #9A9A9A;
                font-size: 15px;
            }
        }
        .textarea-box {
            margin-top: 12px;
        }
        .btn-box {
            position: relative;
            margin-top: 10px;
            text-align: center;
        }
    }
}
</style>

<style lang="scss">
.hc-carry-spot-checks-target.el-overlay {
    position: absolute;
    margin: -24px;
    height: revert;
    background-color: transparent;
    .hc-drawer-box.el-drawer {
        --el-drawer-bg-color: transparent;
        .el-drawer__body {
            padding: 24px;
            overflow: hidden;
            .el-card__body {
                padding: 10px;
            }
            .hc-card-main-box {
                display: flex;
            }
        }
    }
}
.hc-csc-action-box .btn-box {
    .el-button + .el-button {
        margin-left: 50px;
    }
}

html.dark {
    .hc-carry-spot-checks-pdf {
        position: relative;
        flex: 1 1 auto;
        height: 100%;
        transition: 0.2s;
        .hc-csc-pdf-btn {
            position: absolute;
            right: 0;
            top: 50%;
            color: white;
            font-size: 25px;
            z-index: 111;
            cursor: pointer;
            width: 36px;
            height: 40px;
            display: flex;
            padding-left: 6px;
            align-items: center;
            justify-content: center;
            border-radius: 150px 0 0 150px;
            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
            background-size: 200%;
            transition: background-position 0.5s;
            &:hover {
                background-position: 100% 0;
            }
        }
    }
    .hc-carry-spot-checks-data {
        position: relative;
        height: 100%;
        width: 480px;
        padding-left: 14px;
        border-left: 1px solid #e9e9e9;
        transition: 0.2s;
        .hc-csc-switch {
            position: relative;
            margin-bottom: 10px;
        }
        .hc-csc-info-box {
            position: relative;
            // background: #E7EEF4;
            border: 1px solid var(--el-color-primary);
            color: white;
            background: transparent;
            border-radius: 10px;
            padding: 12px;
            height: 224px;
            margin-bottom: 20px;
            .hc-info-text-item {
                position: relative;
                font-size: 14px;
                display: flex;
                align-items: flex-start;
                .title {
                    font-weight: bold;
                }
                .content {
                    flex: 1;
                    position: relative;
                    color: white;
                }
            }
            .hc-info-text-item + .hc-info-text-item {
                margin-top: 8px;
            }
        }
        .hc-csc-data-box {
            position: relative;
            // background: #E7EEF4;
            background: transparent;
            border-radius: 10px;
            padding: 12px;
            height: calc(100% - 420px);
            margin-bottom: 16px;
            .hc-csc-associated-row {
                position: relative;
                text-align: left;
                display: flex;
                align-items: center;
            }
            .hc-table-info-btn {
                position: absolute;
                right: -5px;
                top: -12px;
                color: white;
                font-size: 20px;
                z-index: 111;
                cursor: pointer;
                border-radius: 50px;
                width: 34px;
                height: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
                box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
                background-size: 200%;
                transition: background-position 0.5s;
                &:hover {
                    background-position: 100% 0;
                }
            }
        }
        .hc-csc-action-box {
            position: relative;
            background: transparent;
            border-radius: 10px;
         
            padding: 12px;
            // height: 240px;
            .header-box {
                position: relative;
                display: flex;
                align-items: center;
                .title {
                    flex: 1;
                    color: #9A9A9A;
                    font-size: 15px;
                }
            }
            .textarea-box {
                margin-top: 12px;
            }
            .btn-box {
                position: relative;
                margin-top: 10px;
                text-align: center;
            }
        }
    }
    
}
</style>