123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <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>
|