|
|
@@ -0,0 +1,151 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="text-container" :style="{height:height,width:width}">
|
|
|
+ <ul class="allBirth">
|
|
|
+ <li v-for="(item,index) in politicalBirthdayList" class="info">
|
|
|
+ <svg-icon icon-class="dangao" class="dangao"></svg-icon>
|
|
|
+ <span style="padding-left: 20px">{{item.nickName}}</span>
|
|
|
+ <span style="padding-left: 20px">{{item.partyEntryTime}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { listPoliticalBirthday } from "@/api/branch/member";
|
|
|
+
|
|
|
+ const totalDuration = 2000;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "BrithChart",
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: '210px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {},
|
|
|
+ // 政治生日列表
|
|
|
+ politicalBirthdayList: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.listPoliticalBirthday();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询政治生日列表 */
|
|
|
+ listPoliticalBirthday() {
|
|
|
+ listPoliticalBirthday(this.queryParams).then(response => {
|
|
|
+ this.politicalBirthdayList = response.data;
|
|
|
+ //判断是否需要滚动
|
|
|
+ if (this.politicalBirthdayList.length > 4) {
|
|
|
+ //设置文字滚动一轮时间
|
|
|
+ let elem = document.querySelector('.allBirth');
|
|
|
+ let state = elem.style['animation'];
|
|
|
+ let time = this.politicalBirthdayList.length * 2
|
|
|
+ elem.style['animation'] = 'myMove ' + time + 's linear infinite';
|
|
|
+ let state1 = elem.style['animation-fill-mode'];
|
|
|
+ elem.style['animation-fill-mode'] = 'forwards';
|
|
|
+ //设置文字无缝滚动高度
|
|
|
+ let param = this.politicalBirthdayList.length * 50
|
|
|
+ let myFirstkeyframes = "@keyframes myMove{0% {transform: translateY(200px);}100% {transform: translateY(-" + param +"px);}}";
|
|
|
+ let style = document.createElement("style");
|
|
|
+ style.setAttribute("type", "text/css");
|
|
|
+ document.head.appendChild(style);
|
|
|
+ const sheet = style.sheet;
|
|
|
+ sheet.insertRule(myFirstkeyframes, 0);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .text-container {
|
|
|
+ line-height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dangao {
|
|
|
+ width: 40px !important;
|
|
|
+ height: 40px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ font-weight:bold;
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ border-radius:5px 5px 5px 5px ;
|
|
|
+ /*border: 2px solid rgba(41, 107, 155, 0.71);*/
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .allBirth {
|
|
|
+ margin: -10px 0 0 0;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+ /*animation: myMove 10s linear infinite;
|
|
|
+ animation-fill-mode: forwards;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ /*文字无缝滚动*/
|
|
|
+ /*@keyframes myMove {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(200px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-300px);
|
|
|
+ }
|
|
|
+ }*/
|
|
|
+
|
|
|
+ /*文字停顿滚动*/
|
|
|
+ @keyframes myMove2 {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ 10% {
|
|
|
+ transform: translateY(-30px);
|
|
|
+ }
|
|
|
+ 20% {
|
|
|
+ transform: translateY(-30px);
|
|
|
+ }
|
|
|
+ 30% {
|
|
|
+ transform: translateY(-60px);
|
|
|
+ }
|
|
|
+ 40% {
|
|
|
+ transform: translateY(-60px);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: translateY(-90px);
|
|
|
+ }
|
|
|
+ 60% {
|
|
|
+ transform: translateY(-90px);
|
|
|
+ }
|
|
|
+ 70% {
|
|
|
+ transform: translateY(-120px);
|
|
|
+ }
|
|
|
+ 80% {
|
|
|
+ transform: translateY(-120px);
|
|
|
+ }
|
|
|
+ 90% {
|
|
|
+ transform: translateY(-150px);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-150px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info span {
|
|
|
+ padding-top: 5px;
|
|
|
+ }
|
|
|
+</style>
|
