<template>
	<view class="organization-wrap">
		<u-sticky>
			<!-- 组织结构根节点 -->
			<view class="organization-root-tit">车领主</view>
			<!-- 组织结构子节点 -->
			<view class="organization-node-con">
				<view class="organization-node-item">
					<text class="organization-node-item-name">贷安抚记卡的</text>
					<u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
				</view>
				<view class="organization-node-item">
					<text class="organization-node-item-name">贷安抚记卡的</text>
					<u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
		</u-sticky>
		<!-- 门店列表 -->
		<view class="list-con">
			<view class="list-tit">门店列表</view>
			<!-- 列表数据 -->
			<view class="listData-con">
				<view class="listData-item" v-for="(item, index) in list" :key="index">
					<view class="listData-item-l">
						<u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
						<text class="listData-item-l-name">{{item.name}}</text>
					</view>
					<view class="listData-item-r">
						<u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list: [
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
				]
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.organization-wrap{
		.organization-root-tit{
			padding: 20upx 30upx;
			background-color: #fff;
			border-bottom: 20upx solid #f8f8f8;
		}
		.organization-node-con{
			padding: 0 30upx;
			background-color: #fff;
			.organization-node-item{
				display: flex;
				padding: 20upx 0;
				border-bottom: 1upx dashed #f8f8f8;
				&-name{
					flex-grow: 1;
				}
				&-icon{
					flex-shrink: 0;
				}
			}
		}
		// 门店列表
		.list-con{
			background-color: #fff;
			margin-top: 20upx;
			.list-tit{
				padding: 20upx 30upx;
				border-bottom: 1upx solid #f8f8f8;
			}
			.listData-con{
				padding: 0 30upx;
				.listData-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					border-bottom: 1upx dashed #f8f8f8;
					&-l{
						flex-grow: 1;
						padding-right: 10upx;
						position: relative;
						padding-left: 50upx;
						&-icon{
							vertical-align: sub;
							padding-right: 8upx;
							position: absolute;
							left: 0;
							top: -4upx;
						}
					}
					&-r{
						flex-shrink: 0;
					}
				}
			}
		}
	}
</style>
