更新直播大厅

src/layout/direct/exportDetail.vue

@@ -0,0 +1,143 @@
+<template>
+  <div id="exportDetail">
+    <el-row>
+      <el-col :span="24" class="top">
+        <el-col :span="7" class="image">
+          <el-image :src="exportInfo.imgpath"></el-image>
+        </el-col>
+        <el-col :span="17" class="info">
+          <p>
+            <span>姓名:{{ exportInfo.name }}</span>
+            <span>性別:{{ exportInfo.gender }}</span>
+          </p>
+          <p>
+            <span>民族:{{ exportInfo.nation }}</span>
+            <span>出生年月:{{ exportInfo.birth }}</span>
+          </p>
+          <p>
+            <span>毕业院校:{{ exportInfo.school }}</span>
+            <span>所学专业:{{ exportInfo.major_studied }}</span>
+          </p>
+          <p>
+            <span>学历:{{ exportInfo.eduback }}</span>
+            <span>学位:{{ exportInfo.degree }}</span>
+          </p>
+          <p>
+            <span>电话:{{ exportInfo.tel }}</span>
+            <span>邮箱:{{ exportInfo.phone }}</span>
+          </p>
+        </el-col>
+        <el-col :span="24" class="down">
+          <div>
+            <span>职务:{{ exportInfo.position }}</span>
+            <span>从事专业:{{ exportInfo.professional }}</span>
+          </div>
+          <div>
+            <span>当前住址:{{ exportInfo.addr }}</span>
+          </div>
+          <div>
+            <p>可供咨询领域:</p>
+            <p>{{ exportInfo.field }}</p>
+          </div>
+          <div>
+            <p>工作简介:</p>
+            <p class="profile" v-if="scope != ''">{{ exportInfo.job_profile }}</p>
+            <p class="profile1" v-else>{{ exportInfo.job_profile }}</p>
+            <el-button size="mini" v-if="exportInfo.job_profile != null">
+              <span v-if="scope != ''" @click="scopeMore()">更多</span>
+              <span v-else @click="scopeMore1()">收起</span>
+            </el-button>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'exportDetail',
+  props: {
+    exportInfo: null,
+  },
+  components: {},
+  data: () => ({
+    scope: '123',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    // 更多
+    scopeMore() {
+      this.scope = '';
+    },
+    // 收起
+    scopeMore1() {
+      this.scope = '123';
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  .image {
+    box-shadow: 0 0 3px #ccc;
+  }
+  .info {
+    padding: 0 15px;
+    p {
+      font-size: 18px;
+      color: #000;
+      padding: 0 0 20px 0;
+      span {
+        display: inline-block;
+        width: 50%;
+      }
+    }
+    p:first-child {
+      padding: 20px 0;
+    }
+    p:first-child span:first-child {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+}
+.down {
+  margin: 30px 0 0 0;
+  border-top: 1px dashed red;
+  padding: 20px;
+  div {
+    padding: 0 0 15px 0;
+    font-size: 18px;
+    p {
+      padding: 0 0 10px 0;
+    }
+    span {
+      display: inline-block;
+      width: 50%;
+    }
+    p:last-child {
+      text-indent: 1rem;
+    }
+  }
+  div:last-child .profile {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 6;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    padding: 0 0 0px 0;
+    text-indent: 2rem;
+  }
+  div:last-child .profile1 {
+    overflow: none;
+    text-indent: 2rem;
+  }
+  div:last-child .el-button {
+    float: right;
+  }
+}
+</style>

src/views/direct.vue

@@ -169,7 +169,28 @@
                   </el-col>
                 </el-tab-pane>
                 <el-tab-pane label="找专家">
-                  找专家
+                  <el-col :span="24" class="two">
+                    <el-col :span="12" class="twoList" v-for="(item, index) in expertList" :key="index">
+                      <el-col :span="4" class="image">
+                        <el-image :src="item.imgpath"></el-image>
+                      </el-col>
+                      <el-col :span="20" class="info">
+                        <p>
+                          <span class="textOver">{{ item.name }}</span>
+                          <el-button size="mini" type="primary" @click="twoBtnDetail(item)">详情</el-button>
+                        </p>
+
+                        <p>
+                          <span>性别:{{ item.gender }}</span>
+                          <span>民族:{{ item.nation }}</span>
+                        </p>
+                        <p>
+                          <span>职务:{{ item.position }}</span>
+                          <span>从事领域:{{ item.field }}</span>
+                        </p>
+                      </el-col>
+                    </el-col>
+                  </el-col>
                 </el-tab-pane>
               </el-tabs>
             </el-col>
@@ -229,6 +250,9 @@
     <el-dialog title="信息详情" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
       <directDetail :directInfo="directInfo"></directDetail>
     </el-dialog>
+    <el-dialog title="专家信息" :visible.sync="dialogExport" width="50%" :before-close="handleCloseExport">
+      <exportDetail :exportInfo="exportInfo"></exportDetail>
+    </el-dialog>
   </div>
 </template>
 
@@ -236,6 +260,7 @@
 import liveFoot from '@/layout/live/foot.vue';
 import chat from '@/components/parts/chat.vue';
 import directDetail from '@/layout/direct/directDetail.vue';
+import exportDetail from '@/layout/direct/exportDetail.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
 const { mapActions: market } = createNamespacedHelpers('market');
@@ -259,12 +284,17 @@ export default {
   components: {
     chat,
     liveFoot,
-    directDetail,
+    directDetail, //技术，产品，服务详情
+    exportDetail, //专家详情
   },
   data: () => ({
     // 详情显示
     dialogVisible: false,
+    // 技术，产品，服务详情
     directInfo: {},
+    // 专家详情
+    dialogExport: false,
+    exportInfo: {},
     // 找技术
     jishulist: [],
     // 找产品
@@ -401,7 +431,7 @@ export default {
     btnDirectDetail() {
       this.$router.push({ path: '/live/hallDetail', query: { id: this.$route.query.id } });
     },
-    // 技术详情
+    // 技术,产品，服务详情
     oneBtnDetail(data) {
       this.dialogVisible = true;
       this.$set(this, `directInfo`, data);
@@ -414,6 +444,19 @@ export default {
         })
         .catch(_ => {});
     },
+    // 专家详情
+    twoBtnDetail(data) {
+      this.dialogExport = true;
+      this.$set(this, `exportInfo`, data);
+    },
+    // 关闭专家详情
+    handleCloseExport(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
   },
   computed: {
     pageTitle() {
@@ -427,6 +470,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.textOver {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .w_1200 {
   margin: 0 auto;
   width: 1200px;
@@ -782,6 +830,41 @@ export default {
       }
     }
   }
+  .two {
+    padding: 15px;
+    .twoList {
+      box-shadow: 0 0 3px red;
+      margin-bottom: 15px;
+      padding: 15px;
+      .image {
+        border-radius: 90px;
+        .el-image {
+          border-radius: 90px;
+        }
+      }
+      .info {
+        font-size: 16px;
+        padding: 0 15px;
+        .el-button {
+          float: right;
+        }
+        p {
+          float: left;
+          width: 100%;
+          height: 30px;
+          line-height: 30px;
+          span {
+            display: inline-block;
+            width: 50%;
+          }
+        }
+        p:first-child {
+          font-size: 18px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
 }
 /deep/.el-tabs--border-card > .el-tabs__content {
   padding: 0;