init

pages/raffle/raffle.vue

@@ -28,7 +28,19 @@
           </view>
 
           <view class="raffle-box__turntable">
-
+            <view v-for="(item,index) in 9" class="raffle-box__turntable--item" :style="{ 'grid-area': index === 4 ? 'center' : 'shop'+(index+1) }">
+              <view v-if="index === 4" class="center-btn">
+                <view></view>
+              </view>
+              <view class="item-shop" v-else>
+                <view class="item-shop__box">
+                  <view class="item-shop__box--img">
+                    <u-image mode="heightFix" height="84rpx" :src="require('@/static/laugh.png')"></u-image>
+                  </view>
+                  <view class="item-shop__box--text">谢谢参与</view>
+                </view>
+              </view>
+            </view>
           </view>
 
           <view class="raffle-box__tip">
@@ -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;