<template>
  <div class="container11">
    <!-- <marquee direction="up" scrollamount="5" v-if="show"> -->
      <div
        class="aj"
        v-for="(item, index) in data"
        :key="index"
        @click="fn(item.caseNumber)"
      >
        <div id="triangle-up"></div>
        <div class="top">
          <div class="left">{{ item.title }}</div>
          <div class="right">{{ item.date }}</div>
        </div>
        <div class="text">
          {{ item.content }}
        </div>
      </div>
    <!-- </marquee> -->
  </div>
</template>

<script>
import { getAjdt } from "@/api/ddzhxt.js";
export default {
  data() {
    return {
      data: [],
      show:false
      //  ajqkUrl:'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html?caseNumber=',
    };
  },
  created() {
    this.getAjdt();
    setInterval(() => {
      this.getAjdt();
      // console.log(123);
    }, 10000);
  },
  methods: {
    fn(caseNumber) {
      layer.open({
        type: 2,
        content: `http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html?caseNumber=${caseNumber}`,
        area: ["80%", "80%"],
        title: "",
      });
    },
    async getAjdt() {
      try {
        const res = await getAjdt();
        //  console.log(res);
        this.data = res.data.list;
        this.show = true
        // this.data.length++
        //  console.log(this.data);
      } catch (error) {
        console.log("数据获取失败");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container11 {
  width: 17.5vw;
  height: 84.1424vh;
  //   background-color: pink;
  //   border: 1px solid #00ffff;
  overflow: hidden;

  .aj {
    width: 17.5vw;
    height: 8.4142vh;
    border-bottom: 1px solid #1a66ae;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    #triangle-up {
      width: 0;

      height: 0;

      border-right: 0.4167vw solid transparent;

      // border-right: 50px solid transparent;

      border-top: 0.4167vw solid #00ffff;
    }
    .top {
      //  background-color: #fff;
      width: 17.5vw;
      display: flex;
      font-size: 0.625vw;
      color: #fff;
      //  justify-content: space-around;
      // padding-right: 10px;
      // padding-right: ;
      padding: 0.3236vh 0.5208vw;
      align-items: center;
      .left {
        margin-right: 1.5625vw;
      }
    }
    .text {
      // width: 100%;
      width: 17.5vw;
      // height: 5.8252vh;
      text-align: left;
      font-size: 0.625vw;
      color: #fff;
      padding-left: 0.7813vw;
      // overflow: hidden;
      // background-color: pink;
    }
  }
}
</style>