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

1.文章选项卡接口联调 

sws 2024-08-22
v1.0.0
sws 2024-08-22 16:21:33 +08:00
parent 4112897dc8
commit 997234bb46
8 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/image-empty/index.vue
View File

@ -1,5 +1,5 @@
<template>
<el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h" @load="on_load">
<el-image :src="is_obj(image) ? image?.url || '' : image" class="flex align-c jc-c w h" fit="cover" @load="on_load">
<template #error>
<div class="image-slot" :style="errorStyle">
<img :src="error_image" :style="errorImgStyle" />

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

@ -10,9 +10,9 @@
<template v-else>
<image-empty v-model="item.link.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<div class="flex-col jc-sb" :style="article_type !== '0' ? content_padding : ''">
<div class="flex-col jc-sb flex-1" :style="article_type !== '0' ? content_padding : ''">
<div class="title text-line-2" :style="article_name">{{ item.new_title }}</div>
<div class="flex-row jc-sb gap-8 align-c mt-10">
<div class="flex-row jc-sb gap-8 align-e mt-10">
<div :style="article_date">{{ is_show.includes('0') ? '2020-06-05 15:20' : '' }}</div>
<icon v-show="is_show.includes('1')" name="eye" :style="article_page_view">16</icon>
</div>
@ -24,7 +24,7 @@
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, gradient_handle, padding_computer, radius_computer, get_math } from '@/utils';
import { common_styles_computer, padding_computer, radius_computer, get_math } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
import ArticleAPI from '@/api/article';
const props = defineProps({
@ -75,7 +75,8 @@ const content_spacing = ref('');
// 文章间距
const article_spacing = ref('');
const article_spacing_children = ref('');
const article_item_width = ref('50%');
const article_item_width = ref('104');
const article_item_height = ref('104');
const article_style = ref({});
const default_article_list: ArticleList = {
@ -127,6 +128,7 @@ watch(
}
if (article_type.value == '3') {
article_item_width.value = `${new_style.article_width}px`;
article_item_height.value = `${new_style.article_height}px`;
}
if (new_style.common_style && props.isCommonStyle) {
style_container.value = common_styles_computer(new_style.common_style);
@ -137,9 +139,9 @@ watch(
const article_type_class = computed(() => {
switch (article_type.value) {
case '0':
return 'style2 flex-col';
return 'style1 flex-col';
case '1':
return 'style1 flex-row flex-wrap';
return 'style2 flex-row flex-wrap';
case '2':
return 'style3 flex-col';
case '3':
@ -175,26 +177,38 @@ const get_auto_article_list = async (new_content: any) => {
<style lang="scss" scoped>
.style1 {
.item {
width: calc(50% - 0.5rem);
width: 100%;
.img {
height: 8.3rem;
width: 11rem;
}
}
}
.style2 {
.item {
width: 100%;
width: calc(50% - 0.5rem);
.img {
width: 11rem;
height: 8.3rem;
height: 18rem;
}
}
}
.style3 {
.item {
width: 100%;
.img {
width: 100%;
height: 18rem;
}
}
}
.style4 {
.item {
min-width: v-bind(article_item_width);
width: v-bind(article_item_width);
.img {
width: 100%;
height: v-bind(article_item_height);
}
}
}
</style>

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

@ -51,9 +51,14 @@
<el-form-item label="文章间距">
<slider v-model="form.article_spacing"></slider>
</el-form-item>
<el-form-item v-if="article_style == '3'" label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
<template v-if="article_style == '3'">
<el-form-item label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
</el-form>
<common-styles :value="form.common_style" @update:value="common_style_update" />

2
src/components/model-article-tabs/index.vue
View File

@ -7,7 +7,7 @@
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, get_math } from '@/utils';
import { common_styles_computer } from '@/utils';
const props = defineProps({
value: {
type: Object,

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

@ -79,9 +79,14 @@
<el-form-item label="文章间距">
<slider v-model="form.article_spacing"></slider>
</el-form-item>
<el-form-item v-if="article_style == '3'" label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
<template v-if="article_style == '3'">
<el-form-item label="内容宽度">
<slider v-model="form.article_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>
</template>
</card-container>
</el-form>
<common-styles :value="form.common_style" @update:value="common_styles_update" />

4
src/layout/components/main/default/article-list.ts
View File

@ -34,6 +34,7 @@ interface DefaultArticleList {
article_spacing: number;
content_spacing: number;
article_width: number;
article_height: number;
common_style: object;
};
}
@ -85,7 +86,8 @@ const defaultArticleList: DefaultArticleList = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_width: 160, // 文章宽度
article_width: 155, // 文章宽度
article_height: 155, // 文章宽度
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};

4
src/layout/components/main/default/article-tabs.ts
View File

@ -49,6 +49,7 @@ interface DefaultArticleTabs {
article_spacing: number;
content_spacing: number;
article_width: number;
article_height: number;
common_style: object;
};
}
@ -114,7 +115,8 @@ const defaultArticleTabs: DefaultArticleTabs = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_width: 160, // 文章宽度
article_width: 155, // 文章宽度
article_height: 155, // 文章宽度
common_style: { ...defaultCommon, padding_left: 10, padding_right: 10, padding_bottom: 10 },
},
};

2
src/layout/index.vue
View File

@ -30,7 +30,7 @@ interface diy_data_item {
const form = ref<diy_data_item>({
model: {
img: '',
name: '',
name: 'demo',
},
header: {
name: '页面设置',