page { background-color: #e4e4e4; } .codeTitle { width: 100%; background-color: #222222; border-radius: 0 0 300rpx 300rpx; box-sizing: border-box; padding: 30rpx 20rpx 0; } .codeTitle image { text-align: center; width: 100%; border-radius: 20rpx; display: block; } .shareCont { padding: 0 20rpx; box-sizing: border-box; width: 100%; } .indexNews { background: #c4c4c4; display: flex; font-weight: 600; line-height: 46rpx; border-radius: 50rpx; padding: 20rpx 30rpx; box-sizing: border-box; margin: 30rpx 0; } .indexNews image { width: 42rpx; height: 42rpx; margin: 4rpx 20rpx 0 0; } .goods { display: flex; flex-direction: row; margin: 0 -10rpx; } .goodsList-half { width: 50%; } .goodsList { margin: 0 10rpx 20rpx; background-color: #ffffff; border-radius: 20rpx; overflow: hidden; } .goodsList-img { width: 100%; position: relative; padding-top: 80%; } .goodsList-img image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .goodsList-cont { padding: 20rpx; box-sizing: border-box; } .goodsList-name { font-weight: 600; } .goodsList-text { margin: 10rpx 0; color: #6c6c6c; font-size: 26rpx; font-weight: 600; } .goodsList-label text { display: inline-block; font-size: 20rpx; background-color: #dedede; border-radius: 4rpx; padding: 6rpx 10rpx; margin: 0 10rpx 5rpx 0; } .goodsList-tips { text-align: right; margin: 30rpx 0 10rpx; } .goodsList-tips text { background-color: #ff5c36; transform: scale(.8); color: #ffffff; border-radius: 60rpx; font-size: 22rpx; padding: 2rpx 10rpx; } .goodsList-price { display: flex; } .goodsList-price-number { flex: 1; line-height: 50rpx; } .goodsList-price-btn { background-color: #ff5c36; height: 48rpx; line-height: 48rpx; border-radius: 10rpx; color: #ffffff; padding: 0 10rpx; font-size: 26rpx; font-weight: 600; } .goodsList-price-btn text { font-size: 22rpx; } .goodsList-price-btn image { width: 20rpx; height: 20rpx; margin: 0 10rpx 0 0; vertical-align: -2rpx; } .goodsList-price-number { color: #ff5c36; font-size: 32rpx; font-weight: 600; } .goodsList-price-number text { font-size: 22rpx; color: #8f8f8f; font-weight: normal; text-decoration:line-through; padding-right: 10rpx; } /* 滚动 */ /*首页跑马灯效果*/ @keyframes around { from { margin-left: 60rpx; } to { /* var接受传入的变量 */ margin-left: var(--marqueeWidth--); } } .marquee_container { width: calc(100% - 40rpx); overflow: hidden; } .marquee_container:hover { /* 不起作用 */ animation-play-state: paused; } .marquee_text { font-size: 30rpx; display: inline-block; white-space: nowrap; } .marquee_text.active { animation-name: around; animation-duration: 20s; /*过渡时间*/ animation-iteration-count: infinite; animation-timing-function: linear; }