feat 项目页样式

This commit is contained in:
Ironsp
2026-09-11 09:27:10 +08:00
parent 9d39a48117
commit aba6d4c09e
7 changed files with 376 additions and 63 deletions

5
.gitignore vendored
View File

@@ -12,6 +12,7 @@ node_modules
dist dist
*.local *.local
.opencode .opencode
.omo
# Editor directories and files # Editor directories and files
.idea .idea
@@ -20,7 +21,3 @@ dist
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
# unh
pages.json
manifest.json

View File

@@ -93,4 +93,3 @@ Road_roller/
| `src/utils` | 工具函数,自动导入 | | `src/utils` | 工具函数,自动导入 |
### 功能模块 ### 功能模块
标题字体是22px

View File

@@ -1,39 +1,96 @@
<script setup lang="ts"> <script setup lang="ts">
defineProps<{ defineProps<{
projectName: string projectName: string
status: string stakeRange: string
tags: string[] status: number
time: string workTime: string
trigger: string compactArea: string
rollerCount: string
}>() }>()
function getStatusText(status: number) {
const map: Record<number, string> = {
0: '作业中',
1: '暂停中',
2: '已结束',
}
return map[status] || '未知'
}
function getStatusColor(status: number) {
const map: Record<number, string> = {
0: '#52c41a',
1: '#faad14',
2: '#999999',
}
return map[status] || '#999999'
}
</script> </script>
<template> <template>
<view class="project-item"> <view class="project-item">
<!-- 头部:图标 + 项目名 + 状态 -->
<view class="item-header"> <view class="item-header">
<view class="header-left">
<image class="project-icon" src="/static/machine.png" mode="aspectFit" />
<view class="header-info">
<text class="project-name"> <text class="project-name">
{{ projectName }} {{ projectName }}
</text> </text>
<text class="status"> <text class="stake-range">
{{ status }} {{ stakeRange }}
</text> </text>
</view> </view>
</view>
<view class="tags"> <view class="status-badge">
<view v-for="(tag, index) in tags" :key="index" class="tag"> <view class="status-dot" :style="{ backgroundColor: getStatusColor(status) }" />
<text class="tag-text"> <text class="status-text" :style="{ color: getStatusColor(status) }">
{{ tag }} {{ getStatusText(status) }}
</text> </text>
</view> </view>
</view> </view>
<text class="time"> <!-- 数据统计 -->
{{ time }} <view class="stats-row">
<view class="stat-item">
<text class="stat-label">
作业时长
</text> </text>
<text class="trigger"> <text class="stat-value">
{{ trigger }} {{ workTime }}
</text> </text>
</view> </view>
<view class="stat-item">
<text class="stat-label">
压实面积
</text>
<text class="stat-value">
{{ compactArea }}
</text>
</view>
<view class="stat-item">
<text class="stat-label">
碾压遍数
</text>
<text class="stat-value">
{{ rollerCount }}
</text>
</view>
</view>
<!-- 操作按钮 -->
<view v-if="status === 0 || status === 1" class="btn-row">
<wd-button size="large" type="primary" round>
开始项目
</wd-button>
<wd-button size="large" type="warning" round>
暂停项目
</wd-button>
<wd-button size="large" type="danger" round>
结束项目
</wd-button>
</view>
</view>
</template> </template>
<style scoped> <style scoped>
@@ -47,49 +104,85 @@ defineProps<{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 12px; margin-bottom: 16px;
}
.header-left {
display: flex;
align-items: center;
gap: 10px;
}
.project-icon {
width: 40px;
height: 40px;
border-radius: 8px;
}
.header-info {
display: flex;
flex-direction: column;
} }
.project-name { .project-name {
font-size: 22px; font-size: 40rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
} }
.status { .stake-range {
font-size: 32rpx;
color: #999;
}
.status-badge {
display: flex;
align-items: center;
gap: 6px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #52c41a;
}
.status-text {
font-size: 14px; font-size: 14px;
padding: 4px 12px;
border-radius: 12px;
background-color: #f6ffed;
color: #52c41a; color: #52c41a;
} }
.tags { .stats-row {
display: flex; display: flex;
gap: 8px; justify-content: space-around;
margin-bottom: 12px; padding: 16px 0;
border-top: 1px solid #f5f5f5;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 16px;
} }
.tag { .stat-item {
background-color: #fff1f0; display: flex;
border-radius: 8px; flex-direction: column;
padding: 4px 12px; align-items: center;
} }
.tag-text { .stat-label {
font-size: 14px; font-size: 40rpx;
color: #ff4d4f; color: #999;
margin-bottom: 4px;
} }
.time { .stat-value {
font-size: 18px; font-size: 40rpx;
color: #666; font-weight: bold;
display: block; color: #333;
margin-bottom: 8px;
} }
.trigger { .btn-row {
font-size: 18px; display: flex;
color: #666; justify-content: flex-end;
gap: 60rpx;
} }
</style> </style>

