96 lines
5.7 KiB
Vue
96 lines
5.7 KiB
Vue
<script setup lang="ts">
|
|
import { toRefs } from "vue";
|
|
|
|
const props = defineProps({
|
|
frontmatter: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
const { frontmatter } = toRefs(props);
|
|
</script>
|
|
|
|
<style>
|
|
.line {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.container {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.text {
|
|
color: #999999;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="line">
|
|
<div v-if="frontmatter.author" class="line container">
|
|
<svg
|
|
t="1658821554263"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="12186"
|
|
width="16"
|
|
height="16"
|
|
>
|
|
<path
|
|
d="M171.1 861.3c5.9 3.7 12.6 5.6 19.3 5.6 5.3 0 10.7-1.2 15.6-3.6l446.9-215c12-5.8 19.8-17.6 20.4-30.9l8.9-202.6 19.6 12.5c6 3.9 12.7 5.7 19.4 5.7 11.9 0 23.5-5.9 30.3-16.6 10.7-16.7 5.8-39-10.9-49.7L721 354.3l44.3-51.2c6.8-7.9 9.9-18.4 8.4-28.7s-7.4-19.5-16.2-25.1L481.9 72.7c-8.8-5.6-19.6-7.2-29.6-4.2S434 78.6 429.7 88.1l-28 61.6-19.6-12.6c-16.7-10.7-39-5.8-49.7 10.9-10.7 16.7-5.8 39 10.9 49.7l17.8 11.4-181.1 92c-12 6.1-19.5 18.3-19.7 31.7l-5.7 497.7c-0.3 12.5 6 24.1 16.5 30.8z m512.5-573.9L659.8 315 463 189l15.1-33.2 205.5 131.6z m-252.3-33.2l91.2 58.4 89.6 57.4-9.7 222.8-313.1 150.7L431 522.2c24.7 1.1 49.3-10.7 63.6-33 21.4-33.4 11.7-77.7-21.7-99.1s-77.7-11.7-99.1 21.7c-14.3 22.3-14.7 49.5-3.4 71.5L227.9 705.8l4-350.3 199.4-101.3zM896.2 887.2l-704.2 0.1c-19.9 0-36 16.1-36 36s16.1 36 36 36l704.1-0.1c19.9 0 36-16.1 36-36s-16-36-35.9-36zM704.6 761.2c0 19.9 16.1 36 36 36h155.6c19.9 0 36-16.1 36-36s-16.1-36-36-36H740.6c-19.9 0-36 16.2-36 36z"
|
|
p-id="12187"
|
|
fill="#999999"
|
|
></path>
|
|
</svg>
|
|
<p class="text">{{ frontmatter.author }}</p>
|
|
</div>
|
|
<div v-if="frontmatter.date" class="line container">
|
|
<svg
|
|
t="1658821678607"
|
|
class="icon"
|
|
viewBox="0 0 1084 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="14656"
|
|
width="16"
|
|
height="16"
|
|
>
|
|
<path
|
|
d="M679.96791406 629.91443867h96.25668487v96.25668399h-96.25668487zM491.78609667 629.91443867h96.25668399v96.25668399h-96.25668398zM303.60427842 629.91443867h96.25668398v96.25668399h-96.25668398zM679.96791406 427.77540107h96.25668487v96.25668487h-96.25668487zM491.78609667 427.77540107h96.25668399v96.25668487h-96.25668398zM303.60427842 427.77540107h96.25668398v96.25668487h-96.25668398z"
|
|
fill="#999999"
|
|
p-id="14657"
|
|
></path>
|
|
<path
|
|
d="M821.94652373 105.79679141h-48.12834199V62h-96.25668398v43.79679141h-89.5187171V62h-96.25668399v43.79679141H398.8983957V62H302.64171084v43.79679141H254.51336885a192.51336885 192.51336885 0 0 0-192.51336885 192.51336885v471.17647089a192.51336885 192.51336885 0 0 0 192.51336885 192.51336885h567.43315488a192.51336885 192.51336885 0 0 0 192.51336973-192.51336885V298.31016026a192.51336885 192.51336885 0 0 0-192.51336973-192.51336885z m96.25668486 663.68983974a96.25668487 96.25668487 0 0 1-96.25668486 96.25668398H254.51336885a96.25668487 96.25668487 0 0 1-96.25668398-96.25668398V298.31016026 293.01604297h759.46523994v5.29411729z"
|
|
fill="#999999"
|
|
p-id="14658"
|
|
></path>
|
|
</svg>
|
|
<p class="text">{{ frontmatter.date }}</p>
|
|
</div>
|
|
<div v-if="frontmatter.minute" class="line container">
|
|
<svg
|
|
t="1658821512864"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="10973"
|
|
width="16"
|
|
height="16"
|
|
>
|
|
<path
|
|
d="M836.879252 877.489158l-40.623209 0L796.256042 771.125689c0-59.154261-59.33641-108.910479-115.690906-157.030429-19.591197-16.72594-46.74872-41.527812-56.900941-53.077869l0-98.03478c10.152221-11.550057 37.310767-36.351929 56.900941-53.077869 56.354496-48.119951 115.690906-97.876168 115.690906-157.030429L796.256042 146.509818l40.623209 0c22.426779 0 40.609906-18.183128 40.609906-40.609906S859.306031 65.290005 836.879252 65.290005L187.120748 65.290005c-22.425755 0-40.609906 18.183128-40.609906 40.609906s18.184151 40.609906 40.609906 40.609906l40.596604 0 0 106.36347c0 59.154261 59.33334 108.910479 115.692952 157.030429 19.586081 16.72594 46.747697 41.527812 56.899918 53.077869l0 98.03478c-10.152221 11.550057-37.313837 36.351929-56.899918 53.077869C287.049668 662.21521 227.717352 711.971427 227.717352 771.125689l0 106.36347-40.596604 0c-22.425755 0-40.609906 18.183128-40.609906 40.609906 0 22.426779 18.184151 40.609906 40.609906 40.609906l649.759527 0c22.426779 0 40.609906-18.183128 40.609906-40.609906C877.489158 895.672286 859.306031 877.489158 836.879252 877.489158zM308.937165 771.125689c0-21.703301 57.097416-69.555146 87.207178-95.263667 48.958038-41.794895 85.384669-71.994708 85.384669-110.442368L481.529011 458.580347c0-38.448684-36.426631-68.648496-85.384669-110.442368-30.109762-25.709545-87.207178-73.560366-87.207178-95.263667L308.937165 146.509818l406.099065 0 0 106.36347c0 21.707394-57.100486 69.555146-87.211271 95.263667-48.952922 41.794895-85.381599 71.994708-85.381599 110.442368l0 106.838284c0 38.448684 36.427654 68.648496 85.381599 110.442368 30.109762 25.709545 87.211271 73.556273 87.211271 95.263667l0 106.36347-406.099065 0L308.937165 771.125689zM603.358731 238.027162l0-20.662599c0-19.62599 15.907295-35.533284 35.533284-35.533284 19.62599 0 35.533284 15.908318 35.533284 35.533284l0 20.662599c0 19.62599-15.908318 35.533284-35.533284 35.533284C619.267049 273.560446 603.358731 257.652128 603.358731 238.027162z"
|
|
p-id="10974"
|
|
fill="#999999"
|
|
></path>
|
|
</svg>
|
|
<p class="text">{{ frontmatter.minute }} min</p>
|
|
</div>
|
|
</div>
|
|
</template>
|