添加背景色

whychdw

2021-03-02 42b0de526257f31c986dd802bdd86db205ed7788

添加背景色

 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>

 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;

 src/assets/images/bg-box.png

 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>