更新

src/layout/market/context.vue

@@ -1,117 +1,122 @@
 <template>
   <div id="context">
-    <el-col :span="24" class="one">
-      <el-col :span="7" class="oneLeft">
-        <el-carousel trigger="click" height="210px">
-          <template v-if="detailInfo.image && detailInfo.image.length > 0">
-            <el-carousel-item v-for="(item, index) in detailInfo.image" :key="index">
-              <el-image :src="item.url" style="width:100%"> </el-image>
-            </el-carousel-item>
-          </template>
-        </el-carousel>
-      </el-col>
-      <el-col :span="17" class="oneRight">
-        <p class="textOver">
-          {{ detailInfo.name }}
-        </p>
-        <p>
-          <span>产品类型:{{ detailInfo.product_type_name || '暂无' }}</span>
-          <span>
-            所属领域:
-            {{
-              detailInfo.field == 0
-                ? '先进制造'
-                : detailInfo.field == 1
-                ? '新材料'
-                : detailInfo.field == 2
-                ? '光电子口信息技术'
-                : detailInfo.field == 3
-                ? '文化和科技融合'
-                : '暂无'
-            }}
-          </span>
-        </p>
-        <p>
-          <span>联系人:{{ detailInfo.contact_user || '暂无' }}</span>
-          <span>联系电话:{{ detailInfo.contact_tel || '暂无' }}</span>
-        </p>
-      </el-col>
-      <el-col :span="24" class="newDown">
-        <div>
-          <p v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1" class="newpa">
-            <el-col :span="12" v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
-              <span v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
-                合作方式:{{
-                  detailInfo.coopermode === '0'
-                    ? '技术转让'
-                    : detailInfo.coopermode === '1'
-                    ? '技术服务'
-                    : detailInfo.coopermode === '2'
-                    ? '技术许可'
-                    : detailInfo.coopermode === '3'
-                    ? '技术融资'
-                    : detailInfo.coopermode === '4'
-                    ? '其他'
-                    : '暂无'
-                }}
-              </span></el-col
-            >
-            <el-col :span="12" v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1"
-              ><span v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
-                交易方式:{{ detailInfo.business === '0' ? '公用' : detailInfo.business === '1' ? '转让' : detailInfo.business === '2' ? '竞价' : '暂无' }}
-              </span></el-col
-            >
+    <el-row>
+      <el-col :span="24" class="one">
+        <el-col :span="7" class="oneLeft" @mouseenter.native="enter">
+          <el-carousel trigger="click" height="210px" v-if="detailInfo.image && detailInfo.image.length > 0">
+            <template>
+              <el-carousel-item v-for="(item, index) in detailInfo.image" :key="index">
+                <el-image :src="item.url" style="width:100%"> </el-image>
+              </el-carousel-item>
+            </template>
+          </el-carousel>
+          <el-col :span="24" class="noImageInfo" v-else>
+            <p v-if="detailInfo.introduction" class="intro">{{ detailInfo.introduction }}</p>
+            <p v-else class="noIntro">暂无</p>
+          </el-col>
+        </el-col>
+        <el-col :span="17" class="oneRight">
+          <p class="textOver">
+            {{ detailInfo.name }}
+          </p>
+          <p>
+            <span>产品类型:{{ detailInfo.product_type_name || '暂无' }}</span>
+            <span>
+              所属领域:
+              {{
+                detailInfo.field == 0
+                  ? '先进制造'
+                  : detailInfo.field == 1
+                  ? '新材料'
+                  : detailInfo.field == 2
+                  ? '光电子口信息技术'
+                  : detailInfo.field == 3
+                  ? '文化和科技融合'
+                  : '暂无'
+              }}
+            </span>
           </p>
