<template>
    <div class="big_boxs">
        <div class="yfqd_box">
            <div class="yhqd_btn">
                <img :src="getImgUrl('indexImages/icon7.png')">
                <div>
                    <div class="risk_cont">
                        <span class="title">风险总数</span>
                        <span><span class="num">32</span>条
                        </span>
                    </div>
                    <ul class="risk_list">
                        <li v-for="item in RiskData" :key="item">
                            <span>{{ item.color }} : </span>
                            <span class="risk_num">{{ item.num }}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="content">
                <li v-for="item in fxlist" :key="item">
                    <div>
                        <span class="btn_red" v-if="item.type == '01'">红色风险</span>
                        <span class="btn_org" v-if="item.type == '02'">橙色风险</span>
                        <span class="btn_yel" v-if="item.type == '03'">黄色风险</span>
                        <span class="btn_blu" v-if="item.type == '04'">蓝色风险</span>
                        <p>{{ item.content }}</p>
                    </div>
                    <div>
                        <el-icon>
                            <Location />
                        </el-icon>
                        <span class="text">{{ item.dz }}</span>
                        <span class="time">{{ item.time }}</span>
                    </div>
                </li>
            </ul>
        </div>


    </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref } from 'vue'
const RiskData = [
    {
        color: '红色',
        num: '8'
    },
    {
        color: '橙色',
        num: '8'
    },
    {
        color: '黄色',
        num: '8'
    }, {
        color: '蓝色',
        num: '8'
    }
]
const fxlist = ref([
    { type: '01', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '02', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '03', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '04', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '01', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '02', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '03', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '04', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '01', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '02', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '03', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '04', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '01', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '02', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '03', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '04', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '01', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '02', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '03', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },
    { type: '04', content: '风险内容风险内容风险内容', dz: '烟草生产大楼南门', time: '2023-03-01 12:34:33' },

])
</script>
<style lang="scss" scoped>
.big_boxs {
    background-color: #fff;
    margin-top: 10px;
    padding-top: 10px;
    // width: 100%;
    // height: 100%;
}

.yfqd_box {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;


    .yhqd_btn {
        display: flex;
        background: rgba(17, 187, 109, 0.1);
        box-shadow: 0px 19px 112px 0px rgba(49, 79, 124, 0.0392);
        border-radius: 4px 4px 4px 4px;


        >div {
            flex: 1;
            margin: 0 10px;

            .risk_cont {
                display: flex;
                justify-content: space-between;

                >span {
                    font-size: 15px;
                    font-family: Microsoft YaHei;
                    font-weight: 500;
                    color: #ccc;

                }

                .title {
                    font-size: 24px;
                    font-style: italic;
                    color: #757575;
                }

                .num {
                    font-size: 24px;
                    color: var(--el-color-primary);
                }
            }

            .risk_list {
                display: flex;
                justify-content: space-between;

                li {
                    font-size: 10px;
                    margin: 10px 0px;
                    color: #191919;

                    >span {
                        display: block;
                    }

                    .risk_num {
                        text-align: center;
                        font-weight: 400;
                        color: var(--el-color-primary);
                    }
                }
            }
        }
    }

    .content {
        height: calc(100% - 78px);
        overflow: hidden;
        overflow-y: auto;

        >li {
            margin-top: 8px;
            background: #FFFFFF;
            box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
            padding: 2px;

            >div:first-child {
                display: flex;
                margin: 5px;
                border-bottom: 1px solid rgba(0, 117, 85, 0.2);

                span {
                    width: 20%;
                }

                p {
                    margin-top: 5px;
                    font-size: 11px;
                    font-weight: 290;
                    color: #3D3D3D;
                    line-height: 13px;
                    margin-left: 10px;
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            >div:last-child {
                padding: 5px;
                display: flex;

                img {
                    margin: 3px;
                }

                span {
                    width: 90%;
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .text {
                    // margin-left: -10px;
                    font-weight: 400;
                    color: #191919;
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 10px;
                }

                .time {
                    font-size: 9px;
                    font-weight: 400;
                    color: #A3B69C;
                }

            }

            div>span {
                height: 20px;
                line-height: 20px;
                margin-left: 5px;
                text-align: center;
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .boder {
                margin-top: -2px;
                margin-left: 15px;
                width: 90%;
                height: 1px;
                background: #7AFCF8;
                border: 1px solid #35A5D7;
                opacity: 0.2;
                padding: none;
            }

            .btn_red {
                font-size: 10px;
                font-weight: 400;
                color: #F4002C;
                background: #FFF4F6;
                border-radius: 2px 2px 2px 2px;
            }

            .btn_yel {
                background: #FDF5DB;
                border-radius: 2px 2px 2px 2px;
                font-size: 10px;
                font-weight: 400;
                color: #FFBF00;
            }

            .btn_org {
                font-size: 10px;
                font-weight: 400;
                color: #FE7F2E;
                background: #FFF6E8;
                border-radius: 2px 2px 2px 2px;
            }

            .btn_blu {
                font-size: 10px;
                font-weight: 400;
                color: #1EA7FF;
                background: #D8EDFF;
                border-radius: 2px 2px 2px 2px;
            }
        }
    }
}

::v-deep .el-icon {
    margin-top: 2px;
    // margin-right: 10px;
    color: var(--el-color-primary);
}

::-webkit-scrollbar-thumb {
    background-color: #1E3A26;
    border-radius: 50px;
}

::-webkit-scrollbar-track {
    background-color: #0e2007
}
</style>