Merge remote-tracking branch 'origin/240806_pro_release' into 240806_pro_release

package.json

@@ -21,7 +21,8 @@
     "vue": "^2.3.3",
     "vue-axios": "^3.5.2",
     "vue-cookies": "^1.8.3",
-    "vue-router": "^2.3.1"
+    "vue-router": "^2.3.1",
+    "vue-seamless-scroll": "^1.1.23"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

src/module/databoard/components/card/scroll-list.vue

+<template>
+  <div class="scroll_list" ref="scrollList">
+    <vue-seamless-scroll :data="rows" class="scroll_box" :class-option="defineScroll" style="height: 100%;overflow: hidden;width: 100%;color: white;font-size: 14px;">
+      <ul >
+        <li v-for="(item, index) in rows" :key="index" :style="{height: 100 / rows.length + '%'}">
+          <span v-if="showIcon&&!item.blankColumn" style="display: table-cell;vertical-align: middle;">
+            <div class="col_number">{{ index + 1 }}</div>
+          </span>
+          <span class="name" style="display: table-cell;vertical-align: middle;" :style="titleIndependentStyle?item.titleStyle:columnsStyle['title']">{{item.title}}</span>
+        </li>
+      </ul>
+    </vue-seamless-scroll>
+  </div>
+</template>
+<script>
+export default {
+  name: "ScrollList",
+  props: {
+    showIcon: {
+      type: Boolean,
+      default: true
+    },
+    titleIndependentStyle:{
+      type: Boolean,
+      default: false
+    },
+    columnsStyle:{
+      type: Object,
+      default: function () {
+        return {};
+      }
+    },
+    rows: {
+      type: Array,
+      default:function(){
+        return [
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]}
+        ];
+      }
+    },
+    colFormatter:{
+      type: Object,
+      default: function(){
+        return {};
+      }
+    },
+    mouseHand: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    defineScroll() {
+      return {
+        step: 0.2, // 数值越大速度滚动越快
+        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.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)
+      };
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    // this.$refs.winnerList.style.cursor = this.$props.mouseHand ? "pointer" : "default"
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+
+.scroll_list {
+
+}
+
+.scroll_list::-webkit-scrollbar { width: 0 !important }
+
+
+
+li:nth-child(odd) {
+  background-color: #0E5FFF20;
+}
+
+li:nth-child(even) {
+  background-color: #0E5FFF40;
+}
+
+td {
+  padding: 0 0 0 1rem;
+}
+
+.col_number {
+  height: 38%;
+  min-width: 38px;
+  color: #19EBFF;
+  font-weight: bold;
+  text-align: center;
+  line-height: 38px;
+  background: url(../../assets/img/number_bg.png) no-repeat center;
+}
+
+
+
+
+</style>

src/module/databoard/components/card/winners-list.vue

@@ -3,12 +3,12 @@
     <table>
       <tbody>
       <tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
-        <td v-if="showIcon"><div class="col_number">{{ idx + 1 }}</div></td>
-        <td class="winner_span" :style="columnsStyle['title']">{{ row.title }}</td>
-        <td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
-          <p class="key_span">{{ col.key }}</p>
-          <p class="value_span" :style="col.valStyle">{{colFormatter[''+idz]?colFormatter[''+idz](col.value):col.value }}</p>
-        </td>
+          <td v-if="showIcon"><div class="col_number">{{ idx + 1 }}</div></td>
+          <td class="winner_span" :style="titleIndependentStyle?row.titleStyle:columnsStyle['title']">{{ row.title }}</td>
+          <td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
+            <p class="key_span">{{ col.key }}</p>
+            <p class="value_span" :style="col.valStyle">{{colFormatter[''+idz]?colFormatter[''+idz](col.value):col.value }}</p>
+          </td>
       </tr>
       </tbody>
     </table>
@@ -23,6 +23,10 @@ export default {
       type: Boolean,
       default: true
     },
+    titleIndependentStyle:{
+      type: Boolean,
+      default: false
+    },
     columnsStyle:{
       type: Object,
       default: function () {
@@ -33,9 +37,9 @@ export default {
       type: Array,
       default:function(){
         return [
-          {title: '标题列', column: [{key: '字段', value: '0'}]},
-          {title: '标题列', column: [{key: '字段', value: '0'}]},
-          {title: '标题列', column: [{key: '字段', value: '0'}]}
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]},
+          {title: '标题列',titleStyle:{},blankColumn:false, column: [{key: '字段', value: '0'}]}
         ];
       }
     },
@@ -98,6 +102,7 @@ td {
 .winner_span {
   color: white;
   font-size: 14px;
+  display: table-cell;
 }
 
 .key_span {

src/module/index/index.js

@@ -4,6 +4,8 @@ import Vue from 'vue'
 import App from './index.vue'
 import router from './router/index_router'
 import '../databoard/assets/index.css'
+import vueSeamlessScroll  from "vue-seamless-scroll"
+Vue.use(vueSeamlessScroll)
 
 Vue.config.productionTip = false