feiniao-farm-h5/src/views/old_mini/mine/details/active.vue

<template>
    <div class="container">
        <custom-header name="查看详情"></custom-header>
        <div class="content">
            <div class="steps-wrap">
                <steps class="steps" direction="vertical" :active="0">
                    <step>
                        <div class="lable">订单处理中，开始配置</div>
                        <span class="value">2025-03-22 12:40</span>
                    </step>
                    <step>
                        <div>富丽富力园16栋</div>
                        <span class="value">张贺飞 198****3165</span>
                    </step>
                </steps>
                <div class="btn-txt">详情 ></div>
            </div>
            <div class="card">
                <div class="card-top">
                    <img src="@/assets/img/mine/img-photo.png" alt="" />
                    <div class="item-text">
                        <div class="name">
                            <span>糯米糍</span>
                            <div class="mark">综合评分:92分</div>
                            <div class="age">树龄:16年</div>
                        </div>
                        <div class="txt">唯一编码：<span>2******</span></div>
                        <div class="txt">高质产量：<span>15元/斤</span></div>
                        <div class="txt">预估上市时间：<span>2025.06.25</span></div>
                    </div>
                </div>
                <div class="card-bottom">
                    <img src="@/assets/img/mine/chat-black.png" alt="">
                    联系果园
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { Step, Steps } from "vant";
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: calc(100vh - 40px);
    .content {
        width: 100%;
        height: 100%;
        background: #f2f3f5;
        padding: 20px 12px;
        box-sizing: border-box;
        .steps-wrap {
            display: flex;
            justify-content: space-between;
            background: #fff;
            padding: 12px;
            border-radius: 5px;
            .steps {
                width: calc(100% - 70px);
                .lable {
                    font-size: 16px;
                    font-weight: 500;
                }
                .value {
                    color: rgba(0, 0, 0, 0.3);
                    font-size: 12px;
                    margin-top: 4px;
                    display: inline-block;
                }
                ::v-deep {
                    .van-step--vertical:after {
                        border-bottom-width: 0px;
                    }
                    .van-step {
                        color: #000;
                    }
                    .van-step__circle-container {
                        font-size: 14px;
                    }
                    .van-step__circle {
                        width: 10px;
                        height: 10px;
                        background: #ececec;
                    }
                }
            }
            .btn-txt {
                color: rgba(0, 0, 0, 0.4);
                font-size: 12px;
            }
        }
        .card {
            background: #fff;
            border-radius: 5px;
            padding: 12px;
            margin-top: 12px;
            .card-top{
                display: flex;
                margin-bottom: 12px;
                img {
                    width: 89px;
                    height: 81px;
                    border-radius: 8px;
                    margin-right: 12px;
                    object-fit: cover;
                }
                .item-text {
                    color: #999999;
                    font-size: 12px;
                    line-height: 1.6;
                    .name {
                        display: flex;
                        align-items: center;
                        span {
                            font-size: 15px;
                            color: #000;
                            font-weight: 500;
                            margin-right: 5px;
                        }
                        div {
                            margin-left: 5px;
                            border-radius: 4px;
                            font-size: 12px;
                            padding: 2px 5px;
                            &.mark {
                                background: rgba(50, 203, 226, 0.25);
                                color: #00bedb;
                            }
                            &.age {
                                background: rgba(255, 196, 0, 0.2);
                                color: #f0a400;
                            }
                        }
                    }
                    .txt {
                        span {
                            color: #000;
                        }
                    }
                }
            }
            .card-bottom{
                border-top: 1px solid rgba(0, 0, 0, 0.1);
                padding-top: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    width: 17px;
                    height: 15px;
                    margin-right: 5px;
                }
            }
        }
    }
}
</style>