web-test/src/layout/direct/directDetail.vue

<template>
  <div id="directDetail">
    <el-row>
      <el-col :span="24" class="one">
        <el-col :span="7" class="oneLeft">
          <el-carousel trigger="click" height="210px">
            <template v-if="directInfo.image && directInfo.image.length > 0">
              <el-carousel-item v-for="(item, index) in directInfo.image" :key="index">
                <el-image :src="item.url" style="height:210px"> </el-image>
              </el-carousel-item>
            </template>
          </el-carousel>
        </el-col>
        <el-col :span="17" class="oneRight">
          <p class="textOver">
            {{ directInfo.name }}
          </p>
          <p>
            <span>
              产品类型:{{ directInfo.totaltype === '0' ? '技术' : directInfo.totaltype === '1' ? '产品' : directInfo.totaltype === '2' ? '服务' : '暂无' }}
            </span>
            <span>
              所属领域:{{
                `${directInfo.field}` === `0`
                  ? '先进制造'
                  : `${directInfo.field}` === `1`
                  ? '新材料'
                  : `${directInfo.field}` === `2`
                  ? '光电子'
                  : `${directInfo.field}` === `3`
                  ? '信息技术'
                  : `${directInfo.field}` === `4`
                  ? '文化和科技融合'
                  : '暂无'
              }}
            </span>
          </p>
          <p>
            <span>联系人:{{ directInfo.contact_user || '暂无' }}</span>
            <span>联系电话:{{ directInfo.contact_tel || '暂无' }}</span>
          </p>
        </el-col>
        <el-col :span="24" class="oneDown">
          <div>
            <!-- <p><span>产品参数:</span><span @click="argsBtn(directInfo.product_args)">查看详情</span></p> -->
          </div>
          <div>
            <p>服务范围:</p>
            <p class="moreScope" v-if="scope != ''">{{ directInfo.scope || '暂无' }}</p>
            <p class="moreScope1" v-else>{{ directInfo.scope || '暂无' }}</p>
            <el-button size="mini" v-if="directInfo.scope != null && directInfo.scope.length > 300">
              <span v-if="scope != ''" @click="scopeMore()">更多</span>
              <span v-else @click="scopeMore1()">收起</span>
            </el-button>
          </div>
          <div>
            <p>产品简介:</p>
            <p class="introduction" v-if="introduction != ''">{{ directInfo.introduction || '暂无' }}</p>
            <p class="introduction1" v-else>{{ directInfo.introduction || '暂无' }}</p>
            <el-button size="mini" v-if="directInfo.introduction != null && directInfo.introduction.length > 300">
              <span v-if="introduction != ''" @click="introductionMore()">更多</span>
              <span v-else @click="introductionMore1()">收起</span>
            </el-button>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'directDetail',
  props: {
    directInfo: null,
  },
  components: {},
  data: () => ({
    scope: '123',
    introduction: '123',
  }),
  created() {},
  computed: {},
  methods: {
    // 更多
    scopeMore() {
      this.scope = '';
    },
    // 收起
    scopeMore1() {
      this.scope = '123';
    },
    // 更多
    introductionMore() {
      this.introduction = '';
    },
    // 收起
    introductionMore1() {
      this.introduction = '123';
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  min-height: 550px;
  .oneLeft {
    height: 210px;
    overflow: hidden;
  }
  .oneRight {
    padding: 0 15px;
    p {
      font-size: 16px;
      padding: 0 0 20px 0;
      span {
        display: inline-block;
        width: 50%;
      }
    }
    p:first-child {
      font-size: 18px;
      font-weight: bold;
      padding: 20px 0;
    }
    // p:nth-child(2) span:last-child {
    //   color: red;
    //   font-weight: bold;
    // }
  }
  .oneDown {
    border-top: 1px dashed #ccc;
    margin: 30px 0 0 0;
    padding: 30px 0 0 0;
    div {
      padding: 0 0 15px 0;
      p {
        font-size: 18px;
      }
      p:first-child {
        color: #333;
        font-weight: bold;
        padding: 0 0 10px 0;
      }
    }
    div:nth-child(2) p span:last-child {
      color: #409eff;
      padding: 0 10px;
    }
    div:nth-child(2) p span:last-child:hover {
      cursor: pointer;
    }
    div:nth-child(3) .moreScope {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 6;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    div:nth-child(3) .moreScope1 {
      overflow: none;
    }
    div:nth-child(3) .el-button {
      float: right;
    }
    div:last-child .introduction {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 6;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    div:last-child .introduction1 {
      overflow: none;
    }
    div:last-child .el-button {
      float: right;
    }
  }
}
</style>