根據(jù)會(huì)議模式班眯，切切換不同展示模式希停，主要是css。
微信截圖_20220920093038.png
微信截圖_20220920093053.png
微信截圖_20220920093112.png
微信截圖_20220920093129.png
微信截圖_20220920093143.png
以下內(nèi)容放入html格式文件的html標(biāo)簽中署隘，自行引入vue.js和占位圖即可
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js"></script>
<title>會(huì)議狀態(tài)切換</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
ul.list {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
position: relative;
overflow-y: auto;
border: 1px solid #999;
}
ul.list li {
text-align: center;
}
ul.list li img {
display: block;
margin: 0 auto 10px;
max-width: 100%;
max-height: 100px;
}
.page-top {
line-height: 40px;
}
/* 默認(rèn)模式 */
ul.default {
align-items: center;
height: calc(100vh - 42px);
}
ul.list.default li {
flex: 1;
}
ul.default li:nth-child(n+2) {
display: none;
}
/* 九宮格模式宠能，數(shù)量少于3時(shí)，li滿高full-height */
ul.layout1 {
align-content: flex-start;
min-height: calc(100vh - 42px);
}
ul.layout1:not(.full-height) li {
width: 33.33%;
height: calc((100vh - 42px) / 3);
}
ul.layout1.full-height {
align-items: center;
height: calc(100vh - 42px);
}
ul.layout1.full-height li {
height: 100%;
width: auto;
flex: 1;
border-right: 1px solid #999;
}
/* 垂直滿高居中 */
ul.layout1 li .info,
ul.layout2 li .info,
ul.layout3 li .info {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
/* 左右模式 */
ul.layout2 {
padding-left: calc(100% - 260px);
height: calc(100vh - 42px);
/* 如果不加這一句磁餐，當(dāng)只有3個(gè)用戶時(shí)违崇，右側(cè)列表間隔會(huì)變大 */
align-content: flex-start;
}
ul.layout2 li.active {
border-right: 1px solid #999;
position: fixed;
left: 0;
top: 42px;
width: calc(100% - 260px);
height: calc(100vh - 42px);
}
ul.layout2 li:not(.active) {
height: calc((100vh - 42px) / 3);
width: 100%;
}
/* 上下模式 */
ul.layout3 {
height: calc(100vh - 42px);
flex-wrap: nowrap;
}
ul.layout3 li.active {
border-top: 1px solid #999;
position: fixed;
left: 0;
top: 190px;
width: 100%;
height: calc(100vh - 190px);
/* 加了這句可以在滑動(dòng)時(shí)穿透滾動(dòng)到ul */
pointer-events: none;
}
ul.layout3 li:not(.active) {
height: 150px;
min-width: 200px;
}
</style>
</head>
<body>
<div id="app">
<div class="page-top">
<select v-model="chooseType">
<option v-for="type in types" :key="type.className" :value="type.className" v-text="type.label"></option>
</select>
<button @click.prevent="addPerson">會(huì)議來人</button>
<button @click.prevent="deletePerson">會(huì)議走人</button>
</div>
<div class="show-container">
<ul class="list" :class="[chooseType, {'full-height': chooseType === 'layout1' && persons.length < 4}]">
<li :class="{active: person.id === chooseInfo.id && ['layout2', 'layout3'].includes(chooseType)}"
v-for="person in persons" :key="person.id" @click="choosePerson(person)">
<div class="info">
<img :src="avatar" alt="">
<span v-text="person.name"></span>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
chooseType: 'default',
types: [
{ label: '默認(rèn)', className: 'default' },
{ label: '九宮格', className: 'layout1' },
{ label: '左右結(jié)構(gòu)', className: 'layout2' },
{ label: '上下結(jié)構(gòu)', className: 'layout3' },
],
persons: [
{ name: '主持人', id: new Date().valueOf(), type: 'main' }
],
avatar: './customer2.png',
chooseInfo: {}
}
},
mounted() {
// console.log('persons', this.persons)
},
methods: {
addPerson() {
let id = new Date().valueOf()
this.persons.push({
name: '姓名' + id,
id,
type: 'normal'
})
console.log('this.persons', this.persons)
},
deletePerson() {
if (this.persons.length > 1) {
this.persons.pop()
}
},
choosePerson(person) {
console.log('person', person)
// 使用person信息對比而不是index，index可能也可以
if (this.chooseInfo.id !== person.id) {
this.chooseInfo = person
}
}
},
watch: {
chooseType() {
console.log('chooseType', this.chooseType)
if (!this.chooseInfo.id) {
this.chooseInfo = this.persons[0]
}
}
}
})
</script>
