.header { align-items: center; width: 7.5rem; height: .94rem; background-color: #000000; color: #ffffff; position: fixed; left: 50%; top: 0; z-index: 99; transform: translateX(-50%); } .header-back { justify-content: center; width: .6rem; height: .4rem; } .header-back>img { width: .4rem; height: .4rem; } .header-title { width: calc(100% - 1.2rem); line-height: 1.2; text-align: center; letter-spacing: .04rem; text-indent: .04rem; } /* 轮播图 */ .banner { width: 100%; height: 3.64rem; overflow: hidden; } .banner img { width: 100%; min-height: 3.64rem; } /* 首页内容区 */ .index-content { background-color: #fed7b0; padding: .45rem .2rem; border-top: .02rem solid #eeb94f; } /* 活动 */ .index-content .section { padding: .1rem; background-image: linear-gradient(to top, #fec44b, #fff8b4); position: relative; } .section-box { flex-wrap: wrap; width: 100%; padding: .48rem .36rem; background-color: #ffffff; } .activity{ justify-content: space-between; } .activity .envelopes { width: 2.8rem; height: 3.66rem; background-image: url(../images/envelopes.png); background-size: 100% 100%; } .activity .envelopes>span { display: block; font-size: .64rem; text-align: center; line-height: 1.5; margin-top: 1.7rem; color: #ffebac; } .activity .envelopes>a { justify-content: center; align-items: center; width: calc(100% - .52rem); height: .58rem; background-image: linear-gradient(to top, #fed383, #fdf0c2); margin: .15rem auto 0; color: #ec294c; font-weight: bold; animation: scale_name 1s linear alternate infinite; } @keyframes scale_name { from { transform: scale(.95); } to { transform: scale(1.05); } } .activity .txt { width: 100%; line-height: 1.7; } .activity .txt>p { margin-top: .25rem; } /* 商家推荐 */ .recommend-title{ justify-content: center; align-items: center; width: 3.2rem; height: .88rem; background-color: #ff353f; border: .1rem solid #ffde77; border-radius: .44rem; color: #ffffff; text-indent: .04rem; letter-spacing: .04rem; position: absolute; left: 50%; top: -0.49rem; transform: translateX(-50%); } .recommend .item{ width: calc(33.33% - .16rem); margin: .25rem .24rem 0 0; } .recommend .item:nth-of-type(3n){ margin-right: 0; } .recommend .item>.img{ width: 100%; height: 1.9rem; overflow: hidden; } .recommend .item>.img img{ width: 100%; min-height: 1.9rem; } .recommend .item>.txt{ margin: .2rem 0 .1rem; text-align: center; } /* 尾部 */ .footer{ width: 7.5rem; height: .96rem; box-shadow: 0 0 .4rem rgba(243,91,0,.4); padding: 0 .2rem; background-color: #ffffff; overflow-x: hidden; position: fixed; left: 50%; bottom: 0; z-index: 99; transform: translateX(-50%); } .foot{ justify-content: space-between; align-items: center; width: 100%; height: .96rem; } .foot>.item{ flex-wrap: wrap; justify-content: center; width: 25%; } .foot>.item img{ height: .34rem; margin-top: .06rem; } .foot>.item img:nth-of-type(2){ display: none; } .foot>.item span{ width: 100%; text-align: center; margin-top: .06rem; } .foot>.item.active img:nth-of-type(1){ display: none; } .foot>.item.active img:nth-of-type(2){ display: block; } .foot>.item.active span{ color: #f35b00; }