web-test/src/views/halltwo/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <div class="w_1200">
            <el-col :span="20" class="left">
              <el-col :span="24" class="leftone">
                <span>科技成果展洽会</span>
                <span>欢迎您</span>
              </el-col>
              <el-col :span="24" class="lefttwo">
                SCIENTIFIC AND TECHNOLOGICAL ACHIEVEEMENTS EXHIBITION
              </el-col>
            </el-col>
            <el-col :span="4" class="right">
              <el-link :underline="false">帮助中心</el-link>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="two">
          <div class="w_1200">
            <el-col :span="24" class="twotop">
              <p>{{ dockInfo.title }}</p>
              <el-image :src="two1" style="width:100%"></el-image>
              <el-image :src="url6" class="img1"></el-image>
            </el-col>
            <el-col :span="24" class="twocen">
              <el-col :span="15" class="left"> <span>主办单位：</span>{{ dockInfo.sponsor }} </el-col>
              <el-col :span="8" class="right">
                <el-button class="btn1" @click="back()">返回展会进行页</el-button>
                <el-button class="btn2">进入展会总结页</el-button>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="three">
          <div class="w_1200">
            <el-col :span="16" class="left">
              <el-col :span="24" class="summary">
                <p class="title">展会总结</p>
                <el-col :span="24">
                  <el-col :span="4" class="card1">到会人数</el-col>
                  <el-col :span="4" class="card1">0<span class="specail">人</span></el-col>
                  <el-col :span="4" class="card1">项目数</el-col>
                  <el-col :span="4" class="card1">0<span class="specail">项</span></el-col>
                  <el-col :span="4" class="card1">需求数</el-col>
                  <el-col :span="4" class="card1">0<span class="specail">项</span></el-col>
                  <el-col :span="4" class="card1">对接数</el-col>
                  <el-col :span="4" class="card1">0<span class="specail">次</span></el-col>
                  <el-col :span="4" class="card1">生产意向</el-col>
                  <el-col :span="4" class="card1">0<span class="specail">次</span></el-col>
                  <el-col :span="4" class="card1">达成意向</el-col>
                  <el-col :span="4" class="card1">0<span class="specail">次</span></el-col>
                </el-col>
                <el-col :span="24" class="artical">
                  <el-image :src="url1" style="width:784px;height:438px"></el-image>
                  <p class="text">
                    本次在线对接会共征集到符合展会要求的项目成果0项；其中来自于高校、研究机构的成果0项；专利项目0项；成熟度处于中试及产业化阶段的成果0项，同时还邀请到0所高校、研究机构，0位专家到参与在线对接。本次征集到的科技成果及专家的含金量都非常高。本次在线对接会还征集到技术需求0项。本次在线对接会共实现技术对接0次，产生意向0次，达成意向0次。此次展会还吸引了0多名访客的在线观摩，产生了强烈的反响。
                  </p>
                </el-col>
                <el-col :span="24" class="shool">
                  <el-col :span="24" class="tit">
                    <p>高校住所</p>
                  </el-col>
                  <el-col :span="24">
                    <el-image :src="url2" style="width:785px; height:593px"></el-image>
                  </el-col>
                </el-col>
                <el-col :span="24" class="tabs">
                  <!-- <el-col :span="10" class="search">
                    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select inpu1"></el-input>
                    <el-button class="btn1">快速搜索</el-button>
                  </el-col> -->
                  <el-tabs v-model="activeName">
                    <el-tab-pane label="参展项目" name="first">
                      <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="classifi" label="行业分类" width="180"> </el-table-column>
                        <el-table-column prop="name" label="项目名称" width="180"> </el-table-column>
                        <el-table-column prop="type" label="技术类型"> </el-table-column>
                        <el-table-column prop="mode" label="交易方式"> </el-table-column>
                      </el-table>
                      <el-col class="page1" :span="24">
                        <el-pagination
                          @current-change="handleCurrentChange2"
                          :current-page="currentPage2"
                          layout="total, prev, pager, next, jumper"
                          :total="total2"
                          :page-size="pageSize2"
                        >
                        </el-pagination>
                      </el-col>
                    </el-tab-pane>
                    <el-tab-pane label="参展需求" name="second">
                      <el-table :data="tableData1" stripe style="width: 100%">
                        <el-table-column prop="type" label="需求类别" width="180"> </el-table-column>
                        <el-table-column prop="name" label="需求名称" width="180"> </el-table-column>
                        <el-table-column prop="money" label="投入预算"> </el-table-column>
                        <el-table-column prop="site" label="所在地"> </el-table-column>
                      </el-table>
                      <el-col class="page1" :span="24">
                        <el-pagination
                          @current-change="handleCurrentChange1"
                          :current-page="currentPage1"
                          layout="total, prev, pager, next, jumper"
                          :total="total1"
                          :page-size="pageSize1"
                        >
                        </el-pagination>
                      </el-col>
                    </el-tab-pane>
                    <el-tab-pane label="技术专家" name="third">
                      <el-col :span="24" class="zj">
                        <el-col :span="12" class="zjInfo" v-for="(item, index) in expertList" :key="index">
                          <el-col :span="12" class="img">
                            <el-image :src="item.expertimage" style="width:100%;height:100%"></el-image>
                          </el-col>
                          <el-col :span="12" class="text">
                            <p class="name">{{ item.name }}</p>
                            <p>对接</p>
                            <p>查看院校项目</p>
                          </el-col>
                        </el-col>
                      </el-col>
                      <el-col class="page1" :span="24">
                        <el-pagination
                          @current-change="handleCurrentChange"
                          :current-page="currentPage"
                          layout="total, prev, pager, next, jumper"
                          :total="total"
                          :page-size="pageSize"
                        >
                        </el-pagination>
                      </el-col>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="8" class="right">
              <el-col :span="24" class="img">
                <el-image :src="url3" style="width:330px;height:218px"></el-image>
              </el-col>
              <el-col :span="24" class="brif">
                <p>公司简介</p>
                <el-col :span="24" class="box">
                  <h6><span>主</span>办单位</h6>
                  <p>长春市科学技术协会</p>
                  <p>长春市科技局</p>
                  <p>朝阳区政府</p>
                </el-col>
                <el-col :span="24" class="box">
                  <h6><span>承</span>办单位</h6>
                  <p>朝阳区科技局</p>
                  <p>吉林省环南湖科技创新政策先导区技术转移中心</p>
                </el-col>
                <el-col :span="24" class="box">
                  <h6><span>协</span>办单位</h6>
                  <p v-for="(item, index) in list" :key="index">{{ item.text }}</p>
                </el-col>
                <el-col :span="24" class="box">
                  <h6><span>技</span>术支持单位</h6>
                  <p>长春市福瑞科技有限公司</p>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="four">
          <div class="w_1200">
            <el-col :span="10" class="seek">
              <el-col :span="24" class="title">
                <p>专家咨询:</p>
              </el-col>
              <el-col :span="24" class="text">
                <p>工作日：08:30~17:00</p>
                <p>咨询电话：</p>
                <p>0431-81666508</p>
              </el-col>
            </el-col>
            <el-col :span="10" class="seek">
              <el-col :span="24" class="title">
                <p>业务联系:</p>
              </el-col>
              <el-col :span="24" class="text">
                <p>长春中科北斗工程技术有限公司</p>
                <p>联系人：刘经理</p>
                <p>电话：18604328977</p>
                <p>邮箱：18889898@qq.com</p>
              </el-col>
            </el-col>
            <el-col :span="4" class="seek">
              <el-col :span="24" class="title">
                <p>活动帮微信:</p>
              </el-col>
              <el-col :span="24" class="text">
                <el-image :src="url5" style="width:130px;height:130px"></el-image>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="footer">
          <div class="w_1200">
            <p class="text">
              <span>Copyright © 2007-2017 科 技成果展洽会 版权所有</span> <span>运营商：长春中科北斗工程技术有限公司</span><span>吉ICP备20002170号</span>
            </p>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');

