index.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <div class="vab-image__outter">
  3. <el-image
  4. :src="bigSrc"
  5. fit="cover"
  6. style="width: 100%; height: 100%"
  7. @click="clickBig"
  8. ></el-image>
  9. <el-image
  10. :src="smallSrc"
  11. class="vab-image__outter__small"
  12. fit="cover"
  13. @click="clickSmall"
  14. ></el-image>
  15. <span class="vab-image__outter__percent">{{ percent }}%</span>
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. name: "VabImage",
  21. components: {},
  22. props: {
  23. bigSrc: {
  24. type: String,
  25. default: "",
  26. },
  27. smallSrc: {
  28. type: String,
  29. default: "",
  30. },
  31. percent: {
  32. type: Number,
  33. default: 97,
  34. },
  35. },
  36. data() {
  37. return {};
  38. },
  39. created() {},
  40. mounted() {},
  41. methods: {
  42. clickBig() {
  43. this.$emit("clickBig");
  44. },
  45. clickSmall() {
  46. this.$emit("clickSmall");
  47. },
  48. },
  49. };
  50. </script>
  51. <style lang="scss" scoped>
  52. .vab-image {
  53. &__outter {
  54. position: relative;
  55. width: 100%;
  56. height: 100%;
  57. ::v-deep {
  58. img {
  59. border-radius: $base-border-radius;
  60. }
  61. }
  62. &__small {
  63. position: absolute;
  64. top: 0;
  65. right: 0;
  66. width: 80px;
  67. height: 100px;
  68. border-bottom: 1px solid $base-color-white;
  69. border-left: 1px solid $base-color-white;
  70. border-radius: $base-border-radius;
  71. }
  72. &__percent {
  73. position: absolute;
  74. right: 0;
  75. bottom: 0;
  76. display: inline-block;
  77. min-width: 50px;
  78. height: 25px;
  79. line-height: 25px;
  80. color: $base-color-white;
  81. text-align: center;
  82. background-color: $base-color-red;
  83. border-radius: $base-border-radius;
  84. }
  85. }
  86. }
  87. </style>