143 lines
3.0 KiB
Vue
143 lines
3.0 KiB
Vue
<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> |