优化

src/router/routerList.js

@@ -148,7 +148,7 @@ export default [
       pageTitle: "promotion",
       chineseTitle: "申请免费样品",
       navActive: "promotion",
-      fullScreen: false
+      fullScreen: true
     }
   },
   {
@@ -159,7 +159,7 @@ export default [
     meta: {
       pageTitle: 'Full range of bispecific antibody standard free of charge',
       chineseTitle: '全系列双抗参比品免费拿',
-      navActive: 'DoubleAntibodyStandard' // 双抗
+      navActive: 'DoubleAntibodyStandard', // 双抗
     }
   }
 ]

src/view/promotion/index.vue

@@ -1,69 +1,75 @@
 <template>
-  <div class="promotion-list">
-    <div class="promotion-list-item" v-for="(item, idx) in list" :key="idx">
-      <div class="promotion-img">
-        <img :src="item.imgName" />
-      </div>
-      <div class="promotion-content">
-        <div class="promotion-title">{{ item.title }}</div>
-        <div class="promotion-desc">{{ item.desc }}</div>
-        <div class="promotion-time" v-if="item.time.length > 0">
-          {{ $t("Promotion.time") }}：{{ item.time.join(" ~ ") }}
+  <div class="box">
+    <banner></banner>
+    <div class="promotion-list">
+      <div class="promotion-list-item" v-for="(item, idx) in list" :key="idx">
+        <div class="promotion-img">
+          <img :src="item.imgName" />
+        </div>
+        <div class="promotion-content">
+          <div class="promotion-title">{{ item.title }}</div>
+          <div class="promotion-desc">{{ item.desc }}</div>
+          <div class="promotion-time" v-if="item.time.length > 0">
+            {{ $t("Promotion.time") }}：{{ item.time.join(" ~ ") }}
+          </div>
+          <div class="footer">
+            <template v-if="isClosed(item)">
+              <div v-if="isClosed(item)" class="close-btn">
+                Ended
+              </div>
+              <div class="view-button disabled">
+                View All
+              </div>
+            </template>
+            <template v-else-if="isClosedActive(item)">
+              <div class="close-btn">
+                Not started
+              </div>
+            </template>
+            <div v-else class="view-button" @click="openPage(item.pageRoute)">
+              View All
+            </div>
+          </div>
         </div>
-        <div class="footer">
+        <div class="activity-status">
           <template v-if="isClosed(item)">
-            <div v-if="isClosed(item)" class="close-btn">
+            <img
+              class="activity-status-img"
+              src="@/assets/img/promotion/done.png"
+            />
+            <div class="activity-status-text">
               Ended
             </div>
-            <div class="view-button disabled">
-              View All
-            </div>
           </template>
           <template v-else-if="isClosedActive(item)">
-            <div class="close-btn">
+            <img
+              class="activity-status-img"
+              src="@/assets/img/promotion/done.png"
+            />
+            <div class="activity-status-text">
               Not started
             </div>
           </template>
-          <div v-else class="view-button" @click="openPage(item.pageRoute)">
-            View All
-          </div>
+          <template v-else>
+            <img
+              class="activity-status-img"
+              src="@/assets/img/promotion/doing.png"
+            />
+            <div class="activity-status-text">
+              In progress
+            </div>
+          </template>
         </div>
       </div>
-      <div class="activity-status">
-        <template v-if="isClosed(item)">
-          <img
-            class="activity-status-img"
-            src="@/assets/img/promotion/done.png"
-          />
-          <div class="activity-status-text">
-            Ended
-          </div>
-        </template>
-        <template v-else-if="isClosedActive(item)">
-          <img
-            class="activity-status-img"
-            src="@/assets/img/promotion/done.png"
-          />
-          <div class="activity-status-text">
-            Not started
-          </div>
-        </template>
-        <template v-else>
-          <img
-            class="activity-status-img"
-            src="@/assets/img/promotion/doing.png"
-          />
-          <div class="activity-status-text">
-            In progress
-          </div>
-        </template>
-      </div>
     </div>
   </div>
 </template>
 <script>
+import banner from "@/components/banner";
 export default {
-  components: {},
+  components: {
+    banner
+  },
   name: "Promotion",
   data() {
     return {
@@ -101,6 +107,8 @@ export default {
 <style lang="scss" scoped>
 @media screen and (min-width: 751px) and (max-width: 9999px) {
   .promotion-list {
+    width: 1200px;
+    margin: 40px auto;
     .promotion-list-item {
       display: flex;
       border-radius: 1px;