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

头部搜索和轮播问题修复

v1.1.0
于肖磊 2024-11-12 11:43:43 +08:00
parent 031d49e12e
commit 5eadd4feac
11 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/icons/iconfont.css
View File

File diff suppressed because one or more lines are too long

2
src/assets/icons/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
src/assets/icons/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "42423537",
"name": "边距",
"font_class": "margin",
"unicode": "e7aa",
"unicode_decimal": 59306
},
{
"icon_id": "42400752",
"name": "分类-空心",

BIN
src/assets/icons/iconfont.ttf
View File

Binary file not shown.

6
src/components/base/margin/index.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.margin" :max="200" @update:model-value="margin_event"></slider>
<slider v-model="form.margin" :max="200" type="retract" @update:model-value="margin_event"></slider>
<el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
</div>
</el-tooltip>
</div>
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'margin' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<div class="flex-width-half pr-10">
<input-number v-model="form.margin_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
</div>
@ -83,7 +83,7 @@ const icon_data = reactive({
});
const icon_event = (name: string) => {
if (name == 'unified') {
icon_data.name = 'alone';
icon_data.name = 'margin';
icon_data.title = '独个';
} else {
icon_data.name = 'unified';

6
src/components/base/padding/index.vue
View File

@ -1,14 +1,14 @@
<template>
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.padding" :max="200" @update:model-value="padding_event"></slider>
<slider v-model="form.padding" :max="200" type="retract" @update:model-value="padding_event"></slider>
<el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>
</div>
</el-tooltip>
</div>
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'margin' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
<div class="flex-width-half pr-10">
<input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
</div>
@ -83,7 +83,7 @@ const icon_data = reactive({
});
const icon_event = (name: string) => {
if (name == 'unified') {
icon_data.name = 'alone';
icon_data.name = 'margin';
icon_data.title = '独个';
} else {
icon_data.name = 'unified';

2
src/components/base/radius/index.vue
View File

@ -2,7 +2,7 @@
<template>
<div class="flex-col w">
<div class="flex-row gap-10 align-c">
<slider v-model="form.radius" @update:model-value="radius_event"></slider>
<slider v-model="form.radius" type="retract" @update:model-value="radius_event"></slider>
<el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
<div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
<icon :name="icon_data.name" size="24"></icon>

13
src/components/base/slider/index.vue
View File

@ -1,12 +1,16 @@
<template>
<div class="slider w">
<el-slider v-model="modelValue" :min="min" :max="max" :step="step" />
<input-number v-model="modelValue" class="slider-input" :min="min" :max="max"></input-number>
<input-number v-model="modelValue" :class="type == 'notRetract'? 'slider-input' : 'slider-retract-input'" :min="min" :max="max"></input-number>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
type: {
type: String,
default: 'notRetract',
},
min: {
type: Number,
default: 0,
@ -31,7 +35,12 @@ const modelValue = defineModel({ type: Number, default: 0 });
gap: 1rem;
.slider-input {
:deep(.el-input-number) {
width: 9rem;
width: 10.7rem;
}
}
.slider-retract-input {
:deep(.el-input-number) {
width: 7.3rem;
}
}
}

22
src/components/model-carousel/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div :style="style_container">
<div :style="style_img_container">
<div class="re" :style="style_img_container">
<div ref="swiperSize" class="swiper-container w h">
<swiper
:key="carouselKey"
@ -57,17 +57,17 @@
</div>
</div>
</swiper-slide>
<div v-if="new_style.is_show == '1'" :class="{'x-middle': new_style.indicator_location == 'center', 'right-0': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
<template v-if="new_style.indicator_style == 'num'">
<div :style="indicator_style" class="dot-item">
<span class="num-active">{{ actived_index + 1 }}</span><span>/{{ form.carousel_list.length }}</span>
</div>
</template>
<template v-else>
<div v-for="(item, index2) in form.carousel_list" :key="index2" :style="indicator_style" :class="{'dot-item': true, 'active': actived_index == index2 }" />
</template>
</div>
</swiper>
<div v-if="new_style.is_show == '1'" :class="{'x-middle': new_style.indicator_location == 'center', 'right-0': new_style.indicator_location == 'flex-end' }" class="dot flex abs" :style="`bottom: ${new_style.indicator_bottom}px;`">
<template v-if="new_style.indicator_style == 'num'">
<div :style="indicator_style" class="dot-item">
<span class="num-active">{{ actived_index + 1 }}</span><span>/{{ form.carousel_list.length }}</span>
</div>
</template>
<template v-else>
<div v-for="(item, index2) in form.carousel_list" :key="index2" :style="indicator_style" :class="{'dot-item': true, 'active': actived_index == index2 }" />
</template>
</div>
</div>
</div>
</div>

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

@ -28,7 +28,7 @@
</template>
<div v-if="['1', '2', '3'].includes(form.theme) && !isEmpty(form.title)">{{ form.title }}</div>
<template v-if="['3', '5'].includes(form.theme) && !is_search_alone_row">
<div class="flex-1">
<div class="flex-1 fw-n">
<model-search :value="pageData.com_data" :is-page-settings="true"></model-search>
</div>
</template>

5
src/styles/index.scss
View File

@ -258,4 +258,9 @@ p {
.el-form-item:last-child {
margin-bottom: 0;
}
}
.el-input-number.is-controls-right .el-input__wrapper {
padding-left: 10px;
padding-right: 35px;
}