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.cover" alt="" v-if="item.cover">
                                <div v-else class="noImg">暂无图片</div>
                                <div class="content">
                                    <div>
                                        <span class="name" style="width: 61px;">{{ item.name }}</span>
                                        <span class="name">{{ item.position }}</span>

                                    </div>
                                    <p> {{ item.introduction }}</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.cover" alt="" v-if="item.cover">
                                <div v-else class="noImg">暂无图片</div>
                                <div class="content">
                                    <div>
                                        <span class="name">{{ item.name }}</span>
                                        <span class="name">{{ item.position }}</span>

                                    </div>
                                    <p> {{ item.introduction }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { seedPowerList } from '@/api/zdyf'
export default {
  name: '',
  data () {
    return {
      dialogTitle: '高端科技人才',
      list: [
        {
          name: '印象初',
          imgSrc: require('@/assets/images/resource/kyll/1.jpg'),
          unit: '中国科学院院士',
          content: '1995年6月被联合国教科文组织和中国科学院挑选为中国当代科技精英之一。1995年10月当选为中国科学院院士。印象初院士长期从事蝗虫分类工作。'
        },
        {
          name: '李天来',
          imgSrc: require('@/assets/images/resource/kyll/2.jpg'),
          unit: '中国工程院院士',
          content: '多年来一直从事设施园艺及蔬菜生理生态的研究与教学工作，多项研究成果已达世界先进水平。'
        },
        {
          name: '孙忠奎',
          imgSrc: require('@/assets/images/resource/kyll/3.jpg'),
          unit: '瑞克斯旺（中国）农业科技有限公司总经理',
          content: '瑞克斯旺作为种子提供方，是这条产业链的上方，只有打好这个开头，才能为客户生产好的蔬菜奠定基础，保证提供给消费者安全的蔬菜，瑞克斯旺公司用品质和信誉赢得客户和经销商十年如一日的支持。'
        },
        {
          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 () {
    seedPowerList({ type: 1 }).then(res => {
      this.list = res.data
    })
    seedPowerList({ type: 2 }).then(res => {
      this.list1 = res.data
    })
  },
  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 {
        @include flex(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;
                                margin-top: 8px;
                                opacity: 0.8;
                            }

                            >.content {
                                flex: 1;
                                @include flex(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>