item-management-web/src/views/personal/facePrice.vue

<template>
    <div class="app-container">
        <div class="title-container">
            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        </div>
        <div class="query-class">
            <el-tooltip :content="queryType==='location'?'标准地址格式：成都市xx区xx(路/街/段/巷)xx号(楼盘名)x栋x楼x号':'楼盘名去掉开发商名字可提高查询命中率（例：德商华府天骄->华府天骄）'" placement="top-end" effect="light">
                <el-input placeholder="请输入内容" v-model.trim="queryParam.queryTarget" class="input-with-select" clearable>
                <el-select v-model="queryType" slot="prepend" placeholder="请选择" style="width: 130px;">
                    <el-option label="口估地址" value="location"></el-option>
                    <el-option label="口估楼盘名" value="communityName"></el-option>
                </el-select>
            </el-input>
            </el-tooltip>

            <el-tooltip v-if="dyData.length>0" content="点击放大镜前往贝壳查询该小区成交信息（请提前登录贝壳官网）" placement="top-end" effect="light">
            <el-input id="community" style="margin-left: 20px; width: 300px;" v-model="communityName" >
                <template slot="prepend">贝壳查询</template>
                <el-button slot="append" icon="el-icon-search"  @click="toke()"></el-button>
            </el-input>
            </el-tooltip>
            <el-select v-model="queryParam.limit" placeholder="请选择" style=" margin-left:20px; width: 100px;">
                <el-option key="1" label="两年内" value="两年内"></el-option>
                <el-option key="2" label="一年内" value="一年内"></el-option>
                <el-option key="3" label="半年内" value="半年内"></el-option>
                <el-option key="4" label="三月内" value="三月内"></el-option>
                <el-option key="5" label="一月内" value="一月内"></el-option>
                <el-option key="6" label="不限" value="不限"></el-option>

            </el-select>
            <el-input style="margin-left: 20px; width: 230px; color: red;" :value="currentDate" disabled readonly>
                <template slot="prepend">价值时点</template>
            </el-input>
            <el-button style="margin-left: 20px;" type="success" @click="queryFacePrice()">口估查询</el-button>

            <el-button style="margin-left: 20px;" type="danger" @click="openFacePrice()" :disabled="dyData.length==0 && queryParam.queryTarget==null || queryParam.queryTarget==''">执行口估</el-button>

        </div>

        <el-card class="data-class" shadow="never">
            <span style="font-weight: bold;">大友个贷数据</span>
            <el-tag style="margin: 5px ;" type="danger" effect="plain" size="mini">{{ queryParam.limit }}</el-tag>
            <el-tag style="margin: 5px ;" type="danger" effect="plain" size="mini">{{ dyData.length }} 个</el-tag>
            <el-divider></el-divider>
            <div v-if="dyData.length > 0" style="height: auto; width: 100%; overflow: scroll;max-height: 300px;">
                <el-table ref="table" slot="table" size="medium" :data="dyData" border
                    :header-row-style="{ color: '#333333' }" style="
                border-left: 1px solid #ebeced;
                border-right: 1px solid #ebeced;
                color: #333333; 
                ">
                    <el-table-column label="坐落" align="center" prop="location" width="300" show-overflow-tooltip>
                        <template slot-scope="{row}">
                            <span>{{ row.location?row.location:'-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="小区名称" align="center" prop="communityName">
                        <template slot-scope="{row}">
                            <span>{{ row.communityName?row.communityName:'-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="评估单价(元)" align="center" prop="price">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="评估面积(m²)" align="center" prop="acreage">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.acreage }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="评估总价(万)" align="center" prop="amount">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.amount ? (row.amount / 10000).toFixed(2) + '万' : '-'
                                }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="装修情况" align="center" prop="decoration">
                        <template slot-scope="{row}">
                            <span>{{ row.decoration?row.decoration:'-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="楼层" align="center" prop="atFloor">
                        <template slot-scope="{row}">
                            <span>{{ row.atFloor?row.atFloor:'-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="房屋类型" align="center" prop="buildingType">
                        <template slot-scope="{row}">
                            <span>{{ row.buildingType?row.buildingType:'-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="户型" align="center" prop="houseType">
                        <template slot-scope="{row}">
                            <span>{{ row.houseType?row.houseType:'-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="价值时点" align="center" prop="valueTiming">
                        <template slot-scope="{row}">
                            <span>{{ row.valueTiming }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="匹配方式" align="center" prop="matching">
                        <template slot-scope="{row}">
                            <span>{{ row.matching }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-else style="height: 200px; width: 100%;">
                <el-empty v-if="msg == null" :image-size=100 description="请查询"></el-empty>
                <el-empty v-else :image-size=100 :description="msg"></el-empty>
            </div>

        </el-card>
        <el-card class="data-class" shadow="never">
            <span style="font-weight: bold;">系统数据 </span>
            <el-tag type="danger" effect="plain" size="mini">{{ queryParam.limit }}</el-tag>
            <el-tag style="margin: 5px ;" type="danger" effect="plain" size="mini">{{ enternalData.deals.length +
                enternalData.ups.length }} 个</el-tag>
            <el-divider></el-divider>
            <div style="width: 100%; display: flex;">
                <el-card v-if="enternalData.deals.length > 0" class="tab"
                    :style="activateTable == 'deal' ? activeStyle : disActiveStyle" shadow="hover"
                    @click.native="activateTable = 'deal'">
                    <div style="padding: 3px;font-size: 20px;">
                        <div>
                            <span style="font-weight: bold; color: red;">成交价：{{ enternalData.dealPrice }} ￥</span> =
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.dealAvgPrice
                                }}</span> *
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.timeParam
                                }}</span> *
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.acreageParam
                                }}</span> *
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.overAllParam
                                }}</span>

                            <span style="margin-left: 50px;">{{ enternalData.deals.length }} 个</span>
                        </div>

                        <div>
                            <el-tag style="margin-left: 200px; font-size: 13px; ">成交均价</el-tag>
                            <el-tag style="margin-left: 28px; font-size: 13px; ">时间修正</el-tag>
                            <el-tag style="margin-left: 3px; font-size: 13px; ">面价修正</el-tag>
                            <el-tag style="margin-left: 3px; font-size: 13px; ">综合修正</el-tag>
                        </div>


                    </div>
                </el-card>
                <el-card v-if="enternalData.ups.length > 0" class="tab"
                    :style="activateTable == 'up' ? activeStyle : disActiveStyle" shadow="hover"
                    @click.native="activateTable = 'up'">
                    <div style="padding: 3px;font-size: 20px;">
                        <div>
                            <span style="font-weight: bold; color: red;">挂牌价：{{ enternalData.upPrice }} ￥</span> =
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.upAvgPrice
                                }}</span> *
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.timeParam
                                }}</span> *
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.acreageParam
                                }}</span> *
                            <span style="margin-left: 20px; margin-right: 20px; font-weight: bold;">{{
                                enternalData.overAllParam
                                }}</span>

                            <span style="margin-left: 50px;">{{ enternalData.ups.length }} 个</span>
                        </div>

                        <div>
                            <el-tag style="margin-left: 200px; font-size: 13px; ">挂牌 均价</el-tag>
                            <el-tag style="margin-left: 28px; font-size: 13px; ">时间修正</el-tag>
                            <el-tag style="margin-left: 3px; font-size: 13px; ">面价修正</el-tag>
                            <el-tag style="margin-left: 3px; font-size: 13px; ">综合修正</el-tag>
                        </div>
                    </div>
                </el-card>
            </div>
            <div v-if="enternalData.deals.length > 0" style="width: 100%; overflow: auto;" v-show="activateTable == 'deal'">
                <el-table ref="dealTable" slot="table" size="medium" :data="enternalData.deals" border
                    :header-row-style="{ color: '#333333' }" style="
                border-left: 1px solid #ebeced;
                border-right: 1px solid #ebeced;
                color: #333333; 
                ">
                     <el-table-column label="数据源" align="center" prop="dataResource">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.dataResource }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="小区名称" align="center" prop="communityName">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.communityName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="成交单价(元)" align="center" prop="price">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="面积(m²)" align="center" prop="acreage">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.acreage }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="成交总价(万)" align="center" prop="amount">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.amount ? (row.amount ) + '万' : '-'
                                }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="挂牌价" align="center" prop="structure">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.upPrice?(row.upPrice+'万'):'-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="成交日期" align="center" prop="dealDate">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.dealDate }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域" align="center" prop="areaName">
                        <template slot-scope="{row}">
                            <span>{{ row.areaName }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="板块" align="center" prop="businessName">
                        <template slot-scope="{row}">
                            <span>{{ row.businessName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="用途" align="center" prop="useType">
                        <template slot-scope="{row}">
                            <span>{{ row.useType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="房屋类型" align="center" prop="buildingType">
                        <template slot-scope="{row}">
                            <span>{{ row.buildingType }}</span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="装修" align="center" prop="decoration">
                        <template slot-scope="{row}">
                            <span>{{ row.decoration }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="楼层" align="center" prop="floor">
                        <template slot-scope="{row}">
                            <span>{{ row.floor }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="户型" align="center" prop="houseType">
                        <template slot-scope="{row}">
                            <span>{{ row.houseType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="朝向" align="center" prop="orientation">
                        <template slot-scope="{row}">
                            <span>{{ row.orientation }}</span>
                        </template>
                    </el-table-column>
                  
                  
                    <el-table-column label="链家数据网址" align="center" prop="structure" show-overflow-tooltip> 
                        <template slot-scope="{row}">
                            <a :href="row.url" target="_blank">{{ row.url }}</a>
                        </template>
                    </el-table-column>
                   
                </el-table>
            </div>
            <div v-if="enternalData.ups.length > 0" style="width: 100%; overflow: auto;" v-show="activateTable == 'up'">
                <el-table ref="upTable" slot="table" size="medium" :data="enternalData.ups" border
                    :header-row-style="{ color: '#333333' }" style="
                    border-left: 1px solid #ebeced;
                    border-right: 1px solid #ebeced;
                    color: #333333; 
                    ">
                     <el-table-column label="数据源" align="center" prop="dataResource">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.dataResource }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="小区名称" align="center" prop="communityName">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.communityName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="挂牌单价(元)" align="center" prop="price">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="面积(m²)" align="center" prop="acreage">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.acreage }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="挂牌总价(万)" align="center" prop="amount">
                        <template slot-scope="{row}">
                            <span style="color: red;">{{ row.amount ? (row.amount / 10000).toFixed(2) + '万' : '-'
                                }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域" align="center" prop="areaName">
                        <template slot-scope="{row}">
                            <span>{{ row.areaName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="板块" align="center" prop="businessName">
                        <template slot-scope="{row}">
                            <span>{{ row.businessName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="用途" align="center" prop="useType">
                        <template slot-scope="{row}">
                            <span>{{ row.useType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="房屋类型" align="center" prop="buildingType">
                        <template slot-scope="{row}">
                            <span>{{ row.buildingType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="装修" align="center" prop="decoration">
                        <template slot-scope="{row}">
                            <span>{{ row.decoration }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="楼层" align="center" prop="floor">
                        <template slot-scope="{row}">
                            <span>{{ row.floor }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="户型" align="center" prop="houseType">
                        <template slot-scope="{row}">
                            <span>{{ row.houseType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="朝向" align="center" prop="orientation">
                        <template slot-scope="{row}">
                            <span>{{ row.orientation }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="结构" align="center" prop="structure">
                        <template slot-scope="{row}">
                            <span>{{ row.structure }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="挂牌日期" align="center" prop="upDate">
                        <template slot-scope="{row}">
                            <span>{{ row.upDate }}</span>
                        </template>
                    </el-table-column>
                   
                </el-table>
            </div>
            <div v-else style="height: 200px; width: 100%;">
                <el-empty v-if="msg == null" :image-size=100 description="请查询"></el-empty>
                <el-empty v-else :image-size=100 :description="msg"></el-empty>
            </div>

        </el-card>
        <el-dialog title="请填入的您的口估价格" :visible.sync="facePriceDialog" width="30%" center top="30vh">
            <el-form :model="facePriceFrom" :rules="rules" ref="faceFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="口估标的：" prop="facePriceTarget">
                    <el-input v-model="facePriceFrom.facePriceTarget" disabled readonly></el-input>
                </el-form-item>
                <el-form-item label="楼盘名称：" prop="facePriceTarget">
                    <el-input v-model="facePriceFrom.communityName" ></el-input>
                </el-form-item>
                <el-form-item label="口估单价：" prop="facePrice">
                    <el-input type="number" v-model.number="facePriceFrom.facePrice">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="口估面积：" prop="faceAcreage">
                    <el-input type="number" v-model.number="facePriceFrom.faceAcreage">
                        <template slot="append">㎡</template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveFacePrice('ruleForm')">保存口估</el-button>
                    <el-button @click="facePriceDialog = false">取消</el-button>
                </el-form-item>
            </el-form>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="facePriceDialog = false">取 消</el-button>
                <el-button type="primary" @click="facePriceDialog = false">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout'
import Breadcrumb from '@/components/Breadcrumb'

export default {
    name: 'personalFacePrice',
    components: {
        Breadcrumb,
        YPageListLayout,
    },

    watch: {

    },

    computed: {
        currentDate() {
            let currentDate = new Date();
            let year = currentDate.getFullYear();
            let month = currentDate.getMonth() + 1;  // 注意月份从0开始，需要加1
            let day = currentDate.getDate();

            return year + "年" + month + "月" + day + "日";
        }
    },

    data() {
        return {
            dyData: [],
            queryType: 'location',
            queryParam: {
                queryTarget: null,
                limit: '一年内'
            },
            communityName:null,
            showQueryTarget: null,
            activateTable: 'deal',
            activeStyle: "width:50%;height:80px;background-color:#f1f4fd;",
            disActiveStyle: "width:50%;height:80px;",
            enternalData: {
                dealPrice: null,
                dealAvgPrice: null,
                upPrice: null,
                upAvgPrice: null,
                timeParam: null,
                acreageParam: null,
                overAllParam: null,
                limit: null,
                queryTarget: null,
                acreage: null,
                deals: [],
                ups: []
            },
            msg: null,
            facePriceDialog:false,
            rules: {
                facePrice: [
                    { required: true, message: '请输入口估价格', trigger: 'blur' },
                ],
                faceAcreage: [
                    { required: true, message: '请输入口估面积', trigger: 'blur' },
                ]
            },
            facePriceFrom:{
                facePriceTarget:null,
                facePrice:null,
                faceAcreage:null,
                dealPrice:null,
                upPrice:null,
                dyAvgPrice:null,
                limitDate:null,
                queryTarget:null,
                queryType:null,
                dyExampleNum:null,
                externalExampleNum:null,
                communityName:null
            }

        }
    },


    created() {

    },
    methods: {

        clickCard(val) {
            this.activateTable = val;
        },
        queryFacePrice() {
            let query = this.queryParam;
            this.communityName = null;
            if (this.queryType === 'location') {
                if (query.queryTarget!=null && query.queryTarget!='') {
                    this.personalPriceByLocation(query);
                    this.externalPriceByLocation(query);
                    this.showQueryTarget = this.queryParam.queryTarget;
                    this.msg = '【' + this.showQueryTarget + '】未查询到数据。';
                } else {
                    this.$message.error("口估地址或小区名字不能为空")
                }
            } else {
                if (query.queryTarget!=null && query.queryTarget!='') {
                    this.personalPriceByCommunity(query);
                    this.externalPersonalPriceByCommunity(query);
                    this.showQueryTarget = this.queryParam.queryTarget;
                    this.msg = '【' + this.showQueryTarget + '】未查询到数据。';
                } else {
                    this.$message.error("口估地址或小区名字不能为空")
                }
            }


        },
        personalPriceByLocation(query) {
            this.$api.personalFacePrice.personalPriceByLocation(query).then(res => {
                if (res.code === 200) {
                    this.dyData = res.data;
                    if (this.dyData.length>0){
                        for (let i in this.dyData){
                            if (this.dyData[i].communityName){
                                this.communityName = this.dyData[i].communityName;
                                break;
                            }
                        }
                        
                    }
                }
            })
        },
        externalPriceByLocation(query) {
            this.$api.personalFacePrice.externalPriceByLocation(query).then(res => {
                if (res.code === 200) {
                    if (res.data != null) {
                        this.enternalData = res.data;
                        if (!this.communityName && this.enternalData.deals.length>0){
                            for (let i in this.enternalData.deals){
                            if (this.enternalData.deals[i].communityName){
                                this.communityName = this.enternalData.deals[i].communityName;
                                break;
                            }
                        }
                        }
                    } else {
                        let emptyObject = new Object();
                        emptyObject.deals = [];
                        emptyObject.ups = [];
                        this.enternalData = emptyObject;
                    }

                }
            })
        },
        personalPriceByCommunity(query) {
            this.$api.personalFacePrice.personalPriceByCommunity(query).then(res => {
                if (res.code === 200) {
                    this.dyData = res.data;
                    if (this.dyData.length>0){
                        for (let i in this.dyData){
                            if (this.dyData[i].communityName){
                                this.communityName = this.dyData[i].communityName;
                                break;
                            }
                        }
                    }
                }
            })
        },
        externalPersonalPriceByCommunity(query) {
            this.$api.personalFacePrice.externalPersonalPriceByCommunity(query).then(res => {
                if (res.code === 200) {
                    if (res.data != null) {
                        this.enternalData = res.data;
                        if (!this.communityName && this.enternalData.deals.length>0){
                            for (let i in this.enternalData.deals){
                            if (this.enternalData.deals[i].communityName){
                                this.communityName = this.enternalData.deals[i].communityName;
                                break;
                            }
                        }
                    }
                    } else {
                        let emptyObject = new Object();
                        emptyObject.deals = [];
                        emptyObject.ups = [];
                        this.enternalData = emptyObject;
                    }

                }
            })
        },
        openFacePrice() {
            this.facePriceDialog = true;
            this.facePriceFrom.facePriceTarget = this.queryParam.queryTarget;
            this.facePriceFrom.communityName = this.communityName;
        },
        saveFacePrice(){
            this.$refs.faceFrom.validate(valid => {
                if (valid){
                    this.facePriceFrom.dealPrice = this.enternalData.dealPrice;
                    this.facePriceFrom.upPrice = this.enternalData.upPrice;
                    this.facePriceFrom.limitDate = this.queryParam.limit;
                    let total = this.dyData.map(item=>item.price).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
                    this.facePriceFrom.dyAvgPrice = Math.round(total/this.dyData.length);
                    this.facePriceFrom.dyExampleNum = this.dyData.length;
                    this.facePriceFrom.externalExampleNum = this.enternalData.deals.length + this.enternalData.ups.length;
                    this.facePriceFrom.queryTarget = this.queryParam.queryTarget;
                    this.facePriceFrom.queryType = this.queryType=='location'?'地址':'楼盘名';
                    this.$api.personalFacePrice.saveFacePrice(this.facePriceFrom).then(res=>{
                        if (res.code===200 && res.data){
                            this.$message.success("执行口估成功")
                            this.facePriceDialog = false;
                        }else{
                            this.$message.error("执行口估失败")
                        }
                        
                    });
                }
            })
        },
        toke(){
            window.open("https://cd.ke.com/chengjiao/rs"+this.communityName+"/",'_blank')
        }
    },

}
</script>
<style lang="scss" scoped>
.query-class {
    margin-top: 20px;
}

.input-with-select {
    width: 30%;
    height: 30px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

/deep/.el-input.is-disabled .el-input__inner {
    color: red;
    font-weight: bold;
}

// /deep/.el-input__inner{
//     color: red;
//     font-weight: bold;
// }

/deep/#community{
    color: red;
    font-weight: bold;
}

.data-class {
    margin-top: 20px;
}

.actiateCard {
    background-color: #f1f4fd;
}

.tab :hover {
    cursor: pointer;
}
</style>