161 lines
6.9 KiB
Vue
161 lines
6.9 KiB
Vue
<template>
|
||
<!-- 顶部导航栏 -->
|
||
<div class="settings">
|
||
<card-container class="settings-title flex-row jc-sb align-c mb-8" padding="2.1rem 3.8rem">
|
||
<div class="title">{{ value.name }}</div>
|
||
<template v-if="value.key != 'page-settings'">
|
||
<el-radio-group v-model="radio" class="radio-group" size="large" is-button>
|
||
<el-radio-button class="radio-item" value="1">内容</el-radio-button>
|
||
<el-radio-button class="radio-item" value="2">样式</el-radio-button>
|
||
</el-radio-group>
|
||
</template>
|
||
</card-container>
|
||
<div class="setting-content">
|
||
<!-- 基础组件 -->
|
||
<!-- 页面设置 -->
|
||
<template v-if="value.key == 'page-settings'">
|
||
<page-content :value="value.com_data.content"></page-content>
|
||
</template>
|
||
<!-- 基础组件 -->
|
||
<template v-else-if="value.key == 'video'">
|
||
<model-video-setting :type="radio" :value="value.com_data"></model-video-setting>
|
||
</template>
|
||
<!-- 用户信息 -->
|
||
<template v-else-if="value.key == 'user-info'">
|
||
<model-user-info-setting :type="radio" :value="value.com_data"></model-user-info-setting>
|
||
</template>
|
||
<!-- 文章列表 -->
|
||
<template v-else-if="value.key == 'article-list'">
|
||
<model-article-list-setting :type="radio" :value="value.com_data"></model-article-list-setting>
|
||
</template>
|
||
<!-- 文章选项卡 -->
|
||
<template v-else-if="value.key == 'article-tabs'">
|
||
<model-article-tabs-setting :type="radio" :value="value.com_data"></model-article-tabs-setting>
|
||
</template>
|
||
<!-- 搜索框 -->
|
||
<template v-else-if="value.key == 'search'">
|
||
<model-search-setting :type="radio" :value="value.com_data"></model-search-setting>
|
||
</template>
|
||
<!-- 导航组 -->
|
||
<template v-else-if="value.key == 'nav-group'">
|
||
<model-nav-group-setting :type="radio" :value="value.com_data"></model-nav-group-setting>
|
||
</template>
|
||
<!-- 轮播图 -->
|
||
<template v-else-if="value.key == 'carousel'">
|
||
<model-carousel-setting :type="radio" :value="value.com_data"></model-carousel-setting>
|
||
</template>
|
||
<!-- 公告 -->
|
||
<template v-else-if="value.key == 'notice'">
|
||
<model-notice-setting :type="radio" :value="value.com_data"></model-notice-setting>
|
||
</template>
|
||
<!-- 选项卡 -->
|
||
<template v-else-if="value.key == 'tabs'">
|
||
<model-tabs-setting :type="radio" :value="value.com_data"></model-tabs-setting>
|
||
</template>
|
||
<!-- 商品列表 -->
|
||
<template v-else-if="value.key == 'shop-list'">
|
||
<model-shop-list-setting :type="radio" :value="value.com_data"></model-shop-list-setting>
|
||
</template>
|
||
<!-- 商品选项卡 -->
|
||
<template v-else-if="value.key == 'shop-tabs'">
|
||
<model-shop-tabs-setting :type="radio" :value="value.com_data"></model-shop-tabs-setting>
|
||
</template>
|
||
<!-- 图片魔方 -->
|
||
<template v-else-if="value.key == 'img-magic'">
|
||
<model-img-magic-setting :type="radio" :value="value.com_data"></model-img-magic-setting>
|
||
</template>
|
||
<!-- 图片魔方 -->
|
||
<template v-else-if="value.key == 'data-magic'">
|
||
<model-data-magic-setting :type="radio" :value="value.com_data"></model-data-magic-setting>
|
||
</template>
|
||
<!-- 热区 -->
|
||
<template v-else-if="value.key == 'hot-zone'">
|
||
<model-hot-zone-setting :type="radio" :value="value.com_data"></model-hot-zone-setting>
|
||
</template>
|
||
<!-- 自定义 -->
|
||
<template v-else-if="value.key == 'custom'">
|
||
<model-custom-setting :type="radio" :value="value.com_data"></model-custom-setting>
|
||
</template>
|
||
<!-- 底部导航 -->
|
||
<template v-else-if="value.key == 'footer-nav'">
|
||
<footer-nav-setting :type="radio" :value="value.com_data"></footer-nav-setting>
|
||
</template>
|
||
<!-- 营销组件 -->
|
||
<!-- 优惠券 -->
|
||
<template v-else-if="value.key == 'coupon'">
|
||
<model-coupon-setting :type="radio" :value="value.com_data"></model-coupon-setting>
|
||
</template>
|
||
<!-- 工具组件 -->
|
||
<!-- 辅助空白 -->
|
||
<template v-else-if="value.key == 'auxiliary-blank'">
|
||
<model-auxiliary-blank-setting :type="radio" :value="value.com_data"></model-auxiliary-blank-setting>
|
||
</template>
|
||
<!-- 辅助线 -->
|
||
<template v-else-if="value.key == 'row-line'">
|
||
<model-auxiliary-line-setting :type="radio" :value="value.com_data"></model-auxiliary-line-setting>
|
||
</template>
|
||
<!--富文本 -->
|
||
<template v-else-if="value.key == 'rich-text'">
|
||
<model-rich-text-setting :type="radio" :value="value.com_data"></model-rich-text-setting>
|
||
</template>
|
||
<!-- 文本标题 -->
|
||
<template v-else-if="value.key == 'text-title'">
|
||
<model-text-title-setting :type="radio" :value="value.com_data"></model-text-title-setting>
|
||
</template>
|
||
<!-- 悬浮按钮 -->
|
||
<template v-else-if="value.key == 'float-window'">
|
||
<model-float-window-setting :type="radio" :value="value.com_data"></model-float-window-setting>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
const props = defineProps({
|
||
value: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.settings {
|
||
width: 46rem;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.settings-title {
|
||
height: 7.8rem;
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
.radio-group {
|
||
background: #f4f4f4;
|
||
border-radius: 100rem;
|
||
.el-radio-button {
|
||
overflow: hidden;
|
||
border-radius: 100rem;
|
||
:deep(.el-radio-button__inner) {
|
||
border: 0;
|
||
background: #f4f4f4;
|
||
}
|
||
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
||
background: $cr-primary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.setting-content {
|
||
height: calc(100vh - 16.8rem);
|
||
overflow: auto;
|
||
}
|
||
}
|
||
@media screen and (max-width: 1540px) {
|
||
.settings {
|
||
width: 40rem;
|
||
}
|
||
}
|
||
</style>
|