详情页面

董国庆

2025-02-22 1beff90ed7036fb16d32b510c1beabca75b53744

详情页面

 H5/pages.json

@@ -12,6 +12,14 @@
                "navigationBarTitleText": "添加办理进度",
                "navigationBarBackgroundColor": "#ffffff"
            }
        },
        {
            "path": "pages/work-detail/work-detail",
            "style": {
                "navigationBarTitleText": "诉求详情",
                "navigationBarBackgroundColor": "#ffffff",
                "navigationStyle": "custom"
            }
        }
    ],
    "globalStyle": {

 H5/pages/work-detail/work-detail.vue

New file
@@ -0,0 +1,344 @@
<template>
    <view class="content">
        <u-navbar title="诉求详情" bgColor="transparent" autoBack>
        </u-navbar>
        <view class="topColor">
        </view>
        <view class="allContent">
            <view class="topStatus">
                <view class="status">上报待上级审核</view>
                <view class="tit">当前状态</view>
            </view>
            <!-- 上报待上级审核 -->
            <view class="card1">
                <image src="../../static/detailImg/Ovaled.png" class="topIcon shrink0"></image>
                <view class="infoCard">
                    <view class="flex j-between">
                        <view class="label">上报人</view>
                        <view class="value">张三</view>
                    </view>
                    <view class="flex j-between">
                        <view class="label">联系电话</view>
                        <view class="value">13987654321</view>
                    </view>
                    <view class="flex j-between">
                        <view class="label">所属部门</view>
                        <view class="value">XXXXXXX部门</view>
                    </view>
                    <view class="flex j-between">
                        <view class="label">上报时间</view>
                        <view class="value">2025-09-09 11:09:09</view>
                    </view>
                    <view class="flex j-between">
                        <view class="label">上报说明</view>
                        <view class="value">上报说明上报说明上报说明上报上报说明上报说明上报说明上报上报说明上报说明上报说明上报</view>
                    </view>
                </view>
            </view>
            <view class="cardInfo">
                <view class="title">诉求号：7843523454</view>
                <view class="addressCard">
                    <view class="address">江苏省常州市溧阳市牛顿大道172号</view>
                    <image src="../../static/detailImg/dwei.png" class="addressIcon shrink0" mode="aspectFill"></image>
                </view>
                <view class="flex j-between">
                    <view class="label">创建时间</view>
                    <view class="value">2025-09-09 11:09:09</view>
                </view>
                <view class="flex j-between">
                    <view class="label">问题类型</view>
                    <view class="value">教育</view>
                </view>
                <view class="flex j-between">
                    <view class="label">群众</view>
                    <view class="value">张三</view>
                </view>
                <view class="flex j-between">
                    <view class="label"> 联系电话</view>
                    <view class="value">13987654321</view>
                </view>
                <view class="flex j-between">
                    <view class="label">详细地址</view>
                    <view class="value">上报说明上报说明上报说明上报
                        上报说明上报说明上报说明上报说</view>
                </view>
                <!-- 上级端需要的字段 -->
                <view class="flex j-between">
                    <view class="label">录入人</view>
                    <view class="value">上报说明上报说明上报说明</view>
                </view>
                <view class="flex j-between">
                    <view class="label">录入人联系方式</view>
                    <view class="value">13987654321</view>
                </view>
                <!--  上级端需要的字段-->
            </view>
            <view class="problem">
                <view class="title">问题描述</view>
                <view class="desc">
                    <view class="top">问题标题问题标题问题标题问题标题</view>
                    <view class="line1"></view>
                    <view class="context">问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容问题描述内容</view>

                </view>
                <view class="title">描述图片</view>
                <view class="descPic">
                    <view class="picItem" v-for="(item,index) in 3">
                        <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            class="img shrink0" mode="aspectFill">
                        </image>
                    </view>
                </view>
                <view class="title">描述视频</view>
                <view class="descPic">
                    <view class="picItem" v-for="(item,index) in 3">
                        <image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            class="img shrink0" mode="aspectFill">
                        </image>
                    </view>
                </view>

            </view>
        </view>
        <view class="btnButtom">
            <view class="cancel">驳回</view>
            <view class="sure">审核通过</view>

        </view>


    </view>
</template>

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

            };
        }
    }
</script>
<style>
    page {
        background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 6%, #F8F8F8 100%);
    }
</style>

