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="content">
              <div class="content-left">
                <div class="content-left-list">
                  <div
                    v-for="item in types"
                    :key="item.value"
                    @click="onDatils(item)"
                    :class="`content-left-list-item ${
                      currentId === item.value ? 'action' : ''
                    }`"
                  >
                    {{ item.label }}
                  </div>
                </div>
              </div>
              <div class="content-right">
                <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>
                      </div>
                      <p>{{ item.introduction }}</p>
                    </div>
                  </div>
                </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: [],
      currentId: '1',
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      types: [
        {
          label: '育种企业',
          value: '1'
        },
        {
          label: '育苗企业',
          value: '2'
        },
        {
          label: '种植企业',
          value: '3'
        },
        {
          label: '加工企业',
          value: '4'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['zdyfGgqy'])
  },
  components: {},
  watch: {},
  created () {
    seedCompanyList({ type: '1' }).then((res) => {
      this.list1 = res.data
      this.list = res.data
    })
    seedCompanyList({ type: '2' }).then((res) => {
      this.list2 = res.data
    })
    seedCompanyList({ type: '3' }).then((res) => {
      this.list3 = res.data
    })
    seedCompanyList({ type: '4' }).then((res) => {
      this.list4 = res.data
    })
  },
  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)
    },
    onDatils (item) {
      this.currentId = item.value
      this.list = this[`list${item.value}`]
    },
    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;

      .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;
      top:-24px;
      > .content {
        box-sizing: border-box;
        color: #fff;
        padding: 0px 24px 0 0;

        .main {
          height: 790px;
          .content {
            display: flex;
            &-left {
              margin-top: -6px;
              padding-top: 38px;
              width: 160px;
              height: 750px;
              background: linear-gradient(
                270deg,
                #1f7eff 0%,
                rgba(13, 113, 248, 0) 100%
              );
              &-list {
                &-item {
                  width: 136px;
                  height: 44px;
                  line-height: 44px;
                  font-size: 16px;
                  padding-left: 24px;
                  font-weight: 500;
                  color: #c5defb;
                  font-family: PingFang SC;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .action {
                  color: #ffffff;
                  background-image: linear-gradient(
                    to right,
                    rgba(71, 149, 255, 1) 0%,
                    rgba(71, 149, 255, 1) 6px,
                    rgba(31, 126, 255, 1) 7px,
                    rgba(249, 140, 38, 0) 160px
                  );
                }
              }
            }
            &-right {
              width: calc(100% - 165px);
              padding-left: 39px;
              margin-top: 38px;
              height: 745px;
              box-sizing: border-box;
              overflow-y: scroll;

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

              &::-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);
              }

              .numItem {
                width: 670px;
                background: rgba(109, 166, 255, 0.2);
                padding: 16px 16px;
                border-radius: 2px;
                margin-bottom: 10px;
                .title {
                  font-family: PingFang SC;
                  font-weight: bold;
                  font-size: 18px;
                  color: #ffffff;
                  line-height: 32px;
                }
                .content {
                  display: flex;
                  justify-content: space-between;
                  font-family: PingFang SC;
                  font-weight: 500;
                  font-size: 16px;
                  color: rgba(255, 255, 255, 0.6);
                  line-height: 32px;
                  .txt {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 16px;
                    color: #ffffff;
                    line-height: 32px;
                  }
                }
              }
            }
          }
          .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: 552px;
              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>