<template>
	<view>
		<u-navbar   :is-back="true" title=" " :title-bold="true" :title-size="34"
					:background="{ background: '#57ab6d'}"
					back-icon-name="arrow-left" :back-icon-size="34" back-icon-color="#f0f0f0"
					:border-bottom="false">
		</u-navbar>
		<!-- 这里背景好像是图片 -->
		<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
					 :style="'width: 100%;background-color: #ffffff;height:'+scrollviewHeight+'px'">
			<view style="padding:20rpx;background-color:#57ab6d;height:230rpx;">
				<view style="color: #ffffff;font-size: 22px;">协助你解决</view>
				<view style="color: #ffffff;font-size: 22px;">账单相关问题</view>
			</view>	
			
			<view  style="margin-top: -40rpx; padding: 0rpx 30rpx;">
				<view style="border-radius: 20rpx;background-color: #f9f9f9;padding: 40rpx;">
					<u-row>
						<u-col :span="5">
							<view  class="u-flex u-row-center u-col-center">
								<view>
									<u-icon name="checkmark-circle-fill" :size="40"></u-icon>
								</view>
								<view class="u-m-l-10" @click="toDownLoadOrder()">
									<text style="font-size: 32rpx;">下载账单</text>
								</view>
							</view>
						</u-col>
						<u-col  :span="2">
							<view class="u-flex u-row-center">
								<u-line color="#a3a6ad" direction="col" length="70rpx" :hair-line="false"></u-line>
							</view>
						</u-col>
						<u-col  :span="5">
							<view class="u-flex u-row-center u-col-center">
								<view>
									<u-icon name="file-text-fill" :size="40"></u-icon>
								</view>
								<view class="u-m-l-10">
									<text style="font-size: 32rpx;">银行支出查询</text>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			
			
			<view class="u-p-30 u-flex u-row-between u-col-center">
				<view style="font-size: 20px;color: #000000;">常见问题</view>
				<view class="u-flex u-row-around u-col-center" 
				style="padding: 12rpx 20rpx;border-radius: 14rpx;border: 1rpx solid #adb1b8;">
					<view>
						<u-icon name="search" :size="32" :top="2"></u-icon>
					</view>
					<view class="u-tips-color u-p-l-10 u-font-30">
						<text>搜索</text>
					</view>
				</view>
			</view>
			
			<view>
				<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="false" :border-top="true"  title="如何快速查询历史账单"></u-cell-item>
				<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="false" :border-top="true"  title="如何查看注销前账单"></u-cell-item>
				<u-cell-item icon="question-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true"  title="微信支付账单如何删除"></u-cell-item>
				<u-cell-item icon="rmb-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true"  title="交易遇到问问如何联系商家"></u-cell-item>
				<u-cell-item icon="heart" :title-style="titleStyle" :border-bottom="false" :border-top="true"  title="未成年人充值/平台消费"></u-cell-item>
				<u-cell-item icon="question-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true"  title="申请交易明细证明常见问题"></u-cell-item>
				<u-cell-item icon="rmb-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true"  title="微信支付账户被莫名扣费"></u-cell-item>
				<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="true" :border-top="true"  title="账单号'收入/支出'的统计说明"></u-cell-item>
			</view>
			<!-- 不要删,占位 -->
			<view class="u-p-30" style="background-color: #f8f8f8;"></view>
		
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollviewHeight:0, //页面高度
				titleStyle:{
					fontSize:"32rpx",
					color:"#000000",
					margin:"16rpx 0rpx"
				}
			};
		},
		onLoad:function(){
			let that=this;
			this.scrollviewHeight= that.$u.sys().windowHeight*0.895; // 0.828
			//this.getData();
		},
		methods:{
			toDownLoadOrder:function(){
				this.$u.route({
					url:"/pages/my/service/download-bill-order/download-bill-order"
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
