添加手机端

jero-web/src/components/tools/UserMenu.vue

@@ -32,7 +32,7 @@
     <!--      </a>-->
     <!--    </span>-->
     <div class="action" @click="Jumpflybook">
-      <span  class="header-notice">
+      <span class="header-notice">
          <a-tooltip placement="bottomRight" :title="$t('userManual')" overlayClassName="tooltipColor">
           <a-icon style="font-size: 16px; padding: 4px; color: #000000A6" type="question-circle"/>
            </a-tooltip>
@@ -214,8 +214,8 @@
       hiddenClick() {
         this.shows = false
       },
-      Jumpflybook(){
-        window.open('https://eicgyqr5mc.feishu.cn/docx/doxcnY2GbQfMSMqLP0eIFzFlEcd', '_blank');
+      Jumpflybook() {
+        window.open('https://eicgyqr5mc.feishu.cn/docx/doxcnY2GbQfMSMqLP0eIFzFlEcd', '_blank')
       },
       /* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
       ...mapActions(['Logout']),
@@ -381,6 +381,7 @@
 
   .action {
     color: rgba(0, 0, 0, 0.65) !important;
+    font-size: 14px;
   }
 
   .action .avatar {

jero-web/src/config/router.config.js

@@ -477,6 +477,34 @@ export const constantRouterMap = [
     name: 'TaskPlanList',
     component: () => import(/* webpackChunkName: "user" */ '@/views/projectManagement/projectStatusBoard/components/TaskPlanList')
   },
+
+
+  /*  手机端开始  */
+   //搜索
+  {
+    path: '/phoneSearch',
+    name: 'phoneSearch',
+    component: () => import('@/views/phoneView/search')
+  },
+  //待办中心
+  {
+    path: '/phoneToDoCenter',
+    name: 'phoneToDoCenter',
+    component: () => import('@/views/phoneView/toDoCenter')
+  },
+  //任务数据
+  {
+    path: '/phoneTaskData',
+    name: 'phoneTaskData',
+    component: () => import('@/views/phoneView/taskData')
+  },
+  //我的
+  {
+    path: '/phoneHome',
+    name: 'phoneHome',
+    component: () => import('@/views/phoneView/home')
+  },
+  /*  手机端结束  */
   // {
   //   path:'/vehicleinformation',
   //   name: 'vehicleinformation',

jero-web/src/main.js

@@ -65,12 +65,16 @@ import '@/components/JVxeCells/install'
 // 挂载全局使用的方法
 import VueDraggableResizable from 'vue-draggable-resizable'
 
+import Vant from 'vant';
+import 'vant/lib/index.css';
+import 'amfe-flexible/index.js'
 Vue.component('vue-draggable-resizable', VueDraggableResizable)
 Vue.config.productionTip = false
 Vue.use(Storage, config.storageOptions)
 Vue.use(Antd)
 Vue.use(VueAxios, router)
 Vue.use(Viser)
+Vue.use(Vant);
 Vue.use(hasPermission)
 Vue.use(JDictSelectTag)
 Vue.use(Print)

