<template>
    <div class="main">
        <Common />
        <div class="bg">
            <img src="../../assets/image/coordination/bg.jpg" alt="">
        </div>
        <div class="content">
            <div class="item" v-for="item in 10">
                <div class="left">
                    <img src="../../assets/image/coordination/bg.jpg" alt="">
                </div>
                <div class="center">
                    <div class="title">
                        航空航天产业招商
                    </div>
                    <div class="info">
                        平江县高新技术产业园
                        以大数据、云计算、物联网为代表的新一代信息技术产业；
                        以航空航天、高端装备为代表的特色产业以及以新能源、
                        生物医药等为代表的新兴产业已经形成产业集群，重点发展电子信息、生物医药、智能装备、汽车零部件、新材料等主导产业。
                        成为推动高质量发展的创新能极。
                    </div>
                </div>
                <div class="right">
                    <div class="btn" @click="goToInfo(item)">招商详情</div>
                </div>
            </div>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :page-size="20" :total="200" />
        </div>
        <Footer />
    </div>
</template>
    
<script setup lang='ts'>
import { ref, reactive, inject } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const $http:any = inject("$http");
const router = useRouter();


const goToInfo = (item: any) => {
    console.log(item)
    router.push({
        name: 'investmentDetails'
    })
}
</script>
    
<style lang="less" scoped>
.main {
    width: 100%;
    background-color: #f5f5f5;
}

.bg {
    width: 100%;
    height: 100px;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.content {
    margin: 30px auto;
    width: 1200px;

    .item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 25px;
        background-color: #fff;
        margin-bottom: 30px;

        .left {
            width: 180px;
            height: 140px;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .center {
            margin-left: 12px;
            margin-right: 120px;
            width: 75%;
            color: #333333;
            font-size: 14px;

            .info {
                margin-top: 15px;
                line-height: 32px;
                display: -webkit-box;
                overflow: hidden;
                -webkit-box-orient: vertical;
                line-clamp: 2;
                -webkit-line-clamp: 3; //显示几行
            }
        }

        .right {
            width: 120px;
            display: flex;
            align-items: center;

            .btn {
                width: 120px;
                height: 42px;
                line-height: 42px;
                box-sizing: border-box;
                border: 1px solid @baseColor;
                color: #fff;
                background-color: @baseColor;
                font-size: 14px;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
            }
        }
    }
}
.pagination {
    margin: 0 auto;
    padding: 25px 0;
    width: 1200px;
    display: flex;
    :deep(.el-pager li) {
        background-color: #fff;
    }
    :deep(.btn-prev) {
        background-color: #fff;
    }
    :deep(.btn-prev:disabled) {
        background-color: #fff;
    }
    :deep(.btn-next) {
        background-color: #fff;
    }
    :deep(.btn-next:disabled) {
        background-color: #fff;
    }
}
</style>