1.文章优化

sws 2024-08-26
v1.0.0
sws 2024-08-26 14:12:14 +08:00
parent d1477f7f30
commit 20d05006ea
4 changed files with 28 additions and 11 deletions

View File

@ -3,7 +3,7 @@
<div class="re oh" :style="style">
<div class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
<template v-for="(item, index) in data_list" :key="index">
<div class="item gap-10 bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
<div class="item bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
<template v-if="article_theme !== '3'">
<template v-if="item.new_cover.length > 0">
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
@ -13,8 +13,8 @@
<div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''">
<div class="title" :class="article_theme == '3' ? 'text-line-1 flex-1 flex-width' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'ml-10' : 'align-e mt-10'">
<div :style="article_date">{{ field_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
<icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">16</icon>
<div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
<icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">{{ item.data.access_count ? item.data.access_count : '16' }}</icon>
</div>
</div>
</div>
@ -24,7 +24,7 @@
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, padding_computer, radius_computer, get_math } from '@/utils';
import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
import ArticleAPI from '@/api/article';
const props = defineProps({
@ -42,6 +42,8 @@ const style = ref('');
const style_container = ref('');
interface dataObj {
cover?: string;
add_time?: string;
access_count?: string;
title?: string;
}
interface ArticleList {
@ -83,12 +85,13 @@ const article_style = ref({});
const default_data_list: ArticleList = {
id: 0,
data: {},
new_title: '标题',
new_title: '测试标题',
new_cover: [],
};
watch(
props.value,
(newVal, oldValue) => {
console.log(newVal);
const new_content = newVal?.content;
const new_style = newVal?.style;
//
@ -119,10 +122,10 @@ watch(
//
article_spacing.value = `gap: ${new_style.article_spacing}px;`;
//
article_style.value = content_spacing.value;
article_style.value = '';
style.value = '';
if (article_theme.value == '0') {
article_style.value += content_padding.value + content_radius.value;
article_style.value += content_spacing.value + content_padding.value + content_radius.value;
} else if (article_theme.value == '1') {
article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
article_style.value += article_spacing_children.value + content_radius.value;

View File

@ -120,7 +120,11 @@ const init = () => {
}
};
const theme_change = (val: any) => {
form.field_show = ['1'];
if (val == '3' || val == '4') {
form.field_show = ['1'];
} else {
form.field_show = ['0', '1'];
}
};
const data_list_remove = (index: number) => {

View File

@ -47,10 +47,13 @@
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
<template v-if="theme !== '3'">
<template v-if="theme == '0'">
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme !== '3'">
<el-form-item label="文章间距">
<slider v-model="form.article_spacing"></slider>
</el-form-item>

View File

@ -12,7 +12,7 @@
<el-switch v-model="form.tabs_top_up" />
</el-form-item>
<el-form-item label="文章风格">
<el-radio-group v-model="form.article_theme">
<el-radio-group v-model="form.article_theme" @change="article_theme_change">
<el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -74,7 +74,7 @@
<card-container>
<div class="mb-12">列表设置</div>
<el-form-item label="是否显示">
<el-checkbox-group v-model="form.is_show">
<el-checkbox-group v-model="form.field_show">
<el-checkbox v-for="item in base_list.list_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
@ -148,6 +148,13 @@ const init = () => {
base_list.article_category_list = article_store.article;
}
};
const article_theme_change = (val: any) => {
if (val == '3' || val == '4') {
form.field_show = ['1'];
} else {
form.field_show = ['0', '1'];
}
};
//
const url_value_dialog_visible = ref(false);