From 779caead0a2d043b728f41407bd9c249532daa0f Mon Sep 17 00:00:00 2001
From: leiyun <waitshan@163.com>
Date: Mon, 17 Oct 2022 16:21:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Rgb.vue       | 24 ++++++++++++++++++++++++
 src/views/Timestamp.vue |  2 ++
 2 files changed, 26 insertions(+)

diff --git a/src/views/Rgb.vue b/src/views/Rgb.vue
index f2b401f..4db7f5f 100644
--- a/src/views/Rgb.vue
+++ b/src/views/Rgb.vue
@@ -19,6 +19,11 @@
                 size="mini"></el-input>
       <span class="ml30">rgb用英文逗号分隔，如 255,255,255</span>
     </div>
+    <div class="mt20">
+      颜色： <span :style="`color:${color1}`">这是颜色</span>
+      <div :style="`background-color:${color1}`"
+           class="color-block ml30"></div>
+    </div>
     <div class="mt20">
       <el-button type="primary"
                  size="mini"
@@ -31,6 +36,7 @@
                  :data-clipboard-text="hex1"
                  @click="copyText('copy-dateStr1')">复制hex</el-button>
     </div>
+    <el-divider></el-divider>
     <div class="mt20">
       hex <i class="el-icon-right"></i> rgb：
       <el-input v-model="hex2"
@@ -47,6 +53,11 @@
                 class="input-box"
                 size="mini"></el-input>
     </div>
+    <div class="mt20">
+      颜色： <span :style="`color:${color2}`">这是颜色</span>
+      <div :style="`background-color:${color2}`"
+           class="color-block ml30"></div>
+    </div>
     <div class="mt20">
       <el-button type="primary"
                  size="mini"
@@ -82,6 +93,8 @@ export default {
       rgb2: "",
       hex1: "",
       hex2: "",
+      color1: "#333",
+      color2: "#333",
     }
   },
   //监听属性 类似于data概念
@@ -126,6 +139,7 @@ export default {
       console.log(r, g, b);
       try {
         this.hex1 = `#${rgbHex(`rgb(${r},${g},${b})`)}`.toLocaleUpperCase();
+        this.color1 = this.hex1;
       } catch (e) {
         console.log(e);
         this.hex1 = "转化异常";
@@ -146,6 +160,7 @@ export default {
         } else {
           this.rgb2 = "转化异常"
         }
+        this.color2 = hex;
       } catch (e) {
         console.log(e);
         this.rgb2 = "转化异常"
@@ -173,6 +188,15 @@ export default {
   margin-left: 20px;
   margin-right: 20px;
 }
+
+.color-block{
+  display: inline-block;
+  width: 80px;
+  height: 40px;
+  vertical-align: middle;
+  border: 1px solid #f0f0f0;
+  border-radius: 3px;
+}
 </style>
 <style>
 </style>
\ No newline at end of file
diff --git a/src/views/Timestamp.vue b/src/views/Timestamp.vue
index 48812f9..09f83f2 100644
--- a/src/views/Timestamp.vue
+++ b/src/views/Timestamp.vue
@@ -21,6 +21,7 @@
                  :data-clipboard-text="dateStr"
                  @click="copyText('copy-dateStr')">复制时间</el-button>
     </div>
+    <el-divider></el-divider>
     <div class="mt20">
       时间戳：
       <el-input v-model="timestamp1"
@@ -49,6 +50,7 @@
                  :data-clipboard-text="dateStr1"
                  @click="copyText('copy-dateStr1')">复制时间</el-button>
     </div>
+    <el-divider></el-divider>
     <div class="mt20">
       时间：
       <el-input v-model="dateStr2"