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

修改问题设置

v1.1.0
于肖磊 2024-10-30 14:19:30 +08:00
parent 45696bb38d
commit e3d8307f0b
12 changed files with 125 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/custom-module/model-text/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="img-outer w h re oh" :style="com_style">
<div :style="text_style" class="txet-word-break">
<div :style="text_style" class="text-word-break">
<template v-if="form.is_rich_text == '1'">
<div class="rich-text-content" :innerHTML="text_title"></div>
</template>

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

@ -38,7 +38,7 @@
<el-input v-model="item.new_name" placeholder="请输入组件别名" size="small" clearable type="textarea" class="flex-1 do-not-trigger" :rows="1" resize="none" />
</template>
<template v-else>
<span class="size-12 cr-6 txet-word-break">{{ !isEmpty(item.new_name) ? item.new_name : item.name }}</span>
<span class="size-12 cr-6 text-word-break">{{ !isEmpty(item.new_name) ? item.new_name : item.name }}</span>
</template>
</div>
<div class="abs draggable-icon" :style="item.show_tabs == '1' ? 'opacity: 1;' : 'opacity: 0.5;'">

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

@ -8,7 +8,18 @@
</el-form-item>
<template v-if="form.data_type === 'goods' && isShowTitle">
<el-form-item label="主标题">
<el-input v-model="form.heading_title" placeholder="请输入主标题" clearable></el-input>
<div class="flex-col gap-10 w">
<el-radio-group v-model="form.heading_title_type">
<el-radio value="text">文字</el-radio>
<el-radio value="image">图片</el-radio>
</el-radio-group>
<template v-if="form.heading_title_type == 'text'">
<el-input v-model="form.heading_title" placeholder="请输入主标题" clearable></el-input>
</template>
<template v-else>
<upload v-model="form.heading_title_img" :limit="1" size="50"></upload>
</template>
</div>
</el-form-item>
<el-form-item label="副标题">
<el-input v-model="form.subtitle" placeholder="请输入副标题" clearable></el-input>

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

@ -26,14 +26,6 @@
</el-form-item>
</template>
<template v-if="tabs_content.data_type === 'goods'">
<template v-if="isShowTitle">
<el-form-item label="主标题">
<color-text-size-group v-model:color="form.heading_color" v-model:typeface="form.heading_typeface" v-model:size="form.heading_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="副标题">
<color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</template>
<el-form-item label="内间距">
<padding :key="form.carouselKey" :value="form.chunk_padding" @update:value="chunk_padding_change"></padding>
</el-form-item>
@ -42,16 +34,40 @@
<radius :key="form.carouselKey" :value="form.img_radius" @update:value="img_radius_change"></radius>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container v-if="tabs_content.data_type === 'goods'">
<div class="mb-12">商品样式</div>
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="商品价格">
<color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
<template v-if="tabs_content.data_type === 'goods' && isShowTitle">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">标题样式</div>
<el-form-item label="主标题">
<template v-if="tabs_content.heading_title_type == 'text'">
<color-text-size-group v-model:color="form.heading_color" v-model:typeface="form.heading_typeface" v-model:size="form.heading_size" default-color="#000000"></color-text-size-group>
</template>
<template v-else>
<el-form-item label="图片高度" label-width="60" class="w form-item-child-label">
<slider v-model="form.heading_img_height" :min="1" :max="200"></slider>
</el-form-item>
</template>
</el-form-item>
<el-form-item label="副标题">
<color-text-size-group v-model:color="form.subtitle_color" v-model:typeface="form.subtitle_typeface" v-model:size="form.subtitle_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="标题同行">
<el-switch v-model="form.title_line" active-value="1" inactive-value="0" />
</el-form-item>
</card-container>
</template>
<template v-if="tabs_content.data_type === 'goods'">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item label="商品名称">
<color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="商品价格">
<color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
</template>
<div class="bg-f5 divider-line" />
<card-container>
<carousel-indicator :key="form.carouselKey" :value="form"></carousel-indicator>

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

