From 809f482cc5bb391958f981195b3a8e6dd3793e83 Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Mon, 26 Jul 2021 16:39:54 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore |   2 +
 index.html | 195 +++++++++++++++++++----------------------------------
 2 files changed, 73 insertions(+), 124 deletions(-)
 create mode 100644 .gitignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..863e817
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.idea
+.vscode
diff --git a/index.html b/index.html
index 54bfa91..e07f02e 100644
--- a/index.html
+++ b/index.html
@@ -1,134 +1,89 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-  <title>插件模板</title>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <title>插件模板</title>
   <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.css">
   <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
   <!-- <script type="text/javascript" src="plugin.js"></script> -->
-</head>
+</head>
 <body>
   <div class="">
     <div class="h-10 w-full flex justify-center items-center border-b-2">项目名称</div>
+<!--    角色栏-->
     <div class="w-full h-16 flex items-center border-b-2">
       <div class="p-2 m-4">项目经理</div>
       <div class="p-2 m-4 border-b-2 border-blue-500 text-blue-400">运维</div>
     </div>
-    <div class="w-full h-36 pt-4 bg-gray-100">
-      <div class="content w-80 h-28 ml-6 bg-white rounded-lg p-1.5 pl-3">
-        <div class="h-6 w-11/12 m-2 bg-gray-100"></div>
-        <div class="h-6 w-11/12 m-2 bg-gray-100"></div>
-        <div class="h-6 w-11/12 m-2 bg-gray-100"></div>
-        <div class="h-6 w-11/12 m-2 bg-gray-100"></div>
-        <div class="h-6 w-11/12 m-2 bg-gray-100"></div>
+
+    <div class="w-full p-4 bg-gray-100">
+<!--      日常任务面板-->
+      <div class="content p-3 h-46 bg-white rounded-lg">
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 mb-2 bg-gray-100"></div>
+        <div class="h-6 bg-gray-100"></div>
       </div>
     </div>
-    <div class="w-full h-8 bg-blue-500 text-white pl-4 flex items-center">2021年30周</div>
-    <div class="taskBar h-96 w-full bg-gray-100 p-4">
-      <div class="flex">
-        <div>
-          <div class="rounded-full h-8 w-8 bg-gray-100 border-2 border-blue-500"></div>
-          <div class="w-8 flex justify-center">
-            <div class="w-0.5 h-20 bg-gray-300"></div>
+<!--    <div class="w-full h-8 bg-blue-500 text-white pl-4 flex items-center">2021年30周</div>-->
+    <div class="task-bar h-96 w-full bg-gray-100 p-4">
+      <div class="flex mb-3">
+<!--        序号-->
+        <div class="flex flex-col items-center">
+          <div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
+          <div class="w-8 flex-1 flex flex-col items-center">
+            <div class="w-0.5 flex-1 bg-gray-300"></div>
           </div>
         </div>
