yifeng_integration/src/views/next/dialog-module/zdyf-right/kyll/talents.vue

<template>
    <div class="modal" v-show="talents">
        <section>
            <div class="dialog_header">
                <div class="close-icon" @click="closeDialog">
                    <img src="@/assets/images/common/dialog-colse.png" alt="" />
                </div>
                <div class="title-container">
                    <div class="title">{{ dialogTitle }}</div>
                </div>
            </div>
            <div class="dialog_body">
                <div class="content">
                    <div class='main'>
                        <div class="header"><img src="@/assets/images/common/title-small.png" alt=""
                                style="width: 20px;height: 20px;">高端科技人才
                        </div>
                        <div class="flex">
                            <div class="item" v-for="(item, index) in list" :key="index">
                                <img :src="item.imgSrc" alt="" v-if="item.imgSrc">
                                <div v-else class="noImg">暂无图片</div>
                                <div class="content">
                                    <div>
                                        <span class="name">{{ item.name }}</span>
                                        <span class="name">{{ item.unit }}</span>

                                    </div>
                                    <p> {{ item.content }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="header top-24"><img src="@/assets/images/common/title-small.png" alt=""
                                style="width: 20px;height: 20px;">土秀才田专家
                        </div>
                        <div class="flex">
                            <div class="item" v-for="(item, index) in list1" :key="index">
                                <img :src="item.imgSrc" alt="" v-if="item.imgSrc">
                                <div v-else class="noImg">暂无图片</div>
                                <div class="content">
                                    <div>
                                        <span class="name">{{ item.name }}</span>
                                        <span class="name">{{ item.unit }}</span>

                                    </div>
                                    <p> {{ item.content }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
  
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
    name: '',
    data() {
        return {
            dialogTitle: '高端科技人才',
            list: [
                {
                    name: '印象初',
                    imgSrc: require('@/assets/images/resource/kyll/1.jpg'),
                    unit: '中国科学院院士',
                    content: '1995年6月被联合国教科文组织和中国科学院挑选为中国当代科技精英之一。1995年10月当选为中国科学院院士。1996年被河北大学聘为终身教授，2001年被山东农业大学聘为特聘教授。印象初院士长期从事蝗虫分类工作。'
                },
                {
                    name: '李天来',
                    imgSrc: require('@/assets/images/resource/kyll/2.jpg'),
                    unit: '中国工程院院士',
                    content: '多年来一直从事设施园艺及蔬菜生理生态的研究与教学工作，多项研究成果已达世界先进水平。'
                },
                {
                    name: '孙忠奎',
                    imgSrc: require('@/assets/images/resource/kyll/3.jpg'),
                    unit: '瑞克斯旺（中国）农业科技有限公司总经理',
                    content: '怀着报效祖国的信念，经过近10年国外深造的孙忠魁，在荷兰取得博士学位后，毅然选择了回国，积极投入到农业生产科研一线中，着力开展科研创新。瑞克斯旺作为种子提供方，是这条产业链的上方，只有打好这个开头，才能为客户生产好的蔬菜奠定基础，保证提供给消费者安全的蔬菜，瑞克斯旺公司用品质和信誉赢得客户和经销商十年如一日的支持。他负责的瑞克斯旺蔬菜研究开发中心项目坐落于移风店镇，位于国际种都核心区，随着项目的日益发展，可直接带动农户300万人，增加农民纯收入100亿。'
                },
                {
                    name: '曹修竹',
                    imgSrc: '',
                    unit: '青岛德龙种子有限公司创始人',
                    content: '培育出番茄和辣椒新品种300个，在农业部登记的品种42个，其中干辣椒品种推广面积居全国第一。他热衷于公益事业，捐赠现金和物资总额已超过100万元，并在2022年防疫工作中捐款12万元和价值3000元的物资。'
                }
            ],
            list1:[
            {
                    name: '姜波',
                    imgSrc: require('@/assets/images/resource/kyll/5.jpg'),
                    unit: '青岛地平线蔬菜专业合作社理事长',
                    content: '移风店镇最早开始网上售菜的农民，她边种蔬菜边做经纪人，推广移风蔬菜销往全国各地。2008年，成立青岛地平线蔬菜专业合作社，注册了“姜大姐”商标，通过不断与国内外大种苗公司合作，每年引进新品种20多个'
                },
                {
                    name: '韩泽兵（大庄网格）',
                    imgSrc: '',
                    unit: '蔬菜种植能手',
                    content: '种植管理蔬菜600余亩，成立青岛佳蔬蔬菜专业合作社，蔬菜远销国外。'
                },
                {
                    name: '朱爱香（太平庄网格）',
                    imgSrc: '',
                    unit: '蔬菜种植能手',
                    content: '带动村民种植蔬菜新品种10余个，每棚每季收入提高50%，帮助全村发展蔬菜大拱棚170余个，蔬菜900余亩，占耕地总面积的90%以上。'
                },
                {
                    name: '辛相成（南埠网格）',
                    imgSrc: '',
                    unit: '蔬菜种植能手',
                    content: '共种植管理蔬菜50余亩，以优良品质在国外市场站稳脚跟。'
                }
            ]
        }
    },
    computed: {
        ...mapGetters(['talents'])
    },
    components: {
    },
    watch: {

    },
    created() {

    },
    methods: {
        ...mapActions({
            showGlobalDialog: 'showGlobalDialog'
        }),
        closeDialog() {
            this.showGlobalDialog('')
        },

    }
}
</script>
  
<style lang="scss" scoped>
.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;

    section {
        display: flex;
        flex-direction: column;
        background: url('~@/assets/images/common/dialog-bg.png') no-repeat !important;
        background-size: 100% 100% !important;
        width: 1354px;
        height: 843px;
        overflow: hidden;
        padding-bottom: 16px;
        box-sizing: border-box;

        .dialog_header {
            position: relative;
            margin-bottom: 40px;

            .close-icon {
                width: 18px;
                height: 18px;
                position: absolute;
                top: 10px;
                right: 16px;
                cursor: pointer;
            }

            .title-container {
                align-items: center;
                background: url('~@/assets/images/common/dialog-header.png') no-repeat;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 60px;
                font-size: 26px;

                .title {
                    font-family: zaozigongfang;
                    letter-spacing: 2px;
                    line-height: 50px;
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: center;
                    height: 60px;
                    font-size: 26px;
                    color: #fff;
                }
            }
        }

        .dialog_body {
            position: relative;


            >.content {
                box-sizing: border-box;
                color: #fff;
                padding: 0px 24px 0 27px;

                .main {
                    height: 716px;
                    overflow-y: hidden;
                    box-sizing: border-box;
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        width: 3px;
                    }

                    &::-webkit-scrollbar-track {
                        border-radius: 10px;
                        background: rgba(12, 129, 254, 0.24);
                    }

                    &::-webkit-scrollbar-thumb {
                        border-radius: 10px;
                        background: linear-gradient(270deg, #0063fe, #0095ff);
                    }

                    .header {
                        width: 100%;
                        height: 30px;
                        text-align: left;
                        background: linear-gradient(90deg, rgb(26, 109, 224) 0%, rgba(13, 113, 248, 0) 50%);
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }

                    .flex {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;

                        .item {
                            display: flex;
                            width: 647px;
                            padding: 16px 24px 16px 16px;
                            box-sizing: border-box;
                            background: #1657b8;
                            border-radius: 2px;
                            margin-bottom: 10px;

                            img {
                                width: 186px;
                                height: 120px;
                            }

                            p {
                                display: -webkit-box;
                                overflow: hidden;
                                -webkit-line-clamp: 4;
                                -webkit-box-orient: vertical;
                                text-overflow: ellipsis;
                                margin-bottom: 0;
                            }

                            >.content {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                padding-left: 17px;
                                box-sizing: border-box;

                                &>:nth-child(1) {
                                    display: flex;
                                    justify-content: space-between;

                                    &>:nth-child(2) {
                                        color: #00D4F3;
                                    }
                                }
                            }

                        }
                    }
                }
            }


        }
    }

}

.top-24 {
    margin-top: 24px;
}

.noImg {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #7a84a9;
    width: 186px;
    height: 110px;
}</style>