1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| <template>
| <div>
| <div class="commonBox">
| <div class="examinationList">
| <div class="listTitle">
| <span style="text-align: center" v-for="(item, index) in columns" :key="index">{{ item }}</span>
| </div>
| <vue-seamless :data="dataList" :class-option="scrollOption" :style="{ height: height }" class="seamless-warp">
| <div v-show="dataList.length">
| <slot name="tableCol"></slot>
| </div>
| <div style="text-align: center; opacity: 0.5" v-show="!dataList.length">暂无数据</div>
| </vue-seamless>
| </div>
| </div>
| </div>
| </template>
|
| <script>
| import vueSeamless from 'vue-seamless-scroll'
|
| export default {
| props: {
| dataList: {
| type: Array,
| default: function () {
| return []
| },
| },
| height: {
| type: String,
| default: '16vh',
| },
| columns: {
| type: Array,
| default: function () {
| return []
| },
| },
| scrollOption: {
| Object,
| default: function (params) {
| return {
| step: 0.9, //数值越大速度滚动越快
| limitMoveNum: 5, //开始无缝滚动的数据量 //this.fourDatata.length
| hoverStop: true, //是否开启鼠标悬停stop
| direction: 1, // 0向下 1向上 2向左 3向右
| openWatch: true, //开启数据实时监控刷新dom
| singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
| singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
| waitTime: 1000, //单步运动停止的时间(默认值1000ms)
| }
| },
| },
| },
| components: {
| vueSeamless,
| },
|
| data() {
| return {}
| },
| }
| </script>
|
| <style lang="less" scoped>
| .commonBox {
| width: 100%;
|
| .circleMain {
| display: flex;
| .leftdis {
| margin-left: 80px;
| }
| .singleCircle {
| width: 104px;
| text-align: center;
| .circle {
| margin-top: 30px;
| width: 74px;
| height: 74px;
| position: relative;
| line-height: 74px;
| text-align: center;
| font-size: 26px;
| color: white;
| background: #021a1a;
| border: 1px solid rgba(255, 255, 255, 0.14);
| border-radius: 50%;
| .content {
| width: 104px;
| height: 104px;
| top: -15px;
| left: -15px;
| background-size: 100%;
| position: absolute;
| animation: changDeg 2s linear 0.2s infinite;
| background-repeat: no-repeat;
| }
| p {
| font-size: 16px;
| color: #dbdbdb;
| width: 98px;
| margin-left: -10px;
| }
| }
| }
| }
| .examinationList {
| .seamless-warp {
| height: 16vh;
| overflow: hidden;
| }
| .listTitle {
| width: 100%;
| height: 34px;
| display: flex;
| justify-content: center;
| align-items: center;
| color: #98afcc;
| font-size: 12px;
| span {
| display: flex;
| flex: 1;
| justify-content: center;
| align-items: center;
| border: 1px solid #333842;
| height: 100%;
| }
| }
| }
| }
| </style>
|
|
