body { background: #270802; } .body { position: relative; .top_bg { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 2.8rem; background: url(../assets/detail/bg01.png) center no-repeat; background-size: cover; } .ce_bg { position: absolute; top: 8.91rem; right: 0; z-index: 1; width: 2.26rem; height: 4.5rem; background: url(../assets/index/bg02.png) center no-repeat; background-size: cover; } .go_home { display: none; position: fixed; right: 0.16rem; bottom: 1.06rem; z-index: 1000; width: 64px; height: 80px; background: url(../assets/icon01.gif) center no-repeat; background-size: contain; } .body_c { z-index: 100; background: url(../assets/index/bg03.png) bottom center no-repeat; background-size: 7.5rem 2.35rem; padding: 0 0.4rem 2.35rem; .body_title { padding: 1.59rem 0 1.41rem; align-items: center; span { display: inline-block; font-size: 0.44rem; font-weight: 800; color: #F5BFC1; text-align: center; background-image: linear-gradient(175deg, #FFF5E4 30%, #FFBE8A 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .box_1 { background: #501B10; border-radius: 0.16rem; white-space: pre-wrap; margin-bottom: 0.48rem; .box_t { width: 5.9rem; border-radius: 0.16rem; overflow: hidden; margin: -0.8rem auto 0.48rem; img { display: block; width: 5.9rem; height: 3.36rem; object-fit: cover; } span { text-align: center; font-size: 0.4rem; font-weight: 600; color: #FFF9EC; line-height: 0.56rem; padding: 0.12rem 0.16rem; background: linear-gradient(175deg, #FBDC9D 0%, #C6914B 100%); } } p { padding: 0 0.24rem; font-size: 0.26rem; color: #FEE2C3; line-height: 0.44rem; margin: 0 0 0.48rem; } } .body_t { margin: 0 0 0.24rem; flex-direction: row; justify-content: center; align-items: center; &:first-child { margin-top: 0; } &:before,&:after { content: ''; display: inline-block; vertical-align: middle; width: 0.32rem; height: 0.09rem; background: url(../assets/index/icon05.png) center no-repeat; background-size: contain; margin: 0 0.16rem; } span { display: inline-block; font-size: 0.32rem; font-weight: 800; color: #F5BFC1; text-align: center; background-image: linear-gradient(175deg, #FFF5E4 30%, #FFBE8A 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .box_2 { height: 3.68rem; background: #501B10; border-radius: 0.16rem; -webkit-overflow-scrolling: touch; overflow-x: auto; display: block; white-space: nowrap; margin-bottom: 0.48rem; &::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } img { display: inline-block; // width: 5.62rem; height: 3.2rem; margin: 0.24rem 0.18rem 0 0; border-radius: 0.16rem; background: #270802; object-fit: contain; &:first-child { margin-left: 0.24rem; } &:last-child { margin-right: 0.24rem; } } } .box_3 { background: #501B10; border-radius: 0.16rem; padding: 0.32rem 0.24rem; white-space: pre-wrap; font-size: 0.26rem; color: #FEE2C3; line-height: 0.44rem; margin: 0 0 0.21rem; } } .body_b { height: 1.39rem; flex-direction: row; justify-content: center; .btn { justify-content: center; align-items: center; width: 2.8rem; height: 0.98rem; border-radius: 0.49rem; font-size: 0.28rem; font-weight: 600; color: #FFFFFF; background: linear-gradient(170deg, #FF9454 0%, #E24A26 100%); &.btn_l { background: linear-gradient(169deg, #FCD822 0%, #FF9117 100%); margin-right: 0.24rem; } } } &.body_per { .box_1 { .box_t { width: 5.36rem; img { display: block; width: 5.36rem; height: 6.70rem; object-fit: cover; } span { font-size: 0.56rem; line-height: 0.78rem; padding: 0.29rem 0.16rem; } } } } .share { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.6) url(../assets/detail/icon01.png) no-repeat; background-position: 2.42rem 0.3rem; background-size: 4.58rem 1.74rem; z-index: 1000; } }