|
@@ -0,0 +1,163 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="text-container" :style="{height:height,width:width}">
|
|
|
+ <ul class="allManage">
|
|
|
+ <li v-for="(item,index) in manageList" class="info">
|
|
|
+ <!--<span style="padding-left: 20px">{{parseTime(item.createdate, '{yyyy}-{mm}-{dd}')}}</span>-->
|
|
|
+ <span id="manage-title" @click="handleSee(item.url)">{{item.name}}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { listManageCurrentYearMonth } from "@/api/branch/manage";
|
|
|
+
|
|
|
+ const totalDuration = 2000;
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "ManageChart",
|
|
|
+ props: {
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: '210px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {},
|
|
|
+ // 学习资料列表
|
|
|
+ manageList: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.listManage();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSee(url) {
|
|
|
+ window.open(process.env.VUE_APP_BASE_API + url);
|
|
|
+ },
|
|
|
+ /** 查询学习资料列表 */
|
|
|
+ listManage() {
|
|
|
+ listManageCurrentYearMonth(this.queryParams).then(response => {
|
|
|
+ this.manageList = response.data;
|
|
|
+ console.log(response)
|
|
|
+ //判断是否需要滚动
|
|
|
+ if (this.manageList.length > 4) {
|
|
|
+ //设置文字滚动一轮时间
|
|
|
+ let elem = document.querySelector('.allManage');
|
|
|
+ let state = elem.style['animation'];
|
|
|
+ let time = this.manageList.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.manageList.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 scoped>
|
|
|
+ #manage-title {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ #manage-title:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .text-container {
|
|
|
+ line-height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: rgba(255, 255, 255, 0.6);
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ border-bottom: 1px dashed #C0C0C0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .allManage {
|
|
|
+ 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>
|