xuchang-new/src/components/Common/forecastRect/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: 178px;
  left: 470px;
}
.TE229 {
  top: 178px;
  left: 590px; /* +120px */
}
.TE231 {
  top: 178px;
  left: 700px;
}
.TE233 {
  top: 178px;
  left: 800px;
}
.TE235 {
  top: 178px;
  left: 900px;
}
.TE237 {
  top: 178px;
  left: 1000px;
}
.TE239 {
  top: 178px;
  left: 1100px;
}
.TE241 {
  top: 178px;
  left: 1200px;
}

/** center bottom **/
.TE228 {
  top: 580px;
  left: 460px;
}
.TE230 {
  top: 580px;
  left: 570px;
}
.TE232 {
  top: 580px;
  left: 680px;
}
.TE234 {
  top: 580px;
  left: 790px;
}
.TE236 {
  top: 580px;
  left: 900px;
}
.TE238 {
  top: 580px;
  left: 1000px;
}
.TE240 {
  top: 580px;
  left: 1100px;
}
.TE242 {
  top: 580px;
  left: 1200px;
}

/** center middle **/
.TE201 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 360px;
}
.TE202 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 480px;
}
.TE203 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 600px;
}
.TE204 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 720px;
}
.TE205 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 840px;
}
.TE206 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 960px;
}
.TE207 {
  top: 270px;
  /* transform: rotate(-1deg); */
  left: 1080px;
}
.TE208 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 1080px;
}
.TE209 {
  top: 470px;
  /* transform: rotate(-1deg); */
  left: 1080px;
}
.TE210 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 1200px;
}
.TE211 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 1320px;
}
.TE212 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 1440px;
}
.TE213 {
  top: 380px;
  /* transform: rotate(-1deg); */
  left: 1560px;
}

/** right **/
.TE214 {
  top: 128px;
  left: 1720px;
}

.TE215 {
  top: 245px;
  left: 1740px;
}
.TE216 {
  top: 380px;
  left: 1740px;
}
.TE217 {
  top: 500px;
  left: 1760px;
}
.TE218 {
  top: 600px;
  left: 1780px;
}
.TE219 {
  top: 128px;
  left: 1840px;
}
.TE220 {
  top: 245px;
  left: 1860px;
}
.TE221 {
  top: 380px;
  left: 1860px;
}
.TE222 {
  top: 500px;
  left: 1880px;
}
.TE223 {
  top: 600px;
  left: 1900px;
}
.TE224 {
  top: 245px;
  left: 1980px;
}
.TE225 {
  top: 380px;
  left: 1980px;
}
.TE226 {
  top: 500px;
  left: 2000px;
}

/** 一层 --- 窑底 **/
.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: 660px;
}
.TE335 {
  top: 128px;
  left: 775px;
}
.TE337 {
  top: 128px;
  left: 880px;
}
.TE339 {
  top: 128px;
  left: 1000px;
}
.TE341 {
  top: 128px;
  left: 1110px;
}
.TE343 {
  top: 128px;
  left: 1225px;
}
.TE345 {
  top: 128px;
  left: 1335px;
}
.TE347 {
  top: 128px;
  left: 1440px;
}

/** center bottom **/
.TE334 {
  top: 620px;
  left: 610px;
}
.TE336 {
  top: 620px;
  left: 730px;
}
.TE338 {
  top: 620px;
  left: 860px;
}
.TE340 {
  top: 620px;
  left: 980px;
}
.TE342 {
  top: 620px;
  left: 1110px;
}
.TE344 {
  top: 620px;
  left: 1235px;
}
.TE346 {
  top: 620px;
  left: 1360px;
}
.TE348 {
  top: 620px;
  left: 1480px;
}

/** center middle **/
.TE301 {
  top: 340px;
  transform: scaleY(0.8);
  left: 450px;
}
.TE302 {
  top: 400px;
  transform: scaleY(0.8);
  left: 450px;
}
.TE303 {
  top: 460px;
  transform: scaleY(0.8);
  left: 450px;
}
.TE304 {
  top: 400px;
  /* transform: scaleY(0.8) skewX(-2deg); */
  transform: scaleY(0.8);
  left: 580px;
}
.TE305 {
  top: 340px;
  /* transform: scaleY(0.8) skewX(-2deg); */
  transform: scaleY(0.8);
  left: 720px;
}
.TE306 {
  top: 400px;
  /* transform: scaleY(0.8) skewX(-2deg); */
  /* transform: scaleY(0.8) rotate(-1deg); */
  transform: scaleY(0.8);
  left: 720px;
}
.TE307 {
  top: 460px;
  /* transform: scaleY(0.8) rotate(-1deg); */
  transform: scaleY(0.8);
  left: 720px;
}
.TE308 {
  top: 400px;
  transform: scaleY(0.8);
  left: 860px;
}
.TE309 {
  top: 400px;
  transform: scaleY(0.8);
  left: 1000px;
}
.TE310 {
  top: 400px;
  transform: scaleY(0.8);
  left: 1140px;
}
.TE311 {
  top: 340px;
  transform: scaleY(0.8);
  left: 1280px;
}
.TE312 {
  top: 400px;
  transform: scaleY(0.8);
  left: 1280px;
}
.TE313 {
  top: 460px;
  transform: scaleY(0.8);
  left: 1280px;
}
.TE314 {
  top: 400px;
  transform: scaleY(0.8);
  left: 1420px;
}
.TE315 {
  top: 400px;
  transform: scaleY(0.8);
  left: 1560px;
}
.TE316 {
  top: 400px;
  transform: scaleY(0.8);
  left: 1700px;
}
.TE317 {
  top: 340px;
  transform: scaleY(0.8);
  left: 1840px;
}
.TE318 {
  top: 400px;
  transform: scaleY(0.8);
  left: 1840px;
}
.TE319 {
  top: 460px;
  transform: scaleY(0.8);
  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);
}
.forecastValue{
  width: 100%;
  height: 29px;
  text-align: center;
  margin-top: 4px;
  background: linear-gradient( 270deg, rgba(0,255,251,0.67) 0%, rgba(0,255,245,0.64) 100%);
  box-shadow: 0px 1px 7px 0px rgba(58,0,0,0.5);
  opacity: 0.7;
  backdrop-filter: blur(3px);
}