micro_vue/src/scrm_pages/newsDetail/newsDetail.vue

<template>
  <div class="page_newsDetail">
    <div class="newsTitle">{{articles.title}}</div>
    <div class="msg" v-html="articles.content" v-show="articleshow"></div>
<<<<<<< .mine
     <div class="video" v-show="videoshow">            
          <video id="example_video_1" class="video-js vjs-default-skin"
                 controls preload="auto" width="100%" height="100%"
                 poster="http://video-js.zencoder.com/oceans-clip.png"
                 data-setup='{"example_option":true}' ref="video">
               <source :src="articles.video_url" type='video/mp4' />
        </video>            
        </div>







=======
    <div class="video" v-show="videoshow">
      <video
        id="example_video_1"
        class="video-js vjs-default-skin"
        controls
        preload="auto"
        width="640"
        height="300"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup="{"example_option":true}"
        ref="video"
      >
        <source :src="articles.video_url" type="video/mp4" />
      </video>
    </div>
>>>>>>> .theirs
  </div>
</template>
  <script>
import { singleArticleInfo } from "@/api/micro/micro";
export default {
  data() {
    return {
      articles: [],
      videoshow: false,
      articleshow: true
    };
  },
  methods: {
    singleArticleInfo(id, orgid) {
      singleArticleInfo(id, orgid).then(response => {
        if (response.data.state == 1) {
          var articles = response.data.data.articles;
          console.log("articles是什么", articles);
          this.articles = articles;
          if (articles.video_url != "") {
            this.articleshow = false;
            this.videoshow = true;
            this.$refs.video.src = articles.video_url;
          }
        }
      });
    }
  },
  created() {
    const id = this.$route.query.id;
    const orgid = this.$route.query.orgid;
    console.log("id是多少", id);
    console.log("orgid是多少", orgid);
    this.singleArticleInfo(id, orgid);
  }
};
</script>


<style lang="scss" scoped>
.page_newsDetail {
  overflow: hidden;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 0;
  }
}
.newsTitle {
  width: 19.9375rem;
  height: 3.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: rgba(7, 18, 40, 1);
  line-height: 1.875rem;
  margin: 1.3125rem 2.1875rem 0 1.3125rem;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg {
  width: 21rem;
  min-height: 12.0625rem;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(7, 18, 40, 1);
  line-height: 1.375rem;
  margin: 1.25rem 1.25rem 0 1.125rem;
}

.video{
  width: 100%;
  height: 250px;
  // border: solid 1px red;
}
</style>