feiniao-farm-h5/src/views/old_mini/expert_detail/index.vue

<template>
    <div class="farm-page">
        <custom-header name="我的主页"></custom-header>
        <div class="farm-list">
            <div class="box-wrap expert-info">
                <div class="expert-top">
                    <div class="top-l">
                        <img class="expert-icon" src="https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png" alt="">
                        <div class="l-info">
                            <div class="info-name">
                                <div class="expert-name">韦帮稳</div>
                                <span class="expert-tag">
                                    <img class="expert-img" src="@/assets/img/home/expert-icon.png" alt="">
                                    专家
                                </span>
                            </div>
                            <div class="info-bottom">
                                <div
                                    class="fruit-tag"
                                    v-for="(ele, eleIndex) in tagList"
                                    :key="eleIndex"
                                >
                                    {{ ele.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="top-r">编辑信息</div> -->
                </div>
                <div class="expert-list">
                    <div class="page-title">
                        <img class="title-icon" src="@/assets/img/home/man.png" alt="">
                        专家简介
                    </div>
                    <div class="list-one">
                        <div class="one-info">
                            <span class="one-name">职称：</span>广州荔博园种业有限公司董事长
                        </div>
                        <div class="one-info">
                            <span class="one-name">单位：</span>广州市从化区荔枝文化博览园
                        </div>
                        <div class="one-info">
                            <span class="one-name">擅长：</span>荔枝的病虫害防治、生长异常调节、物候期调 节等等...
                        </div>
                        <div class="one-info last-one">
                            <span class="one-name">服务品类：</span><div class="more">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
                        </div>
                        <div class="one-type">
                            <div class="type-item" v-for="item in 5" :key="item">
                                <img class="type-img" src="@/assets/img/gallery/icon-0.png" alt="">
                                <div class="type-name">荔枝</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-wrap list-wrap">
                <div class="list-title">
                    <div class="page-title">
                        <img class="title-icon" src="@/assets/img/home/man.png" alt="">
                        定点基地
                    </div>
                    <div class="more">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
                </div>
                <div class="list-content">
                    <div class="list-item" v-for="item in 3" :key="item">
                        <div class="item-info">
                            <div class="item-top">
                                <div class="left-img">
                                    <img class="img-dom" src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg" alt="">
                                </div>
                                <div class="left-content">
                                    <div class="content-title">
                                        <span>荔枝博览园</span>
                                    </div>
                                    <div class="content-desc">
                                        <div>果园面积：1500亩</div>
                                        <div>服务作物：荔枝-妃子笑、桂味</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-btn">查看详情</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-btn"><div class="share-btn">分享</div></div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref } from "vue";

const tagList = [{name: "荔枝"}, {name: "龙眼"}]
</script>

<style scoped lang="scss">
.farm-page {
    width: 100%;
    height: 100vh;
    .farm-list {
        width: 100%;
        height: calc(100% - 40px - 52px);
        overflow: auto;
        background-color: #f7f7f7;
        padding: 12px;
        box-sizing: border-box;
        .page-title {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #000000;
            font-weight: bold;
            .title-icon {
                width: 16px;
                height: 16px;
                padding-right: 8px;
            }
        }
        
        .more {
            display: flex;
            align-items: center;
            color: #999999;
        }
        .box-wrap {
            background: #ffffff;
            border-radius: 12px;
            padding: 12px;
            &.expert-info {
                .expert-top {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    .top-l {
                        display: flex;
                    }
                    .top-r {
                        display: flex;
                        align-items: center;
                        padding: 4px 10px;
                        color: #2199F8;
                        font-size: 12px;
                        background: rgba(33, 153, 248, 0.12);
                        border-radius: 20px;
                    }
                    .l-info {
                        padding-left: 7px;
                    }
                    .info-name {
                        display: flex;
                        align-items: center;
                    }
                    .info-bottom {
                        padding-top: 8px;
                        display: flex;
                    }
                    
                    .fruit-tag {
                        margin-left: 5px;
                        padding: 0 8px;
                        height: 20px;
                        line-height: 20px;
                        background: #cae7ff;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #2199f8;
                        // &.pest {
                        //     background: #eedaff;
                        //     color: #ac4dff;
                        // }
                        &:nth-child(2) {
                            background: #eedaff;
                            color: #ac4dff;
                        }
                    }
                    .expert-icon {
                        width: 68px;
                        height: 68px;
                        border-radius: 8px;
                        object-fit: cover;
                    }
                    .info-flex{
                        display: flex;
                        align-items: center;
                    }
                    .expert-name {
                        color: #000;
                        font-size: 16px;
                        font-weight: bold;
                    }
                    .expert-tag {
                        height: 20px;
                        width: 48px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #C77D05;
                        background: #FFECAD;
                        border-radius: 4px;
                        font-size: 12px;
                        margin-left: 8px;
                        line-height: 20px;
                        .expert-img {
                            width: 12px;
                            padding-right: 2px;
                        }
                    }
                    .btn-text{
                        font-size: 12px;
                        color: #A8A8A8;
                        padding: 2px 12px;
                        border-radius: 20px;
                        border: 1px solid #A8A8A8;
                        background: rgba(220, 220, 220, 0.1);
                        &.actice{
                            color: #F3C11D;
                            border-color: #F3C11D;
                            background: rgba(243, 193, 29, 0.1);
                        }
                    }
                }
                .expert-list {
                    padding: 16px 0;
                    font-size: 14px;
                    .list-one {
                        padding-top: 8px;
                        .one-info {
                            // display: flex;
                            color: #666666;
                            line-height: 18px;
                            padding-bottom: 2px;
                            .one-name {
                                flex: none;
                                color: rgba(102, 102, 102, 0.5);
                            }
                            &.last-one {
                                padding-top: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            }
                        }
                        .one-type {
                            padding-top: 8px;
                            display: flex;
                            justify-content: space-around;
                            .type-item {
                                width: 20%;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                .type-img {
                                    width: 48px;
                                    height: 48px;
                                    border-radius: 50%;
                                    border: 1px solid #E5E5E5;
                                }
                                .type-name {
                                    padding-top: 2px;
                                    color: #666666;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
            &.list-wrap {
                margin-top: 12px;
                .list-title {
                    padding-bottom: 12px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #F5F5F5;
                }
            }
        }
        .list-content {
            padding: 12px 0;
        }
        .list-item {
            background-color: #fff;
            border-radius: 10px;
            // padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item-info {
                .item-top {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    .left-img {
                        width: 68px;
                        height: 68px;
                        border-radius: 8px;
                        .img-dom {
                            border-radius: 8px;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .left-content {
                        .content-title {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin-bottom: 4px;
                            font-size: 16px;
                            font-weight: 500;
                            .content-tag {
                                background-color: #2199f8;
                                color: #fff;
                                padding: 2px 8px;
                                border-radius: 15px;
                                font-size: 12px;
                                font-weight: 400;
                            }
                            .content-text {
                                font-size: 12px;
                                color: #2199F8;
                                font-weight: 400;
                            }
                        }
                        .content-desc {
                            font-size: 12px;
                            color: #999999;
                            line-height: 18px;
                        }
                    }
                }
                .select {
                    width: 105px;
                    margin-left: 80px;
                    margin-top: 10px;
                    ::v-deep{
                        .el-select__wrapper{
                            border: 1px solid #2199F8;
                            box-shadow: none;
                        }
                        .el-select__placeholder,.el-select__caret{
                            color: #2199F8;
                        }
                        .el-select__selection {
                            flex: none;
                            width: fit-content;
                        }
                        .el-select__placeholder {
                            position: static;
                            transform: none;
                            width: fit-content;
                        }
                    }
                }
            }
            .item-btn {
                color: #2199F8;
                padding: 4px 8px;
                border: 1px solid #2199F8;
                border-radius: 4px;
            }
        }
        .list-item + .list-item {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #F5F5F5;
        }
    }
    .bottom-btn {
        height: 52px;
        width: 100%;
        padding: 6px 32px;
        box-sizing: border-box;
        .share-btn {
            color: #fff;
            text-align: center;
            border-radius: 20px;
            padding: 8px;
            background: linear-gradient(180deg, #76C3FF, #2199F8);
        }
    }
}
</style>