搭建结构

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,27 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="app-region" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="v-drag" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>

.idea/workspace.xml

@@ -2,7 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="690c02a3-0e7d-4c4a-8f0c-a44c44c3a162" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/assets/less/admin.less" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/assets/less/admin.less" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/components/Admin.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/components/Admin.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/renderer/store/state.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/renderer/store/state.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/dist/" />
     <ignored path="$PROJECT_DIR$/.tmp/" />
@@ -15,7 +19,74 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FileEditorManager">
-    <leaf />
+    <leaf>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/renderer/App.vue">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="126">
+              <caret line="6" column="8" selection-start-line="6" selection-start-column="8" selection-end-line="6" selection-end-column="8" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/renderer/components/Admin.vue">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="420">
+              <caret line="54" column="45" selection-start-line="54" selection-start-column="45" selection-end-line="54" selection-end-column="45" />
+              <folding>
+                <element signature="n#div#0;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#1;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#0;n#div#1;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#1;n#div#1;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#2;n#div#1;n#div#0;n#template#0;n#!!top" />
+                <element signature="n#div#2;n#div#0;n#template#0;n#!!top" />
+                <element signature="e#3127#3161#0" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/admin.less">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="357">
+              <caret line="206" selection-start-line="206" selection-end-line="206" />
+              <folding>
+                <element signature="e#22#2276#0" />
+                <element signature="e#124#162#0" />
+                <element signature="e#190#3092#0" />
+                <element signature="e#277#536#0" />
+                <element signature="e#443#530#0" />
+                <element signature="e#569#2974#0" />
+                <element signature="e#700#1106#0" />
+                <element signature="e#914#950#0" />
+                <element signature="e#1006#1098#0" />
+                <element signature="e#1148#1961#0" />
+                <element signature="e#1264#1429#0" />
+                <element signature="e#1470#1953#0" />
+                <element signature="e#1597#1801#0" />
+                <element signature="e#1844#1943#0" />
+                <element signature="e#2007#2967#0" />
+                <element signature="e#2195#2255#0" />
+                <element signature="e#2305#2958#0" />
+                <element signature="e#2434#2947#0" />
+                <element signature="e#2633#2935#0" />
+                <element signature="e#2770#2804#0" />
+                <element signature="e#2786#2921#0" />
+                <element signature="e#3053#3091#0" />
+                <element signature="e#3157#3195#0" />
+                <element signature="e#2122#2205#0" />
+                <element signature="e#2236#2274#0" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
@@ -40,18 +111,21 @@
         <option value="$PROJECT_DIR$/src/renderer/router/index.js" />
         <option value="$PROJECT_DIR$/src/renderer/utils/storageUtils.js" />
         <option value="$PROJECT_DIR$/src/renderer/store/getters.js" />
-        <option value="$PROJECT_DIR$/src/renderer/store/state.js" />
         <option value="$PROJECT_DIR$/src/renderer/store/mutation-types.js" />
         <option value="$PROJECT_DIR$/src/renderer/store/actions.js" />
         <option value="$PROJECT_DIR$/src/renderer/components/Login.vue" />
         <option value="$PROJECT_DIR$/src/utils/storageUtils.js" />
         <option value="$PROJECT_DIR$/src/renderer/store/mutations.js" />
+        <option value="$PROJECT_DIR$/.gitignore" />
+        <option value="$PROJECT_DIR$/src/renderer/store/state.js" />
+        <option value="$PROJECT_DIR$/src/renderer/index.css" />
+        <option value="$PROJECT_DIR$/src/renderer/App.vue" />
         <option value="$PROJECT_DIR$/src/renderer/components/Admin.vue" />
         <option value="$PROJECT_DIR$/src/renderer/assets/less/admin.less" />
       </list>
     </option>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6">
+  <component name="ProjectFrameBounds" extendedState="7">
     <option name="x" value="-420" />
     <option name="y" value="19" />
     <option name="width" value="1366" />
