shareUser.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <template>
  2. <view class="flex-col justify-start page">
  3. <cu-custom isBack="true" bgColor="#000000"><view slot="content" style="color: #FFFFFF">UU睡眠</view></cu-custom>
  4. <view class="flex-col justify-start section">
  5. <view class="flex-col section_2 space-y-421">
  6. <view class="flex-col">
  7. <text class="self-start font_1 text_2">共享用户</text>
  8. <view class="flex-col group_3 space-y-10">
  9. <view class="flex-row justify-between items-center section_6">
  10. <view class="flex-row">
  11. <image
  12. class="image_6"
  13. src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/7F70B5FF967F44BC97BD7CD8786A70B4.png"
  14. />
  15. <view class="flex-col items-start group_4 space-y-10">
  16. <text class="font_1 text_3">弘枫琬</text>
  17. <text class="text_5">14872220394</text>
  18. <text class="text_6 text_7">2020-09-19 03:22:34</text>
  19. </view>
  20. </view>
  21. <view class="flex-col justify-start items-center text-wrapper"><text class="text_4">删除</text></view>
  22. </view>
  23. <view class="flex-row justify-center items-center section_7 space-x-10">
  24. <image
  25. class="image_7"
  26. src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874414496441492308.png"
  27. />
  28. <text class="text_8">添加用户</text>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="flex-row justify-center items-center relative group_5">
  33. <view class="flex-col justify-start items-center button"><text class="font_2">完成</text></view>
  34. <text class="font_2 text_6 pos_2">跳过</text>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. export default {
  42. data() {
  43. return {
  44. }
  45. },
  46. methods: {
  47. }
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. .page {
  52. background-color: #000000;
  53. width: 100%;
  54. overflow-y: auto;
  55. overflow-x: hidden;
  56. height: 100%;
  57. .section {
  58. background-image: url("http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/2E8800F59CE14717A09884B811B3C608.png");
  59. background-size: auto;
  60. background-repeat: no-repeat;
  61. .section_2 {
  62. padding-bottom: 1.25rem;
  63. background-image: linear-gradient(180deg, #1e1ef7e3 0%, #1dbff59c 100%);
  64. .section_3 {
  65. padding: 1.13rem 0.44rem 0.38rem;
  66. background-color: #ffffff4d;
  67. .group {
  68. padding: 0 0.5rem;
  69. .image {
  70. width: 1.06rem;
  71. height: 0.69rem;
  72. }
  73. .image_2 {
  74. width: 0.94rem;
  75. height: 0.69rem;
  76. }
  77. .image_3 {
  78. width: 1.5rem;
  79. height: 0.72rem;
  80. }
  81. }
  82. .space-x-6-reverse {
  83. & > view:not(:last-child),
  84. & > text:not(:last-child),
  85. & > image:not(:last-child) {
  86. margin-right: 0.38rem;
  87. }
  88. }
  89. .group_2 {
  90. padding: 0.63rem 0 0.38rem;
  91. .text {
  92. font-size: 1.16rem;
  93. }
  94. .section_4 {
  95. padding: 0.38rem 0.75rem;
  96. background-color: #ffffff99;
  97. border-radius: 1rem;
  98. border: solid 0.031rem #00000014;
  99. .image-wrapper {
  100. width: 1.19rem;
  101. .image_5 {
  102. width: 1.19rem;
  103. height: 0.44rem;
  104. }
  105. .image_4 {
  106. width: 1.13rem;
  107. height: 1.06rem;
  108. }
  109. }
  110. .section_5 {
  111. background-color: #00000033;
  112. width: 0.063rem;
  113. height: 1.16rem;
  114. }
  115. }
  116. .space-x-11 {
  117. & > view:not(:first-child),
  118. & > text:not(:first-child),
  119. & > image:not(:first-child) {
  120. margin-left: 0.69rem;
  121. }
  122. }
  123. .pos {
  124. position: absolute;
  125. right: 0;
  126. top: 50%;
  127. transform: translateY(-50%);
  128. }
  129. }
  130. }
  131. .space-y-22 {
  132. & > view:not(:first-child),
  133. & > text:not(:first-child),
  134. & > image:not(:first-child) {
  135. margin-top: 1.38rem;
  136. }
  137. }
  138. .font_1 {
  139. font-size: 1.13rem;
  140. font-family: PingFangSC;
  141. line-height: 1.06rem;
  142. color: #ffffff;
  143. }
  144. .text_2 {
  145. margin-left: 1.25rem;
  146. margin-top: 1.38rem;
  147. }
  148. .group_3 {
  149. margin-top: 0.88rem;
  150. padding: 0 1.25rem;
  151. .section_6 {
  152. padding: 0.94rem 0 0.94rem 0.94rem;
  153. background-color: #ffffff33;
  154. border-radius: 1rem;
  155. .image_6 {
  156. border-radius: 50%;
  157. width: 4rem;
  158. height: 4rem;
  159. }
  160. .group_4 {
  161. margin: 0.25rem 0 0.25rem 1.25rem;
  162. .text_3 {
  163. line-height: 1.03rem;
  164. }
  165. .text_5 {
  166. color: #ffffff;
  167. font-size: 0.88rem;
  168. font-family: PingFangSC;
  169. line-height: 0.63rem;
  170. }
  171. .text_7 {
  172. color: #ffffff;
  173. font-size: 0.63rem;
  174. font-family: PingFangSC;
  175. line-height: 0.47rem;
  176. }
  177. }
  178. .text-wrapper {
  179. padding: 0.25rem 0;
  180. background-image: linear-gradient(90deg, #2c3ff2 0%, #1e09de 100%);
  181. border-radius: 6.25rem 0px 0px 6.25rem;
  182. width: 2.75rem;
  183. height: 1.25rem;
  184. .text_4 {
  185. color: #ffffff;
  186. font-size: 0.75rem;
  187. font-family: PingFangSC;
  188. line-height: 0.69rem;
  189. }
  190. }
  191. }
  192. .section_7 {
  193. padding: 2.13rem 0;
  194. background-color: #ffffff33;
  195. border-radius: 1rem;
  196. .image_7 {
  197. width: 1.5rem;
  198. height: 1.5rem;
  199. }
  200. .text_8 {
  201. color: #ffffff;
  202. font-size: 1.5rem;
  203. font-family: PingFangSC;
  204. line-height: 1.41rem;
  205. }
  206. }
  207. .space-x-10 {
  208. & > view:not(:first-child),
  209. & > text:not(:first-child),
  210. & > image:not(:first-child) {
  211. margin-left: 0.63rem;
  212. }
  213. }
  214. }
  215. .space-y-10 {
  216. & > view:not(:first-child),
  217. & > text:not(:first-child),
  218. & > image:not(:first-child) {
  219. margin-top: 0.63rem;
  220. }
  221. }
  222. .group_5 {
  223. padding: 0 1.75rem;
  224. .button {
  225. padding: 0.5rem 0;
  226. background-image: linear-gradient(90deg, #5611f780 0%, #2c3ff7 100%);
  227. border-radius: 1rem;
  228. width: 8.69rem;
  229. }
  230. .font_2 {
  231. font-size: 1rem;
  232. font-family: PingFangSC;
  233. line-height: 0.94rem;
  234. color: #ffffff;
  235. }
  236. .pos_2 {
  237. position: absolute;
  238. right: 1.78rem;
  239. top: 50%;
  240. transform: translateY(-50%);
  241. }
  242. }
  243. .text_6 {
  244. opacity: 0.5;
  245. }
  246. }
  247. .space-y-421 {
  248. & > view:not(:first-child),
  249. & > text:not(:first-child),
  250. & > image:not(:first-child) {
  251. margin-top: 26.31rem;
  252. }
  253. }
  254. }
  255. }
  256. </style>