yicangzongtai_app_240321/pages/government/scene.vue

<template>
	<view>
		<navbar ref="navbar" :config="config" backColor="#333333"></navbar>
		<view class="Body">
			<u-collapse :body-style="{padding:'30rpx',fontSize: '24rpx',color:'#808080'}" arrow-color="#666666">
				<u-collapse-item :index="index" :class="{active:index==activeIndex}"  v-for="(item , index) in kongLimList" :key="index"  @change="activeChange">
					<view slot="title">
						<view class="collapse_title">
							<image :src="item.icon" mode=""></image>
							{{item.name}}
						</view>
					</view>
					<view class="collapse-text">
						{{item.remark}}
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import {
		getAPPList,
	} from "@/api/government.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '已接入场景',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, '#fff'],
				},
				kongLimList: [],
				activeIndex:null
			}
		},
		onLoad() {
			this.getKongKim()
		},
		methods: {
			getKongKim() {
				getAPPList(this.$keys.LM_KONGKIM).then(res => {
					this.kongLimList = res.data;
				}).catch(err => {}).finally(() => {
					uni.stopPullDownRefresh();
				})
			},
			activeChange(e){
				this.activeIndex=e.show?e.index:null
			}
		}
	}
</script>
<style>
	page{
		background: #f6f6f6;
	}
</style>
<style lang="scss">
	.Body{
		padding: 30rpx;
		::v-deep .u-collapse-head{
			padding:24rpx 30rpx;
			border-radius: 20rpx;
		}
		.collapse_title{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #1A1A1A;
			image{
				width: 70rpx;
				height: 70rpx;
				margin-right: 20rpx;
			}
		}
		.u-collapse-item{
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}
		.active{
			::v-deep .u-collapse-head{
				box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); 
			}
		}
	}
</style>