<template>
    <div class="home">
        <div class="container" style="margin-top:60px">
            <el-row class="top_sw">
                <el-col :span="12">
                    <div style="position:relative">
                        <el-carousel class="banners" height="360px" @change="onCarouselChange">
                            <el-carousel-item v-for="item in banners" :key="item.title">
                                <el-image
                                    class="banner-item"
                                    :src="item.cover"
                                    fit="cover"
                                    @click="$router.push({ name: 'article', query: { id: item.id } })"
                                ></el-image>
                            </el-carousel-item>
                        </el-carousel>
                        <div class="pagination">{{ banners[bannerIndex] ? banners[bannerIndex].title : '' }}</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="news-container">
                        <div class="tabs">
                            <div class="tab" :class="{ active: tab === '热点推荐' }" @click="tab = '热点推荐'">
                                热点推荐
                            </div>
                            <div class="tab" :class="{ active: tab === '新闻资讯' }" @click="tab = '新闻资讯'">
                                新闻资讯
                            </div>
                            <div class="tab" :class="{ active: tab === '行业动态' }" @click="tab = '行业动态'">
                                行业动态
                            </div>
                            <div class="more" @click="$router.push({ name: 'news' })">
                                <span>更多</span>
                                <img src="../assets/icon_arrow_right.png" />
                            </div>
                        </div>
                        <div class="list">
                            <div
                                class="row"
                                v-for="item in news"
                                :key="item.id"
                                @click="$router.push({ name: 'article', query: { id: item.id } })"
                            >
                                <div class="name">
                                    {{ item.title }}
                                </div>
                                <div class="time">{{ item.createdAt }}</div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 通知 -->

        <div class="notice container ">
            <!-- <span>通知</span>
            <el-link href="" target="_blank" :underline="false" v-for="i in 4" :key="i"
                >习近平同德国欧盟领导人共同举行会晤</el-link
            > -->
            <announcement></announcement>
        </div>
        <div style="background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);padding:50px 0 20px;">
            <!-- 技术需求 -->
            <div class="home_search ">
                <!-- <el-dropdown>
                    <span class="el-dropdown-link"> 技术需求<img src="../assets/icon_down.png" alt="" /> </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>qwreerewt</el-dropdown-item>
                        <el-dropdown-item>1111</el-dropdown-item>
                        <el-dropdown-item>1111</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->
                <el-select placeholder="请选择" v-model="value">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <input placeholder="请输入搜索内容" v-model="title" />
                <div class="btn-search" @click="goSearch">
                    <img src="../assets/icon_search.png" />
                </div>
            </div>
            <!-- 北斗导航 -->
            <div class="home_ad container">
                <div class="beidou">
                    <img src="../assets/home_text_bd.png" class="bd" />
                    <span>导航市场北斗化，提升国家安全</span>
                    <img src="../assets/home_img_bd02.png" class="bd02" />
                </div>
                <div class="tongh">
                    <img src="../assets/home_text_tong.png" class="bd" />
                    <span>建立完善的通航设计与开发体系</span>
                    <img src="../assets/home_img_t.png" class="bd02" />
                </div>
                <!-- <img src="../assets/home_img_beidou_bg.png" />
                <img src="../assets/home_img_tonghang_bg.png" /> -->
            </div>
            <div class="home_card container">
                <div class="card_item">
                    <img src="../assets/card01.png" />
                    <p>军民融合需求</p>
                    <span @click="goTab1">立即查看 <img src="../assets/card_right.png" /> </span>
                </div>
                <div class="card_item">
                    <img src="../assets/card02.png" alt="" />
                    <p>技术产品大厅</p>
                    <span @click="goTab2">立即查看 <img src="../assets/card_right.png" /> </span>
                </div>
                <div class="card_item">
                    <img src="../assets/card03.png" alt="" />
                    <p>共享资源空间</p>
                    <span @click="goTab3">立即查看 <img src="../assets/card_right.png" /> </span>
                </div>
            </div>
        </div>
        <!-- 产品发布 -->
        <div class="publish container">
            <div class="publish_left">
                <div class="pub_left_title">
                    <div class="publish_tab " :class="{ active: publishTab === 0 }" @click="publishTab = 0">
                        产品发布
                    </div>
                    <div class="publish_tab" :class="{ active: publishTab === 1 }" @click="publishTab = 1">
                        技术发布
                    </div>
                    <div
                        class="publish_more"
                        @click="
                            $router.push({
                                name: 'resource',
                                query: {
                                    myTab: 3
                                }
                            })
                        "
                    >
                        <span>MORE</span>
                        <img src="../assets/icon_arrow_right.png" />
                    </div>
                </div>
                <div class="pub_left_content">
                    <ul>
                        <div v-if="publishTab === 0">
                            <li @click="changeStatus(index)" v-for="(n, index) in productList" :key="n.id">
                                <!-- :class="{ block: index == num }" -->
                                <div
                                    class="li_active "
                                    v-show="index == num"
                                    @click="
                                        $router.push({
                                            name: 'resourceRelease',
                                            query: { id: n.id, type: 'PRODUCT_SUPPLY' }
                                        })
                                    "
                                >
                                    <img :src="n.images[0]" />
                                    <div style="width:500px;float:left">
                                        <h5>
                                            {{ n.name }}
                                        </h5>
                                        <p class="pub_p">
                                            {{ n.description }}
                                        </p>
                                    </div>
                                    <!--                                    <span class="pub_time">{{ n.createdAt }}</span>-->
                                </div>
                                <div class="li_show " v-show="index != num">
                                    <div>
                                        <img :src="n.images[0]" />
                                        <span class="pub_span">
                                            {{ n.name }}
                                        </span>
                                    </div>
                                    <!--                                    <span class="pub_time">{{ n.createdAt }}</span>-->
                                </div>
                            </li>
                        </div>
                        <div v-if="publishTab === 1">
                            <li @click="changeStatus(index)" v-for="(n, index) in artProductList" :key="n.id">
                                <!-- :class="{ block: index == num }" -->
                                <div
                                    class="li_active "
                                    v-show="index == num"
                                    @click="
                                        $router.push({
                                            name: 'resourceRelease',
                                            query: { id: n.id, type: 'TECH_SUPPLY' }
                                        })
                                    "
                                >
                                    <img :src="n.images[0]" />
                                    <div style="width:500px;float:left">
                                        <h5>
                                            {{ n.name }}
                                        </h5>
                                        <p class="pub_p">
                                            {{ n.description }}
                                        </p>
                                    </div>
                                    <!-- <span class="pub_time">{{ n.createdAt }}</span> -->
                                </div>
                                <div class="li_show " v-show="index != num">
                                    <div>
                                        <img :src="n.images[0]" />
                                        <span class="pub_span">
                                            {{ n.name }}
                                        </span>
                                    </div>
                                    <!-- <span class="pub_time">{{ n.createdAt }}</span> -->
                                </div>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="publish_right">
                <div class="pub_r_top">
                    <div @click="releaseSupplyGo">
                        <img src="../assets/home_icon_fachanpin.png" /><span>发产品</span>
                    </div>
                    <div @click="releaseRequierGo">
                        <img src="../assets/home_icon_fajishu.png" /><span>发技术</span>
                    </div>
                </div>
                <div class="pub_r_bottom">
                    <div class="pub_r_row" v-for="n in productCountList" :key="n.id">
                        <span>{{ n.createdAt }}</span>
                        <span>新发布产品{{ n.productCount ? n.productCount : 0 }}条 </span>
                        <span>技术{{ n.techCount ? n.techCount : 0 }}条</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 产品需求 -->
        <div class="publish container">
            <div class="publish_left">
                <div class="pub_left_title">
                    <div class="publish_tab " :class="{ active: publishTab1 === 0 }" @click="publishTab1 = 0">
                        产品需求
                    </div>
                    <div class="publish_tab" :class="{ active: publishTab1 === 1 }" @click="publishTab1 = 1">
                        技术需求
                    </div>
                    <div
                        class="publish_more"
                        @click="
                            $router.push({
                                name: 'resource',
                                query: {
                                    myTab: 0
                                }
                            })
                        "
                    >
                        <span>MORE</span>
                        <img src="../assets/icon_arrow_right.png" />
                    </div>
                </div>
                <div v-if="publishTab1 === 0">
                    <div
                        class="pub_left_content needs_con"
                        v-for="item in productNeedList"
                        :key="item.id"
                        @click="
                            $router.push({ name: 'resourceDetail', query: { id: item.id, type: 'PRODUCT_DEMAND' } })
                        "
                    >
                        <div class="pub_tit ">
                            <span>{{ item.name }} </span>
                        </div>
                        <!--                        <span class="pub_time">{{ item.createdAt }}</span>-->
                    </div>
                </div>
                <div v-else>
                    <div
                        class="pub_left_content needs_con"
                        v-for="item in list"
                        :key="item.id"
                        @click="$router.push({ name: 'resourceDetail', query: { id: item.id, type: 'TECH_DEMAND' } })"
                    >
                        <div class="pub_tit ">
                            <span>{{ item.name }} </span>
                        </div>
                        <!--                        <span class="pub_time">{{ item.createdAt }}</span>-->
                    </div>
                </div>
            </div>
            <div class="publish_right">
                <div class="pub_r_top needs">
                    <div @click="$router.push({ name: 'resource', query: { myTab: 3 } })">
                        <img src="../assets/home_icon_zhaochanpin.png" alt="" /><span>找产品</span>
                    </div>
                    <div @click="$router.push({ name: 'resource', query: { myTab: 4 } })">
                        <img src="../assets/home_icon_zhaojishu.png" alt="" /><span>找技术</span>
                    </div>
                </div>
                <div class="pub_r_bottom">
                    <div class="pub_r_row" v-for="n in NeedCountList" :key="n.id">
                        <span>{{ n.createdAt }}</span>
                        <span>新增产品需求{{ n.productCount ? n.productCount : 0 }}条 </span>
                        <span>技术需求{{ n.techCount ? n.techCount : 0 }}条</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="plate container">
            <!-- 资源共享 -->
            <div class="resources ">
                <div class="res_top">
                    <div class="res_title">资源共享</div>
                    <div class="res_more" @click="goTab3">
                        <span>MORE</span>
                        <img src="../assets/icon_arrow_right.png" />
                    </div>
                </div>
                <div class="res_bottom">
                    <div
                        class="res_img"
                        @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '实验设备' } })"
                    >
                        <img src="../assets/home_img_ziyuan_shiyanshebei.png" />
                        <p>实验设备</p>
                    </div>
                    <div
                        class="res_img"
                        @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '计量器具' } })"
                    >
                        <img src="../assets/home_img_ziyuan_jiliang.png" />
                        <p>计量器具</p>
                    </div>
                    <div
                        class="res_img"
                        @click="$router.push({ name: 'resource', query: { myTab: 5, tabId: '科研仪器' } })"
                    >
                        <img src="../assets/home_img_ziyuan_keyan.png" />
                        <p>科研仪器</p>
                    </div>
                    <div class="res_img" @click="$router.push({ name: 'resource', query: { myTab: 5 } })">
                        <img src="../assets/home_img_ziyuan_gengduo.png" />
                        <p>更多</p>
                    </div>
                </div>
            </div>
            <!-- 融资需求 -->
            <div class="resources">
                <div class="res_top">
                    <div class="res_title">融资需求</div>
                    <div class="res_more " @click="$router.push({ name: 'resource', query: { myTab: 2 } })">
                        <span>MORE</span>
                        <img src="../assets/icon_arrow_right.png" />
                    </div>
                </div>
                <div class="res_bottom">
                    <div
                        class="res_img"
                        @click="$router.push({ name: 'resource', query: { myTab: 2, tabId: '债务融资' } })"
                    >
                        <img src="../assets/home_img_rongzi_zhaiwu.png" />
                        <p>债务融资</p>
                    </div>
                    <div
                        class="res_img"
                        @click="$router.push({ name: 'resource', query: { myTab: 2, tabId: '权益融资' } })"
                    >
                        <img src="../assets/home_img_rongzi_quanyi.png" />
                        <p>权益融资</p>
                    </div>
                    <div class="res_img" @click="$router.push({ name: 'resource', query: { myTab: 2 } })">
                        <img src="../assets/home_img_rongzi_gengduo.png" />
                        <p>更多</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div style="margin-top:30px;font-size:16px;font-weight:bold;">友情链接</div> -->
    </div>
