examination.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <view class="examination">
  3. <view @click="itemClick(item)" class="examination-item" v-for="(item,index) in list" :key="index">
  4. <view class="examination-item-color">
  5. </view>
  6. <view class="examination-item-text">
  7. <view class="examination-item-text-top">
  8. {{item.title}}
  9. </view>
  10. <view class="examination-item-text-bottom">
  11. {{item.date}}
  12. </view>
  13. </view>
  14. <view class="examination-item-icon">
  15. <uni-icons color='#999' type="right" size="20"></uni-icons>
  16. </view>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. name: "examination",
  23. props: {
  24. list: {
  25. type: Array,
  26. default: () => []
  27. }
  28. },
  29. data() {
  30. return {
  31. };
  32. },
  33. methods:{
  34. itemClick(item){
  35. this.$emit('click',item)
  36. }
  37. }
  38. }
  39. </script>
  40. <style lang="scss" scoped>
  41. .examination {
  42. width: 100%;
  43. .examination-item {
  44. width: 100%;
  45. height: 108rpx;
  46. background-color: #fff;
  47. border-radius: 10rpx;
  48. box-shadow: 0px 0px 6.67px 0px rgba(147, 147, 147, 0.20);
  49. margin-bottom: 32rpx;
  50. display: flex;
  51. align-items: center;
  52. padding: 0 32rpx;
  53. box-sizing: border-box;
  54. .examination-item-color {
  55. width: 16rpx;
  56. height: 16rpx;
  57. border-radius: 50%;
  58. background-color: #05CCA1;
  59. margin-right: 20rpx;
  60. }
  61. .examination-item-text {
  62. flex: 1;
  63. .examination-item-text-bottom {
  64. color: #999;
  65. }
  66. }
  67. }
  68. }
  69. </style>