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