团队管理页面

src/views/components/c-button.vue

 <template>
   <button
-    class="py-2.5 bg-color-primary text-center text-white rounded-full"
+    class="py-2.5 text-center text-white w-full"
+    :class="getClass"
     @click="clickButton"
   >
     <slot>按钮</slot>
@@ -15,7 +16,23 @@ export default Vue.extend({
     // 'app-icon':()=>import('./components/common/Icon.vue'),
     // 'main-page': () => import('@/layout/main-page.vue')
   },
+  props: {
+    buttonBg: {
+      type: String,
+      default: 'bg-color-primary'
+    },
+    round: {
+      type: Boolean,
+      default: false
+    }
+  },
   name: 'CButton',
+  computed: {
+    getClass() {
+      const className = this.round ? 'rounded-full' : 'rounded'
+      return `${className} ${this.buttonBg}`
+    }
+  },
   methods: {
     clickButton() {
       this.$emit('click-button')

src/views/components/c-cell.vue

+<template>
+  <div
+    class="mb-px flex text-text-primary items-center justify-between bg-white px-4 py-3 rounded"
+    @click="clickItem"
+  > 
+    <div class="flex items-center justify-between flex-1 mr-1.5">
+      <div class="title">{{ title }}</div>
+      <div v-if="showContent" class="text-text-secondary">{{ content }}</div>
+    </div>
+    <app-icon
+      v-if="dot"
+      type="png"
+      :path="require('@/assets/icons/dot.png')"
+      class-name="h-5 w-1 ml-auto flex-shrink-0"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  components:{ 
+    'app-icon':()=>import('@/components/common/Icon.vue')
+    // 'main-page': () => import('@/layout/main-page.vue')
+  },
+  props: {
+    title: String,
+    dot: {
+      type: Boolean,
+      default: false
+    },
+    content: String
+  },
+  name: 'CCell',
+  computed: {
+    showContent() {
+      return this.content && this.content.replace(/(^\s*)|(\s*$)/g, '') !== ''
+    }
+  },
+  methods: {
+    clickItem() {
+      this.$emit('click-cell')
+    }
+  }
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/team-frame.vue

@@ -26,9 +26,9 @@
         </div>
         <!-- 底部操作 -->
         <div class="py-2 px-4 grid grid-cols-3 gap-2.5 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
-          <c-button @click-button="addMember">添加成员</c-button>
-          <c-button @click-button="addDepartment">添加部门</c-button>
-          <c-button @click-button="setDepartment">部门设置</c-button>
+          <c-button round @click-button="addMember">添加成员</c-button>
+          <c-button round @click-button="addDepartment">添加部门</c-button>
+          <c-button round @click-button="setDepartment">部门设置</c-button>
         </div>
       </div>
     </main-page>

src/views/team-management.vue

@@ -28,17 +28,21 @@
           </div>
         </div>
       </div>
-      <div
-        class="list flex text-text-primary items-center justify-between bg-white px-4 py-3"
-        @click="clickItem"
-      >
-        <div class="title">团队架构</div>
-        <app-icon
-          type="png"
-          :path="require('@/assets/icons/dot.png')"
-          class-name="h-5 w-1"
-        />
+      <c-cell dot title="团队架构" @click-cell="$router.push('/team-frame')" />
+      <c-cell dot title="添加成员" />
+      <c-cell dot title="添加部门" />
+      <div class="mt-4">
+        <c-cell dot title="团队管理权限" content="共3人" />
+        <c-cell dot title="转让负责人" />
+        <c-cell dot title="申请管理" />
       </div>
+      <c-button
+        round
+        buttonBg="bg-white"
+        class="text-text-primary mt-16"
+      >
+        解散团队
+      </c-button>
     </div>
   </main-page>
 </template>
@@ -49,15 +53,14 @@ import Vue from 'vue'
 export default Vue.extend({
   components:{ 
     'app-icon':()=>import('@/components/common/Icon.vue'),
-    'main-page': () => import('@/layout/main-page.vue')
+    'main-page': () => import('@/layout/main-page.vue'),
+    'c-cell': () => import('./components/c-cell.vue'),
+    'c-button': () => import('./components/c-button.vue')
   },
   name: 'TeamManagement',
   methods: {
     handleClickLeft() {
       console.log('click')
-    },
-    clickItem() {
-      this.$router.push('/team-frame')
     }
   }
 })