活动列表样式优化

pages/activity/index.vue

@@ -40,14 +40,14 @@
           <div class="right">
             <div class="right-title">{{ active.title }}</div>
             <div class="right-inf">
-              <div class="inf-type">
+              <div class="inf-type" style="width: 17%;">
                 <div
                   :class="{ color: active.type == 1 }"
                   class="originColor"
                 ></div>
-                <div>{{ active.type === 1 ? "线下" : "线上" }}</div>
+                <div>{{ active.type == 1 ? "线下" : "线上" }}</div>
               </div>
-              <div class="inf-way">
+              <div class="inf-way" style="width: 24%;">
                 {{ active.way }}
               </div>
               <div class="inf-date">
@@ -57,6 +57,9 @@
           </div>
         </div>
         <div class="readShare">
+		  <div v-show="active.status == '0'" class="active-tips-box wait-color">活动待开始</div>
+		  <div v-show="active.status == '1'" class="active-tips-box ing-color">活动进行中</div>
+		  <div v-show="active.status == '2'" class="active-tips-box end-color">活动已结束</div>
           <div class="read">浏览 {{ active.read }}</div>
           <div class="share">分享 {{ active.share }}</div>
         </div>
@@ -81,33 +84,33 @@ export default {
       pickerTypeArray: [
         {
           label: "全部",
-          value: 1,
+          value: 0,
         },
         {
           label: "线上",
-          value: 2,
+          value: 1,
         },
         {
           label: "线下",
-          value: 3,
+          value: 2,
         },
       ],
       pickerStateArray: [
         {
           label: "全部",
-          value: 1,
+          value: 3,
         },
         {
           label: "待开始",
-          value: 2,
+          value: 0,
         },
         {
           label: "已开始",
-          value: 3,
+          value: 1,
         },
         {
           label: "已结束",
-          value: 4,
+          value: 2,
         },
       ],
       activeList: [
@@ -137,7 +140,7 @@ export default {
   },
   methods: {
     bindPickerChange(e, op) {
-      console.log(e);
+      console.log(e.detail.value);
       switch (op) {
         case "type":
           this.indexType = e.detail.value;
@@ -206,18 +209,19 @@ export default {
                 read: 0,
                 share: 0,
                 type: "",
+				status:'',
                 id: "",
               };
               ob.url = getApp().globalData.shareUrl + item.pic_url;
               ob.title = item.name;
               ob.way = item.sponsor;
-              ob.date = this.$options.filters["globalTime"](item.start_time);
-              ob.read =
-                parseInt(item.base_read_count) + parseInt(item.real_read_count);
-              ob.share =
-                parseInt(item.real_repost_count) +
-                parseInt(item.base_repost_count);
+              let time = this.$options.filters["globalTime"](item.start_time);
+			  let timeSecond = this.$options.filters["globalTime"](item.end_time);
+			  ob.date = time + "至" + timeSecond;
+              ob.read = parseInt(item.base_read_count) + parseInt(item.real_read_count);
+              ob.share =parseInt(item.real_repost_count) +parseInt(item.base_repost_count);
               ob.type = item.type;
+			  ob.status = item.status; 
               ob.id = item.id;
               return ob;
             });
@@ -284,11 +288,11 @@ export default {
     display: flex;
     flex-direction: column;
     .actives-item {
-      height: 150rpx;
+      // height: 150rpx;
       box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
       border-radius: 32rpx;
       margin-top: 20px;
-      padding: 50rpx;
+      padding: 20rpx;
       display: flex;
       flex-direction: column;
       .active-content {
@@ -304,6 +308,7 @@ export default {
           }
         }
         .right {
+		  width: 80%;
           height: 120rpx;
           box-sizing: border-box;
           display: flex;
@@ -317,16 +322,17 @@ export default {
           }
           .right-inf {
             display: flex;
-            font-size: 22rpx;
+            font-size: 21rpx;
+			align-items: center;
             color: $uni-text-color-grey;
             .inf-type {
-              margin-right: 20rpx;
+              margin-right: 10rpx;
               display: flex;
               align-items: center;
               .originColor {
                 margin-right: 8rpx;
-                height: 25rpx;
-                width: 25rpx;
+                height: 20rpx;
+                width: 20rpx;
                 border-radius: 50%;
                 background-color: #ffcf86;
               }
@@ -343,6 +349,23 @@ export default {
         font-size: 20rpx;
         color: rgba(0, 0, 0, 0.3);
         margin-top: 20rpx;
+		align-items: center;
+		.active-tips-box {
+			font-size: 22rpx;
+			padding: 10rpx;
+			border-radius: 10rpx;
+			color: #fff;
+			margin-right: 50rpx;
+		}
+		.wait-color {
+			background-color: #AEE359;
+		}
+		.ing-color {
+			background-color: #00A8EA;
+		}
+		.end-color {
+			background-color: #d7d7d7;
+		}
         .read {
           margin-right: 60rpx;
         }