<template>
  <div class="content">
    <van-nav-bar title="详情" left-arrow @click-left="onClickLeft" />
    <div class="content-list">
      <div>
        <p>
          {{ zxxqInfo.name }}
        </p>
        <div>{{ zxxqInfo.cate_name }}</div>
        <p>{{ zxxqInfo.create_dateline_format }}</p>
      </div>
    </div>

    <img :src="https + '/' + zxxqInfo.img" alt="" />
    <div class="text-content" v-html="zxxqInfo.content"></div>
    <div class="img-list">
      <img src="@/assets/images/qzzx.png" alt="" />
      <img src="@/assets/images/qzzx.png" alt="" />
      <img src="@/assets/images/qzzx.png" alt="" />
    </div>
  </div>
</template>

<script>
import { qzzx_detail } from "./api";
export default {
  data() {
    return {
      active: 2,
      tableData: [],
      zxxqInfo: "",
      https: window.GLOBAL_CONFIG.api,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ name: "qzzx" });
    },

    zxxqData() {
      let data = {
        ni_id: this.ni_id,
      };

      qzzx_detail(data).then((res) => {
        if (res.code == 1) {
          this.zxxqInfo = res.data.one_info;
        }
      });
    },
  },

  mounted() {
    if (this.$route.params.id != "") {
      this.ni_id = this.$route.params.id;
      this.zxxqData();
    }
  },
};
</script>

<style  lang="scss" scoped>
.content {
  margin: 0 auto;
  background-color: #fff;
}
::v-deep .van-nav-bar {
  width: 100%;
  height: 1 * 13.3vw;
  line-height: 1 * 13.3vw;
  background-color: #003eee;
  .van-nav-bar__title {
    color: #fff !important;
    font-size: 0.36 * 13.3vw;
    font-weight: 350;
  }
  .van-nav-bar__text {
    color: #fff !important;
    font-size: 0.32 * 13.3vw;
    font-weight: 350;
  }
}
.content-list {
  box-sizing: border-box;
  width: 7 * 13.3vw;
  height: 1.6 * 13.3vw;
  margin: 0.135 * 13.3vw 2% 0.135 * 13.3vw 3%;
  display: flex;
  flex-wrap: wrap;
  margin: 0.2 * 13.3vw 0.31 * 13.3vw 0 0.17 * 13.3vw;

  div {
    width: 100%;
    position: relative;
    p:first-of-type {
      font-size: 0.28 * 13.3vw;
      font-family: Segoe UI, Segoe UI-Regular;
      font-weight: 400;
      text-align: left;
      color: #000000;
    }
    p:last-of-type {
      font-size: 0.24 * 13.3vw;
      font-family: Segoe UI, Segoe UI-Regular;
      font-weight: 400;
      text-align: left;
      color: #bdbdbd;
      display: inline-block;
      position: absolute;
      right: 0;
      bottom: 0.15 * 13.3vw;
    }
    div {
      width: 1.2 * 13.3vw;
      height: 0.42 * 13.3vw;
      border: 0.01 * 13.3vw solid #0b2aca;
      border-radius: 0.06 * 13.3vw;
      font-size: 0.24 * 13.3vw;
      font-family: Segoe UI, Segoe UI-Regular;
      font-weight: 400;
      text-align: center;
      color: #003eee;
      display: inline-block;
      position: absolute;
      left: 0;
      bottom: 0.15 * 13.3vw;
    }
  }
}
.main-img {
  width: 7.02 * 13.3vw;
  height: 3.2 * 13.3vw;
  margin: 0.2 * 13.3vw 0.31 * 13.3vw 0.37 * 13.3vw 0.17 * 13.3vw;
}
.text-content {
  width: 7.01 * 13.3vw;
  height: 5.35 * 13.3vw;
  margin: 0 0.31 * 13.3vw 0 0.17 * 13.3vw;
  opacity: 0.65;
  font-size: 0.24 * 13.3vw;
  font-family: PingFang-SC-Regular;
  text-align: left;
  color: #010101;
  line-height: 0.48 * 13.3vw;
}
.img-list {
  width: 7.01 * 13.3vw;
  height: 2.3 * 13.3vw;
  margin: 0 0.31 * 13.3vw 0 0.17 * 13.3vw;
  img {
    height: 2.3 * 13.3vw;
    float: left;
    width: 33.33%;
    padding: 0.07 * 13.3vw;
  }
}
</style>