<style lang="scss" scoped>
    .topColor {
        height: 346rpx;
        background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
        // padding: 176rpx 27rpx 17rpx 27rpx;
    }

    .allContent {
        margin-top: -243rpx;
        padding: 0 31rpx 98rpx 31rpx;


        .topStatus {
            .status {
                font-weight: 600;
                font-size: 44rpx;
                color: #000000;
                line-height: 62rpx;
                margin-bottom: 15rpx;
            }

            .tit {
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.8);
                line-height: 38rpx;
                margin-bottom: 17rpx;
            }
        }

        .card1 {
            margin-top: 21rpx;
            display: flex;
            justify-content: space-between;

            .topIcon {
                margin-top: 17rpx;
                width: 19.23rpx;
                height: 19.23rpx;
                margin-right: 46rpx;
            }

            .infoCard {
                flex: 1;
                background: #FFFFFF;
                box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
                padding: 13rpx 30.77rpx 19rpx 31rpx;
                border-radius: 27rpx;

                .label {
                    font-weight: 400;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.88);
                    line-height: 77rpx;
                }

                .value {
                    max-width: 403rpx;
                    font-weight: 500;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.88);
                    line-height: 77rpx;
                }
            }

        }

        .cardInfo {
            margin-top: 38.46rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 8rpx;
            padding: 21rpx 31rpx 38rpx 31rpx;
            border-radius: 27rpx;
            background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 100%);

            .title {
                font-weight: 600;
                font-size: 23rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 33rpx;
                text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
            }

            .addressCard {
                margin: 33rpx 10rpx;
                padding: 33rpx 27rpx;
                background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
                box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
                border-radius: 19rpx;
                display: flex;
                justify-content: space-between;

                .address {
                    font-weight: 500;
                    font-size: 27rpx;
                    color: #000000;
                    line-height: 38rpx;
                    text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
                }

                .addressIcon {
                    width: 30.77rpx;
                    height: 30.77rpx;
                }
            }

            .label {
                font-weight: 400;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 77rpx;
            }

            .value {
                max-width: 403rpx;
                font-weight: 500;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 77rpx;
            }

        }

        .problem {
            border-radius: 27rpx;
            margin-top: 38.46rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
            padding: 0 31rpx 34rpx 31rpx;
            margin-bottom: 60rpx;

            .title {
                padding-top: 34rpx;
                font-weight: 600;
                font-size: 27rpx;
                color: rgba(0, 0, 0, 0.88);
                line-height: 38rpx;
                text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
                margin-bottom: 27rpx;
            }

            .desc {
                background: #F8F8F8;
                // box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
                border-radius: 8rpx;
                padding: 29rpx 0 121rpx 0;

                .top {
                    padding: 0 31rpx;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.8);
                    line-height: 38rpx;
                }

                .line1 {
                    margin: 27rpx 0;
                    height: 2rpx;
                    background: rgba(0, 10, 26, 0.07);
                }

                .context {
                    padding: 0 31rpx;
                    font-size: 27rpx;
                    color: rgba(0, 0, 0, 0.8);
                    line-height: 38rpx;
                }
            }

            .descPic {
                display: flex;
                flex-wrap: wrap;

                .picItem {
                    margin-right: 15rpx;

                    .img {
                        width: 140.38rpx;
                        height: 140.38rpx;
                        border-radius: 7.69rpx;
                    }
                }
            }
        }

    }

    .btnButtom {
        position: fixed;
        bottom: 0;
        width: 100vw;
        box-sizing: border-box;
        padding: 33rpx 31rpx;
        display: flex;
        justify-content: space-between;

        .cancel {
            background: #FFFFFF;
            border: 2rpx solid;
            box-shadow: 0 0 0 5px linear-gradient(270deg, rgba(252, 141, 85, 1), rgba(255, 73, 72, 1));
            border-image-slice: 1;
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FF4948;
            line-height: 38rpx;
            padding: 19rpx 138rpx;
        }

        .sure {
            background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
            border-radius: 38rpx;
            font-size: 27rpx;
            color: #FFFFFF;
            line-height: 38rpx;
            padding: 19rpx 119rpx 19rpx 119rpx;
        }
    }
</style>

 H5/static/detailImg/Oval.png

 H5/static/detailImg/Ovaled.png

 H5/static/detailImg/back.png

 H5/static/detailImg/dwei.png

 H5/static/detailImg/open.png

 H5/static/detailImg/right.png