178 lines
3.8 KiB
Vue
178 lines
3.8 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar title="常见问题" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||
height='36'></u-navbar>
|
||
<view class="cont">
|
||
<view class="que_cont">
|
||
<view class="que_box">
|
||
<view class="que_top">
|
||
<view class="yuan">
|
||
1
|
||
</view>
|
||
<view class="txt">
|
||
没有收到用户缴费，怎么办？
|
||
</view>
|
||
<view class="font">
|
||
<view class="iconfont icon-xiangshang" v-if="currentindex==0" @click="currentindex=-1">
|
||
|
||
</view>
|
||
<view class="iconfont icon-xiangxia" v-if="currentindex!=0" @click="currentindex=0">
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="que_bot" v-if="currentindex==0">
|
||
<view class="bot_cont" style="margin-right: 20rpx;">
|
||
未收到用户缴费
|
||
</view>
|
||
<view class="bot_cont">
|
||
用户缴费多久到账
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="que_box">
|
||
<view class="que_top">
|
||
<view class="yuan">
|
||
2
|
||
</view>
|
||
<view class="txt">
|
||
没有收到用户缴费，怎么办？
|
||
</view>
|
||
<view class="font">
|
||
<view class="iconfont icon-xiangshang">
|
||
|
||
</view>
|
||
<!-- <view class="iconfont icon-xiangxia">
|
||
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="que_bot" v-if="currentindex==1">
|
||
<view class="bot_cont" style="margin-right: 20rpx;">
|
||
未收到用户缴费
|
||
</view>
|
||
<view class="bot_cont">
|
||
用户缴费多久到账
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="que_box">
|
||
<view class="que_top">
|
||
<view class="yuan">
|
||
3
|
||
</view>
|
||
<view class="txt">
|
||
没有收到用户缴费，怎么办？
|
||
</view>
|
||
<view class="font">
|
||
<view class="iconfont icon-xiangshang">
|
||
|
||
</view>
|
||
<!-- <view class="iconfont icon-xiangxia">
|
||
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="que_bot" v-if="currentindex==2">
|
||
<view class="bot_cont" style="margin-right: 20rpx;">
|
||
未收到用户缴费
|
||
</view>
|
||
<view class="bot_cont">
|
||
用户缴费多久到账
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F7FAFE",
|
||
},
|
||
currentindex:0
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background: #F7FAFE;
|
||
}
|
||
.cont{
|
||
padding-top: 20rpx;
|
||
.que_cont{
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
.que_box{
|
||
margin-top: 34rpx;
|
||
padding: 40rpx;
|
||
width: 654rpx;
|
||
border-radius: 20rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
|
||
.que_top{
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
padding-bottom: 30rpx;
|
||
border-bottom: 2rpx solid #D8D8D8 ;
|
||
.yuan{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background: #8883F0;
|
||
border-radius: 50%;
|
||
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
line-height: 32rpx;
|
||
}
|
||
.txt{
|
||
margin-left: 22rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.font{
|
||
margin-left: auto;
|
||
.iconfont{
|
||
color: #95989D;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
.que_bot{
|
||
margin-top: 34rpx;
|
||
display: flex;
|
||
// flex-wrap: wrap;
|
||
flex-wrap: nowrap;
|
||
.bot_cont{
|
||
|
||
padding: 20rpx 20rpx;
|
||
background: #E0DBFF;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|