<template>
  <view class="container">
    <view class="form-row">
      <!-- 上联输入区域 -->
      <view class="input-group">
        <text class="label">上联首字：</text>
        <input 
          class="underline-input" 
          type="text" 
          v-model="upperCouplet" 
          placeholder="______"
          maxlength="1"
          @input="onInputUpper"
        />
      </view>
      
      <!-- 下联输入区域 -->
      <view class="input-group">
        <text class="label">下联首字：</text>
        <input 
          class="underline-input" 
          type="text" 
          v-model="lowerCouplet" 
          placeholder="______"
          maxlength="1"
          @input="onInputLower"
        />
      </view>
    </view>
    
    <!-- 显示输入结果 -->
    <view class="result" v-if="showResult">
      <text>输入结果：{{ upperCouplet }}{{ lowerCouplet }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      upperCouplet: '', // 上联首字
      lowerCouplet: ''  // 下联首字
    }
  },
  
  computed: {
    showResult() {
      return this.upperCouplet || this.lowerCouplet
    }
  },
  
  methods: {
    onInputUpper(e) {
      // 可以在这里处理输入验证等逻辑
      console.log('上联输入：', this.upperCouplet)
    },
    
    onInputLower(e) {
      // 可以在这里处理输入验证等逻辑
      console.log('下联输入：', this.lowerCouplet)
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #FF7F50; /* 橙色背景 */
  min-height: 100vh; /* 全屏高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.form-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px; /* 两个输入组之间的间距 */
  flex-wrap: wrap; /* 小屏幕时自动换行 */
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.label {
  color: white; /* 白色文字 */
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
}

.underline-input {
  width: 120px; /* 输入框宽度 */
  height: 40px; /* 输入框高度 */
  background-color: transparent; /* 透明背景 */
  border: none; /* 去掉边框 */
  border-bottom: 2px solid white; /* 白色下划线 */
  color: white; /* 白色文字 */
  font-size: 16px;
  text-align: center;
  outline: none; /* 去掉聚焦边框 */
  padding: 5px;
}

/* 输入框占位符样式 */
.underline-input::placeholder {
  color: rgba(255, 255, 255, 0.7); /* 半透明白色 */
}

/* 聚焦时的样式 */
.underline-input:focus {
  border-bottom: 3px solid #fff; /* 加粗下划线 */
}

.result {
  margin-top: 30px;
  color: white;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 5px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .form-row {
    flex-direction: column; /* 小屏幕时垂直排列 */
    gap: 20px;
  }
  
  .input-group {
    margin-bottom: 15px;
  }
}
</style>