190 lines
3.2 KiB
Vue
190 lines
3.2 KiB
Vue
<template>
|
|
<view class="card">
|
|
<view class="card-header">
|
|
<text class="card-title">
|
|
项目列表
|
|
</text>
|
|
<text class="card-link">
|
|
查看全部
|
|
</text>
|
|
</view>
|
|
<view class="card-body">
|
|
<view class="project-item">
|
|
<view class="project-info">
|
|
<view class="avatar" />
|
|
<view class="info">
|
|
<text class="name">
|
|
G6高速改扩建项目
|
|
</text>
|
|
<text class="sub">
|
|
K1+200-K1+800
|
|
</text>
|
|
</view>
|
|
<view class="status-tag">
|
|
作业中
|
|
</view>
|
|
</view>
|
|
<view class="project-params">
|
|
<view class="param">
|
|
<text class="param-label">
|
|
作业时长
|
|
</text>
|
|
<text class="param-value">
|
|
8h
|
|
</text>
|
|
</view>
|
|
<view class="param">
|
|
<text class="param-label">
|
|
压实面积
|
|
</text>
|
|
<text class="param-value">
|
|
28.5m²
|
|
</text>
|
|
</view>
|
|
<view class="param">
|
|
<text class="param-label">
|
|
碾压遍数
|
|
</text>
|
|
<text class="param-value">
|
|
10遍
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="project-actions">
|
|
<button class="btn-action btn-start">
|
|
开始项目
|
|
</button>
|
|
<button class="btn-action btn-pause">
|
|
暂停项目
|
|
</button>
|
|
<button class="btn-action btn-end">
|
|
结束项目
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
background-color: #ffffff;
|
|
border-radius: 12px;
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.card-link {
|
|
font-size: 12px;
|
|
color: #4685FD;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.project-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 8px;
|
|
background-color: #f0f0f0;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.name {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sub {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
|
|
.status-tag {
|
|
font-size: 12px;
|
|
color: #52c41a;
|
|
padding: 2px 8px;
|
|
background-color: #f6ffed;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.project-params {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.param {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.param-label {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.param-value {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.project-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn-action {
|
|
flex: 1;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 8px 0;
|
|
font-size: 12px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-start {
|
|
background-color: #4685FD;
|
|
}
|
|
|
|
.btn-pause {
|
|
background-color: #faad14;
|
|
}
|
|
|
|
.btn-end {
|
|
background-color: #ff4d4f;
|
|
}
|
|
</style>
|