76
src/manifest.json Normal file
View File

@@ -0,0 +1,76 @@
{
"name": "Road_roller",
"appid": "__UNI__BA80270",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"modules": {
"Bluetooth": {},
"SQLite": {}
},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
"ios": {},
"sdkConfigs": {}
},
"screenOrientation": [
"landscape-primary"
]
},
"quickapp": {},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true,
"darkmode": true,
"themeLocation": "theme.json"
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics": {
"enable": false
},
"vueVersion": "3",
"h5": {
"darkmode": true,
"themeLocation": "theme.json"
}
}

145
src/pages.json Normal file
View File

@@ -0,0 +1,145 @@
{
"easycom": {
"autoscan": true,
"custom": {
"^wd-(.*)": "@wot-ui/ui/components/wd-$1/wd-$1.vue",
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"globalStyle": {
"backgroundColor": "@bgColor",
"backgroundColorBottom": "@bgColorBottom",
"backgroundColorTop": "@bgColorTop",
"backgroundTextStyle": "@bgTxtStyle",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Road-Roller"
},
"pages": [
// GENERATED BY UNI-PAGES, PLATFORM: H5 || APP
{
"path": "pages/Ahome/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/bluetooth/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/heatmap/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/message/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/project/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/report/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/rtk/index",
"type": "page",
"layout": false,
"style": {
"navigationBarTitleText": "RTK轨迹"
}
},
{
"path": "pages/settings/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/warning/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/work/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/report/detail/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/warning/detail/index",
"type": "page",
"layout": false,
"style": {
"navigationStyle": "custom"
}
}
],
"subPackages": [],
"tabBar": {
"backgroundColor": "@tabBgColor",
"borderStyle": "@tabBorderStyle",
"color": "@tabFontColor",
"selectedColor": "@tabSelectedColor",
"list": [
// GENERATED BY UNI-PAGES, PLATFORM: H5 || APP
{
"pagePath": "pages/Ahome/index",
"text": "首页",
"iconPath": "static/home.png",
"selectedIconPath": "static/home1.png"
},
{
"pagePath": "pages/work/index",
"text": "工作",
"iconPath": "static/work.png",
"selectedIconPath": "static/work1.png"
},
{
"pagePath": "pages/report/index",
"text": "报告",
"iconPath": "static/report.png",
"selectedIconPath": "static/report1.png"
}
]
}
}

View File

@@ -13,17 +13,19 @@ const tabs = ['全部', '进行中', '已结束']
const projects = [ const projects = [
{ {
projectName: '徐工XS65H #01', projectName: '徐工XS65H #01',
status: '进行中', stakeRange: 'K1+200-K1+800',
tags: ['定位异常', '警告'], status: 0,
time: '14:10:04·已持续5分30秒', workTime: '8h',
trigger: '触发阈值:RTK信号弱,精度下降', compactArea: '28.5m²',
rollerCount: '10遍',
}, },
{ {
projectName: '徐工XS65H #01', projectName: '徐工XS65H #02',
status: '进行中', stakeRange: 'K2+100-K2+600',
tags: ['定位异常', '警告'], status: 2,
time: '14:10:04·已持续5分30秒', workTime: '5h',
trigger: '触发阈值:RTK信号弱,精度下降', compactArea: '15.2m²',
rollerCount: '6遍',
}, },
] ]
@@ -65,10 +67,11 @@ function handleCreate() {
v-for="(item, index) in projects" v-for="(item, index) in projects"
:key="index" :key="index"
:project-name="item.projectName" :project-name="item.projectName"
:stake-range="item.stakeRange"
:status="item.status" :status="item.status"
:tags="item.tags" :work-time="item.workTime"
:time="item.time" :compact-area="item.compactArea"
:trigger="item.trigger" :roller-count="item.rollerCount"
/> />
</view> </view>
</view> </view>

BIN
src/static/machine.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB