zjugis_OA/client_h5/src/pages/home/index.vue

<script setup lang="ts">
import { ref } from 'vue'
import { getAssetsURI } from '@/utils/common';

const userName = ref<String>('测试用户')

interface MenuItem {
  title: string
  corner?: number
  icon: string
}
const navMenus: MenuItem[] = [
  {
    title: '办件中心',
    corner: 0,
    icon: '../assets/images/bjzx_icon.png'
  },{
    title: '日志填写',
    corner: 0,
    icon: '../assets/images/rztx_icon.png'
  },{
    title: '我的日志',
    corner: 0,
    icon: '../assets/images/wdrz_icon.png'
  },{
    title: '我的消息',
    corner: 0,
    icon: '../assets/images/wdxx_icon.png'
  }
]

const processMenus: MenuItem[] = [
  {
    title: '请假申请',
    corner: 0,
    icon: '../assets/images/qjsq_icon.png'
  },{
    title: '出差申请',
    corner: 0,
    icon: '../assets/images/ccsq_icon.png'
  },{
    title: '考情说明条',
    corner: 0,
    icon: '../assets/images/kqsmt_icon.png'
  },{
    title: '借款申请',
    corner: 0,
    icon: '../assets/images/jksq_icon.png'
  }
]

const personMenus: MenuItem[] = [
  {
    title: '我的考勤',
    corner: 0,
    icon: '../assets/images/wdkq_icon.png'
  },{
    title: '我的资产',
    corner: 0,
    icon: '../assets/images/wdzc_icon.png'
  },{
    title: '学习中心',
    corner: 0,
    icon: '../assets/images/xxzx_icon.png'
  },{
    title: '通知公告',
    corner: 0,
    icon: '../assets/images/tzgg_icon.png'
  }
]
</script>

<template>
  <div class="home_box">
    <div class="header">
      <div class="nav">
        <div class="login_info">
          <img src="@/assets/images/user_log.jpg">
          <span>{{ userName }}</span>
        </div>
      </div>
      <ul>
        <li v-for="(item,index) in navMenus" :key="index">
          <img :src="getAssetsURI(item['icon'])" />
          <p class="title">{{ item['title'] }}</p>
          <span class="corner">{{ item['corner'] }}</span>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="card">
        <p class="card_title">常用流程</p>
        <ul>
          <li v-for="(item,index) in processMenus" :key="index">
            <span class="title">{{ item['title'] }}</span>
            <img :src="getAssetsURI(item['icon'])" />
          </li>
        </ul>
      </div>
      <div class="item">
        <p class="card_title">个人中心</p>
        <ul>
          <li v-for="(item,index) in personMenus" :key="index">
            <img :src="getAssetsURI(item['icon'])" />
            <span class="title">{{ item['title'] }}</span>
            <span class="corner">{{ item['corner'] }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import './index.scss';
</style>