fix:样式修改;
This commit is contained in:
parent
6e3efe7843
commit
da83bcec5c
|
@ -68,19 +68,33 @@ const rightComponets = (str) => {
|
||||||
default:
|
default:
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
// 获取视口高度
|
||||||
|
const getViewportHeight = () => {
|
||||||
|
return Math.max(
|
||||||
|
document.documentElement.clientHeight,
|
||||||
|
window.innerHeight || 0
|
||||||
|
);
|
||||||
}
|
}
|
||||||
// 监听主页传过来的值
|
// 监听主页传过来的值
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
currentComponent.value = rightComponets(props.parameter.components)
|
currentComponent.value = rightComponets(props.parameter.components)
|
||||||
// 获取当前高度加上滚动条的高度
|
// 获取当前高度加上滚动条的高度
|
||||||
|
pageHeight.value = getViewportHeight() - 210
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
pageHeight.value = window.innerHeight + window.scrollY - 156;
|
window.addEventListener('resize', () => {
|
||||||
|
pageHeight.value = getViewportHeight() - 210;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.tabs-container{
|
.tabs-container{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.demo-tabs{
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
.button-div{
|
.button-div{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -88,9 +102,13 @@ onMounted(() => {
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
.tempalte-main{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.right-box{
|
.right-box{
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding:5px;
|
padding:5px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<el-scrollbar :height="viewportHeight">
|
||||||
<div class="list-container">
|
<div class="list-container">
|
||||||
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
|
<div class="content-list" v-for="(item, index) in items" :key="index" @click="handleClick(item)">
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
|
@ -14,10 +15,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref,onMounted,nextTick } from 'vue';
|
||||||
import { ArrowRight } from '@element-plus/icons-vue';
|
import { ArrowRight } from '@element-plus/icons-vue';
|
||||||
import CustomButton from '../components/button.vue'
|
import CustomButton from '../components/button.vue'
|
||||||
const emits = defineEmits(['checked']);
|
const emits = defineEmits(['checked']);
|
||||||
|
@ -30,10 +32,14 @@
|
||||||
{ id:5,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
{ id:5,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||||
{ id:6,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
{ id:6,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||||
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||||
|
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||||
|
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||||
|
{ id:7,title: '沁园春-长沙 习题训练作业', description: '沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业沁园春-长沙 习题训练作业',checked:false,type:'default',text:'习题训练' },
|
||||||
|
|
||||||
]);
|
]);
|
||||||
// 获取选中的checkbox的id
|
// 获取选中的checkbox的id
|
||||||
const selectIds = ref([])
|
const selectIds = ref([])
|
||||||
|
const viewportHeight = ref(0);
|
||||||
|
|
||||||
const handleClick = (item) => {
|
const handleClick = (item) => {
|
||||||
console.log(item.title);
|
console.log(item.title);
|
||||||
|
@ -50,6 +56,21 @@
|
||||||
}
|
}
|
||||||
emits('checked',selectIds.value)
|
emits('checked',selectIds.value)
|
||||||
}
|
}
|
||||||
|
// 获取视口高度
|
||||||
|
const getViewportHeight = () => {
|
||||||
|
return Math.max(
|
||||||
|
document.documentElement.clientHeight,
|
||||||
|
window.innerHeight || 0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
viewportHeight.value = getViewportHeight() - 157
|
||||||
|
nextTick(() => {
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
viewportHeight.value = getViewportHeight() - 157;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page-template flex">
|
<div class="page-template flex">
|
||||||
<!-- // 顶部 -->
|
<!-- 顶部 -->
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div>
|
<div>
|
||||||
<el-button type="danger" :disabled="!isChceked">批量删除</el-button>
|
<el-button type="danger" :disabled="!isChceked">批量删除</el-button>
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
@select-click="selectClick"
|
@select-click="selectClick"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{height: viewportHeight - 72 + 'px'}" class="no-horizontal-scroll">
|
<div>
|
||||||
<el-row :gutter="20" class="tempalte-main">
|
<el-row :gutter="20" class="tempalte-main">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<!-- 左侧列表 -->
|
<!-- 左侧列表 -->
|
||||||
|
@ -99,17 +99,8 @@ const listeners = computed(() => ({
|
||||||
|
|
||||||
.page-template {
|
.page-template {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
|
||||||
overflow-x: hidden; // 防止横向滚动条
|
|
||||||
|
|
||||||
.tempalte-main {
|
.tempalte-main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.no-horizontal-scroll {
|
|
||||||
overflow: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
scrollbar-width: none; /* Firefox */
|
|
||||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
Loading…
Reference in New Issue