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

页面显示更改

v1.0.0
于肖磊 2024-08-15 16:48:13 +08:00
parent 97526f9713
commit ed9249f189
3 changed files with 90 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/model-data-magic/components/product-list-show.vue
View File

@ -1,22 +1,49 @@
<template>
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="flex-col gap-10">
<div>标题</div>
<div>价格</div>
</div>
<template v-if="props.outerflex == 'row'">
<div class="flex-row gap-10 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 half-width h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="flex-col w h tl gap-10">
<div class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
</div>
</div>
</template>
<template v-else-if="actived != 7 || props.num !== 1">
<div v-for="(item2, index2) in split_list" :key="index2" :class="['flex-col gap-10 h', { 'half-width': props.num !== 1}]">
<div class="w h re">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="price-suspension">¥{{ '51' }}</div>
</div>
<div class="text-line-1 size-14 tl w" style="overflow: inherit;">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-col h">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="flex-col w tl gap-10 pa-10">
<div class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div class="identifying"><span class="num">¥</span><span>{{'51' }}</span></div>
</div>
</div>
</template>
</div>
</template>
<template v-else>
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-col gap-10 align-c">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="flex-col gap-10">
<div>标题</div>
<div>价格</div>
</div>
<div class="flex-col gap-20 align-c w h">
<template v-if="props.flex === 'row'">
<div v-for="(item2, index2) in split_list" :key="index2" class="flex-row gap-10 align-c">
<image-empty v-model="item2.new_src[0]" :style="contentImgRadius"></image-empty>
<div class="flex-col jc-sb w h tl gap-10">
<div class="text-line-2 size-14">华为荣耀畅享平大幅度发过板华为荣耀畅享平大幅度发过板</div>
<div class="identifying"><span class="num">￥</span><span>{{'51' }}</span></div>
</div>
</div>
</template>
</div>
</template>
</template>
<script setup lang="ts">
@ -25,6 +52,8 @@ interface Props {
outerflex: string;
flex: string;
contentImgRadius: string;
num: number;
actived: number;
}
const props = withDefaults(defineProps<Props>(), {
@ -40,5 +69,36 @@ watchEffect(() => {
</script>
<style lang="scss" scoped>
:deep(.el-image) {
height: 100%;
width: 100%;
.el-image__inner {
object-fit: cover;
}
.image-slot img {
width: 4rem !important;
}
}
.identifying {
font-size: 2rem;
color: #EA3323;
.num {
font-size: 0.9rem;
}
}
.price-suspension {
width: calc(100% - 0.8rem);
margin: 0 0.4rem;
background: #fff;
font-size: 1.2rem;
line-height: 1.7rem;
color: #EA3323;
text-align: center;
position: absolute;
bottom: 0.4rem;
border-radius: 0.8rem;
}
.half-width {
width: 50%;
}
</style>

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

@ -6,22 +6,22 @@
<div class="flex-row align-c jc-c style-size flex-wrap">
<div v-for="(item, index) in data_magic_list" :key="index" :style="`${ item.data_style.background_style }`" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<template v-if="item.data_content.data_type == 'commodity'">
<div class="ptb-20 plr-15 w h">
<div class="flex-col gap-5 tl">
<div :class="['w h flex-col gap-20', {'ptb-20 plr-15': [0, 1].includes(index) }]">
<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 text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="mt-20 w h">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<div class="w h">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<a>item1</a>
<product-list-show :outerflex="item.outerflex" :flex="item.flex" :num="item.num" :actived="form.style_actived" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<template v-else>
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
</el-carousel-item>
@ -44,30 +44,21 @@
<div v-for="(item, index) in data_magic_list" :key="index" class="cube-selected img-spacing-border" :style="`${ selected_style(item) } ${ item.data_style.background_style }`">
<template v-if="item.data_content.data_type == 'commodity'">
<div class="ptb-20 plr-15 w h flex-col gap-20">
<div class="flex-col gap-5 tl">
<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 text-line-1" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
<p class="ma-0 w text-line-1" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
</div>
<div class="w h">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<template v-if="item.outerflex == 'row'">
<div class="flex-row gap-10 align-c">
<product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
</div>
</template>
<template v-else>
<div class="flex-col gap-20 align-c">
<product-list-show :flex="item.flex" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
</div>
</template>
<product-list-show :outerflex="item.outerflex" :flex="item.flex" :num="item.num" :actived="form.style_actived" :value="item1.split_list" :content-img-radius="content_img_radius"></product-list-show>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<template v-else>
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel :key="item.data_style.carouselKey" indicator-position="none" :interval="item.data_style.interval_time * 1000" arrow="never" :direction="item.data_style.rotation_direction" :autoplay="item.data_style.is_roll" @change="carousel_change($event, index)">
<el-carousel-item v-for="(item1, index1) in item.data_content.list" :key="index1">
<image-empty v-model="item1.carousel_img[0]" :style="content_img_radius"></image-empty>
</el-carousel-item>
@ -319,13 +310,13 @@ const style_container = computed(() => common_styles_computer(new_style.value.co
position: relative;
}
.style9-top {
width: calc(50% - 0.2rem);
height: 50%;
width: calc(50% - v-bind(outer_spacing));
height: calc(50% - v-bind(outer_spacing));
position: relative;
}
.style9-bottom {
width: calc(33% - 0.1rem);
height: 50%;
width: calc(33% - v-bind(outer_spacing));
height: calc(50% - v-bind(outer_spacing));
position: relative;
}
}

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

@ -85,8 +85,8 @@ const data_style = {
// 每个小模块独立的内容
const data_content = {
data_type: 'commodity',
heading_title: '',
subtitle: '',
heading_title: '主标题',
subtitle: '副标题',
product_list:[],
img_list:[
{