1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <template>
- <div class="vab-image__outter">
- <el-image
- :src="bigSrc"
- fit="cover"
- style="width: 100%; height: 100%"
- @click="clickBig"
- ></el-image>
- <el-image
- :src="smallSrc"
- class="vab-image__outter__small"
- fit="cover"
- @click="clickSmall"
- ></el-image>
- <span class="vab-image__outter__percent">{{ percent }}%</span>
- </div>
- </template>
- <script>
- export default {
- name: "VabImage",
- components: {},
- props: {
- bigSrc: {
- type: String,
- default: "",
- },
- smallSrc: {
- type: String,
- default: "",
- },
- percent: {
- type: Number,
- default: 97,
- },
- },
- data() {
- return {};
- },
- created() {},
- mounted() {},
- methods: {
- clickBig() {
- this.$emit("clickBig");
- },
- clickSmall() {
- this.$emit("clickSmall");
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .vab-image {
- &__outter {
- position: relative;
- width: 100%;
- height: 100%;
- ::v-deep {
- img {
- border-radius: $base-border-radius;
- }
- }
- &__small {
- position: absolute;
- top: 0;
- right: 0;
- width: 80px;
- height: 100px;
- border-bottom: 1px solid $base-color-white;
- border-left: 1px solid $base-color-white;
- border-radius: $base-border-radius;
- }
- &__percent {
- position: absolute;
- right: 0;
- bottom: 0;
- display: inline-block;
- min-width: 50px;
- height: 25px;
- line-height: 25px;
- color: $base-color-white;
- text-align: center;
- background-color: $base-color-red;
- border-radius: $base-border-radius;
- }
- }
- }
- </style>
|