直播大厅更新

src/layout/direct/directDetail.vue

@@ -0,0 +1,182 @@
+<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.price || '暂无' }}/{{ directInfo.priceunit || '暂无' }}</span>
+          </p>
+          <p>
+            <span>
+              交易方式:{{ directInfo.business === '0' ? '公用' : directInfo.business === '1' ? '转让' : directInfo.business === '2' ? '竞价' : '暂无' }}
+            </span>
+            <span>研发阶段:{{ directInfo.phase == 1 ? '阶段成果' : directInfo.phase == 2 ? '最终成果' : '暂无' }}</span>
+          </p>
+          <p>
+            <span>联系人:{{ directInfo.contact_user || '暂无' }}</span>
+            <span>联系电话:{{ directInfo.contact_tel || '暂无' }}</span>
+          </p>
+        </el-col>
+        <el-col :span="24" class="oneDown">
+          <div>
+            <p>应用领域：</p>
+            <p>{{ directInfo.field || '暂无' }}</p>
+          </div>
+          <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">
+              <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">
+              <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: 20px;
+      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>