申请管理界面设计

src/router/index.ts

@@ -59,13 +59,21 @@ const routes: Array<RouteConfig> = [
     component: () => import('@/views/team-QRcode.vue'),
     meta:{
       title:'团队二维码'
-  }
-},
-{
+    }
+  },
+  {
     path: '/team-member/:id',
     name: 'TeamMember',
     component: () => import('@/views/member-info.vue')
   },
+  {
+    path: '/request-management',
+    name: 'requestManagement',
+    component: () => import('@/views/request-managemant.vue'),
+    meta:{
+      title:'申请管理'
+    }
+  },
 ]
 
 const router = new VueRouter({

src/views/components/request.vue

+<template>
+  <div class="flex">
+    <!-- 头像 -->
+    <div class=" mr-1 mt-5">
+      <img src="../../assets/icons/avator.png" alt="" srcset="" class="w-9">
+    </div>
+    <!-- 申请详情 -->
+    <div class=" bg-white rounded-xl w-full">
+      <div class=" relative pt-3 px-3 pb-3">
+        <span class=" text-base text-text-primary">真实姓名</span>
+        <br>
+        <span class=" text-sm text-text-secondary">通过扫一扫申请</span>
+        <img src="../../assets/icons/confirm.png" alt="" srcset="" class=" w-9 inline-block absolute top-4 right-3">
+        <img src="../../assets/icons/deny.png" alt="" srcset="" class="w-9 inline-block absolute top-4 right-16">
+      </div>
+      <!-- 申请理由 -->
+      <div class=" py-3 px-3 text-text-secondary text-sm">
+        这里是申请理由，有几行就显示几行，最多是五十字，差不多最多显示三行
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name:'request',
+  components:{
+    
+  },
+  methods: {
+
+}
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/request-managemant.vue

+<template>
+  <div class=" relative">
+    <main-page left-arrow @click-left="$router.go(-1)">
+      <template slot="right">
+        <app-icon
+          type="png"
+          class-name="w-6.5 h-6.5"
+          :path="require('@/assets/icons/add-friend-group.png')"
+        />
+      </template>
+      <div class="left-border w-0.5 bg-border-lighter h-screen left-8 absolute"/>
+      <div class="px-4 pt-14">
+          <request/>
+      </div>
+    </main-page>
+  </div>
+</template>
+
+<script lang="ts">
+import Request from '@/views/components/request.vue';
+import Vue from 'vue';
+
+export default Vue.extend({
+  name:'requestmanagement',
+  components:{
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon':()=>import('@/components/common/Icon.vue'),
+    'request':()=>import('@/views/components/request.vue')
+  },
+  methods: {
+  handleClickLeft() {
+    console.log('click left')
+  }
+}
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file