park-h/src/components/memorabilia.vue

<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">
                {{ moment(+detail.time).format("YYYY-MM-DD HH:mm") }}
              </div>
            </div>
            <div class="firewall3">
              <p>{{ detail.digest }}</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">
                {{ moment(+detail.time).format("YYYY-MM-DD HH:mm") }}
              </div>
            </div>
            <div class="firewall3">
              <p>{{ detail.digest }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import moment from "moment";
import { getNews } from "api/index.ts";
import { defineComponent } from "vue";

export default defineComponent({
  name: "memorabilia",
  data() {
    return {
      queryNum: 5,
      details: [],
    };
  },

  created() {
    this.queryNews();
  },

  methods: {
    moment,

    // 查询新闻
    async queryNews() {
      try {
        const { queryNum } = this;
        const param = {
          queryNum,
        };
        const data = await getNews(param);
        this.details = data;
        console.log(this.details);
      } catch (error) {
        console.log(error);
      }
    },
  },
});
</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>