JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-04-27 03:16:33 +08:00
Code Issues Projects Releases Wiki Activity

remove card

Browse Source
This commit is contained in:
chuzhixin 2021-02-08 09:42:28 +08:00
parent a73b7a1a70
commit 949831df59
1 changed files with 0 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/VabImage/index.vue
View File

@ -1,92 +0,0 @@
<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('click-big')
},
clickSmall() {
this.$emit('click-small')
},
},
}
</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>