活动列表

ybf_wx/src/views/active/activeList.vue

 <template>
-  <div>
+  <div class="container">
     <div class="title">
       <span>会员分裂</span>
       <span class="fr">查看更多<span class="icon">></span></span>
@@ -7,11 +7,43 @@
     <div class="active">
       <div class="list">
           <div class="left"></div>
-          <div class="right"></div>
+          <div class="right">
+            <h3>砍价</h3>
+            <p>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。</p>
+          </div>
+      </div>
+      <div class="list">
+          <div class="left"></div>
+          <div class="right">
+            <h3>集赞</h3>
+            <p>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。</p>
+          </div>
+      </div>
+      <div class="list list3">
+          <div class="left"></div>
+          <div class="right">
+            <h3>推荐有礼</h3>
+            <p>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。</p>
+          </div>
+      </div>
+    </div>
+    <div class="fg">复购</div>
+    <div class="active">
+      <div class="list">
+          <div class="left"></div>
+          <div class="right">
+            <h3>大转盘抽奖</h3>
+            <p>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。</p>
+          </div>
+      </div>
+      <div class="list list3">
+          <div class="left"></div>
+          <div class="right">
+            <h3>砸金蛋抽奖</h3>
+            <p>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。</p>
+          </div>
       </div>
     </div>
-    
-
   </div>
 </template>
 
@@ -20,6 +52,10 @@ export default {};
 </script>
 
 <style scoped>
+.container {
+  height: 100%;
+  background-color: rgba(248, 248, 248, 1);
+}
 .title {
   height: 44px;
   background: rgba(248, 248, 248, 1);
@@ -28,28 +64,54 @@ export default {};
   font-size: 12px;
   color: rgba(45, 71, 106, 1);
 }
+.fg {
+  padding: 0 16px;
+  font-size: 12px;
+  color: rgba(45, 71, 106, 1);
+  height: 44px;
+  line-height: 44px; 
+}
 .icon {
   font-weight: 800;
 }
 .active {
-    padding: 16px;
+  background-color: #fff;
+  padding: 12px 12px 0 12px;
   box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
 }
 .list {
-  height: 104px;
+  height: 94px;
   width: 100%;
   background-color: #fff;
   display: flex;
-  justify-content: space-between
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(238,238,238,1);
+  margin-bottom: 14px;
+}
+.list3 {
+  border-bottom: none;
+  margin-bottom: 0;
 }
 .left,.right {
-    background-color: pink;
   height: 80px;
 }
 .left {
   width: 80px; 
+  background:rgba(248,248,248,1);  
 }
 .right {
-    width: 72%;
+  width: 76%;
+  padding: 10px;
+  background-color: #fff;
+}
+h3 {
+  font-size: 14px;
+  font-weight:bold;
+  color:rgba(45,71,106,1);
+}
+p {
+  margin-top: 10px;
+  font-size:12px;
+  color:rgba(45,71,106,0.8);
 }
 </style>