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 v-if="">
                <el-col v-else-if="">
                  <el-col else> -->
            <el-col :span="24" class="title">
              <!-- 吉林省计算中心对接直播大厅 -->
              {{ title }}
            </el-col>
            <el-col :span="24" class="zhuban">
              <span>主办方:</span>
              <span>吉林省计算中心直播大厅</span>
            </el-col>
            <el-col :span="24" class="num">
              <p>
                <span>同时在线</span>
                <span>1人</span>
              </p>
              <p>
                <span>特邀嘉宾</span>
                <span>{{ expertList.length }}人</span>
              </p>
              <p>
                <span>洽谈合作</span>
                <span>{{ qiatan }}项</span>
              </p>
              <p>
                <span>达成意愿</span>
                <span>{{ dacheng }}项</span>
              </p>
              <p>
                <span>交易完成</span>
                <span>{{ chengguo }}项</span>
              </p>
              <p>
                <span>参展项目</span>
                <span>{{ xuqiu }}项</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="24" class="left">
                <el-col :span="24" class="title" @click.native="btnDirectDetail">
                  <span style="color: rgb(255, 132, 0);">现场</span>
                  <span>直播</span>
                </el-col>
                <el-col :span="24" class="video">
                  <video :src="file_path" controls="controls" style="height: 395px; width: 100%;">
                    您的浏览器不支持 video 标签。
                  </video>
                  <!-- <videoPlayer ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true" /> -->
                </el-col>
              </el-col>
              <el-col :span="24" class="right">
                <el-col :span="24">
                  <!-- <span>交易实况</span> -->
                  <el-tabs v-model="activeName" @tab-click="handleClicks">
                    <el-tab-pane label="交易实况" name="first">
                      <el-col :span="24">
                        <ul>
                          <li v-for="(item, index) in directlist" :key="index">
                            <span> {{ item.time }}</span>
                            <span>{{ item.market_username }}</span> <span>与</span><span>{{ item.username }}</span
                            ><span>{{ item.status === '1' ? '达成意向' : item.status === '2' ? '合作成功' : 'underdind' }}</span>
                          </li>
                        </ul>
                      </el-col>
                    </el-tab-pane>
                    <el-tab-pane label="达成意向" name="second">
                      <el-col :span="24" class="yixiang">
                        <ul>
                          <li v-for="(item, index) in yixianglist" :key="index">
                            <span> {{ item.time }}</span>
                            <span>{{ item.market_username }}</span> <span>与</span><span>{{ item.username }}</span
                            ><span>{{ item.status === '1' ? '达成意向' : item.status === '2' ? '合作成功' : 'underdind' }}</span>
                          </li>
                        </ul>
                      </el-col>
                    </el-tab-pane>
                    <el-tab-pane label="合作成功" name="third">
                      <el-col :span="24" class="yixiang">
                        <ul>
                          <li v-for="(item, index) in successlist" :key="index">
                            <span> {{ item.time }}</span>
                            <span>{{ item.market_username }}</span> <span>与</span><span>{{ item.username }}</span
                            ><span>{{ item.status === '1' ? '达成意向' : item.status === '2' ? '合作成功' : 'underdind' }}</span>
                          </li>
                        </ul>
                      </el-col>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="推流测试" name="four"> </el-tab-pane>
                    <el-tab-pane label="拉流测试" name="five"> </el-tab-pane>
                    <el-tab-pane label="推流测试2" name="six"> </el-tab-pane> -->
                  </el-tabs>
                </el-col>
                <!-- -->
              </el-col>
            </el-col>
            <el-col :span="24" class="newimage">
              <el-image :src="superOne" style="width:100%;height:100px;position:relative;"> </el-image>
              <el-link :underline="false" href="user.docx">
                使用手册
              </el-link>
            </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-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="20" class="name">
                            <p>{{ item.name }}</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: id, user_id: user_id } })"
                              >对接</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' })">查看所有项目</el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="找产品">
                  <el-col :span="24" class="one">
                    <el-row>
                      <el-col :span="24" class="demandList">
                        <el-col :span="24" class="topList">
                          <el-col :span="24" class="list" v-for="(item, index) in demandList" :key="index">
                            <el-col :span="20" class="name">
                              <p>{{ item.name }}</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: id, user_id: user_id } })"
                                >对接</el-button
                              >
                            </el-col>
                            <el-col :span="16" class="otherInfo">
                              <el-col :span="12">
                                <p class="field">
                                  <span>所属领域:</span
                                  ><span>{{
                                    item.field == '0'
                                      ? '先进制造'
                                      : item.field == '1'
                                      ? '新材料'
                                      : item.field == '2'
                                      ? '光电子'
                                      : item.field == '3'
                                      ? '信息技术'
                                      : item.field == '4'
                                      ? '文化和科技融合'
                                      : '暂无'
                                  }}</span>
                                </p>
                              </el-col>
                              <el-col :span="12">
                                <p class="coopermode">
                                  <span>合作方式:</span
                                  ><span>
                                    {{
                                      item.coopermode == '0'
                                        ? '技术转让'
                                        : item.coopermode == '1'
                                        ? '技术服务'
                                        : item.coopermode == '2'
                                        ? '技术许可'
                                        : item.coopermode == '3'
                                        ? '技术融资'
                                        : item.coopermode == '4'
                                        ? '其他'
                                        : '暂无'
                                    }}
                                  </span>
                                </p>
                              </el-col>
                            </el-col>
                            <el-col :span="8" class="introduction">
                              <p><span>简介:</span>{{ item.introduction }}</p>
                            </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' })">查看所有项目</el-button>
                        </el-col>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="找服务">
                  <el-col :span="24" class="one">
                    <el-row>
                      <el-col :span="24" class="serviceList">
                        <el-col :span="24" class="topList">
                          <el-col :span="24" class="list" v-for="(item, index) in serviceList" :key="index">
                            <el-col :span="20" class="name">
                              <p>{{ item.name }}</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: id, user_id: user_id } })"
                                >对接</el-button
                              >
                            </el-col>
                            <el-col :span="16" class="otherInfo">
                              <el-col :span="12">
                                <p class="field">
                                  <span>所属领域:</span
                                  ><span>{{
                                    item.field == '0'
                                      ? '先进制造'
                                      : item.field == '1'
                                      ? '新材料'
                                      : item.field == '2'
                                      ? '光电子'
                                      : item.field == '3'
                                      ? '信息技术'
                                      : item.field == '4'
                                      ? '文化和科技融合'
                                      : '暂无'
                                  }}</span>
                                </p>
                              </el-col>
                            </el-col>
                            <el-col :span="8" class="introduction">
                              <p><span>简介:</span>{{ item.introduction }}</p>
                            </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' })">查看所有项目</el-button>
                        </el-col>
                      </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.img_path"
                          style="height: 92px;
