parent
d1477f7f30
commit
20d05006ea
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue