thainv-dev: Fix Ui

This commit is contained in:
nguyen van thai
2024-06-25 09:08:44 +07:00
parent ab3419bd5f
commit fcb826a7c6
9 changed files with 25 additions and 18 deletions
@@ -68,7 +68,7 @@ const drop = (e: any) => {
<div>
<nuxt-link :to="`bai-viet/${parseData?.slug}`"
v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')"
class="line-clamp hover:text-primary-600"
class="line-clamp hover:text-primary-600 font-bold font-archivo"
:style="[
LAYOUT_PARSE['fontSizeTitle'] && `font-size: ${LAYOUT_PARSE['fontSizeTitle']}px`,
LAYOUT_PARSE['fontWeightTitle'] && `font-weight: ${LAYOUT_PARSE['fontWeightTitle']}`,
@@ -54,9 +54,9 @@ onMounted(async () => {
clickElement("author", "author", "data-code");
let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
if (detailEmagazine && breakcrumb) {
breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
if (detailEmagazine && breadcrumb) {
breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
}
document.documentElement.style.setProperty("--step", '0');
@@ -93,10 +93,10 @@ async function copyLink() {
}
}
console.log(currentArticle.value,'currentArtice')
</script>
<template>
<div id="breakcrumb" class="flex justify-between items-center my-3 font-arial">
<div id="breadcrumb" class="flex justify-between items-center my-3 font-arial">
<ul class="flex gap-6 items-center text-md">
<template v-for="(category, index) in currentCategoryTree" :key="index">
<li class="first:text-primary-600 hover:text-primary-600 font-medium relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
@@ -41,9 +41,9 @@ onMounted(async () => {
clickElement("author", "author", "data-code");
let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
if (detailEmagazine && breakcrumb) {
breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
if (detailEmagazine && breadcrumb) {
breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
}
});
@@ -80,7 +80,7 @@ async function copyLink() {
</script>
<template>
<div class="content" v-if="currentArticle">
<div id="breakcrumb" class="flex justify-between items-center my-3">
<div id="breadcrumb" class="flex justify-between items-center my-3">
<ul class="flex gap-6 items-center text-md">
<template v-for="(category, index) in currentCategoryTree" :key="index">
<li class="font-semibold relative after:absolute after:content-['\003E'] last:after:content-[''] after:right--4 after:text-gray-3">
@@ -41,9 +41,9 @@ onMounted(async () => {
clickElement("author", "author", "data-code");
let detailEmagazine = document.querySelector('div[layout="ARTICLE_DETAIL_EMAGAZINE"]');
let breakcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
if (detailEmagazine && breakcrumb) {
breakcrumb.classList.add("lg:max-w-640px", "mx-auto");
let breadcrumb = document.querySelector('div[layout="BREADCRUM_DEFAULT"]');
if (detailEmagazine && breadcrumb) {
breadcrumb.classList.add("lg:max-w-640px", "mx-auto");
}
});
@@ -115,6 +115,7 @@ const updateVolume = (num?: number) => {
if(num) {
volume.value += num
}
// console.log('1231321')
audioPlayer.value.volume = volume.value;
}
};
@@ -220,7 +221,7 @@ const durationComputed = computed(() => {
</div>
<div class="md:inline-flex hidden items-center gap-2 ml--10px h9 text-primary-600 rounded-8px text-28px cursor-pointer hover:bg-primary-100">
<Icon @click="updateVolume(-0.1)" name="material-symbols:volume-mute"></Icon>
<input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume" min="0.1" max="1" step="0.1" />
<input v-if="isVolume" class="accent-primary-600 h-1 w-12 lg:w-20 cursor-pointer" type="range" v-model="volume" @input="updateVolume()" min="0.1" max="1" step="0.1" />
<Icon @click="updateVolume(0.1)" name="material-symbols:volume-up"></Icon>
</div>
</div>