parent
25aed70233
commit
5dd9fb6646
|
@ -5,7 +5,9 @@
|
|||
>
|
||||
<div class="search-result-container">
|
||||
<div class="search-result-attribute">{{ result.attribute }}</div>
|
||||
<div class="search-result-value">{{ result.value.c }}</div>
|
||||
<div class="search-result-value">
|
||||
<Marquee>{{ result.value.c }}</Marquee>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
@ -13,8 +15,10 @@
|
|||
<script lang="ts">
|
||||
import { IEntry } from "@/types/base";
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import Marquee from "./Marquee.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components: { Marquee },
|
||||
name: "SearchResult",
|
||||
props: {
|
||||
result: {
|
||||
|
@ -27,20 +31,18 @@ export default defineComponent({
|
|||
|
||||
<style scoped lang="scss">
|
||||
.search-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border: 1px solid var(--foreground);
|
||||
border-radius: 1rem;
|
||||
|
||||
.search-result-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 1px solid var(--foreground);
|
||||
border-radius: 1rem;
|
||||
|
||||
margin: 0.5rem;
|
||||
padding: 1rem;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
|
|
|
@ -51,15 +51,18 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
.search-results {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0.5rem;
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: calc(100vw / 7);
|
||||
height: calc(100vw / 7);
|
||||
height: calc(100vh / 6);
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue