lunbobox.wxss 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. /* 文字基本颜色 */
  17. /* 背景颜色 */
  18. /* 边框颜色 */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .user, .goods-name {
  28. color: #FFFFFF;
  29. }
  30. .lunbobox-container {
  31. padding: 10rpx 10rpx;
  32. margin-top: 5rpx;
  33. }
  34. .lunbobox-container .lunbobox {
  35. transition: .5s;
  36. opacity: 0;
  37. display: flex;
  38. height: 0;
  39. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAAAuCAYAAADgDUZ8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxZmM2NTBkMy0xZjUwLTU2NGItOGU2Zi03ZjM2OGU0OTg4M2QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODRDQkVFQ0I3RDQ4MTFFQzhFQ0VGMDIxM0FCQjlFNzUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODRDQkVFQ0E3RDQ4MTFFQzhFQ0VGMDIxM0FCQjlFNzUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MmFhMTMxYWYtYTdjOS1lODQxLTg5NDItNTQwZTFlOWMyOTdiIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFmYzY1MGQzLTFmNTAtNTY0Yi04ZTZmLTdmMzY4ZTQ5ODgzZCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmMSTacAAAR6SURBVHja7N1LaFx1FMfxM3funUceM2moVtPUmqZ5TRKS2kUpqAuh4KYbN6KLIla3ihurIj4oWJe6ESroQnHjLjGDJohFCqIiKKgLsRQVNz5Aags+kpl4bmamzZ3OZO5M5l848fuBH4XkDvyHMz35/+/8772JF94pyTbMaI5pjmgmNXs1/Zq0AIjj4vMPeqNWB++vr6+3+5qc5lHNI9WmAaBzy5YH75dL5bjHBponNKc0g9Qd6IoVkaThBlKO1UDmNW9pZqk30DWrmnOmZyCl1jOQE5qzmgz1BrrqszMns5dsN5C1LU+iPql5WZOg1kB3HS0EA/rPu8aG/bXmdJwZyKlq8wDgwOFxP/wWc8bYsL+MMwO5T3OGEgNu9GQSMnyzyZOnS60ayH7NGyxbAHfGhtLi2fsf9lN1CXOtgaxd30De1AxQYsCd8dt8i8NeqP+BX1pdq1+63EN5Abembk+ZX77Uz0DCCdVpSgu4NXRTIIM5c+c/rmg+vn4Gcq2BHNcUKC/gevbRa3HYK5p/tmogJykt4N70aNbisBcb/bC2hAlPmt5LaQG3Aj8hUwfMbeoON4u937CBlCsNJDxxmqK8gFvjB3olHXjWhv255teGDaRU2mggd1FawL3ZsR6Lw15o9ova5fzc1wO4Aean+iwOu9iqgRyktIBbAzlf9g+ZO4H6o9TtPo02kMr9QHZTXsCtuck+Sdjbvr6w1S99qTSQfsoLuHWokNtRy5dKA6ncEzVJeQF3wpmHwQbScPdptIHIOtUFHBvZ1yMDucDasD+QBrtPaSDADXbHdN7isJdaHeBz0w/AvXl7DaTp7tNIA/E8igu4lE55Uhgz9z3Fp9Jk92mkgfgecxDApbnJvAS+ub/U78U5yPcrb+xv4bENgBOHZkze4K/YTgO5QgMBHM1ACubOf/wgW+w+jTSQVOXKwJ+F3ahA1+Vzwb9DezLWrnRfjHtgrYF8J5XHVwLo5vJlOm9xk2Yx7oHaQDbeX3i9//2UG+iu2QlzNz+9LC12n0YaSDq98f4+otRAdyVEyhOjfda+fmm5+zTaQFIbDeQrzQXhsn6ga3blg196sslbd+ryZXMDCb2teZGyA90xNdb3l7Ehx9p9WreEufqErNc0T2mylB7YvpmJ/kFjQ/5EYuw+rWsgV2cgv2te0TxN6YHtSSTk8vAtGWs7yIrtvsDPpCMniV/SnNDs5SMAdK6/N/mN58nRHd9A0qnIQ37DHakPaZY1XGYHdGhkX/Y3Y0O+KDF3nzZbwtR8WJ2JPMvHAOjM5MGstf0fS528aPO3MJs9pxmuzkYAtOfCrlzS2paIYicv8lONG0h4m7KHNX9qHuPzAMTneXJObD1r+pK0sfs02kCCpjOtsIk8rvlW86pwtS4Qy57dye/F1jnEFWlj92mkgQRBy6Xa65rzmrPCIzCBVlYnRoJw5v6HoTEvdPrCxPkvVmMfqzmueUZzhM8J0FD4x/buuAffedg3/WZrNxSKI1zSLFYzq3lAc0wzpwn43AAblv9Pb/Y/AQYAucTCFIt3TKQAAAAASUVORK5CYII=);
  40. background-repeat: no-repeat;
  41. background-size: auto 100%;
  42. width: 205px;
  43. position: relative;
  44. }
  45. .lunbobox-container .lunbobox .avatar {
  46. width: 28px;
  47. height: 28px;
  48. border: solid 1px #fff;
  49. border-radius: 50px;
  50. display: flex;
  51. justify-content: center;
  52. align-items: center;
  53. overflow: hidden;
  54. margin-left: 5px;
  55. margin-right: 10px;
  56. }
  57. .lunbobox-container .lunbobox.show {
  58. opacity: 1;
  59. height: 35px;
  60. }
  61. .lunbobox-container .lunbobox.next {
  62. height: 35px;
  63. opacity: .5;
  64. -webkit-transform: scale(0.7) translateX(-20%);
  65. transform: scale(0.7) translateX(-20%);
  66. }
  67. .lunbobox-container .lunbobox .left-info {
  68. height: 100%;
  69. display: flex;
  70. width: 162px;
  71. align-items: center;
  72. }
  73. .lunbobox-container .lunbobox .left-info > view {
  74. font-size: 13px;
  75. font-weight: 500;
  76. }
  77. .lunbobox-container .lunbobox .goods-img {
  78. height: 83%;
  79. -webkit-transform: translateY(4px);
  80. transform: translateY(4px);
  81. flex: 1;
  82. display: flex;
  83. align-items: center;
  84. overflow: hidden;
  85. justify-content: center;
  86. }
  87. .lunbobox-container .lunbobox .goods-img image {
  88. width: 45%;
  89. }