diff --git a/pages/raffle/raffle.vue b/pages/raffle/raffle.vue index e9859dc..b79193f 100644 --- a/pages/raffle/raffle.vue +++ b/pages/raffle/raffle.vue @@ -28,7 +28,19 @@ - + + + + + + + + + + 谢谢参与 + + + @@ -132,9 +144,83 @@ export default { &__turntable { height: 560rpx; display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + grid-gap: 12rpx; + grid-template-areas: + "shop1 shop2 shop3" + "shop4 center shop6" + "shop7 shop8 shop9"; margin-top: 40rpx; padding: 0 70rpx; + + &--item { + display: flex; + align-items: center; + justify-content: center; + } + .item-shop { + width: 100%; + height: 100%; + background: linear-gradient(to bottom, #fff 88%, #FECDC0); + border-radius: 22rpx; + + &__box { + width: calc(100% - 12rpx); + height: calc(100% - 12rpx); + border: 1rpx dashed #C5352B; + border-radius: 22rpx; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + margin: 6rpx; + + &--text { + font-size: 24rpx; + font-weight: normal; + color: #E3473C; + line-height: 4rpx; + + padding-top: 16rpx; + } + } + } + & .center-btn { + display: flex; + justify-content: center; + align-items: center; + width: 166rpx; + height: 166rpx; + background: linear-gradient(180deg, #FCE2C9, #FED491); + box-shadow: 0px 8rpx 18px 0px rgba(155,22,40,0.35); + border-radius: 50%; + + & > view { + width: 142rpx; + height: 142rpx; + background: linear-gradient(180deg, #FCE2C9, #FED491); + box-shadow: 0px 4px 9px 0px rgba(155,22,40,0.35); + border-radius: 50%; + + position: relative; + &::after { + width: 80rpx; + content: "开始抽奖"; + font-size: 40rpx; + font-weight: normal; + color: #D8372C; + text-shadow: 0 2rpx 0 #FCF4CA; + + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + } + } + } } &__tip { zoom: .9;