mechanicStore-app/pages/myEdit/sign.uvue

<template>
    <view class="page-container">
        <!-- 头部 -->
        <view class="header">
            <view class="header-left" @click="goBack">
                <u-icon name="arrow-left" size="24" color="#333"/>
            </view>
            <view class="header-title">
                签约
            </view>
            <view class="header-right">
            </view>
        </view>

        <!-- 内容区域 -->
        <view class="content">
            <!-- 合同列表 -->
            <view class="contract-item">
                <text class="contract-name">
                    特别承诺书
                </text>
                <view class="contract-status signed">
                    已签约
                </view>
                <u-icon name="arrow-right" size="16" color="#999"/>
            </view>

            <view class="contract-item">
                <text class="contract-name">
                    保密协议
                </text>
                <view class="contract-status signed">
                    已签约
                </view>
                <u-icon name="arrow-right" size="16" color="#999"/>
            </view>

            <view class="contract-item">
                <text class="contract-name">
                    代理合作合同
                </text>
                <view class="contract-status unsigned">
                    未上传
                </view>
                <u-icon name="arrow-right" size="16" color="#999"/>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    const goBack = () => {
        uni.navigateBack();
    };
</script>

<style scoped>
    .page-container {
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
        background-color: #ffffff;
        border-bottom: 1rpx solid #f0f0f0;
    }

    .header-left, .header-right {
        width: 60rpx;
    }

    .header-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .content {
        padding: 30rpx;
    }

    .contract-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
    }

    .contract-name {
        font-size: 28rpx;
        color: #333;
    }

    .contract-status {
        font-size: 24rpx;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
    }

    .contract-status.signed {
        background-color: #e6f7ee;
        color: #52c41a;
    }

    .contract-status.unsigned {
        background-color: #fff2e8;
        color: #fa8c16;
    }
</style>