<template>
  <div>
    <div class="box">
      <div class="top">
        <div class="topone">
          <van-icon name="arrow-left" class="leftarrow" @click="backHistory" />
          <span class="newsbull"> 新闻公告 </span>
        </div>
        <div class="cut">
          <button class="notification" @click="notificationa">通知公告</button>
          <button class="newsdetails" @click="newsdetailsb">新闻详情</button>
        </div>
      </div>
      <div class="content" v-if="show">
        <div class="contents" @click="$router.push('./newsDetails') ">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
      </div>
      <div class="content contentb" v-else>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">a新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">a新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">a新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
        <div class="contents">
          <img
            src="../../assets/images/Newbusinessentity/P_fw1200.png"
            alt=""
          />
          <div class="profitmniu">新疆：智慧养牛牛牛牛，利润一头抵五头</div>
          <div class="times">2022-3-3</div>
        </div>
      </div>
      <div class="fotter">
        <tabbar></tabbar>
      </div>
    </div>
  </div>
</template>
   
<script>
import tabbar from "./conter.vue";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      show: true,
    };
  },
  methods: {
    //通知公告
    notificationa() {
      if (this.show == true) {
        return this;
      } else {
        this.show = !this.show;
      }
    },
    newsdetailsb() {
      //新闻详情
      if (this.show == false) {
        return this;
      } else {
        this.show = !this.show;
      }
    },
    backHistory() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped lang="scss">
span,
li,
ul {
  display: inline-block;
}
.top {
  width: 100%;
  height: 3.11rem;
  background: url("../../assets/images/Newbusinessentity/1_01.jpg") no-repeat;
  overflow: hidden;
  .topone {
    width: 100%;
    display: flex;
    margin-top: 0.2rem;
    .leftarrow {
      color: #ffffff;
      font-size: 0.5rem;
      margin: 0.8rem 0 0rem 0.5rem;
      width: 0.5rem;
    }
    .newsbull {
      color: #ffffff;
      font-size: 0.5rem;
      font-weight: normal;
      margin: 0.7rem auto 0 3rem;
    }
  }
  .cut {
    display: flex;
    justify-content: space-between;
    .notification,
    .newsdetails {
      color: #ffffff;
      font-size: 0.35rem;
      background: #c5e5cc;
      border-radius: 0.3rem;
      padding: 0.1rem 0.9rem 0.1rem 0.9rem;
    }
    .notification {
      margin: 0.5rem 0 0 0.7rem;
    }
    .newsdetails {
      margin: 0.5rem 0.6rem 0 0.7rem;
    }
  }
}
.content {
  width: 95%;
  height: 17.2rem;
  margin: 0 auto;
  overflow: hidden;
  .contents {
    display: flex;
    justify-content: space-around;
    margin-top: 0.4rem;

    .profitmniu {
      width: 3.8rem;
    }
    .times {
      height: 0.45rem;
      margin-top: 1.2rem;
      color: #8f8f8f;
    }
  }
}
.fotter[data-v-40d35e05] {
  height: 1.4rem;
}
</style>