1.文章优化
sws
parent
6289e44b95
commit
2ee47d7b93
|
|
@ -11,8 +11,10 @@
|
|||
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
|
||||
</template>
|
||||
<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="desc">123</div>
|
||||
<div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
|
||||
<div class="title" :class="article_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
|
||||
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
|
||||
</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') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
|
||||
<div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
|
||||
|
|
@ -34,7 +36,10 @@
|
|||
</template>
|
||||
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
|
||||
<div class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
|
||||
<div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
|
||||
<div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
|
||||
<div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
|
||||
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
|
||||
</div>
|
||||
<div class="flex-row jc-sb gap-8 align-e mt-10">
|
||||
<div :style="article_date">{{ field_show.includes('0') ? (!is_obj_empty(item.data) ? item.data.add_time : '2020-06-05 15:20') : '' }}</div>
|
||||
<div v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="article_page_view">
|
||||
|
|
@ -81,6 +86,7 @@ interface dataObj {
|
|||
add_time?: string;
|
||||
access_count?: string;
|
||||
title?: string;
|
||||
describe?: string;
|
||||
}
|
||||
interface ArticleList {
|
||||
id: number | string;
|
||||
|
|
@ -96,6 +102,8 @@ const article_theme = ref('0');
|
|||
const field_show = ref(['0', '1']);
|
||||
// 文章
|
||||
const article_name = ref('');
|
||||
// 文章描述
|
||||
const article_desc = ref('');
|
||||
// 日期
|
||||
const article_date = ref('');
|
||||
// 浏览量
|
||||
|
|
@ -127,6 +135,11 @@ const carousel_key = ref('0');
|
|||
const interval_time = ref(2000);
|
||||
// 轮播图是否滚动
|
||||
const is_roll = ref(1);
|
||||
|
||||
// 内容
|
||||
const new_content = computed(() => props.value?.content || {});
|
||||
// 样式
|
||||
const new_style = computed(() => props.value?.style || {});
|
||||
// 获取自动数据
|
||||
const get_auto_data_list = async () => {
|
||||
const { category_ids, number, order_by_type, order_by_rule, is_cover } = new_content.value;
|
||||
|
|
@ -160,10 +173,6 @@ const get_auto_data_list = async () => {
|
|||
data_list.value = Array(4).fill(default_data_list);
|
||||
}
|
||||
};
|
||||
// 内容
|
||||
const new_content = computed(() => props.value?.content || {});
|
||||
// 样式
|
||||
const new_style = computed(() => props.value?.style || {});
|
||||
onMounted(() => {
|
||||
// 判断数据类型是选择文章且数据不为空
|
||||
if (new_content.value.data_type == '0' && !isEmpty(new_content.value.data_list)) {
|
||||
|
|
@ -234,6 +243,7 @@ watch(
|
|||
field_show.value = new_content.field_show;
|
||||
// 样式
|
||||
article_name.value = 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';';
|
||||
article_desc.value = 'font-size:' + new_style.desc_size + 'px;' + 'color:' + new_style.desc_color + ';';
|
||||
article_date.value = 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';';
|
||||
article_page_view.value = 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';';
|
||||
content_radius.value = radius_computer(new_style.content_radius);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章描述">
|
||||
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']"></color-text-size-group>
|
||||
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
|
||||
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
|
||||
<slider v-model="form.name_desc_space" :max="100"></slider>
|
||||
</el-form-item>
|
||||
</color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,11 @@
|
|||
<color-text-size-group v-model:color="form.name_color" v-model:typeface="form.name_weight" v-model:size="form.name_size"></color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="文章描述">
|
||||
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']"></color-text-size-group>
|
||||
<color-text-size-group v-model:color="form.desc_color" v-model:size="form.desc_size" :type-list="['color', 'size']">
|
||||
<el-form-item label="间距" label-width="40" class="mb-0 w form-item-child-label">
|
||||
<slider v-model="form.name_desc_space"></slider>
|
||||
</el-form-item>
|
||||
</color-text-size-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期时间">
|
||||
<color-text-size-group v-model:color="form.time_color" v-model:typeface="form.time_weight" v-model:size="form.time_size"></color-text-size-group>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ interface DefaultArticleList {
|
|||
name_color: string;
|
||||
desc_color: string;
|
||||
desc_size: number;
|
||||
name_desc_space: number;
|
||||
time_weight: string;
|
||||
time_size: number;
|
||||
time_color: string;
|
||||
|
|
@ -67,6 +68,7 @@ const defaultArticleList: DefaultArticleList = {
|
|||
name_color: 'rgba(51, 51, 51, 1)',
|
||||
desc_color: '#999',
|
||||
desc_size: 12,
|
||||
name_desc_space: 4,
|
||||
time_weight: '400',
|
||||
time_size: 12,
|
||||
time_color: 'rgba(153, 153, 153, 1)',
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ interface DefaultArticleTabs {
|
|||
name_color: string;
|
||||
desc_color: string;
|
||||
desc_size: number;
|
||||
name_desc_space: number;
|
||||
time_weight: string;
|
||||
time_size: number;
|
||||
time_color: string;
|
||||
|
|
@ -99,6 +100,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
|
|||
name_color: 'rgba(51, 51, 51, 1)',
|
||||
desc_color: '#999',
|
||||
desc_size: 12,
|
||||
name_desc_space: 4,
|
||||
time_weight: '400',
|
||||
time_size: 12,
|
||||
time_color: 'rgba(153, 153, 153, 1)',
|
||||
|
|
|
|||
Loading…
Reference in New Issue