thainv-dev: fix ui

This commit is contained in:
nguyen van thai
2024-06-03 21:53:23 +07:00
parent d95d648687
commit 58b5c67d0c
7 changed files with 87 additions and 40 deletions
@@ -1,15 +1,19 @@
<script setup lang="ts">
import { breakpoint } from '~/definitions';
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
import { useArticleStore } from '~/stores/articles';
import { useDynamicPageStore } from "~/stores/dynamic-page";
const { currentArticle } = storeToRefs(useArticleStore());
const { step } = storeToRefs(useDynamicPageStore());
</script>
<template>
<div class="content" v-if="currentArticle">
<h1 v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
<h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
<div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
<div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
class="[&_img]:mx-auto">
</div>
<h1 id="sub" v-html="currentArticle?.sub" class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
<h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1" :style="{'font-size': `${16 + Number(step)}px`}"></div>
<div id="article-detail" :class="'tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
</div>
</template>
@@ -1,16 +1,23 @@
<script setup lang="ts">
import { useArticleStore } from '~/stores/articles';
import { breakpoint } from '~/definitions';
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
import { useDynamicPageStore } from "~/stores/dynamic-page";
const { currentArticle } = storeToRefs(useArticleStore());
const { step } = storeToRefs(useDynamicPageStore());
</script>
<template>
<div class="content" v-if="currentArticle">
<h1 id="sub" v-html="currentArticle?.sub" class="text-xl font-bold opacity-60 pb-1"></h1>
<h3 id="title" class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
<div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
class="[&_img]:mx-auto">
</div>
<h1 id="sub" v-html="currentArticle?.sub" class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
<h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1" :style="{'font-size': `${16 + Number(step)}px`}"></div>
<div id="article-detail" :class="' tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
</div>
</template>
<style lang="scss"></style>
<style lang="scss" scoped>
#title {}
</style>
@@ -1,22 +1,24 @@
<script setup lang="ts">
import { useArticleStore } from '~/stores/articles';
const emit = defineEmits(['dropData', 'selectComponent'])
const { currentArticle } = storeToRefs(useArticleStore());
import { breakpoint } from '~/definitions';
import { useWindowSize } from '@vueuse/core'
const _props = defineProps<{
dataResult?: any[]
}>()
const { width } = useWindowSize()
import { useDynamicPageStore } from "~/stores/dynamic-page";
const { currentArticle } = storeToRefs(useArticleStore());
const { step } = storeToRefs(useDynamicPageStore());
</script>
<template>
<div class="content" v-if="currentArticle">
<h3 class="text-2xl font-bold sm:text-3xl xl:text-4xl pb-1" v-html="currentArticle?.title"></h3>
<h1 id="sub" v-html="currentArticle?.sub" class=" font-bold opacity-60 pb-1" :style="{ 'font-size': `${16 + Number(step)}px`}"></h1>
<h3 id="title" :style="{ 'font-size': width > breakpoint.lg ? `${36 + Number(step)}px` : `${20 + Number(step)}px`}" class="font-bold pb-1" v-html="currentArticle?.title"></h3>
<!-- <div class="author">Tác giả - Thời gian tạo</div> -->
<div v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold text-xl tracking-widest pb-1"></div>
<div id="article-detail" :class="'text-[15px] tracking-wider'" v-html="currentArticle.detail"
class="[&_img]:mx-auto">
</div>
<div id="intro" v-if="currentArticle?.intro" v-html="currentArticle?.intro" class="font-semibold tracking-widest pb-1" :style="{'font-size': `${16 + Number(step)}px`}"></div>
<div id="article-detail" :class="'text-[16px] tracking-wider'" v-html="currentArticle.detail" class="[&_img]:mx-auto" :style="{ 'font-size': `${16 + Number(step)}px`}"> </div>
</div>
</template>