音乐样式的搭建以及设置颜色ui的兼容

IFmiss · Aug 17, 2017 · 3fdc7e9 · 3fdc7e9
1 parent b050d4c
commit 3fdc7e9
Show file tree

Hide file tree

Showing 6 changed files with 696 additions and 28 deletions.
diff --git a/.merge_file_a15832 b/.merge_file_a15832
@@ -0,0  1,302 @@
 <template>
   <div class="pic" v-if="picinfo.length">
     <!-- <div class="pic_bg" v-if="globalInfo.contentInfo" :style="{backgroundColor:globalInfo.contentInfo.bgcolor, opacity : globalInfo.contentInfo.opacity}"></div> -->
     <div class="pic_content">
       <picList @showswiper= "showSwiper" v-for="(item, index) in picinfo" :key="item.id" :data-index="index" :data-info="item"></picList>
     </div>
     <transition name="fade-scale">
       <div class="image_detail" v-show="showImageDetail">
         <swiper :options="swiperOption" ref="mySwiper" v-if="picListInfo.detail && globalInfo.contentInfo">  
                 <!-- 这部分放你要渲染的那些内容 -->  
                 <swiper-slide v-for="(item, index) in picListInfo.detail" :key="item.id">
                   <!-- <div class="swiper-lazy-preloader"></div> -->
                   <img class="image_info" :id="'detail_'   index" :src="item.url" alt="未曾遗忘的青春" :data-disc="picListInfo.disc" :data-title="picListInfo.place">
                 </swiper-slide>
                 <!-- 这是轮播的小圆点 -->  
                 <div class="swiper-pagination" slot="pagination"></div>  
             </swiper>
             <div class="colse_image_detail" @click.stop="hideSwiper">
               <div class="bg_colse_image_detail">
                 <i class="icon-close"></i>
               </div>
             </div>
             <div class="set_Bg" @click="setBg">
               设置为壁纸
             </div>
             <div class="bg_info" :style="{backgroundColor:globalInfo.contentInfo.bgcolor,opacity:globalInfo.contentInfo.opacity}"></div>
       </div>
     </transition>
   </div>
 </template>
 <script>
   import store from './../../store'
   import line from './../common/line/line.vue'
   import picList from './picList/picList.vue'
   import fecth from './../../utils/fecth.js'
   import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
   export default {
     data () {
       return {
         picinfo: {},
         showImageDetail: false,
         overflowType: 'initial',
         imageBg: '',
         currentPicLists: {},
         swiperOption: {
           notNextTick: false,
           // 是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
           autoplay: 30000,
           grabCursor: true,
           setWrapperSize: true,
           autoHeight: true,
           pagination: '.swiper-pagination',
           paginationClickable: true,
           mousewheelControl: true,
           autoplayDisableOnInteraction: false,
           observeParents: true,
           loop: false,
           initialSlide: 1,
           // lazyLoading: true,
           // lazyLoadingOnTransitionStart: true,
           onSlideChangeEnd: swiper => {
             // 这个位置放swiper的回调方法
             this.page = swiper.realIndex   1
             this.index = swiper.realIndex
           },
           onClick: swiper => {
             // const index = swiper.activeIndex
             // alert(swiper.slides[index].getAttribute('songlist'))
           }
         }
       }
     },
     computed: {
       globalInfo () {
         return store.getters.getGlobalInfo
       },
       swiper () {
         return this.$refs.mySwiper.swiper ? this.$refs.mySwiper.swiper : ''
       },
       picListInfo () {
         return store.getters.getPicList
       },
       getFixedImageInfo () {
         return store.getters.getGlobalInfo.showBingImage
       }
     },
     methods: {
       fetchData () {
         const getImageConditions = 'http://www.daiwei.org/vue/server/home.php?inAjax=1&do=getImageCondition'
         fecth.get(getImageConditions).then((res) => {
           // alert(JSON.stringify(res))
           this.picinfo = res.data
         }, (err) => {
           alert(err)
         })
       },
       showSwiper (index) {
         this.$nextTick(() => {
           if (this.$refs.mySwiper === undefined) {
             return
           }
           this.$refs.mySwiper.swiper.activeIndex = index
           this.showImageDetail = true
           // alert(this.swiper)
           if (this.swiper !== undefined) {
             this.swiper.activeIndex = index
             return
           } else {
             return
           }
         })
       },
       setBg () {
         if (this.getFixedImageInfo) {
           alert('需要在设置页面将背景图设置自定义才可以使用状态图片作为背景哦！')
           return
         }
         const el = document.getElementById('detail_'   this.swiper.activeIndex)
         const data = {
           url: el.getAttribute('src'),
           disc: el.getAttribute('data-disc'),
           title: el.getAttribute('data-title')
         }
         store.dispatch({
           type: 'set_FixedImageInfo',
           data: data
         })
         localStorage.setItem('fixedImageBg', JSON.stringify(store.getters.getFixedImageInfo))
       },
       hideSwiper () {
         this.showImageDetail = false
       }
     },
     watch: {
       showImageDetail (val, oldVal) {
         if (val === true) {
           this.overflowType = `hidden`
         } else {
           this.overflowType = `initial`
         }
       }
       // swiper (newval, oldval) {
       //   alert(newval)
       // }
       // picListInfo (val, oldval) {
       //   alert(JSON.stringify(val))
       // }
     },
     components: {
       'v-line': line,
       picList,
       swiper,
       swiperSlide
     },
     mounted () {
       this.fetchData()
       // $('.picList_content').mCustomScrollbar({
       //    theme: 'minimal-dark'
       // })''
       // this.$nextTick(() => { console.log(this.$refs) })
       // alert(this.$refs.abc)
       // alert(store.getters.getGlobalInfo)
       // this.swiper.slideTo(3, 1000, false)
     }
   }
 </script>
 <style lang="stylus" rel="stylesheet/stylus">
   @import '../../common/stylus/global.styl'
     // ::-webkit-scrollbar
     //   background:rgba(55,55,55,0.1)
     //   width:4px
     //   border-radius:2px
     //   margin-left:12px
     // ::-webkit-scrollbar-button    
     //   display:none
     // ::-webkit-scrollbar-track  
     //   border-radius:2px
     //   background:rgba(55,55,55,0.1)
     // ::-webkit-scrollbar-track-piece 
     //   border-radius:2px
     //   background:rgba(55,55,55,0.1)
     // ::-webkit-scrollbar-thumb  
     //   cursor:pointer
     //   border-radius:2px
     //   background:rgba(222,222,222,0.1)
     // ::-webkit-scrollbar-button      
     // ::-webkit-scrollbar-track       
     // ::-webkit-scrollbar-track-piece 
     // ::-webkit-scrollbar-thumb       
     // ::-webkit-scrollbar-corner      
     // ::-webkit-resizer               
   .pic
     position:fixed
     top:0
     left:0;
     bottom:0
     width:100%
     right:0
     border-radius:12px
     .pic_bg
       position:absolute
       top:0
       left:0;
       bottom:0
       width:100%
       right:0
       z-index:-1
     .pic_content
       position:fixed
       top:100px
       bottom:50px
       left:50%
       max-width:1240px
       width:100%
       transform:translate3d(-50%,0,0)
       margin:0 auto
       overflow-y:scroll
       box-sizing:border-box
       -webkit-overflow-scrolling: touch
       padding:15px;
       box-sizing:border-box
     .image_detail
       position:fixed
       top:100px
       bottom:50px
       left:50%
       max-width:1240px
       width:100%
       transform:translate3d(-50%,0,0) scale(1)
       transform-origin:center center
       &.fade-scale-enter-active,&.fade-scale-leave-active
         transition: all 0.5s 
       &.fade-scale-enter,&.fade-scale-leave-to
         opacity:0
         transform:translate3d(-50%,0,0) scale(0)
       .swiper-container
         height:100%
         .swiper-wrapper
           .swiper-slide
             width:100%
             height: 100%
             overflow:hidden
             display:flex
             align-items:center
             img
               width:auto
               height:auto
               max-width:100%
               max-height:100%
               background:#000
         .swiper-pagination
         .swiper-pagination-bullet
           margin:0 4px
           &.swiper-pagination-bullet-active
             background:$active_color!important
       .bg_info
         position:absolute
         top:0
         left:0
         bottom:0
         right:0
         z-index:-1
       .colse_image_detail
         position:absolute
         width:80px
         height:80px
         line-height:80px
         text-align:center
         top:0
         right:0
         z-index:2
         cursor:pointer
         i
           font-size:46px
           color:$text_color
           vertical-align: middle
         .bg_colse_image_detail
           width:100%
           height:100%
           z-index:-1
       .set_Bg
         color:$text_color
         position:absolute
         z-index:1
         bottom:10px
         right:10px
         font-size:12px
         padding:5px 10px
         background:rgba(0,0,0,0.1)
         cursor:pointer
         &:hover
           background:rgba(0,0,0,0.4)
       .bg_image_info
         display:block
         width:100%
         height:100%
       .image_info
         height:100%
         display:block
         margin:0 auto
 </style>
