foundations and home
This commit is contained in:
50
src/components/OriginBox.vue
Normal file
50
src/components/OriginBox.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
image: String,
|
||||
title: String,
|
||||
description: String
|
||||
},
|
||||
methods: {
|
||||
getImage(image) {
|
||||
return new URL(`/src/assets/images/${image}`, import.meta.url).href;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="origin-box">
|
||||
<img :src="getImage(image)" class="image" />
|
||||
<h3 class="title">{{ title }}</h3>
|
||||
<p class="description">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.origin-box {
|
||||
width: 280px;
|
||||
height: 364px;
|
||||
background: #FFF9F1;
|
||||
border: 1px solid rgba(249, 192, 106, 0.42);
|
||||
}
|
||||
.image {
|
||||
width: 280px;
|
||||
height: 222px;
|
||||
}
|
||||
.title {
|
||||
margin-top: 12px;
|
||||
color: #603809;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
color: #1E1E1E;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user