修改显示逻辑
parent
3f551363b4
commit
a339a694b6
|
|
@ -6,7 +6,7 @@
|
|||
<el-form-item label="选择风格">
|
||||
<div class="flex align-c flex-wrap gap-10">
|
||||
<div v-for="(item, index) in style_list" :key="index" :class="['flex-item', {'flex-item-actived': form.style_actived === index }]" @click="style_click(index)">
|
||||
<icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="48"></icon>
|
||||
<icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="30"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
|
@ -213,8 +213,8 @@ const is_show_title = computed(() => !(form.value.style_actived == 7 && ![0, 1].
|
|||
}
|
||||
}
|
||||
.flex-item {
|
||||
width: 7.6rem;
|
||||
height: 7.6rem;
|
||||
width: 4.7rem;
|
||||
height: 4.7rem;
|
||||
background: #F7F7F7;
|
||||
border-radius: 0.4rem;
|
||||
border: 1px solid #E4E4E4;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<el-form-item label="选择风格">
|
||||
<div class="flex align-c flex-wrap gap-10">
|
||||
<div v-for="(item, index) in style_list" :key="index" :class="['flex-item', {'flex-item-actived': form.style_actived === index }]" @click="style_click(index)">
|
||||
<icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="48"></icon>
|
||||
<icon :name="item" :color="`${ form.style_actived === index ? '#E1EEF9' : '#EDEDED'}`" size="30"></icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
|
@ -136,8 +136,8 @@ const selected_click = (index: number) => {
|
|||
}
|
||||
}
|
||||
.flex-item {
|
||||
width: 7.6rem;
|
||||
height: 7.6rem;
|
||||
width: 4.7rem;
|
||||
height: 4.7rem;
|
||||
background: #F7F7F7;
|
||||
border-radius: 0.4rem;
|
||||
border: 1px solid #E4E4E4;
|
||||
|
|
|
|||
|
|
@ -18,10 +18,10 @@ const defaultFooterNav = ref<DefaultFooterNav>({
|
|||
nav_style: '0',
|
||||
nav_type: '0',
|
||||
nav_content: [
|
||||
{ id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '2', name: '分类', img: [{ id: 1, url: new_url + 'category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '3', name: '购物车', img: [{ id: 1, url: new_url + 'cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '4', name: '我的', img: [{ id: 1, url: new_url + 'user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/home.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '2', name: '分类', img: [{ id: 1, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/category.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '3', name: '购物车', img: [{ id: 1, url: new_url + 'cart.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/cart.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '4', name: '我的', img: [{ id: 1, url: new_url + 'user.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/user.png', original: '头像1', title: '头像1', ext: '.png', type: 'img' }], link: {} },
|
||||
],
|
||||
},
|
||||
style: {
|
||||
|
|
|
|||
|
|
@ -267,12 +267,12 @@ const model_class = computed(() => {
|
|||
|
||||
const model_style = computed(() => {
|
||||
return (item: { id: string; key: string }) => {
|
||||
// window.innerHeight(当前页面高度) - 80(顶部高度) - 844
|
||||
const height = (window.innerHeight - 924) / 2;
|
||||
// window.innerHeight(当前页面高度) - 60(顶部高度) - 846(中间高度)
|
||||
const height = (window.innerHeight - 906) / 2;
|
||||
let bottom = parseInt(float_bottom[item.id]) + height;
|
||||
// 容器自身高度是60 775-60 = 695
|
||||
if (parseInt(float_bottom[item.id]) > 695) {
|
||||
bottom = 695 + height;
|
||||
// 容器自身高度是60 846-60 = 786
|
||||
if (parseInt(float_bottom[item.id]) > 786) {
|
||||
bottom = 786 + height;
|
||||
}
|
||||
return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : '';
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue