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: 80px;
}
.TE272 {
  top: 254px; /* +94px */
  left: 80px;
}
.TE273 {
  top: 348px; /* +94px */
  left: 80px;
}
.TE274 {
  top: 442px;
  left: 80px;
}
.TE279 {
  top: 536px;
  left: 80px;
}
.TE275 {
  top: 160px;
  left: 216px;
}
.TE276 {
  top: 254px;
  left: 216px; /* +136px */
}
.TE277 {
  top: 348px; /* +94px */
  left: 216px; /* +136px */
}
.TE278 {
  top: 442px; /* +94px */
  left: 216px; /* +136px */
}
.TE280 {
  top: 536px; /* +94px */
  left: 216px; /* +136px */
}

/** center top **/
.TE227 {
  top: 128px;
  left: 616px;
}
.TE229 {
  top: 128px;
  left: 736px; /* +120px */
}
.TE231 {
  top: 128px;
  left: 856px;
}
.TE233 {
  top: 128px;
  left: 976px;
}
.TE235 {
  top: 128px;
  left: 1096px;
}
.TE237 {
  top: 128px;
  left: 1216px;
}
.TE239 {
  top: 128px;
  left: 1336px;
}
.TE241 {
  top: 128px;
  left: 1456px;
}

/** center bottom **/
.TE228 {
  top: 620px;
  left: 588px;
}
.TE230 {
  top: 620px;
  left: 710px;
}
.TE232 {
  top: 620px;
  left: 830px;
}
.TE234 {
  top: 620px;
  left: 950px;
}
.TE236 {
  top: 620px;
  left: 1070px;
}
.TE238 {
  top: 620px;
  left: 1190px;
}
.TE240 {
  top: 620px;
  left: 1310px;
}
.TE242 {
  top: 620px;
  left: 1430px;
}

/** center middle **/
.TE201 {
  top: 390px;
  left: 450px;
}
.TE202 {
  top: 390px;
  left: 580px;
}
.TE203 {
  top: 390px;
  left: 710px;
}
.TE204 {
  top: 390px;
  left: 840px;
}
.TE205 {
  top: 390px;
  left: 970px;
}
.TE206 {
  top: 390px;
  left: 1100px;
}
.TE207 {
  top: 340px;
  left: 1260px;
}
.TE208 {
  top: 390px;
  left: 1260px;
}
.TE209 {
  top: 480px;
  left: 1260px;
}
.TE210 {
  top: 390px;
  left: 1390px;
}
.TE211 {
  top: 390px;
  left: 1530px;
}
.TE212 {
  top: 390px;
  left: 1660px;
}
.TE213 {
  top: 390px;
  left: 1790px;
}

/** right **/
.TE214 {
  top: 160px;
  left: 2000px;
}
.TE215 {
  top: 265px;
  left: 2020px;
}
.TE216 {
  top: 400px;
  left: 2030px;
}
.TE217 {
  top: 535px;
  left: 2050px;
}
.TE218 {
  top: 670px;
  left: 2080px;
}
.TE219 {
  top: 160px;
  left: 2120px;
}
.TE220 {
  top: 265px;
  left: 2140px;
}
.TE221 {
  top: 400px;
  left: 2150px;
}
.TE222 {
  top: 535px;
  left: 2170px;
}
.TE223 {
  top: 670px;
  left: 2200px;
}
.TE224 {
  top: 265px;
  left: 2240px;
}
.TE225 {
  top: 400px;
  left: 2310px;
}
.TE226 {
  top: 535px;
  left: 2280px;
}