首页css

4b121645 · lixy · 1febd5a7 · 4b121645 · 4b121645 · 4b121645
Commit 4b121645 authored Sep 18, 2019 by lixy
10 changed files
--- a/assets/banner.css
+++ b/assets/banner.css
+.banner-b-n-n .banner-bg{
+  width: 100%;
+}
+.banner-b-n-n .name-t.active{
+  background: #1bbb9f;
+  color: #fff !important;
+}
+.banner-b-n-n li{
+  position:absolute;
+  left:0;
+  width:100%;
+  height:100%;
+  font-size:inherit;
+  color:#fff;
+  font-size:80px;
+  text-align:center;
+  opacity:0;
+  transition: all 1.5s;
+}
+.banner-b-n-n .active{
+  opacity:1;
+  transition: all 1.5s;
+}
+.banner-b-n-n .name-t{
+  display:inline-block;
+  height:34px;
+  line-height: 34px;
+  width:102px;
+  padding: 0 5px;
+  font-size: 14px;
+  margin:0 5px;
+  background:#eee;
+  color:#666;
+  cursor:pointer;
+}
+.banner-b-n-n .status{
+  position:absolute;
+  /*top:90%;*/
+  bottom: 30px;
+  width:100%;
+  height:40px;
+  text-align:Center;
+  display: flex;
+  justify-content: center;
+}
+.banner-b-n-n .box{
+  position:relative;
+  height:560px;
+  min-height: 350px;
+}
+.banner-b-n-n span{
+  display:block;
+  height:40px;
+  width:20px;
+  color:#fff;
+  line-height:40px;
+  text-align:Center;
+  background:rgba(0,0,0, .7);
+  cursor:pointer;
+}
+.banner-b-n-n span.prev{
+  float:left;
+}
+.banner-b-n-n span.next{
+  float:right;
+}
+.banner-b-n-n .btn{
+  position:absolute;
+  top:50%;
+  width:100%;
+  transform: translateY(-50%);
+}
+.banner-b-n-n .banner{
+  width:100%;
+  min-height: 350px;
+  overflow: hidden;
+}
--- a/assets/bannerActivity.css
+++ b/assets/bannerActivity.css
+.banner-ac-n-n .banner-bg{
+  width: 100%;
+}
+.banner-ac-n-n .shadow-00{
+  width: 1099px;
+  left: -43px;
+  height: 675px;
+  top: -40px;
+  position: absolute;
+}
+.banner-ac-n-n .shadow-01{
+  left: 146px;
+  width: 993px;
+  height: 540px;
+  top: 23px;
+  position: absolute;
+}
+.banner-ac-n-n .shadow-02{
+  left: 222px;
+  height: 427px;
+  top: 77px;
+  width: 993px;
+  position: absolute;
+}
+.banner-ac-n-n .bn-01{
+  width: 100%;
+  height: 554px;
+  top: 0;
+  left: 0px;
+  position: absolute;
+}
+.banner-ac-n-n li{
+  position:absolute;
+  left:0;
+  width:100%;
+  height:auto;
+  font-size:inherit;
+  color:#fff;
+  font-size:80px;
+  text-align:center;
+  list-style: none;
+}
+.banner-ac-n-n .active{
+  z-index: 9;
+}
+.banner-ac-n-n .active1{
+  z-index: 8;
+}
+.banner-ac-n-n .active2{
+  z-index: 7;
+}
+.banner-ac-n-n ul{
+  height:auto;
+}
+.banner-ac-n-n .name-t div{
+  color:#fff;
+  padding: 0 20px;
+}
+.banner-ac-n-n .status{
+  position:absolute;
+  bottom:20px;
+  width:100%;
+  display: flex;
+  z-index: 11;
+  padding-left: 20px;
+}
+.banner-ac-n-n .status a{
+  color: #fff;
+}
+.banner-ac-n-n .box{
+  position:relative;
+  height:100%;
+}
+.banner-ac-n-n span{
+  display: block;
+  width: 40px;
+  color: #fff;
+  padding: 8px 0;
+  text-align: Center;
+  cursor: pointer;
+  background: #000;
+  margin: 0 10px;
+  opacity: 0.6;
+}
+.banner-ac-n-n span:hover{
+  opacity: 0.7;
+}
+.banner-ac-n-n span.prev{
+  float:left;
+}
+.banner-ac-n-n span.next{
+  float:right;
+}
+.banner-ac-n-n .btn{
+  position:absolute;
+  top:50%;
+  width:100%;
+  z-index: 10;
+  transform: translateY(-50%);
+}
+.banner-ac-n-n .banner-active{
+  width: 948px;
+  height: 554px;
+}
--- a/assets/footer.css
+++ b/assets/footer.css
@@ -45,7 +45,7 @@
  margin-right: 10px;
 }
 .link-f{
-  padding: 20px;
+  padding-top: 20px;
  /* border-top: 1px solid #323737; */
  font-size: 12px;
  color: #999;

--- a/assets/main.css
+++ b/assets/main.css
 html {
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  /*font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
+  font-family:"微软雅黑";
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
@@ -43,15 +44,12 @@ html {
  background-color: #35495e;
 }

-html{
-  font-family:"微软雅黑 Light" !important;
-}
 body {
  background: #f2f2f2;
  height: 100%;
  width: 100%;
  min-width: 1120px;
-  font-family:"微软雅黑 Light"
+  font-family:"微软雅黑"
 }
 #newBridge .nb-middle{
  display: none !important;

--- a/assets/vehicleBanner.css
+++ b/assets/vehicleBanner.css
+.banner-vehicle-ccc .ve-bn-li{
+  position:absolute;
+  left:0;
+  width:100%;
+  height:100%;
+  font-size:inherit;
+  color:#fff;
+  text-align:center;
+  opacity:0;
+  transition: all 1.5s;
+}
+.banner-vehicle-ccc .active{
+  opacity:1;
+  transition: all 1.5s;
+  color:#fff;
+  background:#1bbb9f;
+}
+.banner-vehicle-ccc .box{
+  position:relative;
+  height:240px;
+}
+.banner-vehicle-ccc span{
+  display:block;
+  height:40px;
+  width:20px;
+  color:#fff;
+  line-height:40px;
+  text-align:Center;
+  background:rgba(0,0,0, .7);
+  cursor:pointer;
+}
+.banner-vehicle-ccc span.prev{
+  float:left;
+}
+.banner-vehicle-ccc span.next{
+  float:right;
+}
+.banner-vehicle-ccc .btn{
+  position:absolute;
+  top:50%;
+  width:100%;
+  transform: translateY(-50%);
+}
+.banner-vehicle-ccc .banner{
+  width:100%;
+  overflow: hidden;
+}
--- a/components/banner.vue
+++ b/components/banner.vue
 <template>
-    <div class="banner">
+    <div class="banner banner-b-n-n">
        <div class="box">
            <ul>
                <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
@@ -7,18 +7,13 @@
                </li>
            </ul>
            <div class="status">
-            <span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"
+            <span class="name-t ellipsis" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"
                  @mouseenter="changeBanner(index)"
                  @mouseleave="startLoop"
            >{{item.title}}
        </span>
            </div>
-            <!--<div class="btn">-->
-                <!--<span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop">《</span>-->
-                <!--<span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop">》</span>-->
-            <!--</div>-->
        </div>
-        <!--h1 @click="getArticle">{{msg}}</h1-->
    </div>
 </template>

@@ -103,85 +98,6 @@
        }
    }
 </script>
-
-<style scoped>
-    .banner-bg{
-        width: 100%;
-    }
-    li{
-        position:absolute;
-        left:0;
-        width:100%;
-        height:100%;
-        font-size:inherit;
-        color:#fff;
-        font-size:80px;
-        text-align:center;
-        opacity:0;
-        transition: all 1.5s;
-    }
-    .active{
-        opacity:1;
-        transition: all 1.5s;
-    }
-    ul{
-        height:100%;
-    }
-    .name-t{
-        display:inline-block;
-        height:34px;
-        line-height: 34px;
-        width:102px;
-        font-size: 14px;
-        margin:0 5px;
-        background:#eee;
-        color:#666;
-        cursor:pointer;
-    }
-    span.active{
-        color:#fff;
-        background:#1bbb9f;
-    }
-    .status{
-      position:absolute;
-      /*top:90%;*/
-      bottom: 30px;
-      width:100%;
-      height:40px;
-      text-align:Center;
-      display: flex;
-      justify-content: center;
-    }
-      .box{
-        position:relative;
-        height:560px;
-        min-height: 350px;
-      }
-    span{
-        display:block;
-        height:40px;
-        width:20px;
-        color:#fff;
-        line-height:40px;
-        text-align:Center;
-        background:rgba(0,0,0, .7);
-        cursor:pointer;
-    }
-    span.prev{
-        float:left;
-    }
-    span.next{
-        float:right;
-    }
-    .btn{
-        position:absolute;
-        top:50%;
-        width:100%;
-        transform: translateY(-50%);
-    }
-    .banner{
-      width:100%;
-      min-height: 350px;
-      overflow: hidden;
-    }
+<style>
+  @import "../assets/banner.css";
 </style>
--- a/components/bannerActivity.vue
+++ b/components/bannerActivity.vue
@@ -196,21 +196,6 @@
    color:#fff;
    padding: 0 20px;
  }
