104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<template>
|
|
<div class="memo">
|
|
<ToolHeader :config="memoConfig" />
|
|
|
|
Warning: le style/aspect est toujours en wip, so focus on content <br><br>
|
|
|
|
<v-row>
|
|
<v-col cols="12" sm="12" md="6" lg="4" v-for="item in items" :key="item.section" class="memo-section">
|
|
<v-card class="mb-5">
|
|
<v-card-title>{{ item.section }}</v-card-title>
|
|
<v-card-text>
|
|
<div v-for="tip in item.items" :key="tip.text" class="memo-item">
|
|
<div class="memo-item-title">
|
|
{{ tip.text }}
|
|
</div>
|
|
<div v-if="tip.subtitle" class="memo-item-subtitle">
|
|
{{ tip.subtitle }}
|
|
</div>
|
|
<div v-if="tip.code" class="memo-item-code" @click="copy(tip.code)">
|
|
<pre>{{ tip.code }}</pre>
|
|
<v-icon>mdi-content-copy</v-icon>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {Component} from 'nuxt-property-decorator'
|
|
import Tool from './Tool.vue'
|
|
import type {ToolConfig} from '~/types/ToolConfig'
|
|
import {CopyableMixin} from '~/mixins/copyable.mixin'
|
|
import ToolHeader from '~/components/ToolHeader.vue'
|
|
|
|
type MemoItems = { section: string, items: { text: string, code?: string, subtitle?: string }[] }[];
|
|
|
|
@Component({
|
|
mixins: [CopyableMixin],
|
|
components: {ToolHeader}
|
|
})
|
|
export default class Memo extends Tool {
|
|
private memoConfig: ToolConfig = this.config();
|
|
private items: MemoItems = this.$t('memo') as unknown as MemoItems
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.memo {
|
|
h1 {
|
|
font-weight: 300;
|
|
font-size: 50px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.memo-item {
|
|
margin-bottom: 20px;
|
|
|
|
.memo-item-title {
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: var(--v-primary-base);
|
|
}
|
|
|
|
.memo-item-subtitle {
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.memo-item-code {
|
|
cursor: pointer;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
padding: 8px 15px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
pre {
|
|
flex: 1;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.v-icon {
|
|
opacity: 0;
|
|
}
|
|
|
|
&:hover {
|
|
.v-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|