诉求接办样式

src/assets/css/common.less

@@ -27,7 +27,7 @@
   border-radius: 2px;
   box-shadow: 0 1px 3px rgba(0,0,0,.3);
   box-sizing: border-box;
-  width: 100%;
+  width: auto;
 }
 .flex{
   display: flex;
@@ -43,21 +43,55 @@
   &-center2{
     align-items: center;
   }
+  &-center3{
+    align-items: flex-start;
+  }
+  
   &-mean{
     justify-content: space-around;
   }
   &-end{
     justify-content: space-between;
   }
+  &-fend{
+    justify-content: flex-end;
+  }
 }
 .m-top12{
   margin-top: 12px;
+  &-left{
+    margin-left: 12px;
+  }
+  &-right{
+    margin-right: 12px;
+  }
+}
+.m-top5{
+  margin-top: 5px;
+  &-bottom{
+    margin-bottom: 5px;
+  }
 }
 
+
 .font-size13{
   font-size: 13px;
 }
 .text-blue{
   color:#3e92ff;
 }
+.pages {
+  width: 100%;
+  height: 100vh;
+  background-color: #f7f7f7;
+}
+.rounded-corner {
+  border-radius: 20px;
+}
+.opacity5 {
+  opacity: 0.5;
+}
+.small_img{
+  width: 18px;
   
+}

src/router/router.config.js

@@ -12,5 +12,10 @@ export const constantRouterMap = [
     path: '/mine',
     component: () => import('@/views/mine'),
     meta: { title: '我的', keepAlive: false }
+  },
+  {
+    path: '/assistance',
+    component: () => import('@/views/assistance'),
+    meta: { title: '诉求代办', keepAlive: false }
   }
 ]

src/views/assistance/index.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class='pages'>
+        <div>
+            <van-tabs :active="active" bind:change="onChange">
+                <van-tab title="待接单">内容 1</van-tab>
+                <van-tab title="待处理">内容 2</van-tab>
+                <van-tab title="已完成">内容 3</van-tab>
+            </van-tabs>
+        </div>
+        <div class="card rounded-corner">
+            <div class="m-top12 flex">
+                <van-tag type="primary" class="m-top12 m-top12-left">个性服务</van-tag>
+                <van-tag type="warning"  class="m-top12 m-top12-left">共性需求</van-tag>
+                <div class="m-top12 m-top12-left opacity5 font-size13">
+                    公益事业类-社区困难群体生活帮扶
+                </div>
+            </div>
+            <div class="m-top5 m-top12-left">
+                <img src="@/assets/images/icon/address.png" class="small_img">
+                张玉宝 13636520003<br>
+                <div style="margin-left: 21px;" class="opacity5 font-size13 m-top5">重庆南路15号1号楼1单元101</div>
+            </div>
+            <div class="m-top5 m-top12-left">
+                <img src="@/assets/images/icon/time.png" class="small_img">
+                2024-05-0215:00
+            </div>
+            <div class="m-top5 m-top12-left">
+                <div class="flex flex-center3">
+                    <img src="@/assets/images/icon/content.png" style="vertical-align: top;" class="small_img">
+                    <div>社区86岁独居老人，上下楼不方便，需要上门进行送餐服务。</div>
+                </div>
+            </div>
+
+            <hr class="m-top12-left  m-top12-right opacity5">
+            <div class="flex flex-fend m-top12-right">
+                <van-button size="small" type="info" class="rounded-corner m-top5-bottom"
+                    style="width: 60px;">接单</van-button>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    data() {
+        return {
+            active: 1,
+        };
+    },
+    created() {
+    },
+    methods: {
+        onChange(event) {
+            wx.showToast({
+                title: `切换到标签 ${event.detail.name}`,
+                icon: 'none',
+            });
+        },
+    },
+    components: {},
+    computed: {},
+    watch: {}
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/views/mine/index.vue

@@ -45,11 +45,7 @@ export default {
 </script>
 
 <style lang='less'>
-.pages {
+.heard {
-    width: 100%;
-    height: 100vh;
-    background-color: #f7f7f7;
-}.heard {
     width: 100%;
     height: 35vh;
     background: linear-gradient(to bottom,