<script setup>
  import { onLoad } from '@dcloudio/uni-app'

  onLoad(e => {
    console.log(e, '==')
  })
</script>

<template>
  <view class="details-index">
    <view class="top-name">
      <text class="title">Admin的视频的会议</text>
      <view class="date-box">
        <image
          src="/static/images/my-index/date-icon.png"
          mode="heightFix"
          class="icon-img"
        ></image>
        <text class="des">12月14日(周五) 13:45-16:09</text>
      </view>
      <view class="id-box">
        <image
          src="/static/images/my-index/id-icon.png"
          mode="heightFix"
          class="icon-img"
        ></image>
        <text class="des">会议ID：8755 8445</text>
      </view>
      <view class="user-box">
        <view class="user-text">
          <image
            src="/static/images/my-index/user-icon.png"
            mode="heightFix"
            class="icon-img"
          ></image>
          <text class="des">参会人：</text>
        </view>
        <view class="img-list">
          <view v-for="item in 3" :key="item" class="item-box">
            <image
              src="/static/images/public/random2.png"
              mode="aspectFit"
              class="avatar"
            ></image>
            <text>名字</text>
          </view>
        </view>
      </view>
    </view>

    <view v-for="item in 3" class="public-meeting-card">
      <image
        src="https://q9.itc.cn/q_70/images01/20241011/856bff05ebe54098ad4af2cb59e02ae8.png"
        mode="aspectFill"
        class="left-img"
      ></image>
      <view class="right-box">
        <text>Admin的视频的会议</text>
        <text>12月27日13:27</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/meeting-record.scss';

  .details-index {
    padding: 48rpx 24rpx 0 24rpx;

    .icon-img {
      height: 32rpx;
      margin-right: 16rpx;
    }

    .top-name {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-family: PingFang SC, PingFang SC;
      font-style: normal;
      text-transform: none;
      .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }
      .des {
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
        text-align: center;
      }
      .date-box,
      .id-box {
        display: flex;
        align-items: center;
      }

      .date-box {
        margin: 32rpx 0;
      }
      .user-box {
        margin-top: 32rpx;
        display: flex;
        flex-direction: column;
        .user-text {
          display: flex;
          align-items: center;
        }
        .img-list {
          display: flex;
          margin-top: 16rpx;
          .item-box + .item-box {
            margin-left: 32rpx;
          }
          .item-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .avatar {
              width: 80rpx;
              height: 80rpx;
              border-radius: 80rpx;
              margin-bottom: 8rpx;
            }
            text {
              font-weight: 500;
              font-size: 24rpx;
              color: #999999;
            }
          }
        }
      }
    }
  }

  .public-meeting-card {
    margin-top: 47rpx;
    padding-top: 47rpx;
    border-top: 2rpx solid #f9f9f9;
  }
</style>