@@ -66,17 +140,7 @@
     </navigator>
     <panes>
       <pane id="Scope" />
-      <pane id="ProjectPane">
-        <subPane>
-          <expand>
-            <path>
-              <item name="electron-app" type="b2602c69:ProjectViewProjectNode" />
-              <item name="electron-app" type="462c0819:PsiDirectoryNode" />
-            </path>
-          </expand>
-          <select />
-        </subPane>
-      </pane>
+      <pane id="ProjectPane" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -129,11 +193,12 @@
       <workItem from="1585576328353" duration="806000" />
       <workItem from="1585577204895" duration="1209000" />
       <workItem from="1585578436413" duration="2728000" />
+      <workItem from="1585620225944" duration="16150000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="33708000" />
+    <option name="totallyTimeSpent" value="49858000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
@@ -145,9 +210,9 @@
     </todo-panel>
   </component>
   <component name="ToolWindowManager">
-    <frame x="-8" y="-8" width="1936" height="1056" extended-state="6" />
+    <frame x="-8" y="-8" width="1936" height="1056" extended-state="7" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.1332982" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.13277134" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="npm" order="2" side_tool="true" />
       <window_info id="Favorites" order="3" side_tool="true" />
@@ -161,7 +226,7 @@
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
       <window_info anchor="bottom" id="Version Control" order="8" />
       <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" weight="0.32910052" />
-      <window_info anchor="bottom" id="Terminal" order="10" weight="0.45079365" />
+      <window_info anchor="bottom" id="Terminal" order="10" weight="0.9238095" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
@@ -228,13 +293,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/index.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="168">
-          <caret line="8" column="1" selection-start-line="8" selection-start-column="1" selection-end-line="8" selection-end-column="1" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/renderer/main.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="357">
@@ -245,13 +303,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/.gitignore">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="105">
-          <caret line="5" column="13" lean-forward="true" selection-start-line="5" selection-start-column="13" selection-end-line="5" selection-end-column="13" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/.electron-vue/webpack.main.config.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-491">
@@ -266,13 +317,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/index.dev.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="10" column="14" selection-start-line="10" selection-start-column="14" selection-end-line="10" selection-end-column="14" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/.electron-vue/dev-runner.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-63">
@@ -280,20 +324,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/login.less">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="84">
-          <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/App.vue">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="252">
-          <caret line="12" column="7" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/utils/storageUtils.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="42">
@@ -350,101 +380,141 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/store/state.js">
+    <entry file="file://$PROJECT_DIR$/dist/electron/index.html" />
+    <entry file="file://$PROJECT_DIR$/dist/electron/main.js" />
+    <entry file="file://$PROJECT_DIR$/dist/electron/renderer.js" />
+    <entry file="file://$PROJECT_DIR$/package.json">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="42">
-          <caret line="2" column="19" lean-forward="true" selection-start-line="2" selection-start-column="19" selection-end-line="2" selection-end-column="19" />
+        <state relative-caret-position="252">
+          <caret line="12" column="46" selection-start-line="12" selection-start-column="46" selection-end-line="12" selection-end-column="46" />
           <folding>
