uni-card.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <template>
  2. <view class="uni-card" :class="isFull === true || isFull === 'true' ? 'uni-card--full' : ''" @click="onClick">
  3. <view class="uni-card__header" :style="{'background-color':bgcolor? bgcolor: '#FFFFFF'}" v-if="title">
  4. <view class="uni-card__header-extra-img-view" v-if="thumbnail">
  5. <image class="uni-card__header-extra-img" :src="thumbnail"></image>
  6. </view>
  7. <view class="uni-card__header-title-text">{{title}}</view>
  8. <view class="uni-card__header-extra-text" v-if="extra">{{extra}}</view>
  9. </view>
  10. <view class="uni-card__content uni-card__content--pd">
  11. <image :src="images" mode="scaleToFill" class="demoimages" v-if="images"></image>
  12. <text v-if="texts">{{texts}}</text>
  13. </view>
  14. <view class="uni-card__footer" v-if="note">{{note}}</view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. name: "uni-card",
  20. props: {
  21. title: String, //标题
  22. bgcolor: String, //背景颜色
  23. extra: String, //扩展信息
  24. note: String, //Tips
  25. images: String,
  26. texts: String,
  27. thumbnail: String, //缩略图
  28. isFull: { //内容区域是否通栏
  29. type: [Boolean, String],
  30. default: false
  31. }
  32. },
  33. methods: {
  34. onClick() {
  35. this.$emit('click')
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="scss">
  41. $card-extra-width: 30%;
  42. $uni-spacing-marign:16upx;
  43. @mixin text-omit {
  44. text-overflow: ellipsis;
  45. white-space: nowrap;
  46. overflow: hidden;
  47. }
  48. .uni-card {
  49. margin-left: $uni-spacing-marign;
  50. margin-right: $uni-spacing-marign;
  51. margin-top: $uni-spacing-marign;
  52. background: $uni-bg-color;
  53. position: relative;
  54. display: flex;
  55. flex-direction: column;
  56. &:after {
  57. content: '';
  58. position: absolute;
  59. transform-origin: center;
  60. box-sizing: border-box;
  61. pointer-events: none;
  62. top: -50%;
  63. left: -50%;
  64. right: -50%;
  65. bottom: -50%;
  66. border: 1px solid $uni-border-color;
  67. border-radius: $uni-border-radius-lg;
  68. transform: scale(.5);
  69. }
  70. &__footer{
  71. position: relative;
  72. display: flex;
  73. flex-direction: row;
  74. padding: $uni-spacing-col-base;
  75. align-items: center;
  76. background-color: $uni-bg-color;
  77. }
  78. &__header {
  79. position: relative;
  80. display: flex;
  81. flex-direction: row;
  82. padding: $uni-spacing-col-base;
  83. align-items: center;
  84. }
  85. &__header {
  86. &:after {
  87. position: absolute;
  88. bottom: 0;
  89. right: 0;
  90. left: 0;
  91. height: 1px;
  92. content: '';
  93. -webkit-transform: scaleY(.5);
  94. transform: scaleY(.5);
  95. background-color: $uni-border-color;
  96. }
  97. &-title {
  98. flex: 1;
  99. margin-right: $uni-spacing-col-base;
  100. display: flex;
  101. flex-direction: row;
  102. justify-content: flex-start;
  103. align-items: center;
  104. &-text {
  105. font-size: $uni-font-size-lg;
  106. flex: 1;
  107. @include text-omit;
  108. }
  109. }
  110. &-extra {
  111. &-img-view {
  112. display: flex;
  113. }
  114. &-img {
  115. height: $uni-img-size-sm;
  116. width: $uni-img-size-sm;
  117. margin-right: $uni-spacing-col-base;
  118. }
  119. &-text {
  120. flex: 0 0 auto;
  121. width: $card-extra-width;
  122. margin-left: $uni-spacing-col-base;
  123. font-size: $uni-font-size-base;
  124. text-align: right;
  125. @include text-omit;
  126. }
  127. }
  128. }
  129. &__content {
  130. &--pd {
  131. padding: $uni-spacing-col-base;
  132. }
  133. }
  134. &__footer {
  135. justify-content: space-between;
  136. color: $uni-text-color-grey;
  137. font-size: $uni-font-size-sm;
  138. padding-top: 0;
  139. }
  140. &--full{
  141. margin: 0;
  142. }
  143. }
  144. .demoimages{width: 100%;height: 400upx;}
  145. text{font-size: 32upx;color: #000000;}
  146. </style>