Forráskód Böngészése

开发活动页面

bayi 2 éve
szülő
commit
c68d5eb409

+ 50 - 0
components/activityList/index.less

@@ -369,4 +369,54 @@
       }
     }
   }
+
+  .newActivityBox {
+    margin-bottom: 20rpx;
+    width: 100%;
+    padding: 20rpx;
+    box-sizing: border-box;
+    background-color: white;
+    border-radius: 30rpx;
+    box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+
+    .cover {
+      margin: 0 auto;
+      width: 100%;
+      height: 518rpx;
+      border-radius: 20rpx;
+      background-color: #EBEBEB;
+    }
+
+    .footer {
+      padding: 10rpx 0rpx;
+
+      .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .title {
+          font-size: 32rpx;
+          margin-bottom: 8rpx;
+        }
+
+        .partake {
+          font-size: 27rpx;
+
+          text {
+            color: #2FB1F1;
+          }
+        }
+
+        .btn {
+          padding: 10rpx 48rpx;
+          background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+          box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+          border-radius: 50rpx;
+          color: white;
+          font-size: 32rpx;
+        }
+      }
+    }
+  }
 }

+ 19 - 0
components/activityList/index.wxml

@@ -97,6 +97,25 @@
         </view>
       </view>
     </view>
+    <view class="newActivityBox" wx:if="{{item.bannerType==5}}" data-info="{{item}}">
+      <image src="{{item.icon}}" class="cover" />
+      <view class="footer">
+        <view class="row">
+          <view class="title">{{item.title}}</view>
+          <view class="partake">
+            <text>{{item.joinCount}}</text>人参与
+          </view>
+        </view>
+        <view class="row" style="margin-top: 10rpx;">
+          <view class="time">
+            {{filters.formatDate(item.startTime,2)}}—{{filters.formatDate(item.endTime,2)}}
+          </view>
+          <view class="btn" data-info='{{item}}' bindtap="activityEvent">
+            立即参与
+          </view>
+        </view>
+      </view>
+    </view>
   </block>
 </view>
 <Voucher id="voucher" bind:reload='getActivities' />

+ 42 - 0
components/activityList/index.wxss

@@ -299,3 +299,45 @@
   background-image: linear-gradient(270deg, #BAC7D0 0%, #C9D3DC 100%, #D5DFE3 100%);
   box-shadow: none;
 }
+.activityList .newActivityBox {
+  margin-bottom: 20rpx;
+  width: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 30rpx;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+}
+.activityList .newActivityBox .cover {
+  margin: 0 auto;
+  width: 100%;
+  height: 518rpx;
+  border-radius: 20rpx;
+  background-color: #EBEBEB;
+}
+.activityList .newActivityBox .footer {
+  padding: 10rpx 0rpx;
+}
+.activityList .newActivityBox .footer .row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.activityList .newActivityBox .footer .row .title {
+  font-size: 32rpx;
+  margin-bottom: 8rpx;
+}
+.activityList .newActivityBox .footer .row .partake {
+  font-size: 27rpx;
+}
+.activityList .newActivityBox .footer .row .partake text {
+  color: #2FB1F1;
+}
+.activityList .newActivityBox .footer .row .btn {
+  padding: 10rpx 48rpx;
+  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+  border-radius: 50rpx;
+  color: white;
+  font-size: 32rpx;
+}

+ 3 - 1
pages/activity/index.less

@@ -1 +1,3 @@
-/* pages/activity/index.wxss */
+.activityList{
+  margin-top: 30rpx;
+}

+ 1 - 2
pages/activity/index.wxml

@@ -1,6 +1,5 @@
 <navigationBar bind:reload='resetData'></navigationBar>
 <view class="activityBox">
   <banner classify='3' />
-  <activityList />
-
+  <activityList class="activityList"/>
 </view>

+ 3 - 1
pages/activity/index.wxss

@@ -1 +1,3 @@
-/* pages/activity/index.wxss */
+.activityList {
+  margin-top: 30rpx;
+}