@ -9,9 +9,16 @@
<div class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
<div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<template v-if="item.data_content.heading_title_type == 'text'">
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
</template>
<template v-else-if="item.data_content.heading_title_img.length > 0">
<div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
<img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
</div>
</template>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :good-style="item.data_style" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
@ -40,9 +47,16 @@
<div class="w h" :style="`${ item.data_style.background_img_style }`">
<template v-if="item.data_content.data_type == 'goods'">
<div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w txet-word-break text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
<div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'gap-5 tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
<template v-if="item.data_content.heading_title_type == 'text'">
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
</template>
<template v-else-if="item.data_content.heading_title_img.length > 0">
<div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
<img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
</div>
</template>
<p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<magic-carousel :value="item" :good-style="item.data_style" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
@ -384,4 +398,9 @@ const style_img_container = computed(() => common_img_computer(new_style.value.c
width: 6rem;
}
}
.flex-basis-shrink {
flex-basis: content;
flex-shrink: 1;
}
</style>

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

@ -11,7 +11,7 @@
</div>
</el-form-item>
<el-form-item label="容器高度" label-width="60">
<slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
<slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
@ -71,6 +71,7 @@ const data_style = {
heading_color: '#000',
heading_typeface: '400',
heading_size: 20,
heading_img_height: 28,
subtitle_color: '#FF852A',
subtitle_typeface: '400',
subtitle_size: 14,
@ -113,7 +114,9 @@ const data_style = {
// 每个小模块独立的内容
const data_content = {
data_type: 'goods',
heading_title_type: 'text',
heading_title: '主标题',
heading_title_img: [],
subtitle: '副标题',
goods_list:[],
goods_ids: '',

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

@ -12,7 +12,7 @@
</el-form-item>
<template v-if="form.style_actived !== 10">
<el-form-item label="容器高度">
<slider v-model="form.container_height" :min="30" :max="500" @update:model-value="handleResize"></slider>
<slider v-model="form.container_height" :min="30" :max="1000" @update:model-value="handleResize"></slider>
</el-form-item>
<el-form-item label="图片设置">
<el-radio-group v-model="form.img_fit">

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

@ -41,7 +41,7 @@
</div>
<div v-for="(item, index) in notice_list" :key="index" class="flex align-c" :style="news_style">
<span :class="`num one${index + 1}`">{{ index + 1 }}</span>
<div class="txet-word-break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
<div class="text-word-break" :style="`color: ${new_style.news_color}`">{{ item.notice_title }}</div>
</div>
</div>
</div>

5
src/components/model-title/index.vue
View File

@ -10,7 +10,8 @@
<template v-else-if="!isEmpty(form.icon_class)">
<icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
</template>
<div v-if="!isEmpty(form.title)" class="pr-15 nowrap" :style="title_style">{{ form.title }}</div>
<div v-if="!isEmpty(form.title)" class="nowrap" :style="title_style">{{ form.title }}</div>
<div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
</div>
<div class="flex-row gap-10 align-c right-0 abs">
<template v-if="form.keyword_show == '1'">
@ -21,7 +22,7 @@
<div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
</div>
</div>
<div v-if="!isEmpty(form.subtitle)" class="txet-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
<div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
</div>
</div>
</div>

57
src/components/model-title/model-title-styles.vue
View File

@ -15,42 +15,41 @@
</div>
</el-form-item>
</template>
<el-form-item label="标题颜色">
<color-picker v-model="form.title_color" default-color="#000000"></color-picker>
</el-form-item>
<el-form-item label="标题文字">
<el-radio-group v-model="form.title_weight">
<el-radio value="500">加粗</el-radio>
<el-radio value="normal">正常</el-radio>
<el-radio value="italic">倾斜</el-radio>
</el-radio-group>
<el-form-item label="字号" label-width="40" class="mb-0 w">
<slider v-model="form.title_size" :max="100"></slider>
</el-form-item>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.img_height" :max="500"></slider>
</el-form-item>
</card-container>
<template v-if="!isEmpty(content.subtitle)">
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">副标题设置</div>
<el-form-item label="颜色">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
</el-form-item>
<el-form-item label="文字">
<el-radio-group v-model="form.subtitle_weight">
<el-form-item label="主标题">
<div class="flex-col gap-10">
<color-picker v-model="form.title_color" default-color="#000000"></color-picker>
<el-radio-group v-model="form.title_weight">
<el-radio value="500">加粗</el-radio>
<el-radio value="normal">正常</el-radio>
<el-radio value="italic">倾斜</el-radio>
</el-radio-group>
<el-form-item label="字号" label-width="40" class="mb-0 w">
<slider v-model="form.subtitle_size" :max="100"></slider>
<slider v-model="form.title_size" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
<template v-if="!isEmpty(content.subtitle)">
<el-form-item label="副标题">
<div class="flex-col gap-10">
<color-picker v-model="form.subtitle_color" default-color="#000000"></color-picker>
<el-radio-group v-model="form.subtitle_weight">
<el-radio value="500">加粗</el-radio>
<el-radio value="normal">正常</el-radio>
<el-radio value="italic">倾斜</el-radio>
</el-radio-group>
<el-form-item label="字号" label-width="40" class="mb-0 w">
<slider v-model="form.subtitle_size" :max="100"></slider>
</el-form-item>
</div>
</el-form-item>
</card-container>
</template>
<el-form-item label="标题同行">
<el-switch v-model="form.title_line" active-value="1" inactive-value="0" />
</el-form-item>
</template>
<el-form-item label="图片高度">
<slider v-model="form.img_height" :max="500"></slider>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">关键字设置</div>

20
src/components/page-settings/index.vue
View File

@ -14,12 +14,19 @@
<div v-if="['1', '2', '3'].includes(form.theme)" class="flex-1">
<div class="flex-1 flex-row align-c jc-c h gap-16" :class="position_class" :style="[{ 'justify-content': form?.indicator_location || 'center' }, text_style]">
<template v-if="['2', '3'].includes(form.theme) && form.logo.length > 0">
<div class="logo-outer-style re">
<img class="logo-style" :style="up_slide_old_logo_style" :src="form.logo[0].url" />
<template v-if="new_style.up_slide_logo && new_style.up_slide_logo.length > 0">
<img class="logo-style abs left-0" :style="'opacity:0;' + up_slide_opacity" :src="new_style.up_slide_logo[0].url" />
</template>
</div>
<template v-if="new_style.up_slide_logo && new_style.up_slide_logo.length > 0">
<!-- 有上滑logo的处理逻辑 -->
<div class="logo-outer-style re">
<img class="logo-style" :style="up_slide_old_logo_style + 'width:' + ((props.scollTop - 5) / 90 < 1 ? 100 + '%;' : 0)" :src="form.logo[0].url" />
<img :class="['logo-style', {'abs left-0': (props.scollTop - 5) / 90 <= 1 }]" :style="'opacity:0;' + up_slide_opacity" :src="new_style.up_slide_logo[0].url" />
</div>
</template>
<template v-else>
<!-- 没有上滑logo -->
<div class="logo-outer-style re">
<img class="logo-style" :src="form.logo[0].url" />
</div>
</template>
</template>
<div v-if="['1', '2'].includes(form.theme)">{{ form.title }}</div>
<template v-if="['3', '5'].includes(form.theme) && !is_search_alone_row">
@ -236,6 +243,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
.logo-style {
max-height: 2.8rem;
max-width: 100%;
transition: all 0.3s;
:deep(.image-slot) {
height: 2.8rem;
width: 2.8rem;

2
src/styles/common.scss
View File

@ -286,7 +286,7 @@
white-space: initial;
}
// 数字和文字超出范围不整体换行
.txet-word-break {
.text-word-break {
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;