看板项目1111

网址

vue3获取dom元素

vue3获取dom元素_vue3获取dom元素的方法-CSDN博客

4.vueuse-useFullscreen优雅的使用全屏及退出全屏

4.vueuse-useFullscreen优雅的使用全屏及退出全屏-CSDN博客

useFullscreen | VueUse

前端项目全屏化处理方案

前端项目全屏化处理方案_前端全屏显示_懒羊羊h的博客-CSDN博客

pc端与移动端适配 解决方案

pc端与移动端适配 解决方案 - 知乎 (zhihu.com)

rem响应式

https://www.cnblogs.com/bug-maker-bxl/p/15856825.html

$ref语法糖（响应式语法糖）参考官方文档

今天已做全屏和适配

代码如下：

<!-- 国星半导体外延生产看板 -->
<template>
  <dv-full-screen-container ref="el">
    <div @click="toggle" style="color: #fff;">
      {{ !isFullscreen ? '全屏模式' : '退出全屏' }}
    </div>
    <header>
      <dv-decoration-8 style="width:33%;height:50px" />
      <dv-decoration-5 style="width:33%;height:40px;" />"
      <dv-decoration-8 style="width:33%;height:50px;" :reverse="true" />
      <div class="header-title">国星半导体外延生产看板</div>
      <Time style="color: #fff;" class="time"></Time>
    </header>
    <main>
    </main>
  </dv-full-screen-container>
</template>

<script setup>
import { ref } from 'vue';
import { useFullscreen } from '@vueuse/core';
const el = ref()
const { isFullscreen, toggle } = useFullscreen(el)
</script>

<style lang="less" scoped>
#dv-full-screen-container {
  background: url('../../../assets/Background.png');
  background-size: 100% 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  position: relative;
}

.dv-decoration-5 {
  transform: translateY(10px);
}

.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

.time {
  position: absolute;
  top: 10px;
  right: 80px;
}
</style>

<!-- 时间组件 -->
<template>
    <span v-bind="$attrs">{{ time }}</span>
</template>

<script setup>
// import {$ref} from 'vue/macros' 已经废弃
import { ref, onUnmounted } from 'vue';
let time = $ref(null)
const timeId = setInterval(() => {
    let wk = new Date().getDay()
    let yy = new Date().getFullYear()
    let mm = new Date().getMonth() + 1
    let dd = new Date().getDate()
    let hour = new Date().getHours()
    let minute = new Date().getMinutes()
    let second = new Date().getSeconds()
    let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    let week = weeks[wk]
    if (mm < 10) {
        mm = "0" + mm
    }
    if (dd < 10) {
        dd = "0" + dd
    }
    if (hour < 10) {
        hour = "0" + hour
    }
    if (minute < 10) {
        minute = "0" + minute
    }
    if (second < 10) {
        second = "0" + second
    }
    time = yy + "年" + mm + "月" + dd + "日" + " " + hour + ":" + minute + ":" + second + " " + week
}, 1000)
onUnmounted(() => {
    clearInterval(timeId);
});
</script>

<style lang="scss" scoped></style>

// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}