<template>
    <div class=''>
        <div class="card" :style="{ height: tableHeight }">
            <div class="flex title">
                <h3>任务信息</h3>
                <el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button>
            </div>
            <div class="basic">
                <el-row>
                    <el-col :span="8" class="flex">
                        <div class="label">
                            任务主题：
                        </div>
                        <div class="value">
                            请各社区提报党员信息
                        </div>
                    </el-col>
                    <el-col :span="8" class="flex">
                        <div class="label">
                            任务主题：
                        </div>
                        <div class="value">
                            请各社区提报党员信息
                        </div>
                    </el-col>
                    <el-col :span="8" class="flex">

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8" class="flex">
                        <div class="label">
                            任务主题：
                        </div>
                        <div class="value">
                            请各社区提报党员信息
                        </div>
                    </el-col>
                    <el-col :span="8" class="flex">
                        <div class="label">
                            任务主题：
                        </div>
                        <div class="value">
                            请各社区提报党员信息
                        </div>
                    </el-col>
                    <el-col :span="8" class="flex">
                        <div class="label">
                            任务主题：
                        </div>
                        <div class="value">
                            请各社区提报党员信息
                        </div>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :span="8" class="flex">
                        <div class="label">
                            任务主题：
                        </div>
                        <div class="value">
                            请各社区提报党员信息
                        </div>
                    </el-col>
                    <el-col :span="8" class="flex">
                        <div class="label">
                            任务主题：
                        </div>
                        <div class="value">
                            请各社区提报党员信息
                        </div>
                    </el-col>
                    <el-col :span="8" class="flex">

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" class="flex">
                        <div class="label">
                            任务说明：
                        </div>
                        <div class="value">
                            测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测测去
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="flex title flex-center-deputy">
                <h3>任务提醒</h3>
               <span>（点击以下表格开始提报任务）</span>
            </div>
            
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    data() {
        return {};
    },
    created() { },
    methods: {
        handelClickBack() {
            this.$emit('handleShowPage')
        },
    },
    components: {},
    computed: {
        tableHeight() {
            return (this.clientHeight - 140) + 'px'
        },
        ...mapGetters(['clientHeight', 'resolution']),
    },
    watch: {},
}
</script>

<style lang='scss' scoped>
.card {
    background-color: #ffffff;
    border-radius: 5px;
    margin: 10px 16px;
}

.basic {
    padding: 0 30px;
    box-sizing: border-box;
    .el-row{
        margin-bottom: 16px;
        .label{
            min-width: 80px;
        }
    }
}

.title {
    position: relative;
    margin: 0 16px;

    &::after {
        content: '';
        width: 4px;
        height: 16px;
        background: #5493ff;
        display: block;
        position: absolute;
        top: 16px;
        left: -16px;
    }
}
.item {
    margin-right: 16px;
    width: 16%;
    margin-bottom: 16px;

    img {
        width: 80px;
        height: 80px;
    }
}
</style>