-            <element signature="n#!!doc" expanded="true" />
+            <element signature="n#!!block;n#directories#0;n#!!block;n#build#0;n#!!top" />
+            <element signature="e#1036#1070#0" />
+            <element signature="n#!!block;n#dmg#0;n#!!block;n#build#0;n#!!top" />
+            <element signature="e#1103#1318#0" />
+            <element signature="e#1113#1224#0" />
+            <element signature="e#1234#1310#0" />
+            <element signature="n#!!block;n#mac#0;n#!!block;n#build#0;n#!!top" />
+            <element signature="n#!!block;n#win#0;n#!!block;n#build#0;n#!!top" />
+            <element signature="n#!!block;n#linux#0;n#!!block;n#build#0;n#!!top" />
+            <element signature="n#!!block;n#dependencies#0;n#!!top" />
+            <element signature="n#!!block;n#devDependencies#0;n#!!top" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/admin.less">
+    <entry file="file://$PROJECT_DIR$/yarn-error.log" />
+    <entry file="file://$PROJECT_DIR$/.gitignore">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="189">
+          <caret line="9" column="9" lean-forward="true" selection-start-line="9" selection-start-column="9" selection-end-line="9" selection-end-column="9" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/login.less">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="84">
+          <caret line="4" column="16" lean-forward="true" selection-start-line="4" selection-start-column="16" selection-end-line="4" selection-end-column="16" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/node_modules/devtron/vendor/bootstrap/css/bootstrap.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1251">
+          <caret line="1596" column="3" selection-start-line="1596" selection-start-column="3" selection-end-line="1596" selection-end-column="3" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/index.dev.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="168">
+          <caret line="8" lean-forward="true" selection-start-line="8" selection-end-line="8" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/index.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="189">
+          <caret line="9" lean-forward="true" selection-start-line="9" selection-end-line="9" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/index.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="63">
+          <caret line="3" column="1" lean-forward="true" selection-start-line="3" selection-start-column="1" selection-end-line="3" selection-end-column="1" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/renderer/store/state.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="21">
-          <caret line="1" column="11" selection-start-line="1" selection-start-column="11" selection-end-line="1" selection-end-column="11" />
+        <state relative-caret-position="168">
+          <caret line="8" column="23" lean-forward="true" selection-start-line="8" selection-start-column="23" selection-end-line="8" selection-end-column="23" />
           <folding>
-            <element signature="e#22#28#0" />
-            <element signature="e#126#136#0" />
-            <element signature="e#191#201#0" />
-            <element signature="e#281#295#0" />
-            <element signature="e#385#403#0" />
-            <element signature="e#546#560#0" />
-            <element signature="e#650#668#0" />
-            <element signature="e#713#735#0" />
-            <element signature="e#814#836#0" />
-            <element signature="e#703#721#0" />
-            <element signature="e#903#925#0" />
-            <element signature="e#973#995#0" />
-            <element signature="e#1607#1633#0" />
-            <element signature="e#1686#1712#0" />
-            <element signature="e#766#784#0" />
-            <element signature="e#646#660#0" />
-            <element signature="e#259#269#0" />
+            <element signature="n#!!doc" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/dist/electron/index.html" />
-    <entry file="file://$PROJECT_DIR$/dist/electron/main.js" />
-    <entry file="file://$PROJECT_DIR$/dist/electron/renderer.js" />
+    <entry file="file://$PROJECT_DIR$/src/renderer/App.vue">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="126">
+          <caret line="6" column="8" selection-start-line="6" selection-start-column="8" selection-end-line="6" selection-end-column="8" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/src/renderer/components/Admin.vue">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="21">
-          <caret line="61" column="11" selection-start-line="61" selection-start-column="11" selection-end-line="61" selection-end-column="11" />
+        <state relative-caret-position="420">
+          <caret line="54" column="45" selection-start-line="54" selection-start-column="45" selection-end-line="54" selection-end-column="45" />
           <folding>
-            <element signature="n#template#0;n#!!top" />
-            <element signature="n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#1;n#div#0;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#0;n#div#1;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#0;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#0;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#1;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#0;n#div#1;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#1;n#div#1;n#div#1;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#div#2;n#div#1;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#2;n#div#1;n#div#0;n#template#0;n#!!top" />
             <element signature="n#div#2;n#div#0;n#template#0;n#!!top" />
