SynthesisManagement/src/views/screens/screen-components/WeiDianZiCheJianGongGao.vue

<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="微电子车间公告" />
    <dv-scroll-board
      :config="config"
      style="width: 100%; height: calc(100% - 32px)"
      @mouseover="tableHover"
    />
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import {
  microelectronicWorkshopNotice,
  productionPlan,
  teamAttendance,
} from "@/api/screens";

const config = ref({});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
const bigScreenData: any = inject("bigScreenData");
const bsFS = bigScreenData.value.fontSize * 1.5;
onMounted(async () => {
  let res = await microelectronicWorkshopNotice();
  if (res.data.length > 0) {
    let bigData: any[] = [];
    res.data.forEach((item: any) => {
      let row = [
        `<div  style='font-size:${bigScreenData.value.fontSize * 2}px;width: 100%;height: 100%;'>
            <div style="display: flex;align-items: center;justify-content: space-between;height: 60px">
                <span style="color: blue;font-size:150%;">${item.title}</span>
            <span>${item.updated}</span>
            </div>
            <div id="scroll-table-id" style="word-break: break-all;white-space: normal;display: flex;flex-direction: column;align-items: start;justify-content: start;width: 100%;height: 100%;overflow: hidden;font-size: ${bigScreenData.value.fontSize * 1.5}px;line-height: ${bigScreenData.value.fontSize * 2 + 5}px">
                ${item.content}
            </div>
        </div>`,
      ];
      bigData.push(row);
    });

    config.value = {
      data: bigData,
      rowNum: 1,
      // index: true,
      // columnWidth: [50],
      waitTime: 10000,
      align: ["left"],
      carousel: "page",
      click: (row: any, index: number) => {
        console.log("mouseover", row, index);
      },
    };
  }
});

const tableHover = (data: any) => {
  // console.log("mouseover", data.row[data.columnIndex]);
};
</script>

<style lang="scss" scoped>
.message-row {
  width: 100%;
  height: 60px;
  border: 1px solid red;
}
.scroll-table-id {
  p {
    font-size: 14px;
  }
}
</style>

<style lang="scss">
#scroll-table-id {
  font-size: v-bind("bsFS"); /* 示例值，按需调整 */
}

#scroll-table-id h1 {
  font-size: v-bind("bsFS") !important; /* 使用!important覆盖用户样式 */
  margin: 0;
}
#scroll-table-id p {
  font-size: v-bind("bsFS") !important; /* 使用!important覆盖用户样式 */
  margin: 0;
}
</style>