修改页面

src/components/navs/hor-big-tow.vue

@@ -2,7 +2,7 @@
   <q-header
     reveal
     elevated
-    :style="{background:'transparent',color:'#FFF'}"
+    :style="{background:baseData.nav.bg,color:'#FFF'}"
     height-hint="98"
   >
     <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">

src/components/swiper/style8.vue

+<style>
+  .banner-style8 .Mymobile-only{
+    display: none;
+  }
+  @media only screen and (max-width: 820px){
+    .banner-style8 .Mydesktop-only {
+      display: none;
+    }
+    .banner-style8 .Mymobile-only{
+      display: block;
+    }
+  }
+  .banner-style8 .MysearchDiv{
+    position: absolute;
+    width:100%;
+    top:60%;
+  }
+</style>
 <template>
   <div class="banner-style8">
     <q-carousel
@@ -24,7 +42,7 @@
         <div class="title">搜尋輪播淡出 - 大</div>
         <div class="sub-title">將您的夢變成一段真實的體驗，我們掌握今年冬季最受追捧的度假勝地，完成夢想就找我們</div>
       </div>
-      <div class="desktop-only" style="width: 760px;">
+            <div class="Mydesktop-only" style="width: 760px;margin:auto;">
         <div class="row">
           <div class="col-5" style="width:calc(41.6667% - 22px)">
             <q-input
@@ -228,7 +246,10 @@
           </q-scroll-area>
         </div>
       </div>
-      <div class="mobile-only" style="width:100vw;">
+
+    </div>
+    <div class="MysearchDiv">
+      <div class="Mymobile-only" style="width:100%;">
         <q-input
           filled
           v-model="searchKey"
@@ -242,6 +263,7 @@
           </template>
         </q-input>
       </div>
+
     </div>
     <popup v-model="showPopup" mode="top" :safeAreaInsetBottom="true" border-radius="5">
       <div class="chosen-box">

src/layouts/HomeLayout.vue

 <template>
   <q-layout view="hHh lpr fFf">
     <hor-big-one v-if="headType==1" :base-data="baseinfo" ref="webhead"></hor-big-one>
-    <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead" ></hor-big-two>
+    <hor-big-two v-if="headType==2" :base-data="baseinfo" ref="webhead"></hor-big-two>
     <q-page-container>
       <router-view />
     </q-page-container>
 
     <q-footer elevated class="bg-grey-8 text-white" style="position: unset;">
-      <!-- <q-toolbar>
-        <q-toolbar-title>
-          <q-avatar>
-            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg" />
-          </q-avatar>Title
-        </q-toolbar-title>
-      </q-toolbar> -->
-      <horBtm></horBtm>
+      <horBtm :dataList="dataList"></horBtm>
     </q-footer>
   </q-layout>
 </template>
 
 <script>
-import horBigOne from "../components/navs/hor-big-one";
-import horBigTwo from "../components/navs/hor-big-tow";
-import horBtm from "../components/navs/hor-btm";
-export default {
-  components: {
-    horBigOne,
-    horBigTwo,
-    horBtm
-  },
-  data() {
-    return {
-      leftDrawerOpen: false,
-      baseinfo: {
-        logo:
-          "https://de0s2vtm6rzpn.cloudfront.net/white_label/575/logo_1583290210_rsz.png",
-        name: "玩家旅遊",
-        nav: {
-          bg: "rgba(255,255,255,.95)",
-          color: "#222",
-          navs: [
-            {
-              title: "極上•深之旅",
-              url: "http://17658.byethost18.com/",
-              icon: ""
-            },
-            {
-              title: "519住宿趣",
-              url: "http://winterfavor.byethost7.com/",
-              icon: ""
-            },
-            {
-              title: "玩家旅遊論壇",
-              url: "https://www.facebook.com/papago17658/",
-              icon: ""
-            },
-            {
-              title: "全球租車",
-              url: "https://yvonne.tripsaas.com/",
-              icon: ""
-            },
-            {
-              title: "歐洲團體行程",
-              url:
-                "https://yvonne.tripsaas.com/search/search_result?keyword=%E5%85%A8%E5%8D%80%20%E6%AD%90&type=area&from=2019-07-10&to=2020-01-06",
-              icon: ""
-            },
-            {
-              title: "茸茸毛寵物用品商城",
-              url: "https://petsiloveyou.123web.tw/",
-              icon: ""
-            }
-          ]
+  import horBigOne from "../components/navs/hor-big-one";
+  import horBigTwo from "../components/navs/hor-big-tow";
+  import horBtm from "../components/navs/hor-btm";
+  export default {
+    components: {
+      horBigOne,
+      horBigTwo,
+      horBtm
+    },
+    data() {
+      return {
+        leftDrawerOpen: false,
+        baseinfo: {
+          logo: "",
+          name: "",
+          nav: {
+            bg: "",
+            color: "#222",
+            navs: []
+          },
+          desc: "這是一家非常牛逼的旅遊網站"
         },
-        desc: "這是一家非常牛逼的旅遊網站"
+        headType: 0,
+        dataList:{}
+      };
+    },
+    created() {
+      this.$root.$on('change-head-style', param => {
+        this.changeHeadHandler(param);
+        this.getData();
+      })
+    },
+    methods: {
+      changeHeadHandler(t) {
+        this.headType = t;
       },
-      headType:0
-    };
-  },
-  created() {
-    this.$root.$on('change-head-style', param=>{
-      this.changeHeadHandler(param)
-    })
-  },
-  methods: {
-    changeHeadHandler(t) {
-      this.headType = t;
-    }
-  },
-};
+      getData() {
+        this.apipost(
+          "ws_get_GetHomePage", {
+            RB_Group_Id: 2
+          },
+          res => {
+            console.log(res);
+            if (res.data.resultCode == 1) {
+              this.dataList=res.data.data;
+              if(this.dataList){
+                this.baseinfo.logo=this.dataList.Config.Logo;
+                this.baseinfo.name=this.dataList.Config.Name;
+                this.baseinfo.nav.navs=this.dataList.HeaderList;
+                this.baseinfo.nav.bg=this.dataList.Config.BgColor;
+              }
+            } else {
+
+            }
+          },
+          err => {}
+        );
+      },
+    },
+  };
+
 </script>