bituni h5适配

assets/css/bituni/index.scss

@@ -1,23 +1,58 @@
+.bituni-mobile{
+  min-width: auto;
+  width: auto;
+  .bituni-header-bg{
+    background-size: auto 100%;
+    bottom: 0 ;
+    background-position: center center;
+    height: auto;
+  }
+
+  .page-main{
+    width:auto;
+  }
+  .page-bituni-header{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 80px;
+  }
+  .page-bituni-intro{
+    flex-direction: column;
+  }
+  .page-bituni-header{
+    height: auto;
+    position: relative;
+  }
+  .page-bituni-item{
+    width: auto;
+    margin-left: 30px;
+    margin-right: 30px;
+    margin-bottom: 20px;
+  }
+  .page-bituni-h1{
+    text-align: center;
+  }
+}
+
+
 .page-container2 {
   // max-width: 1440px;
   width:100%;
   margin-left: auto;
   margin-right: auto;
   position: relative;
-  &::before{
-    position: absolute;
-    z-index: -1;
-    content: "";
-    height:597px;
-    top: 0;
-    left:0;
-    right: 0;
-    background:url("~@/assets/img/bituni/bituni-bg.jpg") no-repeat center top;
-    background-size: 100% auto;
-  }
+
 }
-body {
-    // background:#fff
+.bituni-header-bg{
+  position: absolute;
+  z-index: -1;
+  height:597px;
+  top: 0;
+  left:0;
+  right: 0;
+  background:url("~@/assets/img/bituni/bituni-bg.jpg") no-repeat center top;
+  background-size: 100% auto;
 }
 .page-main {
   width: 1100px;

layouts/default.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="container" id="markIsAppWebview" :data-app="deviceType.app">
+  <div class="container" :class="{
+    'ma-container-mobile':!deviceType.pc
+  }" id="markIsAppWebview" :data-app="deviceType.app">
     <proginn-header v-if="deviceType.pc"/>
     <wx-header v-else-if="!deviceType.app && (deviceType.android || deviceType.ios) && !isWeixinApp"></wx-header>
     <nuxt class="main"/>
@@ -83,6 +85,9 @@
     align-items: center;
     padding-top: 65px;
   }
+  .ma-container-mobile{
+    padding-top:0
+  }
 
   .main {
     min-width: 1000px;

layouts/w-1440-default.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="container" id="markIsAppWebview" :data-app="deviceType.app">
+  <div class="container" :class="{
+    'ma-container-mobile':!deviceType.pc
+  }" id="markIsAppWebview" :data-app="deviceType.app">
     <proginn-header v-if="deviceType.pc"/>
     <wx-header v-else-if="!deviceType.app && (deviceType.android || deviceType.ios) && !isWeixinApp"></wx-header>
     <nuxt class="ma-main" />

pages/frontend/bituni/index.vue

@@ -4,9 +4,12 @@
 
 </div> -->
 
-<div class="page-container2" v-if="!mobile">
+<div class="page-container2" :class="{'bituni-mobile':mobile}">
+
     <div class="page-main">
+
         <header class="page-bituni-header">
+          <div class="bituni-header-bg"></div>
             <h1 class="page-bituni-h1">Bituni-成就你的技术创新</h1>
             <a class="page-bituni-apply" href="https://wenjuan.feishu.cn/m/cfm?t=s9QUYzg7geBi-4k35" target="view_window">
                 立即投递
@@ -155,6 +158,11 @@ export default {
             isShowModal:false
         }
     },
+    async asyncData({ app }) {
+      return {
+        mobile: app.$deviceType.isMobile()
+      }
+    },
     head() {
         const {
                 title = "bituni成就你的技术创新-程序员客栈 ",