</template>

<script>
import announcement from '../components/announcement';

export default {
    name: 'home',
    components: { announcement },
    data() {
        return {
            banners: [],
            bannerIndex: 0,
            tab: '热点推荐',
            news: [],
            top: null,
            publishTab: 0,
            publishTab1: 0,
            productNeedList: {},
            list: {},
            productCountList: [],
            NeedCountList: [],
            productList: [],
            artProductList: [],
            title: '',
            options: [
                {
                    label: '技术需求',
                    value: 2
                },
                {
                    label: '产品需求',
                    value: 3
                },
                {
                    label: '融资需求',
                    value: 4
                },
                {
                    label: '产品发布',
                    value: 5
                },
                {
                    label: '技术发布',
                    value: 6
                },
                {
                    label: '资源共享',
                    value: 7
                }
            ],
            value: '',
            num: 0
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo;
        }
    },
    created() {
        this.$http
            .get('/article/all', { query: { mainType: '首页置顶', status: 'PASS' }, size: 1, sort: 'createdAt,desc' })
            .then(res => {
                if (res.content[0]) {
                    var tmp = document.createElement('DIV');
                    tmp.innerHTML = res.content[0].content;
                    res.content[0].bref = (tmp.textContent || tmp.innerText || '').trim();
                    this.top = res.content[0];
                }
            });
        this.$http
            .get('/article/all', { query: { mainType: '首页轮播', status: 'PASS' }, sort: 'createdAt,desc' })
            .then(res => {
                this.banners = res.content;
            });

        this.$http.post('/artNeed/count').then(res => {
            this.NeedCountList = res;
        });
        this.getNews();
        // 产品发布
        this.$http
            .get('/resourceSupplyAndDemand/all', {
                size: 5,
                query: { type: 'PRODUCT_SUPPLY', status: 'PASS' },
                sort: 'createdAt,desc'
            })
            .then(res => {
                this.productList = res.content;
            });
        // 技术发布
        this.$http
            .get('/resourceSupplyAndDemand/all', {
                size: 5,
                query: { type: 'TECH_SUPPLY', status: 'PASS' },
                sort: 'createdAt,desc'
            })
            .then(res => {
                this.artProductList = res.content;
            });
        // 产品需求
        this.$http
            .get('/resourceSupplyAndDemand/all', {
                size: 8,
                query: { type: 'PRODUCT_DEMAND', status: 'PASS' },
                sort: 'createdAt,desc'
            })
            .then(res => {
                this.productNeedList = res.content;
            });
        // 技术需求
        this.$http
            .get('/resourceSupplyAndDemand/all', {
                size: 8,
                query: { type: 'TECH_DEMAND', status: 'PASS' },
                sort: 'createdAt,desc'
            })
            .then(res => {
                this.list = res.content;
            });
        // 产品发布条数
        this.$http
            .get('/resourceSupplyAndDemand/getDataCount', {
                productType: 'PRODUCT_SUPPLY',
                techType: 'TECH_SUPPLY'
            })
            .then(res => {
                this.productCountList = res;
            });
        // 产品需求条数
        this.$http
            .get('/resourceSupplyAndDemand/getDataCount', {
                productType: 'PRODUCT_DEMAND',
                techType: 'TECH_DEMAND'
            })
            .then(res => {
                this.NeedCountList = res;
            });
    },
    methods: {
        // policyAll() {
        //     this.$refs.my.policyAll(this.title);
        // },
        onCarouselChange(e) {
            this.bannerIndex = e;
        },
        getNews() {
            this.$http
                .get('/article/all', { query: { mainType: this.tab, status: 'PASS' }, size: 7, sort: 'createdAt,desc' })
                .then(res => {
                    this.news = res.content;
                });
        },
        goTab1() {
            this.$router.push({
                name: 'resource',
                query: {
                    myTab: 0
                }
            });
        },
        goTab2() {
            this.$router.push({
                name: 'resource',
                query: {
                    myTab: 3
                }
            });
        },
        goTab3() {
            this.$router.push({
                name: 'resource',
                query: {
                    myTab: 5
                }
            });
        },
        changeStatus(index) {
            this.num = index;
        },
        goSearch() {
            this.$nextTick(() => {
                setTimeout(() => {
                    this.$router.push({
                        name: 'search',
                        params: {
                            search: this.title,
                            value: this.value
                        }
                    });
                }, 100);
            });
        },
        releaseSupplyGo() {
            if (this.$store.state.userInfo) {
                this.$router.push({ name: 'releaseSupply' });
            } else {
                this.$alert('用户未登录，请先进行登录?', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                });
            }
        },
        releaseRequierGo() {
            if (this.$store.state.userInfo) {
                this.$router.push({ name: 'releaseRequirement' });
            } else {
                this.$alert('用户未登录，请先进行登录?', '提示', {
                    confirmButtonText: '确定',
                    type: 'warning'
                });
            }
        }
    },
    watch: {
        tab() {
            this.getNews();
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 1200px;
    margin: 0 auto;
}

.top_sw {
    box-sizing: border-box;

    .el-col {
        width: 590px;
    }

    .el-col + .el-col {
        margin-left: 20px;
    }
}

.banners {
    height: 360px;

    .banner-item {
        width: 100%;
        height: 360px;
    }
}

.pagination {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 36px;
    line-height: 36px;
    color: white;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.24);
    padding: 0 12px;
    z-index: 2;
    .ellipsis();
}

