更新argo日志

src/views/modules/visi/design-node-config.vue

@@ -138,7 +138,8 @@
               >
                 <template slot-scope="scope1">
                   <!-- <input v-model="scope.row.paravalue" placeholder="请输入内容" /> -->
-                  <el-cascader :props="props"
+                  <el-cascader
+                    :props="props"
                     filterable
                     clearable
                     @blur="selectBlur($event, scope1.row)"
@@ -275,7 +276,12 @@
         <el-form :layout="formLayout">
           <!-- <div class="sub-title"> 参数型输出</div> -->
           <el-form-item name="paraoutput"></el-form-item>
-          <el-table :data="outputsparameters" :key="outputparakey" border style="width: 100%">
+          <el-table
+            :data="outputsparameters"
+            :key="outputparakey"
+            border
+            style="width: 100%"
+          >
             <el-table-column label="参数型输出" align="center">
               <el-table-column
                 prop="paraname"
@@ -377,6 +383,19 @@
           <el-radio label="init" value="init">init</el-radio>
           <el-radio label="wait" value="wait">wait</el-radio>
         </el-radio-group>
+        <!-- <div style="max-height: 800px; position: relative"> -->
+        <div class="log-box" style="position: relative; overflow: scroll">
+          <div v-if="this.podcontentlogsplit.length">
+            <p
+              class="logList-item"
+              v-for="(item, index) in this.podcontentlogsplit"
+              :key="index"
+            >
+              {{ item }}
+            </p>
+          </div>
+          <p v-else>暂无数据</p>
+        </div>
         <!-- <el-descriptions
           title="节点日志"
           border
@@ -384,7 +403,7 @@
           <el-descriptions-item  label="日志">{{this.podcontentlog}}</el-descriptions-item>
 
         </el-descriptions> -->
-        <a-descriptions
+        <!-- <a-descriptions
           title=""
           layout="vertical"
           bordered
@@ -393,7 +412,7 @@
           <a-descriptions-item v-bind:label="this.containertype">
             {{ this.podcontentlog }}
           </a-descriptions-item>
-        </a-descriptions>
+        </a-descriptions> -->
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -414,8 +433,8 @@ export default {
       cascadeoption: [], //文件类型级联 目录
 
       cascadeoptionpara: [], //参数类型级联目录
-      props: { multiple: true},//设置多选
-      shareScopeEnd: [],//多选 参数设置
+      props: { multiple: true }, //设置多选
+      shareScopeEnd: [], //多选 参数设置
 
       nodeName: null,
       templateName: null,
@@ -471,9 +490,11 @@ export default {
       podcontent: { main: "", wait: "", init: "" }, //日志具体内容
       nodepodVisi: false,
       podcontentlog: "",
+      podcontentlogsplit: [],
       wftemplateName: "", //节点对应的 templateName
       workflowStatus: "", //工作流运行状态
-      outputparakey: 1,//outputparameters table key 
+      outputparakey: 1, //outputparameters table key
+      podphase: "", //节点对应podphase 状态
     };
   },
   created() {},
@@ -527,7 +548,7 @@ export default {
         this.getnodepodContent();
         this.podcontentVisi = true;
       }
-      this.getOutputparavalue();//获取输出
+      this.getOutputparavalue(); //获取输出
       // console.log("userInput  getInput");
       // console.log(this.algoparaInput);
       // console.log(this.algoparaOutput);
