iasf页脚背景

src/layouts/footer/index.vue

@@ -2,67 +2,71 @@
   <div>
     <div v-if="showDefaultPath.includes($route.path)"
          :class="['footer', {iasf: isIasf}]">
-      <ul v-if="isIasf"
-          class="entry">
-        <li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
-            @click="openLink(modules[14].form)">
-          <img class="icon"
-               :src="modules[14].form.pic"
-               alt="">
-          <p class="text">{{ modules[14].form.title }}</p>
-        </li>
-        <li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}"
-            @click="openLink(modules[15].form)">
-          <img class="icon"
-               :src="modules[15].form.pic"
-               alt="">
-          <p class="text">{{ modules[15].form.title }}</p>
-        </li>
-        <li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}"
-            @click="openLink(modules[16].form)">
-          <img class="icon"
-               :src="modules[16].form.pic"
-               alt="">
-          <p class="text">{{ modules[16].form.title }}</p>
-        </li>
-        <li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
-            @click="openLink(modules[17].form)">
-          <img class="icon"
-               :src="modules[17].form.pic"
-               alt="">
-          <p class="text">{{ modules[17].form.title }}</p>
-        </li>
-        <li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
-            @click="openLink(modules[18].form)">
-          <img class="icon"
-               :src="modules[18].form.pic"
-               alt="">
-          <p class="text">{{ modules[18].form.title }}</p>
-        </li>
-      </ul>
-
-      <div class="info">
-        <div class="leftBox">
-          <img class="m-b-20"
-               src="@/assets/images/iasf.png"
-               alt="">
-          <p class="meta">Copyright ©2002- 2021</p>
-          <p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
-          <p class="meta">Tel：400-0010-998</p>
-        </div>
-        <div v-for="(item, i) in columns"
-             :key="i"
-             class="column">
-          <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
-          <ul v-if="item.children.length"
-              class="children">
-            <li v-for="(column, j) in item.children"
-                :key="j"
-                @click="columnTo(column)">{{ column.columnName }}</li>
-          </ul>
+      <template v-if="isIasf">
+        <div class="mask"></div>
+        <ul v-if="isIasf"
+            class="entry">
+          <li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
+              @click="openLink(modules[14].form)">
+            <img class="icon"
+                 :src="modules[14].form.pic"
+                 alt="">
+            <p class="text">{{ modules[14].form.title }}</p>
+          </li>
+          <li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}"
+              @click="openLink(modules[15].form)">
+            <img class="icon"
+                 :src="modules[15].form.pic"
+                 alt="">
+            <p class="text">{{ modules[15].form.title }}</p>
+          </li>
+          <li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}"
+              @click="openLink(modules[16].form)">
+            <img class="icon"
+                 :src="modules[16].form.pic"
+                 alt="">
+            <p class="text">{{ modules[16].form.title }}</p>
+          </li>
+          <li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
+              @click="openLink(modules[17].form)">
+            <img class="icon"
+                 :src="modules[17].form.pic"
+                 alt="">
+            <p class="text">{{ modules[17].form.title }}</p>
+          </li>
+          <li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
+              @click="openLink(modules[18].form)">
+            <img class="icon"
+                 :src="modules[18].form.pic"
+                 alt="">
+            <p class="text">{{ modules[18].form.title }}</p>
+          </li>
+        </ul>
+      </template>
+      <div class="relative">
+        <div class="info">
+          <div class="leftBox">
+            <img class="m-b-20"
+                 src="@/assets/images/iasf.png"
+                 alt="">
+            <p class="meta">Copyright ©2002- 2021</p>
+            <p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
+            <p class="meta">Tel：400-0010-998</p>
+          </div>
+          <div v-for="(item, i) in columns"
+               :key="i"
+               class="column">
+            <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
+            <ul v-if="item.children.length"
+                class="children">
+              <li v-for="(column, j) in item.children"
+                  :key="j"
+                  @click="columnTo(column)">{{ column.columnName }}</li>
+            </ul>
+          </div>
         </div>
+        <a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a>
       </div>
-      <a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a>
     </div>
 
     <div v-if="showContactPath.includes($route.path)"
@@ -247,13 +251,11 @@ export default {
     margin-right: 100px;
 }
 .footer {
+    position: relative;
     padding: 64px 20% 25px;
     color: #fff;
     background-color: #091733;
     overflow: hidden;
-    &.iasf {
-        padding-top: 50px;
-    }
     .info {
         display: flex;
     }
@@ -283,8 +285,27 @@ export default {
         font-size: 14px;
         color: #6d7384;
     }
+    &.iasf {
+        padding-top: 50px;
+        background: url(http://10.10.11.7/images/iasf/footer.jpg) 0 -400px/100% auto no-repeat;
+        background-color: #091733;
+        .children {
+            li {
+                color: #fff;
+            }
+        }
+        .mask {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+    }
 }
 .entry {
+    position: relative;
     display: flex;
     justify-content: space-between;
     margin-bottom: 100px;