[调整] panel 组件代码结构
This commit is contained in:
parent
9b16171edb
commit
3715898049
@ -5,25 +5,25 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="layui-row layui-col-space15">
|
<ul class="layui-row layui-col-space15">
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #009688;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#009688</p><p>
|
<p>#009688</p><p>
|
||||||
</p><p tips="">主色调之一</p>
|
</p><p tips="">主色调之一</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #5FB878;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#5FB878</p><p>
|
<p>#5FB878</p><p>
|
||||||
</p><p tips="">一般用于选中状态</p>
|
</p><p tips="">一般用于选中状态</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #393D49;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#393D49</p><p>
|
<p>#393D49</p><p>
|
||||||
</p><p tips="">通常用于导航</p>
|
</p><p tips="">通常用于导航</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #1E9FFF;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#1E9FFF</p><p>
|
<p>#1E9FFF</p><p>
|
||||||
</p><p tips="">经典蓝</p>
|
</p><p tips="">经典蓝</p>
|
||||||
@ -53,25 +53,25 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="layui-row layui-col-space15">
|
<ul class="layui-row layui-col-space15">
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #FFB800;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#FFB800</p><p>
|
<p>#FFB800</p><p>
|
||||||
</p><p tips="">暖色系</p>
|
</p><p tips="">暖色系</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #FF5722;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#FF5722</p><p>
|
<p>#FF5722</p><p>
|
||||||
</p><p tips="">比较引人注意的颜色</p>
|
</p><p tips="">比较引人注意的颜色</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #01AAED;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#01AAED</p><p>
|
<p>#01AAED</p><p>
|
||||||
</p><p tips="">文本链接着色</p>
|
</p><p tips="">文本链接着色</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-sm3">
|
<li class="layui-col-sm6">
|
||||||
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
<div style="background-color: #2F4056;padding:10px;color:whitesmoke;padding:30px;border-radius:2px;">
|
||||||
<p>#2F4056</p><p>
|
<p>#2F4056</p><p>
|
||||||
</p><p tips="">侧边色</p>
|
</p><p tips="">侧边色</p>
|
||||||
|
@ -108,7 +108,7 @@ const zhCN = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/card',
|
path: '/zh-CN/components/card',
|
||||||
component: () => import('../../docs/zh-CN/components/cards.md'),
|
component: () => import('../../docs/zh-CN/components/card.md'),
|
||||||
meta: { title: '卡片' },
|
meta: { title: '卡片' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -61,7 +61,7 @@
|
|||||||
<div style="margin-left: 10%; margin-right: 10%">
|
<div style="margin-left: 10%; margin-right: 10%">
|
||||||
<div>
|
<div>
|
||||||
<ul class="layui-row layui-col-space30 site-idea">
|
<ul class="layui-row layui-col-space30 site-idea">
|
||||||
<li class="layui-col-md4">
|
<li class="layui-col-md8">
|
||||||
<div>
|
<div>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>返璞归真</legend>
|
<legend>返璞归真</legend>
|
||||||
@ -72,7 +72,7 @@
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-md4">
|
<li class="layui-col-md8">
|
||||||
<div>
|
<div>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>双面体验</legend>
|
<legend>双面体验</legend>
|
||||||
@ -83,7 +83,7 @@
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-col-md4">
|
<li class="layui-col-md8">
|
||||||
<div>
|
<div>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>星辰大海</legend>
|
<legend>星辰大海</legend>
|
||||||
|
@ -1258,14 +1258,6 @@ a cite {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-panel {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 2px;
|
|
||||||
background-color: #fff;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-bg-black,
|
.layui-bg-black,
|
||||||
.layui-bg-blue,
|
.layui-bg-blue,
|
||||||
.layui-bg-cyan,
|
.layui-bg-cyan,
|
||||||
|
7
src/module/panel/index.less
Normal file
7
src/module/panel/index.less
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
.layui-panel {
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666;
|
||||||
|
}
|
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
|||||||
app.component(Component.name || 'LayPanel', Component)
|
app.component(Component.name || 'LayPanel', Component)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Component as IDefineComponent
|
export default Component as IDefineComponent
|
@ -1,6 +1,15 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: "LayPanel"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import "./index.less"
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="layui-panel">
|
<div class="layui-panel">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup name="LayPanel" lang="ts"></script>
|
|
Loading…
x
Reference in New Issue
Block a user