caimei-applets-mcare/pages/goods/procurement_info.vue

<template>
   <view style="background-color: #fff;position: relative;">
       <view class="procure_info">
           <view class="info_card">
               <view class="card_title">
                   采购商品
               </view>
               <view class="card_line"></view>
               <view class="card_store">
                   <image class="img" src="" mode="aspectFill"></image>
                   <view class="store_title">
                      韩国恩盛进口氢洁气小气泡清韩进口氢洁气小气泡清...
                   </view>
               </view>
               <view class="back-filter"></view>
           </view>
           <view class="info_Initiator">
               <view class="card_title">
                   发起者需求
               </view>
               <view class="card_line"></view>
               <view class="Initiator_contant">
                   <view class="Initiator_name">
                       <view class="Initiator_icon">
                           发起者
                       </view>
                       <view class="user">
                           科医人医疗激光设备贸易公司
                       </view>
                   </view>
                   <view class="Initiator_price">
                       <view class="unit_price">
                           <view class="title">
                               期望单价：
                           </view>
                           <view class="price">
                               ￥500.00
                           </view>
                       </view>
                       <view class="unit_sum">
                           <view class="title">
                               采购数量：
                           </view>
                           <view class="price">
                               50
                           </view>
                       </view>
                   </view>
               </view>
               <view class="status">
<!--                   <image style="width: 100%;height: 100%;" src="@/static/procurement/success.png" mode="aspectFill"></image> -->
                    <image style="width: 100%;height: 100%;" src="@/static/procurement/delete.png" mode="aspectFill"></image>
               </view>
               <view class="back-filter"></view>
           </view>
           <view class="info_Participant">
               <view class="card_title">
                   参与者需求（3）
               </view>
               <view class="card_line"></view>
               <view class="Initiator_contant" v-for="(item, index) in 3" :key="item" :style="{margin: index!== 0 ? '24rpx 8rpx 16rpx 8rpx' : '40rpx 8rpx 16rpx 8rpx'}">
                   <view class="Initiator_name">
                       <view class="Initiator_icon">
                           参与者
                       </view>
                       <view class="user">
                           科医人医疗激光设备贸易公司
                       </view>
                   </view>
                   <view class="Initiator_price">
                       <view class="unit_price">
                           <view class="title">
                               期望单价：
                           </view>
                           <view class="price">
                               ￥500.00
                           </view>
                       </view>
                       <view class="unit_sum">
                           <view class="title">
                               采购数量：
                           </view>
                           <view class="price">
                               50
                           </view>
                       </view>
                   </view>
               </view>
               <view class="empty" v-if='false'>
                   暂无参与者~
               </view>
               <view class="back-filter"></view>
           </view>
       </view>
       <view class="info_btn">
           <proBtn>删除</proBtn>
           <proBtn color='#FFFFFF' background='#F3B574'>修改</proBtn>
       </view>
   </view>
</template>

<script>
    import proBtn from './components/procurement-btn.vue'
    export default {
        components: {
            proBtn,
        },
        data() {
            return {
                
            }
        }
    }
</script>

<style lang="scss" scoped>
.img {
    width: 136rpx;
    height: 136rpx;
    border: 1px dotted black;
    margin-right: 24rpx;
}
.procure_info {
    background-color: #F7F7F7;
    padding: 24rpx;
}
.procure_info .info_card {
    height: 340rpx;
    padding: 24rpx;
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    box-sizing: border-box;
    position: relative;
}
.card_title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
}
.card_line {
    border: 1rpx solid #E1E1E1;
    margin-top: 24rpx;
}
.info_card .card_store {
    margin: 40rpx 8px;
    padding: 12rpx;
    background-color: #F7F7F7;
    display: flex;
    align-items: center;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.info_card .store_title {
    width: 442rpx;
    font-size: 26rpx;
    color: #333333;
    line-height: 48rpx;
}
.procure_info .info_Initiator {
    background-color: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx;
    margin: 24rpx 0;
    box-sizing: border-box;
    position: relative;
}
.Initiator_contant {
    height: 220rpx;
    background-color: #F7F7F7;
    margin: 40rpx 8rpx 16rpx 8rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 40rpx 24rpx;
    box-sizing: border-box;
}
.Initiator_contant .Initiator_name {
    display: flex;
    align-items: center;
}
.Initiator_contant .Initiator_icon {
    width: 96rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    text-align: center;
    color: #fff;
    background-color: #F3B574;
    border-radius: 8rpx;
    margin-right: 24rpx;
}
.Initiator_name .user{
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
}
.Initiator_contant .Initiator_price {
    margin-top: 48rpx;
    display: flex;
    align-items: center;
}
.Initiator_price .unit_price,
.Initiator_price .unit_sum{
    display: flex;
    align-items: center;
}
.Initiator_price .unit_sum {
    margin-left: 120rpx;
}
.title {
    color: #999999;
    font-size: 26rpx;
    font-weight: 400;
}
.price {
    color: #333333;
    font-size: 26rpx;
}
.info_Participant {
    background-color: #fff;
    padding: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 256rpx;
    position: relative;
}
.empty {
    height: 250rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    color: #B2B2B2;
}
.info_btn {
    position: fixed;
    bottom: 0%;
    left: 0;
    padding: 16rpx 56rpx 84rpx 56rpx;
    justify-content: space-between;
    display: flex;
    align-items: center;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}
.status {
    position: absolute;
    width: 150rpx;
    height: 100rpx;
    right: 48rpx;
    top: 48rpx;
}
.back-filter {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.7);
    height: 100%;
    width: 100%;
}
</style>