@@ -649,7 +670,6 @@ export default {
       }
     },
     primary() {
-
       //20211119
       this.algoparaInput.userInput = this.algoparaUserInput;
       this.algoparaInput.getInput = this.algoparaGetInput;
@@ -788,7 +808,7 @@ export default {
     },
     cascadehandleChange(value) {},
     cascadeparahandleChange(value) {
-      console.log("多选参数")
+      console.log("多选参数");
       console.log(value);
       // console.log(quotevalue)
       // 是否与上次的类型相同
@@ -816,7 +836,6 @@ export default {
       //   this.value.push(changeItem)
       // }
       // this.shareScopeEnd = this.value
-
     },
 
     // 以下4个函数是文件上传功能的
@@ -867,48 +886,97 @@ export default {
 
     //查询日志
     //获取单个节点 日志
+    //调用是已经判断过当前是否已经运行并得到workflowName
     getnodepodContent() {
-      console.log("获取节点日志");
-      this.$http({
-        url: this.$http.adornUrl("/visi/visiworkflow/getpodlog"),
-        method: "get",
-        params: this.$http.adornParams({
-          workflowName: this.workflowName,
-          idTemplateNameMap: this.idTemplateNameMap,
-          nodeId: this.cell.id,
-        }),
-      })
-        .then(({ data }) => {
-          // this.workflowContentlog = data.workflowContent;
-          this.podcontent = data.podcontent;
-          this.podcontentlog = this.podcontent.main;
-          console.log("podcontent");
-          console.log(this.podcontent);
-          console.log(this.podcontent.main);
-          console.log(this.podcontent.init);
-          console.log(this.podcontent.wait);
-          // this.podlogs = data.podlogs;
-          // console.log("workflowcontent")
-          // console.log(this.workflowContentlog);
-          // console.log("podlogs")
-          // console.log(this.podlogs);
+      var intervalID = window.setInterval(() => {
+        // this.getWorkflowStatus();
+        console.log("获取节点日志");
+        this.$http({
+          url: this.$http.adornUrl("/visi/visiworkflow/getpodlog2"),
+          method: "get",
+          params: this.$http.adornParams({
+            workflowName: this.workflowName,
+            idTemplateNameMap: this.idTemplateNameMap,
+            nodeId: this.cell.id,
+          }),
         })
-        .then(() => {
-          // this.visible = true
-          // this.$nextTick(() => {
-          //   this.$refs['dataForm'].resetFields()
-          // })
-        });
+          .then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$nextTick(() => {
+              this.workflowContentlog = data.workflowContent;
+              this.podcontent = data.podcontent;
+              if (this.containertype == "main") {
+                this.podcontentlog = this.podcontent.main;
+                this.podcontentlogsplit =
+                  this.podcontent.main.split(/[(\r\n)\r\n]+/);
+              }
+              if (this.containertype == "init") {
+                this.podcontentlog = this.podcontent.init;
+                this.podcontentlogsplit =
+                  this.podcontent.init.split(/[(\r\n)\r\n]+/);
+              }
+              if (this.containertype == "wait") {
+                this.podcontentlog = this.podcontent.wait;
+                this.podcontentlogsplit =
+                  this.podcontent.wait.split(/[(\r\n)\r\n]+/);
+              }
+              this.podphase = data.podphase;
+              // this.handleLog();
+              // console.log("podcontent");
+              // console.log(this.podcontent);
+              // console.log(this.podcontent.main);
+              // console.log(this.podcontent.init);
+              // console.log(this.podcontent.wait);
+              // console.log(this.podphase);
+              
+              // this.podlogs = data.podlogs;
+              // console.log("workflowcontent")
+              // console.log(this.workflowContentlog);
+              // console.log("podlogs")
+              // console.log(this.podlogs);
+            });
+            }
+            
+          })
+          .then(() => {
+            // this.visible = true
+            // this.$nextTick(() => {
+            //   this.$refs['dataForm'].resetFields()
+            // })
+            // 取消该定时设置
+            if (
+              this.podphase == "Succeeded" ||
+              this.podphase == "Error" ||
+              this.podphase == "Failed"
+            ) {
+              // if (this.workflowStatus == "Succeeded") {
+              //   this.workflowstatustag.name = "Succeeded";
+              //   this.workflowstatustag.type = "success";
+              // } else if (
+              //   this.workflowStatus == "Error" ||
+              //   this.workflowStatus == "Failed"
+              // ) {
+              //   this.workflowstatustag.name = "Failed";
+              //   this.workflowstatustag.type = "danger";
+              // }
+              console.log("关闭定时器-podlog");
+              window.clearInterval(intervalID);
+            }
+          });
+      }, 5000);
     },
     podcontainerchange(e) {
       if (this.containertype == "main") {
         this.podcontentlog = this.podcontent.main;
+        this.podcontentlogsplit = this.podcontent.main.split(/[(\r\n)\r\n]+/);
       }
       if (this.containertype == "init") {
         this.podcontentlog = this.podcontent.init;
+        this.podcontentlogsplit = this.podcontent.init.split(/[(\r\n)\r\n]+/);
       }
       if (this.containertype == "wait") {
         this.podcontentlog = this.podcontent.wait;
+        this.podcontentlogsplit = this.podcontent.wait.split(/[(\r\n)\r\n]+/);
       }
 
       // if(e.target.value=="main"){
@@ -1007,8 +1075,8 @@ export default {
             console.log(jsonObj);
             for (var i = 0; i < jsonObj.length; i++) {
               // alert(jsonObj[i].name); //取json中的值
-              for (var j = 0; j < this.outputsparameters.length;j++) {
-                if(jsonObj[i].name == this.outputsparameters[j].paraname){
+              for (var j = 0; j < this.outputsparameters.length; j++) {
+                if (jsonObj[i].name == this.outputsparameters[j].paraname) {
                   this.outputsparameters[j].paravalue = jsonObj[i].value;
                 }
               }
@@ -1018,9 +1086,81 @@ export default {
             Message.error("输出参数结果获取失败");
           }
         });
+      }
+    },
 
-        
+    //获取webSocket消息
+    handleLog() {
+      var websocket = null;
+
+      var host = "ws://127.0.0.1:8082/renren-fast/webSocket/log";
+      // if (window.location.protocol == 'http:') {
+      //   host = 'ws://' + window.location.host + '/websocket';
+      // } else {
+      //   host = 'wss://' + window.location.host + '/websocket';
+      // }
+
+      //判断当前浏览器是否支持WebSocket
+      if ("WebSocket" in window) {
+        this.websocket = new WebSocket(host);
+      } else if ("MozWebSocket" in window) {
+        this.websocket = new MozWebSocket(host);
+      } else {
+        alert("该浏览器不支持WebSocket！");
       }
+      console.log(host);
+      this.initWebSocket();
+
+      // if ("WebSocket" in window) {
+      //   let url = `ws://localhost/websocket`;
+      //   console.log(url);
+      //   this.websocket = new WebSocket(url);
+      //   this.initWebSocket();
+      // }
+    },
+
+    //初始化webSocket
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      this.websocket.onclose = () => {
+        console.log("WebSocket断开    状态码：" + this.websocket.readyState);
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // this.consumeCount = this.consumeCount + 1;
+        // if (this.filter && event.data.indexOf(this.keyword) == -1) {
+        //   return
+        // }
+        // var curIndex=id;
+
+        // this.podcontentlog = this.podcontent.main;
+
+        if (event.data.match("获取节点日志结束")) {
+          console.log(event.data);
+          this.websocket.close();
+        } else {
+          this.podcontent = JSON.parse(event.data);
+          this.containertype = "main";
+          this.podcontentlog = this.podcontent.main;
+          this.podcontentlogsplit = this.podcontent.main.split(/[(\r\n)\r\n]+/);
+          console.log("event.data" + event.data);
+        }
+
+        /* else{
+          this.websocket.close();
+        } */
+      };
     },
   },
   computed: {
@@ -1070,4 +1210,17 @@ export default {
 .el-form-item.el-input {
   width: 150px;
 }
+.logList-item {
+  padding: 8px 0;
+  margin: 0;
+  font: normal 13px/1.2 "Courier", sans-serif;
+}
+.log-box {
+  /* min-height: 500px; */
+  /* max-height: 800px; */
+  height: 100%;
+  padding: 10px;
+  margin: 10px;
+  background-color: #fff;
+}
 </style>

src/views/modules/visi/design-workflowlog.vue

@@ -6,30 +6,48 @@
   >
     <!-- <el-form :model="dataForm" ref="dataForm" label-width="160px">
       <el-form-item class="boxformitem"> -->
-        <div style="width:'10%',height:'100%',display:'flex'">
-          <el-radio-group
-            v-model="containertype"
-            default-value="main"
-            @change="workflowcontainerchange"
+    <div style="width:'10%',height:'100%'">
+      <el-radio-group
+        v-model="containertype"
+        default-value="main"
+        @change="workflowcontainerchange"
+      >
+        <el-radio label="main" value="main">main</el-radio>
+        <el-radio label="init" value="init">init</el-radio>
+        <el-radio label="wait" value="wait">wait</el-radio>
+      </el-radio-group>
+      <!-- <div class="log-box"> -->
+      <div class="log-box" style="position: relative; overflow: scroll">
+        <div
+          v-if="
+            this.workflowContentlogsplit && this.workflowContentlogsplit.length
+          "
+        >
+          <p
+            class="logList-item"
+            v-for="(item, index) in this.workflowContentlogsplit"
+            :key="index"
           >
-            <el-radio label="main" value="main">main</el-radio>
-            <el-radio label="init" value="init">init</el-radio>
-            <el-radio label="wait" value="wait">wait</el-radio>
-          </el-radio-group>
-          <a-descriptions
-            title=""
-            layout="vertical"
-            bordered
-            style="white-space: pre-wrap"
-          >
-            
-            <a-descriptions-item >
-              {{ this.workflowContentlog }}
-            </a-descriptions-item>
-          </a-descriptions>
-          <!-- </a-layout-footer> -->
+            {{ item }}
+          </p>
         </div>
-      <!-- </el-form-item>
+        <p v-else>暂无数据</p>
+      </div>
+      <!-- </div> -->
+
+      <!-- <a-descriptions
+        title=""
+        layout="vertical"
+        bordered
+        style="white-space: pre-wrap"
+      >
+        <a-descriptions-item>
+          {{ this.workflowContentlog }}
+        </a-descriptions-item>
+      </a-descriptions> -->
+      <!-- </a-layout-footer> -->
+    </div>
+    <!-- </el-form-item>
     </el-form> -->
     <!-- <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
@@ -51,8 +69,15 @@ export default {
       workflowName: "", //提交后的工作流名称
       workflowContent: { main: "暂无数据", wait: "暂无数据", init: "暂无数据" },
       workflowContentlog: "",
+      workflowContentlogsplit: [],
+      workflowStatus: "", //记录工作流状态
 
       containertype: "main",
+      websocket: null,
+      log: "", // 日志内容
+      logCache: "",
+      websocket: null,
+      socketTimer: null,
     };
   },
   methods: {
@@ -65,50 +90,263 @@ export default {
     init(workflowName) {
       this.visible = true;
       this.workflowName = workflowName;
-
-      this.$http({
-        url: this.$http.adornUrl("/visi/visiworkflow/getworkflowlog"),
-        method: "get",
-        params: this.$http.adornParams({
-          workflowName: this.workflowName,
-        }),
-      })
-        .then(({ data }) => {
-          this.workflowContent = data.workflowContent;
-          this.workflowContentlog = this.workflowContent.main;
-          // this.podlogs = data.podlogs;
-          console.log("workflowcontent");
-          console.log(this.workflowContent);
-          console.log(this.workflowContent.main);
-          console.log(this.workflowContent.init);
-          console.log(this.workflowContent.wait);
-          // console.log("podlogs")
-          // console.log(this.podlogs);
+      // this.createWebsocket();
+      var intervalID = window.setInterval(() => {
+        // this.getWorkflowStatus();
+        this.$http({
+          url: this.$http.adornUrl("/visi/visiworkflow/getworkflowlog2"),
+          method: "get",
+          params: this.$http.adornParams({
+            workflowName: this.workflowName,
+          }),
         })
-        .then(() => {
-          // this.visible = true
-          // this.$nextTick(() => {
-          //   this.$refs['dataForm'].resetFields()
-          // })
-        });
+          .then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$nextTick(() => {
+              this.workflowContent = data.workflowContent;
+              if (this.containertype == "main") {
+                this.workflowContentlog = this.workflowContent.main;
+                this.workflowContentlogsplit =
+                  this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+              }
+              if (this.containertype == "init") {
+                this.workflowContentlog = this.workflowContent.init;
+                this.workflowContentlogsplit =
+                  this.workflowContent.init.split(/[(\r\n)\r\n]+/);
+              }
+              if (this.containertype == "wait") {
+                this.workflowContentlog = this.workflowContent.wait;
+                this.workflowContentlogsplit =
+                  this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
+              }
+              this.workflowStatus = data.workflowStatus;
+              // this.handleLog();
+              // this.podlogs = data.podlogs;
+              
+              // console.log("workflowcontent");
+              // console.log(this.workflowContent);
+              // console.log(this.workflowContent.main);
+              // console.log(this.workflowContent.init);
+              // console.log(this.workflowContent.wait);
+              // console.log(this.workflowStatus);
+
+              // console.log("podlogs")
+              // console.log(this.podlogs);
+            });
+            }
+            
+          })
+          .then(() => {
+            // this.visible = true
+            // this.$nextTick(() => {
+            //   this.$refs['dataForm'].resetFields()
+            // })
+            // 取消该定时设置
+            if (
+              this.workflowStatus == "Succeeded" ||
+              this.workflowStatus == "Error" ||
+              this.workflowStatus == "Failed"
+            ) {
+              // if (this.workflowStatus == "Succeeded") {
+              //   this.workflowstatustag.name = "Succeeded";
+              //   this.workflowstatustag.type = "success";
+              // } else if (
+              //   this.workflowStatus == "Error" ||
+              //   this.workflowStatus == "Failed"
+              // ) {
+              //   this.workflowstatustag.name = "Failed";
+              //   this.workflowstatustag.type = "danger";
+              // }
+              console.log("关闭定时器-workflowlog");
+              window.clearInterval(intervalID);
+            }
+          });
+      }, 5000);
     },
     init1() {
       this.visible = true;
       this.workflowContentlog = this.workflowContent.main;
+      this.workflowContentlogsplit =
+        this.workflowContent.main.split(/[(\r\n)\r\n]+/);
       //暂未生成workflowname
-      
     },
     //单选控制 日志类型 main init wait
     workflowcontainerchange(e) {
       if (this.containertype == "main") {
         this.workflowContentlog = this.workflowContent.main;
+        this.workflowContentlogsplit =
+          this.workflowContent.main.split(/[(\r\n)\r\n]+/);
       }
       if (this.containertype == "init") {
         this.workflowContentlog = this.workflowContent.init;
+        this.workflowContentlogsplit =
+          this.workflowContent.init.split(/[(\r\n)\r\n]+/);
       }
       if (this.containertype == "wait") {
         this.workflowContentlog = this.workflowContent.wait;
+        this.workflowContentlogsplit =
+          this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
+      }
+    },
+
+    //获取webSocket消息
+    handleLog() {
+      var websocket = null;
+
+      var host = "ws://127.0.0.1:8082/renren-fast/webSocket/log";
+      // if (window.location.protocol == 'http:') {
+      //   host = 'ws://' + window.location.host + '/websocket';
+      // } else {
+      //   host = 'wss://' + window.location.host + '/websocket';
+      // }
+
+      //判断当前浏览器是否支持WebSocket
+      if ("WebSocket" in window) {
+        this.websocket = new WebSocket(host);
+      } else if ("MozWebSocket" in window) {
+        this.websocket = new MozWebSocket(host);
+      } else {
+        alert("该浏览器不支持WebSocket！");
       }
+      console.log(host);
+      this.initWebSocket();
+
+      // if ("WebSocket" in window) {
+      //   let url = `ws://localhost/websocket`;
+      //   console.log(url);
+      //   this.websocket = new WebSocket(url);
+      //   this.initWebSocket();
+      // }
+    },
+
+    //初始化webSocket
+    initWebSocket() {
+      // 连接错误
+      this.websocket.onerror = () => {
+        console.log(
+          "WebSocket连接发生错误   状态码：" + this.websocket.readyState
+        );
+      };
+      // 连接成功
+      this.websocket.onopen = () => {
+        console.log(
+          "WebSocket连接成功    状态码：" + this.websocket.readyState
+        );
+      };
+      this.websocket.onclose = () => {
+        console.log("WebSocket断开    状态码：" + this.websocket.readyState);
+      };
+      // 收到消息的回调
+      this.websocket.onmessage = (event) => {
+        // this.consumeCount = this.consumeCount + 1;
+        // if (this.filter && event.data.indexOf(this.keyword) == -1) {
+        //   return
+        // }
+        // var curIndex=id;
+        if (event.data.match("日志获取结束")) {
+          console.log(event.data);
+          this.websocket.close();
+        } else {
+          this.workflowContent = JSON.parse(event.data);
+          this.containertype = "main";
+          this.workflowContentlog = this.workflowContent.main;
+          this.workflowContentlogsplit =
+            this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+          console.log("event.data" + event.data);
+        }
+
+        /* else{
+          this.websocket.close();
+        } */
+      };
+    },
+
+    createWebsocket() {
+      const url = "ws://127.0.0.1:8082/renren-fast/webSocket/workflowlog";
+      this.websocket = new WebSocket(url);
+      this.websocket.onopen = () => {
+        console.log("websocket.onopen...");
+        this.websocket.send(
+          JSON.stringify({ workflowName: this.workflowName })
+        );
+        this.openSocketTimer();
+      };
+      this.websocket.onmessage = (res) => {
+        console.log("websocket.onmessage...");
+        const data = res.data;
+        console.log(res.data);
+        // let lineRes = "";
+        // let arrN = [];
+        // if (data.indexOf("\n") !== -1) {
+        //   arrN = data.split("\n");
+        // }
+
+        // if (arrN.length > 0) {
+        //   for (let i = 0; i < arrN.length - 1; i++) {
+        //     let lineStr = arrN[i];
+        //     if (lineStr.indexOf("\r") !== -1) {
+        //       lineStr = lineStr[lineStr.length - 1];
+        //     }
+
+        //     lineRes += lineStr + "\n\n";
+        //   }
+        // } else {
+        //   lineRes = data;
+        // }
+
+        // 放到缓存logCache中
+        if (res.data) {
+          if (!this.log || this.log.length == 0) {
+            this.$nextTick(() => {
+              // this.log = `${this.log}${lineRes}`;
+              this.log = res.data;
+              this.workflowContent = JSON.parse(res.data);
+              this.containertype = "main";
+              this.workflowContentlog = this.workflowContent.main;
+              this.workflowContentlogsplit =
+                this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+            });
+          } else {
+            // this.logCache = `${this.logCache}${lineRes}`;
+            this.logCache = res.data;
+          }
+        }
+      };
+      this.websocket.onclose = function (e) {
+        console.log("websocket.onclose...");
+        console.log(`连接已断开...>>>${e.code}`);
+      };
+    },
+    // 开启定时器，每隔3秒检验下是否需要刷新日志
+    openSocketTimer() {
+      this.clearSocketTimer();
+      this.socketTimer = setInterval(this.checkRenderEnable, 3000);
+    },
+    // 关闭定时器
+    clearSocketTimer() {
+      if (this.socketTimer != null) {
+        clearInterval(this.socketTimer);
+        this.socketTimer = null;
+      }
+    },
+    // 判断是否需要刷新页面，也就是log缓存是否为空
+    checkRenderEnable() {
+      if (this.logCache && this.logCache.length > 0) {
+        this.renderPage();
+      }
+    },
+    // 刷新页面
+    renderPage() {
+      this.$nextTick(() => {
+        // this.log = `${this.log}${this.logCache}`;
+        this.log = this.logCache;
+        this.workflowContent = JSON.parse(this.log);
+        this.containertype = "main";
+        this.workflowContentlog = this.workflowContent.main;
+        this.workflowContentlogsplit =
+          this.workflowContent.main.split(/[(\r\n)\r\n]+/);
+        this.logCache = ""; // 刷新完成之后，清空log缓存
+      });
     },
   },
 };
@@ -120,4 +358,17 @@ export default {
 .el-form-item .el-input {
   width: 100%;
 }
+.logList-item {
+  padding: 0px 0;
+  line-height: 20px;
+  margin: 0;
+  font: normal 13px/1.2 "Courier", sans-serif;
+}
+.log-box {
+  min-height: 500px;
+  max-height: 800px;
+  padding: 10px;
+  margin: 10px;
+  background-color: #fff;
+}
 </style>