organization.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <view class="organization-wrap">
  3. <u-sticky>
  4. <!-- 组织结构根节点 -->
  5. <view class="organization-root-tit">车领主</view>
  6. <!-- 组织结构子节点 -->
  7. <view class="organization-node-con">
  8. <view class="organization-node-item">
  9. <text class="organization-node-item-name">贷安抚记卡的</text>
  10. <u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
  11. </view>
  12. <view class="organization-node-item">
  13. <text class="organization-node-item-name">贷安抚记卡的</text>
  14. <u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
  15. </view>
  16. </view>
  17. </u-sticky>
  18. <!-- 门店列表 -->
  19. <view class="list-con">
  20. <view class="list-tit">门店列表</view>
  21. <!-- 列表数据 -->
  22. <view class="listData-con">
  23. <view class="listData-item" v-for="(item, index) in list" :key="index">
  24. <view class="listData-item-l">
  25. <u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
  26. <text class="listData-item-l-name">{{item.name}}</text>
  27. </view>
  28. <view class="listData-item-r">
  29. <u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. export default{
  38. data(){
  39. return{
  40. list: [
  41. { name: '常青二路店' },
  42. { name: '常青二路店常青青二路店常路店' },
  43. { name: '常青二路店' },
  44. { name: '常青二路店' },
  45. { name: '常青二路店' },
  46. { name: '常青二路店' },
  47. { name: '常青二路店' },
  48. { name: '常青二路店常青青二路店常路店' },
  49. { name: '常青二路店' },
  50. { name: '常青二路店' },
  51. { name: '常青二路店' },
  52. { name: '常青二路店' },
  53. { name: '常青二路店' },
  54. { name: '常青二路店常青青二路店常路店' },
  55. { name: '常青二路店' },
  56. { name: '常青二路店' },
  57. { name: '常青二路店' },
  58. { name: '常青二路店' },
  59. ]
  60. }
  61. },
  62. methods: {}
  63. }
  64. </script>
  65. <style lang="scss" scoped>
  66. page {
  67. background-color: #f8f8f8;
  68. height: calc(100vh - 44px);
  69. }
  70. .organization-wrap{
  71. .organization-root-tit{
  72. padding: 20upx 30upx;
  73. background-color: #fff;
  74. border-bottom: 20upx solid #f8f8f8;
  75. }
  76. .organization-node-con{
  77. padding: 0 30upx;
  78. background-color: #fff;
  79. .organization-node-item{
  80. display: flex;
  81. padding: 20upx 0;
  82. border-bottom: 1upx dashed #f8f8f8;
  83. &-name{
  84. flex-grow: 1;
  85. }
  86. &-icon{
  87. flex-shrink: 0;
  88. }
  89. }
  90. }
  91. // 门店列表
  92. .list-con{
  93. background-color: #fff;
  94. margin-top: 20upx;
  95. .list-tit{
  96. padding: 20upx 30upx;
  97. border-bottom: 1upx solid #f8f8f8;
  98. }
  99. .listData-con{
  100. padding: 0 30upx;
  101. .listData-item{
  102. display: flex;
  103. justify-content: space-between;
  104. align-items: center;
  105. padding: 20upx 0;
  106. border-bottom: 1upx dashed #f8f8f8;
  107. &-l{
  108. flex-grow: 1;
  109. padding-right: 10upx;
  110. position: relative;
  111. padding-left: 50upx;
  112. &-icon{
  113. vertical-align: sub;
  114. padding-right: 8upx;
  115. position: absolute;
  116. left: 0;
  117. top: -4upx;
  118. }
  119. }
  120. &-r{
  121. flex-shrink: 0;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. </style>