| | |
| | | <template> |
| | | <view class="cur-container"> |
| | | <view> |
| | | {{gridData.title}} |
| | | <view v-if="!gridData.useSlot"> |
| | | <view> |
| | | {{gridData.title}} |
| | | </view> |
| | | <view> |
| | | <view class="l"> |
| | | {{gridData.data}} |
| | | </view> |
| | | <view class="r"> |
| | | <u-icon name="phone-fill" color="#fff"></u-icon> |
| | | {{gridData.phone}} |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view> |
| | | <view class="l"> |
| | | {{gridData.data}} |
| | | </view> |
| | | <view class="r"> |
| | | <u-icon name="phone-fill" color="#fff"></u-icon> |
| | | {{gridData.phone}} |
| | | </view> |
| | | |
| | | <view class="slot-box" v-else> |
| | | {{gridData.title}} |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .cur-container { |
| | | padding: 10rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | & > view:first-child { |
| | | height: 60%; |
| | | |
| | | &>view { |
| | | flex: 1; |
| | | padding: 10rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | & > view:last-child { |
| | | height: 40%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | font-size: 24rpx; |
| | | |
| | | .l { |
| | | flex-direction: column; |
| | | |
| | | &>view:first-child { |
| | | height: 60%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .r { |
| | | |
| | | &>view:last-child { |
| | | height: 40%; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | font-size: 24rpx; |
| | | |
| | | .l { |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .r { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .slot-box { |
| | | padding: 10rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | } |
| | | </style> |