export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'detail',
  props: {},
  components: {},
  data: function() {
    return {
      two1: require('@a/9.jpg'),
      two2: require('@a/dock2.png'),
      url1: require('@a/5.jpg'),
      url2: require('@a/6.jpg'),
      url3: require('@a/7.jpg'),
      url4: require('@a/sy_08.png'),
      url5: require('@a/8.jpg'),
      url6: require('@a/10.png'),

      // 展會詳情
      dockInfo: {},
      activeName: 'first',
      //参展项目列表
      tableData: [
        { classifi: '11111111111111111111111', name: '1111111111111111111111111111111', type: '11', mode: '11' },
        { classifi: '11', name: '1', type: '11', mode: '11' },
        { classifi: '11111111111111111111111', name: '1', type: '11', mode: '11' },
        { classifi: '11', name: '1', type: '11', mode: '11' },
        { classifi: '11111111111111111111111', name: '1', type: '11', mode: '11' },
      ],
      //参展需求
      tableData1: [
        { type: '11111111111111111111111', name: '1', money: '11', site: '11' },
        { type: '11111', name: '1', money: '11', site: '11' },
      ],
      //专家列表
      expertList: [],
      //协办单位列表
      list: [
        { text: '中国科学院长春分院' },
        { text: '中国科学院长春应用化学研究所' },
        { text: '中国科学院长春光学精密机械与物理研究所' },
        { text: '中国科学院东北地理与农业生态研究所' },
        { text: '吉林大学' },
        { text: '东北师范大学' },
        { text: '长春理工大学' },
        { text: '吉林农业大学' },
        { text: '长春工业大学' },
        { text: '吉林工程技术师范学院' },
        { text: '吉林省农业机械研究院' },
        { text: '长春博士联合会' },
      ],
      pageSize: 4,
      total: 0,
      currentPage: 1,
      input3: '',
      pageSize1: 10,
      total1: 0,
      currentPage1: 1,
      pageSize2: 10,
      total2: 0,
      currentPage2: 1,
    };
  },
  created() {
    this.searchInfo();
  },
  methods: {
    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
    ...expertsuser({ expertQuery: 'query', expertquery: 'expertquery' }),
    //查询信息
    async searchInfo({ skip = 0 } = {}) {
      if (this.id) {
        let res = await this.dockFetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `dockInfo`, res.data);
          console.log(this.dockInfo);
        }
      }
      //查询专家列表
      const res = await this.expertQuery({ skip, limit: 4 });
      if (this.$checkRes(res)) {
        this.$set(this, `expertList`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    //返回直播大厅
    back() {
      this.$router.push({ path: '/halltwo/directTwo', query: { id: this.id } });
    },
    handleCurrentChange(skip) {
      this.searchInfo({ skip });
    },
    handleCurrentChange1(skip) {
      // this.searchInfo({ skip });
      console.log(skip);
    },
    handleCurrentChange2(skip) {
      console.log(skip);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    height: 100px;
    .left {
      height: 100px;
      .leftone {
        margin: 15px 0 0 0;
        span:nth-child(1) {
          font-size: 35px;
          color: #535353;
          font-weight: bold;
          font-family: cursive;
        }
        span:nth-child(2) {
          font-size: 15px;
          padding: 0 10px;
          color: #535353;
        }
      }
      .lefttwo {
        font-size: 12px;
        color: #535353;
      }
    }
    .right {
      height: 100px;
      line-height: 100px;
      text-align: right;
    }
  }
  .two {
    height: 420px;
    padding: 20px 0;
    .twotop {
      margin: 0 0 10px 0;
      position: relative;
      p:nth-child(1) {
        position: absolute;
        left: 50%;
        top: 50%;
        z-index: 100000;
        font-size: 36px;
        transform: translate(-50%, -50%);
        color: gold;
        font-weight: bold;
      }
      .img1 {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 999;
      }
      .left {
        height: 357px;
        margin: 0 10px 0 0;
        background: url('~@/assets/dock1.png');
        p {
          float: left;
          width: 79%;
          font-size: 43px;
          color: #fff;
          font-weight: bold;
          padding: 13% 0 0 20px;
        }
        .el-image {
          float: left;
          width: 153px;
          height: 94px;
          margin: 4% 0 0 0;
        }
      }
      .right {
        background-color: #ffffff;
        width: 24%;
        height: 357px;
        text-align: center;
        padding: 0 10px;
        .el-image {
          width: 120px;
          height: 48px;
          margin: 50px 0 0px 0;
        }
        p:nth-child(2) {
          font-size: 18px;
          margin: 30px 0 5px 0;
        }
        p:nth-child(3) {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 30px;
        }
        p:nth-child(4) {
          background: #f5f5f5;
          padding: 20px 0px;
          border-radius: 5px;
          height: 50px;
        }
      }
      .right:hover {
        cursor: pointer;
        p:nth-child(3) {
          color: #535353;
        }
      }
    }
    .twocen {
      height: 130px;
      overflow: hidden;
      line-height: 130px;
      background-color: #f4f4f4;
      margin: 0 0 35px 0;
      .left {
        font-size: 18px;
        margin: 0 0 0 30px;
        span {
          font-size: 22px;
          font-weight: bold;
        }
      }
      .right {
        .btn1 {
          font-size: 16px;
          color: #fff;
          background: red;
          border: none;
          font-weight: bold;
        }
        .btn2 {
          font-size: 16px;
          color: #ff0000;
          border: 1px solid #ff0000;
          font-weight: bold;
        }
      }
    }
  }
  .three {
    .left {
      padding-right: 45px;
      border-right: 1px solid #ccc;
      .summary {
        .title {
          width: 130px;
          height: 40px;
          background: #2152cb;
          margin: 35px 0px;
          font-size: 22px;
          color: #fff;
          text-align: center;
          line-height: 40px;
        }
        .card1 {
          width: 120px;
          height: 70px;
          background-color: #2152cb;
          margin-right: 5px;
          margin-bottom: 5px;
          background: #fff4ba;
          color: #060606;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          line-height: 70px;
          .specail {
            color: red;
          }
        }
        .card1:nth-child(odd) {
          background: #ffe26d;
          color: #2152cb;
        }
        .artical {
          font-size: 15px;
          line-height: 26px;
          color: #070707;
          margin: 50px 0 40px 0;
          .text {
            text-indent: 2em;
            margin-top: 25px;
          }
        }
        .shool {
          .tit {
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
            padding: 0 10px;
            p:nth-child(1) {
              font-size: 18px;
              width: 100px;
              height: 36px;
              background: #2152cb;
              color: #fff;
              border-radius: 5px;
              text-align: center;
              line-height: 36px;
            }
          }
        }
        .tabs {
          margin-top: 30px;
          position: relative;
          .search {
            position: absolute;
            top: -8px;
            right: 0px;
            .btn1 {
              background: #2152cb;
              color: #fff;
              width: 80px;
              text-align: center;
              padding: 0px;
              height: 40px;
            }
          }
          .page1 {
            text-align: center;
            margin-top: 10px;
          }
          .zj {
            padding: 27px 10px;
            .zjInfo {
              padding: 20px 30px;
              .img {
                // width: 160px;
                height: 160px;
                overflow: hidden;
                border-radius: 5px;
              }
              .text {
                height: 160px;
                padding-left: 20px;
                .name {
                  font-size: 16px;
                  margin-top: 20px;
                }
                p:nth-child(2) {
                  width: 62px;
                  height: 26px;
                  border: 1px solid #ccc;
                  text-align: center;
                  line-height: 26px;
                  margin: 15px 0px 25px 0px;
                  background: #409eff;
                  border-radius: 5px;
                }
                p:nth-child(3) {
                  font-size: 14px;
                }
              }
            }
            .zjInfo:hover {
              box-shadow: 0 0 5px rgba(127, 126, 126, 0.3);
            }
          }
        }
      }
    }
    .right {
      padding-left: 40px;
      .img {
        margin-top: 80px;
      }
      .brif {
        font-size: 15px;
        line-height: 24px;
        color: #070707;
        margin-bottom: 20px;
        p:nth-child(1) {
          font-size: 18px;
          color: #2152cb;
          line-height: 40px;
          margin-bottom: 10px;
          font-weight: bold;
        }
        .box {
          padding: 20px 0;
          border-bottom: 1px solid #b3b3b3;
          font-size: 16px;
          line-height: 28px;
          text-align: right;
          h6 {
            font-weight: bold;
            font-size: 30px;
            position: relative;
            margin-bottom: 15px;
            text-align: left;
            line-height: 40px;
            margin-top: 0px;
            span {
              font-size: 36px;
              margin-right: 10px;
            }
          }
          h6::after {
            content: '';
            width: 20px;
            height: 12px;
            background: #2152cb;
            display: block;
            position: absolute;
            bottom: 5px;
            right: 0;
          }
        }
      }
    }
  }
  .four {
    border-top: 2px solid #305798;
    padding-top: 35px;
    margin-top: 50px;
    font-size: 14px;
    .seek {
      .title {
        position: relative;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 20px;
        img {
          width: 126px;
          height: 36px;

          position: absolute;
          top: -1px;
          left: 105px;
        }
      }
      .text {
        color: #4d4d4d;
        line-height: 28px;
        font-weight: normal;
        font-size: 14px;
      }
    }
  }
  .footer {
    height: 52px;
    background-color: #f2f2f2;
    .text {
      line-height: 52px;
      background: #f2f2f2;
      text-align: center;
      // margin-top: 30px;
      color: #4d4d4d;
      font-size: 14px;
      span {
        margin-left: 40px;
      }
      span:nth-child(1) {
        margin-left: 0px;
      }
    }
  }
}
/deep/.el-tabs__item.is-active {
  color: #0b0a0a;
  font-weight: bold;
}
/deep/.el-tabs__item {
  font-size: 14px;
  color: #333;
}
/deep/.el-tabs__active-bar {
  background-color: #2152cb;
}
/deep/.el-table .cell {
  color: #000;
  text-align: center;
}
/deep/ .inpu1 {
  width: 234px;
}
/deep/.el-table .cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
/deep/.el-table th.is-leaf {
  background-color: #e6e6e6;
}
</style>