feat:首页部分页面
This commit is contained in:
李伊帆
91
src/components/AppTabBar.vue
Normal file
91
src/components/AppTabBar.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
export type TabKey = 'home' | 'case' | 'message' | 'project' | 'personal'
|
||||
|
||||
const props = defineProps<{
|
||||
active: TabKey
|
||||
}>()
|
||||
|
||||
const tabs: Array<{ key: TabKey, label: string, icon: string, path: string }> = [
|
||||
{ key: 'home', label: '首页', icon: '/static/icons/tab-home.svg', path: '/pages/home-index/index' },
|
||||
{ key: 'case', label: '案例库', icon: '/static/icons/tab-case.svg', path: '/pages/case-library/index' },
|
||||
{ key: 'message', label: '消息中心', icon: '/static/icons/tab-message.svg', path: '/pages/message-center/index' },
|
||||
{ key: 'project', label: '项目中心', icon: '/static/icons/tab-project.svg', path: '/pages/project-center/index' },
|
||||
{ key: 'personal', label: '个人中心', icon: '/static/icons/tab-personal.svg', path: '/pages/personal-center/index' },
|
||||
]
|
||||
|
||||
function handleSwitch(path: string, key: TabKey) {
|
||||
if (key === props.active)
|
||||
return
|
||||
uni.redirectTo({ url: path })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="app-tab-bar">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="app-tab-bar__item"
|
||||
@tap="handleSwitch(tab.path, tab.key)"
|
||||
>
|
||||
<image
|
||||
class="app-tab-bar__icon"
|
||||
:class="{ 'app-tab-bar__icon--active': tab.key === active }"
|
||||
:src="tab.icon"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text
|
||||
class="app-tab-bar__label"
|
||||
:class="{ 'app-tab-bar__label--active': tab.key === active }"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.app-tab-bar {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 12rpx 0 calc(12rpx + env(safe-area-inset-bottom));
|
||||
background: $color-bg-page;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.app-tab-bar__item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-tab-bar__icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
opacity: 0.45;
|
||||
|
||||
&--active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app-tab-bar__label {
|
||||
margin-top: 6rpx;
|
||||
font-size: 20rpx;
|
||||
color: $color-text-secondary;
|
||||
|
||||
&--active {
|
||||
color: $color-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
src/hooks/use-greeting.ts
Normal file
9
src/hooks/use-greeting.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export function useGreeting() {
|
||||
const hour = new Date().getHours()
|
||||
|
||||
if (hour < 12)
|
||||
return '上午好'
|
||||
if (hour < 18)
|
||||
return '中午好'
|
||||
return '晚上好'
|
||||
}
|
||||
@@ -42,6 +42,36 @@
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/home-index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/case-library/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/message-center/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/project-center/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personal-center/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { navigateToResultPage } from '@/utils/navigate-result'
|
||||
import LoginInput from './components/LoginInput.vue'
|
||||
|
||||
const phone = ref('')
|
||||
@@ -21,8 +20,8 @@ function handleLogin() {
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 接入登录接口后，在接口返回失败时调用
|
||||
navigateToResultPage('loginFailed')
|
||||
// TODO: 接入登录接口，失败时调用 navigateToResultPage('loginFailed')
|
||||
uni.redirectTo({ url: '/pages/home-index/index' })
|
||||
}
|
||||
|
||||
function handleForgotPassword() {
|
||||
|
||||
@@ -20,6 +20,9 @@ function handleLogin() {
|
||||
uni.showToast({ title: '请输入手机号和验证码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// TODO: 接入登录接口
|
||||
uni.redirectTo({ url: '/pages/home-index/index' })
|
||||
}
|
||||
|
||||
function handlePasswordLogin() {
|
||||
|
||||
41
src/pages/case-library/index.vue
Normal file
41
src/pages/case-library/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import AppTabBar from '@/components/AppTabBar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="placeholder-page">
|
||||
<text class="placeholder-page__title">
|
||||
案例库
|
||||
</text>
|
||||
<text class="placeholder-page__desc">
|
||||
功能开发中
|
||||
</text>
|
||||
<AppTabBar active="case" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.placeholder-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
background: $color-bg-page;
|
||||
}
|
||||
|
||||
.placeholder-page__title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.placeholder-page__desc {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
</style>
|
||||
162
src/pages/home-index/components/ProjectCard.vue
Normal file
162
src/pages/home-index/components/ProjectCard.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import type { ProjectItem } from '@/types/home'
|
||||
|
||||
defineProps<{
|
||||
item: ProjectItem
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="project-card">
|
||||
<view class="project-card__header">
|
||||
<text class="project-card__title">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
<text class="project-card__status">
|
||||
{{ item.status }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="project-card__meta">
|
||||
<text
|
||||
class="project-card__tag"
|
||||
:class="`project-card__tag--${item.tagTheme || 'orange'}`"
|
||||
>
|
||||
{{ item.category }}
|
||||
</text>
|
||||
<text class="project-card__no">
|
||||
项目编号：{{ item.projectNo }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="project-card__progress-row">
|
||||
<text class="project-card__progress-label">
|
||||
进行中
|
||||
</text>
|
||||
<text class="project-card__progress-value">
|
||||
{{ item.progress }}%
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="project-card__progress-bar">
|
||||
<view
|
||||
class="project-card__progress-fill"
|
||||
:style="{ width: `${item.progress}%` }"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="project-card__footer">
|
||||
<text class="project-card__time">
|
||||
更新时间：{{ item.updateTime }}
|
||||
</text>
|
||||
<text class="project-card__detail">
|
||||
查看详情 >
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.project-card {
|
||||
padding: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
background: $color-bg-page;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.project-card__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.project-card__title {
|
||||
flex: 1;
|
||||
padding-right: 16rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.project-card__status {
|
||||
flex-shrink: 0;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.project-card__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.project-card__tag {
|
||||
flex-shrink: 0;
|
||||
padding: 4rpx 12rpx;
|
||||
font-size: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
|
||||
&--orange {
|
||||
color: $color-tag-orange;
|
||||
background: $color-tag-orange-bg;
|
||||
}
|
||||
|
||||
&--peach {
|
||||
color: #e07b4a;
|
||||
background: #fff0e8;
|
||||
}
|
||||
}
|
||||
|
||||
.project-card__no {
|
||||
margin-left: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.project-card__progress-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.project-card__progress-label,
|
||||
.project-card__progress-value {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.project-card__progress-bar {
|
||||
height: 12rpx;
|
||||
margin-top: 12rpx;
|
||||
overflow: hidden;
|
||||
background: #eef2ff;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.project-card__progress-fill {
|
||||
height: 100%;
|
||||
background: $color-primary;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.project-card__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.project-card__time {
|
||||
font-size: 22rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.project-card__detail {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-link;
|
||||
}
|
||||
</style>
|
||||
109
src/pages/home-index/components/ServiceCard.vue
Normal file
109
src/pages/home-index/components/ServiceCard.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import type { ServiceItem } from '@/types/home'
|
||||
|
||||
defineProps<{
|
||||
item: ServiceItem
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="service-card"
|
||||
:class="[
|
||||
`service-card--${item.theme}`,
|
||||
{ 'service-card--with-illus': item.illus },
|
||||
]"
|
||||
>
|
||||
<image
|
||||
v-if="item.illus"
|
||||
class="service-card__illus"
|
||||
:src="item.illus"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="service-card__content">
|
||||
<text class="service-card__title">
|
||||
{{ item.title }}
|
||||
</text>
|
||||
<text class="service-card__desc">
|
||||
{{ item.desc }}
|
||||
</text>
|
||||
<text class="service-card__link">
|
||||
了解详细 >
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.service-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 240rpx;
|
||||
padding: 28rpx 24rpx 24rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--with-illus {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
background: linear-gradient(180deg, #D3E1FC 0%, #FFFFFF 100%);
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: linear-gradient( 180deg, #B7EDEA 0%, #FFFFFF 100%);
|
||||
}
|
||||
|
||||
&--pink {
|
||||
background: linear-gradient( 180deg, #FFECE1 0%, #FFFFFF 100%);
|
||||
}
|
||||
|
||||
&--orange {
|
||||
background: linear-gradient( 180deg, #F7D3C6 0%, #FFFFFF 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.service-card__illus {
|
||||
position: absolute;
|
||||
top: -36rpx;
|
||||
right: -10rpx;
|
||||
z-index: 2;
|
||||
width: 152rpx;
|
||||
height: 152rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.service-card__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.service-card__title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.service-card__desc {
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 1.45;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.service-card--with-illus .service-card__desc {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.service-card__link {
|
||||
margin-top: auto;
|
||||
font-size: 22rpx;
|
||||
color: #2563EB;
|
||||
}
|
||||
</style>
|
||||
462
src/pages/home-index/index.vue
Normal file
462
src/pages/home-index/index.vue
Normal file
@@ -0,0 +1,462 @@
|
||||
<script setup lang="ts">
|
||||
import AppTabBar from '@/components/AppTabBar.vue'
|
||||
import { useGreeting } from '@/hooks/use-greeting'
|
||||
import type { ProjectItem, QuickEntryItem, ServiceItem } from '@/types/home'
|
||||
import headerBg from '@/static/icons/1.png'
|
||||
import softwareIllus from '@/static/icons/software.png'
|
||||
import hardwareIllus from '@/static/icons/hardware.png'
|
||||
import iotIllus from '@/static/icons/iot.png'
|
||||
import productionIllus from '@/static/icons/production.png'
|
||||
import ProjectCard from './components/ProjectCard.vue'
|
||||
import ServiceCard from './components/ServiceCard.vue'
|
||||
|
||||
const greeting = useGreeting()
|
||||
|
||||
const services: ServiceItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: '互联网软件',
|
||||
desc: 'Web/小程序/APP/二次开发/桌面工具等',
|
||||
theme: 'blue',
|
||||
illus: softwareIllus,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '硬件电路',
|
||||
desc: '原理图设计/PCB设计/电气校验等',
|
||||
theme: 'green',
|
||||
illus: hardwareIllus,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '物联网全案',
|
||||
desc: '软硬件开发+云端一体化/定制化开发等',
|
||||
theme: 'pink',
|
||||
illus: iotIllus,
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: '生产制造',
|
||||
desc: 'PCB制版/SMT/整机装配/定制生产等',
|
||||
theme: 'orange',
|
||||
illus: productionIllus,
|
||||
},
|
||||
]
|
||||
|
||||
const quickEntries: QuickEntryItem[] = [
|
||||
{ id: '1', label: '项目中心', icon: '/static/icons/quick-project.png', bgColor: '#E8F0FF' },
|
||||
{ id: '2', label: '快捷提报', icon: '/static/icons/quick-report.png', bgColor: '#E8FAF4' },
|
||||
{ id: '3', label: '在线客服', icon: '/static/icons/quick-service.png', bgColor: '#F3E8FF' },
|
||||
{ id: '4', label: '合同管理', icon: '/static/icons/quick-contract.png', bgColor: '#FEE2E2' },
|
||||
{ id: '5', label: '财务管理', icon: '/static/icons/quick-finance.png', bgColor: '#E0F2FE' },
|
||||
]
|
||||
|
||||
const projects: ProjectItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
title: '社区康养智能服务系统',
|
||||
category: '互联网软件',
|
||||
projectNo: '20260813RJ251545',
|
||||
progress: 65,
|
||||
status: '进行中',
|
||||
updateTime: '2026-8-13 11:04:12',
|
||||
tagTheme: 'orange',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '社区康养智能服务系统',
|
||||
category: '生产制造',
|
||||
projectNo: '20260813RJ251545',
|
||||
progress: 65,
|
||||
status: '进行中',
|
||||
updateTime: '2026-8-13 11:04:12',
|
||||
tagTheme: 'peach',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="home">
|
||||
<view class="home__header">
|
||||
<image
|
||||
class="home__header-bg"
|
||||
:src="headerBg"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="home__header-inner">
|
||||
<view class="home__header-top">
|
||||
<view class="home__brand">
|
||||
<image
|
||||
class="home__logo"
|
||||
src="/static/icons/logos.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="home__brand-name">
|
||||
虫子智造研发一体化平台
|
||||
</text>
|
||||
</view>
|
||||
<view class="home__message-btn">
|
||||
<image
|
||||
class="home__message-icon"
|
||||
src="/static/icons/icon-message.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="home__greeting-row">
|
||||
<text class="home__greeting">
|
||||
{{ greeting }}
|
||||
</text>
|
||||
<view class="home__hi-badge">
|
||||
<image
|
||||
class="home__hi-icon"
|
||||
src="/static/icons/hi.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<text class="home__subtitle">
|
||||
今天有2个项目正在进行
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
class="home__body"
|
||||
scroll-y
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view class="home__content">
|
||||
<view class="home__section">
|
||||
<text class="home__section-title">
|
||||
业务服务
|
||||
</text>
|
||||
<view class="home__service-grid">
|
||||
<ServiceCard
|
||||
v-for="item in services"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="home__sections">
|
||||
<view class="home__section-header">
|
||||
<text class="home__section-title">
|
||||
快捷入口
|
||||
</text>
|
||||
<text class="home__section-action">
|
||||
编辑
|
||||
</text>
|
||||
</view>
|
||||
<view class="home__quick-row">
|
||||
<view
|
||||
v-for="entry in quickEntries"
|
||||
:key="entry.id"
|
||||
class="home__quick-item"
|
||||
>
|
||||
<image
|
||||
class="home__quick-icon"
|
||||
:src="entry.icon"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text class="home__quick-label">
|
||||
{{ entry.label }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="home__section home__section--last">
|
||||
<view class="home__section-header">
|
||||
<text class="home__section-title">
|
||||
在办项目
|
||||
</text>
|
||||
<text class="home__section-action">
|
||||
查看全部
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="home__stats-row">
|
||||
<view class="home__stat-card home__stat-card--blue">
|
||||
<text class="home__stat-value">
|
||||
3 个项目
|
||||
</text>
|
||||
<text class="home__stat-label">
|
||||
进行中
|
||||
</text>
|
||||
</view>
|
||||
<view class="home__stat-card home__stat-card--orange">
|
||||
<text class="home__stat-value">
|
||||
3 项待办
|
||||
</text>
|
||||
<text class="home__stat-label">
|
||||
待您处理
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text class="home__recent-title">
|
||||
最近更新
|
||||
</text>
|
||||
|
||||
<ProjectCard
|
||||
v-for="item in projects"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<AppTabBar active="home" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: $color-bg-section;
|
||||
}
|
||||
|
||||
.home__header {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
background: $color-home-header;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.home__header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.home__header-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: calc(var(--status-bar-height, 44px) + 16rpx) 32rpx 48rpx;
|
||||
}
|
||||
|
||||
.home__header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top:85rpx
|
||||
}
|
||||
|
||||
.home__brand {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home__logo {
|
||||
flex-shrink: 0;
|
||||
width: 76.34rpx;
|
||||
height: 76.34rpx;
|
||||
padding: 8rpx;
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home__brand-name {
|
||||
margin-left: 16rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home__message-btn {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-left: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.home__message-icon {
|
||||
width: 57.25rpx;
|
||||
height: 57.25rpx;
|
||||
}
|
||||
|
||||
.home__greeting-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.home__greeting {
|
||||
font-size: 52rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.home__hi-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45.8rpx;
|
||||
height: 45.8rpx;
|
||||
margin-left: 16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.home__hi-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.home__subtitle {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.home__body {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.home__content {
|
||||
min-height: 100%;
|
||||
margin-top: 24rpx;
|
||||
padding: 20rpx 20rpx calc(140rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.home__section {
|
||||
margin-bottom: 20rpx;
|
||||
height: 600rpx;
|
||||
width: 711.83rpx;
|
||||
background: $color-bg-page;
|
||||
border-radius: 20rpx;
|
||||
padding-top: 20rpx
|
||||
}
|
||||
|
||||
.home__sections {
|
||||
margin-bottom: 20rpx;
|
||||
height: 210rpx;
|
||||
width: 711.83rpx;
|
||||
background: $color-bg-page;
|
||||
border-radius: 20rpx;
|
||||
padding-top: 20rpx
|
||||
}
|
||||
|
||||
.home__section--last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.home__section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.home__section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: $color-text-primary;
|
||||
margin-left: 30rpx;
|
||||
// margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.home__section-action {
|
||||
font-size: 26rpx;
|
||||
color: #666666 ;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.home__service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
margin-top: 24rpx;
|
||||
padding: 24rpx 20rpx 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.home__quick-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.home__quick-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home__quick-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.home__quick-label {
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: $color-text-primary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home__stats-row {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.home__stat-card {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
padding: 28rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
&--blue {
|
||||
background: $color-primary-light;
|
||||
}
|
||||
|
||||
&--orange {
|
||||
background: $color-stat-orange-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.home__stat-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.home__stat-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.home__recent-title {
|
||||
display: block;
|
||||
margin-top: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
</style>
|
||||
41
src/pages/message-center/index.vue
Normal file
41
src/pages/message-center/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import AppTabBar from '@/components/AppTabBar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="placeholder-page">
|
||||
<text class="placeholder-page__title">
|
||||
消息中心
|
||||
</text>
|
||||
<text class="placeholder-page__desc">
|
||||
功能开发中
|
||||
</text>
|
||||
<AppTabBar active="message" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.placeholder-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
background: $color-bg-page;
|
||||
}
|
||||
|
||||
.placeholder-page__title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.placeholder-page__desc {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
</style>
|
||||
41
src/pages/personal-center/index.vue
Normal file
41
src/pages/personal-center/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import AppTabBar from '@/components/AppTabBar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="placeholder-page">
|
||||
<text class="placeholder-page__title">
|
||||
个人中心
|
||||
</text>
|
||||
<text class="placeholder-page__desc">
|
||||
功能开发中
|
||||
</text>
|
||||
<AppTabBar active="personal" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.placeholder-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
background: $color-bg-page;
|
||||
}
|
||||
|
||||
.placeholder-page__title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.placeholder-page__desc {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
</style>
|
||||
41
src/pages/project-center/index.vue
Normal file
41
src/pages/project-center/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import AppTabBar from '@/components/AppTabBar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="placeholder-page">
|
||||
<text class="placeholder-page__title">
|
||||
项目中心
|
||||
</text>
|
||||
<text class="placeholder-page__desc">
|
||||
功能开发中
|
||||
</text>
|
||||
<AppTabBar active="project" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.placeholder-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
background: $color-bg-page;
|
||||
}
|
||||
|
||||
.placeholder-page__title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $color-text-primary;
|
||||
}
|
||||
|
||||
.placeholder-page__desc {
|
||||
margin-top: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
</style>
|
||||
BIN
src/static/icons/1.png
Normal file
BIN
src/static/icons/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/static/icons/hardware.png
Normal file
BIN
src/static/icons/hardware.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
src/static/icons/hi.png
Normal file
BIN
src/static/icons/hi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
BIN
src/static/icons/icon-message.png
Normal file
BIN
src/static/icons/icon-message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
BIN
src/static/icons/iot.png
Normal file
BIN
src/static/icons/iot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/static/icons/logos.png
Normal file
BIN
src/static/icons/logos.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/static/icons/production.png
Normal file
BIN
src/static/icons/production.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/static/icons/quick-contract.png
Normal file
BIN
src/static/icons/quick-contract.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/static/icons/quick-finance.png
Normal file
BIN
src/static/icons/quick-finance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/static/icons/quick-project.png
Normal file
BIN
src/static/icons/quick-project.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/static/icons/quick-report.png
Normal file
BIN
src/static/icons/quick-report.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/static/icons/quick-service.png
Normal file
BIN
src/static/icons/quick-service.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/static/icons/software.png
Normal file
BIN
src/static/icons/software.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
6
src/static/icons/tab-case.svg
Normal file
6
src/static/icons/tab-case.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="4" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
|
||||
<rect x="13" y="4" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
|
||||
<rect x="4" y="13" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
|
||||
<rect x="13" y="13" width="7" height="7" rx="1.5" stroke="#999999" stroke-width="1.8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 459 B |
4
src/static/icons/tab-home.svg
Normal file
4
src/static/icons/tab-home.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10.5L12 4L20 10.5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V10.5Z" stroke="#2563EB" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
<path d="M9 20V13H15V20" stroke="#2563EB" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
3
src/static/icons/tab-message.svg
Normal file
3
src/static/icons/tab-message.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 6H19C19.5523 6 20 6.44772 20 7V15C20 15.5523 19.5523 16 19 16H9L5 19V7C5 6.44772 5.44772 6 6 6H5Z" stroke="#999999" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 278 B |
4
src/static/icons/tab-personal.svg
Normal file
4
src/static/icons/tab-personal.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="8" r="4" stroke="#999999" stroke-width="1.8"/>
|
||||
<path d="M5 19C5.67157 16.7909 8.13401 15 12 15C15.866 15 18.3284 16.7909 19 19" stroke="#999999" stroke-width="1.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 316 B |
3
src/static/icons/tab-project.svg
Normal file
3
src/static/icons/tab-project.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 7C5 5.89543 5.89543 5 7 5H10L12 7H17C18.1046 7 19 7.89543 19 9V17C19 18.1046 18.1046 19 17 19H7C5.89543 19 5 18.1046 5 17V7Z" stroke="#999999" stroke-width="1.8" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 305 B |
@@ -13,3 +13,10 @@ $color-bg-input: #f2f3f5;
|
||||
$color-splash-gradient-start: #f0f7ff;
|
||||
$color-splash-gradient-end: #deedff;
|
||||
$color-splash-circle: rgba(180, 210, 255, 0.35);
|
||||
|
||||
$color-home-header: #2563EB;
|
||||
$color-bg-section: #f5f6f8;
|
||||
$color-tag-orange: #ff8a4c;
|
||||
$color-tag-orange-bg: #fff3eb;
|
||||
$color-stat-orange: #ff9a3d;
|
||||
$color-stat-orange-bg: #fff7ed;
|
||||
|
||||
25
src/types/home.ts
Normal file
25
src/types/home.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
export interface ServiceItem {
|
||||
id: string
|
||||
title: string
|
||||
desc: string
|
||||
theme: 'blue' | 'green' | 'pink' | 'orange'
|
||||
illus?: string
|
||||
}
|
||||
|
||||
export interface QuickEntryItem {
|
||||
id: string
|
||||
label: string
|
||||
icon: string
|
||||
bgColor: string
|
||||
}
|
||||
|
||||
export interface ProjectItem {
|
||||
id: string
|
||||
title: string
|
||||
category: string
|
||||
projectNo: string
|
||||
progress: number
|
||||
status: string
|
||||
updateTime: string
|
||||
tagTheme?: 'orange' | 'peach'
|
||||
}
|
||||
Reference in New Issue
Block a user