ls

src/router/okr.ts

@@ -5,10 +5,20 @@ import { RouteConfig } from 'vue-router'
  */
 
 export const okrRoutes: Array<RouteConfig> = [
-  // {
-  //   path: '/okr',
-  //   component: () => import('@/layout/home.vue'),
-  //   redirect: '/okr',
-  //   children: []
-  // }
+  {
+    path: '/okr',
+    component: () => import('@/layout/home.vue'),
+    redirect: '/okr',
+    children: [
+      {
+        path: 'key-result',
+        name: 'KeyResult',
+        component: () => import('@/views/okr/key-result.vue'),
+        meta: {
+          title: '客户数据收集'
+        }
+      },
+    ]
+  }
+  
 ]
\ No newline at end of file

src/views/okr/key-result.vue

+<template>
+  <!-- 选择地点 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >  
+    <app-icon
+      slot="right"
+      icon-name="dot-h"
+      class-name="w-5 h-3 flex items-center "
+      @click="isShow()"
+    />
+    <!-- 弹窗 -->
+    <van-action-sheet v-model="show" >
+      <div class="text-text-secondary px-6 ">
+        <div class="border-b py-3.5 ">分享到</div>
+        <div class="border-b py-3.5">拷贝任务</div>
+        <div class="border-b py-3.5">删除</div>
+        <div class=" py-3.5">归档</div>
+      </div>
+    </van-action-sheet>
+    <div class="pt-14 px-4 pb-16">
+      <!-- 头部栏 -->
+      <div class="flex justify-around ">
+        <div class="flex flex-col items-center border-r-2 w-1/3">
+          <div class="text-xs text-text-secondary mb-4">周期</div>
+          <div>{{month1}}月{{day1}}日</div>
+          <div>{{month2}}月{{day2}}日</div>
+        </div>
+        <div class="flex flex-col items-center border-r-2 w-1/3">
+          <div class="text-xs text-text-secondary mb-4">状态</div>
+          <div class="flex bg-green-50 rounded px-1 flex items-center my-2">
+            <van-icon name="success" color="#6EE7B7"/>
+            <div class="text-green-300"> 已完成</div>
+          </div>
+        </div>
+        <div class="flex flex-col items-center w-1/3">
+          <div class="text-xs text-text-secondary mb-1">执行人</div>
+          <img src="@/assets/icons/avator.png" alt="" class="w-9 h-9">
+          <div>张三</div>
+        </div>
+      </div>
+      <!-- 信息栏 -->
+      <div>
+        <group-cell class="mt-4" title="所属部门">
+          <c-cell title="所属" titleClass="text-sm text-text-secondary">
+            <div slot="right" class="pr-12 text-sm">增强公司内部管理制度</div>
+          </c-cell>
+          <c-cell title="加权百分比" titleClass="text-sm text-text-secondary" >
+            <input slot="right" 
+                    class="mr-12 text-sm border rounded py-1 w-14 text-center text-text-secondary" 
+                    placeholder="25%">
+          </c-cell>
+          <c-cell title="优先级" titleClass="text-sm text-text-secondary">
+            <div slot="right" class="mr-12 text-sm rounded-full px-3 py-1 border border-red-500 text-red-500">紧急</div>
+          </c-cell>
+          <c-cell title="参与人员" titleClass="text-sm text-text-secondary">
+            <div slot="right" class="flex items-center text-sm ">
+              <div class="pr-5">
+                （参与人员）6
+              </div>
+              <app-icon
+                icon-name="right-arrow"
+                class-name="w-2 h-4"
+              />
+            </div>
+          </c-cell>
+          <c-cell title="所有附件" titleClass="text-sm text-text-secondary">
+            <div slot="right" class="pr-7 text-sm">（附件数量）2</div>
+          </c-cell>
+          <c-cell label="描述">
+            <div slot="content" class="text-sm px-4 -mt-2">
+              负责人/执行人有权选择和更改所有内容的具体信息;参与人员仅可查看、
+              添加参与人员和上传附件;所有参与人将被动添加至上级O的参与人员中.....
+            </div>
+          </c-cell>
+        </group-cell>
+        <c-cell label="拓展属性" title="类型" titleClass="text-sm text-text-secondary" class="mt-4">
+            <div slot="right" class="text-sm text-text-secondary pr-6">
+             内部
+            </div>
+          </c-cell>
+      </div>
+      <!-- 底部栏 -->
+      <div class=" flex fixed bottom-0 left-0 w-full px-4  bg-white py-2 rounded">
+         <div class="rounded-full bg-common-bg w-1/2 py-2 px-4 text-xs ">
+          <input type="text" class="bg-common-bg"  placeholder="添加评论">
+         </div>
+         <div class="flex mx-4 space-x-4 items-center">
+          <van-icon :name=" love ?  'like' : 'like-o' "  :color="lovecolor" size="20" class="flex" @click="isLove()">
+            <p class="text-xs text-black">{{like}}</p>
+          </van-icon>
+          <van-icon name="chat-o" size="20" class="flex">
+            <p class="text-xs">{{comment}}</p>
+          </van-icon>
+          <van-icon name="underway-o" size="20" class="flex">
+            <p class="text-xs">10</p>
+          </van-icon>
+         </div>
+         
+      </div>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { ActionSheet } from 'vant';
+import { Icon } from 'vant';
+
+Vue.use(Icon);
+Vue.use(ActionSheet);
+export default Vue.extend({
+  name: "KeyResult",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'c-cell': () => import('@/components/common/c-cell.vue'),
+    'group-cell': () => import('@/components/common/group-cell.vue')
+  },
+  created() {
+    // console.log(Mock, 'mock')
+  },
+  data() {
+   return {
+     show:false,
+     month1:'04',
+     month2:'04',
+     day1:'14',
+     day2:'30',
+     love:false,
+     lovecolor:'',
+     like:30,
+     comment:12
+    }
+  },
+  computed: {
+    
+  },
+  methods:{
+    isShow(){
+      this.show=!this.show
+    },
+    isLove(){
+      this.love=!this.love
+      if(this.love===true){
+        this.lovecolor="#ee0a24"
+        this.like++
+      }else{
+        this.lovecolor=""
+        this.like--
+      }
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/views/schedule/select-locale.vue

@@ -8,8 +8,8 @@
   <div class="pt-14 h-80 bg-gray-200 "></div>
   <div class="px-4 pb-28">
      <!-- 选择地址 -->
-     <div class="-mt-8 text-sm text-text-secondary">
-        <c-cell placeholder="请输入地点名称" label="地点名称" v-model="radio" type="input" classInput="text-left">
+     <div class="-mt-8 text-sm text-text-secondary  rounded">
+        <c-cell placeholder="请输入地点名称" label="地点名称" v-model="radio" type="input" classInput="text-left" >
           <app-icon
             slot="right"
             icon-name="search-blue"
@@ -23,7 +23,7 @@
          <van-radio-group v-model="radio">
           <div v-for="(place,index) in places" :key="index" class="flex rounded" @click="clickC(index)">
             <van-radio :name="place" icon-size="16px" icon="radio" class="bg-white pl-4 pr-1 w-full" >
-              <div class="border-b py-3 w-screen text-text-secondary">{{place}}</div>
+              <div class="border-b py-3 w-screen text-text-secondary" :class="classborder(index)">{{place}}</div>
               <app-icon
                 v-if="checked === index+''"
                 slot="icon"
@@ -57,7 +57,7 @@ import { RadioGroup, Radio } from 'vant';
 Vue.use(Radio);
 Vue.use(RadioGroup);
 export default Vue.extend({
-  name: "",
+  name: "SelectLocale",
   components: {
     'main-page': () => import('@/layout/main-page.vue'),
     'app-icon': () => import('@/components/common/Icon.vue'),
@@ -66,7 +66,6 @@ export default Vue.extend({
   },
   created() {
     // console.log(Mock, 'mock')
-    
   },
   data() {
     return {
@@ -74,7 +73,6 @@ export default Vue.extend({
       place:'',
       places:['第一会议室','峨眉会议室','南京分公司'],
       checked: '',
-      isshow:false
     }
   },
   computed: {
@@ -84,6 +82,11 @@ export default Vue.extend({
     clickC(index: number){
       this.checked=index + ''
     },
+    classborder(index:number){
+      if(index===this.places.length-1){
+        return 'border-none'
+      }
+    }
   }
 })
 </script>