-            <element signature="n#script#0;n#!!top" />
-            <element signature="e#1033#1227#0" />
-            <element signature="e#1161#1185#0" />
-            <element signature="e#1182#1214#0" />
-            <element signature="e#153#315#0" />
-            <element signature="e#1186#1298#0" />
-            <element signature="n#style#0;n#!!top" />
-            <element signature="e#1471#1487#0" />
-            <element signature="e#1205#1221#0" />
-            <element signature="e#1654#1670#0" />
-            <element signature="e#1654#1670#0" />
+            <element signature="e#3127#3161#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/package.json">
+    <entry file="file://$PROJECT_DIR$/src/renderer/assets/less/admin.less">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="252">
-          <caret line="12" column="46" selection-start-line="12" selection-start-column="46" selection-end-line="12" selection-end-column="46" />
+        <state relative-caret-position="357">
+          <caret line="206" selection-start-line="206" selection-end-line="206" />
           <folding>
-            <element signature="n#!!block;n#directories#0;n#!!block;n#build#0;n#!!top" />
-            <element signature="e#1036#1070#0" />
-            <element signature="n#!!block;n#dmg#0;n#!!block;n#build#0;n#!!top" />
-            <element signature="e#1103#1318#0" />
-            <element signature="e#1113#1224#0" />
-            <element signature="e#1234#1310#0" />
-            <element signature="n#!!block;n#mac#0;n#!!block;n#build#0;n#!!top" />
-            <element signature="n#!!block;n#win#0;n#!!block;n#build#0;n#!!top" />
-            <element signature="n#!!block;n#linux#0;n#!!block;n#build#0;n#!!top" />
-            <element signature="n#!!block;n#dependencies#0;n#!!top" />
-            <element signature="n#!!block;n#devDependencies#0;n#!!top" />
+            <element signature="e#22#2276#0" />
+            <element signature="e#124#162#0" />
+            <element signature="e#190#3092#0" />
+            <element signature="e#277#536#0" />
+            <element signature="e#443#530#0" />
+            <element signature="e#569#2974#0" />
+            <element signature="e#700#1106#0" />
+            <element signature="e#914#950#0" />
+            <element signature="e#1006#1098#0" />
+            <element signature="e#1148#1961#0" />
+            <element signature="e#1264#1429#0" />
+            <element signature="e#1470#1953#0" />
+            <element signature="e#1597#1801#0" />
+            <element signature="e#1844#1943#0" />
+            <element signature="e#2007#2967#0" />
+            <element signature="e#2195#2255#0" />
+            <element signature="e#2305#2958#0" />
+            <element signature="e#2434#2947#0" />
+            <element signature="e#2633#2935#0" />
+            <element signature="e#2770#2804#0" />
+            <element signature="e#2786#2921#0" />
+            <element signature="e#3053#3091#0" />
+            <element signature="e#3157#3195#0" />
+            <element signature="e#2122#2205#0" />
+            <element signature="e#2236#2274#0" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/yarn-error.log" />
   </component>
 </project>

src/renderer/assets/less/admin.less

@@ -1,5 +1,8 @@
 /*管理界面样式*/
