From f948c42a5a71b0bfbbc901f439d41f723a26dc07 Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期二, 02 三月 2021 13:41:53 +0800
Subject: [PATCH] 容器组件
---
src/components/LayoutBox.vue | 133 ++++++++++++++++++++++++++++++++++++++++++++
src/pages/test.vue | 17 +----
2 files changed, 138 insertions(+), 12 deletions(-)
diff --git a/src/components/LayoutBox.vue b/src/components/LayoutBox.vue
new file mode 100644
index 0000000..084fd6e
--- /dev/null
+++ b/src/components/LayoutBox.vue
@@ -0,0 +1,133 @@
+<template>
+ <div class="layout-box-container">
+ <div class="layout-box-wrapper">
+ <div class="layout-box-radius tl"></div>
+ <div class="layout-box-radius tr"></div>
+ <div class="layout-box-radius bl"></div>
+ <div class="layout-box-radius br"></div>
+ <div class="layout-box-header">
+ <div class="layout-rect left"></div>
+ <div class="header-text-wrapper">
+ <div class="header-text">{{title}}</div>
+ </div>
+ <div class="layout-rect right"></div>
+ </div>
+ <div class="layout-box-body">
+ <slot></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "LayoutBox",
+ props: {
+ title: {
+ type: String,
+ default: "鏃�"
+ }
+ },
+ data() {
+ return {}
+ }
+}
+</script>
+
+<style scoped>
+.layout-box-container {
+ height: 100%;
+ box-sizing: border-box;
+ padding-top: 22px;
+}
+.layout-box-wrapper {
+ position: relative;
+ box-sizing: border-box;
+ height: 100%;
+ background-color: #021651;
+ border-radius: 12px;
+ border: 1px solid #073980;
+}
+.layout-box-radius {
+ position: absolute;
+ width: 22px;
+ height: 22px;
+}
+.layout-box-radius.tl {
+ top: -1px;
+ left: -1px;
+ border-top: 2px solid #00B2E0;
+ border-left: 2px solid #00B2E0;
+ border-top-left-radius: 11px;
+}
+.layout-box-radius.tr {
+ top: -1px;
+ right: -1px;
+ border-top: 2px solid #00B2E0;
+ border-right: 2px solid #00B2E0;
+ border-top-right-radius: 11px;
+}
+.layout-box-radius.br {
+ bottom: -1px;
+ right: -1px;
+ border-bottom: 2px solid #00B2E0;
+ border-right: 2px solid #00B2E0;
+ border-bottom-right-radius: 11px;
+}
+.layout-box-radius.bl {
+ bottom: -1px;
+ left: -1px;
+ border-bottom: 2px solid #00B2E0;
+ border-left: 2px solid #00B2E0;
+ border-bottom-left-radius: 11px;
+}
+.layout-box-header {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: -22px;
+ width: 100%;
+ text-align: center;
+}
+.layout-rect {
+ display: inline-block;
+ width: 60px;
+ height: 4px;
+ background-color: #00B2E0;
+}
+.layout-rect.left {
+ margin-right: 16px;
+}
+.layout-rect.right {
+ margin-left: 16px;
+}
+.header-text-wrapper {
+ position: relative;
+ display: inline-block;
+ font-size: 18px;
+ font-weight: bold;
+ padding: 4px 24px;
+ z-index: 1;
+}
+.header-text {
+ position: relative;
+ z-index: 1;
+}
+.header-text-wrapper:after {
+ position: absolute;
+ display: block;
+ content: " ";
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform: skew(15deg);
+ background-color: #083880;
+ z-index: 0;
+}
+.layout-box-body {
+ padding: 16px 4px 4px 4px;
+ box-sizing: border-box;
+ height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/test.vue b/src/pages/test.vue
index 6046134..8376d3d 100644
--- a/src/pages/test.vue
+++ b/src/pages/test.vue
@@ -4,19 +4,19 @@
<!-- <circle-chart id="circleTest" ref="circleTest"></circle-chart>-->
<!-- </div>-->
<div class="test-wrapper mg8">
- <div class></div>
- <div class="layout-box-wrapper">
- <div class="layout-box-header">鍗曚綋瀹归噺</div>
- </div>
+ <layout-box title="鍦ㄧ嚎鐢靛帇鍜岀粍绔數鍘�">
+
+ </layout-box>
</div>
</div>
</template>
<script>
+import LayoutBox from "@/components/LayoutBox";
export default {
name: "Test",
- components: {},
+ components: {LayoutBox},
data() {
return {}
},
@@ -31,12 +31,5 @@
}
.mg8 {
margin: 8px;
-}
-.layout-box-wrapper {
- position: relative;
- height: 100%;
- background-color: #021651;
- border-radius: 12px;
- border: 1px solid #073980;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1