jiaoyi-vue/src/views/manage/finance/deposit/index.vue

<template>
    <el-container class="flex-column">
        <div class="table-search">
            <search @success="handleSuccess"></search>
            <optionBtn @success="handleSuccess" :dataSelect="dataSelect" :dataSelectFull="dataSelectFull"></optionBtn>
        </div>
        <el-main class="nopadding">
            <div class="table-container">
                <tablePage ref="tablePage" @success="tableHandle" @successFull="tableHandleFull" @total="handleTotal"></tablePage>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import search from './components/search';
import tablePage from './components/table';
import optionBtn from './components/option';
export default {
    components: {
        search,tablePage,optionBtn
    },
    data(){
        return {
            totalLoading:false,
            searchKey:{},
            dataSelect:[],
            dataSelectFull:[],
            totalData:null,
            searchData:null
        }
    },
    methods: {
        tips(){
            this.$alert("请联系管理员获取相关流程后进行操作","保证金相关提醒",{
                "show-close":false
            })
        },
        handleTotal(data){
            this.totalLoading = false;
            this.totalData = data;
        },
        tableHandle(data){
            this.dataSelect = data;
        },
        tableHandleFull(data){
            this.dataSelectFull = data;
        },
        handleSuccess(data){
            this.$refs.tablePage.upData(data)
        },
        handleClick(name){
            this.activeName = name;
            this.searchKey.type = name;
            this.$refs.tablePage.upData(this.searchKey)
        }
    }
}
</script>

<style>
.news-title{font-size: 16px;color: #000;font-weight: bold;margin-bottom: 10px;display: flex;align-items: center;}
.news-title::before{content: "";width: 4px;height: 16px;display: block;background-color: var(--el-color-primary);;margin-right: 8px;}
.news-title span{margin-left: 10px;font-weight: normal;color: #666;font-size: 12px;}
.card-item-deposit{border: 1px solid #ebedf0;padding: 20px 20px 20px;border-radius: 12px;align-self:flex-start;display: flex;flex-direction: column;max-width: 330px;box-sizing: border-box;}
.card-item-deposit .deposit-title{color: #6c737a;font-size: 14px;line-height: 22px;}
.card-item-deposit .card-num{align-items: flex-end;display: flex;flex-direction: row;margin-top: 12px;color: #1d2129;font-size: 32px;font-weight: 700;line-height: 40px;}
.card-item-deposit .card-num span{font-weight: normal;font-size: 12px;line-height: 32px;margin-left: 10px;}
.card-item-deposit .card-btn{display: flex;align-items: center;margin-top: 10px;}
.mb10{margin-bottom: 10px;}
</style>