预算绩效申报临时首页

src/components/Breadcrumb/index.vue

@@ -32,18 +32,18 @@ export default {
       let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
       const first = matched[0]
 
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: '系统首页' }}].concat(matched)
+      if (!this.isHome(first)) {
+        matched = [{ path: '/welcome', meta: { title: '预算申报首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
     },
-    isDashboard(route) {
+    isHome(route) {
       const name = route && route.name
       if (!name) {
         return false
       }
-      return name.trim().toLocaleLowerCase() === '系统首页'.toLocaleLowerCase()
+      return name.trim().toLocaleLowerCase() === '预算申报首页'.toLocaleLowerCase()
     },
     pathCompile(path) {
       // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561

src/router/index.js

@@ -56,11 +56,20 @@ export const constantRoutes = [{
   {
     path: '/',
     component: Layout,
-    redirect: '/dashboard',
+    redirect: '/welcome',
     children: [{
+      path: 'welcome',
+      name: '预算申报首页',
+      component: () => import('@/views/welcome/index'),
+      meta: {
+        title: '预算申报首页',
+        icon: 'dashboard'
+      }
+    }, {
       path: 'dashboard',
       name: '系统首页',
       component: () => import('@/views/dashboard/index'),
+      hidden: true,
       meta: {
         title: '系统首页',
         icon: 'dashboard'

src/views/welcome/index.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="welcome-page">
+    <el-card class="welcome-card" shadow="never">
+      <div class="welcome-card__content">
+        <div class="welcome-card__icon">
+          <i class="el-icon-document-checked" />
+        </div>
+        <div>
+          <h1>预算绩效申报</h1>
+          <p>{{ greeting }}，欢迎使用预算绩效申报系统。</p>
+          <p class="welcome-card__description">
+            本系统用于预算年度管理、牵头科室汇总、分管领导审核和执行科室填报。
+            请从左侧菜单进入您有权限使用的功能。
+          </p>
+        </div>
+      </div>
+    </el-card>
+
+    <section class="guide-section" aria-labelledby="process-title">
+      <div class="section-title">
+        <h2 id="process-title">申报流程</h2>
+        <span>页面功能将根据您的权限显示</span>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col
+          v-for="item in processItems"
+          :key="item.step"
+          :xs="24"
+          :sm="12"
+          :lg="6"
+        >
+          <el-card class="process-card" shadow="hover">
+            <div class="process-card__header">
+              <span class="process-card__step">{{ item.step }}</span>
+              <i :class="item.icon" />
+            </div>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.description }}</p>
+          </el-card>
+        </el-col>
+      </el-row>
+    </section>
+
+    <el-alert
+      class="usage-notice"
+      title="使用说明"
+      type="info"
+      :closable="false"
+      show-icon
+    >
+      <div slot="default">
+        金额单位统一为万元，保留小数点后 4 位。如未看到所需功能，请联系系统管理员确认角色权限。
+      </div>
+    </el-alert>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'BudgetReportingWelcome',
+  data() {
+    return {
+      processItems: [
+        {
+          step: '01',
+          title: '预算年度管理',
+          description: '维护申报年度、年度预算总额及申报阶段。',
+          icon: 'el-icon-date'
+        },
+        {
+          step: '02',
+          title: '牵头科室操作',
+          description: '汇总申报内容，并按业务要求组织填报。',
+          icon: 'el-icon-s-cooperation'
+        },
+        {
+          step: '03',
+          title: '分管领导审核',
+          description: '审核科室申报内容，按流程通过或退回。',
+          icon: 'el-icon-s-check'
+        },
+        {
+          step: '04',
+          title: '执行科室操作',
+          description: '完成预算分解、内容填报与提交。',
+          icon: 'el-icon-s-order'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['name']),
+    greeting() {
+      return this.name ? `${this.name}` : '您好'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.welcome-page {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #eff2f9;
+}
+
+.welcome-card {
+  border: 0;
+  border-radius: 4px;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    padding: 18px 12px;
+  }
+
+  &__icon {
+    display: flex;
+    flex: 0 0 68px;
+    align-items: center;
+    justify-content: center;
+    width: 68px;
+    height: 68px;
+    margin-right: 24px;
+    border-radius: 50%;
+    color: #fff;
+    background: #338de3;
+    font-size: 32px;
+  }
+
+  h1 {
+    margin: 0 0 12px;
+    color: #303133;
+    font-size: 26px;
+    font-weight: 600;
+  }
+
+  p {
+    margin: 0;
+    color: #606266;
+    line-height: 1.8;
+  }
+
+  &__description {
+    margin-top: 4px !important;
+  }
+}
+
+.guide-section {
+  margin-top: 22px;
+}
+
+.section-title {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 14px;
+
+  h2 {
+    margin: 0;
+    color: #303133;
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  span {
+    color: #909399;
+    font-size: 13px;
+  }
+}
+
+.process-card {
+  min-height: 190px;
+  margin-bottom: 20px;
+  border: 0;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #338de3;
+    font-size: 26px;
+  }
+
+  &__step {
+    color: #c0c4cc;
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  h3 {
+    margin: 22px 0 10px;
+    color: #303133;
+    font-size: 17px;
+    font-weight: 600;
+  }
+
+  p {
+    margin: 0;
+    color: #606266;
+    font-size: 14px;
+    line-height: 1.8;
+  }
+}
+
+.usage-notice {
+  margin-top: 2px;
+}
+
+@media (max-width: 768px) {
+  .welcome-page {
+    padding: 14px;
+  }
+
+  .welcome-card {
+    &__content {
+      align-items: flex-start;
+      padding: 8px 0;
+    }
+
+    &__icon {
+      flex-basis: 52px;
+      width: 52px;
+      height: 52px;
+      margin-right: 14px;
+      font-size: 24px;
+    }
+
+    h1 {
+      font-size: 21px;
+    }
+  }
+
+  .section-title {
+    display: block;
+
+    span {
+      display: block;
+      margin-top: 6px;
+    }
+  }
+}
+</style>