crs-double-resistance/src/view/articleDetail/index.vue

<template>
    <div class="box">
        <banner></banner>
        <div class="article">
          <div class="return-news" @click="GoNews">
            <img class="return-img" src="@/assets/img/antibody/left.png" alt="">
            <p class="return-text">Back</p>
          </div>
          <p class="article_title">{{ overView.articleTitle }}</p>
          <p class="article_text">{{ overView.articleContent }}</p>
        </div>
    </div>
  </template>
<script>
import banner from "@/components/banner";
export default {
  name: "articleDetail",
  components: {
    banner
  },
  data() {
    return {
      overView: {}
    };
  },
  methods: {
    changeSearchById() {
      this.$api.post("/basb/searchById", {
        id: this.$route.query.id
      }).then(res => {
        console.log(res)
        this.overView = res.data
      })
    },
    GoNews() {
      this.$router.push({
        name: "article"
      });
    }
  },
  mounted() {},
  created() {
    this.changeSearchById()
  }
};
</script>
<style lang="scss" scoped>
  @media screen and (min-width: 751px) and (max-width: 9999px) {
    .box {
      .article{
        width: 1200px;
        margin: 30px auto 90px;
        .return-news{
          display: flex;
          align-items: center;
          margin-bottom: 25px;
          cursor: pointer;
          .return-img{
            width: 16px;
          }
          .return-text{
            font-size: 14px;
            color: #333333;
            line-height: 1;
            margin-left: 10px;
          }
        }
        .article_title{
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 15px;
        }
        .article_text{
          font-size: 14px;
          line-height: 24px;
        }
      }
    }
  }
</style>