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

百分比显示处理

v1.0.0
于肖磊 2024-08-14 17:15:57 +08:00
parent 3cfc467bf6
commit f6be46e88c
4 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,9 @@
<div class="flex-col">
<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>
<el-input v-model="item.color_percentage" :maxlength="3" placeholder="请输入百分比" @change="change_color_percentage(index, $event)">
<template #append>%</template>
</el-input>
</div>
<div v-if="index + 1 !== color_list.length" class="connect-line"></div>
</div>

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

@ -3,7 +3,7 @@
<el-form-item label="底部背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<mult-color-picker :key="form.carouselKey" :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.background_img_style" is-button>
@ -47,7 +47,7 @@
</el-form-item>
</card-container>
<card-container class="mb-8">
<carousel-indicator :value="form"></carousel-indicator>
<carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>
</card-container>
</template>
<script setup lang="ts">

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

@ -20,7 +20,7 @@
<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>
<span class="num-active" :style="`color: ${ item.data_style.actived_color }`">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.product_list.length }}</span>
</div>
</template>
<template v-else>

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

@ -54,7 +54,7 @@ const props = defineProps({
const style_list = ['heng2', 'shu2', 'shang2xia1', 'shang1xia2', 'zuo1you2', 'zuo2you1', 'tianzige', 'shang2xia3', 'zuo1youshang1youxia2'];
// 每个小模块独立的样式
const data_style = {
color_list: [{ color: '#FFD9C3', color_percentage: '' }, { color: '#FFECE2', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }, { color: '#FFFFFF', color_percentage: '' }],
color_list: [{ color: '#FFD9C3', color_percentage: '0' }, { color: '#FFECE2', color_percentage: '12' }, { color: '#FFFFFF', color_percentage: '30' }],
direction: '180deg',
background_img_style: 2,
background_img_url: [],