<template>
    <div class="container">
      <meet-sticky :bg="bg">
        <meet-navbar title="会议中" :isFixed="false"></meet-navbar>
      </meet-sticky>
      <view class="list" v-for="(item, index) in 10" @click="">
        <view class="flex-left color-1">1</view>
        <view class="flex-child">
          <view class="flex-center">我公司碳中和具体的应用场景包括以下几方面:1.碳丝路APP-全民低碳场景的数据收集 碳普惠应用。 2.全国性碳交易平台数据。</view>
          <view class="flex-right">5"</view>
        </view>
      </view>
      <view class="footer">
        <view class="flex-1">
            <image class="img" src="/static/image/onlineDetails/list.png"></image>
            <view class="text">会议总结</view>
            <image class="img-top" src="/static/image/onlineDetails/ai.png"></image>
            <view class="time">00:05/01:55</view>
        </view>
        <image class="img01" src="/static/image/onlineDetails/prev.png"></image>
        <image class="img02" src="/static/image/onlineDetails/play.png"></image>
        <image class="img01" src="/static/image/onlineDetails/next.png"></image>
        <view class="flex-1">
            <image class="img" src="/static/image/onlineDetails/upload.png"></image>
            <view class="text">导出</view>
        </view>
      </view>
    </div>
  </template>
  
  <script>
  export default {
    components: {
    },
    data() {
      return {
        list: [],
      };
    },
    methods: {

    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "../common.scss";
  
  .container {
    min-height: 100vh;
    background-color: #d1dcfe;
    padding: 20rpx 0;
    padding-bottom: 200rpx;
  
    .list {
      display: flex;
      margin-top: 36rpx;
      padding: 0 24rpx;
  
      .flex-left {
        width: 56rpx;
        height: 56rpx;
        font-size: 36rpx;
        line-height: 56rpx;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        font-weight: bold;
      }
  
      .color-1 {
        background-color: #70CD9E;
      }
  
      .flex-child {
        display: flex;
        align-items: flex-end;
        flex: 1;
  
        .flex-center {
  
          margin: 0 16rpx 0 16rpx;
          border: 1px solid #fff;
          background-color: rbga(255, 255, 255, 0.5);
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 16rpx 24rpx;
        }
  
        .flex-right {
          color: #23262B;
          font-size: 28rpx;
        }
      }
  
    }
  
    .footer {
      background: rgba(255, 255, 255, 1);
      border-top-right-radius: 40rpx;
      border-top-left-radius: 40rpx;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 180rpx;
      display: flex;
      box-sizing: border-box;
      padding: 12rpx 48rpx;
      align-items: center;
      justify-content:space-between;
      .flex-1{
        position: relative;
        .img{
            width: 48rpx;
            height: 48rpx;
            display: block;
            margin: 0 auto;
        }
        .img-top{
            position: absolute;
            top: -30rpx;
            right: -50rpx;
            width: 84rpx;
            height: 34rpx;
        }
        .time{
            position: absolute;
            box-sizing: border-box;
            padding: 8rpx 20rpx;
            text-align: center;
            color: #23262B;
            font-size: 24rpx;
            border: 1px solid #fff;
            background: #E9EBF4;
            border-top-left-radius: 16rpx;
            border-top-right-radius: 16rpx;
            top: -100rpx;
            right: -90rpx;
        }
      }
      .img01{
        width:48rpx ;
        height: 48rpx;
      }
      .img02{
        width: 80rpx;
        height: 80rpx;
      }
      .text{
        color: #23262B;
        font-weight: bold;
        font-size: 22rpx;
        text-align: center;
      }
    }
  }
  </style>