web-live/src/views/achieveLive/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <div class="w_1200">
            <topInfo :info="liveInfo"></topInfo>
          </div>
        </el-col>
        <el-col :span="24" class="info">
          <div class="w_1200">
            <el-col :span="24" class="one">
              <el-col :span="12" class="left">
                <videoData :info="liveInfo"></videoData>
              </el-col>
              <el-col :span="12" class="right">
                <imgtxtData></imgtxtData>
              </el-col>
            </el-col>
            <el-col :span="24" class="two">
              <productData></productData>
            </el-col>
            <el-col :span="24" class="thr">
              <expertData></expertData>
            </el-col>
            <el-col :span="24" class="four">
              <el-image :src="fourImg"> </el-image>
            </el-col>
            <el-col :span="24" class="five">
              <el-col :span="8" class="left">
                <guestData></guestData>
              </el-col>
              <el-col :span="8" class="cen">
                <projectData></projectData>
              </el-col>
              <el-col :span="8" class="right">
                <chatData></chatData>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="foot">
          <foot></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import foot from '@common/src/components/common/foot.vue';
import topInfo from './detail/topInfo.vue';
import videoData from './detail/videoData.vue';
import imgtxtData from './detail/imgtxtData.vue';
import productData from './detail/productData.vue';
import expertData from './detail/expertData.vue';
import guestData from './detail/guestData.vue';
import projectData from './detail/projectData.vue';
import chatData from './detail/chatData.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'detail',
  props: {},
  components: { foot, topInfo, videoData, imgtxtData, productData, expertData, guestData, projectData, chatData },
  data: function() {
    return {
      // 展会详情
      liveInfo: {},
      // 第四部分
      fourImg: require('@common/src/assets/live/top_bg.png'),
    };
  },
  async created() {
    await this.searchInfo();
  },
  methods: {
    ...dock(['fetch']),
    async searchInfo() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `liveInfo`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .top {
    background: url('~@common/src/assets/live/dock_top.png');
    height: 480px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .info {
    min-height: 500px;
    background: #fcfcfd;
    .one {
      height: 480px;
      background-color: #fff;
      margin: 0 0 15px 0;
      .left {
        width: 49%;
        height: 480px;
        margin: 0 15px 0 0;
        border: 4px solid #000;
      }
      .right {
        width: 49.5%;
        height: 480px;
        box-shadow: 0 0 5px #ccc;
        border-radius: 5px;
      }
    }
    .two {
      height: 620px;
      background-color: #fff;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      margin: 0 0 15px 0;
    }
    .thr {
      height: 560px;
      background-color: #fff;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      margin: 0 0 15px 0;
    }
    .four {
      height: 120px;
      box-shadow: 0 0 5px #ccc;
      border-radius: 5px;
      margin: 0 0 15px 0;
      .el-image {
        height: 120px;
        overflow: hidden;
        border-radius: 5px;
      }
    }
    .five {
      height: 510px;
      background-color: #fff;
      margin: 0 0 15px 0;
      .left {
        width: 33%;
        height: 510px;
        overflow: hidden;
        box-shadow: 0 0 5px #ccc;
        border-radius: 5px;
        margin: 0 10px 0 0;
      }
      .cen {
        width: 33%;
        height: 510px;
        overflow: hidden;
        box-shadow: 0 0 5px #ccc;
        border-radius: 5px;
        margin: 0 10px 0 0;
      }
      .right {
        width: 32.3%;
        height: 510px;
        overflow: hidden;
        box-shadow: 0 0 5px #ccc;
        border-radius: 5px;
      }
    }
  }
}
</style>