contopimg.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <div class="xcx-page-topimg" @click.stop="controlClick">
  3. <p class="pic">
  4. <img :src="item.img" v-if="item.img">
  5. </p>
  6. <p class="tit" v-if="item.title.s"><moduleText :text="item.title" /></p>
  7. <div class="note" v-if="item.note.s"><moduleText :text="item.note" /></div>
  8. <moduleBg class="bg" :base="item.base.dbg" />
  9. <moduleBg :base="item.base.ubg" />
  10. </div>
  11. </template>
  12. <script>
  13. import moduleText from './text.vue';
  14. import moduleBg from './bg.vue';
  15. export default{
  16. name:'conTopimg',
  17. props:{
  18. 'item':{type:Object},
  19. 'prev':{default:false}
  20. },
  21. components:{moduleText,moduleBg},
  22. data(){
  23. return{
  24. }
  25. },
  26. methods:{
  27. controlClick(){
  28. if(!this.prev){
  29. this.$parent.controlClick(this.item.type);
  30. }
  31. }
  32. }
  33. }
  34. </script>
  35. <style>
  36. .xcx-page-topimg {
  37. position: relative;
  38. padding: 0 12px;
  39. overflow: hidden;
  40. padding-top: 65px;
  41. padding-bottom: 12px;
  42. }
  43. .xcx-page-topimg .module-background.bg {
  44. z-index: 1;
  45. height: 100px;
  46. width: 110%;
  47. left: -5%;
  48. background-color: #29c8a1;
  49. border-bottom-left-radius: 50%;
  50. border-bottom-right-radius: 50%;
  51. }
  52. .xcx-page-topimg .pic {
  53. width: 68px;
  54. position: relative;
  55. z-index: 2;
  56. border-radius: 50%;
  57. overflow: hidden;
  58. height: 68px;
  59. border: 2px solid rgba(255, 255, 255, 0.2);
  60. background: rgba(255, 255, 255, 0.5);
  61. margin: 0 auto;
  62. }
  63. .xcx-page-topimg .pic img {
  64. width: 100%;
  65. height: 100%;
  66. object-fit: cover;
  67. }
  68. .xcx-page-topimg .tit {
  69. font-size: 14px;
  70. position: relative;
  71. text-align: center;
  72. z-index: 2;
  73. display: block;
  74. overflow: hidden;
  75. white-space: nowrap;
  76. text-overflow: ellipsis;
  77. padding-top: 5px;
  78. }
  79. .xcx-page-topimg .note {
  80. color: #999;
  81. position: relative;
  82. z-index: 2;
  83. font-size: 12px;
  84. line-height: 22px;
  85. padding-top: 5px;
  86. }
  87. </style>