WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pray静态第一版

Browse Source
This commit is contained in:
minimaxagent1 2025-08-05 10:43:31 +08:00
parent 78154ce793
commit 3ae66585c4
1 changed files with 199 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
pages/pray/pray.vue
View File

@ -13,6 +13,7 @@
</view> </view>
<!-- 祈福信息表单 --> <!-- 祈福信息表单 -->
<view class="prayer-form-background">
<view class="prayer-form"> <view class="prayer-form">
<view class="form-title"> <view class="form-title">
<text class="title-text">祈福信息</text> <text class="title-text">祈福信息</text>
@ -38,16 +39,18 @@
<text class="label">为他人祈福</text> <text class="label">为他人祈福</text>
<view class="radio-group"> <view class="radio-group">
<view class="radio-item" @click="formData.forOthers = true"> <view class="radio-item" @click="formData.forOthers = true">
<text class="radio-text">是</text>
<view class="radio-button" :class="{ 'checked': formData.forOthers }"> <view class="radio-button" :class="{ 'checked': formData.forOthers }">
<text v-if="formData.forOthers" class="checkmark">✓</text> <text v-if="formData.forOthers" class="checkmark">✓</text>
</view> </view>
<text class="radio-text">是</text>
</view> </view>
<view class="radio-item" @click="formData.forOthers = false"> <view class="radio-item" @click="formData.forOthers = false">
<text class="radio-text">否</text>
<view class="radio-button" :class="{ 'checked': !formData.forOthers }"> <view class="radio-button" :class="{ 'checked': !formData.forOthers }">
<text v-if="!formData.forOthers" class="checkmark">✓</text> <text v-if="!formData.forOthers" class="checkmark">✓</text>
</view> </view>
<text class="radio-text">否</text>
</view> </view>
</view> </view>
</view> </view>
@ -67,12 +70,13 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<!-- 敬香按钮 --> <!-- 敬香按钮 -->
<view class="incense-button" @click="submitPrayer"> <view class="incense-button" @click="submitPrayer">
<text class="button-text">敬香</text> <text class="button-text">敬香</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
@ -233,19 +237,19 @@ page {
.background-container { .background-container {
position: fixed; position: fixed;
top: -600rpx; /* 向上移动432rpx (312+120) */ top: -600rpx;
left: 0; left: 0;
width: 100%; width: 100%;
height: calc(100vh + 432rpx); /* 增加高度以补偿向上移动的距离 */ height: calc(100vh + 432rpx);
z-index: -1; z-index: -1;
overflow: hidden; overflow: hidden;
}
.background-image { .background-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
}
.header { .header {
position: relative; position: relative;
@ -255,8 +259,8 @@ page {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
padding: 0 15rpx; padding: 0 15rpx;
padding-top: 120rpx; /* 为固定导航栏留出空间 */ padding-top: 120rpx;
padding-bottom: 160rpx; /* 为固定敬香按钮留出空间 */ padding-bottom: 160rpx;
z-index: 1; z-index: 1;
} }
@ -267,70 +271,83 @@ page {
width: 100%; width: 100%;
margin-top: 128rpx; margin-top: 128rpx;
margin-bottom: 60rpx; margin-bottom: 60rpx;
} z-index: 3;
.censer-icon { .censer-icon {
width: 648rpx; width: 648rpx;
height: 648rpx; height: 648rpx;
opacity: 0.8; opacity: 0.8;
} }
}
.prayer-form { .prayer-form-background {
position: fixed; position: fixed;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: calc(100% - 80rpx); width: 100%;
background-color: #FFFFFF; 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; 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;
} }
.form-title { .form-title {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
margin-bottom: 40rpx;
}
.title-text { .title-text {
font-size: 36rpx; width: 126rpx;
font-weight: bold; height: 44rpx;
color: #333; font-weight: 400;
color: #695347;
font-size: 32rpx;
line-height: normal;
}
} }
.form-item { .form-item {
margin-bottom: 30rpx; margin: 15rpx 0 15rpx 0 ;
} display: flex;
border-bottom: #C7A26D 1px solid;
padding: 25rpx 0 25rpx 0;
.label { .label {
font-size: 28rpx; font-size: 28rpx;
color: #666; color: #666;
margin-bottom: 15rpx;
font-weight: 500; font-weight: 500;
white-space: nowrap;
} }
.input-field, .input-field{
.select-field { padding-left: 20rpx;
width: 100%; }
height: 80rpx; }
border: 1rpx solid #E0E0E0;
border-radius: 12rpx; .form-item:last-child {
padding: 0 20rpx; border-bottom: none;
font-size: 28rpx;
color: #333;
box-sizing: border-box;
background-color: #FAFAFA;
} }
.select-field { .select-field {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-right: 20rpx; padding:0 30rpx 0 30rpx;
} width: 100%;
.select-text { .select-text {
font-size: 28rpx; font-size: 28rpx;
@ -341,20 +358,20 @@ page {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
} }
}
.radio-group { .radio-group {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 15rpx; //border: #C7A26D 1px solid;
} margin-left: 40rpx;
.radio-item { .radio-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 60rpx; margin-right: 60rpx;
}
.radio-item:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -369,12 +386,12 @@ page {
margin-right: 12rpx; margin-right: 12rpx;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.3s ease; transition: all 0.3s ease;
}
.radio-button.checked { &.checked {
border-color: #8B2E2E; border-color: #8B2E2E;
background-color: #8B2E2E; background-color: #8B2E2E;
} }
}
.checkmark { .checkmark {
font-size: 20rpx; font-size: 20rpx;
@ -385,32 +402,34 @@ page {
.radio-text { .radio-text {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
padding-right: 12rpx;
}
}
} }
.textarea-container { .textarea-container {
position: relative; position: relative;
}
.textarea-field { .textarea-field {
width: 100%; width: 400rpx;
height: 120rpx; height: 120rpx;
border: 1rpx solid #E0E0E0; //border: 1rpx solid #e10c0c;
border-radius: 12rpx; border-radius: 12rpx;
padding: 20rpx; padding: 0 20rpx 0 20rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
box-sizing: border-box; box-sizing: border-box;
background-color: #FAFAFA;
resize: none; resize: none;
} }
.char-counter { .char-counter {
position: absolute; position: absolute;
bottom: 15rpx; bottom: 0;
right: 15rpx; right: 0;
font-size: 22rpx; font-size: 22rpx;
color: #999; color: #999;
} }
}
.incense-button { .incense-button {
position: fixed; position: fixed;
@ -419,14 +438,13 @@ page {
transform: translateX(-50%); transform: translateX(-50%);
width: 600rpx; width: 600rpx;
height: 100rpx; height: 100rpx;
background-color: #8B2E2E; /* 深红色背景 */ background-color: #8B2E2E;
border-radius: 50rpx; /* 圆角设计 */ border-radius: 50rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3); box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);
z-index: 10; z-index: 10;
}
.button-text { .button-text {
color: #FFFFFF; color: #FFFFFF;
@ -434,4 +452,5 @@ page {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
}
</style> </style>