You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
2.4 KiB
129 lines
2.4 KiB
<template>
|
|
<el-card
|
|
class="box-card-component"
|
|
style="margin-left:8px;"
|
|
>
|
|
<div
|
|
slot="header"
|
|
class="box-card-header"
|
|
>
|
|
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
|
|
</div>
|
|
<div style="position:relative;">
|
|
<mallki
|
|
class="mallki-text"
|
|
text="vue-typescript-admin"
|
|
/>
|
|
<div
|
|
style="padding-top:35px;"
|
|
class="progress-item"
|
|
>
|
|
<span>Vue</span>
|
|
<el-progress :percentage="51" />
|
|
</div>
|
|
<div class="progress-item">
|
|
<span>Typescript</span>
|
|
<el-progress :percentage="45" />
|
|
</div>
|
|
<div class="progress-item">
|
|
<span>Css</span>
|
|
<el-progress :percentage="4" />
|
|
</div>
|
|
<div class="progress-item">
|
|
<span>ESLint</span>
|
|
<el-progress
|
|
:percentage="100"
|
|
status="success"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import { UserModule } from '@/store/modules/user'
|
|
import PanThumb from '@/components/PanThumb/index.vue'
|
|
import Mallki from '@/components/TextHoverEffect/Mallki.vue'
|
|
|
|
@Component({
|
|
name: 'BoxCard',
|
|
components: {
|
|
PanThumb,
|
|
Mallki
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
get name() {
|
|
return UserModule.name
|
|
}
|
|
|
|
get roles() {
|
|
return UserModule.roles
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.box-card-component {
|
|
.el-card__header {
|
|
padding: 0px!important;
|
|
}
|
|
}
|
|
|
|
.panThumb {
|
|
z-index: 100;
|
|
height: 70px!important;
|
|
width: 70px!important;
|
|
position: absolute!important;
|
|
top: -45px;
|
|
left: 0px;
|
|
border: 5px solid #ffffff;
|
|
background-color: #fff;
|
|
margin: auto;
|
|
box-shadow: none!important;
|
|
|
|
.pan-info {
|
|
box-shadow: none!important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.box-card-component {
|
|
.box-card-header {
|
|
position: relative;
|
|
height: 220px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.2s linear;
|
|
|
|
&:hover {
|
|
transform: scale(1.1, 1.1);
|
|
filter: contrast(130%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.mallki-text {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.progress-item {
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media only screen and (max-width: 1510px){
|
|
.mallki-text{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|