常驻大哥24分法，记得看

<script setup>
import {ref} from "vue";

const left_width=ref(0)
const center_width=ref(24)
const right_width=ref(0)
const flex_change = (type)=>{
  switch (type){
    case 1:
      left_width.value = 8;
      center_width.value = 16;
      right_width.value = 0;
      break
    case 2:
      left_width.value = 0;
      center_width.value = 24;
      right_width.value = 0;
      break
    case 3:
      left_width.value = 0;
      center_width.value = 16;
      right_width.value = 8;
      break
  }
}
</script>

<template>
<div class="login-content">
  <el-row>
    <el-col :span="left_width" class="content-col"> 1 </el-col>
    <el-col :span="center_width" class="content-col">
      <div class="demo">
        方块
      </div>
    </el-col>
    <el-col :span="right_width" class="content-col">
      <el-row style="height: 100%">
        <el-col :offset="6" :span="12" class="block">
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</div>
<div class="flex-tool">
  <el-row>
    <el-col :span="8" @click="flex_change(1)">
      居左
    </el-col>
    <el-col :span="8" @click="flex_change(2)">
      居中
    </el-col>
    <el-col :span="8" @click="flex_change(3)">
      居右
    </el-col>
  </el-row>
</div>
</template>

<style scoped>
.login-content{
  height:100vh;
  width:100vw;
  background-color: gray;
}
.flex-tool{
  background-color: white;
  height: 30px;
  width: 120px;
  border-radius: 20px;
  position: absolute;
  right: 20px;
  top:  10px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  font-size: 12px;
}
.content-col{
  height: 50vh;
  margin-top: 25vh;
  background-color: red;
  border: 2px green solid;
}

.demo{
  margin: 0 auto;
  margin-top: calc(25vh - 50px);
  background-color: aquamarine;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;

}
.block{
  background-color: blue;
  height: 100%;
}
</style>