web-website/src/views/live/hall/hall.vue

<template>
  <div id="hall" style="background-color: #fff">
    <div class="pz_top">
      <div class="w_0100">
        <div class="livetop">
          <div class="w_1200">
            <div class="title">
              吉林省计算机中心对接直播大厅
            </div>
            <div class="zhuban">
              <span>主办方:</span>
              <span>吉林省计算机中心直播大厅</span>
            </div>
            <div class="num">
              <p>
                <span>同时在线</span>
                <span>1人</span>
              </p>
              <p>
                <span>特邀嘉宾</span>
                <span>1人</span>
              </p>
              <p>
                <span>洽谈合作</span>
                <span>1人</span>
              </p>
              <p>
                <span>达成意愿</span>
                <span>1人</span>
              </p>
              <p>
                <span>展示成果</span>
                <span>1人</span>
              </p>
              <p>
                <span>发布需求</span>
                <span>1人</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pz_main">
      <div class="w_0100">
        <div class="w_1200">
          <div class="livemain">
            <div class="livevideo">
              <div class="left">
                <p class="title"><span style="color:#FF8400">现场</span><span>直播</span></p>
                <div class="video">
                  直播换面
                </div>
              </div>
              <div class="right">
                <p><span>交易实况</span></p>
                <div class="videoTitle">
                  <ul>
                    <li v-for="i in 10" :key="i">
                      <span>[09:16:00]</span>
                      <span>中科院宁波先进制造所</span>
                      <span>与</span>
                      <span>深圳市华尔威体育用品</span>
                      <span>实现对接</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="liveMainImage">
              <img :src="img.main1" />
            </div>
            <div class="gongqiu">
              <div class="gongqiuTop">
                <img :src="img.main2" />
              </div>
              <div class="gongqiuInfo">
                <div id="tab">
                  <div class="tabList">
                    <ul>
                      <li class="cur">找技术</li>
                      <li>找需求</li>
                      <li>找服务</li>
                      <li>找专家</li>
                    </ul>
                  </div>
                  <div class="tabCon">
                    <div class="cur cur_1">
                      <ul class="tabConList">
                        <li class="oneLi" v-for="i in 4" :key="i">
                          <p class="oneLiLeft">
                            <span class="name">技术名称</span>
                            <span class="user"><i class="iconfont icon-ren" style="color:#FFA500;margin: 0 5px 0 0;"></i>技术人</span>
                            <span class="user"><i class="iconfont icon-address" style="color:#FFA500;margin: 0 5px 0 0;"></i>吉林省长春市</span>
                            <span class="type">类型：实用类型</span>
                            <span class="type">成熟度：正在研发</span>
                            <span class="type">交易方式：许可转让</span>
                            <span class="type">交易价格：面议</span>
                          </p>
                          <p class="oneLiRight">
                            <span
                              >摘要：本发明属于医药技术领域，公开了一种加味双黄连口服液及其制备方法，取黄芩加水浸泡30分钟，煎煮二次合并煎液，滤过浓缩，pH值至1.5～2.0，保温1小时，静置24小时，滤过浓缩，调pH值至7.0</span
                            >
                          </p>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <ul class="tabConList">
                        <li class="twoLi" v-for="i in 6" :key="i">
                          <a href="">
                            <p>寻求疫后创伤抗抑郁药药物的需求</p>
                            <p>
                              <span>行业分类：医药与医疗-生物医药</span>
                              <span>发布时间：2020-03-31</span>
                            </p>
                            <p>
                              <span>需求类型：技术难题解决</span>
                              <span>吉林省长春市</span>
                            </p>
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="cur_3">
                      <ul class="tabConList">
                        <li class="threeLi" v-for="i in 6" :key="i">
                          <p>长春福瑞科技有限公司</p>
                          <p>
                            <img :src="img.logo20" />
                            <button type="button">立即咨询</button>
                            <span>服务类型：</span>
                            <span class="type">科技服务</span>
                          </p>
                          <a href="">进入主页</a>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <ul class="tabConList">
                        <li class="fourLi" v-for="i in 6" :key="i">
                          <img :src="img.img" />
                          <p>
                            <span class="name">万能通</span>
                            <span><i class="iconfont icon-address" style="color: #FFA500;"></i>吉林省长春市</span>
                          </p>
                          <p>从事领域：计算机，电脑，啥都有</p>
                          <p>擅长能力：全能，啥都会，没有他不会的</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="fangtan">
              <div class="jiabin">
                <p class="jiabintop">
                  <span>嘉宾访谈</span>
                  <a href="">MORE</a>
                </p>
                <div class="jiabinlist">
                  <ul>
                    <li>
                      <img :src="img.img" />
                      <p>
                        <span class="textOver">访谈标题</span>
                        <span>2020-02-02 10:00</span>
                        <span class="text"
                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区
                        </span>
                      </p>
                    </li>
                    <li>
                      <img :src="img.img" />
                      <p>
                        <span class="textOver">访谈标题</span>
                        <span>2020-02-02 10:00</span>
                        <span
                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区
                        </span>
                      </p>
                    </li>
                    <li>
                      <img :src="img.img" />
                      <p>
                        <span class="textOver">访谈标题</span>
                        <span>2020-02-02 10:00</span>
                        <span
                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区我国已将区
                        </span>
                      </p>
                    </li>
                    <li>
                      <img :src="img.img" />
                      <p>
                        <span class="textOver">访谈标题</span>
                        <span>2020-02-02 10:00</span>
                        <span
                          >区块链技术作为当下信息技术产业最前沿的技术之一，也是继大数据技术后最受各界关注的领域，我国已将区我国已将区我国已将区我国已将区我国已将区
                        </span>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="jiabin luyan">
                <p class="jiabintop luyanTop">
                  <span>项目路演</span>
                  <a href="">MORE</a>
                </p>
                <div class="luyanList">
                  <ul>
                    <li>
                      <p>
                        <span>项目路演</span>
                        <span>浏览:1234</span>
                      </p>
                      <p>
                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
                        <span>项目融资方式：股权融资</span>
                      </p>
                    </li>
                    <li>
                      <p>
                        <span>项目路演</span>
                        <span>浏览:1234</span>
                      </p>
                      <p>
                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
                        <span>项目融资方式：股权融资</span>
                      </p>
                    </li>
                    <li>
                      <p>
                        <span>项目路演</span>
                        <span>浏览:1234</span>
                      </p>
                      <p>
                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
                        <span>项目融资方式：股权融资</span>
                      </p>
                    </li>
                    <li>
                      <p>
                        <span>项目路演</span>
                        <span>浏览:1</span>
                      </p>
                      <p>
                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
                        <span>项目融资方式：股权融资</span>
                      </p>
                    </li>
                    <li>
                      <p>
                        <span>项目路演</span>
                        <span>浏览:1234</span>
                      </p>
                      <p>
                        <span>所在地区：江苏省 | 所属行业：其他行业</span>
                        <span>项目融资方式：股权融资</span>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="chat">
                <p class="luyanTop">
                  <span>公共聊天</span>
                  <span class="icon"><i class="iconfont icon-xianhua" style="color:red"></i>送鲜花</span>
                  <span class="icon"><i class="iconfont icon-xin" style="color:red;"></i>发贺信</span>
                </p>
                <div class="chatList">
                  <ul>
                    <li>
                      <p><span>[10:00:00]</span><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span></p>
                    </li>
                    <li>
                      <p>
                        <span>[10:00:00]</span><span style="font-weight: bold;">测试人：</span
                        ><span> 深圳市睿视科技有限公司+彭小姐给龙岗区在线科技成果对接会-新材料专场送来鲜花！</span>
                      </p>
                    </li>
                  </ul>
                  <div class="input">
                    <input type="text" name="" id="" value="" />
                    <button type="button">发送</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pz_down">
      <div class="w_0100">
        <div class="superdown">
          <div class="w_1200">
            <p>版权所有：吉林省技术算中心</p>
            <p>
              <span>技术支持：长春福瑞科技有限公司</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>邮编：130000</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>传真：239823982</span>
            </p>
            <p>
              <span>地址：吉林省长春市朝阳区前进大街1244号</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>电话：0134-1234567</span>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span>邮箱：123456@163.com</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'hall',
  props: {},
  components: {},
  data: () => {
    return {
      img: {
        main1: require('@/assets/live/main1.png'),
        main2: require('@/assets/live/main2.png'),
        logo20: require('@/assets/live/logo20.png'),
        img: require('@/assets/live/测试图片.jpg'),
      },
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
@import '~@/style/style.css';
</style>