xuchang-new/src/components/Common/BlueRect/index.module.css

.blueRect {
  display: inline-block;
  width: 106px;
  height: 68px;
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  background: #0a426820;
  border-radius: 4px;
}

.blueRect::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 50%,
    #24aebb 100%
  );
  border-radius: 3px;
}

.blueRect::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    to right,
    #24aebb 0%,
    transparent 50%,
    transparent 100%
  );
  border-radius: 3px;
}

/** left **/

.TE271 {
  top: 160px;
  left: 70px;
}
.TE272 {
  top: 254px; /* +94px */
  left: 70px;
}
.TE273 {
  top: 348px; /* +94px */
  left: 70px;
}
.TE274 {
  top: 442px;
  left: 70px;
}
.TE279 {
  top: 536px;
  left: 70px;
}
.TE275 {
  top: 160px;
  left: 206px;
}
.TE276 {
  top: 254px;
  left: 206px; /* +136px */
}
.TE277 {
  top: 348px; /* +94px */
  left: 206px; /* +136px */
}
.TE278 {
  top: 442px; /* +94px */
  left: 206px; /* +136px */
}
.TE280 {
  top: 536px; /* +94px */
  left: 206px; /* +136px */
}

/** center top **/
.TE227 {
  top: 128px;
  left: 660px;
}
.TE229 {
  top: 128px;
  left: 776px; /* +120px */
}
.TE231 {
  top: 128px;
  left: 896px;
}
.TE233 {
  top: 128px;
  left: 1006px;
}
.TE235 {
  top: 128px;
  left: 1119px;
}
.TE237 {
  top: 128px;
  left: 1236px;
}
.TE239 {
  top: 128px;
  left: 1346px;
}
.TE241 {
  top: 128px;
  left: 1456px;
}

/** center bottom **/
.TE228 {
  top: 620px;
  left: 628px;
}
.TE230 {
  top: 620px;
  left: 750px;
}
.TE232 {
  top: 620px;
  left: 870px;
}
.TE234 {
  top: 620px;
  left: 995px;
}
.TE236 {
  top: 620px;
  left: 1120px;
}
.TE238 {
  top: 620px;
  left: 1245px;
}
.TE240 {
  top: 620px;
  left: 1370px;
}
.TE242 {
  top: 620px;
  left: 1480px;
}

/** center middle **/
.TE201 {
  top: 410px;
  transform: rotate(-1deg);
  left: 480px;
}
.TE202 {
  top: 410px;
  transform: rotate(-1deg);
  left: 610px;
}
.TE203 {
  top: 410px;
  transform: rotate(-1deg);
  left: 740px;
}
.TE204 {
  top: 410px;
  transform: rotate(-1deg);
  left: 870px;
}
.TE205 {
  top: 410px;
  transform: rotate(-1deg);
  left: 1000px;
}
.TE206 {
  top: 410px;
  transform: rotate(-1deg);
  left: 1130px;
}
.TE207 {
  top: 330px;
  transform: rotate(-1deg);
  left: 1260px;
}
.TE208 {
  top: 410px;
  transform: rotate(-1deg);
  left: 1260px;
}
.TE209 {
  top: 485px;
  transform: rotate(-1deg);
  left: 1260px;
}
.TE210 {
  top: 410px;
  transform: rotate(-1deg);
  left: 1390px;
}
.TE211 {
  top: 410px;
  transform: rotate(-1deg);
  left: 1520px;
}
.TE212 {
  top: 410px;
  transform: rotate(-1deg);
  left: 1650px;
}
.TE213 {
  top: 410px;
  transform: rotate(-1deg);
  left: 1780px;
}

/** right **/
.TE214 {
  top: 168px;
  left: 2000px;
}
.TE215 {
  top: 265px;
  left: 2030px;
}
.TE216 {
  top: 400px;
  left: 2050px;
}
.TE217 {
  top: 520px;
  left: 2070px;
}
.TE218 {
  top: 640px;
  left: 2090px;
}
.TE219 {
  top: 168px;
  left: 2120px;
}
.TE220 {
  top: 265px;
  left: 2135px;
}
.TE221 {
  top: 400px;
  left: 2170px;
}
.TE222 {
  top: 520px;
  left: 2180px;
}
.TE223 {
  top: 640px;
  left: 2200px;
}
.TE224 {
  top: 265px;
  left: 2240px;
}
.TE225 {
  top: 400px;
  left: 2290px;
}
.TE226 {
  top: 520px;
  left: 2290px;
}