-          <p class="newpa" v-if="detailInfo.totaltype == 0">
-            <el-col :span="12" v-if="detailInfo.totaltype == 0">
-              <span v-if="detailInfo.totaltype == 0"
-                >研发阶段:{{ detailInfo.phase == 1 ? '阶段成果' : detailInfo.phase == 2 ? '最终成果' : '暂无' }}</span
-              ></el-col
-            >
-            <el-col :span="12" v-if="detailInfo.totaltype == 0">
-              <span v-if="detailInfo.totaltype == 0">投入预算:{{ detailInfo.budget || '暂无' }}</span></el-col
-            >
+          <p>
+            <span>联系人:{{ detailInfo.contact_user || '暂无' }}</span>
+            <span>联系电话:{{ detailInfo.contact_tel || '暂无' }}</span>
           </p>
-          <p v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1" class="newpa">
-            <el-col :span="12" v-if="detailInfo.totaltype == 1">
-              <span v-if="detailInfo.totaltype == 1"
-                >技术成熟度:
-                {{
-                  detailInfo.mature == 0
-                    ? '实验室'
-                    : detailInfo.mature == 1
-                    ? '小试'
-                    : detailInfo.mature == 2
-                    ? '中试'
-                    : detailInfo.mature == 3
-                    ? '成熟'
-                    : '暂无'
-                }}</span
+        </el-col>
+        <el-col :span="24" class="newDown">
+          <div>
+            <p v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1" class="newpa">
+              <el-col :span="12" v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
+                <span v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
+                  合作方式:{{
+                    detailInfo.coopermode === '0'
+                      ? '技术转让'
+                      : detailInfo.coopermode === '1'
+                      ? '技术服务'
+                      : detailInfo.coopermode === '2'
+                      ? '技术许可'
+                      : detailInfo.coopermode === '3'
+                      ? '技术融资'
+                      : detailInfo.coopermode === '4'
+                      ? '其他'
+                      : '暂无'
+                  }}
+                </span></el-col
               >
-            </el-col>
-
-            <el-col :span="12" v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
-              <span v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1"
-                >收费标准:{{ detailInfo.price || '暂无' }}/{{
-                  detailInfo.priceunit === '0' ? '公斤' : detailInfo.priceunit === '1' ? '套' : detailInfo.priceunit === '2' ? '件' : '' || '暂无'
-                }}</span
+              <el-col :span="12" v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1"
+                ><span v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
+                  交易方式:{{ detailInfo.business === '0' ? '公用' : detailInfo.business === '1' ? '转让' : detailInfo.business === '2' ? '竞价' : '暂无' }}
+                </span></el-col
               >
-            </el-col>
-            <el-col :span="12" v-if="detailInfo.totaltype == 0">
-              <span>需求截止日期:{{ detailInfo.end_date || '暂无' }}</span>
-            </el-col>
-          </p>
+            </p>
+            <p class="newpa" v-if="detailInfo.totaltype == 0">
+              <el-col :span="12" v-if="detailInfo.totaltype == 0">
+                <span v-if="detailInfo.totaltype == 0"
+                  >研发阶段:{{ detailInfo.phase == 1 ? '阶段成果' : detailInfo.phase == 2 ? '最终成果' : '暂无' }}</span
+                ></el-col
+              >
+              <el-col :span="12" v-if="detailInfo.totaltype == 0">
+                <span v-if="detailInfo.totaltype == 0">投入预算:{{ detailInfo.budget || '暂无' }}</span></el-col
+              >
+            </p>
+            <p v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1" class="newpa">
+              <el-col :span="12" v-if="detailInfo.totaltype == 1">
+                <span v-if="detailInfo.totaltype == 1"
+                  >技术成熟度:
+                  {{
+                    detailInfo.mature == 0
+                      ? '实验室'
+                      : detailInfo.mature == 1
+                      ? '小试'
+                      : detailInfo.mature == 2
+                      ? '中试'
+                      : detailInfo.mature == 3
+                      ? '成熟'
+                      : '暂无'
+                  }}</span
+                >
+              </el-col>
 
