Skip to content

C
computedRoomPad
提交 ce8587c0 authored 作者: caodi\cd's avatar caodi\cd
浏览文件
操作

fix:页面优化存档

上级 00b6fab7
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 396 行增加 和 4 行删除
pages.json
浏览文件 @ ce8587c0
......@@ -58,6 +58,13 @@
{
"path": "pages/listingManagement/index"
},
// 井道巡检列表
{
"path": "pages/shaftInspection/shaftInspectionList",
"style": {
"navigationBarTitleText": ""
}
},
// 井道巡检新页面
{
"path": "pages/shaftInspection/shaftInspectionNew",
......
pages/home/home.vue
浏览文件 @ ce8587c0
......@@ -57,7 +57,8 @@
},
{
image: '../../static/img/jd.png',
text: '井道巡检'
text: '井道巡检',
url:"/pages/shaftInspection/shaftInspectionList"
},
{
image: '../../static/img/sj.png',
......
pages/inspectionManagement/index.vue
浏览文件 @ ce8587c0
......@@ -9,8 +9,8 @@
</block>
<block slot="right" class="nav-right">
<view class="header-buttons">
<button class="button" @click="lookLog">机房巡检</button>
<button class="button" @click="lookLog">井道巡检</button>
<button class="button" @click="clickInspection(1)">机房巡检</button>
<button class="button" @click="clickInspection(2)">井道巡检</button>
</view>
</block>
</uni-nav-bar>
......@@ -105,6 +105,18 @@
back() {
uni.navigateBack();
},
clickInspection(type) {
if (type == 1) {
uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew",
});
} else {
uni.navigateTo({
url: "/pages/shaftInspection/shaftInspectionNew",
});
}
},
init() {
const all_data = this.all_data || [];
......@@ -307,7 +319,7 @@
.inspect-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: space-between;
}
}
}
......
pages/shaftInspection/shaftInspectionList.vue 0 → 100644
浏览文件 @ ce8587c0
<template>
<!-- 井道巡检列表 -->
<view class="container">
<uni-nav-bar :fixed="true" background-color="rgba(214, 240, 255, 0.0)" status-bar rightWidth="300">
<block slot="left">
<view class="uni-nav-bar-text" @click="back">
<text class="iconfont icon-Arrow-Left"></text>
</view>
</block>
<block slot="right" class="nav-right">
<view class="header-buttons">
<button class="button" @click="lookLog">查看样表</button>
</view>
</block>
</uni-nav-bar>
<!-- 第二个模块 -->
<view class="profile-section">
<view class="profile-box">
<view class="profile-left">
<view class="avatar">
<image src="@/static/img/add-img/home1.png" mode="aspectFit"></image>
</view>
<view class="info">
<view class="username">{{ userInfo.user }}啊啊啊</view>
<view class="number">巡检编号：<text class="value">111111</text></view>
</view>
</view>
<view class="profile-right">
<button class="record-button" @click="toListingManagement">
巡检人签字
</button>
</view>
</view>
</view>
<view class="content-box">
<!-- 左侧模块 -->
<view class="left-side">
<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: activeTab === index }]"
@click="activeTab = index">
{{ tab }}
</view>
</view>
<!-- 右侧模块 -->
<view class="right-side">
<!-- 第一部分：按钮 -->
<view class="button-group">
<view class="button">已巡检{{ inspectedCount }}个井道</view>
<view class="button">请点击“需巡检井道”执行巡检</view>
</view>
<!-- 第二部分：卡片组 -->
<view class="card-group">
<view class="card-title">{{ tabs[activeTab] }}</view>
<view class="card-list">
<view v-for="(card, index) in cards" :key="index" class="card">
<view class="card-content">
<view class="status-line">
<image src="/static/status-icon.png" class="status-icon" />
<text class="status-text">巡检中</text>
</view>
<view class="info-line">
<text class="info-text">{{ card }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import moment from "moment";
export default {
data() {
return {
tabs: ["所有井道", "A座", "B座", "C座", "D座", "E座", "F座"], // 选项卡内容
activeTab: 0, // 默认选中的选项卡
inspectedCount: 5, // 已巡检的井道数量
cards: ["A座-1楼", "A座-2楼", "A座-3楼", "A座-4楼", "A座-5楼", "A座-6楼", "A座-7楼", "A座-8楼"], // 卡片内容
inspectionCode: `JFXJ${moment().format("yyyyMMDDHHmmss")}${(Math.floor(Math.random() * 900) + 100)}`,
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
methods: {
// 返回
back() {
uni.navigateBack();
},
},
};
</script>
<style lang="less" scoped>
/* 导航栏样式 */
.uni-nav-bar-text {
height: 28.8px;
width: 28.8px;
background: #ffffff;
border: 0.32px solid rgba(224, 224, 224, 1);
border-radius: 14.4px;
border-radius: 50%;
color: #333;
text-align: center;
.iconfont {
font-size: 16px;
line-height: 28.8px;
}
}
.nav-right {
width: 192px;
}
.header-buttons {
display: flex;
align-items: center;
margin-left: auto; // 将按钮组推到最右侧
.button {
width: 89.6px;
height: 28.8px;
background: #ffffff;
border-radius: 14.4px;
margin-left: 12.8px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #000000;
line-height: 28.8px;
font-weight: 400;
}
}
.container {
background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
padding: 0 25.6px;
height: 100vh;
overflow: hidden;
.profile-section {
width: 100%;
margin-bottom: 12.8px;
.profile-box {
background-color: #fff;
border-radius: 9.6px;
padding: 12.8px 25.6px;
display: flex;
justify-content: space-between;
align-items: center;
.profile-left {
display: flex;
align-items: center;
.avatar {
position: relative;
width: 51.2px;
height: 51.2px;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
.change-password {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
height: 17.6px;
font-family: PingFangSC-Regular;
font-size: 9.6px;
color: #ffffff;
line-height: 16px;
font-weight: 400;
}
}
.info {
.username {
font-size: 16px;
color: #000000;
line-height: 22.4px;
font-weight: 500;
margin-bottom: 7.2px;
}
.number {
font-size: 12.8px;
color: #4A4A4A;
line-height: 22.4px;
font-weight: 400;
.value {
color: #000000;
}
}
}
}
.profile-right {
display: flex;
.inspection-button {
width: 89.6px;
height: 28.8px;
background-image: linear-gradient(105deg, #68acfb 0%, #3774f6 100%);
border-radius: 14.4px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #ffffff;
line-height: 28.8px;
font-weight: 400;
margin-right: 12.8px;
}
.record-button {
width: 115.2px;
height: 28.8px;
background: #ffffff;
border: 0.8px solid rgba(55, 116, 246, 1);
border-radius: 14.4px;
font-family: PingFangSC-Regular;
font-size: 12.8px;
color: #3774f6;
line-height: 28.8px;
font-weight: 400;
}
}
}
}
/* 页面容器 */
.content-box {
width: 972.8px;
height: 478.4px;
border-radius: 9.6px;
background-color: #ffffff;
display: flex;
/* 左侧模块 */
.left-side {
width: 120px;
height: 100%;
background-color: #f9f9f9;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 12.8px;
.tab-item {
width: 100%;
height: 38.4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11.2px;
color: #333333;
cursor: pointer;
&.active {
background-color: #ffffff;
}
}
}
/* 右侧模块 */
.right-side {
flex: 1;
padding: 12.8px 18.4px;
display: flex;
flex-direction: column;
.button-group {
display: flex;
margin-bottom: 12.8px;
.button {
height: 27.2px;
background-color: rgba(55, 116, 246, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 11.2px;
color: #3774f6;
border-radius: 3.2px;
&:first-child {
width: 97.6px;
}
&:last-child {
flex: 1;
margin-left: 9.6px;
}
}
}
.card-group {
flex: 1;
.card-title {
font-size: 12.8px;
font-weight: bold;
color: #333333;
margin-bottom: 12.8px;
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 12.8px;
.card {
width: 105.6px;
height: 51.2px;
background-color: #f9f9f9;
border-radius: 6.4px;
padding: 6.4px 10.312px;
box-sizing: border-box;
.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
.status-line {
display: flex;
align-items: center;
.status-icon {
width: 12.8px;
height: 12.8px;
margin-right: 7.112px;
}
.status-text {
font-size: 9.6px;
color: #666666;
}
}
.info-line {
font-size: 9.6px;
color: #333333;
.info-text{
margin-left: 18.4rpx;
}
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论