Merge pull request #10 from Notobey/dev

fix wxss 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就更好了❤😋）
 

component/search/search.wxss

@@ -24,6 +24,7 @@
   font-size: 29rpx;
   margin-left: 20rpx;
 }
+
 .search-right{
   flex: 0.5;
   font-size:30rpx;

pages/classification/classification.wxml

@@ -2,26 +2,26 @@
 <search></search>
 
 <!-- 分类索引 -->
-<view class="ification">
+<view class="hmly-ification">
     <!-- 左边部分 -->
-    <scroll-view class="scroll-left" scroll-y scroll-with-animation style="height:{{phoneHeight}}rpx" scroll-top="{{VerticalNavTop}}">
+    <scroll-view class="hmly-scroll-left" scroll-y scroll-with-animation style="height:{{phoneHeight}}rpx" scroll-top="{{VerticalNavTop}}">
         <block wx:for="{{ificationTitle}}" wx:key="index">
-            <view class="leftTitle {{index === activeIndex ? 'active':''}}" data-index="{{index}}" data-id="{{index}}" bindtap="change">{{item.title}}</view>
+            <view class="hmly-left-title {{index === activeIndex ? 'hmly-active':''}}" data-index="{{index}}" data-id="{{index}}" bindtap="change">{{item.title}}</view>
         </block>
     </scroll-view>
     
     <!-- 右边部分 -->
     
-    <scroll-view class="scroll-right" scroll-y bindscroll="showActive" style="height:{{phoneHeight}}rpx" scroll-into-view="main-id-{{TabCur}}">
-        <view class="contentScroll-item" wx:for="{{ificationContent}}" wx:key="index"  data-index="{{index}}" id="main-id-{{index}}" >
-            <view class="top">
-                <view class="contentTitle">
+    <scroll-view class="hmly-scroll-right" scroll-y bindscroll="showActive" style="height:{{phoneHeight}}rpx" scroll-into-view="main-id-{{TabCur}}">
+        <view class="hmly-content-scroll-item" wx:for="{{ificationContent}}" wx:key="index"  data-index="{{index}}" id="main-id-{{index}}" >
+            <view class="hmly-top">
+                <view class="hmly-content-title">
                     {{item.title}}
                     <text class="icon-right"></text>
                 </view>
             </view>
-            <view class="content">
-                <view class="contentText" wx:for="{{item.content}}" wx:key="index">
+            <view class="hmly-content">
+                <view class="hmly-content-text" wx:for="{{item.content}}" wx:key="index">
                     {{item.text}}
                 </view>
             </view>

pages/classification/classification.wxss

@@ -1,5 +1,5 @@
 /* pages/classification/classification.wxss */
-.ification{
+.hmly-ification{
     width: 100%;
     height: 100%;
     
@@ -7,45 +7,45 @@
     display: flex;
     justify-content: start;
 }
-.scroll-left{
+.hmly-scroll-left{
     width: 22%;
     padding-top: 55rpx;
     margin-right: 20rpx;
     background-color: #fff;
     overflow: hidden;
 }
-.leftTitle{
+.hmly-left-title{
     text-align: center;
     font-size: 28rpx;
     height: 100rpx;
     line-height: 100rpx;
 }
 
-.scroll-right{
+.hmly-scroll-right{
     width: 75%;
 }
-.active{
+.hmly-active{
     color: #ff520f;
     background-color: rgb(243, 244, 246);
 }
-.contentScroll-item{
+.hmly-content-scroll-item{
     width: auto;
     height: auto;
     margin-bottom: 20rpx;
 }
-.top{
+.hmly-top{
     width: 100%;
     height: 40rpx;
     padding: 20rpx 0rpx;
     margin: 0rpx auto;
 }
-.contentTitle{
+.hmly-content-title{
     color: rgb(12, 11, 11);
     font-size: 30rpx;
     text-align: center;
     margin: 0rpx auto;
 }
-.content{
+.hmly-content{
     width: 100%;
     height: 140rpx;
     padding: 30rpx 0rpx;
@@ -58,7 +58,7 @@
     border-top-left-radius: 7rpx;
     border-bottom-left-radius: 7rpx;
 }
-.contentText{
+.hmly-content-text{
     width: 130rpx;
     height: 50rpx;
     margin: 10rpx 20rpx;

pages/collection/collection.wxml

@@ -2,16 +2,16 @@
 <block wx:if="{{login}}">
     <!-- logo -->
     <view class="logo" hover-class="none" hover-stop-propagation="false">
-        <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false"></image>
+        <image class="logo-img" src="/image/logo.png" mode="widthFix" lazy-load="false"></image>
     </view>
     <!-- 登录按钮 -->
     <view class="loginButton" hover-class="none" hover-stop-propagation="false">
-        <view class="wechatLogin">
+        <view class="hmly-wechat-login">
             <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
                 <text class="icon-message"></text>  微信登录
             </button>
         </view>
-        <view class="phoneLogin">
+        <view class="phone-login">
             <button>手机号登录</button>
         </view>
     </view>
@@ -20,54 +20,54 @@
     <!-- 搜索框 -->
     <search></search>
     <!-- 功能栏 -->
-    <view class="titleBar">
-      <view class="itemTitle {{index == currentIndex ? 'active' : ' '}}" 
+    <view class="hmly-title-bar">
+      <view class="hmly-item-title {{index == currentIndex ? 'hmly-active' : ' '}}" 
         data-index="{{index}}" bindtap="checkItem" wx:for="{{content}}" wx:key="index">
           {{item.text}}
       </view>
     </view>
-    <swiper class="swiperbox" style="min-height:{{height}}px" duration="300" current="{{currentIndex}}" bindchange="changeTab">
-        <swiper-item class="swiper-box-item" >
+    <swiper class="hmly-swiper-box" style="min-height:{{height}}px" duration="300" current="{{currentIndex}}" bindchange="changeTab">
+        <swiper-item class="hmly-swiper-box-item" >
             <block>
-                <view class="NoContent">
+                <view class="hmly-no-content">
                     <text class="icon-empty text-gray" style="font-size:400rpx"></text>
                     <!-- <image src="/image/noContent.png"></image> -->
-                    <view class="but-box">
+                    <view class="hmly-but-box">
                         <text style="font-size:30rpx" class="text-gray">没有内容</text>
-                        <button class="but">看看推荐</button>
+                        <button class="hmly-but">看看推荐</button>
                     </view>
                 </view>
             </block>
         </swiper-item>
         <swiper-item>
             <block>
-                <view class="NoContent">
+                <view class="hmly-no-content">
                     <text class="icon-empty text-gray" style="font-size:400rpx"></text>
-                    <view class="but-box">
+                    <view class="hmly-but-box">
                         <text style="font-size:30rpx" class="text-gray">没有内容</text>
-                        <button class="but">看看推荐</button>
+                        <button class="hmly-but">看看推荐</button>
                     </view>
                 </view>
             </block>
         </swiper-item>
         <swiper-item>
             <block>
-                <view class="NoContent">
+                <view class="hmly-no-content">
                     <text class="icon-empty text-gray" style="font-size:400rpx"></text>
-                    <view class="but-box">
+                    <view class="hmly-but-box">
                         <text style="font-size:30rpx" class="text-gray">没有内容</text>
-                        <button class="but">看看推荐</button>
+                        <button class="hmly-but">看看推荐</button>
                     </view>
                 </view>
             </block>
         </swiper-item>
         <swiper-item>
             <block>
-                <view class="NoContent">
+                <view class="hmly-no-content">
                     <text class="icon-empty text-gray" style="font-size:400rpx"></text>
-                    <view class="but-box">
+                    <view class="hmly-but-box">
                         <text style="font-size:30rpx" class="text-gray">没有内容</text>
-                        <button class="but">更多礼包</button>
+                        <button class="hmly-but">更多礼包</button>
                     </view>
                 </view>
             </block>

pages/collection/collection.wxss

@@ -1,6 +1,6 @@
 /* pages/collection/collection.wxss */
 
-.titleBar {
+.hmly-title-bar {
   width: 100%;
   height: 80rpx;
   /* 这个配色不对 */
@@ -12,7 +12,7 @@
   overflow: hidden;
 }
 
-.itemTitle {
+.hmly-item-title {
   width: 200rpx;
   height: 100%;
   text-align: center;
@@ -21,7 +21,7 @@
   color: #aaa;
 }
 
-.active:after {
+.hmly-active:after {
   content: '';
   width: 40rpx;
   height: 8rpx;
@@ -32,19 +32,19 @@
   background: #ff520f;
 }
 
-.active {
+.hmly-active {
   font-size: 32rpx;
   font-weight: 700;
   transition: all 0.3s;
   color: #333;
 }
 
-.collectionContent {
+.hmly-collection-content {
   width: 90%;
   margin: 0rpx auto;
   margin-top: 10rpx;
 }
-.collectionContent{
+.hmly-collection-content{
   width: 100%;
   text-align: center;
   position: absolute;
@@ -55,10 +55,10 @@ swiper{
   display: block;
   width: 100%;
 }
-.swiper-box-item{
+.hmly-swiper-box-item{
   height: 400rpx;
 }
-.NoContent{
+.hmly-no-content{
   width: 90%;
   height: auto;
   margin: 0rpx auto;
@@ -68,18 +68,18 @@ swiper{
   justify-content: center;
   text-align: center;
 }
-.NoContent image{
+.hmly-no-content image{
   width: 400rpx;
   height: 300rpx;
   align-self: center;
 }
-.but-box{
+.hmly-but-box{
   width: 80%;
   margin: 0rpx auto;
   margin-top: 40rpx;
   text-align: center;
 }
-.but{
+.hmly-but{
   width: 300rpx;
   height: 80rpx;
   font-size: 40rpx;

pages/details/details.wxml

@@ -2,61 +2,61 @@
   title和背景 
   注：这部分的背景色还没有处理好
 -->
-<view class="toptitlebar">
+<view class="hmly-top-title-bar">
     <!-- 背景虚化层 -->
-    <view class="bg" style="background:url({{imgurl}}); background-size: 100% 100%; background-repeat: no-repeat;"></view>
+    <view class="hmly-bg" style="background:url({{imgurl}}); background-size: 100% 100%; background-repeat: no-repeat;"></view>
     <!-- 内容 -->
-    <view class="baritem" wx:for="{{performanceInfo}}" wx:key="index">
-      <view class="baritemtop">
-        <view class="themebgimg" style="background:url({{item.imgurl}}); background-size:100% 100%"></view>
-        <view class="themeinfo">
-          <view class="themetitle">{{item.title}}</view>
-          <view class="themeauthor">
+    <view class="hmly-bar-item" wx:for="{{performanceInfo}}" wx:key="index">
+      <view class="hmly-bar-item-top">
+        <view class="hmly-theme-bg-img" style="background:url({{item.imgurl}}); background-size:100% 100%"></view>
+        <view class="hmly-theme-info">
+          <view class="hmly-theme-title">{{item.title}}</view>
+          <view class="hmly-theme-author">
             <!-- <image class="" src="" mode="widthFix"></image> -->
             {{item.author}} <text class="icon-right"></text>
           </view>
-          <view class="viewinfo">
-            <view class="viewinfoleft">{{item.num1}}人收藏</view>
-            <text class="viewinfomid">|</text>
-            <view class="viewinforight">已更新{{item.num2}}期</view>
+          <view class="hmly-view-info">
+            <view class="hmly-view-info-left">{{item.num1}}人收藏</view>
+            <text class="hmly-viewhmly-info-mid">|</text>
+            <view class="hmly-view-info-right">已更新{{item.num2}}期</view>
           </view>
         </view>
       </view>
-      <view class="baritembottom">
-        <button class="sharebut"><text class="icon-share"></text> 分享</button>
-        <button class="collection"><text class="icon-add"></text> 收藏</button>
+      <view class="hmly-bar-item-bottom">
+        <button class="hmly-share-but"><text class="icon-share"></text> 分享</button>
+        <button class="hmly-collection"><text class="icon-add"></text> 收藏</button>
       </view>
     </view>
 </view>
 <!-- 顶部选项 -->
-<view class="Performance">
-  <view class="selectbar">
-    <view class="detail">详情</view>
-    <view class="list active">节目<text>152</text>
+<view class="hmly-performance">
+  <view class="hmly-selectbar">
+    <view class="hmly-detail">详情</view>
+    <view class="hmly-list hmly-active">节目<text>152</text>
     </view>
   </view>
   <!-- 播放选项 -->
-  <view class="play">
-    <view class="playall">
+  <view class="hmly-play">
+    <view class="hmly-play-all">
       <text class="icon-video"></text> 播放全部
     </view>
-    <view class="playselect">
+    <view class="hmly-play-select">
       <view style="margin-right:20rpx"><text class="icon-order"></text> 正序</view>
       <view><text class="icon-list"></text> 选集</view>
     </view>
   </view>
   <!-- 节目列表 -->
-  <view class="performanceContent" wx:for="{{performance}}" wx:key="index">
+  <view class="hmly-performance-content" wx:for="{{performance}}" wx:key="index">
     <!-- 序号 -->
-    <view class="performanceIndex">{{index+1}}</view>
+    <view class="hmly-performance-index">{{index+1}}</view>
     <!-- 节目标题 -->
-    <view class="performanceInfo">
-      <view class="performanceInfoTop">
+    <view class="hmly-performance-info">
+      <view class="hmly-performance-info-top">
         <view style="font-size:33rpx">{{item.name}}</view>
         <view style="color:#aaaaaa">{{item.year}}</view>
       </view>
       <!-- 播放次数和时间 -->
-      <view class="performanceInfoBottom">
+      <view class="hmly-performance-info-bottom">
         <view><text class="icon-video"></text>{{item.count}}</view>
         <view style="margin-left:20rpx"><text class="icon-time"></text>{{item.time}}</view>
       </view>

pages/details/details.wxss

@@ -1,16 +1,16 @@
-.toptitlebar {
+.hmly-top-title-bar {
   width: 100%;
   height: 410rpx;
   overflow: hidden;
   position: relative;
 }
 /* 背景虚化层 */
-.bg{
+.hmly-bg{
   width: 100%;
   height: 410rpx;
   filter: blur(15rpx);
 }
-.baritem {
+.hmly-bar-item {
   width: 100%;
   height: 400rpx;
   margin-top: 50rpx;
@@ -19,7 +19,7 @@
   top: 0rpx;
 }
 
-.baritemtop {
+.hmly-bar-item-top {
   width: 100%;
   height: 200rpx;
   display: flex;
@@ -27,7 +27,7 @@
   align-items: center;
 }
 
-.themebgimg {
+.hmly-theme-bg-img {
   width: 200rpx;
   height: 200rpx;
   margin-right: 30rpx;
@@ -35,12 +35,12 @@
   background-size: 100% 100%;
 }
 
-.themeinfo {
+.hmly-theme-info {
   width: 60%;
   height: 200rpx;
 }
 
-.themetitle {
+.hmly-theme-title {
   color: #fff;
   font-size: 40rpx;
   display: -webkit-box;
@@ -50,13 +50,13 @@
   text-overflow: ellipsis;
 }
 
-.themeauthor {
+.hmly-theme-author {
   font-size: 25rpx;
   color: #fff;
   margin-top: 5rpx;
 }
 
-.viewinfo {
+.hmly-view-info {
   color: #fff;
   font-size: 30rpx;
   margin-top: 5rpx;
@@ -64,15 +64,15 @@
   justify-content: flex-start;
 }
 
-.viewinfoleft {
+.hmly-view-info-left {
   margin-right: 5rpx;
 }
 
-.viewinforight {
+.hmly-view-info-right {
   margin-left: 5rpx;
 }
 
-.baritembottom {
+.hmly-bar-item-bottom {
   width: 70%;
   height: 100rpx;
   display: flex;
@@ -83,7 +83,7 @@
   margin-top: 15rpx;
 }
 
-.baritembottom button {
+.hmly-bar-item-bottom button {
   width: 210rpx;
   height: 75rpx;
   text-align: center;
@@ -92,17 +92,17 @@
   border-radius: 20rpx;
 }
 
-.sharebut {
+.hmly-share-but {
   background: orangered;
   border: 1rpx solid #fff;
   margin-left: 70rpx;
 }
 
-.collection {
+.hmly-collection {
   background: orangered;
 }
 
-.Performance {
+.hmly-performance {
   width: 100%;
   height: 500rpx;
   border-top-left-radius: 20rpx;
@@ -110,7 +110,7 @@
   position: relative;
   top: -10rpx;
 }
-.selectbar {
+.hmly-selectbar {
   width: 100%;
   height: 100rpx;
   line-height: 100rpx;
@@ -124,15 +124,15 @@
   border-bottom: 1rpx solid #f1f1f1;
 }
 
-.detail {
+.hmly-detail {
   width: 50%;
 }
 
-.list {
+.hmly-list {
   width: 50%;
 }
 
-.play {
+.hmly-play {
   width: 100%;
   height: 100rpx;
   padding: 0rpx 40rpx;
@@ -143,13 +143,13 @@
   align-items: center;
 }
 
-.playall {
+.hmly-play-all {
   width: auto;
   text-align: center;
   font-size: 30rpx;
 }
 
-.playselect {
+.hmly-play-select {
   width: auto;
   display: flex;
   justify-content: space-between;
@@ -157,7 +157,7 @@
   font-size: 30rpx;
 }
 
-.performanceContent {
+.hmly-performance-content {
   width: 100%;
   height: 150rpx;
   display: flex;
@@ -168,7 +168,7 @@
   padding: 20rpx 20rpx;
 }
 
-.performanceIndex {
+.hmly-performance-index {
   width: 15%;
   height: 80rpx;
   text-align: center;
@@ -176,12 +176,12 @@
   color: #aaa;
 }
 
-.performanceInfo {
+.hmly-performance-info {
   width: 85%;
   height: 100%;
 }
 
-.performanceInfoTop {
+.hmly-performance-info-top {
   width: 100%;
   height: 50%;
   display: flex;
@@ -189,7 +189,7 @@
   font-size: 30rpx;
 }
 
-.performanceInfoBottom {
+.hmly-performance-info-bottom {
   width: 100%;
   height: auto;
   display: flex;
@@ -198,11 +198,11 @@
   font-size: 25rpx;
   margin-top: 20rpx;
 }
-.active{
+.hmly-active{
   position: relative;
   color: #333;
 }
-.active::after{
+.hmly-active::after{
   content: '';
   width: 80rpx;
   height: 5rpx;

pages/index/bangdan/bangdan.wxml

@@ -1,39 +1,38 @@
 <!-- 因为其他几个页面和榜单是一样的所以其他3个页面就都用的这一个界面 -->
-
 <block wx:if="{{showCover}}">
   <!-- 蒙板内容 要放在蒙板的外面-->
-  <view class="menu">
-    <view class="menuItem {{currentTab === index ? 'menuItemactive' : ''}}" 
+  <view class="hmly-menu">
+    <view class="hmly-menu-item {{currentTab === index ? 'hmly-menu-item-active' : ''}}" 
     wx:for="{{navTitle}}" wx:key="index" data-index="{{index}}" bindtap="CoverCheck">
       {{item.title}}
     </view>
   </view>
   <!-- 蒙板 -->
-  <view class="cover" bindtap="closeCover"></view>
+  <view class="hmly-cover" bindtap="closeCover"></view>
 </block>
 <block>
-  <view class="top-nav">
-    <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" catchtouchmove="preventTouchMove" >
-      <view class="navigate-item" id="item{{index}}" wx:for="{{navTitle}}" wx:key="index" data-index="{{index}}" bindtap="handleClick">
-        <view class="names {{currentTab === index ? 'active' : ''}}">{{item.title}}</view>
-        <view class="currtline {{currentTab === index ? 'active' : ''}}"></view>
+  <view class="hmly-top-nav">
+    <scroll-view class="hmly-scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" catchtouchmove="preventTouchMove" >
+      <view class="hmly-navigate-item" id="item{{index}}" wx:for="{{navTitle}}" wx:key="index" data-index="{{index}}" bindtap="handleClick">
+        <view class="hmly-names {{currentTab === index ? 'active' : ''}}">{{item.title}}</view>
+        <view class="hmly-currtline {{currentTab === index ? 'active' : ''}}"></view>
       </view>
     </scroll-view>
     <!-- 下拉按钮 -->
-    <view class="pull-down" bindtap="pullDown">
+    <view class="hmly-pull-down" bindtap="pullDown">
       <view class="icon-right"></view>
     </view>
   </view>
   <!-- 对应的内容区 -->
-  <view class="content-item"  wx:for="{{list}}" wx:key="index">
-    <view class="indexNumber">
+  <view class="hmly-content-item"  wx:for="{{list}}" wx:key="index">
+    <view class="hmly-index-number">
       <view>{{index > 10 ? index : '0'+(index+1)}}</view>
     </view>
     <image src="{{item.albumCoverUrl290}}"></image>
-    <view class="content-left">
-      <view class="content-title">{{item.title}}</view>
-      <view class="content-text">{{item.trackTitle}}</view>
-      <view class="count">
+    <view class="hmly-content-left">
+      <view class="hmly-content-title">{{item.title}}</view>
+      <view class="hmly-content-text">{{item.trackTitle}}</view>
+      <view class="hmly-count">
         <view style="margin-right:25rpx;">
           <!-- 本例中33.2亿的单位是写死的，此处应该是后端返回数据吧 -->
           <text class="icon-video"></text>

pages/index/bangdan/bangdan.wxss

@@ -1,11 +1,11 @@
-.top-nav{
+.hmly-top-nav{
   width: 100%;
   height: 80rpx;
   display: flex;
   justify-content: start;
 }
 
-.scroll-wrapper {
+.hmly-scroll-wrapper {
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
   background: #FFF;
@@ -21,7 +21,7 @@
   color: transparent;
 }
 
-.navigate-item {
+.hmly-navigate-item {
   display: inline-block;
   text-align: center;
   height: 90rpx;
@@ -29,30 +29,30 @@
   margin-right: 80rpx;
 }
 
-.names {
+.hmly-names {
   font-size: 28rpx;
   color: #3c3c3c;
 }
 
-.names.active {
+.hmly-names.active {
   color: #ff520f;
   font-weight: bold;
   font-size: 34rpx;
 }
 
-.currtline {
+.hmly-currtline {
   margin: -8rpx auto 0 auto;
   width: 100rpx;
   height: 1rpx;
   border-radius: 4rpx;
 }
 
-.currtline.active {
+.hmly-currtline.active {
   background: #ff520f;
   transition: all .3s;
 }
 
-.pull-down{
+.hmly-pull-down{
   width: 10%;
   height: 25rpx;
   padding: 30rpx 0rpx;
@@ -63,7 +63,7 @@
 }
 /* 内容区的代码 */
 
-.content-item{
+.hmly-content-item{
   width: 100%;
   display: flex;
   justify-content: space-around;
@@ -71,7 +71,7 @@
   padding: 20rpx 0rpx;
 }
 
-.indexNumber {
+.hmly-index-number {
   width: 15%;
   height: auto;
   padding: 20rpx 0rpx;
@@ -80,14 +80,14 @@
   color: #ff520f;
 }
 
-.content-item image {
+.hmly-content-item image {
   width: 140rpx;
   height: 140rpx;
   margin-top: 10rpx;
   border-radius: 15rpx;
 }
 
-.content-left {
+.hmly-content-left {
   padding: 10rpx 0rpx;
   margin-left: 30rpx;
   width: 60%;
@@ -95,7 +95,7 @@
   border-bottom: 1rpx solid #f1f1f1;
 }
 
-.content-title{
+.hmly-content-title{
   font-size: 35rpx;
   height: 40rpx;
   color: #000;
@@ -105,7 +105,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.content-text{
+.hmly-content-text{
   height: 40rpx;
   display: -webkit-box;
   -webkit-line-clamp: 1;/*行数n*/
@@ -117,7 +117,7 @@
   color: #ccc;
   margin-top: 15rpx;
 }
-.count{
+.hmly-count{
   font-size: 27rpx;
   color: #ccc;
   display: flex;
@@ -125,7 +125,7 @@
   margin-top: 15rpx;
 }
 
-.menu{ 
+.hmly-menu{ 
   width: 100%;
   height: 200rpx;
   position: fixed;
@@ -137,7 +137,7 @@
   flex-wrap: wrap;
   background: #fff;
 }
-.menuItem{
+.hmly-menu-item{
   color: #000;
   width: auto;
   font-size: 32rpx;
@@ -145,13 +145,13 @@
   margin: 0rpx 15rpx;
   position: relative;
 }
-.menuItemactive {
+.hmly-menu-item-active {
   font-size: 32rpx;
   font-weight: 700;
   transition: all .3s;
   color: #333333;
 }
-.menuItemactive:after{
+.hmly-menu-item-active:after{
   content: '';
   width: 40rpx;
   height: 8rpx;

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,30 +1,29 @@
-<!-- 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>
 
 <!-- 宫格导航 -->
-<view class="nav">
+<view class="hmly-nav">
   <block>  
-    <view class="navItem" bindtap="{{item.events}}" wx:for="{{navList}}"  wx:key="index">
+    <view class="hmly-nav-item" bindtap="{{item.events}}" wx:for="{{navList}}"  wx:key="index">
       <!-- 
         
         因为没有合适的图，所以全部使用的一样的 
@@ -32,29 +31,29 @@
 
         解决办法：你可以通过页面传参的方式来进行区分
         -->
-      <image class="navIcon" src="{{item.icon}}" mode="widthFix" lazy-load="false"></image>
-      <text class="navText">{{item.text}}</text>
+      <image class="hmly-nav-icon" src="{{item.icon}}" mode="widthFix" lazy-load="false"></image>
+      <text class="hmly-nav-text">{{item.text}}</text>
     </view>
   </block>
 </view>
 
 <!-- 猜你喜欢 -->
-<view class="like">
-  <view class="barTitle">
-    <view class="Title-left">猜你喜欢</view>
-    <view class="Title-right">查看全部 <text class="icon-right"></text> </view>
+<view class="hmly-like">
+  <view class="hmly-bar-title">
+    <view class="hmly-title-left">猜你喜欢</view>
+    <view class="hmly-title-right">查看全部 <text class="icon-right"></text> </view>
   </view>
   <!-- 这没有没有使用数据绑定，因为是练手而且数据比较少 -->
-  <view class="likeItemBox">
-    <view class="likeItem" bindtap="gotoDetails" data-coverImg="{{item.coverMiddle}}" data-title="{{item.intro}}" wx:for="{{guess}}" wx:key="{{index}}">
-      <view class="likeimg">
-        <image class="likeItemIcon" src="{{item.coverMiddle}}" mode="widthFix"></image>
-        <view class="likecover">
+  <view class="hmly-like-item-box">
+    <view class="hmly-like-item" bindtap="gotoDetails" data-coverImg="{{item.coverMiddle}}" data-title="{{item.intro}}" wx:for="{{guess}}" wx:key="{{index}}">
+      <view class="hmly-like-img">
+        <image class="hmly-like-item-icon" src="{{item.coverMiddle}}" mode="widthFix"></image>
+        <view class="hmly-like-cover">
           <!-- text用来显示icon  暂无 -->
           <text class=""></text> 4.6亿
         </view>
       </view>
-      <view class="likeText">{{item.intro}}</view>
+      <view class="hmly-like-text">{{item.intro}}</view>
     </view>
   </view>
 </view>
@@ -62,81 +61,81 @@
 <!-- 有数据的时候显示 -->
 <block wx:if="{{showitem}}">
   <!-- 有声小说 -->
-  <view class="contentList">
-    <view class="barTitle">
-      <view class="Title-left">有声小说</view>
-      <view class="Title-right">查看全部<text class="icon-right"></text></view>
+  <view class="hmly-content-list">
+    <view class="hmly-bar-title">
+      <view class="hmly-title-left">有声小说</view>
+      <view class="hmly-title-right">查看全部<text class="icon-right"></text></view>
     </view>
     <block wx:for="{{xiaoshuocontent}}" wx:key="index">
-      <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
-        <view class="contentImg">
+      <view class="hmly-content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
+        <view class="hmly-content-img">
           <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
-        <view class="content-right">
-          <view class="content-title">
-            <view class="titleText">{{item.title}}</view>
-            <view class="introduction">{{item.trackTitle}}</view>
+        <view class="hmly-content-right">
+          <view class="hmly-content-title">
+            <view class="hmly-title-text">{{item.title}}</view>
+            <view class="hmly-introduction">{{item.trackTitle}}</view>
           </view>
-          <view class="count">
-            <view class="playcount">
+          <view class="hmly-count">
+            <view class="hmly-play-count">
               <!-- <text class="icon-"></text> -->
               126亿
             </view>
-            <view class="jicount">{{item.tracks}}集</view>
+            <view class="hmly-ji-count">{{item.tracks}}集</view>
           </view>
         </view>
       </view>
     </block>
   </view>
   <!-- 相声评书 -->
-  <view class="contentList">
-    <view class="barTitle">
-      <view class="Title-left">相声评书</view>
-      <view class="Title-right">查看全部<text class="icon-right"></text></view>
+  <view class="hmly-content-list">
+    <view class="hmly-bar-title">
+      <view class="hmly-title-left">相声评书</view>
+      <view class="hmly-title-right">查看全部<text class="icon-right"></text></view>
     </view>
     <block wx:for="{{xiangshengcontent}}" wx:key="index">
-      <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
-        <view class="contentImg">
+      <view class="hmly-content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
+        <view class="hmly-content-img">
           <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
-        <view class="content-right">
-          <view class="content-title">
-            <view class="titleText">{{item.title}}</view>
-            <view class="introduction">{{item.trackTitle}}</view>
+        <view class="hmly-content-right">
+          <view class="hmly-content-title">
+            <view class="hmly-title-text">{{item.title}}</view>
+            <view class="hmly-introduction">{{item.trackTitle}}</view>
           </view>
-          <view class="count">
-            <view class="playcount">
+          <view class="hmly-count">
+            <view class="hmly-play-count">
               <!-- <text class="icon-"></text> -->
               126亿
             </view>
-            <view class="jicount">{{item.tracks}}集</view>
+            <view class="hmly-ji-count">{{item.tracks}}集</view>
           </view>
         </view>
       </view>
     </block>
   </view>
   <!-- 脱口秀 -->
-  <view class="contentList">
-    <view class="barTitle">
-      <view class="Title-left">脱口秀</view>
-      <view class="Title-right">查看全部<text class="icon-right"></text></view>
+  <view class="hmly-content-list">
+    <view class="hmly-bar-title">
+      <view class="hmly-title-left">脱口秀</view>
+      <view class="hmly-title-right">查看全部<text class="icon-right"></text></view>
     </view>
     <block wx:for="{{tuokocontent}}" wx:key="index">
-      <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
-        <view class="contentImg">
+      <view class="hmly-content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
+        <view class="hmly-content-img">
           <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
-        <view class="content-right">
-          <view class="content-title">
-            <view class="titleText">{{item.title}}</view>
-            <view class="introduction">{{item.trackTitle}}</view>
+        <view class="hmly-content-right">
+          <view class="hmly-content-title">
+            <view class="hmly-title-text">{{item.title}}</view>
+            <view class="hmly-introduction">{{item.trackTitle}}</view>
           </view>
-          <view class="count">
-            <view class="playcount">
+          <view class="hmly-count">
+            <view class="hmly-play-count">
               <!-- <view class="icon-"></view> -->
               126亿
             </view>
-            <view class="jicount">{{item.tracks}}集</view>
+            <view class="hmly-ji-count">{{item.tracks}}集</view>
           </view>
         </view>
       </view>
@@ -144,8 +143,8 @@
   </view>
 </block>
 <block wx:else>
-  <view class="dataNotip">
-    <view class="tip">
+  <view class="hmly-data-notip">
+    <view class="hmly-tip">
       网络暂时走丢了，请稍后再试
     </view>  
   </view>

pages/index/index.wxss

@@ -1,5 +1,5 @@
 /* 宫格导航 */
-.nav{
+.hmly-nav{
   width: 90%;
   height: 132rpx;
   margin: 0rpx auto;
@@ -9,46 +9,46 @@
   align-items: center;
   align-content: center;
 }
-.navItem{
+.hmly-nav-item{
   width: 94rpx;
   font-size: 20rpx;
   text-align: center;
   line-height: 35rpx;
   color: #aaa;
 }
-.navIcon{
+.hmly-nav-icon{
   width: 84rpx;
   height: 84rpx;
 }
 /* 猜你喜欢 */
-.like{
+.hmly-like{
   width: 90%;
   margin: 0rpx auto;
   margin-top: 40rpx;
 }
-.likeItemBox{
+.hmly-like-item-box{
   width: 100%;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
 }
-.likeItem{
+.hmly-like-item{
   width: 210rpx;
   height: 310rpx;
   border-radius: 15rpx;
 }
-.likeimg{
+.hmly-like-img{
   width: 210rpx;
   height: 210rpx;
   border-radius: 15rpx;
   position: relative;
 }
-.likeItemIcon{
+.hmly-like-item-icon{
   width: 100%;
   height: 100%;
   border-radius: 15rpx;
 }
-.likeText{
+.hmly-like-text{
   font-size: 28rpx;
   color: #333;
   margin-top: 10rpx;
@@ -58,7 +58,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.likecover{
+.hmly-like-cover{
   width: 190rpx;
   height: 40rpx;
   /* 透明背景层 */
@@ -72,12 +72,12 @@
   border-bottom-left-radius: 15rpx;
   border-bottom-right-radius: 15rpx;
 }
-.dataNotip{
+.hmly-data-notip{
   width: 100%;
   height: 300rpx;
   padding-top: 150rpx;
 }
-.tip{
+.hmly-tip{
   width: auto;
   height: 100rpx;
   text-align: center;

pages/search/search.wxml

@@ -1,39 +1,39 @@
 <!-- 搜索框 -->
-<view class="search">
-	<view class="search-left">
+<view class="hmly-search">
+	<view class="hmly-search-left">
 		<text class="icon-search"></text>
 		<input placeholder="搜索你想听的节目"></input>
 	</view>
-	<view class="search-right">取消</view>
+	<view class="hmly-search-right">取消</view>
 </view>
 <!-- 搜索历史 -->
-<view class="history">
+<view class="hmly-history">
 	<!-- 提示标题 -->
-	<view class="title">
-		<view class="title-text">搜索历史</view>
+	<view class="hmly-title">
+		<view class="hmly-title-text">搜索历史</view>
 		<text class="icon-delete text-gray"></text>
 	</view>
 	<!-- 内容 -->
-	<view class="history-content">
-		<view class="content-item bg-gray text-black">庆余年</view>
-		<view class="content-item bg-gray text-black">德云社</view>
-		<view class="content-item bg-gray text-black">评书</view>
-		<view class="content-item bg-gray text-black">英语</view>
+	<view class="hmly-history-content">
+		<view class="hmly-content-item bg-gray text-black">庆余年</view>
+		<view class="hmly-content-item bg-gray text-black">德云社</view>
+		<view class="hmly-content-item bg-gray text-black">评书</view>
+		<view class="hmly-content-item bg-gray text-black">英语</view>
 	</view>
 </view>
 <!-- 热门搜索 -->
-<view class="hot">
+<view class="hmly-hot">
 	<!-- 提示标题 -->
-	<view class="title">
+	<view class="hmly-title">
 		<view class="title-text">热门搜索</view>
 	</view>
-	<view class="hot-content">
-		<view class="hot-items" wx:for="{{hotData}}" wx:key="index">
-			<view class="item-left">
+	<view class="hmly-hot-content">
+		<view class="hmly-hot-items" wx:for="{{hotData}}" wx:key="index">
+			<view class="hmly-item-left">
 				<view class="{{index < 3 ? 'text-red' : ''}}">{{index + 1}}</view>
-				<view class="itemTitle text-black">{{item.title}}</view>
+				<view class="hmly-item-title text-black">{{item.title}}</view>
 			</view>
-			<text class="{{item.icon}} itemIcon {{item.color}}"></text>
+			<text class="{{item.icon}} {{item.color}}"></text>
 		</view>
 	</view>
 </view>

pages/search/search.wxss

@@ -3,7 +3,7 @@
   搜索部分css 
   ========
 */
-.search{
+.hmly-search{
   width: 90%;
   height: auto;
   display: flex;
@@ -11,7 +11,7 @@
   margin: 0rpx auto;
 }
 
-.search-left{
+.hmly-search-left{
   flex: 4;
   background-color: rgb(240, 240, 240);
   display: flex;
@@ -21,13 +21,13 @@
   border-radius: 15rpx;
 }
 
-.search input{
+.hmly-search input{
   width: 90%;
   height: 100%;
   font-size: 29rpx;
   margin-left: 20rpx;
 }
-.search-right{
+.hmly-search-right{
   flex: 0.5;
   font-size:30rpx;
   color: #aaa;
@@ -39,7 +39,7 @@
   搜索历史和热门搜索部分css 
   ========
 */
-.title{
+.hmly-title{
   width: 100%;
   height: 50rpx;
   display: flex;
@@ -47,17 +47,17 @@
   align-items: center;
   box-sizing: border-box;
 }
-.title-text{
+.hmly-title-text{
   color: #000;
   font-weight: 700;
 }
-.history{
+.hmly-history{
   width: 90%;
   height: auto;
   margin: 0rpx auto;
   margin-top: 80rpx;
 }
-.history-content{
+.hmly-history-content{
   width: 100%;
   height: auto;
   margin-top: 30rpx;
@@ -66,7 +66,7 @@
   flex-wrap: wrap;
   align-items: center;
 }
-.content-item{
+.hmly-content-item{
   width: 150rpx;
   font-size: 33rpx;
   text-align: center;
@@ -75,18 +75,18 @@
   border-radius: 25rpx;
 }
 
-.hot{
+.hmly-hot{
   width: 90%;
   height: auto;
   margin: 0rpx auto;
   margin-top: 80rpx;
 }
-.hot-content{
+.hmly-hot-content{
   width: 100%;
   height: auto;
   margin-top: 30rpx;
 }
-.hot-items{
+.hmly-hot-items{
   width: 100%;
   height: 50rpx;
   display: flex;
@@ -94,11 +94,11 @@
   align-items: center;
   margin-bottom: 20rpx;
 }
-.item-left{
+.hmly-item-left{
   display: flex;
   justify-content: flex-start;
   font-size: 32rpx;
 }
-.itemTitle{
+.hmly-item-title{
   margin-left: 40rpx;
 }

pages/user/phoneLogin/phoneLogin.wxml

@@ -1,37 +1,37 @@
-<view class="main bg-white" style="min-height:{{height}}px">
-    <view class="content_">
+<view class="hmly-main bg-white" style="min-height:{{height}}px">
+    <view class="hmly-content_">
         <!-- 提示标语 -->
-        <view class="slogn">
+        <view class="hmly-slogn">
             <!-- <view class="left-line" style="width:20rpx"></view> -->
             登录后即可收听你的收藏专辑哦
             <!-- <view class="right-line" style="width:20rpx"></view> -->
         </view>
         <!-- 表单输入部分 -->
-        <view class="login">
+        <view class="hmly-login">
             <form class="frombox" report-submit="false" bindsubmit="" bindreset="">
                 <!-- 输入手机号 -->
-                <view class="phoneNumber">
-                    <view class="code">+86</view>
-                    <input type="number" placeholder="请输入手机号" placeholder-class="place"></input>
+                <view class="hmly-phone-number">
+                    <view class="hmly-code">+86</view>
+                    <input type="number" placeholder="请输入手机号" placeholder-class="hmly-place"></input>
                 </view>      
                 <!-- 验证码 -->
-                <view class="yzm">
-                    <input type="number" placeholder="输入验证码" placeholder-class="place"></input>
-                    <view class="getcode">获取验证码</view>
+                <view class="hmly-yzm">
+                    <input type="number" placeholder="输入验证码" placeholder-class="hmly-place"></input>
+                    <view class="hmly-get-code">获取验证码</view>
                 </view>
-                <view class="submit" bindtap="login">
+                <view class="hmly-submit" bindtap="login">
                     <button><text class="icon-wechat"></text> 立即登录</button>
                 </view>
             </form>
         </view>
         <!-- 其他登录方式 -->
-        <view class="wechat" >
-            <view class="tips" >
-                <view class="left-line"></view>
+        <view class="hmly-wechat" >
+            <view class="hmly-tips" >
+                <view class="hmly-left-line"></view>
                 其他账户登录
-                <view class="right-line"></view>
+                <view class="hmly-right-line"></view>
             </view>
-            <view class="wecahtlogin" >
+            <view class="hmly-wecaht-login" >
                 <button><text class="icon-wechat"></text> 微信登陆</button>
             </view>
         </view>

pages/user/phoneLogin/phoneLogin.wxss

@@ -2,18 +2,18 @@
     96D655 
     CCCCCC
 */
-.main{
+.hmly-main{
    width: 100%; 
 }
 
-.content_{
+.hmly-content_{
     width: 80%;
     margin: 0rpx auto;
     margin-top: 100rpx;
     display: flex;
     flex-wrap: wrap
 }
-.slogn{
+.hmly-slogn{
     width: 100%;
     height: auto;
     font-size: 25rpx;
@@ -23,13 +23,13 @@
     justify-content: space-evenly;
     align-items: center;
 }
-.login{
+.hmly-login{
     width: 100%;
     height: auto;
     margin-top: 50rpx;
     overflow: hidden;
 }
-.phoneNumber{
+.hmly-phone-number{
     width: 100%;
     height: auto;
     display: flex;
@@ -38,7 +38,7 @@
     align-items: center;
     border-bottom: 0.5rpx solid #cccccc;
 }
-.code{
+.hmly-code{
     width: 60rpx;
     font-size: 27rpx;
     line-height: 60rpx;
@@ -48,7 +48,7 @@
     margin-right: 20rpx;
     color: #cccccc;
 }
-.yzm{
+.hmly-yzm{
     width: 100%;
     height: auto;
     display: flex;
@@ -58,7 +58,7 @@
     box-sizing: border-box;
     border-bottom: 0.5rpx solid #cccccc;
 }
-.getcode{
+.hmly-get-code{
     width: 200rpx;
     font-size: 35rpx;
     line-height: 60rpx;
@@ -69,17 +69,17 @@
     /* margin-left: 20rpx; */
     color: #cccccc;
 }
-.place{
+.hmly-place{
     font-size: 29rpx;
 }
-.submit{
+.hmly-submit{
     width: 100%;
     height: 100rpx;
     margin-top: 50rpx;
     border-radius: 50rpx;
     border: 0rpx;
 }
-.submit button{
+.hmly-submit button{
     width: 100%;
     height: 100rpx;
     /* margin-top: 50rpx; */
@@ -89,37 +89,37 @@
     background: #cccccc;
     font-size: 38rpx;
 }
-.wechat{
+.hmly-wechat{
     width: 100%;
     height: auto;
     margin-top: 150rpx;
     text-align: center;
 }
-.tips{
+.hmly-tips{
     font-size: 32rpx;
     color: #333333;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
 }
-.left-line{
+.hmly-left-line{
     width: 100rpx;
     height: 3rpx;
     background: #aaa;
 }
-.right-line{
+.hmly-right-line{
     width: 100rpx;
     height: 3rpx;
     background: #aaa;
 }
-.wecahtlogin{
+.hmly-wecaht-login{
     width: 100%;
     height: 100rpx;
     margin-top: 100rpx;
     border-radius: 50rpx;
     border: 0rpx;
 }
-.wecahtlogin button{
+.hmly-wecaht-login button{
     width: 100%;
     height: 100rpx;
     border-radius: 50rpx;

pages/user/user.wxml

@@ -1,64 +1,64 @@
 <!-- pages/user/user.wxml -->
 <block wx:if="{{login}}">
 	<!-- logo -->
-	<view class="logo">
-		<image class="logoImg" src="/image/logo.png" mode="widthFix"></image>
+	<view class="hmly-logo">
+		<image class="hmly-logo-img" src="/image/logo.png" mode="widthFix"></image>
 	</view>
 	<!-- 登录按钮 -->
-	<view class="loginButton">
+	<view class="hmly-login-button">
 		<!-- 在本小程序中只实现了微信登录 -->
-		<view class="wechatLogin">
+		<view class="hmly-wechat-login">
 			<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
 				<text class="icon-message"></text> 微信登录
 			</button>
 		</view>
-		<view class="phoneLogin" bindtap="phoneLogin">
+		<view class="hmly-phone-login" bindtap="phoneLogin">
 			<button>手机号登录</button>
 		</view>
 	</view>
 </block>
 <!-- 已经登录显示界面 -->
 <block wx:else>
-	<view class="body" style="height:{{phoneHeight}}px">
+	<view class="hmly-body" style="height:{{phoneHeight}}px">
 		<!-- 头像昵称签到部分 -->
-		<view class="topBar">
+		<view class="hmly-top-bar">
 			<!-- 头像昵称 -->
-			<view class="userImg">
-				<view class="avatar_nickname">
-					<view class="avatar">
-						<image class="avatarImg" src="{{avatarUrl}}"></image>
+			<view class="hmly-user-img">
+				<view class="hmly-avatar-nickname">
+					<view class="hmly-avatar">
+						<image class="hmly-avatar-img" src="{{avatarUrl}}"></image>
 					</view>
-					<view class="nickname">
+					<view class="hmly-nickname">
 						<text class="#">{{nickName}}</text>
 						<!-- vip勋章 -->
 						<text class="icon-vip" style="margin-left:30rpx"></text>
 					</view>
 				</view>
-				<view class="kefu"><text class="icon-service"></text>客服服务</view>
+				<view class="hmly-kefu"><text class="icon-service"></text>客服服务</view>
 			</view>
 			<!-- 签到 -->
-			<view class="qiandao">
+			<view class="hmly-qian-dao">
 				<!-- 签到涉及canvas所以暂时搁置 -->
-				<view class="qianText">
+				<view class="hmly-qian-text">
 					<text class="icon-dateTable text-gray"></text>
 					<text style="margin-left:20rpx">签到</text>
 				</view>
-				<view class="icon_">
+				<view class="hmly-icon_">
 					<text class="icon-right text-gray"></text>
 				</view>
 			</view>
 		</view>
 		<!-- 选项卡部分 -->
-		<view class="chioce">
+		<view class="hmly-chioce">
 			<!-- 选项卡item -->
-			<view class="choiceItem" bindtap="openSwitch">
+			<view class="hmly-choice-item" bindtap="openSwitch">
 				<view class="">
 					<text class="icon-time text-gray"></text>
 					<text style="margin-left:20rpx">定时关闭</text>
 				</view>
 				<text class="icon-right text-gray"></text>
 			</view>
-			<view class="choiceItem">
+			<view class="hmly-choice-item">
 				<!-- 
 					
 					因为切换为夜间模式需要使用自定义的tarbar，
@@ -71,7 +71,7 @@
 				</view>
 				<switch></switch>
 			</view>
-			<view class="choiceItem">
+			<view class="hmly-choice-item">
 				<!-- 意见反馈需要使用button的open-type属性 此处没有设置-->
 				<view class="">
 					<text class="icon-write text-gray"></text>
@@ -79,7 +79,7 @@
 				</view>
 				<text class="icon-right text-gray"></text>
 			</view>
-			<view class="choiceItem" bindtap="gotoLogin">
+			<view class="hmly-choice-item" bindtap="gotoLogin">
 				<view class="">
 					<text class="icon-changeCount text-gray"></text>
 					<text style="margin-left:20rpx">切换账号</text>
@@ -92,14 +92,14 @@
 
 <!-- 定时关闭部分 -->
 <block wx:if="{{show}}">
-	<view class="switch">
-		<scroll-view class="scroll-wrapper" scroll-y scroll-with-animation="true" catchtouchmove="preventTouchMove">
-			<view class="switch-item" wx:for="{{timeout}}" wx:key="{{index}}" bindtap="chooseTimeOut" data-activeIndex="{{index}}">
+	<view class="hmly-switch">
+		<scroll-view class="hmly-scroll-wrapper" scroll-y scroll-with-animation="true" catchtouchmove="preventTouchMove">
+			<view class="hmly-switch-item" wx:for="{{timeout}}" wx:key="{{index}}" bindtap="chooseTimeOut" data-activeIndex="{{index}}">
 				<view>{{item.text}}</view>
-				<view class="active" wx:if="{{index == activeIndex}}"></view>
+				<view class="hmly-active" wx:if="{{index == activeIndex}}"></view>
 			</view>
 		</scroll-view>
-		<view class="close" bindtap="close">关闭</view>
+		<view class="hmly-close" bindtap="close">关闭</view>
 	</view>
-	<view class="cover"></view>
+	<view class="hmly-cover"></view>
 </block>

pages/user/user.wxss

@@ -1,15 +1,15 @@
 /* pages/user/user.wxss */
-.body {
+.hmly-body {
     background-color: #f1f1f1;
 }
 
-.topBar {
+.hmly-top-bar {
     width: 100%;
     height: 270rpx;
     background-color: #fff;
 }
 
-.userImg {
+.hmly-user-img {
     width: 95%;
     height: 200rpx;
     margin: 0rpx auto;
@@ -19,7 +19,7 @@
 
 }
 
-.avatar_nickname {
+.hmly-avatar-nickname {
     width: 70%;
     height: 100%;
     display: flex;
@@ -27,38 +27,38 @@
     align-items: center;
 }
 
-.avatar {
+.hmly-avatar {
     width: 120rpx;
     height: 120rpx;
     border-radius: 50%;
 }
 
-.avatarImg {
+.hmly-avatar-img {
     width: 120rpx;
     height: 120rpx;
     border-radius: 50%;
 }
 
-.nickname {
+.hmly-nickname {
     margin-left: 20rpx;
 }
 
-.qiandao {
+.hmly-qian-dao {
     width: 90%;
     height: 70rpx;
     padding: 0rpx 30rpx;
     font-size: 32rpx;
 }
 
-.qianText {
+.hmly-qian-text {
     float: left;
 }
 
-.icon_ {
+.hmly-icon_ {
     float: right;
 }
 
-.kefu {
+.hmly-kefu {
     width: 160rpx;
     height: 50rpx;
     font-size: 25rpx;
@@ -70,7 +70,7 @@
 }
 
 /* 选项卡 */
-.chioce {
+.hmly-chioce {
     width: 100%;
     height: auto;
     background-color: #fff;
@@ -78,7 +78,7 @@
     font-size: 32rpx;
 }
 
-.choiceItem {
+.hmly-choice-item {
     display: flex;
     width: 90%;
     height: 60rpx;
@@ -88,7 +88,7 @@
 }
 
 /* 定时关闭 */
-.switch {
+.hmly-switch {
     width: 100%;
     height: 500rpx;
     position: fixed;
@@ -104,7 +104,7 @@
     padding-top: 20rpx;
 }
 
-.switch-item {
+.hmly-switch-item {
     width: 100%;
     height: 120rpx;
     line-height: 120rpx;
@@ -115,14 +115,14 @@
     /* padding: 0rpx 30rpx; */
 }
 
-.close {
+.hmly-close {
     width: 100%;
     height: 100rpx;
     text-align: center;
     line-height: 100rpx;
 }
 
-.scroll-wrapper {
+.hmly-scroll-wrapper {
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
     background: #FFF;
@@ -137,7 +137,7 @@
     height: 0;
     color: transparent;
 }
-.active{
+.hmly-active{
     width: 30rpx;
     height: 30rpx;
     background-color: red;

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,19 +51,19 @@
   background-color: #cdcdcd;
   transition: all .3s;
 }
-.dotActive{
+.hmly-dot-active{
   width: 10rpx;
   height: 10rpx;
   background-color: #fff;
 }
 
 /* 主要内容列表样式 */
-.contentList{
+.hmly-content-list{
   width: 90%;
   margin: 0rpx auto;
   margin-top: 10rpx;
 }
-.content{
+.hmly-content{
   width: 100%;
   height: auto;
   padding: 20rpx 0rpx;
@@ -65,31 +71,31 @@
   justify-content: space-between;
   border-bottom: 1rpx solid #f1f1f1;
 }
-.contentImg{
+.hmly-content-img{
   width: 232rpx;
   height: 232rpx;
   border-radius: 15rpx;
 }
-.contentImg>image{
+.hmly-content-img>image{
   width: 100%;
   height: 100%;
   border-radius: 15rpx;
 }
-.content-right{
+.hmly-content-right{
   width: 530rpx;
   height: 100%;
   margin-left: 20rpx;
   display: flex;
   flex-direction: column;
 }
-.content-title{
+.hmly-content-title{
   width: 100%;
   height: 138rpx;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
-.titleText{
+.hmly-title-text{
   width: 100%;
   font-size: 35rpx;
   color: #333;
@@ -100,7 +106,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.introduction{
+.hmly-introduction{
   width: 100%;
   font-size: 28rpx;
   color: #cdcdcd;
@@ -112,25 +118,25 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.count{
+.hmly-count{
   width: 100%;
   height: 50rpx;
   display: flex;
   justify-content: start;
   align-items: center;
 }
-.playcount{
+.hmly-play-count{
  font-size: 25rpx;
  color: #cdcdcd;
  margin-right: 30rpx;
 }
-.jicount{
+.hmly-ji-count{
   font-size: 25rpx;
   color: #cdcdcd;
 }
 
 /* 登录样式 */
-.logo {
+.hmly-logo {
   width: 128rpx;
   height: 128rpx;
   margin: 0rpx auto;
@@ -138,19 +144,19 @@
   top: 200rpx;
 }
 
-.logoImg {
+.hmly-logo-img {
   width: 100%;
   height: 100%;
 }
 
-.loginButton {
+.hmly-login-button {
   width: 80%;
   margin: 0rpx auto;
   position: relative;
   top: 500rpx;
 }
 
-.wechatLogin, .phoneLogin {
+.hmly-wechat-login, .phone-login {
   width: 100%;
   height: 80rpx;
   border-radius: 50rpx;
@@ -158,18 +164,18 @@
   outline: none;
 }
 
-.wechatLogin button {
+.hmly-wechat-login button {
   background-color: #70e500;
   border-radius: 50rpx;
   border: none;
   color: #fff;
 }
 
-.phoneLogin {
+.hmly-phone-login {
   margin-top: 40rpx;
 }
 
-.phoneLogin button {
+.hmly-phone-login button {
   border-radius: 50rpx;
   border: 1rpx solid #70e500;
   background-color: #fff;
@@ -177,7 +183,7 @@
 }
 
 /*蒙板*/
-.cover{
+.hmly-cover{
   position: fixed;
   top: 0;
   right: 0;
@@ -192,19 +198,19 @@
 
 
 /* bar相关 */
-.marginTopBottom {
+.hmly-margin-top-bottom {
   margin-top: 20rpx;
   margin-bottom: 30rpx;
 }
 
-.barTitle {
+.hmly-bar-title {
   width: 100%;
   height: 56rpx;
   padding: 20rpx 0rpx;
   text-align: center;
 }
 
-.Title-left {
+.hmly-title-left {
   float: left;
   font-size: 37rpx;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@@ -212,7 +218,7 @@
   color: #333;
 }
 
-.Title-right {
+.hmly-title-right {
   float: right;
   font-size: 26rpx;
   color: #aaa;