<template> <div class="cell-result-size"> <div class="cell-half-box" style="height: 735px"> <div class="title-top"> <div class="triangle"></div> <div class="title-span"> <span>Lithium Wafer Weight and Quantity Calculation</span> </div> </div> <div class="context"> <div class="flex-item"> <div class="dir-title"><span>Basic Data</span></div> </div> <div class="fri-flex"> <div class="flex-item"> <div class="dir-span"><span>Lithium Wafer Density</span></div> <div class="value-span"> <span>{{ lithiumWaferDensity }} g/cm3</span> </div> </div> <div class="flex-item-colum-other"> <div class="flex-item-specail"> <div class="dir-span"><span>Diameter</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="diameter" ></VNumberInput> </div> </div> <div class="flex-item-specail-sel"> <div class="dir-span"><span>Thickness</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="thickness" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-title"> <div class="dir-title"><span>Calculate Weight by Quantity</span></div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Quantity</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'pieces' : ''" v-model="numberOfPieces" ></VNumberInput> </div> </div> </div> <div class="flex-item-colum-sec"> <div class="dir-span-nowidth"><span>Result (Weight):</span></div> <div class="value-span"> <span>{{ weight }} g</span> </div> </div> </div> <div class="flex-item-title" style="margin-top: 60px"> <div class="dir-title"> <span> Calculate Quantity by Weight</span> </div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Required Weight</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'g' : ''" v-model="requiredWeight" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-colum-sec" style="margin-top: 12px"> <div class="dir-span-nowidth"> <span>Calculation Result (Required Quantity):</span> </div> <div class="value-span"> <span>{{ numberOfRequiredPieces }} pieces</span> </div> </div> </div> <div class="diving" style="margin-top: 0px"></div> <div class="compute-btn" @click="handleSave()" style="margin-top: 0px"> Calculate </div> </div> <div class="cell-half-box" style="height: 735px"> <div class="title-top"> <div class="triangle"></div> <div class="title-span"> <span>Lithium Strip Weight and Meter Calculation</span> </div> </div> <div class="context"> <div class="flex-item"> <div class="dir-title"><span>Basic Data</span></div> </div> <div class="fri-flex"> <div class="flex-item"> <div class="dir-span"><span>Lithium Strip Density</span></div> <div class="value-span"> <span>{{ lithiumStripDensity2 }} g/cm3</span> </div> </div> <div class="flex-item-colum-other"> <div class="flex-item-specail"> <div class="dir-span"><span>Thickness</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="thickness2" ></VNumberInput> </div> </div> <div class="flex-item-specail-sel"> <div class="dir-span"><span>Width</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="width2" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-title"> <div class="dir-title"><span>Calculate Weight by Meter</span></div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Length</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'm' : ''" v-model="length2" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-colum-sec" style="margin-top: 15px"> <div class="dir-span-nowidth"> <span>Calculation Result (Weight):</span> </div> <div class="value-span"> <span>{{ weight2 }} g</span> </div> </div> <div class="flex-item-title" style="margin-top: 0"> <div class="dir-title"> <span> Calculate Quantity by Weight</span> </div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Quantity</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'g' : ''" v-model="demandWeight2" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-colum-sec" style="margin-top: 15px"> <div class="dir-span-nowidth"> <span>Calculation Result (Required Quantity):</span> </div> <div class="value-span"> <span>{{ demandLength2 }} m</span> </div> </div> </div> <div class="diving" style="margin-top: 0px"></div> <div class="compute-btn" @click="handleSave()">Calculate</div> </div> </div> <div class="cell-result-size" style="margin-top: 100px; height: 100%"> <div class="cell-half-box" style="height: 725px"> <div class="title-top"> <div class="triangle"></div> <div class="title-span"> <span>Copper Foil Weight and Meter Calculation</span> </div> </div> <div class="context"> <div class="flex-item"> <div class="dir-title"><span>Basic Data</span></div> </div> <div class="fri-flex"> <div class="flex-item"> <div class="dir-span"><span>Copper Foil Density</span></div> <div class="value-span"> <span>{{ copperFoilDensity4 }} g/cm3</span> </div> </div> <div class="flex-item-colum-other"> <div class="flex-item-specail"> <div class="dir-span"><span>Thickness</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'um' : ''" v-model="thickness4" ></VNumberInput> </div> </div> <div class="flex-item-specail-sel"> <div class="dir-span"><span>Width</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="width4" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-title"> <div class="dir-title"><span>Calculate Weight by Meter</span></div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Length</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'm' : ''" v-model="length4" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-colum-sec" style="margin-top: 10px"> <div class="dir-span-nowidth"> <span>Calculation Result (Weight):</span> </div> <div class="value-span"> <span>{{ weight4 }} kg</span> </div> </div> <div class="flex-item-title"> <div class="dir-title"><span>Calculate Quantity by Weight</span></div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Required Weight</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'kg' : ''" v-model="demandWeight4" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-colum-sec" style="margin-top: 10px"> <div class="dir-span-nowidth"> <span>Calculation Result (Required Quantity):</span> </div> <div class="value-span"> <span>{{ demandLength4 }} m</span> </div> </div> </div> <div class="diving" style="margin-top: 0px"></div> <div class="compute-btn" @click="handleSave()">Calculate</div> </div> <div class="cell-half-box" style="height: 725px"> <div class="title-top"> <div class="triangle"></div> <div class="title-span"> <span>Aluminum Foil Weight and Meter Calculation</span> </div> </div> <div class="context"> <div class="flex-item"> <div class="dir-title"><span>Basic Data</span></div> </div> <div class="fri-flex"> <div class="flex-item"> <div class="dir-span"><span>Aluminum Foil Density</span></div> <div class="value-span"> <span>{{ aluminumFoilDensity5 }} g/cm3</span> </div> </div> <div class="flex-item-colum-other"> <div class="flex-item-specail"> <div class="dir-span"><span>Thickness</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'um' : ''" v-model="aluminumFoilThickness5" ></VNumberInput> </div> </div> <div class="flex-item-specail-sel"> <div class="dir-span"><span>Width</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="aluminumFoilWidth5" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-title"> <div class="dir-title"><span>Calculate Weight by Meter</span></div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Length</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'm' : ''" v-model="aluminumFoilLength5" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-colum-sec" style="margin-top: 10px"> <div class="dir-span-nowidth"> <span>Calculation Result (Weight):</span> </div> <div class="value-span"> <span>{{ aluminumFoilWeight5 }} kg</span> </div> </div> <div class="flex-item-title"> <div class="dir-title"><span>Calculate Quantity by Weight</span></div> </div> <div class="sec-flex"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Required Weight</span></div> <div class="value-span"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'kg' : ''" v-model="demandAluminumFoilWeight5" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-colum-sec" style="margin-top: 10px"> <div class="dir-span-nowidth"> <span>Calculation Result (Required Quantity):</span> </div> <div class="value-span"> <span>{{ demandAluminumFoilLength5 }} m</span> </div> </div> </div> <div class="diving" style="margin-top: 0px"></div> <div class="compute-btn" @click="handleSave()">Calculate</div> </div> </div> <div class="cell-result-size"> <div class="cell-box"> <div class="title-top"> <div class="triangle"></div> <div class="title-span"> <span >Copper-Lithium Composite Strip Weight and Meter Calculation</span > </div> </div> <div class="context"> <div class="flex-item"> <div class="dir-title"><span>Basic Data</span></div> </div> <div class="fri-flex"> <div class="flex-item-colum-last"> <div class="flex-item"> <div class="dir-span"><span>Lithium Strip Density</span></div> <div class="value-span-last"> <span>{{ lithiumStripDensity3 }} g/cm3</span> </div> </div> <div class="flex-item-last" id="flex-item-last"> <div class="dir-span"><span>Copper Foil Density</span></div> <div class="value-span-last"> <span>{{ copperFoilDensity3 }} g/cm3</span> </div> </div> </div> <div class="flex-item-colum-bottom"> <div class="flex-item-specail"> <div class="dir-span"><span>Lithium Strip Thickness</span></div> <div class="value-span-last"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'um' : ''" v-model="lithiumStripThickness3" ></VNumberInput> </div> </div> <div class="flex-item-colum-sec-last"> <div class="dir-span"> <span>Copper Foil Thickness</span> </div> <div class="value-span-last"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'um' : ''" v-model="copperFoilThickness3" ></VNumberInput> </div> </div> <div class="flex-item-colum-sec-last"> <div class="dir-span"><span>Lithium Strip Layers</span></div> <div class="value-span-last"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="lithiumStripWeight3" ></VNumberInput> </div> </div> </div> <div class="flex-item-colum-last"> <div class="flex-item-specail"> <div class="dir-span"><span>Copper Foil Thickness</span></div> <div class="value-span-last"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'mm' : ''" v-model="copperFoilWidth3" ></VNumberInput> </div> </div> <div class="flex-item-colum-sec-last"> <div class="dir-span"> <span style="padding-left: 10px">Lithium Strip Layers</span> </div> <div class="value-span-last"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'layers' : ''" v-model="lithiumStripLayers3" ></VNumberInput> </div> </div> </div> </div> <div class="flex-item-title"> <div class="dir-title" style="width: auto"> <span>Calculate Weight from Meters</span> </div> </div> <div class="sec-flex-last"> <div class="flex-item-colum"> <div class="flex-item-specail"> <div class="dir-span"><span>Length (meters)</span></div> <div class="value-span-last"> <VNumberInput :reverse="false" controlVariant="stacked" :hideInput="false" :inset="false" variant="outlined" width="100%" density="compact" :suffix="showSuffix ? 'm' : ''" v-model="length3" ></VNumberInput> </div> </div> </div> <div class="flex-item-colum-sec-other" style="width: auto"> <div class="dir-span-nowidth" style="width: auto"> <span style="margin-left: 21px" >Calculation Result (Total Weight):</span > </div> <div class="value-span"> <span style="width: auto">{{ totalWeight3 }} g</span> </div> </div> </div> <div class="sec-flex-last" style="width: 1200px"> <div class="flex-item-colum-sec-other" style="margin-left: 0px"> <div class="dir-span-nowidth"> <span>Calculation Result (Lithium Strip Weight):</span> </div> <div class="value-span"> <span>{{ lithiumStripWeight3 }} g</span> </div> </div> <div class="flex-item-colum-sec-other" style="width: 500px"> <div class="dir-span-nowidth"> <span>Calculation Result (Copper Foil Weight):</span> </div> <div class="value-span"> <span>{{ copperFoilWeight3 }} g</span> </div> </div> </div> </div> <div class="diving" style="margin-top: 0px"></div> <div class="compute-btn" @click="handleSave()">Calculate</div> </div> </div> <div style="height: 20px"></div> </template> <script setup> import { VNumberInput } from "vuetify/labs/VNumberInput"; import { FloatAdd, FloatDiv, FloatMul, FloatSub, roundToDecimal, } from "../utils/NumberUtils"; const PI = 3.1415926; const lithiumWaferDensity = ref(0.534); const diameter = ref(18); const thickness = ref(1); const numberOfPieces = ref(2000); const weight = ref(272); const requiredWeight = ref(100); const numberOfRequiredPieces = ref(736); const lithiumStripDensity2 = ref(0.534); const thickness2 = ref(0.05); const width2 = ref(100); const length2 = ref(47); const weight2 = ref(125); const demandWeight2 = ref(50); const demandLength2 = ref(18.7); const lithiumStripDensity3 = ref(0.534); const copperFoilDensity3 = ref(8.9); const lithiumStripThickness3 = ref(50); const copperFoilThickness3 = ref(8); const lithiumStripWidth3 = ref(65); const copperFoilWidth3 = ref(80); const lithiumStripLayers3 = ref(1); const length3 = ref(13.0); const lithiumStripWeight3 = ref(23); const copperFoilWeight3 = ref(74); const totalWeight3 = ref(97); const copperFoilDensity4 = ref(8.9); const thickness4 = ref(8); const width4 = ref(250); const length4 = ref(100); const weight4 = ref(1.78); const demandWeight4 = ref(5); const demandLength4 = ref(281); const aluminumFoilDensity5 = ref(2.7); const aluminumFoilThickness5 = ref(12); const aluminumFoilWidth5 = ref(240); const aluminumFoilLength5 = ref(300); const aluminumFoilWeight5 = ref(2.333); const demandAluminumFoilWeight5 = ref(3); const demandAluminumFoilLength5 = ref(386); const handleSave = async () => { //重量计算 let weightTemp1 = FloatMul(lithiumWaferDensity.value, PI); let weightTemp2 = FloatDiv(diameter.value, 10); let weightTemp3 = FloatDiv(weightTemp2, 2); weight.value = roundToDecimal( FloatMul( FloatDiv( FloatMul( FloatMul(FloatMul(weightTemp1, weightTemp3), weightTemp3), thickness.value ), 10 ), numberOfPieces.value ), 1 ); //需求片数计算 let numberOfRequiredPiecesTemp1 = FloatDiv( requiredWeight.value, lithiumWaferDensity.value ); let numberOfRequiredPiecesTemp2 = FloatDiv(FloatDiv(diameter.value, 10), 2); let numberOfRequiredPiecesTemp3 = FloatMul( FloatMul(numberOfRequiredPiecesTemp2, PI), numberOfRequiredPiecesTemp2 ); let numberOfRequiredPiecesTemp4 = FloatMul( numberOfRequiredPiecesTemp3, thickness.value ); numberOfRequiredPieces.value = roundToDecimal( FloatDiv( numberOfRequiredPiecesTemp1, FloatDiv(numberOfRequiredPiecesTemp4, 10) ), 1 ); //根据米数算重量 let weight2Temp1 = FloatDiv( FloatMul(thickness2.value, lithiumStripDensity2.value), 10 ); let weight2Temp2 = FloatMul( FloatMul(FloatDiv(width2.value, 10), length2.value), 100 ); weight2.value = roundToDecimal(FloatMul(weight2Temp1, weight2Temp2), 2); //根据重量算米数 let demandLength2Temp1 = FloatDiv( demandWeight2.value, lithiumStripDensity2.value ); let demandLength2Temp2 = FloatDiv( FloatMul(FloatDiv(thickness2.value, 10), width2.value), 10 ); demandLength2.value = roundToDecimal( FloatDiv(FloatDiv(demandLength2Temp1, demandLength2Temp2), 100), 1 ); //锂带重量计算 let lithiumStripWeight3Temp1 = FloatMul( FloatMul(lithiumStripDensity3.value, lithiumStripThickness3.value), lithiumStripLayers3.value ); let lithiumStripWeight3Temp2 = FloatDiv( FloatMul( FloatDiv(lithiumStripWeight3Temp1, 10000), lithiumStripWidth3.value ), 10 ); lithiumStripWeight3.value = roundToDecimal( FloatMul(FloatMul(lithiumStripWeight3Temp2, length3.value), 100), 1 ); //铜箔重量计算 let copperFoilWeight3Temp1 = FloatDiv( FloatMul(copperFoilThickness3.value, copperFoilDensity3.value), 10000 ); let copperFoilWeight3Temp2 = FloatDiv( FloatMul(copperFoilWeight3Temp1, copperFoilWidth3.value), 10 ); copperFoilWeight3.value = roundToDecimal( FloatMul(FloatMul(copperFoilWeight3Temp2, length3.value), 100), 1 ); //总重量计算 totalWeight3.value = roundToDecimal( FloatAdd(lithiumStripWeight3.value, copperFoilWeight3.value), 1 ); //根据米数计算重量:铜箔重量 let weight4Temp1 = FloatMul( FloatDiv(FloatMul(copperFoilDensity4.value, thickness4.value), 10000), width4.value ); let weight4Temp2 = FloatMul(FloatDiv(weight4Temp1, 10), length4.value); weight4.value = roundToDecimal( FloatDiv(FloatMul(weight4Temp2, 100), 1000), 1 ); //根据重量计算米数:需求米数 let demandLength4Temp1 = FloatDiv( FloatMul(demandWeight4.value, 1000), copperFoilDensity4.value ); let demandLength4Temp2 = FloatDiv( FloatMul(FloatDiv(thickness4.value, 10000), width4.value), 10 ); demandLength4.value = roundToDecimal( FloatDiv(FloatDiv(demandLength4Temp1, demandLength4Temp2), 100), 1 ); //根据米数计算重量:铜箔重量 let weight5Temp1 = FloatMul( FloatDiv( FloatMul(aluminumFoilDensity5.value, aluminumFoilThickness5.value), 10000 ), aluminumFoilWidth5.value ); let weight5Temp2 = FloatMul( FloatDiv(weight5Temp1, 10), aluminumFoilLength5.value ); aluminumFoilWeight5.value = roundToDecimal( FloatDiv(FloatMul(weight5Temp2, 100), 1000), 1 ); //根据重量计算米数:需求米数 let demandLength5Temp1 = FloatDiv( FloatMul(demandAluminumFoilWeight5.value, 1000), aluminumFoilDensity5.value ); let demandLength5Temp2 = FloatDiv( FloatMul( FloatDiv(aluminumFoilThickness5.value, 10000), aluminumFoilWidth5.value ), 10 ); demandAluminumFoilLength5.value = roundToDecimal( FloatDiv(FloatDiv(demandLength5Temp1, demandLength5Temp2), 100), 1 ); }; const showSuffix = ref(true); onMounted(() => { function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf("msie")) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if ( window.outerWidth !== undefined && window.innerWidth !== undefined ) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; } function adjustMargins() { const windowWidth = window.innerWidth; const flexItemSpecailSelArray = Array.from( document.getElementsByClassName("flex-item-specail-sel") ); const flexItemColumSecLastArray = Array.from( document.getElementsByClassName("flex-item-colum-sec-last") ); const dirSpanArray = Array.from( document.getElementsByClassName("dir-span") ); const cellResultSizeArray = Array.from( document.getElementsByClassName("cell-result-size") ); const flexItemColumSecArray = Array.from( document.getElementsByClassName("flex-item-colum-sec") ); const flexItemColumArray = Array.from( document.getElementsByClassName("flex-item-colum") ); const flexItemLast = document.getElementById("flex-item-last"); const valueSpanArray = Array.from( document.getElementsByClassName("value-span") ); const valueSpanLastArray = Array.from( document.getElementsByClassName("value-span-last") ); if (detectZoom() < 100) { } else { // dirSpanArray.forEach((dirSpan) => { // dirSpan.style.width = `${(85 / 1920) * windowWidth}px`; // }); // flexItemSpecailSelArray.forEach((flexItemSpecailSel) => { // if (windowWidth > 1270) { // flexItemSpecailSel.style.marginLeft = `${ // (70 / 1920) * windowWidth // }px`; // } else { // flexItemSpecailSel.style.marginLeft = `0px`; // } // }); // flexItemColumSecArray.forEach((flexItemColumSec) => { // flexItemColumSec.style.marginLeft = `${(70 / 1920) * windowWidth}px`; // }); // flexItemLast.style.marginLeft = `${(70 / 1920) * windowWidth}px`; // valueSpanArray.forEach((valueSpan) => { // valueSpan.style.width = `${(180 / 1920) * windowWidth}px`; // if (valueSpan.clientWidth <= 50) { // showSuffix.value = false; // } else { // showSuffix.value = true; // } // }); // if (valueSpanLastArray) { // valueSpanLastArray.forEach((valueSpanLast) => { // valueSpanLast.style.width = `${(180 / 1920) * windowWidth}px`; // }); // } // if (flexItemColumSecLastArray) { // flexItemColumSecLastArray.forEach((flexItemColumSecLast) => { // flexItemColumSecLast.style.marginLeft = `${ // (70 / 1920) * windowWidth // }px`; // }); // } // cellResultSizeArray.forEach((cellResultSize) => { // if (windowWidth > 1270) { // cellResultSize.style.height = `630px`; // } else { // cellResultSize.style.height = `670px`; // } // }); // if (windowWidth <= 1270) { // if (flexItemColumArray) { // flexItemColumArray.forEach((flexItemColum) => { // flexItemColum.style.flexDirection = `column`; // }); // } // } else { // if (flexItemColumArray) { // flexItemColumArray.forEach((flexItemColum) => { // flexItemColum.style.removeProperty("flex-direction"); // }); // } // } } } adjustMargins(); window.addEventListener("resize", adjustMargins); }); </script> <style scoped> .cell-result-size { height: 630px; margin-top: 10px; display: flex; justify-content: space-between; } .cell-half-box { background-color: #ffffff; height: 100%; border-radius: 5px; width: 49.5%; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-box { background-color: #ffffff; width: 100%; height: 650px; border-radius: 5px; position: relative; } .cell-half-box:first-child { /* margin-right: 15px; */ } .cell-result-size-sec { height: 348px; margin-top: 10px; display: flex; } .cell-result-size-third { /* height: 948px; */ margin-top: 10px; display: flex; position: relative; } .pole-iece-size { background-color: #ffffff; height: 100%; border-radius: 5px; flex: 1; } .cell-design { background-color: #ffffff; height: 100%; border-radius: 5px; flex: 1; width: 100%; } .title-top { display: flex; align-content: center; justify-content: flex-start; align-items: center; padding: 20px 30px; border-bottom: 2px solid #ecedef; } .triangle { width: 0; height: 0; border-left: 5px solid #636974; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .title-span { font-size: 15spx; padding-left: 10px; } .context { margin: 30px 40px; display: flex; flex-direction: column; justify-content: space-between; } .flex-item-colum { /* display: flex; */ } .flex-item-colum-other { display: grid; flex-direction: column; grid-template-columns: repeat(2, 45%); justify-content: space-between; column-gap: 75px; /* display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ } .flex-item-colum-last { display: flex; } .flex-item-colum-bottom { display: flex; margin-bottom: 30px; margin-top: 30px; } .context-sec { margin: 30px 40px; display: flex; justify-content: space-between; } .fri-flex { /* padding-right: 60px; */ text-align: justify; flex-direction: column; justify-content: center; } .fri-flex-input { position: relative; top: -10px; } .dir-span { color: #646464; font-size: 16px; width: auto; display: flex; text-align-last: justify; text-align: justify; flex-direction: column; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-span span { /* overflow: hidden; */ height: 21px; text-overflow: ellipsis; white-space: nowrap; } .dir-span-nowidth { color: #646464; font-size: 16px; display: flex; text-align-last: justify; text-align: justify; flex-direction: column; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dir-span-nowidth span { overflow: hidden; text-overflow: ellipsis; height: 21px; white-space: nowrap; } .tir-span { color: #646464; font-size: 16px; width: 105px; display: flex; text-align-last: justify; text-align: justify; flex-direction: column; justify-content: center; } .tir-span-other { color: #646464; font-size: 16px; width: 120px; display: flex; text-align-last: justify; text-align: justify; flex-direction: column; justify-content: center; } .tir-nosplit-span { color: #646464; font-size: 16px; width: 225px; display: flex; text-align: justify; flex-direction: column; justify-content: center; } .adjust-tir-nosplit-span { color: #646464; font-size: 16px; display: flex; text-align: justify; flex-direction: column; justify-content: center; } .dir-title { color: #4f9fdd; font-size: 16px; width: 125px; display: flex; flex-direction: column; justify-content: center; } .value-span { margin-left: 20px; flex: 1; width: 10px; /* flex: 1; */ /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ max-width: 180px; } .value-span-last { margin-left: 20px; flex: 1; width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; } .value-span-last span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .value-span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .value-span-scal { margin-left: 20px; flex: 1; font-weight: bolder; width: 185px; } .adjust-value-span { margin-left: 20px; font-weight: bolder; } .flex-item-title { padding-top: 30px; display: flex; padding-bottom: 30px; } .flex-item { display: flex; padding-bottom: 30px; } .flex-item-last { display: flex; padding-bottom: 30px; margin-left: 70px; } .flex-item-colum-sec { display: flex; padding-bottom: 20px; /* margin-left: 70px; */ /* justify-content: center; */ align-items: center; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex-item-colum-sec-other { display: flex; padding-bottom: 20px; margin-left: 70px; justify-content: center; align-items: center; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex-item-colum-sec-last { margin-left: 70px; display: flex; height: 40px; } .flex-item-specail { display: flex; height: 40px; margin-bottom: 18px; } .flex-item-specail-sel { display: flex; height: 40px; /* margin-left: 70px; */ } .flex-item-specail-last { display: flex; height: 40px; } .flex-item-specail-third { position: relative; display: flex; height: 40px; margin-bottom: 18px; top: -10px; } .sec-flex-last { display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; } .sec-flex { /* display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ display: grid; flex-direction: column; grid-template-columns: repeat(2, 50%); justify-content: space-between; -moz-column-gap: 50px; column-gap: 50px; } .sec-sec-flex { margin-left: 60px; } .tir-title { color: #4f9fdd; font-size: 16px; width: 125px; display: flex; flex-direction: column; font-weight: 600; justify-content: center; } .adjust-box { display: flex; margin-left: 145px; width: 1220px; /* justify-content: space-between; */ } .adjust-flex-item { } .adjust-left-box { display: flex; width: 400px; justify-content: space-between; } .adjust-sel-box { display: flex; margin-left: 75px; flex: 1; justify-content: space-between; } .context-last { display: flex; margin-left: 40px; } .fri-flex-last { margin-left: 245px; } .compute { position: absolute; right: 20px; bottom: 20px; } .box-footer { margin-bottom: 50px; } .diving { height: 0.1vw; background: #ecedef; margin-top: 50px; } .compute-btn { width: 96px; height: 32px; background: #4f9fdd; border-radius: 6px; display: flex; justify-content: center; align-items: center; color: #ffffff; position: absolute; right: 40px; bottom: 30px; } .compute-btn:hover { cursor: pointer; } </style>