钢化前大理片笼，中空理片笼小片位置中心轴对称

wangfei

2025-03-05 8c80b14ef2ac81a810bc58f1e48b6600a695c4f9

钢化前大理片笼，中空理片笼小片位置中心轴对称

 UI-Project/src/assets/ganghuaqian.png

 UI-Project/src/assets/zhongkong.png

 UI-Project/src/views/Slicecage/slicecage.vue

@@ -879,7 +879,7 @@
const rectStyle = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -895,24 +895,24 @@
// 计算每个小矩形的样式
const subRectStyle = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStylea = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -928,24 +928,24 @@
// 计算每个小矩形的样式
const subRectStylea = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStyleb = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -961,24 +961,24 @@
// 计算每个小矩形的样式
const subRectStyleb = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStylec = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -994,17 +994,17 @@
// 计算每个小矩形的样式
const subRectStylec = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
onMounted(() => {
@@ -1168,7 +1168,7 @@
    </div>
<!-- // 父级框 -->
<div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;left:375px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
    <div class="img-car1" :style="'z-index:999;left:290px;top:' + 350*carPosition[0] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjusta"  
      :key="rect.id"  
@@ -1182,7 +1182,7 @@
    >
    </div>
    </div>
    <div class="img-car4" :style="'z-index:999;left:770px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
    <div class="img-car4" :style="'z-index:999;left:735px;top:' + 350*carPosition[1] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjust"  
      :key="rect.id"  
@@ -1197,7 +1197,7 @@
    </div>
    </div>
    <div style="position: relative;">
    <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 585px;">
    <div v-show="cell1" style="width: 170px;height: 53px;position: relative;top:63px;left: 525px;">
      <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRects(rectIndex)"
@@ -1206,7 +1206,7 @@
    ></div>
    </div>
    </div>
 <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 585px;">
 <div v-show="cell2" style="width: 170px;height: 53px;position: relative;top:67px;left: 525px;">
    <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsa(rectIndex)"
@@ -1215,7 +1215,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 585px;">
  <div v-show="cell3" style="width: 170px;height: 53px;position: relative;top:72px;left: 525px;">
    <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsb(rectIndex)"
@@ -1224,7 +1224,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 585px;">
  <div v-show="cell4" style="width: 170px;height: 53px;position: relative;top:77px;left: 525px;">
    <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsc(rectIndex)"

 UI-Project/src/views/hollow/hollowslicecage.vue

@@ -409,7 +409,7 @@
const rectStyle = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -425,24 +425,24 @@
// 计算每个小矩形的样式
const subRectStyle = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStylea = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -458,24 +458,24 @@
// 计算每个小矩形的样式
const subRectStylea = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStyleb = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -491,24 +491,24 @@
// 计算每个小矩形的样式
const subRectStyleb = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStylec = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -524,24 +524,24 @@
// 计算每个小矩形的样式
const subRectStylec = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
    height: '100%',
    marginLeft,
    marginRight,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
// 计算每个大矩形的样式
const rectStyled = (rect, index) => ({
  position: 'absolute',
  width: '170px',
  left: '0px',
  right: '0px',
  top: `${index*rect.top}px`,
  height: `${rect.height}px`,
});
@@ -557,9 +557,9 @@
// 计算每个小矩形的样式
const subRectStyled = (rectIndex, subIndex) => {
  const width = '18px';
  const marginLeft = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginLeft));
  const left = `${(subIndex * (parseInt(width) + parseInt(marginLeft))) / totalWidth * 100}%`;
  const marginRight = '8px';
  const totalWidth = 6 * (parseInt(width) + parseInt(marginRight));
  const right = `${(subIndex * (parseInt(width) + parseInt(marginRight))) / totalWidth * 100}%`;
  return {
    position: 'absolute',
    width,
@@ -567,7 +567,7 @@
    marginLeft,
    top: '0px',
    backgroundColor: '#911005',
    left,
    right,
  };
};
onMounted(() => {
@@ -693,7 +693,7 @@
    </div>
<!-- // 父级框 -->
<div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;left:475px;top:' + 1700*carPosition[0] + 'px;position:absolute;'">
    <div class="img-car1" :style="'z-index:999;left:305px;top:' + 1700*carPosition[0] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjusta"  
      :key="rect.id"  
@@ -707,7 +707,7 @@
    >
    </div>
    </div>
    <div class="img-car4" :style="'z-index:999;left:890px;top:' + 600*carPosition[1] + 'px;position:absolute;'">
    <div class="img-car4" :style="'z-index:999;left:730px;top:' + 600*carPosition[1] + 'px;position:absolute;'">
      <div  
      v-for="(rect, index) in adjust"  
      :key="rect.id"  
@@ -722,7 +722,7 @@
    </div>
    </div>
    <div style="position: relative;">
    <div v-show="cell1" style="width: 170px;height: 46px;position: relative;top:387px;left: 690px;">
    <div v-show="cell1" style="width: 170px;height: 46px;position: relative;top:387px;left: 523px;">
      <div v-for="(rect, rectIndex) in adjustedRects" :key="rect.id" :style="rectStyle(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRects(rectIndex)"
@@ -731,7 +731,7 @@
    ></div>
    </div>
    </div>
 <div v-show="cell2" style="width: 170px;height: 46px;position: relative;top:389px;left: 690px;">
 <div v-show="cell2" style="width: 170px;height: 46px;position: relative;top:389px;left: 523px;">
  <div v-for="(rect, rectIndex) in adjustedRectsa" :key="rect.id" :style="rectStylea(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsa(rectIndex)"
@@ -740,7 +740,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell3" style="width: 170px;height: 46px;position: relative;top:391px;left: 690px;">
  <div v-show="cell3" style="width: 170px;height: 46px;position: relative;top:391px;left: 523px;">
    <div v-for="(rect, rectIndex) in adjustedRectsb" :key="rect.id" :style="rectStyleb(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsb(rectIndex)"
@@ -749,7 +749,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell4" style="width: 170px;height: 46px;position: relative;top:392px;left: 690px;">
  <div v-show="cell4" style="width: 170px;height: 46px;position: relative;top:392px;left: 523px;">
    <div v-for="(rect, rectIndex) in adjustedRectsc" :key="rect.id" :style="rectStylec(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsc(rectIndex)"
@@ -758,7 +758,7 @@
    ></div>
    </div>
    </div>
  <div v-show="cell5" style="width: 170px;height: 46px;position: relative;top:394px;left: 690px;">
  <div v-show="cell5" style="width: 170px;height: 46px;position: relative;top:394px;left: 523px;">
    <div v-for="(rect, rectIndex) in adjustedRectsd" :key="rect.id" :style="rectStyled(rect, rectIndex)">
    <div
      v-for="(subRect, subIndex) in getSubRectsd(rectIndex)"
@@ -1031,9 +1031,9 @@
  background-repeat: no-repeat;
  background-attachment: local;
  min-height: 700px;
  width: 1200px;
  width: 1000px;
  max-width: 100%;
  background-size: 1200px 700px;
  background-size: 1000px 700px;
  overflow: hidden;
  position:relative
}