From 42b0de526257f31c986dd802bdd86db205ed7788 Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期二, 02 三月 2021 11:30:27 +0800
Subject: [PATCH] 添加背景色
---
src/assets/images/bg-box.png | 0
src/pages/test.vue | 77 ++++++++++----------------------------
src/assets/css/common.css | 3 +
src/App.vue | 10 ++++
4 files changed, 31 insertions(+), 59 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 802d3b6..11d9718 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,5 +28,13 @@
</script>
<style>
-
+#app {
+ height: 100vh;
+ background-color: #031D67;
+ background-image: url("./assets/images/bg-box.png");
+}
+#app:before {
+ display: table;
+ content: " ";
+}
</style>
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 8c214ec..ccee161 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -1,12 +1,13 @@
body {
margin: 0;
+ color: #fff;
}
/* my page */
.page {
display: flex;
flex-direction: column;
height: 100vh;
- background-color: #cee8f8;
+ background-color: #031D67;
}
.page-content{
flex: 1;
diff --git a/src/assets/images/bg-box.png b/src/assets/images/bg-box.png
new file mode 100644
index 0000000..1e4603a
--- /dev/null
+++ b/src/assets/images/bg-box.png
Binary files differ
diff --git a/src/pages/test.vue b/src/pages/test.vue
index 3cc15fa..6046134 100644
--- a/src/pages/test.vue
+++ b/src/pages/test.vue
@@ -1,73 +1,26 @@
<template>
<div class="test-container">
- <div class="test-wrapper">
- <circle-chart id="circleTest" ref="circleTest"></circle-chart>
+<!-- <div class="test-wrapper">-->
+<!-- <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>
</div>
-
- <div class=""></div>
-
- <!-- <div class="test-wrapper">-->
- <!-- <circle-chart id="circleTest2" ref="circleTest2"></circle-chart>-->
- <!-- </div>-->
- <router-link to="test2">璺宠浆</router-link>
</div>
</template>
<script>
-import CircleChart from "@/components/charts/CircleChart";
export default {
name: "Test",
- components: {CircleChart},
+ components: {},
data() {
return {}
},
- mounted() {
- this.$refs.circleTest.setData([
- {
- name: "鏈鍙婁互涓�",
- value: 100,
- color: '#FF0000',
- unit: '鍏�'
- },
- {
- name: "鏈鍙婁互涓�2",
- value: 100,
- color: '#00eaff',
- unit: '鍏�'
- },
- {
- name: "鏈鍙婁互涓�3",
- value: 100,
- color: '#00ffcc',
- unit: '鍏�'
- },
- {
- name: "鏈鍙婁互涓�4",
- value: 100,
- color: '#0037ff',
- unit: '鍏�'
- },
- {
- name: "鏈鍙婁互涓�5",
- value: 100,
- color: '#ffdd00',
- unit: '鍏�'
- },
- {
- name: "鏈鍙婁互涓�6",
- value: 100,
- color: '#bb00ff',
- unit: '鍏�'
- },
- {
- name: "鏈鍙婁互涓�7",
- value: 50,
- color: '#0099ff',
- unit: '鍏�'
- }
- ]);
- }
+ mounted() {}
}
</script>
@@ -76,4 +29,14 @@
width: 500px;
height: 500px;
}
+.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