feat: 新增机巢详情

张含笑

2025-04-12 133ef1ae6caf41e671b21678a7f0d3538483d1f4

feat: 新增机巢详情

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue

@@ -1,47 +1,60 @@
<template>
    <el-divider content-position="left">相关事件 {{total}}次</el-divider>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="event_name" label="名称" />
        <el-table-column prop="media_type" label="类型" />
        <el-table-column prop="ai_types" label="关联算法" />
        <el-table-column prop="photo_url" label="图片url" />
        <el-table-column prop="video_url" label="视频url" />
        <el-table-column prop="status" label="状态">
            <template #default="scope">
                <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
                <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag>
                <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag>
                <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag>
                <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag>
                <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag>
            </template>
        </el-table-column>
    <el-table-column prop="event_dict_key" label="event_dict_key" />
    <el-table-column prop="create_time" label="创建时间" />
    <div class="deviceevent-container">
        <div class="machineTableDetailsTitle">
            <p>
                相关事件 <span>{{ total }}</span
                >件
            </p>
        </div>
        <div class="deviceevent-table">
            <el-table :data="list" :row-class-name="tableRowClassName"
            style="width: 100%;"
            :row-style="{ height: '48px', fontSize: '14px', 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }">
            <el-table-column label="序号" type="index" width="60">
                    <template #default="{ $index }">
                        {{ ($index + 1).toString().padStart(2, '0') }}
                    </template>
                </el-table-column>
            <el-table-column prop="id" label="事件编号" />
            <el-table-column prop="event_name" label="事件名称" />
            <el-table-column prop="event_name" label="所属单位 " />
            <el-table-column prop="media_type" label="事件内容" />
            <el-table-column prop="ai_types" label="关联算法" />
            <el-table-column prop="status" label="事件状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
                    <el-tag v-if="scope.row.status === 1" type="success">待分拨</el-tag>
                    <el-tag v-if="scope.row.status === 2" type="warning">待处理</el-tag>
                    <el-tag v-if="scope.row.status === 3" type="success">处理中</el-tag>
                    <el-tag v-if="scope.row.status === 4" type="success">已完成</el-tag>
                    <el-tag v-if="scope.row.status === 5" type="success">已完结</el-tag>
                </template>
            </el-table-column>

    <el-table-column label="操作" >
      <template #default="scope">
        <el-button type="primary" link @click="examine(scope.row)">审核</el-button>
        <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
        background
        :page-sizes="[10, 20, 30, 50]"
        v-model:current-page="sizeParams.current"
        v-model:page-size="sizeParams.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="pageChange"
    />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" link @click="examine(scope.row)">审核</el-button>
                    <el-button type="primary" link @click="distribution(scope.row)">分拨</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <el-pagination
            background
            :page-sizes="[10, 20, 30, 50]"
            v-model:current-page="sizeParams.current"
            v-model:page-size="sizeParams.size"
            layout="prev, pager, next, jumper"
            :total="total"
            @change="pageChange"
        />
    </div>
</template>
<script setup>
import { useStore } from 'vuex'
import { getDeviceEventList } from '@/api/home/machineNest'
import { ElMessage } from 'element-plus';

import { ElMessage } from 'element-plus'

const list = ref([])
const params = ref({
@@ -49,7 +62,7 @@
})
const sizeParams = ref({
    current: 1,
    size: 10,
    size: 5,
})
const store = useStore()
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
@@ -59,7 +72,7 @@
    ElMessage.warning('正在加急开发中...')
}
const examine = row => {
  ElMessage.warning('正在加急开发中...')
    ElMessage.warning('正在加急开发中...')
}

const getList = () => {
@@ -74,9 +87,168 @@
    sizeParams.value.current = val
    getList()
}

