<template>
  <div class="roll">
    <div class="box-bg">
      <div style="overflow:hidden">
        <div class="matter" id="memorabilia">
          <div :key="index" class="content" v-for="(detail,index) in details">
            <div class="firewall">
              <div class="firewall1">{{detail.title}}</div>
              <div class="firewall2">{{detail.time}}</div>
            </div>
            <div class="firewall3">
              <p>{{detail.describe}}</p>
            </div>
          </div>
          <div :key="index" class="content" v-for="(detail,index) in details">
            <div class="firewall">
              <div class="firewall1">{{detail.title}}</div>
              <div class="firewall2">{{detail.time}}</div>
            </div>
            <div class="firewall3">
              <p>{{detail.describe}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "memorabilia",
  data() {
    return {
      details: [
        {
          title: "物流园区升级",
          time: "两周前",
          describe:
            "中国第一个保税物流园区升级 形成1+1+3联动发展新格局。外高桥港综合保税区今后将发挥“保税+”功能优势，围绕“提质、升级、开放、创新”，推动产业链、供应链、价值链和创新链融合发展，探索具有创新示范意义、体现差异化竞争、发挥引领作用的外高桥港综合保税区创新试验新路子，为我国改革开放积累新经验、提供新样本。",
        },
        {
          title: "物流园区资产证券化探索与突破",
          time: "一个月前",
          describe:
            "观察当前物流市场，物流园区的盈利模式明确，现金流相对稳定，比较符合发行公募REITs的条件。对于一些自持物流园区的电商企业来说，扩大规模的需求是明确且迫切的，但自建仓储对财务的影响也是现实存在的。公募REITs的推行正好能缓解重资产对财务造成的压力。",
        },
        {
          title: "物流园区的未来前景",
          time: "一周前",
          describe:
            "利用信息互联网和设施物联网推动物流园区的全面接入，以信息互联、设施互联带动物流互联，实现园区业务线上化转型，打造在线物流园区。",
        },
        {
          title: "积极开展安全生产检查",
          time: "3天前",
          describe:
            "近日,物流园区安监局对落实企业安全生产主体责任情况进行专项检查，执法人员实地查看了公司的维修车间、配件存储库房、喷漆车间,并对公司安全生产各类档案建立情况进行检查。针对检查中发现的问题隐患，下达《责令限期整改指令书》，要求企业限期整改落实，确保企业生产安全。",
        },
      ],
    };
  },

  methods: {},
});
</script>

<style scoped>
.roll {
  width: 100%;
  height: 100%;
  position: relative;
}

.roll .box-bg {
  width: 80%;
  height: 88%;
  position: absolute;
  top: 6%;
  left: 10%;
  overflow: hidden;
}

.memorabilia {
  width: 1440rem;
  height: 1110rem;
}

.matter {
  animation: myMove 20s linear infinite;
  animation-fill-mode: forwards;
  overflow: hidden;
}
/*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-392rem);
  }
}

.content {
  color: #fff;
  width: 100%;
  height: 79rem;
  background: url("../assets/img/memorabilia-bg.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20rem;
  padding: 6rem 20rem 0;
}

.firewall {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.firewall1 {
  font-size: 16rem;
}
.firewall2 {
  font-size: 12rem;
}
.firewall3 {
  color: #19a2cc;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.dashboardFather {
  display: flex;
}
.matter {
  overflow: auto;
}
</style>