"
                        ></el-image>
                      </el-col>
                      <el-col :span="20" class="info">
                        <p>
                          <span class="textOver">{{ item.name }}</span>
                          <el-button size="mini" type="success" @click="zhuanjiaduijies(item)">对接</el-button>
                          <el-button size="mini" type="primary" @click="twoBtnDetail(item)" style="margin:0 5px 0 5px">详情</el-button>
                        </p>

                        <p>
                          <span>性别:{{ item.gender }}</span>
                          <span>院校:{{ item.school }}</span>
                        </p>
                        <p>
                          <span>职务:{{ item.position }}</span>
                          <span>从事专业:{{ item.professional }}</span>
                        </p>
                      </el-col>
                    </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" class="newimage2">
              <el-image :src="two" style="width:100%;height:100px;position:relative;"> </el-image>
            </el-col>
            <div class="fangtan">
              <el-col :span="7" class="jiabin">
                <p class="jiabintop">
                  <span>嘉宾访谈</span>
                  <el-link :underline="false">MORE</el-link>
                </p>
                <div class="jiabinlist">
                  <ul>
                    <li v-for="(ref, index) in jiabinlist" :key="index">
                      <img :src="ref.url" />
                      <p>
                        <span class="textOver">{{ ref.title }}</span>
                        <span>{{ ref.date }}</span>
                        <span class="text">{{ ref.context }} </span>
                      </p>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="7" class="jiabin luyan">
                <p class="jiabintop luyanTop">
                  <span>项目路演</span>
                  <el-link :underline="false">MORE</el-link>
                </p>
                <div class="luyanList">
                  <ul>
                    <li v-for="(item, index) in luyanList" :key="index">
                      <p>
                        <span>{{ item.title }}</span>
                        <span>浏览:{{ item.num }}</span>
                      </p>
                      <p>
                        <span>所在地区：{{ item.city }} | 所属行业：{{ item.hy }}</span>
                        <span>项目融资方式：{{ item.xurz }}</span>
                      </p>
                    </li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="7" class="chat">
                <chat></chat>
              </el-col>
            </div>
          </el-col>
        </div>
      </el-col>
      <div class="pz_down">
        <live-foot></live-foot>
      </div>
    </el-row>
    <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>

