重构优化框架

这是一个大版本的更新
现在,框架更加稳定
This commit is contained in:
橙子
2022-02-21 15:00:15 +08:00
parent 769cf2285a
commit 8d90abd22e
146 changed files with 801 additions and 15635 deletions

View File

@@ -0,0 +1,59 @@
<template>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
>
<el-menu-item index="1">Processing Center</el-menu-item>
<el-sub-menu index="2">
<template #title>Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-sub-menu index="2-4">
<template #title>item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4">Orders</el-menu-item>
</el-menu>
<div class="h-6"></div>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
@select="handleSelect"
>
<el-menu-item index="1">Processing Center</el-menu-item>
<el-sub-menu index="2">
<template #title>Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-sub-menu index="2-4">
<template #title>item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" disabled>Info</el-menu-item>
<el-menu-item index="4">Orders</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath)
}
</script>

View File

@@ -0,0 +1,105 @@
<template>
<el-row>
<el-col :span="18">
<el-row>
<el-col v-for="index of 11" :key="index" :span="2"><div class="head-1">999</div></el-col>
<el-col :span="2"><div class="head-1-right"> <el-button type="primary">设置标签</el-button></div></el-col>
</el-row>
<el-row>
<el-col :span="24"><div class="head-2">000</div></el-col>
</el-row>
<el-row v-for="index of 4" :key="index" >
<el-col :span="8"
><div class="bg-white grid-content">666</div></el-col
>
<el-col :span="8"
><div class="bg-white grid-content">777</div></el-col
>
<el-col :span="8"
><div class="bg-white grid-content">888</div>
</el-col>
</el-row>
<el-row >
<el-col :span="24"
><div ><el-button size="large" type="primary" class="foot-button">点击查看更多</el-button></div></el-col
>
</el-row>
</el-col>
<el-col :span="6">
<el-row>
<el-col :span="24"
><div class="bg-white right-1">111</div></el-col
>
</el-row>
<el-row>
<el-col :span="24"
><div class="bg-white right-2">222</div></el-col
>
</el-row>
<el-row>
<el-col :span="24"
><div class="bg-white right-3">333</div></el-col
>
</el-row>
</el-col>
</el-row>
</template>
<script lang="ts">
</script>
<style scoped>
.head-1 {
height: 30px;
padding: 8px 8px 4px 8px;
background: #ffffff;
}
.head-1-right{
padding: 5px 0 0 0;
}
.foot-button{
margin-top: 50px;
}
.head-2 {
height: 40px;
padding: 16px 24px 16px 24px;
text-align: left;
background: #ffffff;
}
.right-1{
min-height: 165px;
}
.right-2{
min-height: 467px;
}
.right-3{
min-height: 111px;
}
.bg-white {
background: #ffffff;
}
.el-row {
margin-bottom: 10px;
}
.el-col {
border-radius: 4px;
padding-left: 8px;
padding-right: 8px;
}
.grid-content {
border-radius: 4px;
height: 256px;
}
</style>