解决小屏幕导致的则遮挡bug,method fixed->absolute
This commit is contained in:
WindowBird
parent
6d6ee3c2b5
commit
5bac70ac96
|
|
@ -4,12 +4,16 @@
|
|||
<custom-navbar title="在线祈福" />
|
||||
</view>
|
||||
<view class="background-container">
|
||||
<image class="background-image" :src="CommonEnum.BUDDHA_BACKGROUND" mode="aspectFit" />
|
||||
<image
|
||||
:src="CommonEnum.BUDDHA_BACKGROUND"
|
||||
class="background-image"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
</view>
|
||||
<view class="header">
|
||||
<!-- 香炉图标 -->
|
||||
<view class="censer-container">
|
||||
<image class="censer-icon" :src="CommonEnum.CENSER" mode="aspectFit" />
|
||||
<image :src="CommonEnum.CENSER" class="censer-icon" mode="aspectFit" />
|
||||
</view>
|
||||
|
||||
<!-- 祈福信息表单 -->
|
||||
|
|
@ -22,7 +26,11 @@
|
|||
<!-- 祈福人姓名 -->
|
||||
<view class="form-item">
|
||||
<text class="label">祈福人姓名</text>
|
||||
<input class="input-field" placeholder="请输入姓名" v-model="formData.name" />
|
||||
<input
|
||||
v-model="formData.name"
|
||||
class="input-field"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 祈福类型 -->
|
||||
|
|
@ -40,14 +48,24 @@
|
|||
<view class="radio-group">
|
||||
<view class="radio-item" @click="formData.forOthers = 1">
|
||||
<text class="radio-text">是</text>
|
||||
<view class="radio-button" :class="{ checked: formData.forOthers === 1 }">
|
||||
<text v-if="formData.forOthers === 1" class="checkmark">✓</text>
|
||||
<view
|
||||
:class="{ checked: formData.forOthers === 1 }"
|
||||
class="radio-button"
|
||||
>
|
||||
<text v-if="formData.forOthers === 1" class="checkmark"
|
||||
>✓
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="radio-item" @click="formData.forOthers = 2">
|
||||
<text class="radio-text">否</text>
|
||||
<view class="radio-button" :class="{ checked: formData.forOthers === 2 }">
|
||||
<text v-if="formData.forOthers === 2" class="checkmark">✓</text>
|
||||
<view
|
||||
:class="{ checked: formData.forOthers === 2 }"
|
||||
class="radio-button"
|
||||
>
|
||||
<text v-if="formData.forOthers === 2" class="checkmark"
|
||||
>✓
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -58,11 +76,11 @@
|
|||
<text class="label">心愿内容</text>
|
||||
<view class="textarea-container">
|
||||
<textarea
|
||||
class="textarea-field"
|
||||
placeholder="请填写心愿内容"
|
||||
v-model="formData.wish"
|
||||
maxlength="50"
|
||||
:show-confirm-bar="false"
|
||||
class="textarea-field"
|
||||
maxlength="50"
|
||||
placeholder="请填写心愿内容"
|
||||
/>
|
||||
<text class="char-counter">{{ formData.wish.length }}/50</text>
|
||||
</view>
|
||||
|
|
@ -76,391 +94,388 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import CommonEnum from '../../enum/common'
|
||||
import CustomNavbar from '../../components/custom-navbar/custom-navbar.vue'
|
||||
import BottomButton from '../../components/bottom-button/bottom-button.vue'
|
||||
import { submitPrayer } from '@/api/pray/pray'
|
||||
import CommonEnum from "../../enum/common";
|
||||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||||
import BottomButton from "../../components/bottom-button/bottom-button.vue";
|
||||
import { submitPrayer } from "@/api/pray/pray";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavbar,
|
||||
BottomButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
CommonEnum,
|
||||
loading: false,
|
||||
formData: {
|
||||
name: '',
|
||||
prayerType: '1', // 默认祈福类型
|
||||
forOthers: 2, // 默认不为他人祈福
|
||||
wish: '',
|
||||
},
|
||||
prayerTypes: [
|
||||
{ label: '学业', value: 1 },
|
||||
{ label: '健康', value: 2 },
|
||||
{ label: '姻缘', value: 3 },
|
||||
{ label: '财运', value: 4 },
|
||||
{ label: '消灾', value: 5 },
|
||||
],
|
||||
selectedPrayerType: '学业',
|
||||
selectedPrayerTypeValue: 1,
|
||||
showPicker: false,
|
||||
export default {
|
||||
components: {
|
||||
CustomNavbar,
|
||||
BottomButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
CommonEnum,
|
||||
loading: false,
|
||||
formData: {
|
||||
name: "",
|
||||
prayerType: "1", // 默认祈福类型
|
||||
forOthers: 2, // 默认不为他人祈福
|
||||
wish: "",
|
||||
},
|
||||
prayerTypes: [
|
||||
{ label: "学业", value: 1 },
|
||||
{ label: "健康", value: 2 },
|
||||
{ label: "姻缘", value: 3 },
|
||||
{ label: "财运", value: 4 },
|
||||
{ label: "消灾", value: 5 },
|
||||
],
|
||||
selectedPrayerType: "学业",
|
||||
selectedPrayerTypeValue: 1,
|
||||
showPicker: false,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时获取数据
|
||||
this.loadPageData();
|
||||
},
|
||||
methods: {
|
||||
// 加载页面数据
|
||||
async loadPageData() {
|
||||
this.loading = true;
|
||||
try {
|
||||
// TODO: 调用页面数据API
|
||||
// const response = await getPageData()
|
||||
// 模拟加载
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error("获取页面数据失败:", error);
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 页面加载时获取数据
|
||||
this.loadPageData()
|
||||
},
|
||||
methods: {
|
||||
// 加载页面数据
|
||||
async loadPageData() {
|
||||
this.loading = true
|
||||
try {
|
||||
// TODO: 调用页面数据API
|
||||
// const response = await getPageData()
|
||||
// 模拟加载
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('获取页面数据失败:', error)
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 提交祈福
|
||||
submitPrayer() {
|
||||
// 表单验证
|
||||
if (!this.validateForm()) {
|
||||
return
|
||||
}
|
||||
|
||||
// 显示确认信息
|
||||
this.showConfirmation()
|
||||
},
|
||||
|
||||
// 提交祈福
|
||||
submitPrayer() {
|
||||
// 表单验证
|
||||
validateForm() {
|
||||
if (!this.formData.name?.trim()) {
|
||||
uni.showToast({ title: '请输入祈福人姓名', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.selectedPrayerTypeValue) {
|
||||
uni.showToast({ title: '请选择祈福类型', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.formData.wish?.trim()) {
|
||||
uni.showToast({ title: '请填写心愿内容', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
if (!this.validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示确认信息
|
||||
showConfirmation() {
|
||||
uni.showModal({
|
||||
title: '确认祈福信息',
|
||||
content: `祈福人：${this.formData.name}\n祈福类型：${this.selectedPrayerType}\n为他人祈福：${this.formData.forOthers === 1 ? '是' : '否'}\n心愿内容：${this.formData.wish}`,
|
||||
confirmText: '确认敬香',
|
||||
cancelText: '修改信息',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.performPrayer()
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
// 执行祈福
|
||||
async performPrayer() {
|
||||
uni.showLoading({ title: '正在敬香...' })
|
||||
|
||||
try {
|
||||
const response = await submitPrayer({
|
||||
name: this.formData.name.trim(),
|
||||
type: this.selectedPrayerTypeValue,
|
||||
isOthers: this.formData.forOthers,
|
||||
content: this.formData.wish.trim(),
|
||||
})
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (response.code === 200) {
|
||||
uni.showToast({ title: '祈福成功！', icon: 'success' })
|
||||
this.resetForm()
|
||||
|
||||
// 跳转到祈福成功页面
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/pray/praySuccess',
|
||||
})
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({ title: response.msg || '祈福失败，请重试', icon: 'none' })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('祈福请求失败:', error)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '网络错误，请重试', icon: 'none' })
|
||||
}
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.formData = {
|
||||
name: '',
|
||||
prayerType: '1',
|
||||
forOthers: 2,
|
||||
wish: '',
|
||||
}
|
||||
this.selectedPrayerType = '学业'
|
||||
this.selectedPrayerTypeValue = 1
|
||||
},
|
||||
|
||||
// 显示祈福类型选择器
|
||||
showPrayerTypePicker() {
|
||||
uni.showActionSheet({
|
||||
itemList: this.prayerTypes.map(item => item.label),
|
||||
success: res => {
|
||||
if (
|
||||
res.tapIndex !== undefined &&
|
||||
res.tapIndex >= 0 &&
|
||||
res.tapIndex < this.prayerTypes.length
|
||||
) {
|
||||
const selectedType = this.prayerTypes[res.tapIndex]
|
||||
|
||||
// 更新选中的祈福类型
|
||||
this.selectedPrayerType = selectedType.label
|
||||
this.selectedPrayerTypeValue = selectedType.value
|
||||
|
||||
// 同步更新表单数据
|
||||
this.formData.prayerType = selectedType.value
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
console.log('用户取消选择或选择失败:', res)
|
||||
},
|
||||
})
|
||||
},
|
||||
this.showConfirmation();
|
||||
},
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
validateForm() {
|
||||
if (!this.formData.name?.trim()) {
|
||||
uni.showToast({ title: "请输入祈福人姓名", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.selectedPrayerTypeValue) {
|
||||
uni.showToast({ title: "请选择祈福类型", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.formData.wish?.trim()) {
|
||||
uni.showToast({ title: "请填写心愿内容", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
// 显示确认信息
|
||||
showConfirmation() {
|
||||
uni.showModal({
|
||||
title: "确认祈福信息",
|
||||
content: `祈福人：${this.formData.name}\n祈福类型：${this.selectedPrayerType}\n为他人祈福：${this.formData.forOthers === 1 ? "是" : "否"}\n心愿内容：${this.formData.wish}`,
|
||||
confirmText: "确认敬香",
|
||||
cancelText: "修改信息",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.performPrayer();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 执行祈福
|
||||
async performPrayer() {
|
||||
uni.showLoading({ title: "正在敬香..." });
|
||||
|
||||
try {
|
||||
const response = await submitPrayer({
|
||||
name: this.formData.name.trim(),
|
||||
type: this.selectedPrayerTypeValue,
|
||||
isOthers: this.formData.forOthers,
|
||||
content: this.formData.wish.trim(),
|
||||
});
|
||||
|
||||
uni.hideLoading();
|
||||
|
||||
if (response.code === 200) {
|
||||
uni.showToast({ title: "祈福成功！", icon: "success" });
|
||||
this.resetForm();
|
||||
|
||||
// 跳转到祈福成功页面
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/pray/praySuccess",
|
||||
});
|
||||
}, 1500);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: response.msg || "祈福失败，请重试",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("祈福请求失败:", error);
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "网络错误，请重试", icon: "none" });
|
||||
}
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.formData = {
|
||||
name: "",
|
||||
prayerType: "1",
|
||||
forOthers: 2,
|
||||
wish: "",
|
||||
};
|
||||
this.selectedPrayerType = "学业";
|
||||
this.selectedPrayerTypeValue = 1;
|
||||
},
|
||||
|
||||
// 显示祈福类型选择器
|
||||
showPrayerTypePicker() {
|
||||
uni.showActionSheet({
|
||||
itemList: this.prayerTypes.map((item) => item.label),
|
||||
success: (res) => {
|
||||
if (
|
||||
res.tapIndex !== undefined &&
|
||||
res.tapIndex >= 0 &&
|
||||
res.tapIndex < this.prayerTypes.length
|
||||
) {
|
||||
const selectedType = this.prayerTypes[res.tapIndex];
|
||||
|
||||
// 更新选中的祈福类型
|
||||
this.selectedPrayerType = selectedType.label;
|
||||
this.selectedPrayerTypeValue = selectedType.value;
|
||||
|
||||
// 同步更新表单数据
|
||||
this.formData.prayerType = selectedType.value;
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log("用户取消选择或选择失败:", res);
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fffbf5;
|
||||
}
|
||||
.page {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh + 500rpx);
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
.navbar-container {
|
||||
background-color: #faf8f3;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
.background-container {
|
||||
position: absolute;
|
||||
top: -600rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh + 432rpx);
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
|
||||
.background-image {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
background-color: #faf8f3;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
.header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 120rpx 15rpx 160rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.censer-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 128rpx;
|
||||
margin-bottom: 60rpx;
|
||||
z-index: 3;
|
||||
|
||||
.censer-icon {
|
||||
width: 648rpx;
|
||||
height: 648rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.background-container {
|
||||
position: fixed;
|
||||
top: -600rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh + 432rpx);
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
.prayer-form-background {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
background-color: #fdfcf5;
|
||||
display: flex;
|
||||
padding: 0 50rpx 300rpx 50rpx;
|
||||
margin-top: 625rpx;
|
||||
z-index: 2;
|
||||
|
||||
.background-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
.prayer-form {
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx 60rpx 0 60rpx;
|
||||
width: 650rpx;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 0 15rpx;
|
||||
padding-top: 120rpx;
|
||||
padding-bottom: 160rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.censer-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 128rpx;
|
||||
margin-bottom: 60rpx;
|
||||
z-index: 3;
|
||||
border: 2rpx solid #c0a4ae;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.censer-icon {
|
||||
width: 648rpx;
|
||||
height: 648rpx;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.form-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-text {
|
||||
width: 126rpx;
|
||||
height: 44rpx;
|
||||
font-weight: 400;
|
||||
color: #695347;
|
||||
font-size: 32rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
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;
|
||||
}
|
||||
|
||||
.prayer-form-background {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
background-color: #fdfcf5;
|
||||
display: flex;
|
||||
padding: 0 50rpx 300rpx 50rpx;
|
||||
margin-top: 625rpx;
|
||||
z-index: 2;
|
||||
.input-field {
|
||||
padding-left: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.prayer-form {
|
||||
margin-top: 30rpx;
|
||||
padding: 30rpx 60rpx 0 60rpx;
|
||||
width: 650rpx;
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.select-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx 0 66rpx;
|
||||
width: 100%;
|
||||
|
||||
.select-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//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;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #c0a4ae;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-text {
|
||||
width: 126rpx;
|
||||
height: 44rpx;
|
||||
font-weight: 400;
|
||||
color: #695347;
|
||||
font-size: 32rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
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: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.select-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx 0 66rpx;
|
||||
width: 100%;
|
||||
|
||||
.select-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
//border: #C7A26D 1px solid;
|
||||
margin-left: 40rpx;
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 60rpx;
|
||||
margin-right: 12rpx;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&: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;
|
||||
&.checked {
|
||||
border-color: #8b2e2e;
|
||||
background-color: #8b2e2e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-container {
|
||||
position: relative;
|
||||
.checkmark {
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.textarea-field {
|
||||
width: 400rpx;
|
||||
height: 140rpx;
|
||||
//border: 1rpx solid #e10c0c;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx 0 66rpx;
|
||||
.radio-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
padding-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.textarea-container {
|
||||
position: relative;
|
||||
|
||||
.textarea-field {
|
||||
width: 400rpx;
|
||||
height: 140rpx;
|
||||
//border: 1rpx solid #e10c0c;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx 0 66rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.char-counter {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user