sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.文章组件新增无图模式 

sws 2024-08-26
v1.0.0
sws 2024-08-26 11:43:35 +08:00
parent 035d8b854d
commit efdaa09669
6 changed files with 70 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/footer-nav/footer-nav-content.vue
View File

@ -27,11 +27,11 @@
<el-form-item label="图标" label-width="45">
<div class="flex-col jc-c align-c mr-12">
<upload v-model="row.src" :limit="1" :size="44" :styles="1"></upload>
<text class="cr-9 size-12">选中</text>
<text class="cr-9 size-12">未选中</text>
</div>
<div class="flex-col jc-c align-c">
<upload v-model="row.src_checked" :limit="1" :size="44" :styles="1"></upload>
<text class="cr-9 size-12">未选中</text>
<text class="cr-9 size-12">选中</text>
</div>
</el-form-item>
<el-form-item label="名称" label-width="45">

48
src/components/model-article-list/index.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="oh" :style="style_container">
<div class="re" :style="style">
<div class="flex-warp" :class="article_theme_class" :style="article_spacing">
<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">
<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>
<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>
</template>
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
</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="flex-col jc-sb flex-1" :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-row jc-sb gap-8 align-e mt-10">
<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>
@ -119,17 +119,19 @@ watch(
// 文章间距
article_spacing.value = `gap: ${new_style.article_spacing}px;`;
// 文章样式
article_style.value = content_radius.value + content_spacing.value;
article_style.value = content_spacing.value;
style.value = '';
if (article_theme.value == '0') {
article_style.value += content_padding.value;
}
if (article_theme.value == '1') {
article_style.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;
}
if (article_theme.value == '3') {
article_style.value += article_spacing_children.value + content_radius.value;
} else if (article_theme.value == '3') {
style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
} else if (article_theme.value == '4') {
article_item_width.value = `${new_style.article_width}px`;
article_item_height.value = `${new_style.article_height}px`;
article_style.value += content_radius.value;
}
if (new_style.common_style && props.isCommonStyle) {
style_container.value = common_styles_computer(new_style.common_style);
@ -146,7 +148,9 @@ const article_theme_class = computed(() => {
case '2':
return 'style3 flex-col';
case '3':
return 'style4 flex-row';
return 'style4 flex-col';
case '4':
return 'style5 flex-row';
}
return `style${article_theme.value}`;
});
@ -203,6 +207,14 @@ const get_auto_data_list = async (new_content: any) => {
}
}
.style4 {
.item {
width: 100%;
&:not(:last-child) {
border-bottom: 0.1rem solid #eee;
}
}
}
.style5 {
.item {
min-width: v-bind(article_item_width);
width: v-bind(article_item_width);

8
src/components/model-article-list/model-article-list-content.vue
View File

@ -4,7 +4,7 @@
<card-container class="mb-8">
<div class="mb-12">展示设置</div>
<el-form-item label="选择风格">
<el-radio-group v-model="form.theme">
<el-radio-group v-model="form.theme" @change="theme_change">
<el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
@ -77,7 +77,8 @@ const base_list = reactive({
{ name: '单列展示', value: '0' },
{ name: '两列展示（纵向）', value: '1' },
{ name: '大图展示', value: '2' },
{ name: '左右滑动展示', value: '3' },
{ name: '无图模式', value: '3' },
{ name: '左右滑动展示', value: '4' },
],
data_type_list: [
{ name: '选择文章', value: '0' },
@ -118,6 +119,9 @@ const init = () => {
base_list.article_category_list = article_store.article;
}
};
const theme_change = (val: any) => {
form.field_show = ['1'];
};
const data_list_remove = (index: number) => {
form.data_list.splice(index, 1);

26
src/components/model-article-list/model-article-list-styles.vue
View File

@ -39,19 +39,23 @@
<el-form-item label="内容圆角">
<radius :value="form.content_radius"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
<template v-if="theme !== '3'">
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
</template>
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
</el-form-item>
<el-form-item label="文章间距">
<slider v-model="form.article_spacing"></slider>
</el-form-item>
<template v-if="article_style == '3'">
<template v-if="theme !== '3'">
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
</el-form-item>
<el-form-item label="文章间距">
<slider v-model="form.article_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme == '4'">
<el-form-item label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
@ -82,7 +86,7 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const article_style = computed(() => data.value.article_style);
const theme = computed(() => data.value.theme);
const emit = defineEmits(['update:value']);
const font_weight = reactive([
{ name: '加粗', value: '500' },

3
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -106,7 +106,8 @@ const base_list = reactive({
{ name: '单列展示', value: '0' },
{ name: '两列展示（纵向）', value: '1' },
{ name: '大图展示', value: '2' },
{ name: '左右滑动展示', value: '3' },
{ name: '无图模式', value: '3' },
{ name: '左右滑动展示', value: '4' },
],
data_type_list: [
{ name: '选择文章', value: '0' },

26
src/components/model-article-tabs/model-article-tabs-styles.vue
View File

@ -67,19 +67,23 @@
<el-form-item label="内容圆角">
<radius :value="form.content_radius"></radius>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
<template v-if="theme !== '3'">
<el-form-item label="图片圆角">
<radius :value="form.img_radius"></radius>
</el-form-item>
</template>
<el-form-item label="内间距">
<padding :value="form.padding"></padding>
</el-form-item>
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
</el-form-item>
<el-form-item label="文章间距">
<slider v-model="form.article_spacing"></slider>
</el-form-item>
<template v-if="article_style == '3'">
<template v-if="theme !== '3'">
<el-form-item label="内容间距">
<slider v-model="form.content_spacing"></slider>
</el-form-item>
<el-form-item label="文章间距">
<slider v-model="form.article_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme == '4'">
<el-form-item label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
@ -111,7 +115,7 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const article_style = computed(() => data.value.article_style);
const theme = computed(() => data.value.theme);
const font_weight = reactive([
{ name: '加粗', value: '500' },
{ name: '正常', value: '400' },