perf: 修改呼叫器皮肤模板

base-manager-ui/admin/src/pages/basicset/surface/calloutskin/CallOutSkin.vue

@@ -31,32 +31,29 @@
         </div>
       </div>
       <!-- 主体 -->
-      <div class="main flex">
+      <div class="main ">
         <div
-          class="left flex flexc aic jcc"
+          class="info flex  aic jcc"
           :style="{
-            background: filterItem('10', 0),
+            background: filterItem('10', 0)
+              ? filterItem('10', 0)
+              : `url(${require('@/assets/img/info_bg.png')})`,
           }"
         >
           <img src="../../../../assets/img/peopo.jpeg" />
-          <p>姓名：XXX</p>
-          <p>部门：审批部</p>
-          <p>编号：001</p>
-          <div
-            class="left-btn"
-            :style="{
-              backgroundImage: `linear-gradient(${filterItem(
-                '8',
-                0
-              )}, ${filterItem('7', 0)})`,
-            }"
-          >
+          <div class="flex1">
+            <p>
+              <span class="mr25">XXX</span>
+              <span>001</span>
+            </p>
+            <p>审批部</p>
+            <div class="left-btn flex aic jcc">
               回归
             </div>
           </div>
-        <div class="right flex1 flex flexwrap jcb acb">
+        </div>
         <div
-            class="right-item"
+          class="item"
           v-for="(v, i) in filterNav('4')"
           :key="v.id"
           :class="{ border: !filterItem('4', i) }"
@@ -65,7 +62,6 @@
           }"
         ></div>
       </div>
-      </div>
       <!-- 尾部 -->
       <div class="footer flex jcc aic">
         <div class="footer-item">
@@ -209,7 +205,7 @@ export default {
     .header-title {
       h1 {
         font-size: 30px;
-        color: #0866e8;
+        color: #fff;
         margin: 0px;
         margin-left: 10px;
         font-weight: 600;
@@ -223,39 +219,46 @@ export default {
   .main {
     height: 350px;
     margin-top: 20px;
-    .left {
+    padding: 0px 30px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 10px;
+    .border {
+      border: 1px dashed #ececec;
+    }
+    .info {
+      grid-column: 1 / span 2;
+      width: 100%;
       height: 100%;
-      width: 280px;
-      margin-right: 20px;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: 10px;
-      font-weight: 600;
+      padding: 10px;
+      padding-right: 120px;
+      background-repeat: no-repeat !important;
+      background-position: center !important;
+      background-size: 100% 100% !important;
+      border-radius: 4px;
       img {
         width: 100px;
+        margin-right: 20px;
       }
       .left-btn {
-        width: 150px;
-        height: 40px;
-        text-align: center;
-        line-height: 40px;
-        color: #fff;
-        background-image: linear-gradient(#bbe0ee, #adc0f1);
+        width: 100%;
+        height: 50px;
+        background: linear-gradient(0deg, #2a7cf6, #32baf0);
         border-radius: 6px;
+        font-size: 22px;
+        font-weight: 500;
+        color: #ffffff;
       }
     }
-    .right {
+    .item {
+      width: 100%;
       height: 100%;
-      .right-item {
-        width: 49%;
-        height: 100px;
-        border-radius: 6px;
+      border-radius: 4px;
       background-repeat: no-repeat !important;
       background-position: center !important;
       background-size: 100% 100% !important;
-      }
-      .border {
-        border: 1px dashed #ececec;
-      }
+      color: #ffffff;
     }
   }
   .footer {