Vue Element Plus 流动布局页面设计指南
<template>
<!-- 左边的部分 -->
<el-space wrap class="left">
<el-aside width="200px">
<el-affix :offset="1">
<Left></Left>
</el-affix>
</el-aside>
</el-space>
<div class="common-layout">
<el-container>
<el-header class="head">
<div class="icon"></div>
<div style="margin-top: 10px; margin-left: 15px;width: 400px;">操作指引</div>
<el-row>
<el-col :span="9">
<div class="grid-content ep-bg-purple" />
<div class="blue-circle">
<span class="mouth-icon"></span>
</div>
<div style="margin-top: 30px; margin-left: 105px;"> 创建应用 <span
style="color: cornflowerblue;">—————————————</span><br>
<span style="font-size: small; color: grey;">创建应用，获取密钥</span>
</div>
</el-col>
<el-col :span="9">
<div class="grid-content ep-bg-purple-light" />
<div class="blue-circle">
<span class="mouth-icon"></span>
</div>
<div style="margin-top: 30px; margin-left: 105px;"> 调用服务 <span
style="color: cornflowerblue;">—————————————</span><br>
<span style="font-size: small; color: grey;">查看请求示例，调用服务</span>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content ep-bg-purple" />
<div class="blue-circle">
<span class="mouth-icon"></span>
</div>
<div style="margin-top: 30px; margin-left: 105px;"> 发布使用 <span style="color: cornflowerblue;"></span><br>
<span style="font-size: small; color: grey;">发布后可以通过浏览器访问</span>
</div>
</el-col>
</el-row>
<pre><code> </el-header>
<el-main class="foot">
<div class="icon"></div>
<div style="margin-top: 10px; margin-left: 15px;width: 400px;">统计信息</div>
<div class="foothead"> <span style="font-weight: bold; font-size: 15px;">免费用户</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 15px;">剩余时长</span>
&nbsp;&nbsp;&nbsp; <span style="font-size: 15px;">20天</span></div>
<div class="foothead"><span style="font-weight: bold;font-size: 15px;">我的应用</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<el-link href="https://element-plus.org" type="primary">1个</el-link>
</div>
<el-row style="margin-top: 20PX;">
<el-col :span="12">
<div class="grid-content ep-bg-purple" /><span
style="font-weight: bold;font-size: 15px; margin-left: 25px;">接口统计</span>
</el-col>
<el-col :span="12">
<div class="grid-content ep-bg-purple-light" />
<div class="block">
<el-date-picker v-model="value1" type="datetimerange" range-separator="——" start-placeholder="Start date"
end-placeholder="End date" />
</div>
</el-col>
</el-row>
<div class="foothead">
<div style="height: 50px;width: auto; margin-top: 40px; margin-left: 80px;"> <el-row>
<el-col :span="8">
<div class="grid-content ep-bg-purple" />总调用量:0个
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple-light" />总调成功数:0个
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple" />总调失败数：<el-link href="https://element-plus.org"
type="primary">0个</el-link>
</el-col>
</el-row></div>
</div>
<div class="foothead"><span style="font-size:15px; margin-top: 10px;">FTP统计</span>
<div style="height: 50px;width: auto; margin-top: 40px; margin-left: 80px;">
<el-row>
<el-col :span="8">
<div class="grid-content ep-bg-purple" />总获取量:0个
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple-light" />解析成功数:0个
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple" />解析失败数：<el-link href="https://element-plus.org"
type="primary">0个</el-link>
</el-col>
</el-row>
</div>
</div>
<div class="foothead"><span style="font-size:15px; margin-top: 10px;">MQ统计</span>
<div style="height: 50px;width: auto; margin-top: 40px; margin-left: 80px;">
<el-row>
<el-col :span="8">
<div class="grid-content ep-bg-purple" />总接收量:0个
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple-light" />成功消费数:0个
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple" />消防失败数：<el-link href="https://element-plus.org"
type="primary">0个</el-link>
</el-col>
</el-row>
</div>
</div>
</el-main>
</el-container>
</code></pre>
</div>
</template>
<script lang="ts" setup>
// 引入侧边栏
// eslint-disable-next-line @typescript-eslint/quotes
import Left from '../console/Left.vue'
<p>import { ref } from 'vue'
const value1 = ref<[Date, Date]>([
new Date(2018, 5, 10, 10),
new Date(2018, 6, 11, 10)
])
</script></p>
<style scoped>
.common-layout {
height: 800px;
background-color: gainsboro;
max-width: 100%; /* 添加这行代码 */
display: flex;
flex-wrap: wrap; /* 添加这行代码 */
}
.head {
background-color: white;
margin-top: 15px;
margin-left: 10px;
height: 180px;
}
.foot {
background-color: white;
margin-top: 15px;
margin-left: 10px;
height: 600px;
}
.icon {
height: 20px;
width: 5px;
margin-top: 12px;
background-color: #60a5fa;
float: left;
}
.blue-circle {
width: 48px;
height: 48px;
border: 2px solid #60a5fa;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
margin-left: 40px;
margin-top: 20px;
float: left;
}
.mouth-icon {
width: 10px;
height: 10px;
border: 1px solid #60a5fa;
}
.foothead {
margin-top: 20px;
margin-left: 25px;
}
.el-link {
text-decoration: underline !important;
}
.block {
margin-right: 100px;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.block:last-child {
border-right: none;
}
.block .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style> 怎么让他变成流动布局 页面放大同比例放大
<p>内容：要将页面布局变成流动布局，可以使用CSS中的<code>flex</code>属性。在样式中，找到<code>.common-layout</code>的样式，并添加以下代码：</p>
<pre><code class="language-css">.common-layout {
...
display: flex;
flex-wrap: wrap;
}
</code></pre>
<p>这样设置后，当页面放大时，元素会根据可用空间自动换行，实现流动布局效果。</p>
原文地址: https://www.cveoy.top/t/topic/pbI3 著作权归作者所有。请勿转载和采集!