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

<template>
  <div class="modal" v-show="zdyfGgqy">
    <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" @click="openCompanyDetail(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">{{ item.name }}</span>
                    <!-- <span class="name">{{ item.contacts }}</span> -->
                  </div>
                  <p>{{ item.introduction }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { seedCompanyList } 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元的物资。'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['zdyfGgqy'])
  },
  components: {},
  watch: {},
  created () {
    seedCompanyList().then((res) => {
      this.list = res.data.list
    })
  },
  methods: {
    ...mapActions({
      showGlobalDialog: 'showGlobalDialog',
      set_qyjj: 'SET_QYJJ',
      set_gsxq_id: 'SET_GSXQ_ID'
    }),
    openCompanyDetail (item) {
      this.set_qyjj(true)
      this.set_gsxq_id(item.id)
    },
    closeDialog () {
      this.showGlobalDialog('zdyfGgqyClose')
    }
  }
}
</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>