<template>
    <div class="resource container">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>资源供需</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row>
            <el-col :span="4">
                <div class="needs_menu">
                    <div class="needs_title"><img src="../assets/needs_icon.png" />需求信息</div>
                    <div class="menu_tab" :class="{ active: menu_tab === 0 }" @click="menu_tab = 0">技术需求</div>
                    <div class="menu_tab" :class="{ active: menu_tab === 1 }" @click="menu_tab = 1">产品需求</div>
                    <div class="menu_tab" :class="{ active: menu_tab === 2 }" @click="menu_tab = 2">融资需求</div>
                    <div class="needs_title supply_title"><img src="../assets/supply_icon.png" />供应信息</div>
                    <div class="menu_tab" :class="{ active: menu_tab === 3 }" @click="menu_tab = 3">产品发布</div>
                    <div class="menu_tab" :class="{ active: menu_tab === 4 }" @click="menu_tab = 4">技术发布</div>
                    <div class="menu_tab" :class="{ active: menu_tab === 5 }" @click="menu_tab = 5">资源共享</div>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="right" v-if="menu_tab === 0">
                    <techRequire></techRequire>
                </div>
                <div class="right" v-if="menu_tab === 1">
                    <productRequire></productRequire>
                </div>
                <div class="right" v-if="menu_tab === 2">
                    <financingRequire></financingRequire>
                </div>
                <div class="right" v-if="menu_tab === 3">
                    <productRelease></productRelease>
                </div>
                <div class="right" v-if="menu_tab === 4">
                    <techRelease></techRelease>
                </div>
                <div class="right" v-if="menu_tab === 5">
                    <financingRelease></financingRelease>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import techRequire from '../components/resource/techRequire';
import productRequire from '../components/resource/productRequire';
import financingRequire from '../components/resource/financingRequire';
import productRelease from '../components/resource/productRelease';
import techRelease from '../components/resource/techRelease';
import financingRelease from '../components/resource/financingRelease';
export default {
    name: 'resource',
    components: { techRequire, productRequire, financingRequire, productRelease, techRelease, financingRelease },
    data() {
        return {
            menu_tab: 0,
            search: '',
            timeRange: [],
            applicationFields: [],
            applicationFieldId: null,
            currentPage: 1
        };
    },

    mounted() {
        if (this.$route.query.myTab) {
            let myTab = this.$route.query.myTab;
            this.menu_tab = myTab;
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
}
.filters {
    padding: 20px 0;
    border-bottom: 1px solid @border;
}
.list {
    padding: 10px 0;
    .item {
        padding: 10px 0;
        cursor: pointer;
        .flex();
        .cover {
            width: 160px;
            height: 110px;
        }
        .info {
            height: 110px;
            margin-left: 15px;
            .flex-col();
            align-items: flex-start;
            justify-content: space-between;
            .title {
                color: black;
                font-weight: bold;
                font-size: 20px;
            }
            .desc,
            .time {
                font-size: 13px;
                color: @text2;
            }
        }
    }
}
.el-breadcrumb {
    line-height: 60px;
    /deep/.el-breadcrumb__inner {
        font-size: 12px;
        color: #000 !important;
    }
}
.needs_menu {
    background-color: #fff;
    height: 560px;
    .needs_title {
        color: #fff;
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: url('../assets/needs_bg.png') no-repeat center;
        background-size: 100%;
        position: relative;
        margin-bottom: 10px;
        img {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 34px;
            margin: auto;
        }
    }
    .menu_tab {
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 10px;
        &.active {
            color: #bf1616;
            // background: linear-gradient(90deg, #bf1616 0%, #ffffff 100%);
            // box-shadow: 2px 0px 0px 0px #bf1616;
            border-left: 2px solid #bf1616;
            background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        }
    }
    .supply_title {
        background: url('../assets/supply_bg.png') no-repeat center;
        background-size: 100%;
    }
}
.right {
    margin-left: 20px;
    width: 980px;
    .filter {
        height: 100px;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        .first {
            margin-bottom: 16px;
        }
        .name {
            display: inline-block;
            margin-right: 26px;
            color: #939599;
            font-size: 13px;
        }
        span {
            color: #313233;
            line-height: 22px;
            height: 22px;
            font-size: 13px;
            cursor: pointer;
            &.active {
                background: #bf1616;
                border-radius: 2px;
                color: #fff;
                padding: 4px;
            }
            + span {
                margin-left: 30px;
            }
        }
    }
    .content {
        // height: 748px;
        background-color: #fff;
        margin-top: 5px;
        padding: 0 20px 40px;
        .con_header {
            height: 60px;
            line-height: 60px;

            span {
                cursor: pointer;
                margin-right: 40px;
                font-size: 13px;
                color: #818999;
                &.active {
                    color: #bf1616;
                }
            }
            button {
                width: 130px;
                height: 36px;
                background: #bf1616;
                border-radius: 4px;
                color: #fff;
                font-size: 12px;
                position: relative;
                padding-left: 20px;
                box-sizing: border-box;
                cursor: pointer;
                float: right;
                margin-top: 12px;
                img {
                    width: 18px;
                    height: 18px;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    left: 22px;
                }
            }
        }
        .con_main {
            margin-bottom: 40px;
            li {
                overflow: hidden;
                cursor: pointer;
            }
            li + li {
                margin-top: 20px;
            }
            img {
                width: 100px;
                height: 100px;
                float: left;
            }
            .con_main_right {
                float: left;
                width: 840px;
                padding-left: 16px;
                box-sizing: border-box;
                .con_main_tit {
                    margin-top: 3px;
                    i {
                        font-style: normal;
                        font-size: 12px;
                        color: #22b197;
                        background: #ebf9f7;
                        padding: 5px 3px;
                        margin-right: 6px;
                    }
                    span {
                        font-size: 14px;
                        color: #000;
                    }
                }
                p {
                    font-size: 13px;
                    line-height: 22px;
                    color: #939599;
                    margin: 10px 0 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .con_time {
                    color: #939599;
                    font-size: 13px;
                }
            }
            .con_card_ul {
                overflow: hidden;
            }
            .con_card {
                display: flex;
                flex-direction: column;
                width: 223px;
                float: left;
                margin: 0 16px 20px 0;
                img {
                    width: 223px;
                    height: 223px;
                }
                h5 {
                    font-size: 14px;
                    color: #000;
                    margin: 10px 0;
                }
                p {
                    font-size: 12px;
                    color: #939599;
                    margin: 0;

                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .con_card:nth-child(4n) {
                margin-right: 0;
            }
            .con_info {
                overflow: hidden;
                margin: 15px 0 10px;
                .con_info_item {
                    float: left;
                    font-size: 13px;
                    margin-right: 40px;
                    i {
                        font-style: normal;
                        color: #939599;
                        margin-right: 4px;
                    }
                    span {
                        color: #bf1616;
                    }
                }
            }
        }
    }
}
</style>
