perf: 修改评价器皮肤模板

base-manager-ui/admin/src/pages/basicset/surface/appraiseskin/AppraiseSkin.vue

@@ -34,7 +34,7 @@
             background: filterItem('10', 0),
           }"
         >
-          <div class="left-info flex aic">
+          <div class="left-info flex flexc aic jcc">
             <img src="../../../../assets/img/peopo.jpeg" />
             <div>
               <p>姓名：XXX</p>
@@ -43,58 +43,22 @@
               <p>电话：13666666666</p>
             </div>
           </div>
-          <div class="slogan">个人SLOGAN</div>
+          <div class="slogan flex1 flex aic jcc">SLOGAN</div>
         </div>
-        <div class="right flex1">
-          <img src="../../../../assets/img/video_img.png" />
+        <div class="center flex1">
+          <img src="../../../../assets/img/pjq.png" />
+        </div>
+        <div class="right flex flexc jcb aic">
+          <div
+            class="right-btn flex flexc jcc"
+            v-for="(v, i) in filterNav('4')"
+            :key="v.id"
+            :class="{ border: !filterItem('4', i) }"
+            :style="{
+              background: filterItem('4', i),
+            }"
+          ></div>
         </div>
-      </div>
-      <!-- 尾部 -->
-      <div class="footer flex jcb aic">
-        <div
-          class="footer-btn flex flexc jcc"
-          v-for="(v, i) in filterNav('4')"
-          :key="v.id"
-          :class="{ border: !filterItem('4', i) }"
-          :style="{
-            background: filterItem('4', i),
-          }"
-        ></div>
-        <!-- <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 1) }"
-          :style="{
-            background: filterItem('4', 1),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 2) }"
-          :style="{
-            background: filterItem('4', 2),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 3) }"
-          :style="{
-            background: filterItem('4', 3),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 4) }"
-          :style="{
-            background: filterItem('4', 4),
-          }"
-        ></div>
-        <div
-          class="footer-btn flex flexc jcc"
-          :class="{ border: !filterItem('4', 5) }"
-          :style="{
-            background: filterItem('4', 5),
-          }"
-        ></div> -->
       </div>
     </div>
     <!-- 空数据显示 -->
@@ -231,38 +195,42 @@ export default {
     }
   }
   .main {
-    height: 320px;
+    height: 420px;
     width: 100%;
     margin-top: 20px;
     .left {
       height: 100%;
-      width: 30%;
+      width: 25%;
       padding: 10px;
-      margin-right: 20px;
-      background: rgba(255, 255, 255, 0.8);
+      margin-right: 10px;
+
+      background: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.7),
+        rgba(255, 255, 255, 0)
+      );
       border-radius: 4px;
       font-weight: 600;
       background-repeat: no-repeat;
       background-size: 100% 100%;
       .left-info {
         width: 100%;
+        padding: 10px;
       }
       img {
-        width: 120px;
-        height: 160px;
+        width: 100px;
         margin-right: 10px;
       }
       .slogan {
         width: 100%;
-        height: 50px;
-        text-align: center;
-        line-height: 50px;
         border-radius: 4px;
         border: 1px dashed #ccc;
+        color: #fff;
       }
     }
-    .right {
+    .center {
       height: 100%;
+      margin-right: 10px;
       img {
         width: 100%;
         height: 100%;
@@ -270,20 +238,18 @@ export default {
       }
     }
   }
-  .footer {
-    margin-top: 20px;
-    width: 100%;
-    .footer-btn {
+  .right {
+    width: 120px;
+    height: 100%;
+    gap: 10px;
+    .right-btn {
       flex: 1;
-      margin-right: 10px;
-      height: 120px;
+      width: 100%;
       padding: 10px;
       border-radius: 4px;
       background-size: 100% 100% !important;
     }
-    & .footer-btn:last-child {
-      margin-right: 0px;
-    }
+
     .border {
       border: 1px dashed #ececec;
     }