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"> <el-form-item label="图标" label-width="45">
<div class="flex-col jc-c align-c mr-12"> <div class="flex-col jc-c align-c mr-12">
<upload v-model="row.src" :limit="1" :size="44" :styles="1"></upload> <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>
<div class="flex-col jc-c align-c"> <div class="flex-col jc-c align-c">
<upload v-model="row.src_checked" :limit="1" :size="44" :styles="1"></upload> <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> </div>
</el-form-item> </el-form-item>
<el-form-item label="名称" label-width="45"> <el-form-item label="名称" label-width="45">

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

@ -1,18 +1,18 @@
<template> <template>
<div class="oh" :style="style_container"> <div class="oh" :style="style_container">
<div class="re" :style="style"> <div class="re oh" :style="style">
<div class="flex-warp" :class="article_theme_class" :style="article_spacing"> <div class="flex-warp" :class="article_theme_class" :style="article_theme !== '3' ? article_spacing : ''">
<template v-for="(item, index) in data_list" :key="index"> <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 gap-10 bg-f oh" :class="article_theme == '0' ? 'flex-row' : 'flex-col'" :style="article_style">
<template v-if="item.new_cover.length > 0"> <template v-if="article_theme !== '3'">
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> <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>
<template v-else> <div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme !== '0' ? content_padding : ''">
<image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> <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>
</template> <div class="flex-row jc-sb gap-8" :class="article_theme == '3' ? 'ml-10' : 'align-e mt-10'">
<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 :style="article_date">{{ field_show.includes('0') ? '2020-06-05 15:20' : '' }}</div> <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> <icon v-show="field_show.includes('1')" name="eye" :style="article_page_view">16</icon>
</div> </div>
@ -119,17 +119,19 @@ watch(
// 文章间距 // 文章间距
article_spacing.value = `gap: ${new_style.article_spacing}px;`; 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') { if (article_theme.value == '0') {
article_style.value += content_padding.value; article_style.value += content_padding.value + content_radius.value;
} } else if (article_theme.value == '1') {
if (article_theme.value == '1') {
article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`; article_spacing_children.value = `width: calc(50% - ${new_style.article_spacing / 2}px);`;
article_style.value += article_spacing_children.value; article_style.value += article_spacing_children.value + content_radius.value;
} } else if (article_theme.value == '3') {
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_width.value = `${new_style.article_width}px`;
article_item_height.value = `${new_style.article_height}px`; article_item_height.value = `${new_style.article_height}px`;
article_style.value += content_radius.value;
} }
if (new_style.common_style && props.isCommonStyle) { if (new_style.common_style && props.isCommonStyle) {
style_container.value = common_styles_computer(new_style.common_style); style_container.value = common_styles_computer(new_style.common_style);
@ -146,7 +148,9 @@ const article_theme_class = computed(() => {
case '2': case '2':
return 'style3 flex-col'; return 'style3 flex-col';
case '3': case '3':
return 'style4 flex-row'; return 'style4 flex-col';
case '4':
return 'style5 flex-row';
} }
return `style${article_theme.value}`; return `style${article_theme.value}`;
}); });
@ -203,6 +207,14 @@ const get_auto_data_list = async (new_content: any) => {
} }
} }
.style4 { .style4 {
.item {
width: 100%;
&:not(:last-child) {
border-bottom: 0.1rem solid #eee;
}
}
}
.style5 {
.item { .item {
min-width: v-bind(article_item_width); min-width: v-bind(article_item_width);
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"> <card-container class="mb-8">
<div class="mb-12">展示设置</div> <div class="mb-12">展示设置</div>
<el-form-item label="选择风格"> <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 v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
@ -77,7 +77,8 @@ const base_list = reactive({
{ name: '单列展示', value: '0' }, { name: '单列展示', value: '0' },
{ name: '两列展示（纵向）', value: '1' }, { name: '两列展示（纵向）', value: '1' },
{ name: '大图展示', value: '2' }, { name: '大图展示', value: '2' },
{ name: '左右滑动展示', value: '3' }, { name: '无图模式', value: '3' },
{ name: '左右滑动展示', value: '4' },
], ],
data_type_list: [ data_type_list: [
{ name: '选择文章', value: '0' }, { name: '选择文章', value: '0' },
@ -118,6 +119,9 @@ const init = () => {
base_list.article_category_list = article_store.article; base_list.article_category_list = article_store.article;
} }
}; };
const theme_change = (val: any) => {
form.field_show = ['1'];
};
const data_list_remove = (index: number) => { const data_list_remove = (index: number) => {
form.data_list.splice(index, 1); 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="内容圆角"> <el-form-item label="内容圆角">
<radius :value="form.content_radius"></radius> <radius :value="form.content_radius"></radius>
</el-form-item> </el-form-item>
<el-form-item label="图片圆角"> <template v-if="theme !== '3'">
<radius :value="form.img_radius"></radius> <el-form-item label="图片圆角">
</el-form-item> <radius :value="form.img_radius"></radius>
</el-form-item>
</template>
<el-form-item label="内间距"> <el-form-item label="内间距">
<padding :value="form.padding"></padding> <padding :value="form.padding"></padding>
</el-form-item> </el-form-item>
<el-form-item label="内容间距"> <template v-if="theme !== '3'">
<slider v-model="form.content_spacing"></slider> <el-form-item label="内容间距">
</el-form-item> <slider v-model="form.content_spacing"></slider>
<el-form-item label="文章间距"> </el-form-item>
<slider v-model="form.article_spacing"></slider> <el-form-item label="文章间距">
</el-form-item> <slider v-model="form.article_spacing"></slider>
<template v-if="article_style == '3'"> </el-form-item>
</template>
<template v-if="theme == '4'">
<el-form-item label="内容宽度"> <el-form-item label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider> <slider v-model="form.article_width" :max="1000"></slider>
</el-form-item> </el-form-item>
@ -82,7 +86,7 @@ const state = reactive({
}); });
// 如果需要解构，确保使用toRefs // 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state); 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 emit = defineEmits(['update:value']);
const font_weight = reactive([ const font_weight = reactive([
{ name: '加粗', value: '500' }, { 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: '0' },
{ name: '两列展示（纵向）', value: '1' }, { name: '两列展示（纵向）', value: '1' },
{ name: '大图展示', value: '2' }, { name: '大图展示', value: '2' },
{ name: '左右滑动展示', value: '3' }, { name: '无图模式', value: '3' },
{ name: '左右滑动展示', value: '4' },
], ],
data_type_list: [ data_type_list: [
{ name: '选择文章', value: '0' }, { name: '选择文章', value: '0' },

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

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