web-test/src/views/hall/direct.vue

<template>
  <div id="hall" style="background-color: #fff">
    <el-row>
      <el-col :span="24">
        <div class="livetop">
          <div class="w_1200">
            <el-col :span="24" class="title">
              {{ dockInfo.title }}
            </el-col>
            <el-col :span="24" class="zhuban">
              <span>主办方:</span>
              <span>{{ dockInfo.sponsor }}</span>
            </el-col>
            <el-col :span="24" class="num">
              <p>
                <span>同时在线</span>
                <span>{{ statNum.tszx || 0 }}人</span>
              </p>
              <p>
                <span>特邀嘉宾</span>
                <span>{{ statNum.tyjb || 0 }}人</span>
              </p>
              <p>
                <span>洽谈合作</span>
                <span>{{ statNum.qthz || 0 }}项</span>
              </p>
              <p>
                <span>达成意愿</span>
                <span>{{ statNum.dcyx || 0 }}项</span>
              </p>
              <p>
                <span>交易完成</span>
                <span>{{ statNum.jywc || 0 }}项</span>
              </p>
              <p>
                <span>参展项目</span>
                <span>{{ statNum.czxm || 0 }}项</span>
              </p>
            </el-col>
          </div>
        </div>
        <div class="w_1200">
          <el-col :span="24" class="livemain">
            <!-- 直播，交易实况 -->
            <el-col :span="24" class="livevideo">
              <!-- 视频左侧 -->
              <el-col :span="12" class="left">
                <el-col :span="24" class="lefttop">
                  <el-col :span="4" class="lefttopleft">
                    <span style="color: rgb(255, 132, 0);">视频</span>
                    <span>直播</span>
                  </el-col>
                  <el-col :span="20" class="lefttopright">
                    <p class="textOver">{{ dockInfo.title }}</p>
                  </el-col>
                </el-col>
                <el-col :span="24" :class="[dockInfo.room_id == '1006' ? 'leftvideos' : 'leftvideo']">
                  <span v-if="dockInfo.room_id == '1006'">
                    <!-- <div class="h5video" id="videoDiv" style="height:400px;"></div> -->
                    <div id="videoDiv" class="h5video active"></div>
                  </span>
                  <span v-else>
                    <el-col :span="24" class="videoTop">
                      <video :src="videoPath" autoplay="autoplay" controls="controls" v-if="videoData != ''" loop="loop">
                        您的浏览器不支持 video 标签。
                      </video>
                      <div class="videointro" v-else>
                        <p>{{ dockInfo.title }}</p>
                      </div>
                    </el-col>
                    <el-col :span="24" class="videoDown">
                      <swiper :list="videoData" :options="options">
                        <template v-slot="{ index, item }">
                          <p :class="`${menuIndex == index ? 'indexClass' : 'videodata'}`" @click="changeMenu(index, item)">第{{ index + 1 }}辑</p>
                        </template>
                      </swiper>
                    </el-col>
                  </span>
                </el-col>
              </el-col>
              <!-- 视频右侧 -->
              <el-col :span="12" class="right">
                <el-tabs v-model="videoListtabs" type="card">
                  <el-tab-pane label="图文直播" name="first">
                    <imagetxtList></imagetxtList>
                  </el-tab-pane>
                  <el-tab-pane label="洽谈合作" name="second">
                    <trainList :list="trainoneList"></trainList>
                  </el-tab-pane>
                  <el-tab-pane label="达成意向" name="third">
                    <trainList :list="traintwoList"></trainList>
                  </el-tab-pane>
                  <el-tab-pane label="交易完成" name="fourth">
                    <trainList :list="trainthreeList"></trainList>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-col>
            <!-- 科技超市 -->
            <el-col :span="24" class="tabsData">
              <!-- 技术成果，科技需求，专家智库 -->
              <el-tabs type="border-card" @tab-click="handleClick">
                <el-tab-pane label="技术成果">
                  <el-col :span="24" class="one">
                    <el-col :span="24" class="demandList">
                      <el-col :span="24" class="topList">
                        <el-col :span="4" class="list" v-for="(item, index) in demandList" :key="index" @click.native="oneBtnDetail(item)">
                          <el-image :src="achievezb"></el-image>
                          <el-col :span="24" class="company textOver">
                            {{ item.company }}
                          </el-col>
                          <el-col :span="24" class="aName textOver">
                            {{ item.name }}
                          </el-col>
                          <el-col :span="24" class="a-brief">{{ item.achievebrief }}</el-col>
                          <el-col :span="24" class="cont">
                            <el-col :span="24" class="a-field">领域：{{ item.field }}</el-col>
                            <el-col :span="24" class="a-contacts">联系人：{{ item.contacts }}</el-col>
                          </el-col>
                          <el-col :span="24" class="clickBtn">
                            <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
                            <el-button
                              size="mini"
                              type="success"
                              @click="
                                $router.push({
                                  path: '/live/hall/dock/dockDetail',
                                  query: { id: item._id, dockid: dock_id, user_id: user_id, type: item.type },
                                })
                              "
                              >对接</el-button
                            >
                          </el-col>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="btn">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '技术成果', dockid: dock_id } })"
                          v-if="demandList.length > 6"
                          >查看所有项目</el-button
                        >
                      </el-col>
                    </el-col>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="科技需求">
                  <el-col :span="24" class="one">
                    <el-row class="jishulist">
                      <el-col :span="24" class="topList">
                        <el-col :span="24" class="list" v-for="(item, index) in jishulist" :key="index">
                          <el-col :span="16" class="name">
                            <p>
                              <span class="inname"> {{ item.name }}</span>
                            </p>
                          </el-col>
                          <el-col :span="4" class="names">
                            <p>
                              <span>
                                所属领域：
                                {{ item.field }}</span
                              >
                            </p>
                          </el-col>
                          <el-col :span="4" class="click">
                            <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
                            <el-button
                              size="mini"
                              type="success"
                              @click="
                                $router.push({
                                  path: '/live/hall/dock/dockDetail',
                                  query: { id: item._id, dockid: dock_id, user_id: user_id, type: item.type },
                                })
                              "
                              >对接</el-button
                            >
                          </el-col>
                        </el-col>
                      </el-col>
                      <el-col :span="24" class="btn">
                        <el-button
                          type="primary"
                          size="mini"
                          @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '科技需求', dockid: dock_id } })"
                          v-if="jishulist.length > 10"
                          >查看所有项目</el-button
                        >
                      </el-col>
                    </el-row>
                  </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.expertimage" style="width:70px;height: 70px;border: 1px solid #f1f1f1;" v-if="item.expertimage != ''"></el-image>
                        <el-image :src="expertimage" style="width:70px;height: 70px;border: 1px solid #f1f1f1;" v-else></el-image>
                      </el-col>
                      <el-col :span="20" class="info">
                        <el-col :span="16" class="name textOver">
                          {{ item.name }}
                        </el-col>
                        <el-col :span="8">
                          <el-button size="mini" type="primary" @click="twoBtnDetail(item)" style="margin:0 5px 0 5px">详情</el-button>
                          <el-button
                            size="mini"
                            type="success"
                            @click="$router.push({ path: '/live/hall/dock/zhanjiaduijie', query: { id: item._id, dockid: dock_id, user_id: user_id } })"
                            >对接</el-button
                          >
                        </el-col>
                        <el-col :span="24" class="txt textOver"> {{ item.zwzc || '暂无' }} </el-col>
                        <el-col :span="24" class="txt textOver"> {{ item.company || '暂无' }} </el-col>
                      </el-col>
                    </el-col>
                    <el-col :span="24" class="onmore">
                      <el-button
                        v-if="expertList.length >= 8"
                        type="primary"
                        size="mini"
                        @click="$router.push({ path: '/hall/productList/expertList', query: { dockid: dock_id, user_id: user_id } })"
                        >查看所有项目</el-button
                      >
                    </el-col>
                  </el-col>
                </el-tab-pane>
              </el-tabs>
              <!-- 搜索 -->
              <el-col :span="24" class="marketPublish">
                <el-col :span="18"> <el-input v-model="name" placeholder="请输入名称" style="height:30px" class="newinput"></el-input></el-col>
                <el-col :span="6"><el-button class="btnSearch" size="mini" @click="resetForm(name)">查询</el-button></el-col>
              </el-col>
            </el-col>
            <!-- 图片分割 -->
            <el-col :span="24">
              <el-image :src="two" style="width:100%;height:100px;position:relative;"> </el-image>
            </el-col>
            <!-- 嘉宾访谈，项目路演，公共聊天 -->
            <el-col :span="24" class="fangtan">
              <el-col :span="7" class="jiabin">
                <p class="jiabintop">
                  <span>嘉宾访谈</span>
                </p>
                <div class="jiabinlist">
                  <ul>
                    <li
                      v-for="(ref, index) in zxzdlist"
                      :key="index"
                      @click="$router.push({ path: '/hall/zxzdxmly/zxzdDetail', query: { id: ref.id, dock_id: dock_id } })"
                    >
                      <img :src="ref.picture" />
                      <p>
                        <span class="textOver">{{ ref.title }}</span>
                        <span>{{ ref.publish_time }}</span>
                        <span class="text">{{ ref.titlejj }} </span>
                      </p>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="7" class="jiabin luyan">
                <p class="jiabintop luyanTop">
                  <span>项目路演</span>
                </p>
                <div class="luyanList">
                  <ul>
                    <li
                      v-for="(item, index) in xmlylist"
                      :key="index"
                      @click="$router.push({ path: '/hall/zxzdxmly/xmlyDetail', query: { id: item.id, dock_id: dock_id } })"
                    >
                      <p>
                        <span class="textOver">{{ item.title }}</span>
                        <span>时间:{{ item.publish_time }}</span>
                      </p>
                      <p>
                        {{ item.titlejj }}
                      </p>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="7" class="chat">
                <chat></chat>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
      <!-- 底部信息 -->
      <div class="pz_down">
        <live-foot></live-foot>
      </div>
    </el-row>
    <!-- 个人中心 -->
    <el-col :span="24" class="nameShow">
      <div class="w_1200">
        <el-col :span="24" v-if="this.user.uid">
          <span>{{ user.name }}</span>
          <el-button
            type="info"
            size="mini"
            v-if="this.user.role == '4' || this.user.role == '5' || this.user.role == '6' || this.user.role == '7'"
            @click="$router.push({ path: '/userCenter/index', query: { num: 1 } })"
            >个人中心</el-button
          >
          <el-button type="info" size="mini" v-else-if="this.user.role == '3'" @click="$router.push({ path: '/adminCenter/index', query: { num: 1 } })"
            >管理中心</el-button
          >
          <el-button type="info" size="mini" v-else-if="this.user.role == '8'" @click="$router.push({ path: '/vipCenter/index', query: { num: 1 } })"
            >管理中心</el-button
          >
        </el-col>
      </div>
    </el-col>
    <!-- 科技超市信息详情 -->
    <el-dialog title="信息详情" :visible.sync="dialogVisible" width="55%" :before-close="handleClose">
      <directDetail :directInfo="directInfo"></directDetail>
    </el-dialog>
    <el-dialog title="专家信息" :visible.sync="dialogExport" width="60%" :before-close="handleCloseExport">
      <expeDetail :detailInfo="exportInfo" :displayBtn="displayBtn"></expeDetail>
    </el-dialog>
  </div>
</template>

<script>
// 底部信息
import liveFoot from '@/layout/live/foot.vue';
// 聊天
import chat from '@/components/parts/chat.vue';
// 技术，产品，服务详情
import directDetail from '@/layout/direct/directDetail.vue';
// 专家
import expeDetail from '@/views/market/detail/expeDetail.vue';
// 正在洽谈，达成意向，交易完成
import trainList from './parts/trainList.vue';
// 图文直播
import imagetxtList from './parts/imagetxtList.vue';
import swiper from '@c/swiper-frame.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: market } = createNamespacedHelpers('market');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
const { mapActions: transaction } = createNamespacedHelpers('transaction');
const { mapActions: newsguidance } = createNamespacedHelpers('newsguidance');
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');

import moment from 'moment';
import _ from 'loadsh';
export default {
  name: 'hall',
  props: {},
  components: {
    liveFoot, //底部信息
    chat, //聊天
    directDetail, //技术，产品，服务详情
    expeDetail, //专家详情
    trainList, //交易列表
    imagetxtList, //图文直播
    swiper,
  },
  data: () => ({
    // 对接会详情
    dockInfo: {},
    //对接会创建人id
    user_id: '',
    name: '',
    dock_id: '',
    // 统计数字
    statNum: {},
    // 视频管理
    menuIndex: '0',
    videoData: [],
    videoPath: '',
    // 视频右侧聊天列表
    videoListtabs: 'first',
    trainoneList: [],
    traintwoList: [],
    trainthreeList: [],
    // 科技超市
    jishulist: [],
    demandList: [],
    serviceList: [],
    expertList: [],
    // 搜索
    panduan: '找技术',
    // 信息详情
    dialogVisible: false,
    directInfo: {},
    dialogExport: false,
    exportInfo: {},
    displayBtn: false,
    achievezb: require('@/assets/3.png'),
    expertimage: require('@/assets/live/222.png'),
    //  使用手册图片
    two: require('@/assets/live/top_bg.png'),
    // 嘉宾访谈
    zxzdlist: [],
    // 路演
    xmlylist: [],
    options: {
      slidesPerView: 7,
      spaceBetween: 10,
      // 分页
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    },
  }),

  async created() {
    this.$set(this, `dock_id`, this.$route.query.id);
    await this.searchdock();
    await this.seachtVideo();
    this.$nextTick(() => {
      this.searchLive();
    });
  },
  methods: {
    searchLive() {
      let rmtpUrl = `${process.env.VUE_APP_LIVE_URL + this.dockInfo.room_id}`;
      setTimeout(function() {
        var videoObjects = {
          container: '#videoDiv',
          variable: 'player',
          autoplay: true,
          live: true,
          video: rmtpUrl,
        };
        let player = new ckplayer(videoObjects);
      }, 2);
    },
    // 展会
    ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
    // 用户
    ...market({ marketFetch: 'fetch', operaFetch: 'operaFetch', sendMsg: 'operationCreate', operaQuery: 'operaQuery' }),
    // 专家
    ...expertsuser({ expertQuery: 'query' }),
    // 产品
    ...mapProduct({ mapProductQuery: 'newquery' }),
    // 交易记录
    ...transaction({ tquery: 'query' }),
    // 嘉宾访谈
    ...newsguidance({ danceQuery: 'query' }),
    // 项目路演
    ...newsroadshow({ adshowQuery: 'query' }),
    // 查询详情
    async searchdock() {
      // 对接会详情
      let res = await this.dockFetch(this.dock_id);
      if (this.$checkRes(res)) {
        this.$set(this, `dockInfo`, res.data);
        this.$set(this, `user_id`, res.data.user_id);
      }
      // 参展项目
      let czxm = res.data.apply.map(item => item.goodsList);
      czxm = _.flattenDeep(czxm);
      var czxmNew = czxm.filter(item => item.dockStatus == '1');
      this.$set(this.statNum, `czxm`, czxmNew.length);
      // 技术
      var jishuData = czxmNew.filter(item => item.type === '0');
      this.$set(this, `jishulist`, jishuData);
      // 成果
      var chanpinData = czxmNew.filter(item => item.type === '1');
      if (chanpinData) this.$set(this, `demandList`, chanpinData);
      // 专家
      let exportdata = await this.expertQuery({ role: 6, limit: 8 });
      if (this.$checkRes(exportdata)) {
        this.$set(this, `expertList`, exportdata.data);
        // 特邀嘉宾
        this.$set(this.statNum, `tyjb`, exportdata.total);
      }
      // 正在洽谈
      let qthe = await this.tquery({ status: 0, dockid: this.id });
      this.$set(this, `trainoneList`, qthe.data);
      // 洽谈数
      this.$set(this.statNum, `qthz`, qthe.total);
      // 达成意向
      let dcyx = await this.tquery({ status: 1, dockid: this.id });
      this.$set(this, `traintwoList`, dcyx.data);
      // 意向数
      this.$set(this.statNum, `dcyx`, dcyx.total);
      // 交易完成
      let jywc = await this.tquery({ status: 2, dockid: this.id });
      this.$set(this, `trainthreeList`, jywc.data);

      // 完成数
      this.$set(this.statNum, `jywc`, jywc.total);
      // 同时在线数
      let tszx = await this.operaQuery({ type: '0' });
      if (tszx) this.$set(this.statNum, `tszx`, tszx.total);
      // 嘉宾访谈，项目路演
      let zxzd = await this.danceQuery({ dock_id: this.dock_id });
      this.$set(this, `zxzdlist`, zxzd.data);
      let xmly = await this.adshowQuery({ dock_id: this.dock_id });
      this.$set(this, `xmlylist`, xmly.data);

      // //交易实况
      // let jysk = await this.tquery({ dockid: this.id });
      // let newjysk = jysk.data.filter(f => f.status == '1' || f.status == '2');
      // for (const val of newjysk) {
      //   var time = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
      //   val.time = time;
      // }
      // console.log(newjysk);
      // 登录情况+交易情况
      // let jioayi = await this.operaFetch({ dockid: this.dock_id });
      // for (const val of jioayi.data) {
      //   var date = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
      //   val.date = date;
      // }
      // console.log(jioayi.data);
    },
    // 科技超市查询
    async resetForm(name) {
      if (this.panduan == '找技术') {
        if (name) {
          let jishu = await this.goodsquery({ name: name });
          this.$set(this, `jishulist`, jishu.data);
        } else {
          this.searchdock();
        }
      } else if (this.panduan == '找产品') {
        if (name) {
          let chanpin = await this.goodsquery({ name: name });
          this.$set(this, `demandList`, chanpin.data);
        } else {
          this.searchdock();
        }
      } else if (this.panduan == '找服务') {
        if (name) {
          let service = await this.goodsquery({ name: name });
          this.$set(this, `serviceList`, service.data);
        } else {
          this.searchdock();
        }
      } else if (this.panduan == '找专家') {
        if (name) {
          var filterdata = this.expertList.filter(item => item.name === name);
          this.$set(this, `expertList`, filterdata);
        } else {
          this.searchdock();
        }
      }
    },
    //技术，成果，专家
    handleClick(tab, event) {
      if (event.target.getAttribute('id') == 'tab-0') this.panduan = '找技术';
      else if (event.target.getAttribute('id') == 'tab-1') this.panduan = '找产品';
      else if (event.target.getAttribute('id') == 'tab-2') this.panduan = '找服务';
      else if (event.target.getAttribute('id') == 'tab-3') this.panduan = '找专家';
    },
    // 信息详情
    oneBtnDetail(data) {
      this.dialogVisible = true;
      this.$set(this, `directInfo`, data);
    },
    handleClose(done) {
      done();
    },
    // 专家详情
    twoBtnDetail(data) {
      this.dialogExport = true;
      this.$set(this, `exportInfo`, data);
    },
    handleCloseExport(done) {
      done();
    },
    // 视频管理
    async seachtVideo() {
      let res = await this.dockFetch(this.dock_id);
      if (this.$checkRes(res)) {
        this.$set(this, `videoData`, res.data.videodata);
        this.changeMenu('0', this.videoData[0]);
      }
    },
    channelvideo() {
      this.$stomp({
        [`/exchange/dock_video/${this.dock_id}`]: this.onMessageVideo,
      });
    },
    onMessageVideo(message) {
      let arr = JSON.parse(message.body);
      this.$set(this, `videoData`, arr);
      let num = this.videoData.length - 1;
      let newarr = _.last(arr);
      this.changeMenu(num, newarr);
    },
    changeMenu(index, item) {
      if (item) {
        this.menuIndex = index;
        this.$set(this, `videoPath`, item.file_path);
      }
    },
  },
  mounted() {
    this.channelvideo();
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
// 头部
.livetop {
  width: 100%;
  height: 487px;
  overflow: hidden;
  background-image: url('~@/assets/live/top_3.png');
  .title {
    text-align: center;
    color: #fff;
    position: relative;
    width: 100%;
    font-size: 45px;
    top: 65px;
  }
  .zhuban {
    text-align: center;
    color: #fff;
    position: relative;
    width: 100%;
    font-size: 25px;
    top: 140px;
    span:first-child {
      font-weight: 700;
    }
  }
  .num {
    position: relative;
    top: 190px;
    color: #fff;
    p {
      float: left;
      width: 15%;
      background: #fff;
      margin: 0 14px 0 0 !important;
      color: #000;
      height: 50px;
      line-height: 50px;
      border-radius: 30px;
      span:first-child {
        display: inline-block;
        width: 56%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        background: red;
        border-radius: 30px;
        color: #fff;
        font-weight: 700;
      }
      span:last-child {
        display: inline-block;
        width: 42%;
        text-align: center;
        font-size: 15px;
        font-weight: 700;
      }
    }
  }
}
// 直播
.livemain {
  position: relative;
  top: -55px;
  z-index: 999;
  .livevideo {
    height: 470px;
    overflow: hidden;
    .left {
      height: 470px;
      overflow: hidden;
      border: 5px solid #000;
      background: #fff;
      border-radius: 5px;
      margin: 0 15px 0 0;
      .lefttop {
        padding: 0 10px;
        height: 60px;
        .lefttopleft {
          height: 60px;
          line-height: 40px;
          font-size: 20px;
          font-weight: 700;
        }
        .lefttopright {
          height: 60px;
          line-height: 65px;
          font-weight: bolder;
          -webkit-text-stroke: 1px #6e042c;
          -webkit-text-fill-color: #fff;
          letter-spacing: 3px;
          font-size: 20px;
        }
      }
      .h5video {
        height: 400px;
      }
      .leftvideo {
        height: 410px;
        overflow: hidden;
        .videoTop {
          height: 360px;
          overflow: hidden;
          video {
            width: 100%;
            height: 360px;
            background: #000;
          }
          .videointro {
            height: 360px;
            text-align: center;
            background-image: url('~@/assets/directBack.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            p {
              font-size: 30px;
              color: #fff;
              padding: 50px 0;
            }
          }
        }
        .videoDown {
          height: 40px;
          overflow: hidden;
          border: 1px solid #ccc;
          .videodata {
            border-radius: 10px;
            background: #cccccc8f;
            height: 39px;
            line-height: 39px;
            text-align: center;
            // margin: 0 5px;
            font-weight: bold;
          }
          .videodata:hover {
            cursor: pointer;
            color: #fff;
            background: #409eff;
          }
          .indexClass {
            border-radius: 10px;
            height: 39px;
            line-height: 39px;
            text-align: center;
            // margin: 0 5px;
            font-weight: bold;
            color: #fff;
            background: #409eff;
          }
        }
      }
      .leftvideos {
        height: 400px;
        overflow: hidden;
        .videoTop {
          height: 360px;
          overflow: hidden;
          video {
            width: 100%;
            height: 360px;
            background: #000;
          }
          .videointro {
            height: 360px;
            text-align: center;
            background-image: url('~@/assets/directBack.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            p {
              font-size: 30px;
              color: #fff;
              padding: 50px 0;
            }
          }
        }
        .videoDown {
          height: 40px;
          overflow: hidden;
          border: 1px solid #ccc;
          .videodata {
            border-radius: 10px;
            background: #cccccc8f;
            height: 39px;
            line-height: 39px;
            text-align: center;
            // margin: 0 5px;
            font-weight: bold;
          }
          .videodata:hover {
            cursor: pointer;
            color: #fff;
            background: #409eff;
          }
          .indexClass {
            border-radius: 10px;
            height: 39px;
            line-height: 39px;
            text-align: center;
            // margin: 0 5px;
            font-weight: bold;
            color: #fff;
            background: #409eff;
          }
        }
      }
    }
    .right {
      width: 48%;
      height: 468px;
      overflow: hidden;
      background: #f0ffff5f;
      box-shadow: 0 0 5px #409eff;
      border-radius: 5px;
    }
    /deep/.el-tabs--card > .el-tabs__header {
      border-bottom: none;
    }
    /deep/.el-tabs__header {
      margin: 0;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
      border-bottom: none;
      border-left: none;
    }
    /deep/.el-tabs--card > .el-tabs__header .el-tabs__nav {
      border: none;
    }
    /deep/.el-tabs__item {
      font-weight: 700;
      font-size: 16px;
      color: #fff;
    }
    /deep/.el-tabs__item.is-active {
      color: #ff0000;
    }
    /deep/.el-tabs__nav-scroll {
      background-color: #fe950e;
    }
  }
}
// 科技超市
.tabsData {
  position: relative;
  height: 510px;
  margin: 20px 0;
  .one {
    height: 467px;
    padding: 0 15px;
    overflow: hidden;
    // 产品
    .jishulist {
      .topList {
        height: 430px;
        overflow: hidden;
        .list {
          border-bottom: 1px dashed #ccc;
          padding: 6px 0;
          .name {
            height: 30px;
            line-height: 30px;
            p:first-child {
              font-size: 16px;
              // display: inline-block;
              width: 700px;
              display: block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .names {
            height: 30px;
            line-height: 30px;
            p:first-child {
              font-size: 14px;
              display: inline-block;
              width: 300px;
              overflow: hidden;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
            }
          }

          .click {
            height: 30px;
            line-height: 30px;
            text-align: center;
          }
        }
      }
      .btn {
        margin: 6px 0 0 0;
        text-align: center;
      }
    }
    // 技术
    .demandList {
      .topList {
        height: 430px;
        overflow: hidden;
        .list {
          height: 215px;
          position: relative;
          margin: 5px 10px 0px 9px;
          width: 15%;
          .el-image {
            width: 100%;
            height: 205px;
            overflow: hidden;
            // border-radius: 5px;
            // transition: all 0.4s linear;
            position: relative;
          }
          .company {
            position: absolute;
            top: 3px;
            left: 20px;
            width: 86%;
            color: #ec6c2d;
            -webkit-text-stroke: 1px #f18d2c;
            font-style: oblique;
            -webkit-text-fill-color: #ec6c2d;
            letter-spacing: 3px;
          }
          .aName {
            position: absolute;
            top: 30px;
            left: 0px;
            text-align: center;
            transform: scale(0.8);
            font-weight: bolder;
            -webkit-text-stroke: 1px #f18d2c;
            font-style: oblique;
            -webkit-text-fill-color: transparent;
            letter-spacing: 3px;
          }
          .a-brief {
            margin: 10px 0px;
            position: absolute;
            top: 30px;
            left: 0px;
            overflow: hidden;
            line-height: 20px;
            letter-spacing: 2px;
            text-overflow: ellipsis;
            -webkit-line-clamp: 5;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            transform: scale(0.8);
          }
          .cont {
            position: absolute;
            left: 0px;
            bottom: 50px;
            transform: scale(0.8);
            .a-field {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .clickBtn {
            position: relative;
            top: -38px;
            text-align: center;
            /deep/.el-button {
              padding: 5px 10px;
            }
          }
        }
      }
      .btn {
        text-align: center;
        margin: 6px 0 0 0;
      }
    }
  }
  .two {
    padding: 15px 15px 0 15px;
    height: 466px;
    overflow: hidden;
    .twoList {
      box-shadow: 0 0 3px #cccccc;
      margin-bottom: 10px;
      padding: 10px 5px;
      .image {
        border-radius: 90px;
        .el-image {
          border-radius: 90px;
        }
      }
      .info {
        .name {
          font-size: 18px;
        }
        .txt {
          font-size: 16px;
        }
      }
    }
  }
  /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-weight: bold;
    font-size: 16px;
    background-color: #6e042c;
    color: #fff;
  }
  /deep/.el-tabs__item {
    font-size: 16px;
  }
  /deep/.el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }
  // 搜索
  .marketPublish {
    position: absolute;
    top: 42.2%;
    width: 286px;
    z-index: 999;
    left: 72%;
    top: 1%;
    text-align: center;
    font-size: 18px;
    color: #fff;
    /deep/.el-input__inner {
      -webkit-appearance: none;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      font-size: inherit;
      height: 30px;
      line-height: 12px;
      outline: 0;
      padding: 0 15px;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      width: 100%;
    }
  }
  // 查看更多
  .onmore {
    text-align: center;
  }
}
// 嘉宾访谈,项目路演,聊天
.fangtan {
  height: 525px;
  overflow: hidden;
  .jiabin {
    width: 31%;
    border-radius: 5px;
    box-shadow: 0 0 5px #c20808;
    padding: 0 10px 0px 10px;
    margin: 4px 15px 0 3px;
    height: 515px;
    .jiabintop {
      height: 30px;
      line-height: 30px;
      span {
        display: inline-block;
        padding: 0 10px;
        height: 30px;
        color: #fff;
        background-color: #ff8500;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      a {
        float: right;
      }
    }
    .jiabinlist ul {
      float: left;
      width: 100%;
      height: 475px;
      overflow: auto;
      li {
        float: left;
        width: 100%;
        border-bottom: 1px dashed #ff8500;
        padding: 16px 0;
        img {
          float: left;
          width: 20%;
          height: 80px;
        }
        p {
          float: left;
          width: 71%;
          padding: 0 0 0 10px;
          span:first-child {
            float: left;
            width: 70%;
            font-size: 18px;
          }
          span:first-child:hover {
            cursor: pointer;
          }
          span:last-child {
            float: left;
            width: 100%;
            font-size: 14px;
            color: #888;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
      li:last-child {
        border-bottom: none;
        float: left;
        width: 100%;
      }
      li:hover p span:first-child {
        color: #0e90d2;
      }
    }
  }
  .luyan {
    width: 33%;
    border-radius: 5px;
    box-shadow: 0 0 5px #c20808;
    padding: 0 10px 0px 10px;
    margin: 4px 10px 0 3px;
    height: 515px;
    overflow: hidden;
    .luyanList {
      padding: 10px 0 0 0;
      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        float: left;
        width: 100%;
        height: 450px;
        overflow-y: auto;
        overflow-x: hidden;
        li {
          float: left;
          border-radius: 10px;
          padding: 5px;
          margin: 0 0 12px 0;
          height: 95px;
          border: 1px solid #ff8500;
          width: 95%;
          p:first-child span:first-child {
            font-size: 18px;
            float: left;
            width: 70%;
            height: 30px;
            line-height: 30px;
          }
          p:first-child span:first-child:hover {
            cursor: pointer;
            color: #0279d5;
          }
          p:first-child span:last-child {
            float: left;
            width: 30%;
            height: 30px;
            line-height: 30px;
          }
          p:last-child span {
            float: left;
            width: 100%;
            padding: 5px 0;
            font-size: 14px;
            color: #666;
          }
        }
        li:nth-child(5) {
          border: 1px solid #ff8500;
          float: left;
          border-radius: 10px;
          padding: 5px 10px;
          margin: 0 0 22px 0;
          height: 95px;
        }
        li:hover {
          box-shadow: 0 0 5px red;
        }
      }
    }
  }
  .chat {
    float: left;
    width: 33%;
  }
}
// 头部个人中心
.nameShow {
  position: fixed;
  top: 15px;
  text-align: right;
  z-index: 999;
  span {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 0 10px;
  }
}
// dialog样式
/deep/.el-dialog__body {
  padding: 20px;
}
</style>