申请详情页面

wjt

2024-06-20 e5dc71ff7541a217a93fe697ffd777cc642e7d3b

申请详情页面

 pages.json

@@ -99,6 +99,14 @@
                    {
                        "navigationBarTitleText" : "申请记录"
                    }
                },
                {
                    "path" : "applyRecordDetails/applyRecordDetails",
                    "style" : 
                    {
                        "navigationBarTitleText" : "申请详情",
                        "navigationStyle": "custom"
                    }
                }
            ]
        }

 policy/applyRecord/applyRecord.vue

@@ -112,7 +112,7 @@
        methods: {
            goReport() {
                uni.navigateTo({
                    url: `/policy/reportDetails/reportDetails`
                    url: `/policy/applyRecordDetails/applyRecordDetails`
                })
            },
            click() {

 policy/applyRecordDetails/applyRecordDetails.scss

New file
@@ -0,0 +1,100 @@
.top-content{
    width: 100%;
    height: 380rpx;
    background: linear-gradient(180deg, #1171E0 42.5%, #F4F4F4 100%);
}
.main-page{
    position: relative;
    top: -380rpx;
    .status{
        color: white;
        margin: 20rpx 32rpx;
        font-size: 36rpx;
        margin-bottom: 24rpx;
    }
    .base-card{
        margin: 20rpx 32rpx;
        border-radius: 10rpx;
        background-color: white;
        padding: 24rpx 0;
        .title{
            padding: 0 24rpx;
            font-size: 32rpx;
            font-weight: 700;
            border-bottom: 2rpx solid #EEEEEE;
            padding-bottom: 14rpx;
            margin-bottom: 15rpx;
        }
        .view-form{
            padding: 0 24rpx;
            .view-form-item{
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                margin-bottom: 34rpx;
                font-size: 30rpx;
                &:last-child{
                    margin-bottom: 0;
                }
                &>view{
                    width: 60%;
                    font-weight: 500;
                }
                .label{
                    color: #7E8596;
                    font-weight: normal;
                    width: 40%;
                }
            }
        }
        .view-content{
            font-size: 30rpx;
            padding: 0 24rpx;
            line-height: 52rpx;
        }
        .view-image{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 22rpx;
            image{
                width: 100%;
                height: 220rpx;
            }
        }
        .view-step{
            padding: 0 24rpx;
            .step-content{
                position: relative;
                padding-left: 64rpx;
                &::after{
					
                }
                .icon{
                    position: absolute;
                    left: 0;
                    width: 40rpx;
                    height: 40rpx;
                }
                .top-title{
                    font-size: 32rpx;
                    color: #202D44;
                    margin-bottom: 16rpx;
                }
                .down-tips{
                    color: #7E8596;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .time{
                        margin-left: 32rpx;
                    }
                    text{
                        color: #4A4E60;
                    }
				
                }
            }
		
        }
    }
}

 policy/applyRecordDetails/applyRecordDetails.vue

New file
@@ -0,0 +1,153 @@
<template>
    <view>
        <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
            <template slot="center">
                <view style="color: white;">申请详情</view>
            </template>
        </u-navbar>
        <view class="top-content"></view>
        <view class="main-page">
            <view class="status">
                已结束
            </view>
            <view class="base-card">
                <view class="title">
                    <text>基本信息</text>
                </view>
                <view class="view-form">
                    <view class="view-form-item">
                        <view class="label">执法主题</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">执法对象</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">执法时间</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">执法时间</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">执法类型</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">执法人员</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">执法部门</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">随行人员数量</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">是否通知企业</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">申请时间</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">当前状态</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                </view>
            </view>
            <view class="base-card">
                <view class="title">
                    <text>执法内容</text>
                </view>
                <view class="view-content">
                    灭火器使用：不同类型的灭火器适用于不同种类的火灾，如二氧化碳灭火器适用于固体、液体、气体和带电设备火灾，干粉灭火器同样适用于多种火灾类型。使用时应先拔掉保险销，然后瞄准火焰根部进行喷射。
                    消防栓使用：使用消防栓时，应确保至少有3人参与，其中2人握紧水枪，1人负责开启阀门。使用前应检查水带及接头是否完好，避免扭折，并确保水带与水枪正确连接。
                    防火措施：包括但不限于不乱丢烟蒂、不私拉乱接电线、不超负荷使用电器、定期检查电线和电器设备是否老化或破损、家中不存放易燃易爆物品等。
                    火灾逃生：发生火灾时，应迅速判断火势来源，选择与火源相反的方向逃生。切勿使用电梯逃生，应通过安全通道撤离。逃生过程中应保持低姿势，用湿毛巾掩护口鼻，减少吸入有毒烟雾。
                    报警和自救：发现火情后，应立即拨打“119”火警电话报警，并详细说明火灾地点、火势大小等信息。在等待救援时，应尽量保持冷静，采取正确的自救措施，如使用灭火器、消防栓等。
                </view>
            </view>
            <view class="base-card">
                <view class="title">
                    <text>审批情况</text>
                </view>
                <view class="view-form">
                    <view class="view-form-item">
                        <view class="label">审批结果</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">审批人</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">审批部门</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                    <view class="view-form-item">
                        <view class="label">审批时间</view>
                        <view>24年5月份消防突击检查</view>
                    </view>
                </view>
            </view>
            <view class="base-card">
                <view class="title">
                    <text>执法图片</text>
                </view>
                <view class="view-image">
                    <image src="https://picsum.photos/200/300" mode="widthFix"></image>
                    <image src="https://picsum.photos/200/300" mode="widthFix"></image>
                    <image src="https://picsum.photos/200/300" mode="widthFix"></image>
                    <image src="https://picsum.photos/200/300" mode="widthFix"></image>
                    <image src="https://picsum.photos/200/300" mode="widthFix"></image>

                </view>
            </view>
            <view class="base-card">
                <view class="title">
                    <text>执法进度</text>
                </view>
                <view class="view-step">
                    <view class="step-content">
                        <image class="icon" src="/static/policy/icon.png" mode="widthFix"></image>
						
                        <view class="top-title">
                            提交申请
                        </view>
                        <view class="down-tips">
                            <view>提交人：<text>林小零</text></view>
                            <view class="time">2024-06-07 12:14</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>
<style>
    page {
        background-color: #F4F4F4;
    }
</style>
<style lang="scss" scoped>
    @import "./applyRecordDetails.scss";
</style>

 static/policy/icon.png