大屏页面静态页面完成

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isLogined" class="main">
+  <div v-if="!showSisView && isLogined" class="main">
     <div class="header-body">
       <div class="header-title">
         <svg
@@ -248,7 +248,8 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
       <router-view />
     </div>
   </div>
-  <login-page v-if="!isLogined" @onLogin="login" />
+  <login-page v-if="!showSisView && !isLogined" @onLogin="login" />
+  <sisView v-if="showSisView" />
 </template>
 
 <script>
@@ -259,11 +260,13 @@ import Header from "@/views/layout/Header.vue";
 import { mapMutations } from "vuex";
 
 import LoginPage from "./views/layout/login-page.vue";
+import sisView from "./views/sisView/index.vue";
 export default {
   components: {
     Menu,
     Header,
     LoginPage,
+    sisView,
   },
 
   data() {
@@ -272,6 +275,7 @@ export default {
       // 当前子系统
       root: "",
       isLogined: true,
+      showSisView: false,
       memuCloseTimeout: null,
     };
   },
@@ -326,6 +330,12 @@ export default {
       if (params.username && params.password) this.isLogined = true;
     },
   },
+
+  watch: {
+    $route(res) {
+      this.showSisView = res.fullPath === "/sisView";
+    },
+  },
 };
 </script>
 

src/components/other/clock/index.vue

