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

修改渐变的处理

v1.0.0
于肖磊 2024-08-14 17:03:33 +08:00
parent 73f25f1bca
commit 3cfc467bf6
26 changed files with 240 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/common-styles/index.vue
View File

@ -83,9 +83,9 @@ const props = defineProps({
});
// 初始化表单数据
const init_form = reactive({
direction: '0deg',
direction: '180deg',
background_img_url: [] as uploadList[],
color_list: [''],
color_list: [{ color: '', color_percentage: '' }],
background_img_style: 2,
padding: 0,
padding_top: 0,
@ -111,7 +111,11 @@ const init_form = reactive({
// value 和初始化数据合并数据
let form = reactive(Object.assign({}, init_form, props.value));
const emit = defineEmits(['update:value']);
const mult_color_picker_event = (arry: string[], type: number) => {
interface color_form {
color: string;
color_percentage: string;
}
const mult_color_picker_event = (arry: color_form[], type: number) => {
form.color_list = arry;
form.direction = type.toString();
emit('update:value', form);

2
src/components/common/flex-gradients-create/index.vue
View File

@ -12,6 +12,7 @@
const predefine_colors = ref(['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgba(255, 69, 0, 0.68)', 'rgb(255, 120, 0)', 'hsv(51, 100, 98)', 'hsva(120, 40, 94, 0.5)', 'hsl(181, 100%, 37%)', 'hsla(209, 100%, 56%, 0.73)', '#c7158577']);
interface list_page {
color: string;
color_percentage: string;
}
interface Props {
colorList: list_page[];
@ -25,6 +26,7 @@ const list = ref(props.colorList);
// 默认值
const reset_event = (index: number) => {
list.value[index].color = props.defaultColor;
list.value[index].color_percentage = '';
};
</script>

25
src/components/common/magic-cube/index.vue
View File

@ -22,7 +22,7 @@
{{ Math.round((750 / densityNum) * (item.end.x - item.start.x + 1)) }}
像素
<template v-if="props.type == 'data'">
<div class="mt-12">共有3个商品</div>
<div>{{ data_title(item) }}</div>
</template>
</div>
</template>
@ -33,6 +33,11 @@
<script setup lang="ts">
import { isEmpty } from 'lodash';
interface content {
data_type: string;
product_list: Array<string>;
img_list: Array<string>;
}
interface CubeItem {
start: {
x: number;
@ -42,9 +47,8 @@ interface CubeItem {
x: number;
y: number;
};
img?: uploadList[],
img_list?: any,
data_list?: any
img?: uploadList[];
data_content?: content
}
interface Props {
@ -210,9 +214,16 @@ const selected_click = (index: number) => {
selected_active.value = index;
emits('selected_click', index);
};
const tips = () => {
console.log(selectedList.value[selected_active.value].img_list);
console.log(selectedList.value[selected_active.value].data_list);
const data_title = (item: CubeItem) => {
let title = `共有`;
if (item.data_content) {
if (item.data_content.data_type == 'commodity') {
title += `${ item.data_content.product_list.length }个商品`;
} else {
title += `${ item.data_content.img_list.length }个图片`;
}
}
return title;
};
</script>
<style lang="scss" scoped>

25
src/components/common/mult-color-picker/index.vue
View File

@ -1,15 +1,18 @@
<template>
<div class="mult-color-picker">
<el-radio-group v-model="direction_type" @change="direction_type_change">
<el-radio value="0deg">横向</el-radio>
<el-radio value="180deg">横向</el-radio>
<el-radio value="90deg">纵向</el-radio>
<el-radio value="315deg">左斜</el-radio>
<el-radio value="45deg">右斜</el-radio>
<el-radio value="45deg">左斜</el-radio>
<el-radio value="315deg">右斜</el-radio>
</el-radio-group>
<div class="flex-col">
<div v-for="(item, index) in color_list" :key="index" class="flex-row align-s gap-12">
<div class="flex-col">
<el-color-picker v-model="item.color" show-alpha :predefine="predefine_colors" @change="change_color(index, $event)" />
<div class="flex-row align-s gap-12">
<el-color-picker v-model="item.color" show-alpha :predefine="predefine_colors" @change="change_color(index, $event)" />
<el-input v-model="item.color_percentage" :maxlength="3" placeholder="请输入百分比" @change="change_color_percentage(index, $event)"></el-input>
</div>
<div v-if="index + 1 !== color_list.length" class="connect-line"></div>
</div>
<template v-if="index == 0">
@ -46,7 +49,8 @@ let color_list = reactive(
//将数组['#fff']改为对象数组
props.value.map((item: any) => {
return {
color: item,
color: item.color,
color_percentage: item.color_percentage,
};
})
);
@ -56,7 +60,7 @@ const direction_type_change = (type: any) => {
update_value();
};
const reset_event = () => {
color_list = [{ color: '' }];
color_list = [{ color: '', color_percentage: '' }];
update_value();
};
const del_event = (index: number) => {
@ -64,16 +68,19 @@ const del_event = (index: number) => {
update_value();
};
const add_event = () => {
color_list.push({ color: '' });
color_list.push({ color: '', color_percentage: '' });
update_value();
};
const change_color = (index: number, color: string | null) => {
color_list[index].color = color;
update_value();
};
const change_color_percentage = (index: number, percentage: string | null) => {
color_list[index].color_percentage = percentage;
update_value();
};
const update_value = () => {
let new_color_list = color_list.map((item) => item.color) || [];
emit('update:value', new_color_list, direction_type.value);
emit('update:value', color_list, direction_type.value);
};
</script>
<style lang="scss" scoped>

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

@ -34,7 +34,7 @@
</card-container>
<card-container v-else class="mb-8">
<div class="mb-12">商品设置</div>
<drag :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
<drag :key="form.product_list" :data="form.product_list" :space-col="20" @remove="product_list_remove" @on-sort="product_list_sort">
<template #default="{ row }">
<upload v-model="row.new_src" :limit="1" size="40" styles="2"></upload>
<el-image :src="row.url" fit="contain" class="img">
@ -50,7 +50,6 @@
</template>
</drag>
<el-button class="mtb-20 w" @click="product_list_add">+添加</el-button>
</card-container>
</template>
<script setup lang="ts">

4
src/components/model-data-magic/components/tabs-styles.vue
View File

@ -61,8 +61,8 @@ const props = defineProps({
const form = ref(props.value);
const mult_color_picker_event = (arry: string[], type: number) => {
form.value.user_id_color_list = arry;
form.value.user_id_direction = type.toString();
form.value.color_list = arry;
form.value.direction = type.toString();
};
watchEffect(() => {

122
src/components/model-data-magic/index.vue
View File

@ -1,7 +1,6 @@
<template>
<div ref="container" class="img-magic" :style="style_container">
<div class="w h re outer-style">
{{ data_list }}
<!-- 风格9 -->
<template v-if="form.style_actived == 8">
<div class="flex-row align-c jc-c style-size flex-wrap">
@ -11,16 +10,31 @@
</div>
</template>
<template v-else>
<div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
<!-- <image-empty v-model="item.img[0]" :style="content_img_radius"></image-empty> -->
<div v-for="(item, index) in form.data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${selected_style(item)} ${ item.data_style.background_style }`">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :height="`${ getSelectedHeight(item) }px`" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item2, index) in item.data_content.product_list" :key="index">
{{ item2 }}
{{ item.actived_index }}
</el-carousel-item>
</el-carousel>
<div v-if="item.data_style.is_show" :class="{'dot-center': item.data_style?.indicator_location == 'center', 'dot-right': item.data_style?.indicator_location == 'flex-end' }" class="dot flex abs">
<template v-if="item.data_style.indicator_style == 'num'">
<div :style="item.data_style.indicator_styles" class="dot-item">
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list }}</span>
</div>
</template>
<template v-else>
<div v-for="(item3, index2) in item.data_content.product_list" :key="index2" :style="`${ item.data_style.indicator_styles }; ${ style_actived_color(item, index2)}`" class="dot-item" />
</template>
</div>
</div>
</template>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer, radius_computer } from '@/utils';
import { background_computer, common_styles_computer, get_math, gradient_computer, percentage_count, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -36,7 +50,7 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, new_style } = toRefs(state);
const data_list = computed(() => form.value.data_magic_list);
// const data_list = computed(() => form.value.data_magic_list);
const outer_spacing = computed(() => new_style.value.image_spacing + 'px');
const outer_sx = computed(() => -(new_style.value.image_spacing / 2) + 'px');
// 图片间距设置
@ -64,7 +78,6 @@ interface CubeItem {
x: number;
y: number;
};
img: string;
}
const density = ref('4');
//单元魔方宽度。
@ -92,10 +105,80 @@ const selected_style = (item: CubeItem) => {
};
// 计算成百分比
const percentage = (num: number) => {
const marks = (num / div_width.value) * 100;
return marks.toFixed(4) + '%';
return percentage_count(num, div_width.value);
};
//#endregion
//#region 组装页面显示的数据
interface data_magic {
start: object;
end: object;
actived_index: number;
data_content: any;
data_style: any;
}
const old_list = ref<any>({});
const data_magic_list = ref<data_magic[]>([]);
watch(props.value.content, (val) => {
const data = val.data_magic_list;
data.actived_index = 0;
data.forEach((item: data_magic) => {
const data_content = item.data_content;
const data_style = item.data_style;
const key = data_style.carouselKey;
// 指示器样式
data_style.indicator_styles = indicator_style(data_style);
data_style.background_style = background_style(data_style);
// 获取旧数据
if (!isEmpty(old_list.value[key])) {
let old_data = old_list.value[key];
const { is_roll, rotation_direction, interval_time } = data_style;
// 判断跟历史的是否相等，不相等更新组件时间
if (old_data.interval_time != interval_time || old_data.is_roll != is_roll || old_data.rotation_direction != rotation_direction) {
// 记录历史保存的时间
old_data = {
interval_time: interval_time,
is_roll: is_roll,
rotation_direction: rotation_direction
};
// 更新轮播图的key，确保更换时能重新更新轮播图
data_style.carouselKey = get_math();
}
}
});
data_magic_list.value = data;
})
const background_style = (item: any) => {
return gradient_computer(item) + background_computer(item);
};
// 指示器的样式
const indicator_style = (item: any) => {
let indicator_styles = '';
if (!isEmpty(item.indicator_radius)) {
indicator_styles += radius_computer(item.indicator_radius)
}
const size = item?.indicator_size || 5;
if (item.indicator_style == 'num') {
indicator_styles += `color: ${item?.color || '#DDDDDD'};`;
indicator_styles += `font-size: ${size}px;`;
} else if (item.indicator_style == 'elliptic') {
indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
indicator_styles += `width: ${size * 3}px; height: ${size}px;`;
} else {
indicator_styles += `background: ${item?.color || '#DDDDDD'};`;
indicator_styles += `width: ${size}px; height: ${size}px;`;
}
return indicator_styles;
};
const style_actived_color = (item: any, index: number) => {
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : ''
}
//#endregion
const carousel_change = (index: number, key: number) => {
if (data_magic_list.value[key]) {
data_magic_list.value[key].actived_index = index;
}
}
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
</script>
@ -106,20 +189,24 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
width: 100%;
overflow: hidden;
}
.cube-selected {
position: absolute;
text-align: center;
color: $cr-main;
box-sizing: border-box;
}
.outer-style {
width: calc(100% + v-bind(outer_spacing));
height: calc(100% + v-bind(outer_spacing));
margin: v-bind(outer_sx);
}
.img-spacing-border {
padding: v-bind(spacing);
}
.style-size {
height: 100%;
width: 100%;
@ -139,12 +226,29 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
position: relative;
}
}
.dot-center {
left: 50%;
transform: translateX(-50%);
}
.dot-right {
right: 0;
}
.dot {
z-index: 3;
bottom: 6px;
.dot-item {
margin: 0 0.3rem;
}
}
:deep(.el-image) {
height: 100%;
width: 100%;
.el-image__inner {
object-fit: cover;
}
.image-slot img {
width: 6rem;
}

38
src/components/model-data-magic/model-data-magic-content.vue
View File

@ -20,7 +20,7 @@
<div v-for="(item, index) in form.data_magic_list" :key="index" :class="['bg-f5', {'cube-selected-active': selected_active == index, 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index)}]" @click="selected_click(index)">
<div class="cube-selected-text">
<template v-if="[0, 1].includes(index)">375 x 375 像素</template>
<template v-else>250 x 375 像素</template>
<template v-else>250 x 375 像素</template>
</div>
</div>
</div>
@ -42,6 +42,7 @@
</div>
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
value: {
@ -53,8 +54,8 @@ const props = defineProps({
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
// 每个小模块独立的样式
const data_style = {
color_list: ['#FFD9C3', '#FFECE2', '#FFFFFF'],
direction: '90deg',
color_list: [{ color: '#FFD9C3', color_percentage: '' }, { color: '#FFECE2', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }],
direction: '180deg',
background_img_style: 2,
background_img_url: [],
is_roll: true,
@ -86,20 +87,25 @@ const data_content = {
heading_title: '',
subtitle: '',
product_list:[],
img_list:[]
img_list:[
{
carousel_img: [],
carousel_link: {},
}
]
}
// 不同风格的数据
const style_show_list = [
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 4, y: 4} }], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 4} }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 4, y: 4} }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 2, y: 4} }, { start: {x: 3, y: 3},end: {x: 4, y: 4} }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 3, y: 3},end: {x: 4, y: 4} }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 1, y: 3},end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 4} }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 1, y: 3},end: {x: 2, y: 4} }, { start: {x: 3, y: 3},end: {x: 4, y: 4} }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 3, y: 3},end: {x: 3, y: 4} }, { start: {x: 4, y: 3},end: {x: 4, y: 4} }, { start: {x: 4, y: 3},end: {x: 4, y: 4} }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1},end: {x: 4, y: 2} }, { start: {x: 3, y: 3},end: {x: 3, y: 4} }, { start: {x: 4, y: 3},end: {x: 4, y: 4} }],// 风格9
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }], // 风格1
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }], // 风格2
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 4, y: 4} }],// 风格3
[{ start: {x: 1, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格4
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格5
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 4} }],// 风格6
[{ start: {x: 1, y: 1}, end: {x: 2, y: 2} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 1, y: 3}, end: {x: 2, y: 4} }, { start: {x: 3, y: 3}, end: {x: 4, y: 4} }],// 风格7
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格8
[{ start: {x: 1, y: 1}, end: {x: 2, y: 4} }, { start: {x: 3, y: 1}, end: {x: 4, y: 2} }, { start: {x: 3, y: 3}, end: {x: 3, y: 4} }, { start: {x: 4, y: 3}, end: {x: 4, y: 4} }],// 风格9
]
const tabs_name = ref('content');
const state = reactive({
@ -148,8 +154,12 @@ const style_click = (index: number) => {
const magic_list = (index: number) => {
return cloneDeep(style_show_list[index]).map((item) => ({
...item,
actived_index: 0,
data_content: cloneDeep(data_content),
data_style: cloneDeep(data_style)
data_style: {
...cloneDeep(data_style),
carouselKey: get_math(),
}
}));
}

3
src/components/model-notice/index.vue
View File

@ -61,8 +61,7 @@ const img_style = ref('');
// 标题的设置
const topic_style = computed(() => {
// 标题渐变色处理
const color_list = new_style.value.topic_color_list.map((item: { color: string }) => item.color) || [];
const gradient = gradient_handle(color_list, '90deg');
const gradient = gradient_handle(new_style.value.topic_color_list, '90deg');
// 标题设置
return `color:${ new_style.value.topic_color }; font-size: ${ new_style.value.topic_size }px; font-weight: ${ new_style.value.topic_typeface }; ${ gradient }`;
});

3
src/components/model-shop-list/index.vue
View File

@ -221,8 +221,7 @@ const style_config = (typeface: string, size: number, color: string | object, ty
}
// 按钮渐变色处理
const button_gradient = () => {
const color_list = new_style.value.shop_button_color.map((item: { color: string }) => item.color) || [];
return gradient_handle(color_list, '90deg');
return gradient_handle(new_style.value.shop_button_color, '90deg');
}
// 公共样式
const style_container = computed(() => {

2
src/components/model-user-info/index.vue
View File

@ -61,7 +61,7 @@ const base_data = reactive({
// 用户名字号
user_name_size: 16,
// 用户ID颜色
user_id_color_list: ['rgba(254, 184, 143, 1)', 'rgba(255, 227, 220, 1)'],
user_id_color_list: [{color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, {color: 'rgba(255, 227, 220, 1)', color_percentage: ''}],
// 用户ID颜色
user_id_color: 'rgba(0, 0, 0, 1)',
// 用户ID方向

2
src/components/model-user-info/model-user-info-styles.vue
View File

@ -102,7 +102,7 @@ const props = defineProps({
user_name_color: 'rgba(0, 0, 0, 1)',
user_name_weight: '500',
user_name_size: 16,
user_id_color_list: ['rgba(254, 184, 143, 1)', 'rgba(255, 227, 220, 1)'],
user_id_color_list: [{ color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, { color: 'rgba(255, 227, 220, 1)', color_percentage: '' }],
user_id_color: 'rgba(0, 0, 0, 1)',
user_id_direction: '90deg',
user_id_weight: '400',

2
src/components/page-settings/index.ts
View File

@ -1,6 +1,6 @@
type page_content = {
title: string;
color_list: string[];
color_list: color_list[];
direction: string;
background_img_style: string;
background_img_url: uploadList[];

2
src/components/page-settings/page-content.vue
View File

@ -37,7 +37,7 @@ interface Props {
const props = defineProps<Props>();
const form = reactive(props.value);
const mult_color_picker_event = (arry: string[], type: number) => {
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.color_list = arry;
form.direction = type.toString();
};

2
src/layout/components/main/default/custom.ts
View File

@ -20,7 +20,7 @@ const defaultSearch: defaultSearch = {
style: {
common_style: {
...defaultCommon,
color_list: ['rgb(244, 252, 255)'],
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: '' }],
}
},
};

2
src/layout/components/main/default/footer-nav.ts
View File

@ -25,7 +25,7 @@ const defaultFooterNav: DefaultFooterNav = {
style: {
text_color_checked: 'rgba(204, 204, 204, 1)',
default_text_color: 'rgba(0, 0, 0, 1)',
common_style: { ...defaultCommon, color_list: ['rgba(255,255,255,1)'] },
common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: '' }]},
},
};

6
src/layout/components/main/default/header-nav.ts
View File

@ -1,6 +1,6 @@
interface DefaultFooterNav {
content: {
color_list: string[];
color_list: color_list[];
title: string;
direction: string;
background_img_style: number;
@ -9,9 +9,9 @@ interface DefaultFooterNav {
}
const defaultFooterNav: DefaultFooterNav = {
content: {
color_list: ['#f5f5f5'],
color_list: [{ color: '#f5f5f5', color_percentage: '' }],
title: '',
direction: '0deg',
direction: '180deg',
background_img_style: 2,
background_img_url: [],
},

2
src/layout/components/main/default/index.ts
View File

@ -1,6 +1,6 @@
const defaultCommon: componentsCommonCommonStyle = {
direction: '90deg',
color_list: [''],
color_list: [{ color: '', color_percentage: '' }],
background_img_style: 2,
padding: 0,
padding_top: 0,

9
src/layout/components/main/default/notice.ts
View File

@ -7,9 +7,6 @@ interface carousel_list {
notice_link: object;
is_show: boolean;
}
interface color_list {
color: string;
}
interface defaultSearch {
content: {
notice_style: string;
@ -61,10 +58,12 @@ const defaultSearch: defaultSearch = {
news_size: 15,
topic_color_list: [
{
color: ''
color: '',
color_percentage: ''
},
{
color: ''
color: '',
color_percentage: ''
}
],
topic_color: '#000',

2
src/layout/components/main/default/search.ts
View File

@ -54,7 +54,7 @@ const defaultSearch: defaultSearch = {
text_size: 15,
common_style: {
...defaultCommon,
color_list: ['#ffffff'],
color_list: [{ color: '#ffffff', color_percentage: '' }],
padding_top: 9,
padding_bottom: 9,
padding_left: 15,

9
src/layout/components/main/default/shop-list.ts
View File

@ -1,7 +1,4 @@
import defaultCommon from './index';
interface color_list {
color: string;
}
interface DefaultProductList {
content: {
product_style: string;
@ -100,10 +97,12 @@ const defaultProductList: DefaultProductList = {
shop_button_size: 12,
shop_button_color: [
{
color: '#2a94ff'
color: '#2a94ff',
color_percentage: ''
},
{
color: '#2a94ff'
color: '#2a94ff',
color_percentage: ''
}
],
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },

9
src/layout/components/main/default/shop-tabs.ts
View File

@ -11,9 +11,6 @@ interface articleTabsList {
sort_rules: string;
product_list: [];
}
interface color_list {
color: string;
}
interface DefaultProductList {
content: {
tabs_style: string;
@ -127,10 +124,12 @@ const defaultProductList: DefaultProductList = {
shop_button_size: 12,
shop_button_color: [
{
color: '#2a94ff'
color: '#2a94ff',
color_percentage: ''
},
{
color: '#2a94ff'
color: '#2a94ff',
color_percentage: ''
}
],
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },

1
src/layout/components/main/default/text-title.ts
View File

@ -60,7 +60,6 @@ const defaultSearch: defaultSearch = {
padding_bottom: 15,
padding_left: 15,
padding_right: 15,
color_list: ['']
}
},
};

4
src/layout/components/main/default/user-info.ts
View File

@ -10,7 +10,7 @@ interface DefaultUserInfo {
user_name_color: string;
user_name_weight: string;
user_name_size: number;
user_id_color_list: string[];
user_id_color_list: color_list[];
user_id_color: string;
user_id_direction: string;
user_id_weight: string;
@ -39,7 +39,7 @@ const defaultUserInfo: DefaultUserInfo = {
user_name_color: 'rgba(0, 0, 0, 1)',
user_name_weight: '500',
user_name_size: 16,
user_id_color_list: ['rgba(254, 184, 143, 1)', 'rgba(255, 227, 220, 1)'],
user_id_color_list: [{color: 'rgba(254, 184, 143, 1)', color_percentage: ''}, {color: 'rgba(255, 227, 220, 1)', color_percentage: ''}],
user_id_color: 'rgba(0, 0, 0, 1)',
user_id_direction: '90deg',
user_id_weight: '400',

8
src/types/global.d.ts vendored
View File

@ -9,11 +9,15 @@ declare global {
name: string;
key: string;
}
interface color_list {
color: string;
color_percentage: string;
}
/**
* 渐变色参数集合
*/
interface gradientStyle {
color_list: string[];
color_list: color_list[];
direction: string;
}
/**
@ -71,7 +75,7 @@ declare global {
* 通用样式参数
*/
type componentsCommonCommonStyle = {
color_list: string[];
color_list: color_list[];
direction: string;
background_img_style: number;
padding: number;

36
src/utils/index.ts
View File

@ -1,3 +1,4 @@
import { isEmpty } from "lodash";
/**
* 判断一个对象是否为空。
*
@ -31,29 +32,40 @@ export function gradient_computer(new_style: gradientStyle) {
* @param direction 渐变的方向，可以是角度或其他CSS支持的渐变方向。
* @returns 返回一个字符串，包含生成的线性渐变样式。
*/
export function gradient_handle(color_list: string[], direction: string) {
export function gradient_handle(color_list: color_list[], direction: string) {
console.log(color_list, direction);
let container_common_styles = ``;
if (color_list && color_list.length > 0) {
container_common_styles += `background: linear-gradient(${direction || '0deg'},`;
// 颜色反转
container_common_styles += `background: linear-gradient(${direction || '180deg'},`;
const new_color_list = JSON.parse(JSON.stringify(color_list));
const reverse_color = new_color_list.reverse();
reverse_color.forEach((item: any, index: number) => {
container_common_styles += `${item ? item : 'rgb(255 255 255 / 0%)'}`;
new_color_list.forEach((item: any, index: number) => {
container_common_styles += `${item.color ? item.color : 'rgb(255 255 255 / 0%)'}`;
if (color_list.length == 1) {
container_common_styles += ` 0%, ${item} 100%`;
container_common_styles += ` ${ item.color_percentage || 0 }%, ${ item.color } 100%`;
} else {
if (index == color_list.length - 1) {
container_common_styles += ` 100%`;
} else if (index == 0) {
container_common_styles += ` 0%,`;
if (!isEmpty(item.color_percentage)) {
if (index == color_list.length - 1) {
container_common_styles += ` ${ item.color_percentage }%`;
} else {
container_common_styles += ` ${ item.color_percentage }%,`;
}
} else {
container_common_styles += ` ${(100 / color_list.length) * index}%,`;
if (index == color_list.length - 1) {
container_common_styles += ` 100%`;
} else if (index == 0) {
container_common_styles += ` 0%,`;
} else {
container_common_styles += ` ${(100 / color_list.length) * index}%,`;
}
}
}
});
container_common_styles += `);`;
}
console.log(container_common_styles);
return container_common_styles;
}