314 lines
7.2 KiB
Plaintext
314 lines
7.2 KiB
Plaintext
<template>
|
||
<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="" :xloading="true">
|
||
|
||
<!-- ============ 顶部 hero（日常学习总览） ============ -->
|
||
<view class="tr-hero">
|
||
<view class="tr-hero-c1"></view>
|
||
<view class="tr-hero-c2"></view>
|
||
|
||
<view class="tr-hero-row">
|
||
<view class="hr-row hr-flex1">
|
||
<view class="tr-avt">
|
||
<text class="tr-avt-t">{{ user.avatar }}</text>
|
||
</view>
|
||
<view class="hr-flex1">
|
||
<text class="tr-hi">{{ user.name }} · {{ user.title }}</text>
|
||
<text class="tr-sub">{{ user.dept }} · 工号 {{ user.jobNo }} · 培训等级 B</text>
|
||
</view>
|
||
</view>
|
||
<view class="tr-bell" @click="goMsg">
|
||
<x-icon name="notification-3-line" color="#FFFFFF" font-size="17"></x-icon>
|
||
<view class="tr-bell-dot"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tr-statbar">
|
||
<view class="tr-sb-cell">
|
||
<view class="hr-row tr-sb-bwrap">
|
||
<text class="tr-sb-b">3.5</text>
|
||
<text class="tr-sb-u">h</text>
|
||
</view>
|
||
<text class="tr-sb-s">本周学时</text>
|
||
</view>
|
||
<view class="tr-sb-sep"></view>
|
||
<view class="tr-sb-cell">
|
||
<view class="hr-row tr-sb-bwrap">
|
||
<text class="tr-sb-b">12</text>
|
||
<text class="tr-sb-u">门</text>
|
||
</view>
|
||
<text class="tr-sb-s">已完成课程</text>
|
||
</view>
|
||
<view class="tr-sb-sep"></view>
|
||
<view class="tr-sb-cell">
|
||
<view class="hr-row tr-sb-bwrap">
|
||
<text class="tr-sb-b">3</text>
|
||
<text class="tr-sb-u">张</text>
|
||
</view>
|
||
<text class="tr-sb-s">有效证书</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="hr-body">
|
||
|
||
<!-- ============ 待办任务 ============ -->
|
||
<hr-sec title="待办任务" more="全部 ›" first @more-click="onTodoAll"></hr-sec>
|
||
<hr-card variant="list">
|
||
<hr-lrow v-for="(t, i) in todos" :key="i" :icon="t.icon" :theme="t.iconTheme" :title="t.title"
|
||
:sub="t.sub" :value="t.action" value-theme="pri" :value-bold="true" :is-last="i == todos.length - 1"
|
||
@click="onTodoClick(i)"></hr-lrow>
|
||
</hr-card>
|
||
|
||
<!-- ============ 学习动态 ============ -->
|
||
<hr-sec title="学习动态" more="全部 ›" @more-click="onActivityAll"></hr-sec>
|
||
<hr-card variant="list">
|
||
<hr-lrow v-for="(a, i) in acts" :key="i" :icon="a.icon" :theme="a.iconTheme" :title="a.title"
|
||
:sub="a.sub" value="›" :is-last="i == acts.length - 1" @click="onActivityClick(i)"></hr-lrow>
|
||
</hr-card>
|
||
|
||
<!-- ============ 工具箱 ============ -->
|
||
<hr-sec title="工具箱"></hr-sec>
|
||
<view class="tr-quick">
|
||
<view v-for="(q, i) in tools" :key="i" class="tr-q" :class="i == tools.length - 1 ? 'tr-q-last' : ''"
|
||
@click="onToolClick(i)">
|
||
<view class="tr-q-ic" :style="{ backgroundColor: q.iconBg }">
|
||
<x-icon :name="q.icon" :color="q.iconColor" font-size="36rpx"></x-icon>
|
||
</view>
|
||
<text class="tr-q-t">{{ q.name }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="height:14px"></view>
|
||
</view>
|
||
|
||
<template v-slot:tabbar>
|
||
<hr-tabbar :active="0"></hr-tabbar>
|
||
</template>
|
||
</hr-page>
|
||
</template>
|
||
|
||
<script lang="uts" setup>
|
||
import { ref } from 'vue'
|
||
|
||
import { hrSession } from '@/utils/role.uts'
|
||
import { navTo } from '@/utils/nav.uts'
|
||
import { todoTasks, activities, toolBox } from '@/mock/index.uts'
|
||
import { HrTodoTask, HrActivity, HrToolBox } from '@/mock/types.uts'
|
||
|
||
/**
|
||
* s01 学员端首页（日常态 · 纯学习）
|
||
* 设计约束：首页只承载日常学习（学习总览 / 待办任务 / 学习动态 / 工具箱），
|
||
* 不含任何现场作业入口 —— 现场作业从「事件」Tab 进入。
|
||
*/
|
||
const user = hrSession
|
||
const todos = ref<HrTodoTask[]>(todoTasks)
|
||
const acts = ref<HrActivity[]>(activities)
|
||
const tools = ref<HrToolBox[]>(toolBox)
|
||
|
||
function goMsg() : void {
|
||
navTo('/pages/message/list')
|
||
}
|
||
|
||
function onTodoAll() : void {
|
||
navTo('/pages/course/library')
|
||
}
|
||
|
||
function onTodoClick(i : number) : void {
|
||
if (i == 0) {
|
||
navTo('/pages/course/subject')
|
||
} else {
|
||
navTo('/pages/study/exams')
|
||
}
|
||
}
|
||
|
||
function onActivityAll() : void {
|
||
navTo('/pages/study/center')
|
||
}
|
||
|
||
function onActivityClick(i : number) : void {
|
||
navTo('/pages/study/center')
|
||
}
|
||
|
||
function onToolClick(i : number) : void {
|
||
if (i == 0) { navTo('/pages/course/library'); return }
|
||
if (i == 1) { navTo('/pages/study/exams'); return }
|
||
if (i == 2) { navTo('/pages/study/certificates'); return }
|
||
navTo('/pages/study/wrong-book')
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* ---------- hero ---------- */
|
||
.tr-hero {
|
||
background-image: linear-gradient(to bottom right, #2563EB, #1E40AF);
|
||
padding: 28rpx 32rpx 44rpx 32rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.tr-hero-c1 {
|
||
position: absolute;
|
||
right: -80rpx;
|
||
top: -100rpx;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
border-radius: 150rpx;
|
||
background-color: rgba(255, 255, 255, 0.10);
|
||
}
|
||
|
||
.tr-hero-c2 {
|
||
position: absolute;
|
||
right: 64rpx;
|
||
bottom: -112rpx;
|
||
width: 192rpx;
|
||
height: 192rpx;
|
||
border-radius: 96rpx;
|
||
background-color: rgba(255, 255, 255, 0.07);
|
||
}
|
||
|
||
.tr-hero-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tr-avt {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
background-color: rgba(255, 255, 255, 0.22);
|
||
border: 3rpx solid rgba(255, 255, 255, 0.5);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 22rpx;
|
||
}
|
||
|
||
.tr-avt-t {
|
||
font-size: 35.8rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.tr-hi {
|
||
font-size: 40.4rpx;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.tr-sub {
|
||
font-size: 25.8rpx;
|
||
color: rgba(255, 255, 255, 0.82);
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.tr-bell {
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
border-radius: 34rpx;
|
||
background-color: rgba(255, 255, 255, 0.16);
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tr-bell-dot {
|
||
position: absolute;
|
||
margin-left: 28rpx;
|
||
margin-top: -24rpx;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
border-radius: 8rpx;
|
||
background-color: #DC2626;
|
||
}
|
||
|
||
.tr-statbar {
|
||
display: flex;
|
||
flex-direction: row;
|
||
background-color: #FFFFFF;
|
||
border-radius: 28rpx;
|
||
margin-top: 32rpx;
|
||
padding: 28rpx 8rpx 28rpx 8rpx;
|
||
box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.10);
|
||
}
|
||
|
||
.tr-sb-cell {
|
||
flex: 1;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.tr-sb-bwrap {
|
||
justify-content: center;
|
||
}
|
||
|
||
.tr-sb-b {
|
||
font-size: 44.8rpx;
|
||
font-weight: bold;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.tr-sb-u {
|
||
font-size: 24.6rpx;
|
||
color: #6B7280;
|
||
margin-left: 2rpx;
|
||
}
|
||
|
||
.tr-sb-s {
|
||
font-size: 24.6rpx;
|
||
color: #6B7280;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.tr-sb-sep {
|
||
width: 2rpx;
|
||
height: 64rpx;
|
||
margin-top: 4rpx;
|
||
background-color: #E5E7EB;
|
||
}
|
||
|
||
/* ---------- 工具箱 ---------- */
|
||
.tr-quick {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.tr-q {
|
||
flex: 1;
|
||
background-color: #FFFFFF;
|
||
border: 2rpx solid #E5E7EB;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx 4rpx 20rpx 4rpx;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.tr-q-last {
|
||
margin-right: 0rpx;
|
||
}
|
||
|
||
.tr-q-ic {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 22rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
|
||
.tr-q-ic-t {
|
||
font-size: 35.8rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tr-q-t {
|
||
font-size: 24.6rpx;
|
||
color: #1F2937;
|
||
}
|
||
</style> |