<template>
  <div class="container10" @click="fn(ryxxcjqkUrl)">
    <div class="title">
      <div class="text">学历</div>
      <div class="one">人数</div>
      <div class="one">占比</div>
    </div>
    <marquee direction="up" scrollamount="2" v-if="show">
      <div class="content" v-for="(item, index) in data" :key="index">
        <div class="text">{{ item[0] }}</div>
        <div class="one">{{ item[1] }}</div>
        <div class="one">{{ item[2] }}</div>
      </div>
    </marquee>
  </div>
</template>
<script>
import { getXlqk } from "@/api/jcxxxt.js";
export default {
  data() {
    return {
      data: [],
      show: false,
      ryxxcjqkUrl:
        "http://219.147.99.164:8082/population/route/bigdata/list-basepopulationinfo.html",
    };
  },
  created() {
    this.getXlqk();
  },
  methods: {
    fn(url) {
      layer.open({
        type: 2,
        content: url,
        area: ["80%", "80%"],
        title: "",
      });
    },
    async getXlqk() {
      try {
        const res = await getXlqk();
        // console.log(res);
        this.data = res.data.list;
        this.show = true;
      } catch (error) {
        console.log("数据获取失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container10 {
  width: 22.8125vw;
  height: 24.5161vh;
  overflow: hidden;

  marquee {
    width: 22.8125vw;
    height: 23.4408vh;
  }

  .title {
    width: 22.8125vw;
    // text-align: left;
    display: flex;
    color: #fff;
    // justify-content: space-around;
    font-size: 0.8vw;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .content {
    width: 22.8125vw;
    // text-align: left;
    display: flex;
    color: #fff;
    //  justify-content: space-around;
    font-size: 0.8vw;
  }

  .one {
    width: 30%;
    text-align: center;
  }

  .text {
    width: 40%;
    text-align: center;
  }
}
</style>