Browse Source

轮播图修改

ouxq 8 years ago
parent
commit
58cd966b14

+ 32 - 1
assets/scss/common.scss

@@ -248,5 +248,36 @@
 .aside-enter, .aside-leave-active {
   opacity: 0
 }
+// 轮播
+.swiper-pagination-bullet{
+  width: 12px !important;
+  height: 12px !important;
+  opacity: 1 !important;
+  background: none !important;
+  border: #fff 1px solid;
+}
+.swiper-pagination-bullet.swiper-pagination-bullet-active{
+  background: #fff !important;
+}
+.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
+  bottom: 20px !important;
+}
+.swiper-button-prev i,.swiper-button-next i{
+  font-size: 40px;
+  color: #fff;
+  opacity: 1;
+  font-weight: 900;
+  text-shadow: 2px 0px 5px #333;
+}
 
-
+.swiper-button-prev,.swiper-button-next{
+  background: none !important;
+  width: 40px !important;
+  height: 80px !important;
+  line-height: 80px;
+  margin-top: -45px !important;
+  opacity: .6;
+}
+.swiper-button-prev:hover,.swiper-button-next:hover{
+  opacity: 1;
+}

+ 0 - 3
assets/scss/help.css

@@ -1,7 +1,4 @@
 /* main */
-body{
-  background: #f5f5f5;
-}
 #main>.container .left {
   width: 200px;
   float: left;

+ 4 - 0
components/help/index.js

@@ -0,0 +1,4 @@
+import left from './left.vue'
+import helpHeader from './helpHeader.vue'
+
+export { left, helpHeader }

+ 4 - 0
components/home/Carousel.vue

@@ -12,6 +12,8 @@
             </div>
           </div>
           <div class="swiper-pagination swiper-pagination-bullets"></div>
+          <div class="swiper-button-prev"><i class="iconfont icon-arrow-left"></i></div>
+          <div class="swiper-button-next"><i class="iconfont icon-arrow-right"></i></div>
         </div>
       </div>
     </div>
@@ -30,6 +32,8 @@
           mousewheelControl: true,
           effect: 'fade',
           lazyLoading: true,
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next',
           onTransitionStart: (swiper) => {
             // 不要通过vue刷新dom,会导致pagination无法刷新
             // this.activeSlide = swiper.activeIndex

+ 2 - 2
components/provider/Carousel.vue

@@ -7,8 +7,8 @@
         </div>
       </div>
       <div class="swiper-pagination swiper-pagination-bullets"></div>
-      <div class="swiper-button-prev"></div>
-      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"><i class="iconfont icon-arrow-left"></i></div>
+      <div class="swiper-button-next"><i class="iconfont icon-arrow-right"></i></div>
     </div>
   </div>
 </template>

+ 1 - 2
pages/help/helpDetail/_id.vue

@@ -32,8 +32,7 @@
 </div>
 </template>
 <script>
-  import left from '~components/help/left'
-  import helpHeader from '~components/help/helpHeader'
+  import { left, helpHeader } from '~components/help'
   export default {
     name: 'help',
     components: {

+ 2 - 3
pages/help/helpList/_id.vue

@@ -22,7 +22,7 @@
               <ul>
                 <li v-for="list in helpList">
                   <em></em>
-                  <nuxt-link :to="`/help/helpDetail/${list.num}`" v-text="list.title"></nuxt-link>
+                  <nuxt-link :to="`/help/helpDetail/${list.num}`" v-text="list.title" :title="list.title"></nuxt-link>
                 </li>
                 <li v-if="helpList.length == 0" style="color: #999;">暂无数据!</li>
               </ul>
@@ -35,8 +35,7 @@
 </div>
 </template>
 <script>
-  import left from '~components/help/left'
-  import helpHeader from '~components/help/helpHeader'
+  import { left, helpHeader } from '~components/help'
   export default {
     name: 'help',
     components: {

+ 1 - 2
pages/help/home.vue

@@ -31,8 +31,7 @@
   </div>
 </template>
 <script>
-  import left from '~components/help/left'
-  import helpHeader from '~components/help/helpHeader'
+  import { left, helpHeader } from '~components/help'
   export default {
     name: 'help',
     components: {

BIN
static/images/all/songguo.png