From 96eefa843d1fd33315eb810580f25f003a472993 Mon Sep 17 00:00:00 2001
From: zhichao lei <442149704@qq.com>
Date: Sat, 20 Feb 2021 15:36:57 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E5=85=AC=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../learun-mpui/learun-ui-ali/title.vue       |    2 +-
 .../learun-mpui/learun-ui-mp/title.vue        |    2 +-
 .../LearunApp-2.2.0/pages.json                |    7 +
 .../pages/LR_OAModule/list.vue                |  286 ++++
 .../LearunApp-2.2.0/pages/home.vue            | 1330 +++++++++--------
 5 files changed, 998 insertions(+), 629 deletions(-)
 create mode 100644 Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/LR_OAModule/list.vue

diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-ali/title.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-ali/title.vue
index 678f5f2f5..82d074ea4 100644
--- a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-ali/title.vue	
+++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-ali/title.vue	
@@ -1,5 +1,5 @@
 <template>
-  <view v-if="type !== 'default'" :class="className" :style="style" class="cu-bar bg-white cu-title">
+  <view @click="$emit('click', $event)" v-if="type !== 'default'" :class="className" :style="style" class="cu-bar bg-white cu-title">
     <!-- 下划线标题(普通/变色) -->
     <view v-if="type === 'underline' || type === 'colorfulUnderline'" class="action border-title">
       <text :class="['text-' + color, blod ? 'text-blod' : '']" class="text-xl"><slot></slot></text>
diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/title.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/title.vue
index 190d0cbf6..46cd10caa 100644
--- a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/title.vue	
+++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/components/learun-mpui/learun-ui-mp/title.vue	
@@ -31,7 +31,7 @@
   </view>
 
   <!-- 普通标题(圆点/长圆点) -->
-  <view v-else :class="[border ? 'solid-bottom' : '']" class="cu-bar bg-white cu-title">
+  <view @click="$emit('click', $event)" v-else :class="[border ? 'solid-bottom' : '']" class="cu-bar bg-white cu-title">
     <view class="action" style="vertical-align: middle;">
       <text
         :class="[subColor ? 'text-' + subColor : '', long ? 'cuIcon-titles' : 'cuIcon-title']"
diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages.json b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages.json
index 1cd17fd19..96129886f 100644
--- a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages.json	
+++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages.json	
@@ -934,6 +934,13 @@
 			"style": {
 				"navigationBarTitleText": "扫码入校记录"
 			}
+		},
+		//通知公告
+		{
+			"path": "pages/LR_OAModule/list",
+			"style": {
+				"navigationBarTitleText": "通知公告"
+			}
 		}
 		
 
diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/LR_OAModule/list.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/LR_OAModule/list.vue
new file mode 100644
index 000000000..7c7cbe0a1
--- /dev/null
+++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/LR_OAModule/list.vue	
@@ -0,0 +1,286 @@
+<template> 
+  <view class="page"> 
+    <!-- 主列表页 --> 
+    <view :class="sideOpen ? 'show' : ''" class="mainpage" style="padding-top: 80rpx;"> 
+      <!-- 顶部条目/分页信息栏 --> 
+      <l-customlist-banner @buttonClick="sideOpen = true">{{ tips }}</l-customlist-banner> 
+  
+      <!-- 滚动列表，跨端支持上拉/下拉 --> 
+      <l-scroll-list v-if="ready" @pullDown="pullDown" @toBottom="fetchList()" ref="list"> 
+        <l-customlist :tips="loadState" showTips> 
+          <!-- 单条记录 --> 
+          <view class="customlist-item" v-for="item of list" :key="item.F_NewsId"> 
+  
+            <view class="customlist-item-field"> 
+              <text class="customlist-item-field-title">公告标题：</text> 
+              {{ displayListItem(item, 'F_FullHead') }} 
+            </view> 
+  
+            <view class="customlist-item-field"> 
+              <text class="customlist-item-field-title">所属类别：</text> 
+              {{ displayListItem(item, 'F_Category') }} 
+            </view> 
+  
+            <view class="customlist-item-field"> 
+              <text class="customlist-item-field-title">发布时间：</text> 
+              {{ displayListItem(item, 'F_CreateDate') }} 
+            </view> 
+  
+            <view class="customlist-item-field"> 
+              <text class="customlist-item-field-title">信息来源：</text> 
+              {{ displayListItem(item, 'F_SourceName') }} 
+            </view> 
+  
+           
+  
+  
+            <l-customlist-action @view="action('view', item)" /> 
+          </view> 
+        </l-customlist> 
+      </l-scroll-list> 
+    </view> 
+  
+    <!-- 关闭侧边抽屉按钮 --> 
+    <view @click="sideOpen = false" :class="sideOpen ? 'show' : ''" class="sideclose"> 
+      <l-icon type="pullright" color="blue" /> 
+    </view> 
+  
+    <!-- 侧边栏，用于设置查询条件 --> 
+    <scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y> 
+      <view v-if="ready" class="padding"> 
+  
+  
+        <!-- 重置查询条件按钮 --> 
+        <view class="padding-tb"> 
+          <l-button @click="reset" line="orange" class="block" block>重置查询条件</l-button> 
+        </view> 
+      </view> 
+    </scroll-view> 
+  
+    <l-customlist-add v-if="!sideOpen" @click="action('add')" /> 
+  
+  </view> 
+</template> 
+  
+  
+<script> 
+/* 
+ * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn) 
+ * Copyright (c) 2013-2021 上海力软信息技术有限公司 
+ * 创建人：超级管理员 
+ * 日  期：2021-02-20 11:28 
+ * 描  述：通知公告 
+ */
+  
+/** 
+ * 本段代码由移动端代码生成器输出，移动端须 2.2.0 版本及以上可以使用 
+ * 请在移动端 /pages.json 中的 pages 字段中添加一条记录： 
+ * { "path": "pages/LR_Desktop/Notice/list", "style": { "navigationBarTitleText": "表单列表页" } } 
+ *  
+ * （navigationBarTitleText 字段为本页面的标题文本，可以修改） 
+ * （必须自行操作该步骤，力软代码生成器不会自动帮您修改 /pages.json 文件） 
+ */
+import moment from 'moment'
+import get from 'lodash/get'
+import set from 'lodash/set'
+import pickBy from 'lodash/pickBy'
+import mapValues from 'lodash/mapValues'
+  
+export default { 
+  data() { 
+    return { 
+      // 数据项的数据类型、结构 
+      scheme: { 
+        F_FullHead: { type: 'text' }, 
+        F_Category: { type: 'text' }, 
+        F_CreateDate: { type: 'datetime', dateformat: '0' }, 
+        F_SourceName: { type: 'text' }, 
+        F_NewsContent: { type: 'texteditor' }, 
+      }, 
+  
+      // 查询条件 
+      searchData: {}, 
+      defaultQueryData: {}, 
+      queryData: { 
+      }, 
+  
+      // 数据源 
+      dataSource: { 
+      }, 
+  
+      // 页面相关参数 
+      ready: false, 
+      tips: '加载中...', 
+      loadState: '向下翻以加载更多', 
+      sideOpen: false, 
+  
+      // 列表与分页信息 
+      page: 1, 
+      total: 2, 
+      list: [] 
+    } 
+  }, 
+  
+  async onLoad() { 
+    await this.init() 
+  }, 
+  onUnload() { 
+    this.OFF('LR_DesktopNotice-list-change') 
+  }, 
+  
+  methods: { 
+    // 页面初始化 
+    async init() { 
+      this.ON('LR_DesktopNotice-list-change', this.refreshList) 
+  
+      // 拉取加载列表和数据源 
+      await Promise.all([ 
+  
+  
+        () => {} 
+      ]) 
+      await this.fetchList() 
+      // 初始化查询条件 
+      this.defaultQueryData = this.COPY(this.queryData) 
+      this.ready = true
+    }, 
+  
+    // 拉取列表 
+    async fetchList() { 
+      if (this.page > this.total) { return } 
+  
+      const result = await this.HTTP_GET( 
+        '/learun/news/list?F_CategoryId=', 
+        { 
+          // 这里 sidx 表示排序字段，sord 表示排序方式(DESC=降序，ASC=升序) 
+          // 代码生成器生成时默认按照主键排序，您可以修改成按创建时间的字段降序 
+          pagination: { rows: 10, page: this.page, sidx: 'F_NewsId', sord: 'DESC' }, 
+          queryJson: JSON.stringify(this.searchData) 
+        }, 
+        '加载数据时出错'
+      ) 
+  
+      if (!result) { return } 
+  
+      this.total = result.total 
+      this.page = result.page + 1 
+      this.list = this.list.concat(result.rows) 
+  
+      this.tips = `已加载 ${Math.min(result.page, result.total)} / ${result.total} 页，共 ${result.records} 项` 
+      this.loadState = result.page >= result.total ? '已加载所有项目' : '向下翻以加载更多'
+    }, 
+  
+    // 刷新清空列表 
+    async refreshList() { 
+      this.page = 1 
+      this.total = 2 
+      this.list = [] 
+  
+      await this.fetchList() 
+    }, 
+  
+    // 列表下拉 
+    pullDown() { 
+      this.refreshList().then(() => { 
+        this.$refs.list.stopPullDown() 
+      }) 
+    }, 
+  
+    // 设置搜索条件 
+    async searchChange() { 
+      const result = {} 
+  
+      // 将其他查询项添加到查询 JSON 中 
+      const queryObj = pickBy(this.queryData, t => (Array.isArray(t) ? t.length > 0 : t)) 
+      Object.assign(result, mapValues(queryObj, t => (Array.isArray(t) ? t.join(',') : t))) 
+  
+      this.searchData = result 
+      await this.refreshList() 
+    }, 
+  
+    // 点击「清空查询条件」按钮 
+    reset() { 
+      this.queryData = this.COPY(this.defaultQueryData) 
+      this.searchChange() 
+    }, 
+  
+    // 点击「编辑」、「查看」、「添加」、「删除」按钮 
+    async action(type, id = '') { 
+      switch (type) { 
+        case 'view': 
+var param={
+    f_category:id.F_Category,
+    f_content:id.F_NewsContent,
+    f_createdate:id.F_CreateDate,
+    f_createusername:id.F_CreateUserName,
+    f_id:id.F_NewsId,
+    f_time:id.F_ReleaseTime,
+    f_title:'['+id.F_Category+']'+id.F_FullHead
+
+
+}
+          this.NAV_TO(`/pages/home/notice`,param,true) 
+          return
+  
+        case 'add': 
+          this.NAV_TO('./single?type=create') 
+          return
+  
+        case 'edit': 
+          this.NAV_TO(`./single?type=edit&id=${id}`) 
+          return
+  
+        case 'delete': 
+          if (!(await this.CONFIRM('删除项目', '确定要删除该项吗？', true))) { 
+            return
+          } 
+  
+          this.HTTP_POST('/LR_Desktop/Notice/delete', id, '删除失败').then(success => { 
+            if(!success) { return } 
+            this.TOAST('删除成功', 'success') 
+            this.refreshList() 
+          }) 
+          return
+  
+        default: 
+          return
+      } 
+    }, 
+  
+    // 显示列表中的标题项 
+    displayListItem(item, field) { 
+      const fieldItem = this.scheme[field] 
+      const value = item[field] 
+  
+      switch (fieldItem.type) { 
+        case 'currentInfo': 
+        case 'organize': 
+          return fieldItem.dataType === 'time' ? value : get(this.GET_GLOBAL(fieldItem.dataType), `${value}.name`, '') 
+  
+        case 'radio': 
+        case 'select': 
+          const selectItem = this.dataSource[field].find(t => t.value === String(value)) 
+          return get(selectItem, 'text', '') 
+  
+        case 'checkbox': 
+          if (!value || value.split(',').length <= 0) { return '' } 
+          const checkboxItems = value.split(',') 
+          return this.dataSource[field].filter(t => checkboxItems.includes(t.value)).map(t => t.text).join('，') 
+  
+        case 'datetime': 
+          if (!value) { return '' } 
+          return moment(value).format(Number(fieldItem.dateformat) === 0 ? 'YYYY年 M月 D日' : 'YYYY-MM-DD HH:mm') 
+  
+        default: return value === null || value === undefined ? '' : value 
+      } 
+    } 
+  
+  } 
+} 
+</script> 
+  
+  
+<style lang="less" scoped> 
+@import '~@/common/css/sidepage.less'; 
+@import '~@/common/css/customlist.less'; 
+</style> 
\ No newline at end of file
diff --git a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/home.vue b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/home.vue
index 9eca7fe31..220ba5343 100644
--- a/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/home.vue	
+++ b/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/home.vue	
@@ -1,638 +1,714 @@
 <template>
