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

<template>
  <div id="liveList">
    <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">
          <el-row class="liveList">
            <el-col class="liveListInfo">
              <el-col :span="24" class="liveLisTop">
                <span>吉林省计算机中心对接直播中心</span>
                <span>实况直播</span>
              </el-col>
              <el-col :span="24" class="liveLisMain">
                <ul>
                  <li v-for="(item, index) in liveList" :key="index">
                    <span>[{{ item.date }}]</span>
                    <span class="textOver">{{ item.company1 }}</span>
                    <span>与</span>
                    <span class="textOver">{{ item.company2 }}</span>
                    <span>实现对接</span>
                  </li>
                </ul>
              </el-col>
              <el-col :span="24" class="liveLisDown">
                <p><span>主办单位:</span><span>吉林省计算机中心对接直播中心</span></p>
                <p><span>指导单位:</span><span>吉林省计算机中心对接直播中心</span></p>
                <p><span>技术支持:</span><span>长春福瑞科技有限公司</span></p>
              </el-col>
            </el-col>
          </el-row>
        </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: 'liveList',
  props: {},
  components: {},
  data: () => ({
    liveList: [
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
      {
        date: '10:10:10',
        company1: '长春市福瑞科技有限',
        company2: '长春市福瑞科技有限',
      },
    ],
  }),
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less">
@import '~@/style/style.css';
// 直播中心
.liveList {
  min-height: 800px;
  background: #8e2321;
  float: left;
  width: 100%;
  margin: 0 0 20px 0;
  position: relative;
  top: -50px;
}
.liveList .liveListInfo {
  position: absolute;
  top: 50px;
}
.liveListInfo .liveLisTop {
  width: 100%;
  text-align: center;
  padding: 34px 0;
  font-size: 40px;
  color: #fff;
}
.liveListInfo .liveLisTop span:first-child {
  font-size: 40px;
  font-weight: bold;
}
.liveListInfo .liveLisTop span:last-child {
  padding: 0 0 0 15px;
  color: yellow;
  font-family: monospace;
  font-weight: bold;
}
.liveLisMain {
  float: left;
  width: 100%;
  height: 470px;
  overflow: hidden;
}
.liveLisMain ul li {
  float: left;
  border-bottom: 1px dashed #ccc;
  width: 98%;
  font-size: 20px;
  padding: 10px 0;
  margin: 0 10px;
  color: #fff;
}
.liveLisMain ul li span:first-child {
  color: #ffff00;
  padding: 0 15px 0 0;
  display: inline-block;
}
.liveLisMain ul li span:nth-child(2) {
  display: inline-block;
  width: 420px;
}
.liveLisMain ul li span:nth-child(3) {
  display: inline-block;
  width: 100px;
}
.liveLisMain ul li span:nth-child(4) {
  display: inline-block;
  width: 420px;
}
.liveLisDown {
  float: left;
  width: 100%;
  height: 160px;
  font-size: 16px;
  padding: 25px 0 0 0;
}
.liveLisDown p {
  padding: 10px 0 5px 10px;
}
.liveLisDown p span:first-child {
  color: #fc3;
  letter-spacing: 15px;
}
.liveLisDown p span:last-child {
  color: #fff;
}
</style>