@@ -0,0 +1,214 @@
+<template>
+  <div id="_C-ColckBox">
+    <canvas id="_C-Colck" :width="clockWidth" :height="clockHeight"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "clock",
+
+  // 数据
+  data() {
+    return {
+      L: 0, //基础半径
+      timer: null,
+      clockWidth: 0,
+      clockHeight: 0,
+    };
+  },
+
+  props: {
+    width: {
+      type: Number,
+      default: 430,
+    },
+    height: {
+      type: Number,
+      default: 430,
+    },
+  },
+
+  created() {
+    this.clockWidth = this.width;
+    this.clockHeight = this.height;
+  },
+
+  mounted() {
+    this.drawCoolClock();
+    this.timer = setInterval(() => {
+      this.drawCoolClock();
+    }, 30);
+  },
+
+  unmounted() {
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+
+  // 函数
+  methods: {
+    drawCoolClock() {
+      const fixNum = 20;
+      let canvas = document.getElementById("_C-Colck");
+      let ctx = canvas.getContext("2d");
+      let [x0, y0] = [this.clockWidth / 2, this.clockHeight / 2]; //获取圆心x,y
+      this.L = this.clockWidth / 2 - 10 - fixNum; //设置圆半径
+      let [hourMaxL, hourMinL] = [this.L, this.L - 28]; //获取时刻度首位距离x0,y0位置
+      let [minMaxL, minMinL] = [this.L - 2, this.L - 15];
+      let centerL = 15;
+      let oDate = new Date(); //绑定当前时间
+      let oHours = oDate.getHours();
+      let oMin = oDate.getMinutes();
+      let oSen = oDate.getSeconds();
+      let oHoursValue = -90 + oHours * 30 + oMin / 2; //获取小时的角度
+      let oMinValue = -90 + oMin * 6;
+      let oSenValue = -90 + oSen * 6;
+      ctx.clearRect(0, 0, canvas.width, canvas.height); //清除画布
+      //   this.drawHoursScale(ctx, x0, y0, 12, 9, hourMaxL, hourMinL); //绘制表盘的时钟刻度scale
+      //   this.drawHoursScale(ctx, x0, y0, 60, 3, minMaxL, minMinL); //绘制表盘分钟刻度
+      //   this.drawScaleNum(ctx, hourMinL - 25, x0, y0); //绘制12个表盘数字
+      //   this.drawTimeNeedle(ctx, x0, y0, 15, 135, oHoursValue); //绘制时针
+      //   this.drawTimeNeedle(ctx, x0, y0, 8, minMaxL - 15, oMinValue); //绘制分针
+      //   this.drawTimeNeedle(ctx, x0, y0, 3, minMaxL - 2, oSenValue, "#f3a829"); //绘制秒针
+      //   this.drawSenDotted(ctx, "#f3a829", x0, y0, oSenValue - 180, centerL); //绘制秒针尾部
+      this.drawHoursScale(ctx, x0, y0, 12, 4, hourMaxL, hourMinL); //绘制表盘的时钟刻度scale
+      this.drawHoursScale(ctx, x0, y0, 60, 2, minMaxL, minMinL); //绘制表盘分钟刻度
+      this.drawScaleNum(ctx, hourMinL - 18, x0, y0); //绘制12个表盘数字
+      this.drawTimeNeedle(
+        ctx,
+        x0,
+        y0,
+        5,
+        (minMaxL - 15 - fixNum) / 1.5,
+        oHoursValue
+      ); //绘制时针
+      this.drawTimeNeedle(ctx, x0, y0, 5, minMaxL - 15 - fixNum, oMinValue); //绘制分针
+      this.drawTimeNeedle(ctx, x0, y0, 2, minMaxL - 2, oSenValue, "#f3a829"); //绘制秒针
+      this.drawSenDotted(ctx, "#f3a829", x0, y0, oSenValue - 180, 12); //绘制秒针尾部
+      this.drawCircleCenter(ctx, x0, y0, "#f3a829", 10); //绘制圆心
+    },
+    drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
+      for (let i = 0; i < scaleNum; i++) {
+        let angel = -90 + i * (360 / scaleNum); //角度
+        let [x1, y1] = [
+          x0 + Math.cos((angel * Math.PI) / 180) * maxL,
+          y0 + Math.sin((angel * Math.PI) / 180) * maxL,
+        ];
+        let [x2, y2] = [
+          x0 + Math.cos((angel * Math.PI) / 180) * minL,
+          y0 + Math.sin((angel * Math.PI) / 180) * minL,
+        ];
+        ctx.save();
+        ctx.beginPath();
+        ctx.lineWidth = scaleW;
+        ctx.lineCap = "round";
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+        ctx.closePath();
+        ctx.restore();
+      }
+    },
+    drawScaleNum(ctx, L, x0, y0) {
+      for (let i = 0; i < 12; i++) {
+        let angel = -90 + i * (360 / 12); //角度
+        let [x, y] = [
+          x0 + Math.cos((angel * Math.PI) / 180) * L,
+          y0 + Math.sin((angel * Math.PI) / 180) * L,
+        ];
+        let num = i == 0 ? 12 : i;
+        ctx.strokeStyle = "rgb(229,228,227)";
+        ctx.save();
+        ctx.beginPath();
+        // ctx.font = "30px Arial";
+        ctx.font = "27px Arial";
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+
+        ctx.fillText(num, x, y);
+        ctx.closePath();
+        ctx.restore();
+      }
+
+      const baseDate = new Date();
+
+      const weekDay = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+
+      ctx.fillStyle = "rgb(229,228,227)";
+
+      ctx.save();
+      ctx.beginPath();
+      ctx.font = "15px Arial";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(baseDate.formatDate("yyyy-MM-dd"), 285, 10);
+      ctx.fillText(baseDate.formatDate("hh:mm:ss"), 293, 30);
+      ctx.fillText(weekDay[baseDate.getDay()], 300, 50);
+      ctx.closePath();
+      ctx.restore();
+    },
+    drawTimeNeedle(ctx, x0, y0, lineW, L, angel, color = "rgb(229,228,227)") {
+      let [x, y] = [
+        x0 + Math.cos((angel * Math.PI) / 180) * L,
+        y0 + Math.sin((angel * Math.PI) / 180) * L,
+      ];
+      ctx.save();
+      ctx.beginPath();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = lineW;
+      ctx.lineCap = "round";
+      ctx.moveTo(x0, y0);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+      ctx.closePath();
+      ctx.restore();
+    },
+    drawCircleCenter(ctx, x0, y0, color, L) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.shadowBlur = 4;
+      ctx.shadowColor = "#000";
+      ctx.fillStyle = color;
+      ctx.arc(x0, y0, L, 0, (360 * Math.PI) / 180);
+      ctx.fill();
+      ctx.closePath();
+      ctx.restore();
+    },
+    drawSenDotted(ctx, color, x0, y0, angel, L) {
+      let [x, y] = [
+        x0 + Math.cos((angel * Math.PI) / 180) * L,
+        y0 + Math.sin((angel * Math.PI) / 180) * L,
+      ];
+      ctx.save();
+      ctx.beginPath();
+      ctx.fillStyle = color;
+      ctx.arc(x, y, 4, 0, (360 * Math.PI) / 180);
+      ctx.fill();
+      ctx.closePath();
+      ctx.restore();
+    },
+  },
+
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+#_C-ColckBox {
+  height: 100%;
+  //   background: radial-gradient(#f8f6f5, #f7f5f4, #e4e3e2, #b9b8b7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/router/index.js