-          <p class="newpa" v-if="detailInfo.totaltype == 1">
-            <el-col :span="12">
-              <span v-if="detailInfo.totaltype == 1">单位名称:{{ detailInfo.company || '暂无' }}</span>
-            </el-col>
-            <el-col :span="12">
-              <span v-if="detailInfo.totaltype == 1">单位地址:{{ detailInfo.address || '暂无' }}</span>
-            </el-col>
-          </p>
-        </div>
-        <!-- <div>
+              <el-col :span="12" v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1">
+                <span v-if="detailInfo.totaltype == 0 || detailInfo.totaltype == 1"
+                  >收费标准:{{ detailInfo.price || '暂无' }}/{{
+                    detailInfo.priceunit === '0' ? '公斤' : detailInfo.priceunit === '1' ? '套' : detailInfo.priceunit === '2' ? '件' : '' || '暂无'
+                  }}</span
+                >
+              </el-col>
+              <el-col :span="12" v-if="detailInfo.totaltype == 0">
+                <span>需求截止日期:{{ detailInfo.end_date || '暂无' }}</span>
+              </el-col>
+            </p>
+
+            <p class="newpa" v-if="detailInfo.totaltype == 1">
+              <el-col :span="12">
+                <span v-if="detailInfo.totaltype == 1">单位名称:{{ detailInfo.company || '暂无' }}</span>
+              </el-col>
+              <el-col :span="12">
+                <span v-if="detailInfo.totaltype == 1">单位地址:{{ detailInfo.address || '暂无' }}</span>
+              </el-col>
+            </p>
+          </div>
+          <!-- <div>
           <p>
             <span>产品参数:</span>
             <span>
@@ -119,75 +124,101 @@
             </span>
           </p>
         </div> -->
-        <!-- <el-col :span="24"></el-col> -->
-        <div></div>
-        <div>
-          <p>服务范围:</p>
-          <p class="moreScope" v-if="scope != ''">{{ detailInfo.scope || '暂无' }}</p>
-          <p class="moreScope1" v-else>{{ detailInfo.scope || '暂无' }}</p>
-          <span v-if="detailInfo.scope != null && detailInfo.scope.length > 420">
-            <el-button size="mini" @click="scopeMore()" v-if="scope != ''">更多</el-button>
-            <el-button size="mini" @click="scopeMore1()" v-else>收起</el-button>
-          </span>
-        </div>
-        <div></div>
-        <div>
-          <p>产品简介:</p>
-          <p class="introduction" v-if="introduction != ''">{{ detailInfo.introduction || '暂无' }}</p>
-          <p class="introduction1" v-else>{{ detailInfo.introduction || '暂无' }}</p>
-          <el-button size="mini" v-if="detailInfo.introduction != null && detailInfo.introduction.length > 420">
-            <span v-if="introduction != ''" @click="introductionMore()">更多</span>
-            <span v-else @click="introductionMore1()">收起</span>
-          </el-button>
-        </div>
+          <!-- <el-col :span="24"></el-col> -->
+          <div></div>
+          <div>
+            <p>服务范围:</p>
+            <p class="moreScope" v-if="scope != ''">{{ detailInfo.scope || '暂无' }}</p>
+            <p class="moreScope1" v-else>{{ detailInfo.scope || '暂无' }}</p>
+            <span v-if="detailInfo.scope != null && detailInfo.scope.length > 420">
+              <el-button size="mini" @click="scopeMore()" v-if="scope != ''">更多</el-button>
+              <el-button size="mini" @click="scopeMore1()" v-else>收起</el-button>
+            </span>
+          </div>
+          <div></div>
+          <div>
+            <p>产品简介:</p>
+            <p class="introduction" v-if="introduction != ''">{{ detailInfo.introduction || '暂无' }}</p>
+            <p class="introduction1" v-else>{{ detailInfo.introduction || '暂无' }}</p>
+            <el-button size="mini" v-if="detailInfo.introduction != null && detailInfo.introduction.length > 420">
+              <span v-if="introduction != ''" @click="introductionMore()">更多</span>
+              <span v-else @click="introductionMore1()">收起</span>
+            </el-button>
+          </div>
 