.news-container {
    height: 360px;
    padding: 14px;
    padding-top: 6px;
    box-sizing: border-box;
    background: white;

    .title {
        color: @prim;
        font-size: 19px;
        font-weight: bold;
        text-align: center;
        .ellipsis();
        cursor: pointer;
    }

    .content {
        color: @text3;
        font-weight: 400;
        line-height: 24px;
        .ellipsisLn(3);
        margin-top: 10px;
        cursor: pointer;
    }

    .tabs {
        border-bottom: 1px solid @border;
        // margin-top: 14px;
        position: relative;

        .tab {
            display: inline-block;
            // width: 102px;
            margin-right: 32px;
            height: 44px;
            line-height: 44px;
            color: black;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;

            &.active {
                color: #bf1616;
                border-bottom: #bf1616 2px solid;
            }
        }

        .more {
            color: @text3;
            font-size: 13px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            height: 44px;
            line-height: 44px;
            cursor: pointer;

            > * {
                vertical-align: middle;
                display: inline-block;
            }

            img {
                width: 16px;
                height: 16px;
                margin-left: 2px;
            }
        }
    }

    .list {
        padding: 10px 0;

        .row {
            height: 40px;
            .flex();
            font-size: 14px;
            padding-left: 12px;
            position: relative;
            cursor: pointer;

            .name {
                color: black;
                flex-basis: 0;
                flex-grow: 1;
                margin-right: 14px;
                .ellipsis();
            }

            .time {
                color: @text3;
            }

            &::after {
                content: '';
                width: 4px;
                height: 4px;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 2px;
                background: @border;
            }
        }
    }
}