-  .name-t{
-    /*height: 554px;*/
-    /*width: 948px;*/
-    /*position: absolute;*/
-    /*z-index: 999;*/
-    /*top: 0;*/
-    /*display: flex;*/
-    /*flex-direction: column;*/
-    /*justify-content: flex-end;*/
-    /*padding-bottom: 30px;*/
-  }
-  span.active{
-    color:#fff;
-    background:#1bbb9f;
-  }
  .status{
    position:absolute;
    bottom:20px;

--- a/components/vehicleBanner.vue
+++ b/components/vehicleBanner.vue
 <template>
-  <div class="banner">
+  <div class="banner banner-vehicle-ccc">
    <div class="box">
      <ul>
-        <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
+        <li v-for="(item, index) in list" class="ve-bn-li" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
          <img :src= "item.cover" style="width:100%;min-width: 1120px;height: 240px;object-fit: cover;" :alt="item.alt"/>
        </li>
      </ul>
-      <!--<div class="status">-->
-            <!--<span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"-->
-                  <!--@mouseenter="changeBanner(index)"-->
-                  <!--@mouseleave="startLoop"-->
-            <!--&gt;{{item.title}}-->
-        <!--</span>-->
-      <!--</div>-->
-      <!--<div class="btn">-->
-      <!--<span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop">《</span>-->
-      <!--<span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop">》</span>-->
-      <!--</div>-->
    </div>
-    <!--h1 @click="getArticle">{{msg}}</h1-->
  </div>
 </template>
-
+<style>
+  @import "../assets/vehicleBanner.css";
+</style>
 <script>
  export default {
    name: 'banner',
@@ -104,80 +94,4 @@
  }
 </script>

-<style scoped>
-  .banner-bg{
-    width: 100%;
-  }
-  li{
-    position:absolute;
-    left:0;
-    width:100%;
-    height:100%;
-    font-size:inherit;
-    color:#fff;
-    font-size:80px;
-    text-align:center;
-    opacity:0;
-    transition: all 1.5s;
-  }
-  .active{
-    opacity:1;
-    transition: all 1.5s;
-  }
-  ul{
-    height:100%;
-  }
-  .name-t{
-    display:inline-block;
-    height:40px;
-    width:100px;
-    font-size: 14px;
-    margin:0 5px;
-    background:#ccc;
-    color:#333;
-    cursor:pointer;
-  }
-  span.active{
-    color:#fff;
-    background:#1bbb9f;
-  }
-  .status{
-    position:absolute;
-    bottom:20px;
-    width:100%;
-    height:40px;
-    text-align:Center;
-    display: flex;
-    justify-content: center;
-  }
-    .box{
-      position:relative;
-      height:240px;
-    }
-  span{
-    display:block;
-    height:40px;
-    width:20px;
-    color:#fff;
-    line-height:40px;
-    text-align:Center;
-    background:rgba(0,0,0, .7);
-    cursor:pointer;
-  }
-  span.prev{
-    float:left;
-  }
-  span.next{
-    float:right;
-  }
-  .btn{
-    position:absolute;
-    top:50%;
-    width:100%;
-    transform: translateY(-50%);
-  }
-  .banner{
-    width:100%;
-    overflow: hidden;
-  }
-</style>
+
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -18,13 +18,14 @@ module.exports = {
          { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/index.css' },
          { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/goTop.css' },
          { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/swiper.min.css' },
-          { rel: 'stylesheet', href: 'https://mgmt.dfangche.com/xxfccn/css/pc/el/index.css' }
+          { rel: 'stylesheet', href: 'https://www.xxfangche.com/xxfccn/css/pc/el/index.css' }
        ],
        script: [
          { src: 'https://dev.dfangche.com/h5/appHtml/js/util.js' },
        ],
    },
-    css: [ ],
+    css: [
+    ],

    loading: '~/components/loading.vue',


--- a/pages/index.vue
+++ b/pages/index.vue
@@ -333,27 +333,31 @@ export default {
      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      return formatDate(date, 'yyyy-MM-dd');
    }
-
-    // 首页活动
-    const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home?limit=3');
-    let cc = data.data;
-    cc.map(function(item){
-      item.startTime = timestamp2DateNoTime(item.startTime);
-      item.endTime = timestamp2DateNoTime(item.endTime);
-    });
-    //首页banner
-    let tempBannerData = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
-    let banner = tempBannerData.data.data;
-    //首页新闻
-    let newsData = await axios.get('/api/uccn/article/app/unauth/homePage/1');
-    let news = newsData.data.data;
-    // 首页推荐旅游
-    let tourData = await axios.get('/api/uccn/app/unauth/tour/shopList?page=1&limit=6');
-    let tour = tourData.data.data;
-    // 首页seo
-    let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/1');
-    let head = headData.data.data;
-    return { activityList: cc, bannerList: banner, newsList: news, tourList: tour , headList : head}
+    try {
+      // 首页活动
+      const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home?limit=3');
+      let cc = data.data;
+      cc.map(function(item){
+        item.startTime = timestamp2DateNoTime(item.startTime);
+        item.endTime = timestamp2DateNoTime(item.endTime);
+      });
+      //首页banner
+      let tempBannerData = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
+      let banner = tempBannerData.data.data;
+      //首页新闻
+      let newsData = await axios.get('/api/uccn/article/app/unauth/homePage/1');
+      let news = newsData.data.data;
+      // 首页推荐旅游
+      let tourData = await axios.get('/api/uccn/app/unauth/tour/shopList?page=1&limit=6');
+      let tour = tourData.data.data;
+      // 首页seo
+      let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/1');
+      let head = headData.data.data;
+      return { activityList: cc, bannerList: banner, newsList: news, tourList: tour , headList : head}
+    } catch (e) {
+      console.log('interface timeout or format error =&gt; ', e)
+      return {}
+    }
  },
  methods: {
    handleScroll: function () {