<template>
	<view>
		<view class="nav_area"></view>
		<view class="aboutPage">
			<uni-list class="center-list" v-for="(listitem,index) in aboutList" :key="index">
				<uni-list-item v-for="(item,i) in listitem" :title="item.title" link :rightText="item.rightText" :key="i"
					:clickable="true" :to="item.to" @click="aboutListClick(item)" :show-extra-icon="true"
					:extraIcon="{type:item.icon,color:'#999'}">
					<template v-slot:footer>
						<view class="icon_new" v-if="item.iconN">
							<image :src="'../../static/user/icon_'+item.iconN+'.png'" mode=""></image>
						</view>
						<view v-if="item.showBadge" class="item-footer">
							<text class="item-footer-text">{{item.rightText}}</text>
							<view class="item-footer-badge"></view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aboutList: [
					[
						{
							"title": '充值设置',
							"to": '/pages/about/rechargeSet/rechargeSet',
							"icon": "compose",
							"iconN": "coin"
						},
						{
							"title": '奖金设置',
							"to": '/pages/about/bonusSet/index',
							"icon": "compose",
							"iconN": "gold"
						},
						{
							"title": '客服设置',
							"to": '/pages/about/serviceSet/serviceSet',
							"icon": "compose",
							"iconN": "manager"
						},
						{
							"title": '轮播图管理',
							"to": '/pages/about/bannerManage/bannerManage',
							"icon": "compose",
							"iconN": "window"
						},
						{
							"title": '公告管理',
							"to": '/pages/about/noticeManage/noticeManage',
							"icon": "compose",
							"iconN": "flag"
						},
						{
							"title": '概率设置',
							"to": '/pages/about/ProbabilitySettings/ProbabilitySettings',
							"icon": "compose",
							"iconN": "probability"
						}
					]
				]
			}
		},
		methods: {
			aboutListClick(item) {
				if (!item.to && item.event) {
					this[item.event]();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		padding: 0px 25rpx;
		/*  #ifdef H5  */
		height: 88rpx;padding-top: var(--status-bar-height);
		/*  #endif  */
		/*  #ifdef APP-PLUS  */
		height: 2px;
		/*  #endif  */
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	}
	.aboutPage{
		padding: 10px 0px;
	}
	.icon_new{
		position: absolute;
		left: 40rpx;
		top: 30rpx;
		width: 48rpx;
		height: 48rpx;
		background-color: #fff;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.center-list /deep/ .uni-list-item__container{
		padding: 16px 50rpx;
	}
	.center-list /deep/ .uni-icon-wrapper{
		padding: 0px 40rpx 0px 10px;
		font-size: 12px !important;
	}
	.center-list /deep/ .uni-list--border:after{
		content: none;
	}
	.center-list ::v-deep .uni-list--border-top,
	.center-list ::v-deep .uni-list--border-bottom {
		display: none;
	}
	
</style>