.card {
    background: white;

    .title-img {
        width: 380px;
        height: 138px;
    }

    .list {
        padding: 12px 10px;

        .row {
            height: 40px;
            .flex();
            font-size: 14px;
            padding-left: 12px;
            position: relative;
            cursor: pointer;

            .name {
                color: black;
                flex-basis: 0;
                flex-grow: 1;
                margin-right: 14px;
                .ellipsis();
            }

            .time {
                color: @text3;
            }

            &::after {
                content: '';
                width: 4px;
                height: 4px;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                border-radius: 2px;
                background: @border;
            }
        }
    }
}

// .notice {
//     padding: 40px 0 22px;
//     height: 17px;
//     line-height: 17px;
//     span {
//         font-size: 13px;
//         font-family: MicrosoftYaHei;
//         color: #bf1616;
//         margin-right: 13px;
//     }
//     .el-link {
//         font-size: 13px;
//         font-family: PingFangSC-Regular, PingFang SC;
//         font-weight: 400;
//         color: #7a7c80;
//     }
//     .el-link + .el-link {
//         margin-left: 30px;
//     }
// }

.home_search {
    margin: 0 auto;
    // margin-top: 60px;
    background-color: #fff;
    border: 1px solid #bf1616;
    box-sizing: border-box;
    display: flex;
    width: 644px;
    height: 48px;

    .el-dropdown {
        width: 120px;
        // height: 48px;
        line-height: 48px;
        padding: 0 12px;
        box-sizing: border-box;
        border-right: 1px #bf1616 solid;

        .el-dropdown-link {
            font-size: 14px;
            font-weight: 400;
            color: #626366;

            img {
                width: 16px;
                height: 16px;
                float: right;
                margin-top: 16px;
            }
        }

        .el-dropdown-item {
            width: 120px;
        }
    }

    input {
        width: 450px;
        // height: 48px;
        background: #ffffff;
        padding: 0 0 0 20px;
        font-size: 14px;
        font-weight: 400;
        border-left: 1px solid #bf1616;
    }

    .btn-search {
        width: 75px;
        height: 48px;
        background: #bf1616;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        img {
            width: 24px;
            height: 24px;
        }
    }

    /deep/ .el-input--small .el-input__inner {
        height: 46px;
        line-height: 46px;
        border: none;
        text-align: center;
        width: 120px;
    }

    .el-select-dropdown__item {
        text-align: center;
    }
}

