xiaochengxu/components/CommonQuestion/CommonQuestion.vue

<!--常见疑问-->
<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-skeleton v-if="mainPageData.question.length == 0"
				rows="4"
				:loading="true"
				:title="false"
				rowsHeight="80rpx"
				rowsWidth="702rpx"
			></u-skeleton>
			<u-cell-group :border="false" v-else>
				<u-cell v-for="(item,index) in getRandomShowItems()" :key="index"
					:title="item.textmsg" 
					:isLink="true" 
					:name="item.skipurl" 
					:clickable="true" 
					:border="isShowBorder(index)" 
					borderCustomStyle="border: 1px solid #E2E2E2;"
				>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		name:"CommonQuestion",
		data() {
			return {
				mainPageData : getApp().globalData.mainPageData,
			};
		},
		methods:{
			isShowBorder(index){
				var len = this.mainPageData.question.length;
				if(index < len - 1){
					return true;
				}
				return false;
			},
			/**
			 * 获取随机显示的内容
			 */
			getRandomShowItems(){
				return this.mainPageData.question;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 702rpx;
		height: 460rpx;
		position: relative;
		
		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>