wfz/fauto-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2

Browse Source
This commit is contained in:
wfz
2025-12-21 21:26:20 +08:00
parent c6077ff2ad
commit 3c38f1bee9
13 changed files with 933 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
draggable-panels/src/views/TestPage2.vue
View File

@@ -1,64 +1,53 @@
<template>
<div class="test-page">
<h2>测试页面 2 - 表单布局</h2>
<el-row :gutter="20">
<el-col :span="24">
<div class="grid-content">表单标题区域</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="6">
<div class="grid-content">标签</div>
</el-col>
<el-col :span="18">
<div class="grid-content">输入框</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="6">
<div class="grid-content">标签</div>
</el-col>
<el-col :span="18">
<div class="grid-content">输入框</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="24">
<div class="grid-content">提交按钮</div>
</el-col>
</el-row>
</div>
<el-row class="page-container" :gutter="20">
<el-col :span="24">
<div class="design-component form-title">表单标题区域</div>
</el-col>
<el-col :span="6">
<div class="design-component">用户名</div>
</el-col>
<el-col :span="18">
<div class="design-component">输入框占位</div>
</el-col>
<el-col :span="6">
<div class="design-component">密码</div>
</el-col>
<el-col :span="18">
<div class="design-component">密码框占位</div>
</el-col>
<el-col :span="24">
<div class="design-component submit-btn">提交按钮</div>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const formData = ref({
name: '',
email: ''
})
// 测试页面2 - 表单布局
</script>
<style scoped>
.test-page {
.page-container {
padding: 20px;
background: #fafafa;
min-height: 100vh;
min-height: 100%;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
.design-component {
background: #67c23a;
color: white;
padding: 20px;
text-align: center;
border-radius: 4px;
margin-bottom: 10px;
}
.form-title {
background: #409eff;
font-size: 18px;
font-weight: bold;
}
.submit-btn {
background: #e6a23c;
}
</style>