screenFront/src/views/Temp/Winding/index.vue

<!--
 * @Author: 123456 123456
 * @Date: 2023-05-12 16:37:43
 * @LastEditors: 123456 123456
 * @LastEditTime: 2023-05-15 10:56:17
 * @FilePath: \screenFront\src\views\Temp\Winding\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div :class="$style['container']">
        <div class="header">
            <div class="title">
                <header1 :config="header1Config" :width="'1920px'" :height="'100px'" :title="'100'"></header1>
            </div>
        </div>

        <div class="content">
            <div style="width: 30%;">
                <left :title="'设备信息'"></left>
            </div>
            <div style="width: 100%;margin: 0 20px;flex: 1;">
                <center></center>
            </div>
            <div style="width: 30%;">
                <right :list="features_list" :title="'机器特性'"></right>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import header1 from "./component/header1.vue";
import left from "./component/left.vue";
import right from "./component/right.vue";
import center from "./component/center.vue";
import { ref } from "vue";


let header1Config = {
    value: 80,
    colors: ["#01c4f9", "#c135ff"],
    borderWidth: 3,
}
let features_list = [
    '再登自主研发簇绒机控制系统，友好的人机界面，触控灵活，存储量大，确保整机的高精度运行',
    '15.6寸高清触控一体机，操作简单',
    '机头可任意角度旋转，可任意方向簇绒，图案表现力更生动',
    '机头马达升降，升降行程：100mm，方便换框，利于跨步簇绒',
    '自动供油系统，减少机头噪音，延长使用寿命',
    '机头X向丝杠+导轨运动，确保高精度，稳定可靠',
    '采用全伺服马达控制驱动，设备稳定性高，保证高品质簇绒效果',
    '专业割绒结构，动作稳定快速',
    '配套再登智能簇绒CAD软件，图案设计简单易学',
    '可选配定制绷框'
]
window.document.title = "设备详情";
</script>
<style module>
.container {
    height: 1080px;
    width: 1920px;
    color: #20aec5;
    background-color: #100c2a;
    box-sizing: border-box;
}
</style>
<style scoped>
.content {
    display: flex;
    width: 100%;
    --header: 100px;
    height: calc(1080px - var(--header));
    box-sizing: border-box;
    justify-content: space-between;
}
.content>div {
    height: 100%;
    box-sizing: border-box;
}
</style>

<style>
body {

    /* --content:calc(100vh - var(--header)) */
    overflow: hidden !important;
    -ms-overflow-style: none;
    /* IE + Edge */
    scrollbar-width: none;
    /* Firefox */
}

::-webkit-scrollbar {
    display: none;
}
</style>