pray静态第一版
This commit is contained in:
minimaxagent1
parent
78154ce793
commit
3ae66585c4
|
|
@ -13,66 +13,70 @@
|
|||
</view>
|
||||
|
||||
<!-- 祈福信息表单 -->
|
||||
<view class="prayer-form">
|
||||
<view class="form-title">
|
||||
<text class="title-text">祈福信息</text>
|
||||
</view>
|
||||
|
||||
<!-- 祈福人姓名 -->
|
||||
<view class="form-item">
|
||||
<text class="label">祈福人姓名</text>
|
||||
<input class="input-field" placeholder="请输入姓名" v-model="formData.name" />
|
||||
</view>
|
||||
|
||||
<!-- 祈福类型 -->
|
||||
<view class="form-item">
|
||||
<text class="label">祈福类型</text>
|
||||
<view class="select-field" @click="showPrayerTypePicker">
|
||||
<text class="select-text">{{ selectedPrayerType }}</text>
|
||||
<text class="arrow">></text>
|
||||
<view class="prayer-form-background">
|
||||
<view class="prayer-form">
|
||||
<view class="form-title">
|
||||
<text class="title-text">祈福信息</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 为他人祈福 -->
|
||||
<view class="form-item">
|
||||
<text class="label">为他人祈福</text>
|
||||
<view class="radio-group">
|
||||
<view class="radio-item" @click="formData.forOthers = true">
|
||||
<view class="radio-button" :class="{ 'checked': formData.forOthers }">
|
||||
<text v-if="formData.forOthers" class="checkmark">✓</text>
|
||||
</view>
|
||||
<text class="radio-text">是</text>
|
||||
</view>
|
||||
<view class="radio-item" @click="formData.forOthers = false">
|
||||
<view class="radio-button" :class="{ 'checked': !formData.forOthers }">
|
||||
<text v-if="!formData.forOthers" class="checkmark">✓</text>
|
||||
</view>
|
||||
<text class="radio-text">否</text>
|
||||
|
||||
<!-- 祈福人姓名 -->
|
||||
<view class="form-item">
|
||||
<text class="label">祈福人姓名</text>
|
||||
<input class="input-field" placeholder="请输入姓名" v-model="formData.name" />
|
||||
</view>
|
||||
|
||||
<!-- 祈福类型 -->
|
||||
<view class="form-item">
|
||||
<text class="label">祈福类型</text>
|
||||
<view class="select-field" @click="showPrayerTypePicker">
|
||||
<text class="select-text">{{ selectedPrayerType }}</text>
|
||||
<text class="arrow">></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 心愿内容 -->
|
||||
<view class="form-item">
|
||||
<text class="label">心愿内容</text>
|
||||
<view class="textarea-container">
|
||||
<textarea
|
||||
class="textarea-field"
|
||||
placeholder="请填写心愿内容"
|
||||
v-model="formData.wish"
|
||||
maxlength="50"
|
||||
:show-confirm-bar="false"
|
||||
|
||||
<!-- 为他人祈福 -->
|
||||
<view class="form-item">
|
||||
<text class="label">为他人祈福</text>
|
||||
<view class="radio-group">
|
||||
<view class="radio-item" @click="formData.forOthers = true">
|
||||
<text class="radio-text">是</text>
|
||||
<view class="radio-button" :class="{ 'checked': formData.forOthers }">
|
||||
<text v-if="formData.forOthers" class="checkmark">✓</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="radio-item" @click="formData.forOthers = false">
|
||||
<text class="radio-text">否</text>
|
||||
<view class="radio-button" :class="{ 'checked': !formData.forOthers }">
|
||||
<text v-if="!formData.forOthers" class="checkmark">✓</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 心愿内容 -->
|
||||
<view class="form-item">
|
||||
<text class="label">心愿内容</text>
|
||||
<view class="textarea-container">
|
||||
<textarea
|
||||
class="textarea-field"
|
||||
placeholder="请填写心愿内容"
|
||||
v-model="formData.wish"
|
||||
maxlength="50"
|
||||
:show-confirm-bar="false"
|
||||
/>
|
||||
<text class="char-counter">{{ formData.wish.length }}/50</text>
|
||||
<text class="char-counter">{{ formData.wish.length }}/50</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 敬香按钮 -->
|
||||
<view class="incense-button" @click="submitPrayer">
|
||||
<text class="button-text">敬香</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -233,18 +237,18 @@ page {
|
|||
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: -600rpx; /* 向上移动432rpx (312+120) */
|
||||
top: -600rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh + 432rpx); /* 增加高度以补偿向上移动的距离 */
|
||||
height: calc(100vh + 432rpx);
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
.background-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -255,8 +259,8 @@ page {
|
|||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding-top: 120rpx; /* 为固定导航栏留出空间 */
|
||||
padding-bottom: 160rpx; /* 为固定敬香按钮留出空间 */
|
||||
padding-top: 120rpx;
|
||||
padding-bottom: 160rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -267,149 +271,164 @@ page {
|
|||
width: 100%;
|
||||
margin-top: 128rpx;
|
||||
margin-bottom: 60rpx;
|
||||
z-index: 3;
|
||||
|
||||
.censer-icon {
|
||||
width: 648rpx;
|
||||
height: 648rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.censer-icon {
|
||||
width: 648rpx;
|
||||
height: 648rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.prayer-form {
|
||||
.prayer-form-background {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 80rpx);
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 040rpx 30rpx 40rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||
margin-top: 600rpx;
|
||||
border: 2rpx solid #E8E8E8;
|
||||
width: 100%;
|
||||
background-color: #FDFCF5;
|
||||
display: flex;
|
||||
padding: 0 50rpx 30rpx 50rpx;
|
||||
margin-top: 625rpx;
|
||||
z-index: 2;
|
||||
|
||||
.prayer-form {
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx 60rpx 0 60rpx;
|
||||
width: 650rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #c0a4ae;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
|
||||
.title-text {
|
||||
width: 126rpx;
|
||||
height: 44rpx;
|
||||
font-weight: 400;
|
||||
color: #695347;
|
||||
font-size: 32rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 30rpx;
|
||||
margin: 15rpx 0 15rpx 0 ;
|
||||
display: flex;
|
||||
border-bottom: #C7A26D 1px solid;
|
||||
padding: 25rpx 0 25rpx 0;
|
||||
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.input-field{
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 15rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-field,
|
||||
.select-field {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #E0E0E0;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
background-color: #FAFAFA;
|
||||
}
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.select-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
padding:0 30rpx 0 30rpx;
|
||||
width: 100%;
|
||||
|
||||
.select-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.select-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
|
||||
.radio-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #DDD;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 12rpx;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.radio-button.checked {
|
||||
border-color: #8B2E2E;
|
||||
background-color: #8B2E2E;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
//border: #C7A26D 1px solid;
|
||||
margin-left: 40rpx;
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 60rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #DDD;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 12rpx;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.checked {
|
||||
border-color: #8B2E2E;
|
||||
background-color: #8B2E2E;
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
font-size: 20rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
padding-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.textarea-field {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
border: 1rpx solid #E0E0E0;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
background-color: #FAFAFA;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
position: absolute;
|
||||
bottom: 15rpx;
|
||||
right: 15rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
|
||||
.textarea-field {
|
||||
width: 400rpx;
|
||||
height: 120rpx;
|
||||
//border: 1rpx solid #e10c0c;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.incense-button {
|
||||
|
|
@ -419,19 +438,19 @@ page {
|
|||
transform: translateX(-50%);
|
||||
width: 600rpx;
|
||||
height: 100rpx;
|
||||
background-color: #8B2E2E; /* 深红色背景 */
|
||||
border-radius: 50rpx; /* 圆角设计 */
|
||||
background-color: #8B2E2E;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
.button-text {
|
||||
color: #FFFFFF;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user