浏览代码

样式修改

Ada 3 年之前
父节点
当前提交
a979db6523

+ 92 - 0
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.css

@@ -84,3 +84,95 @@
   right: 11%;
   top: 15%;
 }
+
+/* svg */
+.svg-item {
+  position: relative;
+  z-index: 66;
+}
+
+svg {
+  width: 1540px;
+  height: 650px;
+}
+
+svg path {
+	stroke: red;
+	fill: none;
+	stroke-width: 5;
+}
+
+.rect {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 10px;
+	height: 10px;
+	background: transparent;
+}
+.rect::after {
+		height: 0px;
+		width: 0px;
+		/* background-color: aqua; */
+		position: absolute;
+		right: 0px;
+		top: -5px;
+		content: "";
+		border-top: 10px solid transparent;
+		border-right: 10px solid aqua;
+		border-bottom: 10px solid transparent;
+		transform: rotate(180deg);
+}
+
+
+.qxRect {
+	offset-path: path("M800 260, L 860 300, L 900 250,L 1000 300");
+	offset-distance: 0%;
+	animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+
+.qxRect2 {
+	offset-path: path("M780 320, L 820 340, L 760 400");
+	offset-distance: 0%;
+	animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+
+.qxRect3 {
+	offset-path: path("M700 240, L 600 280, L 630 305, L 530 350");
+	offset-distance: 0%;
+	animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+
+.qxRect4 {
+	offset-path: path("M700 220, L 660 195, L 740 155");
+	offset-distance: 0%;
+	animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+
+.qxRect5 {
+	offset-path: path("M750 220, L 900 220");
+	offset-distance: 0%;
+	animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+
+.qxRect6 {
+	offset-path: path("M400 260, L 320 220, L 400 190, L 320 140");
+	offset-distance: 0%;
+	animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+
+.qxRect7 {
+	offset-path: path("M280 60, L 600 60, L 630 30, L 900 30, L 930 60, L 1180 60");
+	offset-distance: 0%;
+	animation: svg-path-animation 5s ease-in-out 0s infinite normal;
+}
+
+@keyframes svg-path-animation {
+	from {
+		offset-distance: 0%;
+	}
+
+	to {
+		offset-distance: 100%;
+	}
+}

+ 27 - 6
spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test62/test62.html

@@ -3,6 +3,27 @@
     <span class="fit"></span>
     <span class="close"></span>
   </div>
+  <div class="svg-contanier">
+    <div class="svg-item">
+      <svg>
+        <path d="M800 260, L 860 300, L 900 250,L 1000 300" />
+        <path d="M780 320, L 820 340, L 760 400" />
+        <path d="M700 240, L 600 280, L 630 305, L 530 350" />
+        <path d="M700 220, L 660 195, L 740 155" />
+        <path d="M750 220, L 900 220" />
+        <path d="M400 260, L 320 220, L 400 190, L 320 140" />
+        <path d="M280 60, L 600 60, L 630 30, L 900 30, L 930 60, L 1180 60" />
+        <path d="M1120 140, L 1060 190, L 1130 220" />
+      </svg>
+      <div class="rect qxRect"></div>
+      <div class="rect qxRect2"></div>
+      <div class="rect qxRect3"></div>
+      <div class="rect qxRect4"></div>
+      <div class="rect qxRect5"></div>
+      <div class="rect qxRect6"></div>
+      <div class="rect qxRect7"></div>
+    </div>
+  </div>
   <div class="test-box">
     <div class="concent">
 
@@ -18,27 +39,27 @@
         <p>郊区区县</p>
       </div>
       <div class="c-center1">
-        <img src="../images/zybz/组240拷贝.png" alt="" style="width: 1666px" />
+        <img src="../images/zybz/组240拷贝.png" alt="" style="width: 150px" />
         <p style="font-family: '庞门正道标题体'">指挥大厅</p>
       </div>
       <div class="c-center2">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" style="width: 100px">
         <p>1号配线间机房</p>
       </div>
       <div class="c-center3">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" style="width: 100px">
         <p>城管局UPS主供电房</p>
       </div>
       <div class="c-center4">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" style="width: 100px">
         <p>2号楼中心机房</p>
       </div>
       <div class="c-center5">
-        <img src="../images/zybz/icon_jifang拷贝3.png" alt="">
+        <img src="../images/zybz/icon_jifang拷贝3.png" alt="" style="width: 100px">
         <p>档案室库房</p>
       </div>
       <div class="c-center6">
-        <img style="width: 49%;" src="../images/zybz/icon_jifang拷贝3.png" alt="">
+        <img style="width: 49%;" src="../images/zybz/icon_jifang拷贝3.png" alt="" style="width: 100px">
         <p>城管局网络核心机房</p>
       </div>
 

+ 1 - 1
spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/common.js

@@ -1,4 +1,4 @@
-const basicUrl = 'http://23.37.100.80:8084/basic';
+const basicUrl = 'http://23.37.100.87:8084/basic';
 // const basicUrl = "http://192.168.0.100:8084/basic";
 
 // http://23.37.100.87:8084