style: socket状态异常弹窗UI修改

src/page-instrument/header-top/index.tsx

@@ -78,7 +78,7 @@ export const headTopData = reactive({
       state.playIngSpeed = state.originSpeed;
       handleStartEvaluat();
       // 开发模式，把此处打开
-      // state.modeType = "evaluating"
+      state.modeType = "evaluating"
       // evaluatingData.rendered = true;
       // evaluatingData.soundEffectMode = true;
     } else if (value === "follow") {

src/view/abnormal-pop/icon_btn.svg

@@ -1,48 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="117px" height="36px" viewBox="0 0 117 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>button-normal备份</title>
+<svg width="104px" height="32px" viewBox="0 0 104 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>查看报告备份 5</title>
     <defs>
-        <linearGradient x1="47.3839597%" y1="0%" x2="47.3839597%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#5BECFF" offset="0%"></stop>
-            <stop stop-color="#259CFE" offset="100%"></stop>
+        <linearGradient x1="2.90034287%" y1="45.0839481%" x2="100%" y2="54.5984817%" id="linearGradient-1">
+            <stop stop-color="#31C5FF" offset="0%"></stop>
+            <stop stop-color="#1294FF" offset="100%"></stop>
         </linearGradient>
-        <path d="M0,17 C0,7.61115925 7.60904153,0 16.9971663,0 L100.002834,0 C109.390109,0 117,7.60909491 117,17 L117,17 C117,26.3888407 109.390958,34 100.002834,34 L16.9971663,34 C7.60989058,34 0,26.3909051 0,17 L0,17 Z" id="path-2"></path>
-        <filter x="-0.9%" y="-2.9%" width="101.7%" height="111.8%" filterUnits="objectBoundingBox" id="filter-3">
-            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feColorMatrix values="0 0 0 0 0.140022123   0 0 0 0 0.580018696   0 0 0 0 0.741724871  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
-        </filter>
-        <filter x="-1.7%" y="-5.9%" width="103.4%" height="117.6%" filterUnits="objectBoundingBox" id="filter-4">
-            <feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
-            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
-            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
-            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
-        </filter>
-        <text id="text-5" font-family="STYuanti-SC-Bold, Yuanti SC" font-size="16" font-weight="bold" letter-spacing="0.914285714" fill="#FFFFFF">
-            <tspan x="24.6714286" y="22">重新连接</tspan>
+        <text id="text-2" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" fill="#FFFFFF">
+            <tspan x="24.5" y="21">重新连接</tspan>
         </text>
-        <filter x="-2.7%" y="-4.5%" width="105.4%" height="118.2%" filterUnits="objectBoundingBox" id="filter-6">
+        <filter x="-3.6%" y="-5.0%" width="107.1%" height="120.0%" filterUnits="objectBoundingBox" id="filter-3">
             <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
             <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.161975631   0 0 0 0 0.583690214   0 0 0 0 0.702658833  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.455105392   0 0 0 0 0.751613451  0 0 0 0.788188374 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
         </filter>
     </defs>
-    <g id="权限弹窗、" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="网络异常" transform="translate(-348.000000, -276.000000)">
-            <g id="编组-5备份" transform="translate(274.000000, 45.000000)">
-                <g id="button-normal备份" transform="translate(74.000000, 231.000000)">
-                    <g id="button-normal">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
-                        <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
-                    </g>
-                    <path d="M5.29281147,8.58018897 C7.4390966,13.9921969 10.1571046,16.6982008 13.4468356,16.6982008 C18.2676985,16.6982008 95.1625096,16.6982008 101.90185,16.6982008 C106.394743,16.6982008 109.960365,13.7988005 112.598716,8 C113.992892,13.5751446 114.565408,17.2438095 114.316264,19.0059945 C114.316264,19.0059945 114.316264,19.0059945 114.316264,19.0059945 C113.296432,26.2192179 107.122625,31.58155 99.8376644,31.5815344 L11.3446737,31.5815344 C5.11489123,25.4571796 2,20.6627351 2,17.1982008 C2,13.7336665 3.09760382,10.8609959 5.29281147,8.58018897 Z" id="矩形" fill="#1CACF1" opacity="0.499798729"></path>
-                    <g id="编组-6" opacity="0.85" transform="translate(7.706999, 10.293001) rotate(-5.000000) translate(-7.706999, -10.293001) translate(1.477345, 3.038666)" fill="#FFFFFF">
-                        <ellipse id="椭圆形" opacity="0.882866269" transform="translate(7.522655, 4.961334) rotate(44.000000) translate(-7.522655, -4.961334) " cx="7.52265471" cy="4.96133431" rx="3" ry="4"></ellipse>
-                        <ellipse id="椭圆形备份-3" opacity="0.882866269" transform="translate(3.175326, 11.321004) rotate(44.000000) translate(-3.175326, -11.321004) " cx="3.17532553" cy="11.3210042" rx="2" ry="2.5"></ellipse>
-                    </g>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="18、练习模式-网络连接失败" transform="translate(-354.000000, -216.000000)">
+            <g id="编组-5备份" transform="translate(316.000000, 126.000000)">
+                <g id="查看报告备份-5" transform="translate(38.000000, 90.000000)">
+                    <rect id="button-normal" fill="url(#linearGradient-1)" x="4.5" y="0" width="96" height="32" rx="16"></rect>
                     <g id="重新连接" fill="#FFFFFF" fill-opacity="1">
-                        <use filter="url(#filter-6)" xlink:href="#text-5"></use>
-                        <use xlink:href="#text-5"></use>
+                        <use filter="url(#filter-3)" xlink:href="#text-2"></use>
+                        <use xlink:href="#text-2"></use>
                     </g>
                 </g>
             </g>

src/view/abnormal-pop/icon_close.svg

@@ -1,14 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>切片</title>
-    <g id="权限弹窗、" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="网络异常" transform="translate(-509.000000, -55.000000)" fill="#CCCCCC">
-            <g id="编组-5备份" transform="translate(274.000000, 45.000000)">
-                <g id="通用/选中/橙色备份" transform="translate(231.064971, 6.064971)">
-                    <g id="编组" transform="translate(13.435029, 13.435029) rotate(-315.000000) translate(-13.435029, -13.435029) translate(3.935029, 3.935029)">
-                        <rect id="矩形" x="8.5" y="0" width="2" height="19" rx="1"></rect>
-                        <rect id="矩形" transform="translate(9.500000, 9.500000) rotate(-270.000000) translate(-9.500000, -9.500000) " x="8.5" y="-4.97379915e-14" width="2" height="19" rx="1"></rect>
-                    </g>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="18、练习模式-网络连接失败" transform="translate(-762.000000, -30.000000)" fill="#FFFFFF">
+            <g id="通用/选中/橙色备份" transform="translate(757.857864, 25.857864)">
+                <g id="编组" transform="translate(14.142136, 14.142136) rotate(-315.000000) translate(-14.142136, -14.142136) translate(4.142136, 4.142136)">
+                    <rect id="矩形" x="8.94736842" y="2.37389093e-13" width="2.10526316" height="20" rx="1.05263158"></rect>
+                    <path d="M10,-2.59348099e-13 C10.5813524,-2.59454891e-13 11.0526316,0.471279211 11.0526316,1.05263158 L11.0526316,18.9473684 C11.0526316,19.5287208 10.5813524,20 10,20 C9.41864763,20 8.94736842,19.5287208 8.94736842,18.9473684 L8.94736842,1.05263158 C8.94736842,0.471279211 9.41864763,-2.58797217e-13 10,-2.59348099e-13 Z" id="矩形" transform="translate(10.000000, 10.000000) rotate(-270.000000) translate(-10.000000, -10.000000) "></path>
                 </g>
             </g>
         </g>

src/view/abnormal-pop/icon_success.svg

@@ -1,16 +1,112 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>形状</title>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 17</title>
     <defs>
-        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
-            <stop stop-color="#44C9FF" offset="0%"></stop>
-            <stop stop-color="#259CFE" offset="100%"></stop>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#00AD67" offset="0%"></stop>
+            <stop stop-color="#01B776" offset="41.8587195%"></stop>
+            <stop stop-color="#38DCA1" offset="100%"></stop>
         </linearGradient>
+        <circle id="path-2" cx="9" cy="9" r="9"></circle>
+        <filter x="-1.4%" y="-1.4%" width="102.8%" height="102.8%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="-0.5" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.809030813 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+            <feOffset dx="0" dy="-0.3" in="SourceAlpha" result="shadowOffsetInner2"></feOffset>
+            <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+            <feColorMatrix values="0 0 0 0 0.0941176471   0 0 0 0 0.882352941   0 0 0 0 0.643137255  0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="51.0356343%" y1="19.927734%" x2="51.0356343%" y2="77.257697%" id="linearGradient-5">
+            <stop stop-color="#01CD75" offset="0%"></stop>
+            <stop stop-color="#00D889" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-6" cx="8.1" cy="8.1" r="8.1"></circle>
+        <filter x="-1.5%" y="-4.6%" width="103.1%" height="106.2%" filterUnits="objectBoundingBox" id="filter-8">
+            <feOffset dx="0" dy="-0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feOffset dx="0" dy="-0.3" in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.0431372549   0 0 0 0 0.843137255   0 0 0 0 0.556862745  0 0 0 1 0" type="matrix" in="shadowOffsetOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="22.677906%" y1="27.9588842%" x2="32.3549805%" y2="41.7238512%" id="linearGradient-9">
+            <stop stop-color="#A0F4C6" offset="0%"></stop>
+            <stop stop-color="#3DD390" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-51.4%" y="-128.6%" width="202.9%" height="357.1%" filterUnits="objectBoundingBox" id="filter-10">
+            <feGaussianBlur stdDeviation="0.514285714" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <linearGradient x1="50%" y1="21.847569%" x2="50%" y2="100%" id="linearGradient-11">
+            <stop stop-color="#5AE1B4" offset="0%"></stop>
+            <stop stop-color="#A9EFDA" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="12.5608239%" x2="50%" y2="100%" id="linearGradient-12">
+            <stop stop-color="#2DF1AD" stop-opacity="0.0682637675" offset="0%"></stop>
+            <stop stop-color="#34E8BD" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-128.6%" y="-107.1%" width="357.1%" height="314.3%" filterUnits="objectBoundingBox" id="filter-13">
+            <feGaussianBlur stdDeviation="1.28571429" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <linearGradient x1="22.4201736%" y1="4.76840789e-12%" x2="87.6284479%" y2="89.4580037%" id="linearGradient-14">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.351535184" offset="99.9754152%"></stop>
+        </linearGradient>
+        <linearGradient x1="70.6044425%" y1="3.79627683e-12%" x2="33.2276295%" y2="92.3941404%" id="linearGradient-15">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.406004152" offset="99.9754152%"></stop>
+        </linearGradient>
+        <filter x="-27.0%" y="-33.8%" width="154.0%" height="167.5%" filterUnits="objectBoundingBox" id="filter-16">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.613168025   0 0 0 0 0.367900815  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
     </defs>
-    <g id="权限弹窗、" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="连接成功" transform="translate(-361.000000, -178.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
-            <g id="编组-11" transform="translate(343.000000, 165.000000)">
-                <path d="M28,13 C22.47716,13 18,17.47716 18,23 C18,28.52288 22.47716,33 28,33 C33.52288,33 38,28.52288 38,23 C38,17.47716 33.52284,13 28,13 Z M33.73576,20.40612 L27.26824,26.87368 C27.26824,26.87368 27.26816,26.87376 27.26804,26.87388 C26.96988,27.17212 26.51524,27.21868 26.16816,27.01368 C26.10388,26.97568 26.04328,26.92904 25.98808,26.87388 C25.98804,26.8738 25.98796,26.87376 25.98796,26.87376 L22.26428,23.15008 C21.91084,22.79664 21.91084,22.22352 22.26428,21.87 C22.61772,21.51656 23.19084,21.51656 23.54428,21.87 L26.62812,24.95384 L32.4558,19.12616 C32.80928,18.77272 33.3824,18.77272 33.73584,19.12616 C34.0892,19.4796 34.0892,20.05268 33.73576,20.40612 Z" id="形状"></path>
+    <g id="所有页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="20、练习模式-连接成功" transform="translate(-352.000000, -79.000000)">
+            <g id="tips" transform="translate(340.000000, 70.000000)">
+                <g id="编组-17" transform="translate(12.000000, 9.000000)">
+                    <g id="功能按键/蓝色备份">
+                        <g id="位图备份-10">
+                            <mask id="mask-3" fill="white">
+                                <use xlink:href="#path-2"></use>
+                            </mask>
+                            <g id="蒙版">
+                                <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                            </g>
+                        </g>
+                        <g id="路径-5" transform="translate(0.900000, 0.900000)">
+                            <mask id="mask-7" fill="white">
+                                <use xlink:href="#path-6"></use>
+                            </mask>
+                            <g id="蒙版">
+                                <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-6"></use>
+                                <use fill="url(#linearGradient-5)" fill-rule="evenodd" xlink:href="#path-6"></use>
+                            </g>
+                            <path d="M0.582032602,13.2047439 C0.364694815,8.55443279 2.31855382,5.43808024 6.44360961,3.85568621 C12.6311933,1.48209518 17.6180597,4.68584962 17.6180597,4.68584962 C15.2252223,0.601547819 11.3229933,-0.955605094 5.9113729,0.0143908806 C0.499752461,0.984386855 -1.2766943,5.38117118 0.582032602,13.2047439 Z" fill="url(#linearGradient-9)" mask="url(#mask-7)"></path>
+                            <path d="M6.63842689,2.02297192 C7.46685401,2.02297192 8.13842689,1.75434277 8.13842689,1.42297192 C8.13842689,1.09160107 7.46685401,0.822971921 6.63842689,0.822971921 C5.80999976,0.822971921 5.13842689,1.09160107 5.13842689,1.42297192 C5.13842689,1.75434277 5.80999976,2.02297192 6.63842689,2.02297192 Z" id="椭圆形" fill="#FFFFFF" opacity="0.699999988" filter="url(#filter-10)" mask="url(#mask-7)" transform="translate(6.638427, 1.422972) rotate(-12.000000) translate(-6.638427, -1.422972) "></path>
+                            <path d="M16.1765407,7.47888329 C16.1920858,7.68388482 16.2,7.89101818 16.2,8.1 C16.2,12.5735065 12.5735065,16.2 8.1,16.2 C3.62649353,16.2 0,12.5735065 0,8.1 C0,7.89101818 0.00791421399,7.68388482 0.0234592778,7.47888329 C0.343093095,11.3506468 3.83695067,14.4 8.1,14.4 C12.3154196,14.4 15.7787392,11.4184052 16.1643224,7.60858279 Z" id="形状结合" fill="url(#linearGradient-11)" mask="url(#mask-7)"></path>
+                            <path d="M16.1019621,6.42328314 C16.1664981,6.77412163 16.2,7.13372803 16.2,7.5 C16.2,11.3107648 12.5735065,14.4 8.1,14.4 C3.62649353,14.4 0,11.3107648 0,7.5 C0,7.13372803 0.0335019421,6.77412163 0.0980378656,6.42328314 C0.701112527,9.58304386 4.05415218,12 8.1,12 C12.1261558,12 15.4662312,9.60651427 16.0939847,6.47055428 Z" id="形状结合" fill="url(#linearGradient-12)" mask="url(#mask-7)"></path>
+                            <path d="M3.89545323,14.7389406 C4.72388035,14.7389406 5.39545323,13.9330532 5.39545323,12.9389406 C5.39545323,11.9448281 4.72388035,11.1389406 3.89545323,11.1389406 C3.0670261,11.1389406 2.39545323,11.9448281 2.39545323,12.9389406 C2.39545323,13.9330532 3.0670261,14.7389406 3.89545323,14.7389406 Z" id="椭圆形" fill="#FFF09B" opacity="0.693498884" filter="url(#filter-13)" mask="url(#mask-7)" transform="translate(3.895453, 12.938941) rotate(-62.000000) translate(-3.895453, -12.938941) "></path>
+                            <path d="M1.46414428,12.2758958 C2.10252007,13.4183461 2.98096657,14.3208436 4.09948378,14.9833884 C5.77725959,15.9772054 7.97504317,16.0253339 7.97504317,16.0253339 C6.63663223,15.8225046 5.40097182,15.3870725 4.26806192,14.7190376 C3.13515203,14.0510027 2.20051282,13.2366221 1.46414428,12.2758958 Z" id="路径-41" fill="#FDFEFC" mask="url(#mask-7)"></path>
+                        </g>
+                        <path d="M12.395268,2.49338426 C12.827241,2.37896207 13.1041845,2.32175097 13.2260986,2.32175097 C13.4089698,2.32175097 14.4501813,3.17242011 15.1400701,3.96565243 C15.5950554,4.48879328 16.0821181,5.34305251 16.6012582,6.52843012 C16.6124997,6.55090354 16.6087873,6.57775004 16.5925926,6.59694833 L16.0834296,7.18962146 L16.0834296,7.18962146 C15.6101302,6.01632982 15.0994139,5.08983934 14.5512809,4.41015003 C14.0031478,3.73046071 13.2844769,3.09153879 12.395268,2.49338426 Z" id="路径-39" fill="url(#linearGradient-14)" opacity="0.800000012"></path>
+                        <path d="M5.20475785,2.26805654 C5.01136352,2.68119984 4.94853738,3.26332093 5.01627944,4.01441981 C4.0241796,4.67959296 3.25425177,5.82324929 2.70649593,7.44538881 C2.19377579,7.19371793 1.88067921,6.85536367 1.76720617,6.43032603 C2.0412279,5.43303633 2.44504907,4.59275748 2.97866967,3.90948949 C3.51229028,3.22622149 4.25431967,2.67907718 5.20475785,2.26805654 Z" id="路径-40" fill="url(#linearGradient-15)" opacity="0.800000012"></path>
+                    </g>
+                    <g id="Path-2" filter="url(#filter-16)" transform="translate(4.000000, 5.500000)" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="0.4">
+                        <path d="M9.96121623,0.319521975 L4.56156694,7.66601148 C4.23594706,8.11132951 3.56163188,8.11132951 3.23601201,7.66601148 L0.0387837725,3.31849988 C-0.0586457968,3.18515607 0.0387837725,2.99897791 0.205439615,2.99897791 L1.40792562,2.99897791 C1.66944709,2.99897791 1.91814889,3.12225804 2.07198505,3.33359541 L3.8975075,5.81932542 L7.92801495,0.334617501 C8.08185111,0.125796053 8.32798897,0 8.59207438,0 L9.79456039,0 C9.96121623,0 10.0586458,0.186178159 9.96121623,0.319521975 Z" id="Path"></path>
+                    </g>
+                </g>
             </g>
         </g>
     </g>

src/view/abnormal-pop/index.module.less

@@ -2,52 +2,51 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
     color: #fff;
-    background-color: #fff;
-    border-radius: 20px;
-    width: 264px;
     position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
     .close {
         position: absolute;
-        width: 19px;
-        height: 19px;
-        right: 10px;
-        top: 10px;
+        width: 20px;
+        height: 20px;
+        right: 30px;
+        top: 30px;
     }
     .bg {
         width: 264px;
     }
     .content {
         .title {
-            margin: 20px 0 10px;
             font-size: 16px;
             font-family: PingFangSC, PingFang SC;
             font-weight: 500;
-            color: #1A1A1A;
+            color: #fff;
             text-align: center;
         }
         .desc {
             font-size: 14px;
             font-family: PingFangSC, PingFang SC;
             font-weight: 400;
-            color: #808080;     
-            margin-bottom: 16px;     
+            color: rgba(255, 255, 255, 0.8);     
+            margin: 20px 0 24px;
             text-align: center;  
         }
     }
     .btn {
-        width: 117px;
-        height: 36px;
-        margin-bottom: 17px;
+        width: 104px;
+        height: 32px;
     }
 }
 
 .loadColumn {
     display: flex;
     align-items: center;
-    background: #fff;
-    border-radius: 10px;
-    padding: 18px;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 8px;
+    padding: 8px 12px;
     position: relative;
     .close {
         position: absolute;
@@ -61,14 +60,36 @@
         height: 17px;
     }
     .successIcon {
-        width: 20px;
-        height: 20px;
+        width: 18px;
+        height: 18px;
     }
     p {
-        font-size: 16px;
+        font-size: 14px;
         font-family: PingFangSC, PingFang SC;
-        font-weight: 500;
-        color: #1A1A1A;
-        margin-left: 10px;
+        color: #fff;
+        margin-left: 6px;
+    }
+}
+
+.loadingPop {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .loadingIcon {
+        width: 118px;
+    }
+    .loadingTip {
+        font-size: 16px;
+        color: #fff;
+        margin: 18px 0;
+    }
+    .loadingClose {
+        padding: 0 20px;
+        font-size: 14px;
+        color: #fff;
+        line-height: 30px;
+        border: 1px solid rgba(255, 255, 255, 0.7);
+        border-radius: 16px;
     }
 }

src/view/abnormal-pop/index.tsx

@@ -5,6 +5,7 @@ import { popImgs } from '/src/view/evaluating'
 import { evaluatingData } from "/src/view/evaluating";
 import { Vue3Lottie } from "vue3-lottie";
 import loading from "./loading.json";
+import animBg from "../audio-list/img/refresh_anim.json";
 
 export default defineComponent({
 	name: "abnormal-pop",
@@ -17,9 +18,8 @@ export default defineComponent({
 					evaluatingData.socketErrorStatus === 0 && 
 					<div class={styles.fraction}>
 						<img class={styles.close} src={popImgs.icon_close} onClick={() => emit("close")} />
-						<img class={styles.bg} src={popImgs.icon_bg} />
 						<div class={styles.content}>
-							<div class={styles.title}>您的网络连接异常</div>
+							<div class={styles.title}>网络连接失败</div>
 							<div class={styles.desc}>请确保网络正常后重新连接</div>
 						</div>
 						<div>
@@ -29,17 +29,22 @@ export default defineComponent({
 				}
 				{
 					evaluatingData.socketErrorStatus === 1 && 
-					<div class={styles.loadColumn}>
-						<Vue3Lottie class={styles.loadIcon} animationData={loading} loop={true}></Vue3Lottie>
-						<img class={styles.close} src={popImgs.icon_close} onClick={() => emit("close")} />
-						<p>正在连接服务器，请稍后…</p>
+					// <div class={styles.loadColumn}>
+					// 	<Vue3Lottie class={styles.loadIcon} animationData={loading} loop={true}></Vue3Lottie>
+					// 	<img class={styles.close} src={popImgs.icon_close} onClick={() => emit("close")} />
+					// 	<p>正在连接服务器，请稍后…</p>
+					// </div>
+					<div class={styles.loadingPop}>
+						<Vue3Lottie animationData={animBg} class={styles.loadingIcon}></Vue3Lottie>
+						<div class={styles.loadingTip}>正在连接中，请稍等…</div>
+						<div class={styles.loadingClose} onClick={() => emit("close")}>取消连接</div>
 					</div>
 				}
 				{
 					evaluatingData.socketErrorStatus === 2 && 
 					<div class={styles.loadColumn}>
 						<img class={styles.successIcon} src={popImgs.icon_success} />
-						<p>连接成功</p>
+						<p>网络连接成功</p>
 					</div>
 				}
 			</>