xiamen-sb-uniapp/pages/inspection-detail/inspection-detail.vue

<template>
    <view class="container">
        <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx">
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">选择设备</view>
                <view class="f-size-26 text-color-3">挖掘机</view>
            </view>
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">填写日期</view>
                <view class="f-size-26 text-color-3">2020-10-10</view>
            </view>
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">设备负责人</view>
                <view class="f-size-26 text-color-3">张三</view>
            </view>
            <view class="f-size-32 f-weight-6 py2 mb-2 title">巡检项目</view>
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">工作部件</view>
                <view class="f-size-26 text-color-3">电气部件</view>
            </view>
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">行驶系统</view>
                <view class="f-size-26 text-color-3">润滑系统</view>
            </view>
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">传动系统</view>
                <view class="f-size-26 text-color-3">传动系统</view>
            </view>
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">发动机系统</view>
                <view class="f-size-26 text-color-3">发动机系统</view>
            </view>
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">问题描述</view>
                <view
class="f-size-26 text-color-3 flex1"
                    >问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述</view
                >
            </view>
        </view>

        <u-modal
            v-model="modelShow"
            :content="content"
            :show-cancel-button="true"
            @confirm="handleDelete"
        ></u-modal>
        <view class="p-fixed d-flex j-around a-center footer">
            <view class="common" @tap="handleDelTip">删除</view>
            <view class="common" @tap="handleUpdate">修改</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            modelShow: false,
            content: ''
        };
    },

    methods: {
        // 删除提示
        handleDelTip() {
            this.modelShow = true;
            this.content = '您确定删除吗?';
        },
        // 删除
        handleDelete() {},
        // 修改
        handleUpdate() {
            uni.navigateTo({
                url: '../inspection-edit/inspection-edit'
            });
        }
    }
};
</script>

<style scoped lang="less">
page {
    background-color: #f4f4f4;
}

.container {
    padding-bottom: 100rpx;

    .title {
        border-bottom: 1rpx solid #f4f4f4;
        color: #0082ff;
    }

    .p-fixed {
        border-top: 1rpx solid #f4f4f4;
        height: 100rpx;

        .common {
            padding: 15rpx 100rpx;
            border-radius: 30rpx;
            background-color: #0082ff;
            color: #fff;

            &:last-of-type {
                background-color: #fff;
                border: 1rpx solid #0082ff;
                color: #0082ff;
            }
        }
    }

    .footer {
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
    }
}
</style>