效果图
1.wxml
<view class="problem">
<view style="text-align: center" class="mt-20 mb-20">
<image style="width: 400rpx;" webp src="https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/problem-title.webp" mode="widthFix" />
</view>
<block wx:if="{{true}}">
<template is="ask" data="{{q:'是否需要预约?',a:'需要哦,因为是专科医生操作,所以请提前3-5天预约。'}}" />
<template is="ask" data="{{q:'是会否出报告?报告是纸质还是电子版的?',a:'来体检的动物,会提供电子版的报告(PDF或照片),如需要纸质报告,请在体检前告知医生,以便及时为您准备好。 '}}" />
<template is="ask" data="{{q:'报告是现场给吗?',a:'一般我们会1-3个工作日提供心超报告,其余报告可以当时提供。 '}}" />
<template is="ask" data="{{q:'我的猫狗需要提前准备什么吗?',a:'正常情况不需要;如果猫咪容易应激,请在预约时告知客服,并听取医生的建议,提前做相关的准备。'}}" />
<template is="ask" data="{{q:'我的猫狗体检的时候,我可以在旁边吗?',a:'有些操作主人是可以陪伴的;有些要根据主人在旁边时动物配合的实际情况,医生会给与主人是否回避的原因和建议。'}}" />
<template is="ask" data="{{q:'我的猫狗刚刚做过检查,我可以不重复做同样的检查吗?',a:'可以在预约时告知具体情况,客服或医生可能会请您携带有关检查报告,并根据实际情况有针对性、有选择的告知您,具体怎么安排对动物最友善、对诊断也最合适。 '}}" />
<template is="ask" data="{{q:'我的猫狗在检查过程中发现有比较严重的问题,怎么办?',a:'作设有心内专科、外科专科的综合性医院,即便是基础体检过程中,发现有重大疑点或问题,院内专家团队都会加入会诊并共同制定接下来的检查、诊断、治疗方案。一站式的全面专业服务,是我们的特色和优势。 '}}" />
</block>
</view>
<template name="ask">
<!-- 单项选择器,内部由多个 radio 组成 -->
<radio-group class="mb-20 b font-14 x-ask-radio-group ">
<label class=" x-ask-label">
<view class="x-question">
<view class="flex">
<view style="margin-top: 5rpx;">
<image style="width: 32rpx; height: 32rpx;" webp src="https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/q.webp" mode="widthFix" />
</view>
<view class="text pr-10">{{q}}</view>
</view>
<view class="icon-ask-down"></view>
</view>
<!-- 回答 -->
<view class="x-answer color-827968 font-14 regular pr-20 mt-10">
<view>
<image style="width: 32rpx; height: 32rpx; margin-top: 5rpx; " webp src="https://image.pet.babily.com.cn/public/signed/wushuyi/Cardiac_ultrasound_examination/a.webp" mode="widthFix" />
</view>
<view class="text">
<view>{{a}}</view>
<view>{{b}}</view>
</view>
</view>
<checkbox hidden />
</label>
</radio-group>
</template>
wxss
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.pr-10 {
padding-right: 20rpx;
}
.pr-20 {
padding-right: 40rpx;
}
.mt-10 {
margin-top: 20rpx;
}
.x-ask-radio-group {
border-bottom: 2px solid #F5F3ED;
padding-bottom: 40rpx;
}
.x-question {
display: flex;
justify-content: space-between;
}
.x-answer {
display: flex;
}
.text {
margin-left: 20rpx;
}
.icon-ask-down {
background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.13 4.463L6.686 8.908a.857.857 0 0 1-1.213 0L1.03 4.463A.857.857 0 0 1 2.24 3.251L6.08 7.09l3.837-3.838a.857.857 0 0 1 1.212 1.212z' fill='%23A59D8F' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
width: 24rpx !important;
height: 24rpx;
}
.mb-20 {
margin-bottom: 40rpx;
}
.x-ask-label[aria-checked='true'] .x-answer {
display: flex;
}
.x-ask-label[aria-checked='true'] .icon-ask-down {
transform: rotateZ(180deg);
}
.x-ask-label[aria-checked='false'] .x-answer {
display: none;
}
.problem {
min-height: 0rpx;
background-color: #fff;
margin: 20rpx;
margin-top: 40rpx;
border-radius: 40rpx;
padding: 34rpx;
}