/** 一层 --- 窑底 **/
.TE401 {
  top: 420px;
  left: 20px;
}
.TE402 {
  top: 420px;
  left: 140px;
}
.TE403 {
  top: 420px;
  left: 260px;
}
.PE401 {
  top: 320px;
  left: 20px;
}
.PE402 {
  top: 320px;
  left: 140px;
}
.PE403 {
  top: 320px;
  left: 260px;
}

/** center top **/
.TE333 {
  top: 128px;
  left: 620px;
}
.TE335 {
  top: 128px;
  left: 735px;
}
.TE337 {
  top: 128px;
  left: 855px;
}
.TE339 {
  top: 128px;
  left: 975px;
}
.TE341 {
  top: 128px;
  left: 1090px;
}
.TE343 {
  top: 128px;
  left: 1205px;
}
.TE345 {
  top: 128px;
  left: 1325px;
}
.TE347 {
  top: 128px;
  left: 1440px;
}

/** center bottom **/
.TE334 {
  top: 620px;
  left: 588px;
}
.TE336 {
  top: 620px;
  left: 710px;
}
.TE338 {
  top: 620px;
  left: 840px;
}
.TE340 {
  top: 620px;
  left: 965px;
}
.TE342 {
  top: 620px;
  left: 1090px;
}
.TE344 {
  top: 620px;
  left: 1215px;
}
.TE346 {
  top: 620px;
  left: 1340px;
}
.TE348 {
  top: 620px;
  left: 1460px;
}

/** center middle **/
.TE301 {
  top: 340px;
  transform: scaleY(0.8) skewX(-5deg);
  left: 450px;
}
.TE302 {
  top: 400px;
  transform: scaleY(0.8) skewX(-5deg);
  left: 450px;
}
.TE303 {
  top: 460px;
  transform: scaleY(0.8) skewX(-5deg);
  left: 450px;
}
.TE304 {
  top: 400px;
  /* transform: scaleY(0.8) skewX(-2deg); */
  transform: scaleY(0.8) rotate(-1deg) skewX(-2deg);
  left: 580px;
}
.TE305 {
  top: 340px;
  /* transform: scaleY(0.8) skewX(-2deg); */
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 720px;
}
.TE306 {
  top: 400px;
  /* transform: scaleY(0.8) skewX(-2deg); */
  /* transform: scaleY(0.8) rotate(-1deg); */
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 720px;
}
.TE307 {
  top: 460px;
  /* transform: scaleY(0.8) rotate(-1deg); */
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 720px;
}
.TE308 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 860px;
}
.TE309 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1000px;
}
.TE310 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1140px;
}
.TE311 {
  top: 340px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1280px;
}
.TE312 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1280px;
}
.TE313 {
  top: 460px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1280px;
}
.TE314 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1420px;
}
.TE315 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1560px;
}
.TE316 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1700px;
}
.TE317 {
  top: 340px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1840px;
}
.TE318 {
  top: 400px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1840px;
}
.TE319 {
  top: 460px;
  transform: scaleY(0.8) rotate(-1deg) skewX(-1deg);
  left: 1840px;
}

/** right **/
.TE327 {
  top: 152px;
  left: 2000px;
  transform: scale(0.8) skewX(5deg);
}
.TE320 {
  top: 252px;
  left: 2020px;
  transform: scale(0.8) skewX(7deg);
}
.TE321 {
  top: 400px;
  left: 2040px;
  transform: scale(0.8) skewX(7deg);
}
.TE322 {
  top: 532px;
  left: 2060px;
  transform: scale(0.8) skewX(7deg);
}
.TE330 {
  top: 656px;
  left: 2080px;
  transform: scale(0.8) skewX(7deg);
}
.TE323 {
  top: 152px;
  left: 2100px;
  transform: scale(0.8) skewX(7deg);
}
.TE328 {
  top: 252px;
  left: 2120px;
  transform: scale(0.8) skewX(7deg);
}
.TE331 {
  top: 400px;
  left: 2140px;
  transform: scale(0.8) skewX(7deg);
}
.TE329 {
  top: 532px;
  left: 2160px;
  transform: scale(0.8) skewX(7deg);
}
.TE326 {
  top: 656px;
  left: 2180px;
  transform: scale(0.8) skewX(7deg);
}
.TE324 {
  top: 252px;
  left: 2220px;
  transform: scale(0.8) skewX(7deg);
}
.TE332 {
  top: 400px;
  left: 2260px;
  transform: scale(0.8) skewX(7deg);
}
.TE325 {
  top: 532px;
  left: 2260px;
  transform: scale(0.8) skewX(7deg);
}