.home_ad {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 20px;

    .beidou {
        width: 590px;
        height: 160px;
        background: url('../assets/home_img_beidou_bg.png');
        position: relative;

        .bd {
            width: 248px;
            height: 30px;
            position: absolute;
            top: 50px;
            left: 30px;
        }

        .bd02 {
            width: 230px;
            height: 160px;
            position: absolute;
            top: 0;
            right: 0;
        }

        span {
            font-size: 14px;
            color: #ffffff;
            position: absolute;
            left: 30px;
            bottom: 42px;
        }
    }

    .tongh {
        width: 590px;
        height: 160px;
        background: url('../assets/home_img_tonghang_bg.png');
        position: relative;

        .bd {
            width: 248px;
            height: 30px;
            position: absolute;
            top: 50px;
            left: 30px;
        }

        .bd02 {
            width: 300px;
            height: 160px;
            position: absolute;
            top: 0;
            right: 0;
        }

        span {
            font-size: 14px;
            color: #ffffff;
            position: absolute;
            left: 30px;
            bottom: 42px;
        }
    }
}

.home_card {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;

    .card_item {
        text-align: center;
        width: 387px;
        height: 240px;
        background: #ffffff;

        > img {
            width: 387px;
            height: 120px;
        }

        p {
            font-size: 20px;
            font-weight: bold;
            color: #313233;
        }

        span {
            font-size: 14px;
            font-weight: 400;
            color: #bf1616;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 16px;
                height: 16px;
            }
        }
    }
}