-	<view id="home" class="page">
-		<!-- 顶部搜索栏 -->
-		<view class="header text-white">
-			<!-- #ifndef H5 -->
-			<l-icon @click="scanClick" type="scan" color="white" class="header-left text-xxl margin-left-sm" />
-			<!-- #endif -->
-			<view @click="moreClick(1)" class="search header-mid margin-lr-sm">
-				<l-icon type="search" color="white" class="margin-lr-sm" />
-				搜索更多应用
-			</view>
-			<l-icon @click="msgClick" type="mail" color="white" class="header-right text-xxl margin-right-sm" />
-		</view>
-
-		<!-- 轮播图片 -->
-		<swiper v-if="imgCount > 0" style="height:120px;">
-			<swiper-item v-for="(item, index) of imgData" :key="index" style="height:120px;">
-				<image :src="item" mode="aspectFill" style="height:100%; width:100%;"></image>
-			</swiper-item>
-		</swiper>
-
-		<!-- 功能宫格列表 -->
-		<view class="col-4 function-list cu-list grid no-border">
-			<view v-for="(item, index) in funcListDisplay" @click="funcListClick(item)" :key="index" class="cu-item text-center flex flex-wrap justify-center align-center">
-				<view class="app-item align-center flex flex-wrap justify-center align-center">
-					<l-icon :type="item.icon" color="white" class="text-sl" />
-				</view>
-				<text>{{ item.F_Name }}</text>
-			</view>
-		</view>
-		<view class="text-center bg-white margin-bottom"><text @click="moreClick(0)" class="function-more-btn margin-tb-sm text-gray">更多应用</text></view>
-
-		<!-- 统计数据宫格 -->
-		<l-title>统计数据</l-title>
-		<view class="count-list cu-list grid col-3 margin-bottom">
-			<view v-for="(item, index) in countData" :key="index" class="cu-item text-center">
-				<text class="margin-bottom-xs">{{ item.title || '(未命名)' }}</text>
-				<text class="count-item-value">{{ item.value || '-' }}</text>
-			</view>
-		</view>
-
-		<!-- 通知列表区块 -->
-		<view v-for="(block, blockIndex) of noticeData" :key="blockIndex" class="margin-bottom">
-			<!-- <view class="margin-top"></view> -->
-			<l-title>{{ block.title }}</l-title>
-			<l-list>
-				<l-list-item v-for="(item, i) of block.content" @click="noticeClick(item)" :key="i" arrow>
-					{{ item.f_title || '(无标题)' }}
-					<l-tag slot="action" line="gray">{{ postDateTime(item.f_time) }}</l-tag>
-				</l-list-item>
-			</l-list>
-		</view>
-
-		<!-- 图表区块 -->
-		<view v-for="item of chartData" :key="item.id" class="margin-bottom">
-			<l-title>{{ item.title }}</l-title>
-			<view :style="{ width: cWidth + 'px', height: cHeight + 'px' }" class="chart-list">
-				<!--#ifndef MP-ALIPAY -->
-				<canvas v-if="item.type === 1" @tap="chartTap(item, $event)" @touchstart="touchStart(item.id, $event)" @touchmove="touchMove(item.id, $event)"
-				 @touchend="touchEnd(item.id, $event)" :style="{ width: cWidth + 'px', height: cHeight + 'px' }" :canvas-id="item.id"
-				 :id="item.id" class="charts"></canvas>
-				<canvas v-else @tap="chartTap(item, $event)" :style="{ width: cWidth + 'px', height: cHeight + 'px' }" :canvas-id="item.id"
-				 :id="item.id" class="charts"></canvas>
-				<!--#endif -->
-
-				<!-- 阿里小程序，需要以2倍尺寸显示，然后缩放为50% -->
-				<!--#ifdef MP-ALIPAY -->
-				<canvas v-if="item.type === 1" @tap="chartTap(item, $event)" @touchstart="touchStart(item.id, $event)" @touchmove="touchMove(item.id, $event)"
-				 @touchend="touchEnd(item.id, $event)" :style="{
-						width: cWidth * pixelRatio + 'px',
-						height: cHeight * pixelRatio + 'px',
-						transform: 'scale(' + 1 / pixelRatio + ')',
-						marginLeft: (-cWidth * (pixelRatio - 1)) / 2 + 'px',
-						marginTop: (-cHeight * (pixelRatio - 1)) / 2 + 'px'
-					}"
-				 :canvas-id="item.id" :id="item.id" class="charts"></canvas>
-				<canvas v-else @tap="chartTap(item, $event)" :style="{
-						width: cWidth * pixelRatio + 'px',
-						height: cHeight * pixelRatio + 'px',
-						transform: 'scale(' + 1 / pixelRatio + ')',
-						marginLeft: (-cWidth * (pixelRatio - 1)) / 2 + 'px',
-						marginTop: (-cHeight * (pixelRatio - 1)) / 2 + 'px'
-					}"
-				 :canvas-id="item.id" :id="item.id" class="charts"></canvas>
-				<!--#endif -->
-			</view>
-		</view>
-	</view>
+  <view id="home" class="page">
+    <!-- 顶部搜索栏 -->
+    <view class="header text-white">
+      <!-- #ifndef H5 -->
+      <l-icon
+        @click="scanClick"
+        type="scan"
+        color="white"
+        class="header-left text-xxl margin-left-sm"
+      />
+      <!-- #endif -->
+      <view @click="moreClick(1)" class="search header-mid margin-lr-sm">
+        <l-icon type="search" color="white" class="margin-lr-sm" />
+        搜索更多应用
+      </view>
+      <l-icon
+        @click="msgClick"
+        type="mail"
+        color="white"
+        class="header-right text-xxl margin-right-sm"
+      />
+    </view>
+
+    <!-- 轮播图片 -->
+    <swiper v-if="imgCount > 0" style="height: 120px">
+      <swiper-item
+        v-for="(item, index) of imgData"
+        :key="index"
+        style="height: 120px"
+      >
+        <image
+          :src="item"
+          mode="aspectFill"
+          style="height: 100%; width: 100%"
+        ></image>
+      </swiper-item>
+    </swiper>
+
+    <!-- 功能宫格列表 -->
+    <view class="col-4 function-list cu-list grid no-border">
+      <view
+        v-for="(item, index) in funcListDisplay"
+        @click="funcListClick(item)"
+        :key="index"
+        class="cu-item text-center flex flex-wrap justify-center align-center"
+      >
+        <view
+          class="app-item align-center flex flex-wrap justify-center align-center"
+        >
+          <l-icon :type="item.icon" color="white" class="text-sl" />
+        </view>
+        <text>{{ item.F_Name }}</text>
+      </view>
+    </view>
+    <view class="text-center bg-white margin-bottom"
+      ><text
+        @click="moreClick(0)"
+        class="function-more-btn margin-tb-sm text-gray"
+        >更多应用</text
+      ></view
+    >
+
+    <!-- 统计数据宫格 -->
+    <l-title>统计数据</l-title>
+    <view class="count-list cu-list grid col-3 margin-bottom">
+      <view
+        v-for="(item, index) in countData"
+        :key="index"
+        class="cu-item text-center"
+      >
+        <text class="margin-bottom-xs">{{ item.title || "(未命名)" }}</text>
+        <text class="count-item-value">{{ item.value || "-" }}</text>
+      </view>
+    </view>
+
+    <!-- 通知列表区块 -->
+    <view
+      v-for="(block, blockIndex) of noticeData"
+      :key="blockIndex"
+      class="margin-bottom"
+    >
+      <!-- <view class="margin-top"></view> -->
+      <l-title @click="informClick(block.title)">{{ block.title }}</l-title>
+      <l-list>
+        <l-list-item
+          v-for="(item, i) of block.content"
+          @click="noticeClick(item)"
+          :key="i"
+          arrow
+        >
+          {{ item.f_title || "(无标题)" }}
+          <l-tag slot="action" line="gray">{{
+            postDateTime(item.f_time)
+          }}</l-tag>
+        </l-list-item>
+      </l-list>
+    </view>
+
+    <!-- 图表区块 -->
+    <view v-for="item of chartData" :key="item.id" class="margin-bottom">
+      <l-title>{{ item.title }}</l-title>
+      <view
+        :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
+        class="chart-list"
+      >
+        <!--#ifndef MP-ALIPAY -->
+        <canvas
+          v-if="item.type === 1"
+          @tap="chartTap(item, $event)"
+          @touchstart="touchStart(item.id, $event)"
+          @touchmove="touchMove(item.id, $event)"
+          @touchend="touchEnd(item.id, $event)"
+          :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
+          :canvas-id="item.id"
+          :id="item.id"
+          class="charts"
+        ></canvas>
+        <canvas
+          v-else
+          @tap="chartTap(item, $event)"
+          :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
+          :canvas-id="item.id"
+          :id="item.id"
+          class="charts"
+        ></canvas>
+        <!--#endif -->
+
+        <!-- 阿里小程序，需要以2倍尺寸显示，然后缩放为50% -->
+        <!--#ifdef MP-ALIPAY -->
+        <canvas
+          v-if="item.type === 1"
+          @tap="chartTap(item, $event)"
+          @touchstart="touchStart(item.id, $event)"
+          @touchmove="touchMove(item.id, $event)"
+          @touchend="touchEnd(item.id, $event)"
+          :style="{
+            width: cWidth * pixelRatio + 'px',
+            height: cHeight * pixelRatio + 'px',
+            transform: 'scale(' + 1 / pixelRatio + ')',
+            marginLeft: (-cWidth * (pixelRatio - 1)) / 2 + 'px',
+            marginTop: (-cHeight * (pixelRatio - 1)) / 2 + 'px',
+          }"
+          :canvas-id="item.id"
+          :id="item.id"
+          class="charts"
+        ></canvas>
+        <canvas
+          v-else
+          @tap="chartTap(item, $event)"
+          :style="{
+            width: cWidth * pixelRatio + 'px',
+            height: cHeight * pixelRatio + 'px',
+            transform: 'scale(' + 1 / pixelRatio + ')',
+            marginLeft: (-cWidth * (pixelRatio - 1)) / 2 + 'px',
+            marginTop: (-cHeight * (pixelRatio - 1)) / 2 + 'px',
+          }"
+          :canvas-id="item.id"
+          :id="item.id"
+          class="charts"
+        ></canvas>
+        <!--#endif -->
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import moment from 'moment';
-	import mapValues from 'lodash/mapValues';
-	import uCharts from '@/common/u-charts.js';
-
-	// 用于保存图表操作对象
-	let chartsObject = {};
-	let chartsConfig = {};
-
-	export default {
-		data() {
-			return {
-				imgData: [],
-				listData: [],
-				myList: [],
-
-				countData: [],
-				noticeData: [],
-				chartData: [],
-
-				pixelRatio: 1,
-				cWidth: '',
-				cHeight: '',
-				chartsFontSize: 10
-			};
-		},
-
-		async onLoad(param) {
-			await this.init(param);
-		},
-
-		// 本页面开启下拉刷新，用于刷新首页数据
-		onPullDownRefresh() {
-			this.refresh().then(() => {
-				this.TOAST('已更新首页数据');
-				uni.stopPullDownRefresh();
-			});
-		},
-
-		methods: {
-			// 页面初始化
-			async init(param) {
-				this.HIDE_LOADING();
-
-				// 有参数表示可能是打开分享消息；将数据存入全局变量以备后续跳转
-				if (param && param.learun && param.pagePath) {
-					this.SET_GLOBAL('jumpParam', param);
-				}
-
-				// 登录状态无效，则跳转到登录页
-				const stateValid = await this.checkLoginState();
-				if (!stateValid) {
-					this.RELAUNCH_TO('/pages/login');
-					return;
-				}
-				// 图表相关参数初始化
-				this.initCharts();
-
-				// 加载页面数据和全局数据
-				await this.FETCH_CLIENTDATA();
-				await this.refresh();
-
-				// 监听「我的应用」列表修改
-				this.ON('home-list-change', () => {
-					this.HTTP_GET('learun/adms/function/mylist').then(newList => {
-						this.myList = newList;
-					});
-				});
-
-				this.SET_STORAGE('nextTime', null);
-
-				// 处理小程序分享消息跳转
-				// #ifdef MP
-				const jumpParam = this.GET_GLOBAL('jumpParam');
-				if (jumpParam) {
-					this.SET_GLOBAL('jumpParam', null);
-					this.MP_SHARE_DECODE(jumpParam);
-				}
-				// #endif
-				//微信推送跳转
-				if (!!param.page) {
-					//通知公告
-					if (param.page == "notice") {
-						this.NAV_TO("/pages/EducationalAdministration/SYS_ReceiveMessage/list");
-						return;
-					}
-					//邮件
-					if (param.page == "mail") {
-						this.NAV_TO("/pages/EducationalAdministration/SYS_ReceiveMessage/list");
-						return;
-					}
-					//OA待办
-					if (param.page == "oa") {
-						this.NAV_TO("/pages/nworkflow/myflow/list");
-						return;
-					}
-					//公文接收
-					if (param.page == "file") {
-						this.NAV_TO("/pages/EducationalAdministration/Sys_ReceiveFile/list");
-						return;
-					}
-					return;
-				}
-			},
-
-			// 验证登录状态
-			async checkLoginState() {
-				const token = this.GET_GLOBAL('token') || uni.getStorageSync('token');
-				if (!token || token === 'null' || token === 'undefined') {
-					this.RELAUNCH_TO('/pages/login');
-					this.HIDE_LOADING();
-
-					return false;
-				}
-				this.SET_GLOBAL('token', token);
-
-				// 判断是否有 loginUser 对象
-				if (this.GET_GLOBAL('loginUser')) {
-					return true;
-				}
-
-				// 拉取用户信息验证登录态；如果失败则跳转至登录页
-				const userInfo = await this.HTTP_GET('learun/adms/user/info');
-				if (!userInfo) {
-					this.SET_GLOBAL('token', null);
-					this.SET_STORAGE('token', null);
-					return false;
-				}
-
-				// 有登录态，则设置用户信息和全局数据
-				const {
-					baseinfo,
-					mpinfo,
-					post,
-					role
-				} = userInfo;
-				const user = { ...baseinfo,
-					post,
-					role
-				};
-				if (mpinfo && Array.isArray(mpinfo) && mpinfo.includes(this.PLATFORM)) {
-					user.miniProgram = true;
-				}
-				this.SET_GLOBAL('loginUser', user);
-
-				return true;
-			},
-
-			// 刷新首页数据
-			async refresh() {
-				// 清空页面数据
-				chartsObject = {};
-
-				this.imgData = [];
-				this.listData = [];
-				this.myList = [];
-
-				this.countData = [];
-				this.noticeData = [];
-				this.chartData = [];
-
-				// 同时发出请求，获取轮播图、所有功能列表、我的功能列表、商机通知提醒图表数据
-				// 商机、通知提醒图表数据，获取的是数据ID，所以还需要进一步请求
-				const [imgData, listData, myList, settingData] = await Promise.all([
-					this.HTTP_GET('learun/adms/desktop/imgid' + (this.CONFIG('isDistributed') == true ? '?isDistributed=true' : '')),
-					this.HTTP_GET('learun/adms/function/list').then(result => result.data),
-					this.HTTP_GET('learun/adms/function/mylist'),
-					this.HTTP_GET('learun/adms/desktop/setting').then(result => result.data)
-				]);
-				this.imgData = imgData;
-				if (!this.CONFIG('isDistributed'))
-					// 轮播图需要加上 url 前缀
-					this.imgData = imgData.map(t => this.API + `/desktop/img?data=${t}`);
-
-				// 功能区按钮需要处理 icon
-				this.listData = listData.map(item => {
-					const icon = item.F_Icon ? item.F_Icon.replace(`iconfont icon-`, ``) : '';
-					const existsIcon = this.getUiIcons().some(t => t === icon);
-
-					return {
-						...item,
-						icon: existsIcon ? icon : 'roundright'
-					};
-				});
-
-				// 我的应用列表需要过滤掉不存在的按钮
-				this.myList = myList.filter(t => listData.find(item => item.F_Id === t));
-
-				// 发出请求，获取商机信息、消息通知信息、图表信息；三类数据全部同时请求
-				await Promise.all([
-					...settingData.target.map(item =>
-						this.HTTP_GET('learun/adms/desktop/data', {
-							type: 'Target',
-							id: item.F_Id
-						}).then(data => {
-							if (data && data.value) {
-								const {
-									value
-								} = data;
-								this.countData.push({
-									title: item.F_Name,
-									value
-								});
-							}
-						})
-					),
-
-					...settingData.list.map(item =>
-						this.HTTP_GET('learun/adms/desktop/data', {
-							type: 'list',
-							id: item.F_Id
-						}).then(data => {
-							if (data && data.value) {
-								const {
-									value
-								} = data;
-								this.noticeData.push({
-									title: item.F_Name,
-									content: value
-								});
-							}
-						})
-					),
-
-					...settingData.chart.map(item =>
-						this.HTTP_GET('learun/adms/desktop/data', {
-							type: 'chart',
-							id: item.F_Id
-						}).then(data => {
-							if (data && data.value) {
-								const {
-									value
-								} = data;
-								this.chartData.push({
-									title: item.F_Name,
-									value,
-									id: item.F_Id,
-									type: item.F_Type
-								});
-							}
-						})
-					)
-				]);
-
-				// 渲染图表
-				this.chartData.forEach(item => {
-					// 根据 item.type 的值选用对应的图表初始化配置项
-					// 0=环形图；1=折线图；2=柱状图
-					const charts = new uCharts(
-						[{
-								...chartsConfig,
-								canvasId: item.id,
-								type: 'ring',
-								series: item.value.map(t => ({
-									name: t.name,
-									data: t.value
-								})),
-								extra: {
-									pie: {
-										offsetAngle: -45,
-										ringWidth: 20,
-										labelWidth: 15
-									}
-								},
-								legend: {
-									lineHeight: 20
-								}
-							},
-							{
-								...chartsConfig,
-								canvasId: item.id,
-								type: 'line',
-								series: [{
-									name: item.title,
-									data: item.value.map(t => t.value)
-								}],
-								categories: item.value.map(t => t.name),
-								extra: {
-									line: {
-										type: 'straight'
-									}
-								},
-								xAxis: {
-									rotateLabel: true,
-									fontSize: this.chartsFontSize,
-									itemCount: 8
-								},
-								enableScroll: true
-							},
-							{
-								...chartsConfig,
-								canvasId: item.id,
-								type: 'column',
-								series: [{
-									name: item.title,
-									data: item.value.map(t => t.value)
-								}],
-								categories: item.value.map(t => t.name),
-								xAxis: {
-									rotateLabel: true,
-									fontSize: this.chartsFontSize
-								}
-							}
-						][item.type]
-					);
-
-					chartsObject[item.id] = charts;
-				});
-			},
-
-			// 初始化图表
-			initCharts() {
-				// （阿里小程序）设置图表尺寸为2倍
-				// #ifdef MP-ALIPAY
-				const pixelRatio = uni.getSystemInfoSync().pixelRatio;
-				if (pixelRatio > 1) {
-					this.pixelRatio = 2;
-					this.chartsFontSize = 15;
-				}
-				// #endif
-
-				this.cWidth = uni.upx2px(750);
-				this.cHeight = uni.upx2px(500);
-				chartsConfig = {
-					$this: this,
-					pixelRatio: this.pixelRatio,
-					width: this.cWidth * this.pixelRatio,
-					height: this.cHeight * this.pixelRatio,
-					background: '#FFFFFF',
-					dataLabel: true,
-					padding: [20, 15, 5, 15]
-				};
-			},
-
-			// 图表点击事件
-			chartTap(chartItem, e) {
-				const format = ({
-					name,
-					data
-				}, category) => `${category || ''} ${name}: ${data}`;
-
-				// #ifdef MP-DINGTALK
-				const detail = e.detail;
-				const item = detail;
-				e.mp.changedTouches = [item];
-				// #endif
-
-				chartsObject[chartItem.id].showToolTip(e, {
-					format
-				});
-			},
-
-			// 图表拖动事件（开始）
-			touchStart(chartId, e) {
-				chartsObject[chartId].scrollStart(e);
-			},
-
-			// 图表拖动事件（拖动）
-			touchMove(chartId, e) {
-				chartsObject[chartId].scroll(e);
-			},
-
-			// 图表拖动事件（结束）
-			touchEnd(chartId, e) {
-				chartsObject[chartId].scrollEnd(e);
-			},
-
-			// 格式化日期的显示（新闻列表、通知公告等）
-			postDateTime(timeStr) {
-				return moment(timeStr).fromNow();
-			},
-
-			// 点击功能按钮
-			funcListClick(item) {
-				if (item.F_IsSystem === 2) {
-					this.NAV_TO(`/pages/customapp/list?formId=${item.F_FormId}`, item, true);
-					return;
-				}
-
-				this.NAV_TO(`/pages/${item.F_Url}/list`);
-			},
-
-			// 点击通知公告的标题
-			noticeClick(item) {
-				this.NAV_TO('/pages/home/notice', item, true);
-			},
-
-			// #ifndef H5
-			// 点击左上角扫码图标，H5 无此功能
-			scanClick() {
-				uni.scanCode({
-					scanType: ['qrCode', 'barCode'],
-					success: ({
-						result,
-						charSet
-					}) => {
-						// 您可以在这里自行定制扫码后的功能
-					}
-				});
-			},
-			// #endif
-
-			// 点击更多功能按钮
-			moreClick(openSearch) {
-				this.NAV_TO(`/pages/home/more${openSearch ? '?search=1' : ''}`);
-			},
-
-			// 点击右上角的消息按钮
-			msgClick() {
-				this.TAB_TO('/pages/msg');
-			}
-		},
-
-		computed: {
-			// 「我的功能」区域按钮列表
-			funcListDisplay() {
-				const {
-					myList,
-					listData
-				} = this;
-				const myFuncList = myList.reduce((list, id) => {
-					if (listData.find(t => t.F_Id === id)) {
-						return [...list, listData.find(t => t.F_Id === id)];
-					}
-					return list;
-				}, []);
-
-				return myFuncList;
-			},
-
-			// imgData 数组的长度
-			imgCount() {
-				return this.imgData.length;
-			}
-		}
-	};
+import moment from "moment";
+import mapValues from "lodash/mapValues";
+import uCharts from "@/common/u-charts.js";
+
+// 用于保存图表操作对象
+let chartsObject = {};
+let chartsConfig = {};
+
+export default {
+  data() {
+    return {
+      imgData: [],
+      listData: [],
+      myList: [],
+
+      countData: [],
+      noticeData: [],
+      chartData: [],
+
+      pixelRatio: 1,
+      cWidth: "",
+      cHeight: "",
+      chartsFontSize: 10,
+    };
+  },
+
+  async onLoad(param) {
+    await this.init(param);
+  },
+
+  // 本页面开启下拉刷新，用于刷新首页数据
+  onPullDownRefresh() {
+    this.refresh().then(() => {
+      this.TOAST("已更新首页数据");
+      uni.stopPullDownRefresh();
+    });
+  },
+
+  methods: {
+    // 页面初始化
+    async init(param) {
+      this.HIDE_LOADING();
+
+      // 有参数表示可能是打开分享消息；将数据存入全局变量以备后续跳转
+      if (param && param.learun && param.pagePath) {
+        this.SET_GLOBAL("jumpParam", param);
+      }
+
+      // 登录状态无效，则跳转到登录页
+      const stateValid = await this.checkLoginState();
+      if (!stateValid) {
+        this.RELAUNCH_TO("/pages/login");
+        return;
+      }
+      // 图表相关参数初始化
+      this.initCharts();
+
+      // 加载页面数据和全局数据
+      await this.FETCH_CLIENTDATA();
+      await this.refresh();
+
+      // 监听「我的应用」列表修改
+      this.ON("home-list-change", () => {
+        this.HTTP_GET("learun/adms/function/mylist").then((newList) => {
+          this.myList = newList;
+        });
+      });
+
+      this.SET_STORAGE("nextTime", null);
+
+      // 处理小程序分享消息跳转
+      // #ifdef MP
+      const jumpParam = this.GET_GLOBAL("jumpParam");
+      if (jumpParam) {
+        this.SET_GLOBAL("jumpParam", null);
+        this.MP_SHARE_DECODE(jumpParam);
+      }
+      // #endif
+      //微信推送跳转
+      if (!!param.page) {
+        //通知公告
+        if (param.page == "notice") {
+          this.NAV_TO(
+            "/pages/EducationalAdministration/SYS_ReceiveMessage/list"
+          );
+          return;
+        }
+        //邮件
+        if (param.page == "mail") {
+          // this.TAB_TO("/pages/home");
+        }
+        //OA待办
+        if (param.page == "oa") {
+          // this.TAB_TO("/pages/home");
+        }
+        return;
+      }
+    },
+
+    // 验证登录状态
+    async checkLoginState() {
+      const token = this.GET_GLOBAL("token") || uni.getStorageSync("token");
+      if (!token || token === "null" || token === "undefined") {
+        this.RELAUNCH_TO("/pages/login");
+        this.HIDE_LOADING();
+
+        return false;
+      }
+      this.SET_GLOBAL("token", token);
+
+      // 判断是否有 loginUser 对象
+      if (this.GET_GLOBAL("loginUser")) {
+        return true;
+      }
+
+      // 拉取用户信息验证登录态；如果失败则跳转至登录页
+      const userInfo = await this.HTTP_GET("learun/adms/user/info");
+      if (!userInfo) {
+        this.SET_GLOBAL("token", null);
+        this.SET_STORAGE("token", null);
+        return false;
+      }
+
+      // 有登录态，则设置用户信息和全局数据
+      const { baseinfo, mpinfo, post, role } = userInfo;
+      const user = { ...baseinfo, post, role };
+      if (mpinfo && Array.isArray(mpinfo) && mpinfo.includes(this.PLATFORM)) {
+        user.miniProgram = true;
+      }
+      this.SET_GLOBAL("loginUser", user);
+
+      return true;
+    },
+
+    // 刷新首页数据
+    async refresh() {
+      // 清空页面数据
+      chartsObject = {};
+
+      this.imgData = [];
+      this.listData = [];
+      this.myList = [];
+
+      this.countData = [];
+      this.noticeData = [];
+      this.chartData = [];
+
+      // 同时发出请求，获取轮播图、所有功能列表、我的功能列表、商机通知提醒图表数据
+      // 商机、通知提醒图表数据，获取的是数据ID，所以还需要进一步请求
+      const [imgData, listData, myList, settingData] = await Promise.all([
+        this.HTTP_GET(
+          "learun/adms/desktop/imgid" +
+            (this.CONFIG("isDistributed") == true ? "?isDistributed=true" : "")
+        ),
+        this.HTTP_GET("learun/adms/function/list").then(
+          (result) => result.data
+        ),
+        this.HTTP_GET("learun/adms/function/mylist"),
+        this.HTTP_GET("learun/adms/desktop/setting").then(
+          (result) => result.data
+        ),
+      ]);
+      this.imgData = imgData;
+      if (!this.CONFIG("isDistributed"))
+        // 轮播图需要加上 url 前缀
+        this.imgData = imgData.map((t) => this.API + `/desktop/img?data=${t}`);
+
+      // 功能区按钮需要处理 icon
+      this.listData = listData.map((item) => {
+        const icon = item.F_Icon
+          ? item.F_Icon.replace(`iconfont icon-`, ``)
+          : "";
+        const existsIcon = this.getUiIcons().some((t) => t === icon);
+
+        return {
+          ...item,
+          icon: existsIcon ? icon : "roundright",
+        };
+      });
+
+      // 我的应用列表需要过滤掉不存在的按钮
+      this.myList = myList.filter((t) =>
+        listData.find((item) => item.F_Id === t)
+      );
+
+      // 发出请求，获取商机信息、消息通知信息、图表信息；三类数据全部同时请求
+      await Promise.all([
+        ...settingData.target.map((item) =>
+          this.HTTP_GET("learun/adms/desktop/data", {
+            type: "Target",
+            id: item.F_Id,
+          }).then((data) => {
+            if (data && data.value) {
+              const { value } = data;
+              this.countData.push({
+                title: item.F_Name,
+                value,
+              });
+            }
+          })
+        ),
+
+        ...settingData.list.map((item) =>
+          this.HTTP_GET("learun/adms/desktop/data", {
+            type: "list",
+            id: item.F_Id,
+          }).then((data) => {
+            if (data && data.value) {
+              const { value } = data;
+              this.noticeData.push({
+                title: item.F_Name,
+                content: value,
+              });
+            }
+          })
+        ),
+
+        ...settingData.chart.map((item) =>
+          this.HTTP_GET("learun/adms/desktop/data", {
+            type: "chart",
+            id: item.F_Id,
+          }).then((data) => {
+            if (data && data.value) {
+              const { value } = data;
+              this.chartData.push({
+                title: item.F_Name,
+                value,
+                id: item.F_Id,
+                type: item.F_Type,
+              });
+            }
+          })
+        ),
+      ]);
+
+      // 渲染图表
+      this.chartData.forEach((item) => {
+        // 根据 item.type 的值选用对应的图表初始化配置项
+        // 0=环形图；1=折线图；2=柱状图
+        const charts = new uCharts(
+          [
+            {
+              ...chartsConfig,
+              canvasId: item.id,
+              type: "ring",
+              series: item.value.map((t) => ({
+                name: t.name,
+                data: t.value,
+              })),
+              extra: {
+                pie: {
+                  offsetAngle: -45,
+                  ringWidth: 20,
+                  labelWidth: 15,
+                },
+              },
+              legend: {
+                lineHeight: 20,
+              },
+            },
+            {
+              ...chartsConfig,
+              canvasId: item.id,
+              type: "line",
+              series: [
+                {
+                  name: item.title,
+                  data: item.value.map((t) => t.value),
+                },
+              ],
+              categories: item.value.map((t) => t.name),
+              extra: {
+                line: {
+                  type: "straight",
+                },
+              },
+              xAxis: {
+                rotateLabel: true,
+                fontSize: this.chartsFontSize,
+                itemCount: 8,
+              },
+              enableScroll: true,
+            },
+            {
+              ...chartsConfig,
+              canvasId: item.id,
+              type: "column",
+              series: [
+                {
+                  name: item.title,
+                  data: item.value.map((t) => t.value),
+                },
+              ],
+              categories: item.value.map((t) => t.name),
+              xAxis: {
+                rotateLabel: true,
+                fontSize: this.chartsFontSize,
+              },
+            },
+          ][item.type]
+        );
+
+        chartsObject[item.id] = charts;
+      });
+    },
+
+    // 初始化图表
+    initCharts() {
+      // （阿里小程序）设置图表尺寸为2倍
+      // #ifdef MP-ALIPAY
+      const pixelRatio = uni.getSystemInfoSync().pixelRatio;
+      if (pixelRatio > 1) {
+        this.pixelRatio = 2;
+        this.chartsFontSize = 15;
+      }
+      // #endif
+
+      this.cWidth = uni.upx2px(750);
+      this.cHeight = uni.upx2px(500);
+      chartsConfig = {
+        $this: this,
+        pixelRatio: this.pixelRatio,
+        width: this.cWidth * this.pixelRatio,
+        height: this.cHeight * this.pixelRatio,
+        background: "#FFFFFF",
+        dataLabel: true,
+        padding: [20, 15, 5, 15],
+      };
+    },
+
+    // 图表点击事件
+    chartTap(chartItem, e) {
+      const format = ({ name, data }, category) =>
+        `${category || ""} ${name}: ${data}`;
+
+      // #ifdef MP-DINGTALK
+      const detail = e.detail;
+      const item = detail;
+      e.mp.changedTouches = [item];
+      // #endif
+
+      chartsObject[chartItem.id].showToolTip(e, {
+        format,
+      });
+    },
+
+    // 图表拖动事件（开始）
+    touchStart(chartId, e) {
+      chartsObject[chartId].scrollStart(e);
+    },
+
+    // 图表拖动事件（拖动）
+    touchMove(chartId, e) {
+      chartsObject[chartId].scroll(e);
+    },
+
+    // 图表拖动事件（结束）
+    touchEnd(chartId, e) {
+      chartsObject[chartId].scrollEnd(e);
+    },
+
+    // 格式化日期的显示（新闻列表、通知公告等）
+    postDateTime(timeStr) {
+      return moment(timeStr).fromNow();
+    },
+
+    // 点击功能按钮
+    funcListClick(item) {
+      if (item.F_IsSystem === 2) {
+        this.NAV_TO(
+          `/pages/customapp/list?formId=${item.F_FormId}`,
+          item,
+          true
+        );
+        return;
+      }
+
+      this.NAV_TO(`/pages/${item.F_Url}/list`);
+    },
+
+    // 点击通知公告的标题
+    noticeClick(item) {
+		console.log(item);
+      this.NAV_TO("/pages/home/notice", item, true);
+    },
+    informClick(titleName) {
+      if (titleName == "通知公告") {
+        this.NAV_TO("/pages/LR_OAModule/list", "", true);
+      }
+    },
+
+    // #ifndef H5
+    // 点击左上角扫码图标，H5 无此功能
+    scanClick() {
+      uni.scanCode({
+        scanType: ["qrCode", "barCode"],
+        success: ({ result, charSet }) => {
+          // 您可以在这里自行定制扫码后的功能
+        },
+      });
+    },
+    // #endif
+
+    // 点击更多功能按钮
+    moreClick(openSearch) {
+      this.NAV_TO(`/pages/home/more${openSearch ? "?search=1" : ""}`);
+    },
+
+    // 点击右上角的消息按钮
+    msgClick() {
+      this.TAB_TO("/pages/msg");
+    },
+  },
+
+  computed: {
+    // 「我的功能」区域按钮列表
+    funcListDisplay() {
+      const { myList, listData } = this;
+      const myFuncList = myList.reduce((list, id) => {
+        if (listData.find((t) => t.F_Id === id)) {
+          return [...list, listData.find((t) => t.F_Id === id)];
+        }
+        return list;
+      }, []);
+
+      return myFuncList;
+    },
+
+    // imgData 数组的长度
+    imgCount() {
+      return this.imgData.length;
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-	.page {
-		background-color: #f3f3f3;
-
-		.header {
-			height: 100rpx;
-			background-color: #0c86d8;
-			display: flex;
-			align-items: center;
-
-			.header-left {
-				flex-grow: 0;
-			}
-
-			.header-mid {
-				flex-grow: 1;
-				background-color: #3d9ee0;
-				line-height: 60rpx;
-				height: 60rpx;
-				font-size: 24rpx;
-				color: #fff;
-				border-radius: 6rpx;
-			}
-
-			.header-right {
-				flex-grow: 0;
-			}
-		}
-
-		.content {
-			background-color: #fff;
-		}
-
-		.function-list {
-			padding-bottom: 0;
-
-			.cu-item {
-				.app-item {
-					border-radius: 50%;
-					height: 45px;
-					width: 45px;
-				}
-
-				&:nth-child(7n + 1)>.app-item {
-					background-color: #62bbff;
-				}
-
-				&:nth-child(7n + 2)>.app-item {
-					background-color: #7bd2ff;
-				}
-
-				&:nth-child(7n + 3)>.app-item {
-					background-color: #ffd761;
-				}
-
-				&:nth-child(7n + 4)>.app-item {
-					background-color: #fe955c;
-				}
-
-				&:nth-child(7n + 5)>.app-item {
-					background-color: #ff6283;
-				}
-
-				&:nth-child(7n + 6)>.app-item {
-					background-color: #60e3f3;
-				}
-
-				&:nth-child(7n)>.app-item {
-					background-color: #acc8fe;
-				}
-			}
-		}
-
-		.function-more-btn {
-			display: inline-block;
-			border: currentColor 1px solid;
-			border-radius: 2px;
-			padding: 10rpx 50rpx;
-		}
-
-		.count-list {
-			&:after {
-				content: '';
-				clear: both;
-				display: table;
-			}
-
-			.count-item-value {
-				color: #0188d2;
-				font-size: 24px;
-			}
-		}
-
-		.chart-list {
-			background-color: #fff;
-			overflow: hidden;
-		}
-	}
+.page {
+  background-color: #f3f3f3;
+
+  .header {
+    height: 100rpx;
+    background-color: #0c86d8;
+    display: flex;
+    align-items: center;
+
+    .header-left {
+      flex-grow: 0;
+    }
+
+    .header-mid {
+      flex-grow: 1;
+      background-color: #3d9ee0;
+      line-height: 60rpx;
+      height: 60rpx;
+      font-size: 24rpx;
+      color: #fff;
+      border-radius: 6rpx;
+    }
+
+    .header-right {
+      flex-grow: 0;
+    }
+  }
+
+  .content {
+    background-color: #fff;
+  }
+
+  .function-list {
+    padding-bottom: 0;
+
+    .cu-item {
+      .app-item {
+        border-radius: 50%;
+        height: 45px;
+        width: 45px;
+      }
+
+      &:nth-child(7n + 1) > .app-item {
+        background-color: #62bbff;
+      }
+
+      &:nth-child(7n + 2) > .app-item {
+        background-color: #7bd2ff;
+      }
+
+      &:nth-child(7n + 3) > .app-item {
+        background-color: #ffd761;
+      }
+
+      &:nth-child(7n + 4) > .app-item {
+        background-color: #fe955c;
+      }
+
+      &:nth-child(7n + 5) > .app-item {
+        background-color: #ff6283;
+      }
+
+      &:nth-child(7n + 6) > .app-item {
+        background-color: #60e3f3;
+      }
+
+      &:nth-child(7n) > .app-item {
+        background-color: #acc8fe;
+      }
+    }
+  }
+
+  .function-more-btn {
+    display: inline-block;
+    border: currentColor 1px solid;
+    border-radius: 2px;
+    padding: 10rpx 50rpx;
+  }
+
+  .count-list {
+    &:after {
+      content: "";
+      clear: both;
+      display: table;
+    }
+
+    .count-item-value {
+      color: #0188d2;
+      font-size: 24px;
+    }
+  }
+
+  .chart-list {
+    background-color: #fff;
+    overflow: hidden;
+  }
+}
 </style>
 
 <style lang="less">
-	#home {
-		width: 750rpx;
-		overflow-x: hidden;
-
-		.function-list .cu-item text[class*='cuIcon'] {
-			margin-top: 0 !important;
-		}
-	}
+#home {
+  width: 750rpx;
+  overflow-x: hidden;
+
+  .function-list .cu-item text[class*="cuIcon"] {
+    margin-top: 0 !important;
+  }
+}
 </style>