-        <el-col :span="24">
-          <p v-if="detailInfo.totaltype == 0" class="newpa">
-            <span>难题:{{ detailInfo.difficult_problem || '暂无' }}</span>
-          </p>
+          <el-col :span="24">
+            <p v-if="detailInfo.totaltype == 0" class="newpa">
+              <span>难题:{{ detailInfo.difficult_problem || '暂无' }}</span>
+            </p>
 
-          <p v-if="detailInfo.totaltype == 0" class="newpa">
-            <span>企业解决需求:{{ detailInfo.demand || '暂无' }}</span>
-          </p>
+            <p v-if="detailInfo.totaltype == 0" class="newpa">
+              <span>企业解决需求:{{ detailInfo.demand || '暂无' }}</span>
+            </p>
 
-          <!-- <p v-if="detailInfo.totaltype == 1" class="newpa">
+            <!-- <p v-if="detailInfo.totaltype == 1" class="newpa">
             <span>企业解决需求:{{ detailInfo.demand || '暂无' }}</span>
           </p> -->
 
-          <p v-if="detailInfo.totaltype == 1" class="newpa">
-            <span>技术团队情况:{{ detailInfo.team || '暂无' }}</span>
-          </p>
+            <p v-if="detailInfo.totaltype == 1" class="newpa">
+              <span>技术团队情况:{{ detailInfo.team || '暂无' }}</span>
+            </p>
 
-          <p v-if="detailInfo.totaltype == 1" class="newpa">
-            <span>知识产权情况:{{ detailInfo.property || '暂无' }}</span>
-          </p>
+            <p v-if="detailInfo.totaltype == 1" class="newpa">
+              <span>知识产权情况:{{ detailInfo.property || '暂无' }}</span>
+            </p>
 
-          <p v-if="detailInfo.totaltype == 1" class="newpa">
-            <span>合作企业:{{ detailInfo.coopercompany || '暂无' }}</span>
-          </p>
+            <p v-if="detailInfo.totaltype == 1" class="newpa">
+              <span>合作企业:{{ detailInfo.coopercompany || '暂无' }}</span>
+            </p>
 
-          <p v-if="detailInfo.totaltype == 1" class="newpa">
-            <span>其他需求:{{ detailInfo.other || '暂无' }}</span>
-          </p>
+            <p v-if="detailInfo.totaltype == 1" class="newpa">
+              <span>其他需求:{{ detailInfo.other || '暂无' }}</span>
+            </p>
+          </el-col>
         </el-col>
+        <el-col :span="24" class="anniu">
+          <el-button type="primary" @click="btnPhone()" v-if="this.user.uid != detailInfo.userid">对接聊天</el-button>
+          <el-button v-if="this.user.uid != detailInfo.userid" @click="onSubmit()" type="success">洽谈交易</el-button>
+          <!-- <el-button @click="onSubmit" type="success">对接聊天</el-button><el-button @click="onSubmit" type="primary">洽谈交易</el-button></el-col -->
+        </el-col>
+        <el-dialog title="对接聊天" :visible.sync="dialogTableVisible">
+          <el-col :span="24" class="two">
+            <chat :room="room"></chat>
+          </el-col>
+        </el-dialog>
+        <el-dialog title="参数" class="argsDialog" :visible.sync="product_argsDia">
+          <el-table :data="detailInfo.product_args" border style="width: 100%">
+            <el-table-column prop="arg_name" label="参数名称" :show-overflow-tooltip="true"> </el-table-column>
+            <el-table-column prop="memo" label="参数内容" :show-overflow-tooltip="true"> </el-table-column>
+          </el-table>
+        </el-dialog>
       </el-col>