.publish {
    display: flex;
    height: auto;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;

    .publish_left {
        box-sizing: border-box;
        width: 793px;
        height: 381px;
        padding: 30px 20px 0;
        background-color: #fff;
    }

    .pub_left_title {
        border-bottom: solid 1px #f2f3f5;
        padding: 12px 0;
        margin-bottom: 20px;
    }

    .publish_tab {
        display: inline;
        cursor: pointer;
        padding: 12px 0;
        margin-right: 24px;

        &.active {
            font-size: 18px;
            font-weight: 700;
            color: #bf1616;
            border-bottom: #bf1616 solid 2px;
        }
    }

    .publish_more {
        display: inline;
        cursor: pointer;
        color: #7a7c80;
        font-size: 14px;
        float: right;
        display: flex;
        justify-content: center;

        img {
            width: 16px;
            height: 16px;
        }
    }

    .pub_left_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #000;
        font-size: 14px;
        margin-bottom: 12px;

        ul {
            .li_show {
                width: 753px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;

                div {
                    display: flex;
                    align-items: center;

                    .pub_span {
                        width: 550px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }

            .li_active {
                // overflow: hidden;
                // display: none;
                cursor: pointer;

                img {
                    width: 94px;
                    height: 94px;
                    float: left;
                }

                h5 {
                    font-size: 14px;
                    color: #000;
                    margin: 10px 0;
                    font-weight: normal;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                p {
                    color: #939599;
                    font-size: 13px;
                    line-height: 22px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .pub_time {
                    float: right;
                    margin-top: 40px;
                }
            }

            li > div + div {
                margin-top: 8px;
            }
        }

        .block {
            display: block !important;
        }

        // 原先的
        .pub_tit {
            display: flex;
            align-items: center;

            span {
                width: 600px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;

                &:hover {
                    color: #bf1616;
                }
            }
        }

        img {
            width: 36px;
            height: 36px;
            margin-right: 10px;
        }

        .pub_time {
            color: #7a7c80;
            font-size: 14px;
            padding-right: 10px;
        }
    }
}

.publish_right {
    box-sizing: border-box;
    width: 386px;
    height: 381px;
    background: #ffffff;
    padding: 30px 30px 0;

    .pub_r_top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        cursor: pointer;

        div {
            width: 154px;
            height: 120px;
            background: rgba(225, 102, 58, 0.1);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #632828;
            font-size: 14px;
            font-weight: bold;

            img {
                width: 54px;
                height: 54px;
                margin-bottom: 8px;
            }
        }
    }

    .pub_r_bottom {
        .pub_r_row {
            font-size: 14px;
            color: #000;
            margin-bottom: 17px;

            span {
                &:nth-child(1) {
                    margin-right: 44px;
                }

                &:nth-child(2) {
                    margin-right: 12px;
                }
            }
        }
    }
}

.needs_con {
    margin-bottom: 20px !important;
}

.needs {
    div {
        background: rgba(58, 114, 225, 0.1) !important;
    }
}

.plate {
    display: flex;
    justify-content: space-between;
}

.resources {
    width: 590px;
    height: 365px;
    background: #ffffff;
    padding: 27px 20px 30px;
    box-sizing: border-box;
}

.res_top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2f3f5;
    margin-bottom: 30px;

    .res_title {
        font-size: 18px;
        font-weight: bold;
        color: #bf1616;
        line-height: 24px;
    }

    .res_more {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        span {
            font-size: 14px;
            font-weight: 400;
            color: #7a7c80;
            line-height: 20px;
        }

        img {
            width: 16px;
            height: 16px;
        }
    }
}

.res_bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    height: 260px;

    .res_img {
        cursor: pointer;
        width: 265px;
        height: 110px;
        position: relative;

        img {
            width: 265px;
            height: 110px;
        }

        p {
            position: absolute;
            top: 30px;
            right: 100px;
            font-size: 16px;
            font-weight: 500;
            color: #ffffff;
        }
    }
}
</style>
<style lang="less">
.home {
    .el-carousel__indicators--horizontal {
        bottom: 36px;
    }
}
</style>
