graphite_vue/src/views/graphite/index.vue

<template>
    <div class="graphite_home component-page">
        <div class="heat_area">
            <div v-for="item in heatList" :key="item">
                <HeatPosition :heatInfo="item"></HeatPosition>
            </div>
        </div>
        <!--拍照区-->
        <div class="pickture_area">
            <TakePickture></TakePickture>
            <!--操作区-->
            <div class="graphite_btn">
                <div><van-button size="large" class="btn_size open">开门</van-button></div>
                <van-row class="graphite_operate">
                    <van-col span="11">
                        <van-button  size="large" class="btn_size">开始任务</van-button>
                    </van-col>
                    <van-col span="11">
                        <van-button  size="large" class="btn_size">结束任务</van-button>
                    </van-col>
                </van-row>
                <van-row class="graphite_operate">
                    <van-col span="11">
                        <van-button  size="large" class="btn_size">选择配方</van-button>
                    </van-col>
                    <van-col span="11">
                        <van-button  size="large" class="btn_size">执行配方</van-button>
                    </van-col>
                </van-row>
                <van-row class="graphite_operate">
                    <van-col span="11">
                        <van-button  size="large" class="btn_size" @click="onAddWaste">添加溶液</van-button>
                    </van-col>
                    <van-col span="11">
                        <van-button  size="large" class="btn_size">摇匀</van-button>
                    </van-col>
                </van-row>
                <van-row class="graphite_operate">
                    <van-col style="width:306px">
                        <van-button  size="large" class="btn_size">移至加热</van-button>
                    </van-col>
                    <van-col span="7">
                        <van-button  size="large" class="btn_size">移至加液</van-button>
                    </van-col>
                    <van-col span="7">
                        <van-button  size="large" class="btn_size">移至特殊</van-button>
                    </van-col>
                </van-row>
                <van-row class="graphite_operate">
                    <van-col span="11">
                        <van-button  size="large" class="btn_size">开始加热</van-button>
                    </van-col>
                    <van-col span="11">
                        <van-button  size="large" class="btn_size">抬起托盘</van-button>
                    </van-col>
                </van-row>

            </div>
        </div>
        <van-overlay :show="wasteVisible" style="z-index: 999;">
            <div class="waste">
                <div class="addWaste">
                    <AddWaste @cancel="wasteVisible=false"></AddWaste>
                </div>
            </div>
        </van-overlay>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import {HeatPosition, TakePickture, AddWaste} from './components'

    const heatList:any = ref([1,2,3,4,5,6])

    //添加溶液
    const wasteVisible = ref(false)
    const onAddWaste = () => {
        wasteVisible.value = true;
    }
</script>
<style>

    .graphite_home{
        display: flex;
        background: #F6F6F6;
    }
    .heat_area{
        width: 1268px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 5px;
        gap: 20px;
        flex-direction: row;
        padding-bottom: 100px;
        background: #FFFFFF;
        border-radius: 20px;
    }

    .pickture_area{
        width: 1040px;
        margin: 5px;
        margin-left: 20px;
        background: #FFFFFF;
        border-radius: 20px;
    }

    .graphite_btn{
        margin-left: 68px;
        margin-top: 2rem;
    }

    .btn_size{
        font-size: 30px;
        height: 80px;
        color: #1989FA;
        border: 3px solid #1989FA;
        
    }

    .open{
        width: 906px;
    }

    .graphite_operate{
        gap: 15px;
        padding-top:30px;
    }

    .waste{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        align-items: center;
        .addWaste{
            width: 2250px;
            height: 1235px;
            background: #FFFFFF;
        }
    }
    
</style>