// 表格隔行变色
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 1) {
        return 'warning-row'
    } else {
        return 'success-row'
    }
}
onMounted(() => {
    getList()
})
</script>
<style scoped lang="scss"></style>
<style lang="scss">
.deviceevent-container {
    // 表格
    .el-table__inner-wrapper:before {
        height: 0 !important;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
    }
    .el-table .warning-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 50%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
    .el-table .success-row {
        --el-table-tr-bg-color: #0b1d38;
    }
    .el-table .success-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 79%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
}
</style>
<style scoped lang="scss">
.deviceevent-container {
margin-top: 50px;
}
// 标题
.machineTableDetailsTitle {
    margin: 0 24px;
    margin-bottom: 16px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    p {
        display: inline-block;
        margin-left: 30px;
        font-size: 16px;
        color: #ddf0ff;
        line-height: 20px;
        text-align: left;
        margin-bottom: 8px;
        span {
            font-size: 26px;
            color: #0282ff;
            font-weight: bold;
        }
    }
}
// 表格
.deviceevent-table {
padding: 0 17px;
}
.el-table {
    color: #fff;
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: none !important;
    --el-table-text-color: #fff !important;
    --el-table-header-text-color: #fff !important;
    --el-table-row-hover-bg-color: none !important;
    --el-table-current-row-bg-color: none !important;
    --el-table-header-bg-color: none !important;
    --el-table-fixed-box-shadow: none !important;
    --el-table-bg-color: none !important;
    --el-table-tr-bg-color: none !important;
    --el-table-expanded-cell-bg-color: none !important;
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
.el-table__header {
    width: 0 !important;
}
.el-table__body {
    border-collapse: collapse;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
    text-align: center !important;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
}
:deep(.el-table thead) {
    border-bottom: 1px solid;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
    color: var(--el-table-header-text-color);
    background: #102441;
}
// 分页
:deep(.el-pagination) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    margin-top: 15px;
}
:deep(.el-pagination button) {
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li) {
    background: none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li.is-active) {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
:deep(.el-pagination__goto) {
    color: #c7e1ff !important;
}
:deep(.el-pagination__classifier) {
    color: #c7e1ff !important;
}
:deep(.el-pager .el-input__wrapper) {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
:deep(.el-input__wrapper) {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
:deep(.el-input__inner) {
    color: #fff !important;
}
</style>

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue

@@ -1,38 +1,53 @@
<template>
    <el-divider content-position="left">相关任务 {{ total }}次</el-divider>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="industry_type_str" label="任务类型" />
        <el-table-column prop="ai_type_str" label="关联算法" />
        <el-table-column prop="event_number" label="事件工单" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="area_code" label="地区代码" />
        <el-table-column prop="begin_time" label="开始时间" />
        <el-table-column prop="end_time" label="结束时间" />
        <el-table-column prop="creator_name" label="创建者" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        background
        :page-sizes="[10, 20, 30, 50]"
        v-model:current-page="sizeParams.current"
        v-model:page-size="sizeParams.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @change="pageChange"
    />
    <div class="devicejob-container">
        <div class="machineTableDetailsTitle">
            <p>
                相关任务 <span>{{ total }}</span
                >次
            </p>
        </div>
        <div class="devicelob-table">
            <el-table
                :data="list"
                :row-class-name="tableRowClassName"
                style="width: 100%"
                :row-style="{ height: '48px', fontSize: '14px', 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
            >
                <el-table-column label="序号" type="index" width="60">
                    <template #default="{ $index }">
                        {{ ($index + 1).toString().padStart(2, '0') }}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="任务编号" />
                <el-table-column prop="name" label="任务名称" />
                <el-table-column prop="industry_type_str" label="任务类型" />
                <el-table-column prop="ai_type_str" label="关联算法" />
                <el-table-column prop="event_number" label="事件工单" />

  <DeviceJobDetails v-model:show="deviceJobDetailsShow"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" link @click="viewJob(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            :page-sizes="[10, 20, 30, 50]"
            v-model:current-page="sizeParams.current"
            v-model:page-size="sizeParams.size"
            layout=" prev, pager, next, jumper"
            :total="total"
            @change="pageChange"
        />
    </div>

    <DeviceJobDetails v-model:show="deviceJobDetailsShow" />
</template>
<script setup>
import { useStore } from 'vuex'
import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue';
import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue'
import { getDeviceJobList } from '@/api/home/task'

const list = ref([])
@@ -41,7 +56,7 @@
})
const sizeParams = ref({
    current: 1,
    size: 10,
    size: 5,
})
const store = useStore()
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
@@ -49,9 +64,9 @@
const deviceJobDetailsShow = ref(false)
const wayLineJodInfoId = ref(null)
provide('wayLineJodInfoId', wayLineJodInfoId)
const viewJob = (row) => {
  wayLineJodInfoId.value = row.id
  deviceJobDetailsShow.value = true
const viewJob = row => {
    wayLineJodInfoId.value = row.id
    deviceJobDetailsShow.value = true
}

const getList = () => {
@@ -67,8 +82,165 @@
    sizeParams.value.current = val
    getList()
}
// 表格隔行变色
const tableRowClassName = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 1) {
        return 'warning-row'
    } else {
        return 'success-row'
    }
}
onMounted(() => {
    getList()
})
</script>
<style scoped lang="scss"></style>
<style lang="scss">
.devicejob-container {
    // 表格
    .el-table__inner-wrapper:before {
        height: 0 !important;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
    }
    .el-table .warning-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 50%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
    .el-table .success-row {
        --el-table-tr-bg-color: #0b1d38;
    }
    .el-table .success-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 79%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
}
</style>
<style scoped lang="scss">
// 标题
.machineTableDetailsTitle {
    margin: 0 24px;
    margin-bottom: 16px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    p {
        display: inline-block;
        margin-left: 30px;
        font-size: 16px;
        color: #ddf0ff;
        line-height: 20px;
        text-align: left;
        margin-bottom: 8px;
        span {
            font-size: 26px;
            color: #0282ff;
            font-weight: bold;
        }
    }
}
// 表格
.devicelob-table {
    padding: 0 17px;
}
.el-table {
    color: #fff;
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: none !important;
    --el-table-text-color: #fff !important;
    --el-table-header-text-color: #fff !important;
    --el-table-row-hover-bg-color: none !important;
    --el-table-current-row-bg-color: none !important;
    --el-table-header-bg-color: none !important;
    --el-table-fixed-box-shadow: none !important;
    --el-table-bg-color: none !important;
    --el-table-tr-bg-color: none !important;
    --el-table-expanded-cell-bg-color: none !important;
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
.el-table__header {
    width: 0 !important;
}
.el-table__body {
    border-collapse: collapse;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
    text-align: center !important;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
}
:deep(.el-table thead) {
    border-bottom: 1px solid;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
    color: var(--el-table-header-text-color);
    background: #102441;
}
// 分页
:deep(.el-pagination) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    margin-top: 15px;
}
:deep(.el-pagination button) {
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li) {
    background: none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li.is-active) {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
:deep(.el-pagination__goto) {
    color: #c7e1ff !important;
}
:deep(.el-pagination__classifier) {
    color: #c7e1ff !important;
}
:deep(.el-pager .el-input__wrapper) {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
:deep(.el-input__wrapper) {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
:deep(.el-input__inner) {
    color: #fff !important;
}
</style>

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue

@@ -1,85 +1,198 @@
<!-- 机巢列表详情 -->
<template>
    <el-dialog
        modal-class="machineTableDetails"
        class="machineTableDetails"
        v-model="isShowDetails"
        title="机巢详情"
        :width="pxToRem(1500)"
        :close-on-click-modal="false"
        :destroy-on-close="true"
    >
        <el-divider content-position="left">详情</el-divider>
        <div class="infoBox">
            <div class="itemBox" v-for="item in infoList">
                <div class="itemTitle">{{ item.name }}:</div>
                <div class="itemValue">{{ item.value }}</div>
        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <img src="/src/assets/images/home/homeLeft/inspection-union.png" alt="" />
                <span :id="titleId" :class="titleClass">机巢详情</span>
            </div>
        </template>
        <div class="machineTableDetailsblock">
            <div class="machineTableDetailsTitle"><span>详情</span></div>
            <div class="infoBox">
                <div class="itemBox" v-for="(item, index) in infoList" :key="index">
                    <div class="itemTitle">{{ item.name }}:</div>
                    <div
                        :class="{
                            active: item.value === 'WORKING',
                            freetime: item.value === 'LEISURE',
                            offine: item.value === 'OFFLINE',
                        }"
                        v-if="item.name == '机巢状态'"
                    >
                        {{ item.value === 'OFFLINE' ? '离线中' : item.value === 'WORKING' ? '作业中' : '空闲中' }}
                    </div>
                    <div class="itemValue" v-else>{{ item.value }}</div>
                </div>
            </div>
        </div>
        <DeviceJob v-if="isShowDetails" />
        <DeviceEvent v-if="isShowDetails" />
    </el-dialog>

</template>

<script setup>
import DeviceEvent from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue'
import DeviceJob from '@/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue'
import { pxToRem } from '@/utils/rem';
import { pxToRem } from '@/utils/rem'
import { useStore } from 'vuex'

const isShowDetails = defineModel('show')

const infoList = ref([
    { name: '机巢名称', value: '',field:'nickname' },
    { name: '机巢所属地区', value: '',field:'device_area' },
    { name: '机巢状态', value: '',field:'status' },
    { name: '任务成功', value: '',field:'result_num' },
    { name: '机巢位置', value: '',field:'address' },
    { name: '机巢名称', value: '', field: 'nickname' },
    { name: '机巢所属地区', value: '', field: 'device_area' },
    { name: '任务成果', value: '', field: 'result_num' },
    { name: '机巢位置', value: '', field: 'address' },
    { name: '机巢状态', value: '', field: 'status' },
])
const store = useStore();
const singleTotal = computed(() => store.state.home.singleTotal);
watch(singleTotal, (val) => {
    if (val?.device_info){
const store = useStore()
const singleTotal = computed(() => store.state.home.singleTotal)
watch(singleTotal, val => {
    if (val?.device_info) {
        infoList.value.forEach(item => {
            item.value = val.device_info?.[item.field] || ''
        })
    }
})
onMounted(() => {
})
onMounted(() => {})
</script>

<style lang="scss">
.machineTableDetails {
    height: 1002px;
    background: #0f1929;
    box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
    border-radius: 20px 0px 0px 0px;
    border: 2px solid;
    padding: 0 !important;

    border-image: linear-gradient(
            180deg,
            rgba(81, 168, 255, 0),
            rgba(48, 111, 202, 1),
            rgba(255, 255, 255, 1),
            rgba(27, 148, 255, 1)
        )
        2 2;
    .el-pagination {
        text-align: left;
        padding: 20px;
    }
    .my-header {
        display: inline-block;
        vertical-align: middle;
        margin-left: 12px;
    }
    /* 头部 */
    .el-dialog__header {
        width: 1270px;
        height: 47px;
        margin-bottom: 14px;
        background: url('/src/assets/images/home/homeLeft/inspection-vector.png') no-repeat center;
        background-size: 100% 100%;
        font-weight: bold;
        font-size: 16px;
        line-height: 47px;
    }

    .el-dialog .el-dialog__header {
        /* margin: 0px !important; */
        padding: 0px !important;
        padding-left: 0px !important;
    }
    /* 头部 */
    .el-dialog__title {
        width: 112px;
        height: 19px;
        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 16px;
        line-height: 16px;
        text-shadow: 0px 0px 5px rgba(154, 218, 255, 0.6);
        text-align: left;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #fbfdff 0%, #86d4ff 100%);
        margin-left: 16px;
        -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
        -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
    }
}
</style>

<style lang="scss" scoped>
.infoBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; // 列之间的间距
    padding: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 14px;
    color: #ffffff;
    .itemBox {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
    }

    .itemTitle {
        font-weight: bold;
        color: #333;
    .flystatus {
        width: 53px;
        height: 27px;
        background: #042c53;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #1b94ff;
    }
}

    .itemValue {
        margin-top: 5px;
        color: #666;
// 详情
.machineTableDetailsblock {
    margin: 0 24px;
}
.machineTableDetailsTitle {
    margin-bottom: 16px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    span {
        display: inline-block;
        margin-left: 30px;
        font-size: 16px;
        color: #ddf0ff;
        line-height: 20px;
        text-align: left;
        margin-bottom: 8px;
    }
}
// 离线中
.offine {
    width: 53px;
    height: 27px;
    background: #042c53;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1b94ff;
    text-align: center;
    line-height: 27px;
    font-size: 14px;
    color: #1b94ff;
}
// 空闲中
.freetime {
    width: 53px;
    height: 27px;
    text-align: center;
    line-height: 27px;
    font-size: 14px;
    color: #8effac;
    background: rgba(142, 255, 172, 0.14);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #8effac;
}
.active {
    color: #04f020;
}
</style>