foster-pc-vue/src/views/home/components/applyList.vue

<template>
    <div class="apply-list">
        <div class="list-wrap">
            <div class="list-item" v-for="(item, index) in 10" :key="index">
              <div class="item-info">
                <div class="tree-icon">
                    <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" />
                    <div class="tree-type-name-tag">白糖罂</div>
                </div>
                <div class="item-center">
                    <div class="center-t">
                        BTY-A25
                        <span class="type-tag">综合:94分</span>
                        <span class="type-tag">生态:92分</span>
                    </div>

                    <div class="center-item p-t-2 age-line">
                        <div class="age-wrap">
                            <div class="has-age">
                                <div class="age">树龄：<span class="unit">5年</span></div>
                            </div>
                            <div class="sort-line"></div>
                        </div>
                        单价：<span class="unit">{{item.status === 0 ? "--" : item.price||12}}元/斤</span>
                    </div>

                    <div class="center-item">截至分配时间：<span>2025.05.15</span></div>
                </div>
              </div>

              <div class="apply-wrap" v-show="ROLE == 1">
                <div class="apply-item" v-for="(item, index) in 2" :key="index">
                    <div class="apply-users">
                        <div class="user-item">
                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                            <div class="user-name">华国伟</div>
                        </div>
                        <div class="user-item">
                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                            <div class="user-name">华国伟</div>
                        </div>
                        <div class="user-item">
                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                            <div class="user-name">华国伟</div>
                        </div>
                    </div>
                    <div class="apply-time">2025.03.29</div>
                    <div class="apply-btn">
                        确认分配
                    </div>
                </div>
              </div>

              <!-- 团长 -->
              <div class="team-wrap" v-show="ROLE == 2">
                <div class="team-box">
                    <div class="team-apply">
                        <div class="apply-total">已分配给15人</div>
                        <div class="apply-tooltip">
                            <el-tooltip
                                class="box-item"
                                effect="dark"
                                content="Top Center prompts info"
                                placement="top"
                            >
                            <template #content>
                                <div class="user-wrap">
                                    <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
                                        {{ owner.userName }}
                                        <span v-show="oI<owners.length-1">/</span>
                                    </div>
                                </div>
                            </template>
                            <div class="tooltip-user-item">
                                <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
                                    {{ owner.userName }}
                                    <span v-show="oI<owners.length-1">/</span>
                                </div>
                            </div>
                            </el-tooltip>
                        </div>
                    </div>
                    
                    <div class="progress-wrap" v-show="ROLE==2 && item.status !== 2">
                        剩余可购：
                        <el-progress :percentage="60" color="#FFD887"><span class="progress-text"><span class="over">150</span>/215斤</span></el-progress>
                    </div>
                </div>

                <div class="team-users apply-wrap">
                    <div class="apply-item" v-for="(item, index) in 2" :key="index">
                    <div class="apply-users">
                        <div class="user-item">
                            <el-avatar :size="32" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
                        </div>
                        <div class="team-info">
                            <div class="team-name">华国伟</div>
                            <div class="team-time">3/25<span>10:08:32</span></div>
                        </div>
                    </div>
                    <div class="apply-time">购买<span class="main-unit">15斤</span></div>
                    <div class="apply-btn">
                        确认分配
                    </div>
                </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
let store = useStore();

const owners = ref([{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}, {userName: "张山2", value: 30}, {userName: "刘珊珊2", value: 30}])

const ROLE = store.state.home.userRole;

onMounted(() => {console.log('ROLE', ROLE);});
</script>

<style lang="scss" scoped>
.apply-list {
    height: 100%;
    overflow: auto;

    .type-tag {
        color: #ffd489;
        background: rgba(255, 212, 137, 0.06);
        padding: 2px 4px;
        font-size: 10px;
        margin-left: 4px;
        border-radius: 4px;
    }
    .list-wrap {
        .list-item {
            background: rgba(255, 255, 255, 0.08);
            padding: 8px 10px;
            border-radius: 5px;
            .item-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .tree-icon {
                position: relative;
                .tree-type-name-tag {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 0 5px 5px 0;
                    font-size: 10px;
                    width: 100%;
                    text-align: center;
                    padding: 1px;
                    backdrop-filter: blur(2px);
                }
                .tree-img {
                    width: 63px;
                    height: 63px;
                    border-radius: 5px;
                    object-fit: cover;
                }
            }
            .item-center {
                flex: 1;
                padding: 0 12px;
                color: #fff;
                .center-t {
                    font-size: 14px;
                }
                .center-item {
                    color: #6c6c6c;
                    font-size: 12px;
                    padding-top: 2px;
                    span {
                        color: #fff;
                    }
                }
                
                .age-line {
                    display: flex;
                    align-items: center;
                    .age-wrap {
                        display: flex;
                        align-items: center;
                        .sort-line {
                            margin: 0 10px;
                            height: 10px;
                            width: 1px;
                            background: #6C6C6C;
                        }
                    }
                }
            }
        }
        .list-item + .list-item {
            margin-top: 8px;
        }
    }
    .unit {
        padding-left: 5px;
        color: #fff;
    }

    .apply-wrap {
        padding-top: 12px;
        .apply-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.04);
            .apply-users {
                display: flex;
                .user-item {
                    .user-name {
                        color: #fff;
                        font-size: 14px;
                    }
                }
                .user-item + .user-item {
                    padding-left: 6px;
                }
            }
            .apply-time {
                flex: 1;
                text-align: center;
                font-size: 14px;
                color: #999999;
                .main-unit {
                    color: #FFD489;
                }
            }
            .apply-btn {
                padding: 4px 7px;
                border: 1px solid #FFD489;
                border-radius: 20px;
                color: #FFD489;
                font-size: 12px;
                cursor: pointer;
            }
        }
        
        .apply-item + .apply-item {
            margin-top: 8px;
        }

        &.team-users {
            margin-top: 8px;
            background: rgba(255, 255, 255, 0.04);
            border-radius: 8px;
            .apply-item {
                background: none;
                padding: 6px 8px;
            }
            .apply-users {
                .team-info {
                    padding-left: 8px;
                    .team-name {
                        color: #fff;
                        font-size: 14px;
                    }
                    .team-time {
                        color: #999999;
                        font-size: 12px;
                    }
                }
            }
        }
    }
    .p-t-2 {
        padding-top: 2px;
    }

    .team-wrap {
        padding-top: 12px;
        .team-box {
            padding: 5px 12px;
            background: rgba(255, 255, 255, 0.04);
        }
        .team-apply {
            display: flex;
            align-items: center;
            .apply-total {
                color: #F2D677;
                font-size: 14px;
                padding-right: 10px;
            }
            .apply-tooltip {
                padding: 0px 10px;
                border-radius: 20px;
                background: #3B3B3B;
                .tooltip-user-item {
                    display: inline-block;
                    font-size: 12px;
                    color: #F2D677;
                    max-width: 182px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    height: 26px;
                    line-height: 30px;
                }
                .user-detail {
                    display: inline-block;
                }
            }
        }
        
                
        .progress-wrap {
            padding-top: 8px;
            display: flex;
            align-items: center;
            font-size: 12px;
            .user-item {
                display: flex;
                align-items: center;
            }
            .progress-text {
                font-size: 12px;
                color: #999999;
                .over {
                    color: #FFD489;
                }
            }
            ::v-deep {
                .el-progress-bar__outer {
                    width: 160px;
                    background: rgba(242, 243, 245, 0.23);
                }
            }
        }
    }
}

                    
.user-wrap {
    display: flex;
}
</style>