<template>
  <div class="container">
    <meet-sticky :bg="bg">
      <meet-navbar title="会议记录" :isFixed="false"></meet-navbar>
    </meet-sticky>
    <div>
      <div class="mb-30">
        <u-search
          placeholder="日照香炉生紫烟"
          v-model="keyword"
          :showAction="false"
          :customStyle="customStyle1"
        ></u-search>
      </div>
      <view>
        <view class="record-item mb-24">
          <view class="flex justify-between items-center">
            <view class="title"> 这是一个标题 </view>
            <view>
              <image
                src="/static/image/user/share.png"
                mode="scaleToFill"
                class="icon"
              />
              <image
                src="/static/image/user/more.png"
                mode="scaleToFill"
                class="icon"
                @click.stop="upMask"
              />
            </view>
          </view>

          <view class="mask" v-if="popup">
            <view>导出</view>
            <view>重命名</view>
            <view>删除</view>
          </view>
        </view>
      </view>
    </div>
  </div>
</template>

 <script>
export default {
  data() {
    return {
      keyword: "遥看瀑布挂前川",
      bg: "",
      popup: false,
      customStyle1: {
        background:
          "linear-gradient( 180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.6) 100%)",
        borderRadius: "40rpx",
        border: " 2rpx solid #FFFFFF",
      },
    };
  },
  methods: {
    upMask() {
      this.popup = !this.popup;
    },
  },
};
</script>
    
<style lang="scss" scoped>
@import "../common.scss";
.icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 16rpx;
}
.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;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  .title {
    font-weight: 700;
    font-size: 28rpx;
    color: #23262b;
    // line-height: 40rpx;
  }
}
.container {
  min-height: 100vh;
  background-color: #d1dcfe;
  padding: 20rpx 24rpx;
}
::v-deep .u-search__content {
  background-color: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
}
::v-deep .u-search__content__input {
  background-color: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
}
</style>