-.container {
+.containers {
+  position: relative;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 980px;
   background-color: #333;
@@ -44,7 +47,7 @@
       .pre_planmanage {
         width: 10%;
         height: 100%;
-        background-color: darkblue;
+        background-color: #102658;
         display: flex;
         flex-direction: column;
         justify-content: space-around;
@@ -86,7 +89,7 @@
           .split_btns {
             width: 100%;
             height: 50%;
-            background-color: orange;
+            background-color: purple;
             display: flex;
             justify-content: space-around;
             align-items: center;
@@ -96,7 +99,7 @@
           .other_btns {
             width: 100%;
             height: 50%;
-            background-color: plum;
+            background-color: mediumpurple;
           }
         }
       }
@@ -105,7 +108,69 @@
       .signal_source {
         width: 20%;
         height: 100%;
-        background-color: green;
+        background-color: #102658;
+        display: flex;
+        flex-direction: column;
+        align-items:center;
+
+        /*标题*/
+        .signal_title {
+          height: 60px;
+          color:#ffffff;
+        }
+
+        /*主体*/
+        .signal_body {
+          width:100%;
+          height: 93%;
+
+          /*信号源项*/
+          .signal_item {
+            width: 100%;
+            height: 180px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            /*背景*/
+            .signal_item_bg {
+              width: 94%;
+              height: 180px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              &:hover {
+                background-color: rgba(113, 113, 113, 0.4);
+              }
+
+              /*主体*/
+              .signal_item_bg_body {
+                width:96%;
+                height:96%;
+                background-color: rgba(127, 127, 127, 0.55);
+
+                /*空间*/
+                .signal_item_bg_body_space {
+                  width:94%;
+                  height:80%;
+                  background-color: green;
+                  margin:6px auto;
+                }
+                /*文字*/
+                .signal_item_bg_body_font {
+                  width:100%;
+                  height:15%;
+                  text-align: center;
+                  margin:0 auto;
+                  font-size:20px;
+                  color:#fff;
+                }
+              }
+            }
+          }
+
+        }
+
       }
 
     }
@@ -124,18 +189,3 @@
     height: 100%;
   }
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

src/renderer/components/Admin.vue

@@ -1,6 +1,6 @@
 <!--管理界面-->
 <template>
-    <div class="container">
+    <div class="containers">
         <div class="leftblank">
             <img class="avator" src="../assets/images/avatar.jpg" alt="头像">
             <div class="userinfo">
@@ -48,7 +48,19 @@
                     </div>
                 </div>
                 <div class="signal_source">
-
+                    <div class="signal_title">
+                        <h2>信号源列表</h2>
+                    </div>
+                    <div class="signal_body">
+                        <div class="signal_item" v-for="(item,index) in deviceList" :key="index" v-drag>
+                            <div class="signal_item_bg">
+                                <div class="signal_item_bg_body">
+                                    <div class="signal_item_bg_body_space"></div>
+                                    <div class="signal_item_bg_body_font">{{item.name}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="footmenu">
@@ -64,6 +76,7 @@
 <script>
     import '../assets/less/admin.less'
     import storageUtils from "../../utils/storageUtils"
+    import {mapState} from 'vuex'
 
     export default {
         data() {
@@ -72,9 +85,43 @@
             }
         },
         methods: {
+            // 退出登录
             logout() {
                 this.$router.replace('/login')
                 this.$store.dispatch('resetUser')
+            },
+        },
+        computed: {
+            ...mapState(['deviceList'])
+        },
+
+        // 注册局部指令
+        directives: {
+            drag: {
+                // 指令的定义
+                inserted: function (el) {
+                    el.onmousedown = function (e) {
+                        //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
+                        let divx = e.clientX - el.offsetLeft
+                        let divy = e.clientY - el.offsetTop
+                        //包含在onmousedown里，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
+                        document.onmousemove = function (e) {
+                            //获取移动后div的位置：鼠标位置-divx/divy
+                            let l = e.clientX - divx
+                            let t = e.clientY - divy
+                            el.style.left = l + 'px'
+                            el.style.top = t + 'px'
+                            
+                            console.log(el)
+                        }
+                        document.onmouseup = function (e) {
+                            document.onmousemove = null
+                            document.onmouseup = null
+                            
+                            console.log(e)
+                        }
+                    }
+                }
             }
         }
     }
@@ -99,3 +146,15 @@
         margin-bottom:10px;
     }
 </style>
+
+
+
+
+
+
+
+
+
+
+
+

src/renderer/store/state.js

@@ -1,4 +1,11 @@
 /*状态对象模块*/
 export default {
   user: {}, // 用户信息
+  // 设备列表数据
+  deviceList:[
+    {name:'PC1',id:'1'},
+    {name:'PC2',id:'2'},
+    {name:'PC3',id:'3'},
+    {name:'PC4',id:'4'}
+  ],
 }