Merge remote-tracking branch 'origin/zxj_dev'

babel.config.js

@@ -6,7 +6,7 @@ module.exports = {
     ['import', {
       libraryName: 'vant',
       libraryDirectory: 'es',
-      style: true
+      style: true,
     }, 'vant'],
     ['import', {
       libraryName: 'ant-design-vue',

src/components/Team/c-input.vue

+<template>
+    <div class="wrapper bg-white rounded-md px-4">
+        <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-text-primary placeholder-mygray border-0 w-full" v-model="text" type="text" :placeholder="hint">
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+
+export default Vue.extend({
+  name: 'team-create',
+  props:{
+      hint:{
+          type:String,
+          default:''
+      },
+  },
+  data(){
+      return{
+          text:'',
+      }
+  },
+  methods:{
+  },
+  computed:{
+      getSize():number{
+          return this.text.length
+      },   
+  },
+  watch:{
+      text():void{
+          let size:number = Number(this.$slots.limit![0].text)
+          if(this.getSize >= size){
+            this.text = this.text.substring(0,size)          
+          }    
+      }
+  }
+});
+</script>
+
+<style lang="less">
+</style>

src/components/Team/teambtn.vue

+<template>
+  <div class="teambtn">
+     <button class=" w-full bg-myblue rounded-3xl text-center h-10 text-white block "
+             @click="handleClick">
+       {{title}}
+       </button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+
+export default Vue.extend({
+  name:'teambtn',
+  props:{
+    title:{
+      type:String,
+      default:'确定'
+    }
+  },
+  methods:{
+    handleClick(){
+      console.log('被点击了');
+      
+    }
+  }
+});
+</script>
+
+<style lang="less">
+</style>

src/router/index.ts

@@ -50,6 +50,22 @@ const routes: Array<RouteConfig> = [
     name: 'TeamMember',
     component: () => import('@/views/member-info.vue')
   },
+  {
+    path: '/team-create',
+    name: 'TeamCreate',
+    component: () => import('@/views/team-create.vue'),
+    meta:{
+      title:'创建团队'
+    }
+  },
+  {
+    path: '/team-QRcode',
+    name: 'TeamQRcode',
+    component: () => import('@/views/team-QRcode.vue'),
+    meta:{
+      title:'团队二维码'
+  }
+}
 ]
 
 const router = new VueRouter({

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 pt-14">
+        <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

@@ -26,10 +26,34 @@ module.exports = {
         13: '3.125rem',
         50: '12.5rem',
         82: '20.375rem',
+        
+        113.5:'28.375rem',
+        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'
       },
       zIndex: {
         '-1': '-1'
-      }
+      },
+      // 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: {
       sm: '640px',
@@ -106,7 +130,11 @@ module.exports = {
     backdropOpacity: (theme) => theme('opacity'),
     backdropSaturate: (theme) => theme('saturate'),
     backdropSepia: (theme) => theme('sepia'),
-    backgroundColor: (theme) => theme('colors'),
+    backgroundColor: theme => ({
+      ...theme('colors'),
+      'mygray': '#F6F7F8',
+      'myblue': '#32B2F7'
+     }),
     backgroundImage: {
       none: 'none',
       'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
@@ -162,6 +190,7 @@ module.exports = {
     borderColor: (theme) => ({
       ...theme('colors'),
       DEFAULT: theme('colors.gray.200', 'currentColor'),
+      'line':'#E6EAEE',
     }),
     borderOpacity: (theme) => theme('opacity'),
     borderRadius: {
@@ -624,7 +653,10 @@ module.exports = {
       black: ['2px dotted black', '2px'],
     },
     padding: (theme) => theme('spacing'),
-    placeholderColor: (theme) => theme('colors'),
+    placeholderColor: theme => theme('colors'),
+     placeholderColor: {
+       'mygray': '#8A97A5',
+     },
     placeholderOpacity: (theme) => theme('opacity'),
     ringColor: (theme) => ({
       DEFAULT: theme('colors.blue.500', '#3b82f6'),