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

修改选项卡数据显示

v1.0.0
于肖磊 2024-09-14 17:53:39 +08:00
parent fad2c2824f
commit dfcbf4e810
6 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/div-content/index.vue
View File

@ -377,4 +377,8 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
margin: 0 auto;
z-index: 3;
}
.main-content {
max-width: 39rem;
overflow: hidden;
}
</style>

37
src/components/common/tabs-view/index.vue
View File

@ -1,19 +1,22 @@
<template>
<div class="tabs flex-row oh" :style="`column-gap: ${ new_style.tabs_spacing }px;`">
<template v-for="(item, index) in form.tabs_list" :key="index">
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<template v-else>
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<div class="title" :style="title_style(index)">{{ item.title }}</div>
<div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
<icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
<div class="bottom_line" :style="tabs_check"></div>
</div>
</template>
<div class="flex-row gap-10 jc-sb">
<div class="tabs flex-row oh" :style="`column-gap: ${ new_style.tabs_spacing }px;`">
<template v-for="(item, index) in form.tabs_list" :key="index">
<div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
<template v-if="!isEmpty(item.img)">
<image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<template v-else>
<image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
</template>
<div class="title" :style="title_style(index)">{{ item.title }}</div>
<div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
<icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
<div class="bottom_line" :style="tabs_check"></div>
</div>
</template>
</div>
<icon v-if="isTabs" :name="new_style.more_icon_class || 'fenlei-more'" :size="new_style.more_icon_size + '' || '14'" :color="new_style.more_icon_color || '#000'"></icon>
</div>
</template>
@ -25,6 +28,10 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
isTabs: {
type: Boolean,
default: false,
}
});
// const tabs = ref(props.value);
// 用于页面判断显示

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

@ -1,6 +1,6 @@
<template>
<div :style="style">
<tabs-view ref="tabs" :value="tabs_list"></tabs-view>
<tabs-view ref="tabs" :value="tabs_list" :is-tabs="true"></tabs-view>
</div>
</template>
<script setup lang="ts">

13
src/components/model-tabs/model-tabs-styles.vue
View File

@ -16,6 +16,19 @@
<slider v-model="form.tabs_spacing" :max="100"></slider>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">更多样式</div>
<el-form-item label="图标">
<upload v-model:icon-value="form.more_icon_class" type="icon" is-icon :limit="1" size="50"></upload>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.more_icon_color" default-color="#CCCCCC"></color-picker>
</el-form-item>
<el-form-item label="图标大小">
<slider v-model="form.more_icon_size" :max="100"></slider>
</el-form-item>
</card-container>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_styles_update" />

6
src/views/layout/components/main/default/tabs.ts
View File

@ -27,6 +27,9 @@ interface defaultTabs {
tabs_size: number;
tabs_color: string;
tabs_spacing: number;
more_icon_class: string;
more_icon_color: string;
more_icon_size: number;
common_style: object;
};
}
@ -54,6 +57,9 @@ const defaultTabs: defaultTabs = {
tabs_size: 14,
tabs_color: 'rgba(51,51,51,1)',
tabs_spacing: 20,
more_icon_class: 'fenlei-more',
more_icon_color: '#000',
more_icon_size: 14,
common_style: {
...defaultCommon,
padding: 10,

4
src/views/layout/components/main/index.scss
View File

@ -103,10 +103,6 @@
display: flex;
flex-direction: column;
align-items: stretch;
.main-content {
max-width: 39rem;
overflow: hidden;
}
.model-wall-content {
min-height: 100%;
flex: 1;