PC门户布局修改

src/views/pc/index.vue

@@ -32,14 +32,13 @@
       </div>
       <div class="pc-info-download __hover">下载</div>
     </div>
-    <div class="pc-href">
-      <div class="pc-href-before-block"/>
+    <div class="pc-href" :style="`grid-template-columns: ${HrefMapper.map(v => v.span + 'fr').join(' ')};`">
       <template v-for="(item, index) in HrefMapper">
         <div class="pc-href-block">
           <div class="pc-href-block-head">
             <img src="../common/img/bottom-label.png"/>{{item.label}}<img src="../common/img/bottom-icon.png"/>
           </div>
-          <div class="pc-href-block-content">
+          <div class="pc-href-block-content" :style="`grid-template-columns: repeat(${item.span}, 1fr);`">
             <template v-for="(h, hI) in item.children">
               <div class="phbc-item __hover" @click="toHref(h)">
                 <img src="../common/img/bottom-item-label.png"/><p>{{h.label}}</p>
@@ -48,7 +47,6 @@
           </div>
         </div>
       </template>
-      <div class="pc-href-after-block"/>
     </div>
     <div v-show="showInfo" class="info-dialog animate__animated animate__fadeInRight" ref="ref_infoDialog">
       <img :src="infoCurrent"/>
@@ -259,48 +257,25 @@ export default defineComponent({
         margin: 0 22px 0 10px;
       }
     }
-    $pcHrefRight: 100px;
-    $pcHrefItemWidth: 264px;
     .pc-href {
+      width: 100%;
       //opacity: 0.8;
       z-index: 2;
       position: absolute;
       bottom: 0;
-      right: $pcHrefRight;
+      right: 0;
       box-sizing: border-box;
       display: grid;
-      grid-template-columns: repeat(5, $pcHrefItemWidth);
       column-gap: 2px;
-      $skewXDeg: -30deg;
-      transform: skewX($skewXDeg);
       background-color: #234382;
-      .pc-href-before-block {
-        position: absolute;
-        background-color: rgba(57, 85, 135, 0.8);
-        width: 80px;
-        height: 255px;
-        left: -80px;
-        bottom: 0;
-      }
       .pc-href-block {
         width: 100%;
-        height: 332px;
+        height: 277px;
         $pcHrefBlockHeadHeight: 45px;
         .pc-href-block-head {
           position: relative;
-          transform: skewX(-$skewXDeg);
           white-space: nowrap;
-          &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: #0C3165;
-            z-index: -1;
-            transform: skewX($skewXDeg);
-          }
+          background: #0C3165;
           height: $pcHrefBlockHeadHeight;
           font-size: 24px;
           font-weight: 400;
@@ -313,7 +288,7 @@ export default defineComponent({
             }
             &:last-child {
               position: absolute;
-              right: -100px;
+              right: -57px;
             }
           }
         }
@@ -321,25 +296,16 @@ export default defineComponent({
           height: calc(100% - #{$pcHrefBlockHeadHeight});
           box-sizing: border-box;
           background-color: #031336;
-          padding: 10px 16px;
+          padding: 10px;
           display: grid;
-          grid-template-columns: repeat(1, 100%);
-          grid-template-rows: repeat(5, calc((100% - (10px * 4)) / 5));
-          row-gap: 10px;
+          grid-template-rows: repeat(4, 48px);
+          gap: 8px;
+          &:first-child {
+            grid-template-columns: repeat(2, 1fr);
+          }
           .phbc-item {
             position: relative;
-            transform: skewX(-$skewXDeg);
-            &:after {
-              content: '';
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              background: #071F47;
-              z-index: -1;
-              transform: skewX($skewXDeg);
-            }
+            background-color: #071F47;
             font-size: 20px;
             font-weight: normal;
             color: #FFFFFF;
@@ -356,16 +322,6 @@ export default defineComponent({
           }
         }
       }
-      .pc-href-after-block {
-        z-index: -1;
-        transform: skewX(-$skewXDeg);
-        position: absolute;
-        background-color: rgba(3, 19, 54, 0.7);
-        width: $pcHrefItemWidth;
-        height: 100%;
-        right: -$pcHrefRight;
-        bottom: 0;
-      }
     }
     $infoItemActiveWidth: 1425px;
     .info-dialog {