You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
2.5 KiB
125 lines
2.5 KiB
3 years ago
|
<!--常见疑问-->
|
||
|
<template name="CommonQuestion">
|
||
|
<view class="main">
|
||
|
<view class="top">
|
||
|
<text class="top_title">常见疑问</text>
|
||
|
<image class="imageOfWenti" src="@/static/images/mainview/wenti.png" mode="aspectFit"/>
|
||
|
<view class="top_change_area">
|
||
|
<image src="@/static/images/mainview/huan.png" class="imageOfHuan" mode="aspectFit">
|
||
|
<text class="text_huan">换一换</text>
|
||
|
</view>
|
||
|
<u-line color="#E2E2E2" length="662rpx" customStyle="position: absolute;left: 20rpx;border: 1px solid #E2E2E2;" :hairline="true" margin="99rpx 0 0 0"></u-line>
|
||
|
</view>
|
||
|
<view class=".cell_group">
|
||
|
<u-cell-group :border="false">
|
||
|
<u-cell v-for="(item,index) in questions" :key="index"
|
||
|
:title="item.title"
|
||
|
:isLink="true"
|
||
|
:name="item.url"
|
||
|
:clickable="true"
|
||
|
:border="isShowBorder(index)"
|
||
|
borderCustomStyle="border: 1px solid #E2E2E2;"
|
||
|
>
|
||
|
</u-cell>
|
||
|
</u-cell-group>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import config from "@/components/CommonQuestion/CommonQuestion.config.js"
|
||
|
let questions = config.Questions;
|
||
|
export default {
|
||
|
name:"CommonQuestion",
|
||
|
data() {
|
||
|
return {
|
||
|
questions,
|
||
|
};
|
||
|
},
|
||
|
methods:{
|
||
|
isShowBorder(index){
|
||
|
var len = this.questions.length;
|
||
|
if(index < len - 1){
|
||
|
return true;
|
||
|
}
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.main{
|
||
|
width: 702rpx;
|
||
|
height: 460rpx;
|
||
|
position: relative;
|
||
|
left: 24rpx;
|
||
|
right: 24rpx;
|
||
|
background: #FFFFFF;
|
||
|
opacity: 1;
|
||
|
border-radius: 20rpx;
|
||
|
}
|
||
|
.top{
|
||
|
width: 702rpx;
|
||
|
height: 99rpx;
|
||
|
border-radius: 20rpx;
|
||
|
position: relative;
|
||
|
//background-color: #8DC63F;
|
||
|
}
|
||
|
.top_title{
|
||
|
width: 144rpx;
|
||
|
height: 50rpx;
|
||
|
font-size: 36rpx;
|
||
|
font-weight: bold;
|
||
|
color: #333333;
|
||
|
opacity: 1;
|
||
|
position: relative;
|
||
|
left: 16rpx;
|
||
|
top: 24rpx;
|
||
|
}
|
||
|
.imageOfWenti{
|
||
|
width: 37rpx;
|
||
|
height: 37rpx;
|
||
|
position: absolute;
|
||
|
top: 32rpx;
|
||
|
left: 174rpx;
|
||
|
}
|
||
|
///顶部点击换一换的区域
|
||
|
.top_change_area{
|
||
|
width: 132rpx;
|
||
|
height: 99rpx;
|
||
|
border-radius: 20rpx;
|
||
|
//background-color: #A5673F;
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
right: 0;
|
||
|
}
|
||
|
.imageOfHuan{
|
||
|
width: 32rpx;
|
||
|
height: 27rpx;
|
||
|
position: absolute;
|
||
|
right: 99rpx;
|
||
|
top: 36rpx;
|
||
|
}
|
||
|
///换一换
|
||
|
.text_huan{
|
||
|
width: 66rpx;
|
||
|
height: 30rpx;
|
||
|
font-size: 22rpx;
|
||
|
font-weight: 400;
|
||
|
color: #999999;
|
||
|
opacity: 1;
|
||
|
position: absolute;
|
||
|
top: 34rpx;
|
||
|
right: 22rpx;
|
||
|
}
|
||
|
.cell_group{
|
||
|
width: 662rpx;
|
||
|
height: 341rpx;
|
||
|
//background-color: #39B54A;
|
||
|
position: relative;
|
||
|
border-radius: 20rpx;
|
||
|
left: 20rpx;
|
||
|
}
|
||
|
</style>
|