uniapp表白界面代码

以下是一个简单的uniapp表白界面代码示例：

<template>
  <view class="container">
    <image class="bg-image" src="/static/images/bg.jpg"></image>
    <view class="content">
      <view class="title">{{title}}</view>
      <view class="message">{{message}}</view>
      <view class="sender">{{sender}}</view>
      <view class="receiver">{{receiver}}</view>
      <button class="send-button" @click="sendLove">发送表白</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "表白",
      message: "",
      sender: "",
      receiver: ""
    };
  },
  methods: {
    sendLove() {
      // TODO: 实现发送表白的逻辑
      uni.showToast({
        title: "发送成功",
        icon: "success"
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.bg-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

.title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.message,
.sender,
.receiver {
  font-size: 24px;
  margin-bottom: 10px;
}

.send-button {
  width: 200px;
  height: 50px;
  background-color: #ff69b4;
  color: #fff;
  font-size: 24px;
  border: none;
  border-radius: 10px;
  margin-top: 20px;
}
</style>

在这个示例中，我们使用了uniapp的模板语法来定义页面结构，使用了uniapp提供的组件来实现页面效果。在`data`中定义了页面需要用到的数据，使用`methods`来定义页面逻辑，使用`uni.showToast`来模拟发送表白的逻辑。在样式中，使用了flex布局和背景图片等样式来实现页面效果。