团队二维码UI界面完成

src/components/Team/team-create.vue → src/components/Team/c-input.vue

 <template>
     <div class="wrapper bg-white rounded-md px-4">
-        <div class="title text-mygray h-7 border-b border-line text-sm relative p-0">
-            <span class="leading-7">{{title}}</span>
-            <span class=" absolute right-0 leading-7">{{getSize}}/{{limitation}}</span>
+        <div class="title text-text-secondary h-7 border-b border-line text-sm relative p-0">
+            <span class="leading-7">
+                <slot name="title">title</slot>
+            </span>
+            <span class=" absolute right-0 leading-7">{{getSize}}/<slot name="limit"></slot></span>
         </div>
         <div class="content h-12 text-base flex content-center">
-            <input class="text-darkgray placeholder-mygray border-0" v-model="text" type="text" :placeholder="hint">
+            <input class=" text-text-primary placeholder-mygray border-0 w-full" v-model="text" type="text" :placeholder="hint">
         </div>
     </div>
 </template>
@@ -17,18 +19,10 @@ import Vue from 'vue';
 export default Vue.extend({
   name: 'team-create',
   props:{
-      title:{
-          type:String,
-          default:'导航'
-      },
       hint:{
           type:String,
           default:''
       },
-      limitation:{
-          type:Number,
-          default:5
-      },
   },
   data(){
       return{
@@ -44,9 +38,10 @@ export default Vue.extend({
   },
   watch:{
       text():void{
-          if(this.getSize >= this.limitation){
-            this.text = this.text.substring(0,this.limitation)          
-          }         
+          let size:number = Number(this.$slots.limit![0].text)
+          if(this.getSize >= size){
+            this.text = this.text.substring(0,size)          
+          }    
       }
   }
 });

src/views/team-QRcode.vue

+<template>
+  <div class="createteam">
+    <main-page
+      left-arrow
+      @click-left="handleClickLeft"
+    >
+    <!-- 二维码部分 -->
+
+      <div class="qrcode mt-2 mb-9 relative w-75 h-113.5 mx-auto">
+        <p class=" text-white absolute top-26.375 left-22.375 text-base">这里是团队名称</p>
+        <p class=" text-white absolute top-33.625 left-20.25 text-sm">团队号：ABCDE1234</p>
+        <img src="../assets/qrbackground.png" alt="" class="">
+        <img src="../assets/qrcode.png" alt="" srcset="" class=" absolute w-32 left-21.25 top-44 ">
+        <p class=" text-white absolute top-83.5 left-10.125 text-sm"> 扫描二维码加入我们Chat33的团队</p>
+      </div>
+      <div class="mx-4">
+        <c-button round buttonBg="bg-color-primary" class="">点击生成图片去分享</c-button>
+        <c-button round buttonBg="bg-white" class=" text-text-primary">进入团队工作台</c-button>  
+      </div>   
+    </main-page>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import CButton from './components/c-button.vue';
+
+export default Vue.extend({
+  name:'teamQRcode',
+  components:{
+    'main-page': () => import('@/layout/main-page.vue'), 
+    'c-button': () => import('./components/c-button.vue')
+  },
+  methods: {
+  handleClickLeft() {
+    console.log('click left')
+  }
+}
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/team-create.vue

+<template>
+  <div class="createteam">
+    <main-page
+      left-arrow
+      @click-left="handleClickLeft"
+    >
+      <div class="mx-4">
+        <teamcreate class=" mb-4 mt-2.5" >
+          <template v-slot:title>企业/组织/团队名称</template>
+          <template v-slot:limit>20</template>
+        </teamcreate>
+        <teamcreate class="" hint="请填写真实姓名">
+          <template v-slot:title>负责人真实姓名</template>
+          <template v-slot:limit>20</template>
+        </teamcreate>
+
+        <p class="note text-text-primary text-base mt-36 ml-3">
+        默认创建团队的人为团队负责人
+        </p>
+        <c-button round buttonBg="bg-color-primary" class="text-white mt-16">确定</c-button>
+
+      </div>     
+    </main-page>
+     
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name:'createteam',
+  components:{
+    'main-page': () => import('@/layout/main-page.vue'), 
+    'teamcreate': () => import('@/components/Team/c-input.vue'), 
+    'c-button': () => import('./components/c-button.vue')
+  },
+  methods: {
+  handleClickLeft() {
+    console.log('click left')
+  }
+}
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

tailwind.config.js

@@ -17,6 +17,21 @@ module.exports = {
       spacing: {
         6.5: '1.625rem',
         13: '3.125rem',
+      },
+      height:{
+        113.5:'28.375rem',
+      },
+      width:{
+        75:'18.75rem'
+      },
+      inset:{
+        21.25:'5.3125rem',
+        26.375:'6.59375rem',
+        22.375:'5.59375rem',
+        33.625:'8.40625rem',
+        20.25:'5.0625rem',
+        83.5:'20.875rem',
+        10.125:'2.53125rem'
       }
     },
     screens: {
@@ -714,11 +729,6 @@ module.exports = {
       2: '2',
     },
     textColor: (theme) => theme('colors'),
-    textColor:{
-      'mygray':'#8A97A5',
-      'darkgray':'#24374E',
-      'white':'#FFFFFF',
-    },
     textOpacity: (theme) => theme('opacity'),
     transformOrigin: {
       center: 'center',