feiniao-farm-h5/src/components/taskItem.vue

<template>
    <div class="farm-item" :class="{'done': status}">
        <div class="item-top">
            <div class="top-l">
                <div class="item-name">梢期杀虫</div>
                <div class="item-time">2025.08.27</div>
            </div>
            <div class="top-r" v-if="!status">查看处方</div>
        </div>
        <div class="item-box">
            <!-- <div class="title-wrap">
                <div class="title-l">
                    <div class="item-title">未命名农场</div>
                    <div class="setting-text">设为特别关注</div>
                </div>
                <div class="title-r">最近服务过</div>
            </div>
            <div class="item-desc">
                <div class="desc-info">
                    <div class="desc-info-item">
                        <span>农场品种：</span>
                        <span class="value">荔枝-桂味</span>
                    </div>
                    <div class="desc-info-item">
                        <span>农场面积：</span>
                        <span class="value">500亩</span>
                    </div>
                </div>
                <div class="desc-info copy-info">
                    <div class="address van-ellipsis">
                        <span>农场位置：</span>
                        <span class="value">广东省广州市从化区市从化区从广东省广州市从化区市从化区从</span>
                    </div>
                    <span class="copy-text">点击复制</span>
                </div>
                <div class="desc-info report-text" @click="toPage">
                    <el-icon class="done-icon" color="#fff" size="6"><Select /></el-icon>
                    农场报告已经生成，请点击查看
                    <el-icon class="right-icon" color="#FF953D" size="12"><ArrowRight /></el-icon>
                </div>
            </div> -->

            <div class="farm-text">
                <span class="text-title">农场现状：</span>现状现状现状选咋混给农场现状现状现状现状选咋混给选咋混给选咋混给选咋混<span class="text-more">点击查看照片</span>
            </div>
            <div class="img-text-wrap">
                <div class="left-wrap">
                    <div class="left-img">
                        <img src="@/assets/img/home/farm.png" alt="">
                    </div>
                    <div class="right-text">
                        <div class="farm-info">
                            从化荔博园
                            <div class="info-tag-wrap">
                                <div class="tag-item second">200亩</div>
                                <div class="tag-item primary">桂味</div>
                            </div>
                        </div>
                        <div class="farm-addr">广东省广州市从化区</div>
                    </div>
                </div>
                <div class="right-wrap">特别关注</div>
            </div>
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from "vue-router";

const status = ref(0)

const router = useRouter();
const toPage = () => {
    router.push("/report_detail")
}
</script>

<style lang="scss" scoped>
.farm-item {
    background: #CFE9FF;
    border-radius: 14px;
    &.done {
        background: #EBEBEB;
        .item-top {
            .item-name {
                background: #C6C6C6;
            }
        }
        .item-desc .copy-info .copy-text {
            color: #000000;
        }
    }
    .item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px;
        color: #2199f8;
        font-size: 14px;
        .top-l {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #000000;
        }
        .item-name {
            margin-right: 8px;
            color: #2199F8;
            padding: 0 10px;
            height: 29px;
            border-radius: 4px;
            border: 1px solid #2199F8;
            line-height: 29px;
            background: #fff;
        }
    }
    .item-box {
        background: #fff;
        border-radius: 10px 10px 14px 14px;
        border: 1px solid rgba(183, 183, 183, 0.1);
        padding: 10px 12px;
    }

    .farm-text {
        background: rgba(183, 183, 183, 0.1);
        padding: 6px 8px;
        border-radius: 5px;
        font-size: 12px;
        color: #909090;
        line-height: 1.5;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        word-break: break-all;
        .text-title {
            color: #424242;
        }
        .text-more {
            padding-left: 10px;
            color: #2199F8;
            white-space: nowrap;
        }
    }
    .img-text-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-wrap {
            display: flex;
            align-items: center;
            .left-img {
                width: 40px;
                height: 40px;
                border-radius: 6px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .right-text {
                padding-left: 8px;
                .farm-info {
                    font-size: 14px;
                    color: #1D2129;
                    display: flex;
                    align-items: center;
                    .info-tag-wrap {
                        margin-left: 10px;
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        .tag-item {
                            height: 20px;
                            line-height: 20px;
                            padding: 0 8px;
                            border-radius: 2px;
                            font-size: 12px;
                            &.second {
                                color: #1D2129;
                                background: #F4F4F4;
                            }
                            &.primary {
                                color: #2199F8;
                                background: #E8F3FF;
                            }
                        }
                    }
                }
                .farm-addr {
                    padding-top: 2px;
                    font-size: 12px;
                    color: #86909C;
                }
            }
        }
        .right-wrap {
            color: #FF953D;
            font-size: 12px;
        }
    }
    .title-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title-l {
            display: flex;
            align-items: center;
            .setting-text {
                padding-left: 11px;
                font-size: 12px;
                color: #2199f8;
            }
        }
        .title-r {
            color: rgba(255, 131, 29, 0.36);
            font-size: 12px;
        }
    }
    .item-title {
        font-size: 16px;
        font-weight: 500;
        margin: 2px 0 5px 0;
    }
    .item-desc {
        font-size: 13px;
        color: #bbbbbb;
        line-height: 18px;
        .desc-info {
            display: flex;
            .desc-info-item {
                flex: 1;
                .value {
                    color: #666666;
                }
            }
        }
        .copy-info {
            margin-top: 4px;
            .address {
                max-width: 80%;
                .value {
                    color: #666666;
                }
            }
            .copy-text {
                margin-left: 8px;
                color: #2199f8;
            }
        }
        .report-text {
            margin-top: 10px;
            color: #FF953D;
            font-size: 12px;
            height: 32px;
            line-height: 32px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            padding-left: 11px;
            background: linear-gradient(90deg, rgba(255, 149, 61, 0.1), rgba(255, 149, 61, 0));
            .done-icon {
                background: #FF953D;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                margin-right: 5px;
            }
            .right-icon {
                margin-left: 10px;
            }
        }
    }
}
</style>