diff --git a/package.json b/package.json
@@ -11,8  11,7 @@
     "lint": "eslint --ext .js,.vue src"
   },
   "dependencies": {
-    "jquery-mousewheel": "^3.1.13",
-    "malihu-custom-scrollbar-plugin": "^3.1.5",
     "babel-polyfill": "^6.23.0",
     "vue": "^2.3.3",
     "vue-awesome-swiper": "^2.5.4",
     "vue-router": "^2.6.0"

diff --git a/src/common/stylus/global.styl b/src/common/stylus/global.styl
@@ -4,6  4,10 @@ $text_color = #fff;
 // active状态下的颜色
 $text_color_active = #ccc;
 
 $text_before_color = rgba(225,225,225,.8);
 
 // 列表在hover状态下的背景色
 $list_hover = rgba(0,0,0,0.2);
 
 // 边框颜色
 $border_color = red;

diff --git a/src/components/common/colorpicker/colorpicker.vue b/src/components/common/colorpicker/colorpicker.vue
@@ -75,18  75,24 @@ export default {
 @import '../../../common/stylus/global.styl'
   .colorpicker
     position:relative
-    width:720px
-    height:260px
     width:80%
     max-width:720px
     height:auto
     margin: 0 auto
     font-size:0
     overflow:auto
     .colorlist
-      display:flex
-      justify-content:center
-      width:720px
-      height:20px
       // display:flex
       // justify-content:center
       display:inline-block
       width:100%
       height:auto
       margin: 0 auto
       line-height:10px
       .color-detail
         width:20px
         height:20px
         display:inline-block
         border-radius:50%
         box-sizing:border-box
         cursor:pointer