<template> 
 | 
    <div class="rework"> 
 | 
        <div class="rework_list"> 
 | 
            <div class="rework_list_item" @click="typeShow = true"> 
 | 
                <span><b>*</b>单据类型</span> 
 | 
                <div class="rework_list_item_right"> 
 | 
                    <span :class="form.typeName ? 'black' : ''">{{form.typeName ? form.typeName : '请选择'}}</span> 
 | 
                    <van-icon name="arrow" size="20" color="#999999" /> 
 | 
                </div> 
 | 
            </div> 
 | 
            <div class="rework_list_item" @click="warehouseShow = true"> 
 | 
                <span><b>*</b>入库仓库</span> 
 | 
                <div class="rework_list_item_right"> 
 | 
                    <span :class="form.warehouseName ? 'black' : ''">{{form.warehouseName ? form.warehouseName : '请选择'}}</span> 
 | 
                    <van-icon name="arrow" size="20" color="#999999" /> 
 | 
                </div> 
 | 
            </div> 
 | 
        </div> 
 | 
        <div class="rework_qd"> 
 | 
            <div class="rework_qd_title"> 
 | 
                <div class="rework_qd_title_left"> 
 | 
                    <div class="x"></div> 
 | 
                    <span>{{`入库物料清单${list.length}`}}</span> 
 | 
                </div> 
 | 
                <div class="rework_qd_title_right" @click="addItem"> 
 | 
                    <img src="@/assets/icon/gongdan_ic_shoudong@2x.png" alt="" /> 
 | 
                    <span>增加入库</span> 
 | 
                </div> 
 | 
            </div> 
 | 
            <van-swipe-cell v-for="(item, index) in list" :key="index"> 
 | 
                <div class="rework_qd_list"> 
 | 
                    <div class="rework_qd_item" @click="openL(index)" v-if="location"> 
 | 
                        <span><b>*</b>入库货位</span> 
 | 
                        <div class="rework_qd_item_right"> 
 | 
                            <span :class="item.locationName ? 'black' : ''">{{item.locationName ? item.locationName : '请选择'}}</span> 
 | 
                            <van-icon name="arrow" size="20" color="#999999" /> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="rework_qd_item" @click="openMaterial(index)"> 
 | 
                        <span><b>*</b>入库物料</span> 
 | 
                        <div class="rework_qd_item_right"> 
 | 
                            <span :class="item.materialName ? 'black' : ''">{{item.materialName ? item.materialName : '请选择'}}</span> 
 | 
                            <van-icon name="arrow" size="20" color="#999999" /> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <template v-if="form.type !== 25"> 
 | 
                        <div class="rework_qd_item" v-if="item.hasBom !== 0" @click="openGX(index)"> 
 | 
                            <span>生产工序</span> 
 | 
                            <div class="rework_qd_item_right"> 
 | 
                                <span :class="item.procedureName ? 'black' : ''">{{item.procedureName ? item.procedureName : '请选择'}}</span> 
 | 
                                <van-icon name="arrow" size="20" color="#999999" /> 
 | 
                            </div> 
 | 
                        </div> 
 | 
                    </template> 
 | 
                    <div class="rework_qd_item" @click="openQ(index)"> 
 | 
                        <span><b>*</b>质量属性</span> 
 | 
                        <div class="rework_qd_item_right"> 
 | 
                            <span :class="item.qualityTypeName ? 'black' : ''">{{item.qualityTypeName ? item.qualityTypeName : '请选择'}}</span> 
 | 
                            <van-icon name="arrow" size="20" color="#999999" /> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="rework_qd_item"> 
 | 
                        <span>批次号</span> 
 | 
                        <div class="rework_qd_item_right"> 
 | 
                            <input type="text" v-model="item.batch" placeholder="请输入" /> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                    <div class="rework_qd_item"> 
 | 
                        <span><b>*</b>入库数量<template v-if="item.unitName">({{ item.unitName }})</template></span> 
 | 
                        <div class="rework_qd_item_right"> 
 | 
                            <input type="text" v-model="item.num" placeholder="0" /> 
 | 
                        </div> 
 | 
                    </div> 
 | 
                </div> 
 | 
                <template #right> 
 | 
                    <van-button style="height: 100%;" square type="danger" text="删除" @click="dele(index)" /> 
 | 
                </template> 
 | 
            </van-swipe-cell> 
 | 
        </div> 
 | 
        <div class="rework_zw"></div> 
 | 
        <div class="rework_footer"> 
 | 
            <button class="rework_footer_submit" @click="onConfirm">提交</button> 
 | 
        </div> 
 | 
        <!-- 仓库 --> 
 | 
        <Warehouse :show="warehouseShow" @close="close" @value="getValue" /> 
 | 
        <!-- 物料 --> 
 | 
        <Material :show="materialsShow" @close="close1" @value="getValue1" /> 
 | 
        <!-- 质量属性 --> 
 | 
        <Quality :show="qualityShow" @close="close2" @value="getValue2" /> 
 | 
        <!-- 选择货位 --> 
 | 
        <Location :show="locationShow" :list="locationList" @close="close3" @value="getValue3" /> 
 | 
        <!-- 工序 --> 
 | 
        <ProductionProcess :show="productionShow" :list="productionList" @close="close4" @value="getValue4" /> 
 | 
        <!-- 单据类型 --> 
 | 
        <van-popup v-model:show="typeShow" round position="bottom" :style="{ height: '50%' }"> 
 | 
            <van-picker 
 | 
                :columns="columns" 
 | 
                @confirm="onConfirm1" 
 | 
                @cancel="onCancel" 
 | 
                :columns-field-names="customFieldName" 
 | 
            /> 
 | 
        </van-popup> 
 | 
    </div> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
    import { onMounted, ref, reactive } from 'vue' 
 | 
    import { useRouter } from 'vue-router' 
 | 
    import { Toast } from 'vant' 
 | 
    import { getListByWarehouseId, wOutBoundForStockUp } from '@/apis/WorkOrderAPI' 
 | 
    import { getListByMaterialId } from '@/apis/ExWarehouse' 
 | 
    import Warehouse from '@/components/common/Warehouse.vue' 
 | 
    import Material from '@/components/newCom/Material.vue' 
 | 
    import Quality from '@/components/newCom/quality.vue' 
 | 
    import Location from '@/components/newCom/location.vue' 
 | 
    import ProductionProcess from '@/components/newCom/productionProcess.vue' 
 | 
  
 | 
    const router = useRouter() 
 | 
    // 表单数据 
 | 
    let form: any = reactive({ 
 | 
        warehouseName: '', 
 | 
        warehouseId: '', 
 | 
        type: '', 
 | 
        typeName: '' 
 | 
    }) 
 | 
  
 | 
    let locationList: any = ref([]) 
 | 
    let location: any = ref(true) 
 | 
    let productionList: any = ref([]) 
 | 
  
 | 
    let i = ref(0) 
 | 
  
 | 
    let columns = ref([ 
 | 
        { name: '采购入库', id: 25 }, 
 | 
        { name: '库存调整', id: 28 } 
 | 
    ]) 
 | 
    const customFieldName = { 
 | 
      text: 'name' 
 | 
    }; 
 | 
    let list = ref<Array<any>>([ 
 | 
        { 
 | 
            batch: '', 
 | 
            locationId: '', 
 | 
            locationIdLabel: '', 
 | 
            locationName: '', 
 | 
            materialId: '', 
 | 
            materialName: '', 
 | 
            num: '', 
 | 
            hasBom: '', 
 | 
            procedureId: '', 
 | 
            procedureName: '', 
 | 
            qualityType: '', 
 | 
            qualityTypeName: '', 
 | 
            unitId: '', 
 | 
            unitName: '' 
 | 
        } 
 | 
    ]) 
 | 
    let warehouseShow = ref<boolean>(false) 
 | 
    let materialsShow = ref<boolean>(false) 
 | 
    let qualityShow = ref<boolean>(false) 
 | 
    let locationShow = ref<boolean>(false) 
 | 
    let typeShow = ref<boolean>(false) 
 | 
    let productionShow = ref<boolean>(false) 
 | 
  
 | 
    // 打开选择物料 
 | 
    const openMaterial = (index: number) => { 
 | 
        i.value = index 
 | 
        materialsShow.value = true 
 | 
    } 
 | 
    // 打开选择物料 
 | 
    const openQ = (index: number) => { 
 | 
        if (list.value[index].locationIdLabel == 'APPLIANCE_ONTEST' || list.value[index].locationIdLabel == 'APPLIANCE_OFFTEST' || list.value[index].locationIdLabel == 'APPLIANCE_USELESS') { 
 | 
            return 
 | 
        } 
 | 
        i.value = index 
 | 
        qualityShow.value = true 
 | 
    } 
 | 
    // 打开工序 
 | 
    const openGX = (index: number) => { 
 | 
        if (!list.value[index].materialId) return Toast('请先选择入库物料') 
 | 
        i.value = index 
 | 
        productionShow.value = true 
 | 
    } 
 | 
    // 打开选择货位 
 | 
    const openL = (index: number) => { 
 | 
        if (!form.warehouseId) return Toast('请选择入库仓库') 
 | 
        i.value = index 
 | 
        locationShow.value = true 
 | 
    } 
 | 
    const addItem = () => { 
 | 
        if (!form.warehouseId) return Toast('请选择入库仓库') 
 | 
        list.value.push({ 
 | 
            batch: '', 
 | 
            locationId: list.value[list.value.length - 1].locationId, 
 | 
            locationName: list.value[list.value.length - 1].locationName, 
 | 
            locationIdLabel: list.value[list.value.length - 1].locationIdLabel, 
 | 
            materialId: '', 
 | 
            materialName: '', 
 | 
            num: '', 
 | 
            hasBom: '', 
 | 
            procedureId: '', 
 | 
            procedureName: '', 
 | 
            qualityType: list.value[list.value.length - 1].qualityType, 
 | 
            qualityTypeName: list.value[list.value.length - 1].qualityTypeName, 
 | 
            unitId: '', 
 | 
            unitName: '' 
 | 
        }) 
 | 
    } 
 | 
  
 | 
    const onConfirm1 = (value: any) => { 
 | 
        form.typeName = value.name 
 | 
        form.type = value.id 
 | 
        if (value.id == 25) { 
 | 
            list.value.forEach(item => { 
 | 
                item.procedureId = '' 
 | 
                item.procedureName = '' 
 | 
            }) 
 | 
        } 
 | 
        typeShow.value = false 
 | 
    }; 
 | 
    const onCancel = () => { 
 | 
        typeShow.value = false 
 | 
    } 
 | 
     
 | 
    // 获取当天年月日 
 | 
    const getDay = () => { 
 | 
        var date = new Date(); 
 | 
        var year = date.getFullYear(); 
 | 
        var month = date.getMonth() + 1; 
 | 
        var day = date.getDate(); 
 | 
        return `${year}-${month <= 9 ? `0${month}` : month}-${day <= 9 ? `0${day}` : day}` 
 | 
    } 
 | 
  
 | 
    // 提交 
 | 
    const onConfirm = () => { 
 | 
        if (!form.type) return Toast('请选择单据类型') 
 | 
        if (!form.warehouseId) return Toast('请选择入库仓库') 
 | 
        if (list.value.length === 0) return Toast('请先添加入库物料') 
 | 
        for (let i = 0; i < list.value.length; i++) { 
 | 
            if (!list.value[i].locationId) return Toast(`第${i+1}项入库货位不能为空`) 
 | 
            if (!list.value[i].materialId) return Toast(`第${i+1}项入库物料不能为空`) 
 | 
            if (!list.value[i].qualityType) return Toast(`第${i+1}项质量属性不能为空`) 
 | 
            if (list.value[i].num <= 0) { 
 | 
                return Toast(`第${i + 1}项入库数量必须大于0`) 
 | 
            } 
 | 
        } 
 | 
        wOutBoundForStockUp({ 
 | 
            type: form.type, 
 | 
            planDate: getDay(), 
 | 
            validDate: getDay(), 
 | 
            warehouseId: form.warehouseId, 
 | 
            woutboundInBodyBeanList: list.value 
 | 
        }).then(res => { 
 | 
            if (res.code === 200) { 
 | 
                Toast.success({message: '入库成功'}) 
 | 
                setTimeout(() => { 
 | 
                    router.go(-1) 
 | 
                }, 2000) 
 | 
            } 
 | 
        }) 
 | 
    } 
 | 
  
 | 
    // 打开选择物料 
 | 
    const openMs = () => { 
 | 
        if (!form.warehouseId) return Toast('请先选择出库仓库') 
 | 
        const { selected }: any = Material.value 
 | 
        let ids = list.value.map(item => item.id) 
 | 
        Material.value.selected = ids 
 | 
        materialsShow.value = true 
 | 
    } 
 | 
  
 | 
    // 删除 
 | 
    const dele = (index: any) => { 
 | 
        if (list.value.length === 1) { 
 | 
            Toast('至少保留一条工装信息') 
 | 
            return 
 | 
        } 
 | 
        list.value.splice(index, 1) 
 | 
    } 
 | 
    // 关闭仓库选择弹框 
 | 
    const close = (): void => { 
 | 
        warehouseShow.value = false 
 | 
    } 
 | 
    // 关闭仓库选择弹框 
 | 
    const close1 = (): void => { 
 | 
        materialsShow.value = false 
 | 
    } 
 | 
    // 关闭仓库选择弹框 
 | 
    const close2 = (): void => { 
 | 
        qualityShow.value = false 
 | 
    } 
 | 
    // 关闭货位选择弹框 
 | 
    const close3 = (): void => { 
 | 
        locationShow.value = false 
 | 
    } 
 | 
    // 关闭货位选择弹框 
 | 
    const close4 = (): void => { 
 | 
        productionShow.value = false 
 | 
    } 
 | 
    // 选择仓库回调 
 | 
    const getValue = (item: any): void => { 
 | 
        form.warehouseName = item.name 
 | 
        form.warehouseId = item.id 
 | 
        getListByWarehouseId({ wareHouseId: item.id }) 
 | 
            .then(res => { 
 | 
                if (res.code === 200) { 
 | 
                    locationList.value = res.data 
 | 
                    if (res.data.length === 1) { 
 | 
                        location.value = false 
 | 
                        list.value.forEach(item => { 
 | 
                            item.locationId = res.data[0].id 
 | 
                            item.locationName = res.data[0].unionName 
 | 
                        }) 
 | 
                        list.value[i.value].locationIdLabel = res.data[0].label 
 | 
                        if (res.data[0].label === 'APPLIANCE_ONTEST') { 
 | 
                            list.value[i.value].qualityType = '0' 
 | 
                            list.value[i.value].qualityTypeName = '合格' 
 | 
                        } else if (res.data[0].label === 'APPLIANCE_OFFTEST') { 
 | 
                            list.value[i.value].qualityType = '1' 
 | 
                            list.value[i.value].qualityTypeName = '不良' 
 | 
                        } else if (res.data[0].label === 'APPLIANCE_USELESS') { 
 | 
                            list.value[i.value].qualityType = '2' 
 | 
                            list.value[i.value].qualityTypeName = '报废' 
 | 
                        } 
 | 
                    } else { 
 | 
                        location.value = true 
 | 
                        list.value.forEach(item => { 
 | 
                            item.locationId = res.data[0].id 
 | 
                            item.locationName = res.data[0].unionName 
 | 
                        }) 
 | 
                        // list.value.forEach(item => { 
 | 
                        //     item.locationId = '' 
 | 
                        //     item.locationName = '' 
 | 
                        // }) 
 | 
                    } 
 | 
                } 
 | 
            }) 
 | 
        warehouseShow.value = false 
 | 
    } 
 | 
    // 选择物料 
 | 
    const getValue1 = (item: any): void => { 
 | 
        list.value[i.value].materialName = item.mmodelUnionName 
 | 
        list.value[i.value].materialId = item.id 
 | 
        list.value[i.value].unitId = item.unitId 
 | 
        list.value[i.value].hasBom = item.hasBom 
 | 
        list.value[i.value].unitName = item.umodelName 
 | 
        // 获取物料下工序 
 | 
        getListByMaterialId({ 
 | 
            materialId: item.id 
 | 
        }).then(res => { 
 | 
            if (res.code === 200) { 
 | 
                productionList.value = res.data 
 | 
                list.value[i.value].procedureId = '' 
 | 
                list.value[i.value].procedureName = '' 
 | 
            } 
 | 
        }) 
 | 
        materialsShow.value = false 
 | 
    } 
 | 
    // 选择质量属性 
 | 
    const getValue2 = (item: any): void => { 
 | 
        list.value[i.value].qualityType = item.id 
 | 
        list.value[i.value].qualityTypeName = item.name 
 | 
        qualityShow.value = false 
 | 
    } 
 | 
    // 选择货位 
 | 
    const getValue3 = (item: any): void => { 
 | 
        list.value[i.value].locationId = item.id 
 | 
        list.value[i.value].locationName = item.unionName 
 | 
        list.value[i.value].qualityType = '' 
 | 
        list.value[i.value].qualityTypeName = '' 
 | 
        list.value[i.value].locationIdLabel = item.label 
 | 
        if (item.label === 'APPLIANCE_ONTEST') { 
 | 
            list.value[i.value].qualityType = '0' 
 | 
            list.value[i.value].qualityTypeName = '合格' 
 | 
        } else if (item.label === 'APPLIANCE_OFFTEST') { 
 | 
            list.value[i.value].qualityType = '1' 
 | 
            list.value[i.value].qualityTypeName = '不良' 
 | 
        } else if (item.label === 'APPLIANCE_USELESS') { 
 | 
            list.value[i.value].qualityType = '2' 
 | 
            list.value[i.value].qualityTypeName = '报废' 
 | 
        } 
 | 
        locationShow.value = false 
 | 
    } 
 | 
    // 选择工序 
 | 
    const getValue4 = (item: any): void => { 
 | 
        list.value[i.value].procedureId = item.id 
 | 
        list.value[i.value].procedureName = item.name 
 | 
        productionShow.value = false 
 | 
    } 
 | 
    onMounted(() => { 
 | 
        // 获取工装信息 
 | 
        // getLKInfo(route.query.id as string) 
 | 
    }) 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .rework { 
 | 
        width: 100%; 
 | 
        height: 100%; 
 | 
        position: absolute; 
 | 
        .rework_list { 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            background: white; 
 | 
            padding: 0 30px; 
 | 
            box-sizing: border-box; 
 | 
            .rework_list_item { 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: space-between; 
 | 
                height: 98px; 
 | 
                border-bottom: 1PX solid #E5E5E5; 
 | 
                &:last-child { 
 | 
                    border: none; 
 | 
                } 
 | 
                span { 
 | 
                    font-size: 30px; 
 | 
                    font-weight: 400; 
 | 
                    color: #222222; 
 | 
                    flex-shrink: 0; 
 | 
                    b { 
 | 
                        font-size: 30px; 
 | 
                        color: red; 
 | 
                        margin-right: 5px; 
 | 
                    } 
 | 
                } 
 | 
                .rework_list_item_right { 
 | 
                    flex: 1; 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: flex-end; 
 | 
                    span { 
 | 
                        font-size: 28px; 
 | 
                        font-weight: 400; 
 | 
                        color: #999999; 
 | 
                    } 
 | 
                    .black { 
 | 
                        color: black !important; 
 | 
                    } 
 | 
                    input { 
 | 
                        width: 230px; 
 | 
                        height: 60px; 
 | 
                        font-size: 28px; 
 | 
                        border-radius: 8px; 
 | 
                        padding: 0 30px; 
 | 
                        text-align: right; 
 | 
                        box-sizing: border-box; 
 | 
                        border: 1px solid #CCCCCC; 
 | 
                    } 
 | 
                    input::-webkit-input-placeholder { /* WebKit browsers */ 
 | 
                        font-size: 28px; 
 | 
                        font-weight: 400; 
 | 
                        color: #B2B2B2; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .rework_qd { 
 | 
            margin-top: 40px; 
 | 
            width: 100%; 
 | 
            background: #F7F7F7; 
 | 
            .rework_qd_title { 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: space-between; 
 | 
                padding: 0 30px 30px 30px; 
 | 
                .rework_qd_title_left { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    span { 
 | 
                        font-size: 32px; 
 | 
                        font-weight: 500; 
 | 
                        color: #222222; 
 | 
                    } 
 | 
                    .x { 
 | 
                        width: 8px; 
 | 
                        height: 30px; 
 | 
                        background: #4275FC; 
 | 
                        border-radius: 2px; 
 | 
                        margin-right: 12px; 
 | 
                    } 
 | 
                } 
 | 
                .rework_qd_title_right { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    img { 
 | 
                        width: 28px; 
 | 
                        height: 28px; 
 | 
                        margin-right: 12px; 
 | 
                    } 
 | 
                    span { 
 | 
                        font-size: 28px; 
 | 
                        font-family: PingFangSC-Regular, PingFang SC; 
 | 
                        font-weight: 400; 
 | 
                        color: #4275FC; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
            .rework_qd_list { 
 | 
                display: flex; 
 | 
                flex-direction: column; 
 | 
                padding: 0 30px; 
 | 
                background: #FFFFFF; 
 | 
                box-sizing: border-box; 
 | 
                margin-bottom: 30px; 
 | 
                .rework_qd_item { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: space-between; 
 | 
                    height: 98px; 
 | 
                    border-bottom: 1PX solid #E5E5E5; 
 | 
                    &:last-child { 
 | 
                        border: none; 
 | 
                    } 
 | 
                    span { 
 | 
                        font-size: 30px; 
 | 
                        font-weight: 400; 
 | 
                        color: #222222; 
 | 
                        flex-shrink: 0; 
 | 
                        b { 
 | 
                            font-size: 30px; 
 | 
                            color: red; 
 | 
                            margin-right: 5px; 
 | 
                        } 
 | 
                    } 
 | 
                    .rework_qd_item_right { 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        span { 
 | 
                            font-size: 28px; 
 | 
                            font-weight: 400; 
 | 
                            color: #999999; 
 | 
                        } 
 | 
                        .black { 
 | 
                            color: black !important; 
 | 
                        } 
 | 
                        input { 
 | 
                            width: 230px; 
 | 
                            height: 60px; 
 | 
                            font-size: 28px; 
 | 
                            border-radius: 8px; 
 | 
                            padding: 0 30px; 
 | 
                            text-align: right; 
 | 
                            box-sizing: border-box; 
 | 
                            border: 1px solid #CCCCCC; 
 | 
                        } 
 | 
                        input::-webkit-input-placeholder { /* WebKit browsers */ 
 | 
                            font-size: 28px; 
 | 
                            font-weight: 400; 
 | 
                            color: #B2B2B2; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .rework_zw { 
 | 
            height: 168px; 
 | 
        } 
 | 
        .rework_footer { 
 | 
            width: calc(100% - 60px); 
 | 
            position: fixed; 
 | 
            bottom: 0; 
 | 
            display: flex; 
 | 
            align-items: center; 
 | 
            justify-content: space-between; 
 | 
            padding: 0 30px 68px 30px; 
 | 
            .rework_footer_add { 
 | 
                flex: 1; 
 | 
                height: 88px; 
 | 
                font-size: 30px; 
 | 
                font-weight: 500; 
 | 
                color: $nav-color; 
 | 
                background: #FFFFFF; 
 | 
                box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800); 
 | 
                border-radius: 8px; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: center; 
 | 
            } 
 | 
            .rework_footer_submit { 
 | 
                flex: 1; 
 | 
                height: 88px; 
 | 
                font-size: 30px; 
 | 
                font-weight: 500; 
 | 
                color: #ffffff; 
 | 
                background: $nav-color; 
 | 
                box-shadow: 0 0 12px 0 rgba(0,0,0,0.0800); 
 | 
                border-radius: 8px; 
 | 
                display: flex; 
 | 
                align-items: center; 
 | 
                justify-content: center; 
 | 
                border: none; 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |