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;
}