fix: css var name

README.md

@@ -1,5 +1,8 @@
 <h1 align="center">Himalayan-lite</h1>
-<p align="center"><img src="https://img.shields.io/badge/version-1.0-red.svg"></p>
+<p align="center">
+  <img src="https://img.shields.io/badge/version-2.0-red.svg">
+  <img src="https://img.shields.io/badge/wechat-green.svg">
+</p>
 
 这是一个模仿`喜马拉雅lite`的微信小程序`demo`,完全使用微信小程序原生开发，没有使用自定义组件（使用了一个自己实现的搜索组件）。所以这是一个初级项目，非常的适合🤹‍♀️微信小程序开发新手🤹‍♀️，如果你有 `html` `css` `js` 前端基础那么你将很快上手，代码完全免费开源，看得上可以自取哦！（当然如果您能愉快的给一个Start就更好了❤😋）
 

pages/index/index.js

@@ -9,7 +9,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-    imgList:[
+    imgList: [
       '/image/ad1.jpg',
       '/image/ad2.jpg',
       '/image/ad3.jpg',
@@ -18,21 +18,31 @@ Page({
       '/image/ad6.jpg',
       '/image/ad7.jpg'
     ],
-    navList:[
-      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'榜单'},
-      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'听小说'},
-      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'情感电台'},
-      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'听知识'},
-      
+    navList: [{
+        icon: '/image/nav-icon/diantai.png',
+        events: 'goToBangDan',
+        text: '榜单'
+      },
+      {
+        icon: '/image/nav-icon/diantai.png',
+        events: 'goToBangDan',
+        text: '听小说'
+      },
+      {
+        icon: '/image/nav-icon/diantai.png',
+        events: 'goToBangDan',
+        text: '情感电台'
+      },
+      {
+        icon: '/image/nav-icon/diantai.png',
+        events: 'goToBangDan',
+        text: '听知识'
+      },
+
     ],
     swiperCurrent: 0,
   },
-  //轮播图改变事件
-  swiperChange: function(e){
-    this.setData({
-     swiperCurrent: e.detail.current
-    })
-   },
+
   /**
    * 生命周期函数--监听页面加载
    */
@@ -42,34 +52,40 @@ Page({
 
     // 调用的是自己封装的工具函数，在utils中
     utils.myRequest({
-      url:url,
-      methods:'GET',
-      success:function(result){
+      url: url,
+      methods: 'GET',
+      success: function (result) {
         that.setData({
-          showitem:true,
-          guess:result.data.paidArea.list,
-          xiaoshuocontent:result.data.hotRecommends.list[0].list,
-          xiangshengcontent:result.data.hotRecommends.list[2].list,
-          tuokocontent:result.data.hotRecommends.list[4].list
+          showitem: true,
+          guess: result.data.paidArea.list,
+          xiaoshuocontent: result.data.hotRecommends.list[0].list,
+          xiangshengcontent: result.data.hotRecommends.list[2].list,
+          tuokocontent: result.data.hotRecommends.list[4].list
         })
       },
-      fail:function(){
+      fail: function () {
         that.setData({
-          showitem:false
+          showitem: false
         })
       }
     });
   },
-  goToBangDan:function(){
+  //轮播图改变事件
+  swiperChange: function (e) {
+    this.setData({
+      swiperCurrent: e.detail.current
+    })
+  },
+  goToBangDan: function () {
     wx.navigateTo({
       url: '/pages/index/bangdan/bangdan',
     })
   },
-  gotoDetails(e){
+  gotoDetails(e) {
     var url = e.currentTarget.dataset.coverimg;
     var title = e.currentTarget.dataset.title;
     wx.navigateTo({
-      url: '/pages/details/details?url='+url+'&title='+title,
+      url: '/pages/details/details?url=' + url + '&title=' + title,
     })
   }
-})
+})

pages/index/index.wxml

@@ -1,22 +1,21 @@
-<!-- index.wxml -->
 <!-- 搜索框 -->
 <search></search>
 <!-- 轮播图 -->
-<view class="swiper-container">
-  <swiper class="swiper" autoplay="true" circular="true" 
+<view class="hmly-swiper-container">
+  <swiper class="hmly-swiper" autoplay="true" circular="true" 
     interval="3000" easing-function="easeOutCubic" 
     current="{{swiperCurren}}" 
     bindchange="swiperChange">
     <!-- 轮播图图片 -->
-    <swiper-item class="swiperItem" wx:for="{{imgList}}" wx:key="index">
+    <swiper-item class="hmly-swiper-item" wx:for="{{imgList}}" wx:key="index">
       <!-- 加上widthFix可以使图片自适应 -->
       <image src="{{item}}"></image>
     </swiper-item>
   </swiper>
   <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
-  <view class="dots">
+  <view class="hmly-dots">
     <block wx:for="{{imgList.length}}" wx:key="index">
-      <view class="dotsItem{{index == swiperCurrent ? ' dotActive' : ''}}"></view>
+      <view class="hmly-dots-item{{index == swiperCurrent ? ' hmly-dot-active' : ''}}"></view>
     </block>
   </view>
 </view>

style/common.wxss

@@ -1,8 +1,16 @@
-/* 公共样式 */
+/* 
+  公共样式 
+  注：hmly为喜马拉雅的缩写
+*/
 
 /* 轮播图 */
+.hmly-swiper{
+  width: 100%;
+  height: 100%;
+  border-radius: 15rpx;
+}
 
-.swiper-container{
+.hmly-swiper-container{
   width: 90%;
   height: 280rpx;
   margin: 0rpx auto;
@@ -10,22 +18,20 @@
   border-radius: 15rpx;
   overflow: hidden;
 }
-.swiper{
-  width: 100%;
-  height: 100%;
-  border-radius: 15rpx;
-}
-.swiperItem{
+
+.hmly-swiper-item{
   width: 100%;
   height: 100%;
   border-radius: 15rpx;
 }
-.swiperItem>image{
+
+.hmly-swiper-item>image{
   width: 100%;
   height: 100%;
   border-radius: 15rpx;
 }
-.dots{
+
+.hmly-dots{
   width: auto;
   height: 10rpx;
   position: absolute;
@@ -37,7 +43,7 @@
   align-items: center;
   padding: 3rpx 10rpx;
 }
-.dotsItem{
+.hmly-dots-item{
   width: 8rpx;
   height: 8rpx;
   margin: 0rpx 8rpx;
@@ -45,7 +51,7 @@
   background-color: #cdcdcd;
   transition: all .3s;
 }
-.dotActive{
+.hmly-dot-active{
   width: 10rpx;
   height: 10rpx;
   background-color: #fff;