.wareaitem { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(255, 255, 255, 0.7); } .wareaitem .tp uni-image { width: 100%; height: 100%; } .wareaitem .annotation { width: 7vw; height: 8vw; z-index: 20; } .wareaitem .annotation > uni-view { position: relative; } .wareaitem .annotation > uni-view:nth-child(1) { width: 7vw; height: 2vw; background: #F2F3F7; box-shadow: 0 0 0 0 rgba(182, 186, 196, 0.35); border: 0.0625rem solid #FFFFFF; font-weight: 400; font-size: 1vw; color: #333333; display: flex; align-items: center; justify-content: center; z-index: 3; } .wareaitem .annotation > uni-view:nth-child(2) { width: 4vw; height: 2vw; margin: -0.0625rem auto 0; z-index: 2; } .wareaitem .annotation > uni-view:nth-child(3) { width: 3vw; height: 5vw; z-index: 1; margin: -1vw auto 0; } .wareaitem > uni-view { position: absolute; } .wareaitem > uni-view:nth-child(1) { width: 26vw; height: 22vw; top: 17vw; left: 8vw; z-index: 10; } .wareaitem > uni-view:nth-child(2) { width: 68vw; height: 22vw; top: 4vw; left: 18vw; } .wareaitem > uni-view:nth-child(3) { width: 20vw; height: 13vw; top: 15vw; left: 43vw; } .wareaitem > uni-view:nth-child(4) { width: 20vw; height: 14vw; top: 26vw; left: 45vw; z-index: 10; } .wareaitem > uni-view:nth-child(5) { width: 11vw; height: 7vw; top: 28vw; left: 56vw; } .wareaitem > uni-view:nth-child(6) { width: 11vw; height: 9vw; top: 23vw; left: 63vw; z-index: 5; } .wareaitem > uni-view:nth-child(7) { width: 13vw; height: 11vw; top: 25vw; left: 80vw; } .wareaitem > uni-view:nth-child(8) { width: 15vw; height: 14vw; top: 31vw; left: 67vw; } .wareaitem > uni-view:nth-child(9) { width: 48vw; height: 22vw; top: 34vw; left: 21vw; z-index: 11; } .wareaitem > uni-view:nth-child(10) { width: 17vw; height: 10vw; top: 48vw; left: 26vw; z-index: 12; } .wareaitem > uni-view:nth-child(11) { width: 11vw; height: 8vw; top: 22vw; left: 56vw; } .wareaitem > uni-view:nth-child(12) { width: 3vw; height: 3vw; top: 21vw; left: 57vw; } .wareaitem > uni-view:nth-child(13) { top: 15.5vw; left: 21.5vw; } .wareaitem > uni-view:nth-child(14) { top: 12vw; left: 48vw; } .wareaitem > uni-view:nth-child(15) { top: 20vw; left: 47vw; } .wareaitem > uni-view:nth-child(16) { top: 27vw; left: 71vw; } .wareaitem > uni-view:nth-child(17) { top: 21vw; left: 83vw; } .backgroundContainer { display: flex; flex-direction: column; position: relative; width: 100vw; height: 100vh; background-image: url('../../static/index/lightbgcnew.png'); background-size: cover; background-position: center center; overflow: hidden; } .darkbackgroundContainer { width: 100vw; height: 100vh; display: flex; flex-direction: column; position: relative; background-image: url('../../static/index/background.png'); background-size: cover; background-position: center center; overflow: hidden; }