jero-web/src/views/phoneView/components/header.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="header">
+      <van-nav-bar
+        title="标题"
+        left-text="返回"
+        right-text="按钮"
+        left-arrow
+        @click-left="onClickLeft"
+        @click-right="onClickRight"
+      />
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'header',
+    methods:{
+      onClickLeft(){
+
+      },
+      onClickRight(){
+
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

jero-web/src/views/phoneView/home.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+  export default {
+    name: 'phoneHome'
+  }
+</script>
+
+<style scoped>
+
+</style>

jero-web/src/views/phoneView/search.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="box">
+    <div class="header-box">
+      <img src="~@/assets/logoOne.png" alt="">
+      <span class="logoTitle">NIO GRP</span>
+    </div>
+    <div class="content-box">
+      <van-search v-model="value" left-icon="none" right-icon="search" placeholder="搜索"/>
+    </div>
+    <div class="content-box-value">
+      <div class="left-img">
+        <img src="~@/assets/wendang.png" alt="">
+      </div>
+      <div class="text-left">
+        <div class="text-left-top">文档库</div>
+        <div class="text-left-button">已存储 3074 个文档</div>
+      </div>
+      <div class="text-right">
+        去查看
+      </div>
+    </div>
+    <div class="content-box-value">
+      <div class="left-img">
+        <img src="~@/assets/wendang.png" alt="">
+      </div>
+      <div class="text-left">
+        <div class="text-left-top">知识分享</div>
+        <div class="text-left-button">已存储 568 个知识分享</div>
+      </div>
+      <div class="text-right">
+        去查看
+      </div>
+    </div>
+    <div class="content-box-value">
+      <div class="left-img">
+        <img src="~@/assets/yuebao.png" alt="">
+      </div>
+      <div class="text-left">
+        <div class="text-left-top">法规月报</div>
+        <div class="text-left-button">已存储 2314 个法规月报</div>
+      </div>
+      <div class="text-right">
+        去查看
+      </div>
+    </div>
+    <van-tabbar v-model="active" @change="onChange">
+      <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
+      <van-tabbar-item name="toDoCenter" icon="bell">待办中心</van-tabbar-item>
+      <van-tabbar-item name="taskData" icon="underway">任务统计</van-tabbar-item>
+      <van-tabbar-item name="home" icon="manager">我的</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'phoneSearch',
+    data() {
+      return {
+        active: 'search',
+        value: ''
+      }
+    },
+    methods: {
+      onChange(value) {
+        console.log(value)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  ::v-deep .van-tabbar-item--active {
+    color: #00B3BE;
+  }
+
+  .box {
+    padding: 0.4rem;
+  }
+
+  .header-box {
+    width: 100%;
+    text-align: center;
+    padding-top: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logoTitle {
+    font-size: 0.64rem;
+    margin-left: 0.24rem;
+    font-family: PingFang SC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #040B29;
+  }
+
+  ::v-deep .van-search {
+    padding: 0;
+  }
+
+  .content-box {
+    margin-top: 1.2rem;
+  }
+
+  .content-box .van-search {
+    width: 100%;
+    height: 1.3rem;
+  }
+
+  ::v-deep .content-box .van-search .van-search__content {
+    height: 1.3rem;
+    background: #FFFFFF;
+    border-radius: 0.24rem 0.24rem 0.24rem 0.24rem;
+    opacity: 1;
+    border: 0.06rem solid #040B29;
+  }
+
+  ::v-deep .van-search__content .van-cell {
+    line-height: 0.96rem;
+  }
+
+  ::v-deep .van-field__body {
+    font-size: 0.4rem;
+  }
+
+  ::v-deep .van-field__body .van-field__right-icon .van-icon {
+    font-size: 0.52rem !important;
+    font-weight: 600 !important;
+  }
+
+  .content-box-value {
+    margin-top: 0.4rem;
+    background: #FFFFFF;
+    border-radius: 0.24rem 0.24rem 0.24rem 0.24rem;
+    opacity: 1;
+    border: 0.05rem solid #E6E7EC;
+    padding: 0.4rem;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .left-img {
+    width: 1.1rem;
+    height: 1.1rem;
+    background: #F6F7F8;
+    border-radius: 0.12rem;
+    text-align: center;
+    line-height: 1.1rem;
+    float: left;
+  }
+
+  .left-img img {
+    width: 0.58rem;
+    height: 0.58rem;
+  }
+
+  .text-left {
+    float: left;
+    margin-left: 0.3rem;
+    width: calc(100% - 3.4rem);
+  }
+
+  .text-left-top {
+    font-size: 0.38rem;
+    font-family: Blue Sky Noto-Bold, Blue Sky Noto;
+    font-weight: bold;
+    color: #41475E;
+  }
+
+  .text-left-button {
+    font-size: 0.26rem;
+    font-family: Blue Sky Noto-Light, Blue Sky Noto;
+    font-weight: 300;
+    color: #595E72;
+  }
+
+  .text-right {
+    width: 1.8rem;
+    height: 0.74rem;
+    background: rgba(0, 179, 190, 0.12);
+    border-radius: 99px 99px 99px 99px;
+    opacity: 1;
+    border: 1px solid rgba(0, 179, 190, 0.12);
+    float: right;
+    font-size: 0.3rem;
+    text-align: center;
+    line-height: 0.74rem;
+    font-weight: 500;
+    color: #00B3BE;
+    margin-top: 0.22rem;
+  }
+</style>

jero-web/src/views/phoneView/taskData.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+  export default {
+    name: 'phoneTaskData'
+  }
+</script>
+
+<style scoped>
+
+</style>

jero-web/src/views/phoneView/toDoCenter.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+  export default {
+    name: 'phoneToDoCenter'
+  }
+</script>
+
+<style scoped>
+
+</style>