-        <div>
-          <div class="flex justify-between w-80">
-            <div class="h-8 flex items-center ml-4">任务时间栏</div>
-            <div class="flex items-center">
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4 mr-4" src="刷新_好压看图.png" />
-            </div>
-          </div>
-          <div class="rounded-lg ml-4 bg-white h-20 w-11/12 p-3">
-            你好
-          </div>
-        </div>
-      </div>
-      <div class="flex">
-        <div>
-          <div class="rounded-full h-8 w-8 bg-gray-100 border-2 border-blue-500"></div>
-          <div class="w-8 flex justify-center">
-            <div class="w-0.5 h-20 bg-gray-300"></div>
-          </div>
-        </div>
-        <div>
-          <div class="flex justify-between w-80">
-            <div class="h-8 flex items-center ml-4">任务时间栏</div>
-            <div class="flex items-center">
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4 mr-4" src="刷新_好压看图.png" />
-            </div>
-          </div>
-          <div class="rounded-lg ml-4 bg-white h-20 w-11/12 p-3">
-            你好
-          </div>
-        </div>
-      </div>
-      <div class="flex">
-        <div>
-          <div class="rounded-full h-8 w-8 bg-gray-100 border-2 border-blue-500"></div>
-          <div class="w-8 flex justify-center">
-            <div class="w-0.5 h-20 bg-gray-300"></div>
-          </div>
-        </div>
-        <div>
-          <div class="flex justify-between w-80">
-            <div class="h-8 flex items-center ml-4">任务时间栏</div>
-            <div class="flex items-center">
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4 mr-4" src="刷新_好压看图.png" />
-            </div>
-          </div>
-          <div class="rounded-lg ml-4 bg-white h-20 w-11/12 p-3">
-            你好
-          </div>
-        </div>
-      </div>
-      <div class="flex">
-        <div>
-          <div class="rounded-full h-8 w-8 bg-gray-100 border-2 border-blue-500"></div>
-          <div class="w-8 flex justify-center">
-            <div class="w-0.5 h-20 bg-gray-300"></div>
-          </div>
-        </div>
-        <div>
-          <div class="flex justify-between w-80">
-            <div class="h-8 flex items-center ml-4">任务时间栏</div>
-            <div class="flex items-center">
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4 mr-4" src="刷新_好压看图.png" />
-            </div>
-          </div>
-          <div class="rounded-lg ml-4 bg-white h-20 w-11/12 p-3">
-            你好
+
+        <div class="flex-1">
+<!--          定期任务面板-->
+          <div class="rounded-lg ml-4 bg-white p-3">
+<!--            示例插件1-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
+<!--            示例插件2 id=100-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
+
+            <script>
+              const p100 = {
+                name: 'hello tall plugin',
+                show() {
+                  alert(this.name)
+                }
+              }
+            </script>
           </div>
         </div>
       </div>
-      <div class="flex">
-        <div>
-          <div class="rounded-full h-8 w-8 bg-gray-100 border-2 border-blue-500"></div>
-          <div class="w-8 flex justify-center">
-            <div class="w-0.5 h-20 bg-gray-300"></div>
+
+      <div class="flex mb-3">
+        <!--        序号-->
+        <div class="flex flex-col items-center">
+          <div class="rounded-full h-8 w-8 mb-1 bg-gray-100 border-2 border-blue-500"></div>
+          <div class="w-8 flex-1 flex flex-col items-center">
+            <div class="w-0.5 flex-1 bg-gray-300"></div>
           </div>
         </div>
-        <div>
-          <div class="flex justify-between w-80">
-            <div class="h-8 flex items-center ml-4">任务时间栏</div>
-            <div class="flex items-center">
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4" src="刷新_好压看图.png" />
-              <img class="w-5 h-5 ml-4 mr-4" src="刷新_好压看图.png" />
-            </div>
-          </div>
-          <div class="rounded-lg ml-4 bg-white h-20 w-11/12 p-3">
-            你好
+
+        <div class="flex-1">
+          <!--          定期任务面板-->
+          <div class="rounded-lg ml-4 bg-white p-3">
+            <!--            示例插件1-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="alert('hello')">测试组建1</button>
+            <!--            示例插件2 id=100-->
+            <button class="bg-blue-500 py-2 px-5 rounded text-white" onclick="p100.show()">测试组建2</button>
+
+            <script>
+              const p100 = {
+                name: 'hello tall plugin',
+                show() {
+                  alert(this.name)
+                }
+              }
+            </script>
           </div>
         </div>
       </div>
@@ -136,19 +91,11 @@
   </div>
 </body>
 <style>
-.content{
-  overflow-y: scroll;
-  /* overflow-y: hidden; */
-}
-.content::-webkit-scrollbar{
-  display: none;
-}
-.taskBar{
+.content, .task-bar{
   overflow-y: scroll;
-  /* overflow-y: hidden; */
 }
-.taskBar::-webkit-scrollbar{
+.content::-webkit-scrollbar, .task-bar::-webkit-scrollbar{
   display: none;
 }
-</style>
-</html>
+</style>
+</html>
