修改topbar样式

src/components/TopBar.vue

@@ -8,10 +8,16 @@
       <div class="bottom-box">
         <div>
           <p class="user-name">{{ userName }}</p>
-
-          <p class="introduce-info" v-for="item in rolesList" :key="item.roleId">{{ orgName }} · {{ item.roleName }}</p>
+          <p class="org-info">
+            <span>{{ orgName }}</span>
+            <van-icon name="arrow" size="20" />
+          </p>
+          <p class="van-multi-ellipsis--l2 introduce-info ">
+            <span v-for="item in rolesList" :key="item.roleId">{{ item.roleName }}</span>
+            <span v-for="(v,i) in rolesList" :key="i">{{ v.roleName }}</span>
+            <span v-for="(t,k) in rolesList" :key="k+1">{{ t.roleName }}</span>
+          </p>
         </div>
-        <van-icon name="arrow" size="20" />
       </div>
     </div>
     <div v-if="showNotice" class="notice-box">
@@ -124,17 +130,17 @@ export default {
     getTheWeather() {
       getTheAreaWeather(this.orgId).then(res => {
         this.list = res.data || []
-        this.list.forEach(item => {
-          if (item.alarmLevel == '橙色') {
-            item.bgc = '#fa8e00'
-          } else if (item.alarmLevel == '红色') {
-            item.bgc = '#fa0008'
-          } else if (item.alarmLevel == '蓝色') {
-            item.bgc = '#3788fa'
-          } else if (item.alarmLevel == '黄色') {
-            item.bgc = '#e9fa00'
-          }
-        })
+        // this.list.forEach(item => {
+        //   if (item.alarmLevel == '橙色') {
+        //     item.bgc = '#fa8e00'
+        //   } else if (item.alarmLevel == '红色') {
+        //     item.bgc = '#fa0008'
+        //   } else if (item.alarmLevel == '蓝色') {
+        //     item.bgc = '#3788fa'
+        //   } else if (item.alarmLevel == '黄色') {
+        //     item.bgc = '#e9fa00'
+        //   }
+        // })
         setTimeout(() => {
           this.rolesList = JSON.parse(window.sessionStorage.getItem('SET_USER_ROLELIST')) || []
         }, 100)
@@ -153,6 +159,9 @@ export default {
   height: 30px;
   line-height: 30px;
 }
+.van-swipe-item{
+  text-shadow: 0 0 3px #888;
+}
 </style>
 <style scoped lang="scss">
 .top-bar-box{
@@ -163,17 +172,18 @@ export default {
   width: 100%;
   background: url('../assets/img/banner.png') no-repeat center;
   background-size: 100% 100%;
-  padding: 40px;
+  padding: 40px 40px 20px 40px;
+  text-shadow: 0 1px 3px #666;
   box-shadow: 0 1px 8px #ccc;
+  color: #fff;
   > div {
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #fff;
   }
 }
 .top-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   > span {
     font-size: 40px;
   }
@@ -185,14 +195,24 @@ export default {
   z-index: 1000;
 }
 .bottom-box {
-  padding-top: 50px;
+  padding-top: 30px;
   > div {
     .user-name {
       font-size: 30px;
-      margin-bottom: 20px;
+      margin-bottom: 10px;
+    }
+    .org-info{
+      font-size: 28px;
+      display: flex;
+      justify-content: space-between;
     }
     .introduce-info {
-      font-size: 20px;
+      font-size: 24px;
+      line-height: 34px;
+      >span{
+        display: inline-block;
+        margin-right: 20px;
+      }
     }
   }
 }

src/router/router.config.js

@@ -256,6 +256,13 @@ export let routers = [
         component: () => import('@/views/menu/safetyBook/index.vue'),
         meta: { title: '安全责任书', keepAlive: false ,hideTabBar:false}
       },
+      {
+        path: '/safetyBookDetail',
+        name: 'safetyBookDetail',
+        component: () => import('@/views/menu/safetyBook/detail.vue'),
+        meta: { title: '责任书详情', keepAlive: false ,hideTabBar:true}
+      },
+
     ],
   },
 ]

src/views/home/menu.vue

@@ -5,18 +5,20 @@
     <div class="menu-list">
       <Scroll ref="Scroll" :pullupDown="false" :pullup="false">
         <van-empty v-if="!menuList.length" description="暂无数据" />
-        <div v-else class="menu-list-item" v-for="(v, i) in menuList" :key="i">
+        <card v-else class="menu-list-item" v-for="(v, i) in menuList" :key="i">
           <p @click="onclick">{{ v.meta.title }}</p>
-          <van-grid border :column-num="3">
-            <van-grid-item
-              v-for="(item, index) in v.children"
-              :key="index"
-              :icon="item.meta.icon"
-              :text="item.meta.title"
-              :to="item.path"
-            />
-          </van-grid>
-        </div>
+          <div style="border-left: 1px solid #f4f4f4;">
+            <van-grid border :column-num="3">
+              <van-grid-item
+                v-for="(item, index) in v.children"
+                :key="index"
+                :icon="item.meta.icon"
+                :text="item.meta.title"
+                :to="item.path"
+              />
+            </van-grid>
+          </div>
+        </card>
       </Scroll>
     </div>
 
@@ -32,11 +34,12 @@
 <script>
 import TopBar from '@/components/TopBar'
 import Scroll from '@/components/scroll/scroll'
+import Card from '@/components/card'
 import { mapGetters } from 'vuex'
 import { getMenu, getTheAreaWeather } from '@/api/public'
 export default {
   name: 'menus',
-  components: { TopBar,Scroll },
+  components: { TopBar,Scroll,Card},
   data() {
     return {
       menuList: [],
@@ -109,7 +112,7 @@ export default {
   background-color: rgba(237, 252, 255, 1);
 }
 .menu-list {
-  padding: 30px 0 0 0;
+  -padding: 30px 0 0 0;
   height: calc(100vh - 400px);
   overflow: auto;
 }

src/views/menu/message/index.vue

@@ -13,8 +13,8 @@
         @loadMore="getDataList"
         :pullup="pullup">
         <van-empty v-if="!dataList.length" description="暂无数据" />
-        <van-cell-group class="list-item" v-else v-for="(v,i) in dataList" :key="i">
-          <van-cell  :title="v.title" :label="v.content" @click="clickItem(v)">
+        <card class="list-item" v-else v-for="(v,i) in dataList" :key="i">
+          <van-cell :title="v.title" :label="v.content" @click="clickItem(v)">
             <template #right-icon>
               <i  class="point-icon" :class="{'active':v.isRead}" />
             </template>
@@ -25,7 +25,7 @@
               <p class="cell-time">{{v.publishTime}}</p>
             </template>
           </van-cell>
-        </van-cell-group>
+        </card>
       </Scroll>
     </div>
   </div>
@@ -65,6 +65,7 @@
 <script>
 import NavBar from '@/components/NavBar'
 import Scroll from '@/components/scroll/scroll'
+import Card from '@/components/card'
 import {msgList,dataList} from './api'
 import {mapGetters} from "vuex";
 import {imgUrl} from "@/utils";
@@ -72,7 +73,8 @@ import {imgUrl} from "@/utils";
 export default {
   components: {
     NavBar,
-    Scroll
+    Scroll,
+    Card
   },
   data() {
     return {
@@ -179,6 +181,11 @@ export default {
   //.van-empty{
   //  background-color: #fff;
   //}
+  .list-item{
+    .van-cell{
+      padding: 0;
+    }
+  }
   .van-cell-group{
     background-color: #fff;
   }
@@ -192,15 +199,15 @@ export default {
 
 }
 .card-list{
-  padding: 20px;
+  padding:0 20px;
   height: calc(100vh - 190px);
   overflow:  auto;
 }
 .list-item{
-  margin-bottom: 20px;
-  &:last-child{
-    margin-bottom: 0;
-  }
+  //margin-bottom: 20px;
+  //&:last-child{
+  //  margin-bottom: 0;
+  //}
 }
 .cell-label{
   width: 100%;

src/views/menu/safetyBook/api.js

@@ -1,19 +1,18 @@
 import request from "@/utils/request";
 import day from 'dayjs'
-//获取消息列表
-export function dataList(params) {
+//获取列表
+export function dataList(data) {
   return request({
-    url: "/core/center/messageList",
-    method: "get",
-    params,
+    url: "/core/safetyBook/list",
+    method: "post",
+    data,
   });
 }
-//获取计划列表
-export function msgList(data){
+//获取详情
+export function detail(id){
   return request({
-    url: "/core/notification/appList",
-    method: "post",
-    data
+    url: "/core/safetyBook/"+id,
+    method: "get",
   });
 }
 

src/views/menu/safetyBook/detail.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="detail">
+    <nav-bar></nav-bar>
+    <div class="info">
+      <van-cell-group>
+        <van-cell class="item-cell" title="签署类型" :value="getDictLabel(dataInfo.type,'safety_book_type')" >
+        </van-cell>
+        <van-cell class="item-cell" title="签署人" :value="dataInfo.userName" >
+        </van-cell>
+        <van-cell class="item-cell" title="签署时间" :value="dataInfo.createTime">
+        </van-cell>
+      </van-cell-group>
+    </div>
+  </div>
+</template>
+<script>
+import NavBar from '@/components/NavBar'
+import { detail } from './api.js'
+
+export default {
+  data() {
+    return {
+      dataInfo: {},
+    }
+  },
+  components: { NavBar },
+  mounted() {
+    this.getInfo();
+  },
+  methods: {
+    async getInfo() {
+      let res = await detail(this.$route.query.id);
+      this.dataInfo = res.data;
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.detail {
+
+}
+.info{
+}
+.history {
+
+}
+</style>

src/views/menu/safetyBook/index.vue

@@ -3,7 +3,7 @@
     <NavBar />
     <div class="page-container">
       <div class="search-box">
-        <org-tree v-model="query.OrgId" placeholder="选择检查机构" @change="refreshData"></org-tree>
+        <org-tree v-model="query.orgId" placeholder="选择检查机构" @change="refreshData"></org-tree>
       </div>
       <div class="scroll-box">
         <Scroll
@@ -12,16 +12,17 @@
           :pullupFn="getDataList"
           :pullup="pullup">
           <van-empty v-if="!dataList.length" description="暂无数据" />
-          <div class="list-item" v-else v-for="(v,i) in dataList" :key="i">
-            <van-panel :title="v.title" :status="`${i}`" @click="clickItem(v)">
-              <van-cell class="item-cell" :title="v.title" :value="v.publishTime">
+          <card class="list-item" v-else v-for="(v,i) in dataList" :key="i">
+            <p class="item-title">{{v.orgName}}</p>
+            <div :title="v.orgName" @click="clickItem(v)">
+              <van-cell class="item-cell" title="签署类型" :value="getDictLabel(v.type,'safety_book_type')" >
               </van-cell>
-              <van-cell class="item-cell" :title="v.title" :value="v.publishTime" >
+              <van-cell class="item-cell" title="签署人" :value="v.userName" >
               </van-cell>
-              <van-cell class="item-cell" :title="v.title" :value="v.publishTime" >
+              <van-cell class="item-cell" title="签署时间" :value="v.createTime">
               </van-cell>
-            </van-panel>
-          </div>
+            </div>
+          </card>
         </Scroll>
       </div>
     </div>
@@ -29,9 +30,11 @@
 </template>
 
 <script>
+import {mapGetters} from "vuex";
 import NavBar from '@/components/NavBar'
 import OrgTree from '@/components/orgTree'
 import Scroll from '@/components/scroll/scroll'
+import Card from '@/components/card'
 import {dataList} from './api'
 import {formatDate} from "@/filters/filter";
 import {msgList} from "@/views/menu/message/api";
@@ -40,24 +43,37 @@ export default {
   components: {
     NavBar,
     OrgTree,
-    Scroll
+    Scroll,
+    Card
   },
   data(){
+    let year = new Date().getFullYear();
     return {
       pullup:true,
       query:{
-        OrgId:null,
+        orgId:null,
+        year:year,
         pageNum:1,
         pageSize:10,
       },
       total:0,
-      dataList:[]
+      dataList:[],
+      dicts:['safety_book_type'],
     }
   },
+  computed:{
+    ...mapGetters(['orgId','dictionary'])
+  },
   mounted(){
+    this.query.orgId = this.orgId;
     this.getDataList();
   },
   methods:{
+    clickItem(item){
+      this.$router.push({
+        path:'/safetyBookDetail',query:{id:item.id}
+      })
+    },
     refreshData(){
       this.pullup = true;
       this.query.pageNum = 1;
@@ -71,7 +87,6 @@ export default {
         this.$toast('已加载完毕');
         return;
       }
-      let data = {};
       dataList(this.query).then(res=>{
         if(res.total === '0'){
           this.pullup = false;
@@ -92,13 +107,16 @@ export default {
 </script>
 <style lang="scss">
 .safetyBook{
+  .van-cell-group__title{
+    background-color: #fff;
+    color: #333;
+  }
   .list-item{
-    .van-cell-group__title{
-      background-color: #fff;
-      color: #333;
-    }
-    .van-cell__title{
-      color: #969799;
+    .item-cell{
+      -padding: 20px 0;
+      .van-cell__title{
+        color: #969799;
+      }
     }
   }
 }
@@ -108,15 +126,17 @@ export default {
 
 }
 .scroll-box{
-  padding: 20px;
+  padding:0 20px;
   width: 100%;
   height:calc(100vh - 284px);
   overflow: auto;
 }
 .list-item{
-  margin-bottom:20px;
-  &:last-child{
-    margin-bottom: 0;
+  .item-title{
+    font-size: 28px;
+    color: #333;
+    padding-bottom: 20px ;
+    border-bottom: 1px solid #f4f4f4;
   }
 }
 </style>