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.
55 lines
1.2 KiB
55 lines
1.2 KiB
<template>
|
|
<div :class="ifItem()">
|
|
<md-card>
|
|
<md-card-media-cover md-solid>
|
|
<md-card-media md-ratio="1:1">
|
|
<img :src="getImg()" :alt="this.title_text">
|
|
</md-card-media>
|
|
<md-card-area>
|
|
<md-card-header>
|
|
<span class="md-title" style="text-align: right; font-family: tf2build; border-bottom: 1px solid">{{this.title_text}}</span>
|
|
<span class="md-subhead" style="text-align: right; font-family: tf2secondary">{{this.main_text}}</span>
|
|
</md-card-header>
|
|
</md-card-area>
|
|
</md-card-media-cover>
|
|
</md-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'RuleCard',
|
|
props: {
|
|
img_src: String,
|
|
title_text: String,
|
|
main_text: String,
|
|
md_size: Number,
|
|
box_in_item:Boolean
|
|
},
|
|
methods: {
|
|
ifItem() {
|
|
return this.box_in_item?`md-layout-item md-size-${this.md_size}`:'';
|
|
},
|
|
getImg() {
|
|
return this.img_src;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.md-card {
|
|
border-radius: 15px;
|
|
margin: 7% 0%;
|
|
}
|
|
|
|
.md-card-media {
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.md-card-area {
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.9)) !important;
|
|
border-bottom-left-radius: 15px;
|
|
border-bottom-right-radius: 15px;
|
|
}
|
|
</style>
|