<script>
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import { videoPlayer } from 'vue-video-player';
import 'videojs-flash';

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: transaction } = createNamespacedHelpers('transaction');
const { mapActions: mapProduct } = createNamespacedHelpers('marketproduct');
const { mapActions: market } = createNamespacedHelpers('market');
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
import moment from 'moment';

import _ from 'loadsh';
export default {
  name: 'hall',
  props: {},
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
  components: {
    chat,
    liveFoot,
    directDetail, //技术，产品，服务详情
    exportDetail, //专家详情
    // videoPlayer,
  },
  data: () => ({
    activeName: 'second',
    name: '',

    // 详情显示
    dialogVisible: false,
    // 技术，产品，服务详情
    directInfo: {},
    // 专家详情
    dialogExport: false,
    exportInfo: {},
    //搜索判断用
    panduan: '找技术',
    // 找技术
    jishulist: [],
    // 找产品
    demandList: [],
    // 找服务
    serviceList: [],
    // 找专家
    expertList: [],
    //对接会创建人id
    user_id: '',
    // 路演
    luyanList: [
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
      {
        title: '项目路演',
        num: '1234',
        city: '吉林省',
        hy: '所属行业',
        xurz: '股权融资',
      },
    ],
    // 交易实况
    directlist: [
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },

      {
        time: '2019-03-05',
        name1: '中科院宁波先进制造所',
        name2: '深圳市华尔威体育用品',
      },
    ],
    //达成意向
    yixianglist: [],
    //合作成功
    successlist: [],
    // 嘉宾访谈
    jiabinlist: [
      {
        url: require('@/assets/test.jpeg'),
        title: '测试title',
        date: '2017-03-04',
        context: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
      },
      {
        url: require('@/assets/test.jpeg'),
        title: '测试title',
        date: '2017-03-04',
        context: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
      },
      {
        url: require('@/assets/test.jpeg'),
        title: '测试title',
        date: '2017-03-04',
        context: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
      },

      {
        url: require('@/assets/test.jpeg'),
        title: '测试title',
        date: '2017-03-04',
        context: '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
      },
    ],
    superOne: require('@/assets/live/main1.png'),
    two: require('@/assets/live/top_bg.png'),
    superOnes: require('@/assets/live/测试图片.jpg'),
    title: '',
    file_path: '',
    xuqiu: '',
    chengguo: '',
    qiatan: '',
    dacheng: '',
    videoSrc: '',
    videoOptions: {
      playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
      autoplay: false, //如果true,浏览器准备好时开始回放。
      muted: false, // 默认情况下将会消除任何音频。
      loop: false, // 导致视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      techOrder: ['flash', 'html5'], // 兼容顺序
      fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      sources: [
        {
          // 流配置，数组形式，会根据兼容顺序自动切换
          type: 'rtmp/hls',
          src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
          // src: 'rtmp://play.liaoningdoupo.com/live/1',
        },
      ],
      poster: '', //你的封面地址
      // width: document.documentElement.clientWidth,
      notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true, //全屏按钮
      },
    },
  }),
  created() {
    this.searchInfo();
    this.searchzhanjia();
    this.searchchanpin();
    this.searchfuwu();
    this.searchdock();
  },
  methods: {
    ...mapProduct({ mapProductQuery: 'newquery' }),
    ...market({ marketFetch: 'fetch' }),
    ...dock({ dockQuery: 'query', dockFetch: 'fetch' }),
    ...expertsuser({ expertQuery: 'query' }),
    ...transaction({ tquery: 'query' }),
    async searchdock() {
      // 标题
      let res = await this.dockFetch(this.id);
      this.$set(this, `title`, res.data.title);
      this.$set(this, `file_path`, res.data.file_path);
      this.$set(this, `user_id`, res.data.user_id);
      console.log(res.data);
      // 交易实况
      let aaa = await this.tquery({ dockid: this.id });
      let newaaa = aaa.data.filter(f => f.status == '1' || f.status == '2');
      for (const val of newaaa) {
        var time = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.time = time;
      }
      this.$set(this, `directlist`, newaaa);
      // 洽谈
      let abb = await this.tquery({ status: 0, dockid: this.id });
      this.$set(this, `qiatan`, abb.total);
      // 意向
      let acc = await this.tquery({ status: 1, dockid: this.id });

      for (const val of acc.data) {
        var time = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.time = time;
      }

      this.$set(this, `dacheng`, acc.total);
      this.$set(this, `yixianglist`, acc.data);
      // 成果
      let aee = await this.tquery({ status: 2, dockid: this.id });
      for (const val of aee.data) {
        var time = moment(val.meta.createdAt).format('YYYY-MM-DD hh:mm');
        val.time = time;
      }
      this.$set(this, `chengguo`, aee.total);
      this.$set(this, `successlist`, aee.data);
      // 需求
      let aff = await this.mapProductQuery();
      this.$set(this, `xuqiu`, aff.total);
    },
    //技术
    async searchInfo(newname) {
      let res = await this.mapProductQuery({ skip: 0, limit: 10, totaltype: '0', name: newname });
      console.log(res);
      if (this.$checkRes(res)) this.$set(this, `jishulist`, res.data);
    },
    //产品
    async searchchanpin(newname) {
      let res = await this.mapProductQuery({ skip: 0, limit: 5, totaltype: '1', name: newname });
      if (this.$checkRes(res)) this.$set(this, `demandList`, res.data);
    },
    //服务
    async searchfuwu(newname) {
      let res = await this.mapProductQuery({ skip: 0, limit: 5, totaltype: '2', name: newname });
      if (this.$checkRes(res)) this.$set(this, `serviceList`, res.data);
    },
    //专家
    async searchzhanjia(newname) {
      let res = await this.expertQuery({ skip: 0, limit: 10, name: newname, role: 6 });
      if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
    },
    //tabs
    handleClick(tab, event) {
      if (event.target.getAttribute('id') == 'tab-0') {
        this.panduan = '找技术';
        if (this.name) {
          this.searchInfo();
        }
      } else if (event.target.getAttribute('id') == 'tab-1') {
        this.panduan = '找产品';
        if (this.name) {
          this.searchchanpin();
        }
      } else if (event.target.getAttribute('id') == 'tab-2') {
        this.panduan = '找服务';
        if (this.name) {
          this.searchfuwu();
        }
      } else if (event.target.getAttribute('id') == 'tab-3') {
        this.panduan = '找专家';
        if (this.name) {
          this.searchzhanjia();
        }
      }
    },
    // 点击查询
    resetForm(name) {
      if (this.panduan == '找技术') {
        if (name) {
          this.searchInfo(name);
        } else {
          this.searchInfo();
        }
      } else if (this.panduan == '找产品') {
        if (name) {
          this.searchchanpin(name);
        } else {
          this.searchchanpin();
        }
      } else if (this.panduan == '找服务') {
        if (name) {
          this.searchfuwu(name);
        } else {
          this.searchfuwu();
        }
      } else if (this.panduan == '找专家') {
        if (name) {
          this.searchzhanjia(name);
        } else {
          this.searchzhanjia();
        }
      }
    },
    // 直播详情
    btnDirectDetail() {
      this.$router.push({ path: '/live/hallDetail', query: { id: this.$route.query.id } });
    },
    // 技术,产品，服务详情
    oneBtnDetail(data) {
      this.dialogVisible = true;
      console.log(data);
      this.$set(this, `directInfo`, data);
    },
    // 关闭dialog
    handleClose(done) {
      done();
    },
    // 专家详情
    twoBtnDetail(data) {
      this.dialogExport = true;
      data.phone = this.phoneNumFilter(data.phone);
      data.cardnumber = this.cardnumberNumFilter(data.cardnumber);
      this.$set(this, `exportInfo`, data);
    },
    phoneNumFilter(phone) {
      let start = phone.slice(0, 3);
      let end = phone.slice(-4);
      return `${start}****${end}`;
    },
    cardnumberNumFilter(cardnumber) {
      let start = cardnumber.slice(0, 4);
      let end = cardnumber.slice(-3);
      return `${start}****${end}`;
    },

    zhuanjiaduijies(data) {
      this.$router.push({ path: '/live/hall/dock/zhanjiaduijie', query: { id: data.id, dockid: this.id } });
    },
    handleClicks(tab, event) {
      if (tab.name == 'four') {
        this.$router.push('/tltest');
      } else if (tab.name == 'five') {
        this.$router.push('/tllltest');
      } else if (tab.name == 'six') {
        this.$router.push('/tltest2');
      }
    },

    // 关闭专家详情
    handleCloseExport(done) {
      done();
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
.livetop {
  width: 100%;
  height: 487px;
  overflow: hidden;
  background-image: url(../../assets/live/top_3.png);
}
.livetop .title {
  text-align: center;
  color: #fff;
  position: relative;
  width: 100%;
  font-size: 45px;
  top: 65px;
}
.livetop .zhuban {
  text-align: center;
  color: #fff;
  position: relative;
  width: 100%;
  font-size: 25px;
  top: 140px;
}
.livetop .zhuban span:first-child {
  font-weight: 700;
}
.livetop .num {
  position: relative;
  top: 190px;
  color: #fff;
}
.livetop .num p {
  float: left;
  width: 15%;
  background: #fff;
  margin: 0 14px 0 0 !important;
  color: #000;
  height: 50px;
  line-height: 50px;
  border-radius: 30px;
}
.livetop .num p 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;
}
.livetop .num p 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;
}
.livemain .livevideo {
  height: 470px;
  overflow: hidden;
}
.livemain .livevideo .left {
  float: left;
  width: 50%;
  height: 460px;
  overflow: hidden;
  border: 5px solid #000;
  background: #fff;
  border-radius: 5px;
}
.livemain .livevideo .left .title {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 700;
}
.livemain .livevideo .left .video {
  height: 400px;
  margin: 0 10px 10px 10px;
  border: 2px solid #ccc;
  width: 97%;
}
.livemain .livevideo .right {
  width: 50%;
  height: 460px;
  overflow: hidden;
  background-color: #6e042c;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
}

