<template>
  <view>
    <view class="record-item mb-24">
      <view class="flex justify-between items-center">
        <view class="mb-20 title">
          这是一个标题
          <text class="status" :class="status[1]"> 这是状态 </text>
        </view>
        <view @click.stop="upMask"> 1111 </view>
      </view>
      <view class="flex justify-between items-center txt">
        <view> 这是时间 </view>
        <view class="">这是时长</view>
      </view>
      <view class="mask" v-if="popup">
        <view>导出</view>
        <view>重命名</view>
        <view>删除</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: ["wait", "success"],
      popup: false,
    };
  },
  methods: {
    upMask() {
      this.popup = !this.popup;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../common.scss";

.status {
  //   line-height: 40rpx;
  padding: 4rpx 16rpx;
  border: 1rpx solid;
  border-radius: 8rpx;
  margin-left: 12rpx;
  font-weight: 400;
  font-size: 24rpx;
}
.wait {
  border: #1467ff 1rpx solid;
  color: #1467ff;
  background-color: #1466ff11;
}
.success {
  border: #1eb066 1rpx solid;
  color: #1eb066;
  background-color: #1eb06611;
}
.mask {
  position: absolute;
  width: 168rpx;
  height: 232rpx;
  background-color: #fff;
  border-radius: 16rpx;
  top: 80rpx;
  right: 16rpx;
  padding: 24rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.record-item {
  position: relative;
  //   height: 168rpx;
  border-radius: 24rpx;
  border: 2rpx #fff solid;
  padding: 32rpx 24rpx;
  padding-bottom: 36rpx;
  .title {
    font-weight: 700;
    font-size: 28rpx;
    color: #23262b;
    line-height: 40rpx;
  }
  .txt {
    font-weight: 400;
    font-size: 28rpx;
    color: #4b5158;
  }
}
</style>