winhc-demension-vue3/src/views/CustomPage/SxXgDataDet.vue

<!--
 * @Description: 
 * @Author: 狼牙
 * @Email: huangxiaoming@winhc.cn
 * @Date: 2022-04-20 17:06:02
 * @LastEditTime: 2022-04-20 17:45:01
 * @LastEditors: 狼牙
-->
<template>
    <div class="SxXgDataDet">
        <div class="container">
            <div class="s-top">
                <div class="its">
                    <p>累计被执行人总金额</p>
                    <p class="je">{{$route.query.totalExecAmount}}万元</p>
                </div>
                <div class="its">
                    <p>疑似当前欠款总金额</p>
                    <p class="je">{{$route.query.totalNoExecAmount}}万元</p>
                </div>
            </div>
            <div class="s-mid">
                <p class="tl">被执行人</p>
                <div class="ls">
                    <span>当前被执行人金额</span>
                    <span class="je">{{$route.query.zxrTotalExecAmount}}万元</span>
                </div>
            </div>
            <div class="s-mid">
                <p class="tl">终本案件</p>
                <div class="ls">
                    <span>执行标的总金额</span>
                    <span class="je">{{$route.query.finalCaseExecAmount}}万元</span>
                </div>
                <div class="ls">
                    <span>未履行总金额</span>
                    <span class="je">{{$route.query.finalCaseNoExecAmount}}万元</span>
                </div>
                <div class="ls">
                    <span>未履行比例</span>
                    <span class="je">{{$route.query.noExecPercent}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
    document.title = '详细数据';
</script>

<style lang='scss' scoped>
    .SxXgDataDet{
        padding: 0.52rem 0.24rem;
        .container{
               background: #fff;
                border-radius: 0.16rem;
                padding: 0 0.32rem;
                color: #242A32;
            .s-top{
                display: flex;
                padding: 0.4rem 0;
                font-size: 0.24rem;
                border-bottom: 1px solid #F8FAFC;
                .its{
                    flex: 1;
                    .je{
                        padding-top: 0.16rem;
                    }
                    &:last-child{
                        border-left: 1px solid #F8FAFC;
                        padding-left: 0.32rem;
                    }
                }
            }
            .s-mid{
                padding: 0.4rem 0;
                border-bottom: 1px solid #F8FAFC;
                &:last-child{
                    border-bottom: none;
                }
                .tl{
                    color: #242A32;
                    font-weight: bold;
                    font-size: 15px;
                }
                .ls{
                    display: flex;
                    justify-content: space-between;
                    padding-top: 0.32rem;
                    color: #919498;
                    font-size: 0.26rem;
                    .je{
                        color: #242A32;
                    }
                }
            }
        }
    }
</style>