调整容器组件UI

config/index.js

@@ -6,8 +6,8 @@ module.exports = {
     env: require('./prod.env'),
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/assets/dist/',
+    assetsSubDirectory: 'databoard',
+    assetsPublicPath: '/assets/',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

src/module/databoard/assets/index.css

+:root {
+  --global-background-color: #020042;   /* 全局背景色 */
+  --container-background-color: #020046;   /* 容器背景色 */
+}
+
 
 .page {
-  background-color: rgba(0, 10, 50, 1.000000);
   position: relative;
-  height: 1080.00px;
+  height: 1080px;
   width: 100%;
   min-width: 1920px;
   overflow: hidden;
-  background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
+  /*background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;*/
+  background-color: var(--global-background-color);
   background-size: 100% 100%
 }
 
 .head {
   height: 10%;
-
 }
 
 .head_content {
-  background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
-  background-position: center;
+  background: url(./img/top_img.png) no-repeat center;
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .text_date {
@@ -169,7 +176,7 @@
 
 .trade_middle {
   margin-bottom: 50px;
-  width: 52%;
+  width: 50%;
   margin-left: 1%;
 }
 

src/module/databoard/assets/index_back.css

@@ -5,7 +5,7 @@
   /*width: 1920.00px;*/
   height: 1080.00px;
   overflow: hidden;
-  background: url(SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
+  background: url(./img/SketchPng1d2d7c804f3d192d29ad3750c138064d493e3f502f79253a3bfa266fbdda7488.png) 100% no-repeat;
   background-size: 100% 100%
 }
 
@@ -13,7 +13,7 @@
 .text-wrapper_46 {
   /*width: 1970.00px;*/
   height: 92.00px;
-  background: url(SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
+  background: url(./img/SketchPng5fda9a9add36a51f8fa99e5a1426c6a0630dbdfb68a8e0ea5fbbd1c1392d5e28.png) 0px 0px no-repeat;
   background-size: 1920px 131px
 }
 

src/module/databoard/components/card/card_title_large.vue

+<template>
+  <div class="trapezoid">
+    <div class="trapezoid1"/>
+    <div class="trapezoid2"/>
+    <div class="trapezoid3">
+      <div class="left-half-trapezoid"/>
+      <div class="right-half-trapezoid"/>
+      <div class="title">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardTitleLarge"
+};
+</script>
+
+<style scoped>
+
+.trapezoid {
+  width: 100%;
+  height: 36px;
+  margin-bottom: 10px;
+}
+
+.trapezoid1::before {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  margin-left: -50px;
+  height: 6px;
+  width: 100px;
+  background-image: radial-gradient(#00F6F0, transparent 60%);
+}
+
+.trapezoid1 {
+  position: absolute;
+  top: -2px;
+  left: 50%;
+  margin-left: -78px;
+  width: 156px;
+  border-top: 36px solid #0D53B7;
+  border-left: 14px solid transparent;
+  border-right: 14px solid transparent;
+}
+
+.trapezoid2 {
+  position: absolute;
+  top: -2px;
+  left: 50%;
+  margin-left: -75px;
+  width: 150px;
+  border-top: 34px solid var(--global-background-color);
+  border-left: 12px solid transparent;
+  border-right: 12px solid transparent;
+}
+
+.trapezoid3 {
+  position: absolute;
+  top: -2px;
+  left: 50%;
+  margin-left: -70px;
+  height: 30px;
+  width: 140px;
+}
+
+.title {
+  position: absolute;
+  width: 100%;
+  font-size: 12px;
+  font-family: 黑体,serif;
+  font-weight: 700;
+  text-align: center;
+  letter-spacing: 0.2rem;
+  white-space: nowrap;
+  line-height: 30px;
+  color: #19ECFF;
+}
+
+.left-half-trapezoid {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.left-half-trapezoid::after {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 110%;
+  left: 5px;
+  background-image: linear-gradient(to bottom, #0933AD, transparent);
+  transform: skewX(20deg);
+}
+
+.right-half-trapezoid {
+  position: absolute;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.right-half-trapezoid::after {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 110%;
+  right: 5px;
+  background-image: linear-gradient(to bottom, #0933AD88, transparent);
+  transform: skewX(-20deg);
+}
+
+</style>
+

src/module/databoard/components/card/card_title_small.vue

+<template>
+  <div class="trapezoid">
+    <div class="trapezoid1"/>
+    <div class="trapezoid2"/>
+    <div class="trapezoid3">
+      <div class="left-half-trapezoid"/>
+      <div class="right-half-trapezoid"/>
+      <div class="title">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CardTitleSmall"
+};
+</script>
+
+<style scoped>
+
+.trapezoid {
+  width: 100%;
+  height: 36px;
+  margin-bottom: 10px;
+}
+
+.trapezoid1::before {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: 50%;
+  margin-left: -50px;
+  height: 6px;
+  width: 100px;
+  background-image: radial-gradient(#00F6F0, transparent 60%);
+}
+
+.trapezoid1 {
+  position: absolute;
+  top: -2px;
+  left: 50%;
+  margin-left: -78px;
+  width: 156px;
+  border-top: 36px solid #0D53B7;
+  border-left: 14px solid transparent;
+  border-right: 14px solid transparent;
+}
+
+.trapezoid2 {
+  position: absolute;
+  top: -2px;
+  left: 50%;
+  margin-left: -75px;
+  width: 150px;
+  border-top: 34px solid var(--global-background-color);
+  border-left: 12px solid transparent;
+  border-right: 12px solid transparent;
+}
+
+.trapezoid3 {
+  position: absolute;
+  top: -2px;
+  left: 50%;
+  margin-left: -70px;
+  height: 30px;
+  width: 140px;
+}
+
+.title {
+  position: absolute;
+  width: 100%;
+  font-size: 12px;
+  font-family: 黑体,serif;
+  font-weight: 700;
+  text-align: center;
+  letter-spacing: 0.2rem;
+  white-space: nowrap;
+  line-height: 30px;
+  color: #19ECFF;
+}
+
+.left-half-trapezoid {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.left-half-trapezoid::after {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 110%;
+  left: 5px;
+  background-image: linear-gradient(to bottom, #0933AD, transparent);
+  transform: skewX(20deg);
+}
+
+.right-half-trapezoid {
+  position: absolute;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.right-half-trapezoid::after {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 110%;
+  right: 5px;
+  background-image: linear-gradient(to bottom, #0933AD, transparent);
+  transform: skewX(-20deg);
+}
+
+</style>
+

src/module/databoard/components/card/winners-list.vue

+<template>
+  <div style="height: 100%">
+    <div class="main_table t_btn8">
+      <table>
+        <tbody>
+        <tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
+          <td>
+            <div class="col_box">
+              <span class="winner_span">{{ row.title }}</span>
+              <span class="number_span">NO.{{ idx + 1 }}</span>
+            </div>
+            <div class="col_box">
+              <div v-for="(col, idz) in row.column" :key="idz">
+                <p class="key_span">{{ col.key }}</p>
+                <p class="value_span">{{ col.value }}</p>
+              </div>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "WinnersList",
+  props: {},
+  data() {
+    return {
+      rows: [
+        {
+          title: "上海欧冶股份有限公司",
+          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
+        },
+        {
+          title: "上海欧冶股份有限公司",
+          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
+        },
+        {
+          title: "上海欧冶股份有限公司",
+          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
+        },
+        {
+          title: "上海欧冶股份有限公司",
+          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
+        },
+        {
+          title: "上海欧冶股份有限公司",
+          column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
+        }
+      ]
+    };
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+
+.main_table {
+  width: 95%;
+  height: 84%;
+}
+
+.main_table table {
+  width: 100%;
+  height: 100%;
+}
+
+.main_table tr {
+  height: 20%;
+}
+
+.main_table td {
+  padding: 0;
+  color: #fff;
+  font-size: 10px;
+  text-align: center;
+}
+
+.main_table tbody tr:nth-child(odd) {
+  background-color: #04136B;
+}
+
+.main_table tbody tr:nth-child(even) {
+  background-color: #051D7D;
+}
+
+.t_btn8, .t_btn2, .t_btn3 {
+  position: relative;
+  z-index: 100;
+  cursor: pointer;
+}
+
+.col_box {
+  display: flex;
+  justify-content: space-around;
+}
+
+.winner_span {
+  font-weight: bold;
+}
+
+.number_span {
+  color: #bf360c;
+  font-weight: bold;
+}
+
+.key_span {
+  color: darkgrey;
+  font-weight: bold;
+}
+
+.value_span {
+  color: #00c853;
+  font-weight: bold;
+}
+</style>

src/module/databoard/components/container/container-with-bord.vue

 <template>
   <div class="content container-with-bord" style="cursor: pointer; position: relative;">
-    <!--左上边框-->
-    <div class="t_line_box">
-      <i class="t_l_line"></i>
-      <i class="l_t_line"></i>
-    </div>
-    <!--右上边框-->
-    <div class="t_line_box">
-      <i class="t_r_line"></i>
-      <i class="r_t_line"></i>
-    </div>
-    <!--左下边框-->
-    <div class="t_line_box">
-      <i class="l_b_line"></i>
-      <i class="b_l_line"></i>
-    </div>
-    <!--右下边框-->
-    <div class="t_line_box">
-      <i class="r_b_line"></i>
-      <i class="b_r_line"></i>
-    </div>
+    <!--角标组件-->
+    <corner-mark-small></corner-mark-small>
+    <!--标题组件-->
+    <card-title-small v-if="$slots.title">
+      <slot name="title"></slot>
+    </card-title-small>
     <slot></slot>
   </div>
 </template>
 <script>
+
+import CornerMarkSmall from "../icon/corner_mark_small.vue";
+import CornerMarkLarge from "../icon/corner_mark_large.vue";
+import CardTitleSmall from "../card/card_title_small.vue"
+
 export default {
-  name:"ContainerWithBord",
+  name: "ContainerWithBord",
+  components: {CornerMarkSmall, CornerMarkLarge, CardTitleSmall},
   data() {
-    return {
-    };
+    return {};
   },
   methods: {}
 };
 </script>
 <style scoped>
-div{
+div {
   color: white;
 }
-.container-with-bord{
-  box-sizing: border-box;
-  border: 1px solid #2C58A6;
+
+.container-with-bord {
+  background-color: var(--container-background-color);
   position: relative;
-  box-shadow: 0 0 10px #2C58A6;
+  box-sizing: border-box;
+  border-radius: 15px;
+  box-shadow: 0 0 40px 10px #051E82 inset;
+  border: 2px solid #0D53B7;
 }
+
 </style>
-<style scoped lang="css" src="../../assets/index.css"/>
 

src/module/databoard/components/icon/corner_mark_large.vue

+<template>
+  <div class="conner_mark">
+    <div class="conner_mark_left1"/>
+    <div class="conner_mark_left2"/>
+    <div class="conner_mark_left3"/>
+    <div class="conner_mark_right1"/>
+    <div class="conner_mark_right2"/>
+    <div class="conner_mark_right3"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CornerMarkLarge"
+};
+</script>
+
+<style scoped>
+
+.conner_mark {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.conner_mark_left1 {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  border-top: 32px solid #0D53B7;
+  border-right: 32px solid transparent;
+}
+
+.conner_mark_left2 {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  border-top: 28px solid var(--global-background-color);
+  border-right: 28px solid transparent;
+}
+
+.conner_mark_left3 {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  border-top: 24px solid #0E5FFF;
+  border-right: 24px solid transparent;
+}
+
+
+.conner_mark_right1 {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-top: 32px solid #0D53B7;
+  border-left: 32px solid transparent;
+}
+
+.conner_mark_right2 {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-top: 28px solid var(--global-background-color);
+  border-left: 28px solid transparent;
+}
+
+.conner_mark_right3 {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-top: 24px solid #0E5FFF;
+  border-left: 24px solid transparent;
+}
+
+</style>
+

src/module/databoard/components/icon/corner_mark_small.vue

+<template>
+  <div class="conner_mark">
+    <div class="conner_mark_left1"/>
+    <div class="conner_mark_left2"/>
+    <div class="conner_mark_left3"/>
+    <div class="conner_mark_right1"/>
+    <div class="conner_mark_right2"/>
+    <div class="conner_mark_right3"/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CornerMarkSmall"
+};
+</script>
+
+<style scoped>
+
+.conner_mark {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.conner_mark_left1 {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  border-top: 36px solid #0D53B7;
+  border-right: 18px solid transparent;
+}
+
+.conner_mark_left2 {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  border-top: 30px solid var(--global-background-color);
+  border-right: 15px solid transparent;
+}
+
+.conner_mark_left3 {
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  border-top: 20px solid #0E5FFF;
+  border-right: 10px solid transparent;
+}
+
+
+.conner_mark_right1 {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-top: 36px solid #0D53B7;
+  border-left: 18px solid transparent;
+}
+
+.conner_mark_right2 {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-top: 30px solid var(--global-background-color);
+  border-left: 15px solid transparent;
+}
+
+.conner_mark_right3 {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  border-top: 20px solid #0E5FFF;
+  border-left: 10px solid transparent;
+}
+
+</style>
+

src/module/databoard/components/test/counter-button.vue

+<template>
+  <button class="click-button" @click.right.prevent="count++">鼠标右键点击{{ count }}次</button>
+</template>
+<script>
+export default {
+  name: "CounterButton",
+  data() {
+    return {
+      count: 0
+    };
+  },
+  props: {},
+  methods: {}
+};
+</script>
+<style scoped>
+.click-button {
+  height: 4rem;
+  width: 12rem;
+}
+</style>

src/module/databoard/components/test/emit-test.vue

+<template>
+  <ul>
+    <li class="optionItem" v-for="(option, i) in options" :key="i" @click="handleSelect(option)">{{ i }}-{{ option }}</li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    options: {
+      type: String,
+      default: () => [],
+      required: true,
+      validate: value => {
+        return value.length >= 0
+      }
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleSelect(option) {
+      this.$emit("selected", option)
+    }
+  }
+};
+</script>
+<style scoped>
+.optionItem{
+  background-color: #00b8d4;
+
+}
+</style>

src/module/databoard/components/test/setup-api.vue

+<template>
+  <div style="background-color: whitesmoke">
+    <div>{{ setupName }}: {{ counter }}: {{ obj.title }}</div>
+    <div>{{ twiceTheCounter }}</div>
+    <button @click="action" style="height: 4rem;width: 8rem">按钮</button>
+  </div>
+</template>
+<script>
+import {computed, onMounted, reactive, ref, watch} from "vue";
+
+export default {
+  props: {
+    setupName: String
+  },
+  setup() {
+    // 获取响应式变量：基本类型，获取的变量需要.value获取值
+    const counter = ref(0);
+    // 获取响应式变量：引用类型
+    const obj = reactive({title: "这是个标题"});
+
+    const twiceTheCounter = computed(() => counter.value * 2);
+    watch(counter, (newValue, oldValue) => {
+      console.log(newValue, oldValue);
+    });
+    onMounted(() => {
+      console.log("mounted");
+    });
+    const action = () => {
+      counter.value = counter.value + 3;
+      obj.title = "我改名字了";
+    };
+    return {
+      counter,
+      obj,
+      twiceTheCounter,
+      action
+    };
+  }
+};
+</script>
+<style scoped>
+</style>

src/module/index/index.js

@@ -3,6 +3,7 @@
 import Vue from 'vue'
 import App from './index.vue'
 import router from './router/index_router'
+import '../databoard/assets/index.css'
 
 Vue.config.productionTip = false