web-test/src/views/detail/eduDetail.vue

<template>
  <div id="eduDetail" style="background-color: #F5F5F54f;">
    <div class="w_0100">
      <div class="w_1200">
        <div class="detailmain">
          <div class="detailtop">
            <span>{{ detailinfo.title }}</span>
          </div>
          <div class="detailtopleft">
            <span>时间：{{ detailinfo.publish_time }}&nbsp;&nbsp;&nbsp;&nbsp;来源：{{ detailinfo.orgin }}</span>
          </div>
          <div class="detailimage" v-if="detailinfo.picture">
            <img :src="detailinfo.picture" class="detailimg" />
          </div>
          <div class="detailVideo">
            <video :src="videoUrl" controls="controls">
              您的浏览器不支持 video 标签。
            </video>
          </div>
          <div class="detailcontext">
            {{ detailinfo.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: news } = createNamespacedHelpers('news');
export default {
  name: 'eduDetail',
  props: {},
  components: {},
  data: () => {
    return {
      img: {
        top_bg: require('@/assets/live/top_bg.png'),
        logo: require('@/assets/live/logo.png'),
        img1: require('@/assets/live/1.jpg'),
      },
      detailinfo: {},
      videoUrl: require('@/assets/video.mp4'),
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...news(['fetch']),
    async search() {
      console.log(this.id);

      const res = await this.fetch(this.id);
      this.$set(this, `detailinfo`, res.data);
    },
  },
  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>
@import '~@/style/style.css';
.detailmain {
  margin: 15px 0 15px 0;
  box-shadow: 0 0 10px #2d64b3;
  border-radius: 10px;
  min-height: 800px;
}

.detailtop {
  padding: 20px 0px;
  font-size: 18px;
  line-height: 40px;
  font-weight: normal;
  text-align: left;
  margin: 0;
  text-align: center;
  color: #005293;
}

.detailtopleft {
  text-align: center;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  color: #666666;
}

.detailimage {
  text-align: center;
  padding: 20px 0 0 0;
}
.detailVideo {
  float: left;
  width: 100%;
  text-align: center;
  height: 400px;
  overflow: hidden;
  margin: 20px 0;
}
.detailVideo video {
  height: 400px;
  width: 50%;
  border: 1px dashed #ccc;
}

.detailimg {
  width: 500px;
  height: 300px;
}

.detailcontext {
  padding: 20px 40px 60px 40px;
}
</style>