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

1.新增底部导航单独配置页面

v1.0.0
sws 2024-09-24 13:35:57 +08:00
parent 600bfd8699
commit 5697f042a4
3 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/footer-nav/footer-nav-content.vue
View File

@ -5,15 +5,15 @@
<div class="mb-12">展示设置</div>
<el-form-item label="导航样式">
<el-radio-group v-model="form.nav_style" is-button @change="nav_style_change">
<el-radio :value="0">图片加文字</el-radio>
<el-radio :value="1">图片</el-radio>
<el-radio :value="2">文字</el-radio>
<el-radio value="0">图片加文字</el-radio>
<el-radio value="1">图片</el-radio>
<el-radio value="2">文字</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导航类型">
<el-radio-group v-model="form.nav_type" is-button @change="nav_type_change">
<el-radio :value="0">底部固定</el-radio>
<el-radio :value="1">底部悬浮</el-radio>
<el-radio value="0">底部固定</el-radio>
<el-radio value="1">底部悬浮</el-radio>
</el-radio-group>
</el-form-item>
</card-container>

19
src/views/tabbar/components/settings/index.vue
View File

@ -1,16 +1,17 @@
<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">底部导航</div>
<div class="settings-title flex-row jc-c align-c mb-8 w">
<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>
</card-container>
<div class="setting-content">
<!-- 底部导航 -->
<footer-nav-setting :type="radio" :value="value"></footer-nav-setting>
</div>
<div class="box-shadow-sm">
<div class="setting-content">
<!-- 底部导航 -->
<footer-nav-setting :type="radio" :value="value"></footer-nav-setting>
</div>
</div>
</div>
</template>
@ -21,17 +22,16 @@ const props = defineProps({
default: () => ({}),
},
});
console.log(props.value);
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;
padding: 2.1rem 3.8rem;
.title {
font-size: 16px;
font-weight: 500;
@ -40,11 +40,14 @@ const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
.radio-group {
background: #f4f4f4;
border-radius: 100rem;
width: 100%;
.el-radio-button {
overflow: hidden;
width: 50%;
border-radius: 100rem;
:deep(.el-radio-button__inner) {
border: 0;
width: 100%;
background: #f4f4f4;
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {

15
src/views/tabbar/index.vue
View File

@ -18,6 +18,7 @@
</template>
<script setup lang="ts">
import { get_math } from '@/utils';
import { Settings, AppMain } from './components/index';
import defaultSettings from './components/main/index';
import { cloneDeep } from 'lodash';
@ -43,6 +44,7 @@ const init = () => {
} else {
form.value = cloneDeep(temp_form.value);
}
key.value = get_math();
loading_event();
})
.catch(() => {
@ -88,11 +90,14 @@ const save_event = () => {
.app-wrapper {
background-color: #fff;
.app-wrapper-content {
height: calc(100vh - 11.1rem);
height: calc(100vh - 6.2rem);
}
.app-wrapper-footer {
height: 11.1rem;
padding: 3.5rem 2rem;
height: 6.2rem;
padding: 1.5rem;
border-top: 0.1rem solid #f5f5f5;
position: relative;
background: #fff;
.footer-save {
height: 3.1rem;
line-height: 3.1rem;
@ -115,9 +120,9 @@ const save_event = () => {
box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
}
:deep(.settings) {
box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
// box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
.settings-title {
box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
// box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
}
}
</style>