photo_uniapp/meeting/summary/index.vue

<template>
  <view class="bg container">
    <meet-sticky :bg="bg">
      <meet-navbar title="会议总结" :isFixed="false"></meet-navbar>
    </meet-sticky>
    <view class="content">
      <!-- 会议标题 -->
      <view class="border-item">
        <image
          src="/static/image/summary/meet_title.png"
          mode="scaleToFill"
          class="img-item"
        />
        <view class="title"> 00 </view>
      </view>
      <!-- 关键词 -->
      <view class="border-item">
        <image
          src="/static/image/summary/key_word.png"
          mode="scaleToFill"
          class="img-item"
        />
        <view class="flex key-box">
          <view class="key-item flex items-center">
            <view>蔡徐坤</view>
            <image
              src="/static/image/summary/close.png"
              mode="scaleToFill"
              class="close"
            />
          </view>
          <image
            src="/static/image/summary/add.png"
            mode="scaleToFill"
            class="add"
            @click="add"
          />
        </view>
      </view>

      <!-- 参会人 -->
      <view class="border-item">
        <image
          src="/static/image/summary/attendee .png"
          mode="scaleToFill"
          class="img-item"
        />
        <view class="flex key-box">
          <view class="key-item flex items-center">
            <view>蔡徐坤</view>
            <image
              src="/static/image/summary/edit.png"
              mode="scaleToFill"
              class="close"
              @click="edit"
            />
          </view>
        </view>
      </view>

      <!-- 会议总结 -->
      <view class="border-item">
        <image
          src="/static/image/summary/summary.png"
          mode="scaleToFill"
          class="img-item"
        />
        <view class="title">
          AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会。
        </view>
      </view>

      <!-- 会议摘要 -->
      <view class="border-item">
        <image
          src="/static/image/summary/abstract.png"
          mode="scaleToFill"
          class="img-item"
        />
        <view class="title">
          AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会。
        </view>
      </view>

      <!-- 会议要点-->
      <view class="border-item">
        <image
          src="/static/image/summary/points.png"
          mode="scaleToFill"
          class="img-item"
        />
        <view class="title">
          AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会、AI会议、智能助手、需求评审会。
        </view>
      </view>
      <!-- 底部 -->
      <view class="footer flex">
        <view class="btn push">
          <image
            src="/static/image/summary/upcloud.png"
            mode="scaleToFill"
            class="icon"
          />
          <view>导出</view>
        </view>
        <view class="btn op">
          <image
            src="/static/image/summary/op.png"
            mode="scaleToFill"
            class="icon"
          />
          <view>格式优化</view>
        </view>
      </view>

      <!-- 弹窗 -->
      <meet-pop
        :dialogShow="popConfig.show"
        :btnType="popConfig.btnType"
        :dialogTitle="popConfig.title"
        @handleConfirm="confirm"
        @handleCancel="cancel"
      >
        <view>
          <u-input v-model="popConfig.value"></u-input>
        </view>
      </meet-pop>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bg: "",
      meetData: {},
      popConfig: {
        show: false,
        title: "编辑参会人",
        btnType: 2,
        value: "",
      },
    };
  },
  methods: {
    add() {
      this.popConfig.show = true;
      this.popConfig.title = "编辑参会人";
    },
    edit() {
      this.popConfig.show = true;
      this.popConfig.title = "添加关键词";
    },
    confirm() {
      this.popConfig.show = false;
    },
    cancel() {
      this.popConfig.show = false;
    },
  },
};
</script>

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

.footer {
  height: 180rpx;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f2f7fe;
  border-top: 4rpx #fff solid;
  box-sizing: border-box;
  padding: 0 24rpx;
  padding-top: 16rpx;
  .btn {
    height: 80rpx;
    line-height: 80rpx;
    font-weight: 700;
    font-size: 30rpx;
    box-sizing: border-box;
    display: flex;
    align-content: center;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .push {
    margin-right: 20rpx;
    color: #1467ff;
    width: 248rpx;
    border: 2rpx solid #1467ff;
  }
  .op {
    background-color: #1467ff;
    width: 434rpx;
    color: #fff;
  }
  .icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 12rpx;
  }
}
.content {
  padding-bottom: 200rpx;
}
.container {
  padding: 24rpx;
  background-color: #e3edfe;
}
.add {
  width: 148rpx;
  height: 72rpx;
}
.key-box {
  flex-wrap: wrap;
}
.key-item {
  padding: 16rpx 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-right: 16rpx;
}
.close {
  width: 32rpx;
  height: 32rpx;
  margin-left: 16rpx;
}
.border-item {
  padding: 24rpx;
  border: 2rpx solid #fff;
  border-radius: 24rpx;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  margin-bottom: 20rpx;
  .title {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    line-height: 1.6;
  }
}
.img-item {
  width: 164rpx;
  height: 40rpx;
  margin-bottom: 16rpx;
}
::v-deep .u-border {
  border-style: none !important;
  height: 80rpx;
  background-color: #e9f1fd;
  border-radius: 16rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #93999f;
  box-sizing: border-box;
}
</style>