修改自定义页面

4 months ago · 69b6ea9298
parent 9db22b4d7f
commit 69b6ea9298
4 changed files with 77 additions and 34 deletions
--- a/src/views/contactUs/index.vue
+++ b/src/views/contactUs/index.vue
@ -1,14 +1,8 @@
 <template>
  <div>
    <div class="banner">
-      <el-image
-        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
-        :src="banner"
-        fit="contain"></el-image>
-      <div class="bannerInfo">
-        青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。
-      </div>
-      <div class="tabs">
+      <Carousel class="carousel" :bannerList="bannerList" :indicator-position="'none'"/>
+      <div class="tabs" style="z-index: 99;">
        <div class="content">
          <div @click="checkTabs(i,k)" :class="`tab ${tabsActive === k ? 'active':''}`" v-for="(i,k) in data.tabsList">
            {{ i.title }}
@ -49,10 +43,12 @@ import TeamStyle from './teamStyle'
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
 import {getAboutUsInfo} from "@/api/contactUs";
+import Carousel from "@/views/index/carousel.vue";

 export default {
  name: 'ContactUs1',
  components: {
+    Carousel,
    CompanyProfile,
    EnterpriseQualification,
    Partner,
@ -63,6 +59,23 @@ export default {
  },
  data() {
    return {
+      bannerList: [
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/26/5bd2d7716deb5.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+      ],
      banner: '',
      bannerTitle: '',
      tabsActive: 0,
@ -195,6 +208,11 @@ export default {
 <style lang="less" scoped>
@import "~@/style.less";

+.carousel {
+  width: 100%;
+  height: 35.5vw;
+}
+
 .banner {
  width: 100%;
  height: 35.5vw;
--- a/src/views/index/carousel.vue
+++ b/src/views/index/carousel.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <el-carousel trigger="click" style="height:100%">
+    <el-carousel trigger="click" style="height:100%" :indicator-position="indicatorPosition ||''">
      <el-carousel-item v-for="item in bannerList" :key="item"  >
        <div style="position: relative">
          <el-image
@ -20,25 +20,9 @@ import {getPortalList} from "@/api";

 export default {
  name: 'Carousel',
+  props: ['bannerList', 'indicatorPosition'],
  data() {
    return {
-      bannerList: [
-        {
-          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
-          // portalConfigTitle: '工业物联网定制化解决方案提供商',
-          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
-        },
-        {
-          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/26/5bd2d7716deb5.jpg',
-          // portalConfigTitle: '工业物联网定制化解决方案提供商',
-          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
-        },
-        {
-          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg',
-          // portalConfigTitle: '工业物联网定制化解决方案提供商',
-          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
-        },
-      ],
    }
  },
  mounted() {
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <Carousel class="carousel"/>
+    <Carousel class="carousel" :bannerList="bannerList"/>
    <ProductCenter class="productCenter"/>
    <ClassicCase class="classicCase"/>
 <!--    <NewsCenter class="newsCenter"/>-->
@ -27,6 +27,28 @@ export default {
    ContactUs,
    Copyright
  },
+  data() {
+    return {
+
+      bannerList: [
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/26/5bd2d7716deb5.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+      ],
+    }
+  }
 }
 </script>

--- a/src/views/industrySolutions/index.vue
+++ b/src/views/industrySolutions/index.vue
@ -1,13 +1,8 @@
 <template>
  <div>
    <div class="banner">
-      <el-image
-        style="width: 100%; height: 100%;position:absolute;top: 0;left: 0;"
-        :src="banner"
-        fit="contain"></el-image>
-      <div class="bannerInfo">
-<!--        青岛海威物联科技有限公司，致力于工业物联网软硬件系统研发、生产和销售，提供感知互联的工业化联网整体解决方案。-->
-      </div>
+
+      <Carousel class="carousel" :bannerList="bannerList"/>
    </div>
    <div style="width: 75vw;margin:0 auto;margin-top: 2vw; text-align: left">
      <template v-for="i in tabsList">
@ -39,15 +34,34 @@
 import ContactUs from '@/components/contactUs'
 import Copyright from '@/components/copyright'
 import {selectMenuTree} from "@/api/hwWebMenu";
+import Carousel from "@/views/index/carousel.vue";

 export default {
  name: 'ContactUs1',
  components: {
+    Carousel,
    ContactUs,
    Copyright
  },
  data() {
    return {
+      bannerList: [
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/26/5bd2d7716deb5.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+        {
+          portalConfigPic: 'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfa35afa1.jpg',
+          // portalConfigTitle: '工业物联网定制化解决方案提供商',
+          // portalConfigDesc: 'INDUSTRIAL IOT CUSTOMIZATION SOLUTION PROVIDER'
+        },
+      ],
      banner:'http://www.highwayiot.com/home/2/6/3rrzpl/resource/2018/10/23/5bcedfaf21a51.jpg',
      bannerTitle: '',
      tabsActive: 0,
@ -129,6 +143,11 @@ export default {
 <style lang="less" scoped>
@import "~@/style.less";

+.carousel {
+  width: 100%;
+  height: 35.5vw;
+}
+
 .banner {
  width: 100%;
  height: 35.5vw;