circulation_ancientCoins_new/components/listWrap.vue

<template>
    <view>
    <view class="bed-wait-item" v-for="(item, index) in bedWaitList" :key="index" @tap="lookDetail(item)">

        <view class="bed-wait-info">
            <view class="bed-wait-name PfScMedium">{{ item.coin_name }}</view>
            
            <view class="bed-desc flex">
                <view :class="['bed-age',type == '1' ? 'bold':'']">{{ item.buying_price }}元{{ type == '2' ?'进':'' }}</view>
                <view class="bed-sex bed-sex-bold" v-if="type == '2'">{{ item.price }}元售</view>
            </view>
        </view>

        <view class="bed-wait-time">
            <view class="bed-left">
                <!-- 布局修改 -->
                <view class="bed-left-flex">
                    <view class="bed-sex">{{ item.year }}</view>
                    <view class="bed-visit-format" v-if="item.format">{{ item.format }}</view>
                </view>
                <view>{{ item.rating_department }}</view>
            </view>
            
            <view class="bed-checkin-time flex-between">
                <view class="bed-visit-time">{{ item.operate_time }}</view>
                <view>{{ item.rating_code }}</view>
            </view>
        </view>
    </view>
</view>

</template>
<script>
export default {
    props:['bedWaitList','type'],
    options: { styleIsolation: "shared" },
    components: {
    
    },
    data() {
        return {
            list:[]
        }
    },
    methods:{
        lookDetail(item) {
            uni.setStorageSync('detail', JSON.stringify(item))
            let url = `/pages/coinsDetail/index?id=${item.rating_code}`
            this.$nav.navToPath(url)
        },
       
    }
}
</script>
<style lang="scss" scoped>
.bold{
    font-weight: 500 !important;
    color: #000000 !important;

}
.bed-wait-item {
    padding: 36rpx 0rpx;
    border-bottom: 2rpx solid #F1F1F1;
    position: relative;
   
}

.bed-wait-info {
    display: flex;
    align-items: center;

    .bed-wait-name {
        font-size: 32rpx;
        color: #000000;
        margin-right: 24rpx;
        font-weight: 500;
    }

    .bed-visit-type-desc {
        padding: 0 18rpx;
        height: 40rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        line-height: normal;
        border-radius: 6rpx;
        margin-left: 24rpx;
        background: #F7FCFF;
        color: #007FD0;
        border: 1rpx solid #5FA1CB;

        &.ml-auto {
            margin-left: auto;
        }
    }

    .bed-desc {
        color: #999999;
        font-size: 28rpx;
        margin-left: auto;
        gap: 12rpx;
    }
 

    .bed-sex {
        font-size: 28rpx;
        font-weight: normal;
        line-height: 44rpx;
        color: #242833;
        letter-spacing: 0.86rpx;
    }
    .bed-sex-bold,.bed-age{
        font-family: PingFang SC;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 44rpx;
        letter-spacing: 0.86rpx;
        color: #000000;
    }
    .bed-age {
        font-size: 30rpx;
        font-weight: normal;
        line-height: 44rpx;
        letter-spacing: 0.86rpx;
        color: #999999;
        font-weight: normal;
    }
}

.bed-wait-time {
    display: flex;
    column-gap: 24rpx;
    margin-top: 16rpx;
    flex-direction: column;
    gap: 16rpx;
    view {
        font-size: 24rpx;
        color: #999999;
    }

    .bed-visit-format {
        border-radius: 6rpx;
        background: #EBEBEB;
        padding: 2rpx 16rpx;
        font-family: PingFang SC;
        font-size: 26rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #666666;
        width: fit-content;
    }

    .bed-left {
        display: flex;
        gap: 16rpx;
        align-items: center;
        justify-content: space-between;
    }
    .bed-left-flex{
        display: flex;
        gap: 24rpx;
        align-items: center;
    }
}
.flex-between{
    display: flex;
    justify-content: space-between;
}
</style>