@@ -25,6 +25,12 @@ const routes = [{
 	component: () =>
 		import( /* webpackChunkName: "Demo" */ "../views/Demo.vue"),
 },
+// {
+// 	path: "/sisView",
+// 	name: "sisView",
+// 	component: () =>
+// 		import( /* webpackChunkName: "sisView" */ "../views/sisView/index.vue"),
+// },
 {
 	path: "/monitor/status", // 状态监视
 	name: "Status",

src/views/About.vue

@@ -17,6 +17,7 @@
       <FJ id="fj-3" speed="2s" width="80px" height="82px" />
       <FJ />
       <FJ :speed="1" />
+      <clock style="display: inline-block" />
     </div>
     <el-table
       :data="tableData"
@@ -43,6 +44,7 @@
 // import ListBarChart from "../components/chart/bar/list-bar-chart.vue";
 import HealthReport from "@com/other/healthReport/index.vue";
 import FJ from "@com/other/fj/index.vue";
+import clock from "@com/other/clock/index.vue";
 // 导入header.vue文件
 export default {
   data() {
@@ -56,6 +58,7 @@ export default {
     // ListBarChart,
     HealthReport,
     FJ,
+    clock,
   },
 
   created() {

src/views/sisView/index.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="sisViewBox">
+    <div class="viewItem">
+      <clock :width="330" :height="300" />
+      <div class="viewTitle">综<br /><br />合<br /><br />参<br /><br />数</div>
+      <div class="contentBox">
+        <div class="contentItem">
+          <div class="itemName">装机容量</div>
+          <div class="itemNum">123</div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">安全天数</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">天</div>
+          <div class="itemName">总功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">日发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">年利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时</div>
+          <div class="itemName">年发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">上网电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">月利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时</div>
+          <div class="itemName">月发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">复位及时率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">年计划电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">完成率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">转换及时率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">月计划电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">完成率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">消缺及时率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName noPd">综合厂用电率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">月M&nbsp;T&nbsp;B&nbsp;F</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">风能利用率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName noPd">设备可利用率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+          <div class="itemName">月可靠性</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">%</div>
+        </div>
+      </div>
+    </div>
+    <div class="viewItem">
+      <div class="viewTitle">风<br /><br />电<br /><br />参<br /><br />数</div>
+      <div class="contentBox">
+        <div class="contentItem">
+          <div class="itemName">装机容量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">实时风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">月发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">年发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">日发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">实时功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(月)</div>
+          <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(年)</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">上网电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">总欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">牛发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">牛欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">牛风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">牛功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">麻发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">麻欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">麻风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">麻功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">青发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">青欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">青风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">青功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">石发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">石欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">石风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">石功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">香发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">香欠发</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">香风速</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">m/s</div>
+          <div class="itemName">香功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+      </div>
+    </div>
+    <div class="viewItem">
+      <div class="viewTitle">风<br /><br />电<br /><br />参<br /><br />数</div>
+      <div class="contentBox">
+        <div class="contentItem">
+          <div class="itemName">装机容量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+          <div class="itemName">日照强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">实时功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">日发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">月发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">年发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">上网电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(月)</div>
+           <div class="itemName">利用小时</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">小时(年)</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">武发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">武日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">武功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">平发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">平日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">平功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">宣发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">宣日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">宣功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">马发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">马日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">马功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+        <div class="contentItem">
+          <div class="itemName">海发电量</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">万kwh</div>
+          <div class="itemName">海日强度</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">W/㎡</div>
+          <div class="itemName">海功率</div>
+          <div class="itemNum"></div>
+          <div class="itemUnit">MW</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import $ from "jquery";
+import clock from "@com/other/clock/index.vue";
+export default {
+  // 名称
+  name: "sisView",
+
+  // 使用组件
+  components: {
+    clock,
+  },
+
+  // 数据
+  data() {
+    return {};
+  },
+
+  // 函数
+  methods: {
+    resetViewTitleHeight() {
+      let viewTitle = $(".viewTitle");
+      for (let i = 0; i < viewTitle.length; i++) {
+        viewTitle
+          .eq(i)
+          .css("height", viewTitle.eq(i).parent(".viewItem").css("height"));
+      }
+    },
+  },
+
+  created() {},
+
+  mounted() {
+    this.resetViewTitleHeight();
+  },
+
+  unmounted() {},
+};
+</script>
+
+<style lang="less" scoped>
+.sisViewBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: start;
+  align-items: flex-start;
+  flex-direction: column;
+
+  .viewItem {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin: 10px 0;
+
+    &:first-child {
+      margin: 0 0 10px 0;
+    }
+
+    .viewTitle {
+      font-family: Arial, Helvetica, sans-serif;
+      width: 30px;
+      padding: 10px 40px;
+      font-size: 30px;
+      font-weight: 700;
+      color: #ff0;
+      text-decoration: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      background-color: rgb(0, 52, 102);
+      margin-right: 10px;
+    }
+
+    .contentBox {
+      display: flex;
+      justify-content: start;
+      align-items: flex-start;
+      flex-direction: column;
+      font-family: Georgia, "Times New Roman", Times, serif;
+      font-size: 30px;
+
+      .contentItem {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+        padding: 2px 0;
+
+        .itemName {
+          width: 220px;
+          padding: 0 10px;
+          text-align: justify;
+          text-align-last: justify;
+
+          &.noPd {
+            width: 220px;
+            padding: 0 0 0 10px;
+          }
+        }
+
+        .itemNum {
+          font-family: Arial, Helvetica, sans-serif;
+          color: #f25656;
+          width: 110px;
+          text-align: center;
+        }
+
+        .itemUnit {
+          font-family: Arial, Helvetica, sans-serif;
+          font-size: 18px;
+          color: #0f0;
+          width: 110px;
+          text-align: left;
+          height: 100%;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}
+</style>