定制大屏调整位置

packages/bigscreen/dv/AppCentralTaskDV.vue

@@ -0,0 +1,133 @@
+<template>
+  <section class="AppCentralTaskDV">
+    <!--    <ai-dv-background :src="bgImage"/>-->
+    <div class="coreTask">
+      <div class="leftBox">
+        <div class="boxTitle">{{ coreTaskData.titleText }}</div>
+        <dv-scroll-board v-if="refresh" :config="coreTaskData"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import {scrollBoard} from '@jiaminghi/data-view'
+import bgImage from './assets/centralTask/bg.png'
+import Vue from "vue";
+
+Vue.use(scrollBoard)
+export default {
+  name: "AppCentralTaskDV",
+  label: "数据大屏-重点工作",
+  props: {
+    nav: {default: () => ({})}
+  },
+  inject: {
+    dv: {default: ""}
+  },
+  computed: {
+    coreTaskData() {
+      return {
+        headerHeight: 52,
+        header: ['基层组织建设', "社区治理", "便民服务效能", "城市管理"],
+        headerBGC: 'rgba(0, 113, 255, 0.5)',
+        oddRowBGC: "rgba(5, 65, 139, 0.5)",
+        evenRowBGC: "rgba(5, 65, 139, 0.5)",
+        waitTime: 6000,
+        align: ["center", "start", "center", "center"],
+        rowNum: 5,
+        ...this.nav.data,
+      }
+    },
+  },
+  data() {
+    return {bgImage, refresh: true}
+  },
+  watch: {
+    nav: {
+      deep: true,
+      handler() {
+        this.refresh = false
+        this.$nextTick(() => this.refresh = true)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppCentralTaskDV {
+  height: 100%;
+  padding: 0 0 60px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .coreTask {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 53px;
+    margin-top: 56px;
+
+    .leftBox {
+      width: 100%;
+      height: 100%;
+      background-image: url("./assets/centralTask/box.png");
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 0 40px 42px;
+      box-sizing: border-box;
+    }
+  }
+
+  .boxTitle {
+    height: 68px;
+    width: 534px;
+    background-image: url("./assets/centralTask/titleBox.png");
+    text-align: center;
+    font-size: 22px;
+    font-weight: 400;
+    color: #71F8FF;
+    transform: translateY(-32px);
+    line-height: 68px;
+  }
+
+  ::v-deep .dv-scroll-board {
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .header {
+      color: #9FDBFB;
+      font-size: 20px;
+
+      .header-item {
+        text-align: center;
+        border: 1px solid #054596;
+      }
+    }
+
+    .row-item {
+      color: #68F0FC;
+      font-size: 18px;
+      overflow: hidden;
+
+      .ceil {
+        border: 1px solid #054596;
+        border-top: none;
+        position: relative;
+        line-height: 30px;
+        white-space: normal;
+        padding: 20px;
+      }
+    }
+  }
+}
+</style>