mobile-official/src/viewTwo/roadshow/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow" @onClickLeft="onClickLeft"> </NavBar>
        </el-col>
        <el-col :span="24" class="info">
          <el-col :span="24" class="name">
            {{ info.title }}
          </el-col>
          <el-col :span="24" class="date">
            <span class="textOver">发布时间：{{ info.publish_time }}</span>
            <span class="textOver"> 信息来源：{{ info.orgin }}</span>
          </el-col>
          <el-col :span="24" class="image" v-if="info.picture != null">
            <el-image :src="info.picture">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i></div
            ></el-image>
          </el-col>
          <el-col :span="24" class="video">
            <video
              autoplay="autoplay"
              controls="controls"
              preload="meta"
              x-webkit-airplay="true"
              webkit-playsinline="true"
              playsinline="true"
              x5-video-player-type="h5"
              x5-video-player-fullscreen="true"
              controlsList="nodownload"
              :src="info.filepath"
              loop="loop"
            >
              <source src="movie.ogg" type="video/ogg" />
              <source src="movie.mp4" type="video/mp4" />
            </video>
          </el-col>
          <el-col :span="24" class="content">
            <p v-html="info.content"></p>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NavBar from '@/layout/common/topInfo.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
export default {
  name: 'detail',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      info: {},
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...newsroadshow(['fetch']),
    async search() {
      if (this.id) {
        let res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `info`, res.data);
        }
      }
    },
    // 返回
    onClickLeft() {
      this.$router.push({ path: '/viewTwo/roadshow/index' });
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    id() {
      return this.$route.query.id;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
  .top {
    height: 46px;
    overflow: hidden;
  }
  .info {
    .name {
      text-align: center;
      padding: 15px 10px 0 10px;
      font-size: 18px;
      font-weight: bold;
    }
    .date {
      margin: 15px 0;
      span {
        display: inline-block;
        width: 50%;
        text-align: center;
        color: #666;
      }
    }
    .image {
      padding: 10px;
      .el-image {
        width: 100%;
        height: 210px;
      }
    }
    .video {
      video {
        width: 100%;
        height: 215px;
      }
    }
    .content {
      padding: 10px 5px;
    }
  }
}

/deep/.content p img {
  width: 100%;
  height: 300px;
  margin: 5px 0px;
  display: block;
}
/deep/.content div img {
  width: 100%;
  height: 260px;
  display: block;
}
/deep/.content p {
  font-size: 14px;
  color: #444;
}
</style>