首页因社区讯息需动态菜单样式待定,其他样式完成

src/assets/css/index.less

@@ -36,7 +36,10 @@ body #app {
   color: #fff;
 }
 .gray{
-  color: #999999;
+  color: #999999 !important;
+}
+.orange{
+  color: #f98f1a;
 }
 .flex{
   display: flex;
@@ -175,6 +178,9 @@ body #app {
 .font-size14{
   font-size: 13px;
 }
+.font-size18{
+  font-size: 18px;
+}
 .font-bold{
   font-weight: bold;
 }

src/views/home/index.less

@@ -49,9 +49,16 @@
     }
 }
 .activity_content{
+    padding-bottom: 15px;
+    box-sizing: border-box;
     width: 100%;
+    border-bottom: 1px solid #EAEAEA;
+    margin-top: 14px;
     .img{
         width: 231px;
         height: 33px;
     }
+    &:last-child{
+        border-bottom: none;
+    }
 }

src/views/home/index.vue

@@ -55,21 +55,38 @@
                     <span>更多</span>
                 </div>
                 <div class="activity_content flex" v-for="(item,index) in activityList">
-                    <img :src="item.imgSrc" alt="" class="mr10">
-                    <div class="flex flex-y flex-1">
-                        <div class="title van-ellipsis">{{item.title}}</div>
-                        <div class="address gray font-size14 van-ellipsis">地点：{{item.address}}</div>
+                    <img :src="item.imgSrc" alt="" class="mr10" style="width: 75px;height: 95px;">
+                    <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
+                        <div class="van-ellipsis">{{item.title}}</div>
+                        <div class="address font-size14 van-ellipsis gray">地点：{{item.address}}</div>
                         <div class="time gray font-size14">时间：{{item.date}}</div>
                         <div class="flex flex-end">
                             <div>
-                                <span>报名人数：</span> <span>{{item.resiNum}}</span><span>/{{item.total}}人</span>
+                                <span>报名人数：</span> <span class="font-size18 orange">{{item.resiNum}}</span>/<span class="font-size14">{{item.total}}人</span>
                             </div>
-                            <van-button type="info" round >报名</van-button>
+                            <van-button type="info"size="small" round >报名</van-button>
                         </div>
                     </div>
                 </div>
             </div>
-            
+            <div class="card m-top10">
+                <div class="title">
+                    <span>居民议事</span>
+                    <span>更多</span>
+                </div>
+                <div class="activity_content flex" v-for="(item,index) in eventList">
+                    <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
+                      <span class="van-multi-ellipsis--l2">
+                        {{item.title}}  
+                      </span> 
+                      <div class="flex flex-end flex-center gray m-top10 font-size13">
+                        <div class="flex flex-center"><img src="@/assets/images/icons/resi.png" class="img_16 m-right7" alt=""><span>参与 {{item.total}}</span></div>
+                        <div class="flex flex-center"><img src="@/assets/images/icons/support.png" alt="" class="img_16 m-right7"><span>支持 {{item.support}}</span></div>
+                        <div class="flex flex-center"><img src="@/assets/images/icons/oppose.png" alt="" class="img_16 m-right7"><span>反对 {{item.oppose}}</span></div>
+                      </div> 
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -109,21 +126,35 @@ export default {
             ],
             activityList:[
                 {
-                    title:'社区活动测试测试测试时杀死还是',
-                    address:'上海市普陀区金沙江路 1518 弄',
+                    title:'社区活动测试测试测试时杀死还是上海市普陀区金沙江路',
+                    address:'上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路',
                     date:'2021-09-22',
                     imgSrc:require('@/assets/images/zhishu1.png'),
                     resiNum:10,
                     total:50
                 },
                 {
-                    title:'社区活动测试测试测试时杀死还是',
-                    address:'上海市普陀区金沙江路 1518 弄',
+                    title:'社区活动测试测试测试时杀死还是上海市普陀区金沙江路',
+                    address:'上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路',
                     date:'2021-09-22',
                     imgSrc:require('@/assets/images/zhishu1.png'),
                     resiNum:10,
                     total:50
                 }
+            ],
+            eventList:[
+                {
+                    total:100,
+                    support:50,
+                    title:'社区活动测试测试测试时杀死社区活动测试测试测试时杀死还是上海市普陀区金沙江路还是上海市普陀区金沙江路',
+                    oppose:10
+                },
+                {
+                    total:100,
+                    support:50,
+                    title:'社区活动测试测试测试时杀死社区活动测试测试测试时杀死还是上海市普陀区金沙江路还是上海市普陀区金沙江路',
+                    oppose:10
+                }
             ]
         };
     },