/deep/.livemain .livevideo .right .el-tabs__nav-scroll {
  color: #fff;
  width: 97%;
  float: left;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  background: #fe950e;
}

/deep/.livemain .livevideo .right .el-tabs__item {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}

/deep/.livemain .livevideo .right .el-tabs__item.is-active {
  color: red;
}

/deep/.livemain .livevideo .right .el-tabs__item:hover {
  color: red;
}

/deep/.livemain .livevideo .right .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: transparent;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
  color: #fff;
}

/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
.right ul {
  padding: 0;
  margin: 0;
}
.right ul li {
  height: 43px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #ff8500;
  padding: 0 0 0 10px;
  margin: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.right ul li span:first-child {
  color: #ff8500;
}
.right ul li span {
  margin: 0 20px 0 0;
}

.yixiang ul {
  padding: 0;
  margin: 0;
}
.yixiang ul li {
  height: 43px;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #ff8500;
  padding: 0 0 0 10px;
  margin: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yixiang ul li span:first-child {
  color: #ff8500;
}
.yixiang ul li span {
  margin: 0 20px 0 0;
}

// 图片
.newimage {
  margin: 20px 0 0 0;
  background-size: 100% * 80px;
  background-size: cover;
  height: 100px;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
}
.newimage .el-link {
  position: absolute;
  top: 30px;
  left: 46%;
  color: #ffffff;
  font-size: 36px;
  z-index: 999;
}
.fangtan {
  float: left;
  height: 525px;
  overflow: hidden;
}
// 嘉宾
.fangtan .jiabin {
  width: 31%;
  border-radius: 5px;
  box-shadow: 0 0 5px #c20808;
  padding: 0 10px 0px 10px;
  margin: 4px 15px 0 3px;
  height: 515px;
}
.jiabin .jiabintop {
  height: 30px;
  line-height: 30px;
}
.jiabin .jiabintop span {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  color: #fff;
  background-color: #ff8500;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.jiabin .jiabintop a {
  float: right;
}
.jiabin .jiabinlist ul li {
  float: left;
  width: 100%;
  border-bottom: 1px dashed #ff8500;
  padding: 20px 0;
}
.jiabin .jiabinlist ul li:last-child {
  border-bottom: none;
  float: left;
  width: 100%;
}
.jiabin .jiabinlist ul li:hover p span:first-child {
  color: #0e90d2;
}
.jiabin .jiabinlist ul li img {
  float: left;
  width: 20%;
  height: 80px;
}

.jiabin .jiabinlist ul li p {
  float: left;
  width: 71%;
  padding: 0 0 0 10px;
}

.jiabin .jiabinlist ul li p span:first-child {
  float: left;
  width: 65%;
  font-size: 18px;
}

.jiabin .jiabinlist ul li p span:nth-child(2n) {
  float: left;
  width: 35%;
  font-size: 14px;
  text-align: right;
  padding: 2px 0 0 0;
}

.jiabin .jiabinlist ul li p span:last-child {
  float: left;
  width: 100%;
  font-size: 14px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
// 访谈
.fangtan .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;
}

.luyanList ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.luyanList ul li {
  float: left;
  border-radius: 10px;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  height: 95px;
  border: 1px solid #ff8500;
}

.luyanList ul li:nth-child(5) {
  border: 1px solid #ff8500;
  float: left;
  border-radius: 10px;
  padding: 5px 10px;
  margin: 0 0 22px 0;
  height: 95px;
}

.luyanList ul li:hover {
  box-shadow: 0 0 5px red;
}

.luyanList ul li p:first-child span:first-child {
  font-size: 18px;
  float: left;
  width: 80%;
}

.luyanList ul li p:first-child span:last-child {
  float: left;
  width: 20%;
  color: #c20808;
}

.luyanList ul li p:last-child span {
  float: left;
  width: 100%;
  padding: 5px 0;
  font-size: 14px;
  color: #666;
}
// 聊天
.chat {
  float: left;
  width: 33%;
}
.tabsData {
  position: relative;
  height: 510px;
  margin: 20px 0;
  border: 1px solid red;
  .one {
    height: 468px;
    padding: 0 15px;
    overflow: auto;
    .onnList {
      border-bottom: 1px dashed red;
      padding: 10px;
      .oneName {
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px 0;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .btn {
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px 0;
        text-align: center;
      }
      .oneInfo {
        .oneInfoLeft {
          font-size: 14px;
          p {
            padding: 0 0 10px 0;
            span {
              display: inline-block;
              width: 50%;
            }
          }
          p:first-child span:first-child {
            color: red;
            font-weight: bold;
          }
          p:nth-child(2) span:nth-child(2) {
            color: red;
            font-weight: bold;
          }
        }
        .oneInfoRight {
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 4;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .two {
    padding: 15px;
    height: 466px;
    overflow: auto;
    .twoList {
      box-shadow: 0 0 3px red;
      margin-bottom: 30px;
      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;
}
/deep/.el-dialog__body {
  padding: 20px;
}
.downLeftInfos {
  height: 330px;
}
.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%;
}
/deep/.video-js {
  height: 396px !important;
}
// 新增
// 产品
.jishulist {
  .topList {
    .list {
      border-bottom: 1px dashed #ccc;
      padding: 6px 0;
      .name {
        height: 30px;
        line-height: 30px;
        p {
          font-size: 16px;
        }
      }
      .click {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    }
  }
  .btn {
    margin: 6px 0 0 0;
    text-align: center;
  }
}
// 技术
.demandList {
  .topList {
    .list {
      padding: 11px 0;
      border-bottom: 1px dashed #ccc;
      .name {
        height: 30px;
        line-height: 30px;
        p {
          font-size: 16px;
        }
      }
      .click {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      .otherInfo {
        .field {
          font-size: 14px;
          padding: 8px 0 0 0;
        }
        .coopermode {
          font-size: 14px;
          padding: 8px 0 0 0;
        }
      }
      .introduction {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
  .btn {
    text-align: center;
    margin: 6px 0 0 0;
  }
}
// 服务
.serviceList {
  .topList {
    .list {
      padding: 11px 0;
      border-bottom: 1px dashed #ccc;
      .name {
        height: 30px;
        line-height: 30px;
        p {
          font-size: 16px;
        }
      }
      .click {
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      .otherInfo {
        .field {
          font-size: 14px;
          padding: 8px 0 0 0;
        }
      }
      .introduction {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
  .btn {
    text-align: center;
    margin: 6px 0 0 0;
  }
}
</style>