-      <el-col :span="24" class="anniu">
-        <el-button type="primary" @click="btnPhone()" v-if="this.user.uid != detailInfo.userid">对接聊天</el-button>
-        <el-button v-if="this.user.uid != detailInfo.userid" @click="onSubmit()" type="success">洽谈交易</el-button>
-        <!-- <el-button @click="onSubmit" type="success">对接聊天</el-button><el-button @click="onSubmit" type="primary">洽谈交易</el-button></el-col -->
-      </el-col>
-      <el-dialog title="对接聊天" :visible.sync="dialogTableVisible">
-        <el-col :span="24" class="two">
-          <chat :room="room"></chat>
+    </el-row>
+    <el-dialog title="项目展报" class="dialogPic" :visible.sync="productImg" width="30%">
+      <el-col :span="24" class="productImgInfo">
+        <el-col :span="24" class="title">
+          <p class="textOver">{{ detailInfo.company || detailInfo.name }}</p>
+        </el-col>
+        <el-col :span="24" class="image" v-if="detailInfo.image && detailInfo.image.length > 0">
+          <el-carousel trigger="click" height="200px">
+            <template>
+              <el-carousel-item v-for="(item, index) in detailInfo.image" :key="index">
+                <el-image :src="item.url" style="width:100%"> </el-image>
+              </el-carousel-item>
+            </template>
+          </el-carousel>
+        </el-col>
+        <el-col :span="24" class="noImage" v-else>
+          暂无图片
+        </el-col>
+        <el-col :span="24" class="intro" v-if="detailInfo.introduction || detailInfo.team">
+          {{ detailInfo.introduction.substring(0, 180) || detailInfo.team.substring(0, 180) }}
+        </el-col>
+        <el-col :span="24" class="address">
+          <el-link :underline="false" href="http://free.liaoningdoupo.com/platlive">http://free.liaoningdoupo.com/platlive</el-link>
         </el-col>
-      </el-dialog>
-      <el-dialog title="参数" class="argsDialog" :visible.sync="product_argsDia">
-        <el-table :data="detailInfo.product_args" border style="width: 100%">
-          <el-table-column prop="arg_name" label="参数名称" :show-overflow-tooltip="true"> </el-table-column>
-          <el-table-column prop="memo" label="参数内容" :show-overflow-tooltip="true"> </el-table-column>
-        </el-table>
-      </el-dialog>
-    </el-col>
+      </el-col>
+    </el-dialog>
   </div>
 </template>
 
@@ -212,6 +243,18 @@ export default {
     scope: '123',
     introduction: '123',
     room: {},
+    productImg: false,
+    imagess: [
+      {
+        url: require('@a/logo.png'),
+      },
+      {
+        url: require('@a/logo.png'),
+      },
+      {
+        url: require('@a/logo.png'),
+      },
+    ],
   }),
   created() {},
   computed: {
@@ -270,6 +313,10 @@ export default {
       }
       this.dialogTableVisible = true;
     },
+    // 鼠标悬停
+    enter() {
+      this.productImg = true;
+    },
   },
 };
 </script>
@@ -478,4 +525,67 @@ p {
 .newpa {
   padding: 0 0 10px 0;
 }
+.noImageInfo {
+  height: 220px;
+  .intro {
+    height: 220px;
+    font-size: 14px;
+    text-indent: 2rem;
+  }
+  .noIntro {
+    height: 220px;
+    line-height: 220px;
+    text-align: center;
+    font-size: 30px;
+  }
+}
+.productImgInfo {
+  .title {
+    height: 80px;
+    background: #fe950e;
+    text-align: center;
+    font-size: 32px;
+    color: #fff;
+    font-family: cursive;
+    margin: 0 50px;
+    width: 80%;
+    line-height: 80px;
+    border-radius: 90px;
+  }
+  .image {
+    margin: 15px 130px;
+    width: 50%;
+    height: 200px;
+    border: 1px solid #f1f1f1;
+  }
+  .noImage {
+    text-align: center;
+    height: 200px;
+    line-height: 200px;
+    font-size: 20px;
+    color: #000;
+    width: 50%;
+    margin: 30px 130px;
+    border: 1px solid #ccc;
+  }
+  .intro {
+    font-size: 16px;
+    padding: 0 50px;
+  }
+  .address {
+    margin: 25px 50px;
+    width: 80%;
+    background: #fe950e;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    .el-link {
+      color: #fff;
+      font-size: 20px;
+    }
+  }
+}
+/deep/.dialogPic .el-dialog__body {
+  height: 600px;
+}
 </style>