Merge pull request #3 from Notobey/Himalayan-lite2.0

Himalayan lite2.0

app.wxss

@@ -4,102 +4,77 @@
 @import 'icon.wxss';
 
 /* 登录样式 */
-.logo{
-    width: 128rpx;
-    height: 128rpx;
-    margin: 0rpx auto;
-    /* background-color: aqua */
-    position: relative;
-    top:200rpx;
+
+.logo {
+  width: 128rpx;
+  height: 128rpx;
+  margin: 0rpx auto;
+  position: relative;
+  top: 200rpx;
+}
+
+.logoImg {
+  width: 100%;
+  height: 100%;
 }
-.logoImg{
-    width: 100%;
-    height: 100%;
+
+.loginButton {
+  width: 80%;
+  margin: 0rpx auto;
+  position: relative;
+  top: 500rpx;
 }
-.loginButton{
-    width: 80%;
-    margin: 0rpx auto;
-    position: relative;
-    top: 500rpx;
+
+.wechatLogin, .phoneLogin {
+  width: 100%;
+  height: 80rpx;
+  border-radius: 50rpx;
+  border: 0rpx;
+  outline: none;
+}
+
+.wechatLogin button {
+  background-color: #70e500;
+  border-radius: 50rpx;
+  border: none;
+  color: #fff;
 }
-.wechatLogin,.phoneLogin{
-    width: 100%;
-    height: 80rpx;
-    border-radius: 50rpx;
-    border: 0rpx;
-    outline: none;
+
+.phoneLogin {
+  margin-top: 40rpx;
 }
-.wechatLogin button{
-    background-color: #70E500;
-    border-radius: 50rpx;
-    /* border: 1rpx solid #70E500; */
-    border: none;
-    color: #fff;
+
+.phoneLogin button {
+  border-radius: 50rpx;
+  border: 1rpx solid #70e500;
+  background-color: #fff;
+  color: #70e500;
 }
-.phoneLogin{
-    margin-top: 40rpx;
+
+/* 公共类 */
+
+.marginTopBottom {
+  margin-top: 20rpx;
+  margin-bottom: 30rpx;
 }
-.phoneLogin button{
-    border-radius: 50rpx;
-    border: 1rpx solid #70E500;
-    background-color: #fff;
-    color: #70E500;
+
+.barTitle {
+  width: 100%;
+  height: 56rpx;
+  padding: 20rpx 0rpx;
+  text-align: center;
 }
 
-/* 搜索框 */
-.search{
-    width: 90%;
-    margin: 0rpx auto;
-    height: 35rpx;
-    /* border: 1rpx solid #cdcdcd; */
-    border-radius: 10rpx;
-    font-size: 25rpx;
-    padding: 10rpx 0rpx;
-    display: flex;
-    justify-content: start;
-    background-color: rgb(240, 240, 240);
-    /* margin-top: 20rpx;
-    margin-bottom: 20rpx; */
-  }
-  .search-box{
-    width: 95%;
-    height: 25rpx;
-    margin-left: 10rpx;
-  }
-  .icon-search{
-    margin-left: 20rpx;
-    line-height: 35rpx;
-  }
-  .search>input{
-    width: 90%;
-    height: 25rpx;
-    font-size: 25rpx;
-    position: relative;
-    top: -5rpx;
-    left: 10rpx;
-    /* background-color: red */
-  }
+.Title-left {
+  float: left;
+  font-size: 37rpx;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-weight: 800;
+  color: #333;
+}
 
-  /* 公共类 */
-.marginTopBottom{
-    margin-top: 20rpx;
-    margin-bottom: 30rpx;
-  }
-  .barTitle{
-    width: 100%;
-    height: 56rpx;
-    padding: 20rpx 0rpx;
-    text-align: center;
-  }
-  .Title-left{
-    float: left;
-    font-size: 37rpx;
-    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-    font-weight: 800;
-    color: #333;
-  }
-  .Title-right{
-    float: right;
-    font-size: 26rpx;
-    color: #aaa;
-  }
+.Title-right {
+  float: right;
+  font-size: 26rpx;
+  color: #aaa;
+}

component/search/search.js

@@ -0,0 +1,31 @@
+//Component Object
+Component({
+    properties: {
+        myProperty:{
+            type:String,
+            value:'',
+            observer: function(){}
+        },
+    },
+    data: {
+
+    },
+    methods: {
+        
+    },
+    created: function(){
+
+    },
+    attached: function(){
+
+    },
+    ready: function(){
+
+    },
+    moved: function(){
+
+    },
+    detached: function(){
+
+    },
+});

component/search/search.json

@@ -0,0 +1,3 @@
+{
+    "component":true
+}

component/search/search.wxml

@@ -0,0 +1,4 @@
+<view class="search marginTopBottom">
+  <view class="icon-search"></view>
+  <input placeholder="搜索你想听的节目"></input>
+</view>

component/search/search.wxss

@@ -0,0 +1,33 @@
+/* 搜索框 */
+.search{
+    width: 90%;
+    margin: 0rpx auto;
+    height: 35rpx;
+    /* border: 1rpx solid #cdcdcd; */
+    border-radius: 10rpx;
+    font-size: 25rpx;
+    padding: 10rpx 0rpx;
+    display: flex;
+    justify-content: start;
+    background-color: rgb(240, 240, 240);
+    /* margin-top: 20rpx; */
+    margin-bottom: 20rpx;
+  }
+  .search-box{
+    width: 95%;
+    height: 25rpx;
+    margin-left: 10rpx;
+  }
+  .icon-search{
+    margin-left: 20rpx;
+    line-height: 35rpx;
+  }
+  .search>input{
+    width: 90%;
+    height: 25rpx;
+    font-size: 25rpx;
+    position: relative;
+    top: -5rpx;
+    left: 10rpx;
+    /* background-color: red */
+  }

pages/classification/classification.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "search":"/component/search/search"
+  }
 }

pages/classification/classification.wxml

@@ -1,9 +1,6 @@
 <!--pages/classification/classification.wxml-->
 <!-- 搜索框 -->
-<view class="search marginTopBottom">
-  <view class="icon-search"></view>
-  <input placeholder="搜索你想听的节目"></input>
-</view>
+<search></search>
 
 <!-- 分类索引 -->
 <view class="ification">

pages/collection/collection.js

@@ -11,19 +11,12 @@ Page({
    * 页面的初始数据
    */
   data: {
+    currentIndex:0,
     content: [
-      {
-        text: "我的收藏"
-      },
-      {
-        text: "我的已购"
-      },
-      {
-        text: "收听历史"
-      },
-      {
-        text: "我的礼包"
-      }
+      {text: "我的收藏"},
+      {text: "我的已购"},
+      {text: "收听历史"},
+      {text: "我的礼包"}
     ]
   },
 
@@ -74,4 +67,11 @@ Page({
       }
     })
   },
+  checkItem(e){
+    console.log(e)
+    var that = this;
+    that.setData({
+      currentIndex : e.target.dataset.index
+    })
+  }
 })

pages/collection/collection.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "search":"/component/search/search"
+  }
 }

pages/collection/collection.wxml

@@ -2,7 +2,7 @@
 <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" binderror="" bindload=""></image>
+        <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false"></image>
     </view>
     <!-- 登录按钮 -->
     <view class="loginButton" hover-class="none" hover-stop-propagation="false">
@@ -19,12 +19,10 @@
 </block>
 <block wx:else>
     <!-- 搜索框 -->
-    <view class="search marginTopBottom">
-        <view class="icon-search"></view>
-        <input placeholder="搜索你想听的节目"></input>
-    </view>
+    <search></search>
     <view class="titleBar">
-      <view class="itemTitle" wx:for="{{content}}" wx:key>
+      <view class="itemTitle {{index == currentIndex ? 'active' : ' '}}" 
+        data-index="{{index}}" bindtap="checkItem" wx:for="{{content}}" wx:key="index">
           {{item.text}}
       </view>
     </view>

pages/collection/collection.wxss

@@ -3,24 +3,40 @@
     width: 100%;
     height: 80rpx;
     /* 这个配色不对 */
-    border-bottom: 1rpx solid #aaaaaa;
+    border-bottom: 1rpx solid #f1f1f1;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
     font-size: 28rpx;
     overflow: hidden;
 }
 .itemTitle{
-    width: auto;
-   
+    width: 200rpx;
+    height: 100%;
+    text-align: center;
+    line-height: 80rpx;
+    position: relative;
+    color: #aaaaaa;
 }
-.currtline {
+.active:after{
+  content: '';
+  width: 40rpx;
+  height: 8rpx;
+  position: absolute;
+  bottom: 0rpx;
+  left: 70rpx;
+  border-radius: 15rpx;
+  background: #ff520f;
+}
+/* .currtline {
     margin: -8rpx auto 0 auto;
     width: 100rpx;
     height: 1rpx;
     border-radius: 4rpx;
-  }
-  .currtline.active {
-    background: #ff520f;
-    transition: all .3s;
-  }
+} */
+.active {
+  font-size: 32rpx;
+  font-weight: 700;
+  transition: all .3s;
+  color: #333333;
+}

pages/details/detail.wxss

@@ -1,13 +0,0 @@
-.top-title-bar{
-    width: 100%;
-    height: 300rpx;
-    background-color: black;
-}
-.Performance{
-    width: 100%;
-    height: 500rpx;
-    /* height: 100%; */
-    background-color: #fff;
-    border-top-left-radius: 25rpx;
-    border-top-right-radius: 25rpx;
-}

pages/details/details.wxml

@@ -1,33 +1,117 @@
 <!-- title和背景 -->
-<view class="top-title-bar">
-    <view class="">
-        <view class="">
-            dsadsa
+<view class="toptitlebar">
+    <view class="baritem">
+      <view class="baritemtop">
+        <view class="themebgimg" style="background:url(../../image/guess1.jpg)"></view>
+        <view class="themeinfo">
+          <view class="themetitle">完 | 米小圈上学记：一二三年级</view>
+          <view class="themeauthor">
+            <!-- <image class="" src="" mode="widthFix"></image> -->
+            米小圈 <text class="icon-right"></text>
+          </view>
+          <view class="viewinfo">
+            <view class="viewinfoleft">167.6万人收藏</view>
+            <text class="viewinfomid">|</text>
+            <view class="viewinforight">已更新257期</view>
+          </view>
         </view>
-        <view class="">
-            dsad
-        </view>
-    </view>
-    <view class="">
-        
+      </view>
+      <view class="baritembottom">
+        <button class="sharebut"><text class="icon-share"></text> 分享</button>
+        <button class="collection"><text class="icon-add"></text> 收藏</button>
+      </view>
     </view>
 </view>
 <!-- 节目列表 -->
 <view class="Performance">
-    <view class="">
-        <view class="" wx:for="{{}}">
-            {{}}
-        </view>
+  <view class="selectbar">
+    <view class="detail">详情</view>
+    <view class="list">
+      节目 <text class="">152</text>
     </view>
-    <view class="">
-        
+  </view>
+  <view class="play">
+    <view class="playall">
+      <text class="icon-video"></text> 播放全部
     </view>
-    <view class="">
-        <view class="">
-            
-        </view>
-        <view class="">
-            
-        </view>
+    <view class="playselect">
+      <view style="margin-right:20rpx"><text class="icon-all"></text> 正序</view>
+      <view><text class="icon-all"></text> 选集</view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
     </view>
+  </view>
 </view>

pages/details/details.wxss

@@ -0,0 +1,164 @@
+.toptitlebar{
+  width: 100%;
+  height: 410rpx;
+  background: rgba(27, 123, 136, .5);
+  overflow: hidden;
+}
+.Performance{
+  width: 100%;
+  height: 500rpx;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  position: relative;
+  top: -10rpx;
+}
+.baritem{
+  width: 100%;
+  height: 400rpx;
+  margin-top: 50rpx;
+  padding: 20rpx 0rpx;
+}
+.baritemtop{
+  width: 100%;
+  height: 200rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.themebgimg{
+  width: 200rpx;
+  height: 200rpx;
+  margin-right: 30rpx;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.themeinfo{
+  width: 60%;
+  height: 200rpx;
+}
+.themetitle{
+  color: #fff;
+  font-size: 40rpx;
+}
+.themeauthor{
+  font-size: 25rpx;
+  color: #fff;
+  margin-top: 5rpx;
+}
+.viewinfo{
+  color: #fff;
+  font-size: 30rpx;
+  margin-top: 5rpx;
+  display: flex;
+  justify-content: flex-start;
+}
+.viewinfoleft{
+  margin-right: 5rpx;
+}
+.viewinforight{
+  margin-left: 5rpx;
+}
+.baritembottom{
+  width: 70%;
+  height: 100rpx;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-radius: 20rpx;
+  float: right;
+  margin-top: 15rpx;
+}
+.baritembottom button{
+  width: 210rpx;
+  height: 75rpx;
+  text-align: center;
+  font-size: 30rpx;
+  color: #fff;
+  border-radius: 20rpx;
+}
+.sharebut{
+  background: orangered;
+  border: 1rpx solid #fff;
+  margin-left: 70rpx;
+}
+.collection{
+  background: orangered;
+}
+.selectbar{
+  width: 100%;
+  height: 100rpx;
+  padding: 20rpx 0rpx;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  box-sizing: border-box;
+  color: #aaaaaa;
+  border-radius: 15rpx;
+  border-bottom: 1rpx solid #f1f1f1;
+}
+.detail{
+  width: 50%;
+}
+.list{
+  width: 50%;
+}
+.play{
+  width: 100%;
+  height: 100rpx;
+  padding: 0rpx 40rpx;
+  box-sizing: border-box;
+  border-bottom: 1rpx solid #f1f1f1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.playall{
+  width: auto;
+  text-align: center;
+  font-size: 30rpx;
+}
+.playselect{
+  width: auto;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  font-size: 30rpx;
+}
+.performanceContent{
+  width: 100%;
+  height: 150rpx;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: 1rpx solid #f1f1f1;
+  padding: 20rpx 20rpx;
+}
+.performanceIndex{
+  width: 15%;
+  height: 80rpx;
+  text-align: center;
+  line-height: 80rpx;
+  color:#aaaaaa;
+}
+.performanceInfo{
+  width: 85%;
+  height: 100%;
+}
+.performanceInfoTop{
+  width: 100%;
+  height: 50%;
+  display: flex;
+  justify-content: space-between;
+  font-size: 30rpx;
+}
+.performanceInfoBottom{
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-start;
+  color: #aaaaaa;
+  font-size: 25rpx;
+  margin-top: 20rpx;
+}

pages/index/bangdan/bangdan.js

@@ -7,6 +7,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    showCover:false,
     currentTab:0,
     navTitle:[
       {title:'经典必听'},
@@ -52,6 +53,15 @@ Page({
     })
   },
   pullDown:function(){
-    
+    var that = this;
+    that.setData({
+      showCover:true
+    })
+  },
+  closeCover:function(){
+    var that = this;
+    that.setData({
+      showCover:false
+    })
   }
 })

pages/index/bangdan/bangdan.wxml

@@ -1,21 +1,30 @@
-<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>
+<block wx:if="{{showCover}}">
+  <!-- 蒙板内容 要放在蒙板的外面-->
+  <view class="menu">
+    <view class="menuItem" wx:for="{{navTitle}}">{{item.title}}
+      <!-- <view class="currtline active"></view> -->
     </view>
-  </scroll-view>
-  <!-- 下拉按钮 -->
-  <view class="pull-down" bindtap="pullDown">
-    <view class="icon-right"></view>
   </view>
-</view>
-<!-- 对应的内容区 -->
-<block wx:for="{{list}}" wx:key="{{index}}">
-  <view class="content">
+  <!-- 蒙板 -->
+  <view class="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>
+    </scroll-view>
+    <!-- 下拉按钮 -->
+    <view class="pull-down" bindtap="pullDown">
+      <view class="icon-right"></view>
+    </view>
+  </view>
+  <!-- 对应的内容区 -->
+  <view class="content"  wx:for="{{list}}" wx:key="{{index}}">
     <view class="indexNumber">
-    <!-- 此处写法不对，到了两位数的时候就不行了，并无好的方法，这里应该是后端给的数据 -->
-      <view>0{{index}}</view>
+      <view>{{index > 10 ? index : '0'+index}}</view>
     </view>
     <image src="{{item.albumCoverUrl290}}"></image>
     <view class="content-left">
@@ -35,12 +44,3 @@
     </view>
   </view>
 </block>
-
-<!-- 蒙布 -->
-<!-- <view class="cover">
-  <view class="">
-    <view class="">
-      撒大赛
-    </view>
-  </view>
-</view> -->

pages/index/bangdan/bangdan.wxss

@@ -127,8 +127,33 @@
 /* 蒙布 */
 
 .cover{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  position: absolute;
+  z-index: 9000;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0.7;
+}
+.menu{ 
+  width: 100%;
+  height: 200rpx;
+  position: fixed;
+  top: 0rpx;
   z-index: 9999;
-}
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  background: #fff;
+}
+.menuItem{
+  color: #000;
+  width: auto;
+  font-size: 32rpx;
+  padding: 20rpx 10rpx;
+  margin: 0rpx 15rpx;
+}

pages/index/index.js

@@ -21,8 +21,8 @@ Page({
       {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:'听相声'},
-      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'儿童故事'},
+      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'听知识'},
+      
     ],
     swiperCurrent: 0,
   },
@@ -67,5 +67,10 @@ Page({
     wx.navigateTo({
       url: '/pages/index/bangdan/bangdan',
     })
+  },
+  gotoDetails(){
+    wx.navigateTo({
+      url: '/pages/details/details',
+    })
   }
 })

pages/index/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "search":"/component/search/search"
+  }
 }

pages/index/index.wxml

@@ -1,16 +1,16 @@
 <!-- index.wxml -->
 <!-- 搜索框 -->
-<view class="search marginTopBottom">
-  <view class="icon-search"></view>
-  <input placeholder="搜索你想听的节目"></input>
-</view>
+<search></search>
 <!-- 轮播图 -->
 <view class="swiper-container">
-  <swiper class="swiper" autoplay="true" circular="true" interval="3000" easing-function="easeOutCubic" current="{{swiperCurren}}" bindchange="swiperChange">
+  <swiper class="swiper" autoplay="true" circular="true" 
+    interval="3000" easing-function="easeOutCubic" 
+    current="{{swiperCurren}}" 
+    bindchange="swiperChange">
     <!-- 轮播图图片 -->
     <swiper-item class="swiperItem" wx:for="{{imgList}}" wx:key>
       <!-- 加上widthFix可以使图片自适应 -->
-      <image src="{{item}}" ></image>
+      <image src="{{item}}"></image>
     </swiper-item>
   </swiper>
   <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
@@ -21,6 +21,7 @@
     </block>
   </view>
 </view>
+
 <!-- 宫格导航 -->
 <view class="nav">
   <block>  
@@ -31,6 +32,7 @@
     </view>
   </block>
 </view>
+
 <!-- 猜你喜欢 -->
 <view class="like">
   <view class="barTitle">
@@ -39,9 +41,9 @@
   </view>
   <!-- 这没有没有使用数据绑定，因为是练手而且数据比较少 -->
   <view class="likeItemBox">
-    <view class="likeItem">
+    <view class="likeItem" bindtap="gotoDetails">
       <view class="likeimg">
-        <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix" lazy-load="false"></image>
+        <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix"></image>
         <view class="cover">
           <!-- text用来显示icon  暂无 -->
           <text class=""></text> 4.6亿
@@ -49,18 +51,18 @@
       </view>
       <view class="likeText">米小圈上学记:一二三年级</view>
     </view>
-    <view class="likeItem">
+    <view class="likeItem" bindtap="gotoDetails">
       <view class="likeimg">
-        <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix" lazy-load="false"></image>
+        <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix"></image>
         <view class="cover">
           <text class=""></text> 4.6亿
         </view>
       </view>
       <view class="likeText">段子来了</view>
     </view>
-    <view class="likeItem">
+    <view class="likeItem" bindtap="gotoDetails">
       <view class="likeimg">
-        <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix" lazy-load="false"></image>
+        <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix"></image>
         <view class="cover">
           <text class=""></text> 4.6亿
         </view>
@@ -81,7 +83,7 @@
     <block wx:for="{{xiaoshuocontent}}" wx:key>
       <view class="content">
         <view class="contentImg">
-          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
         <view class="content-right">
           <view class="title">
@@ -108,7 +110,7 @@
     <block wx:for="{{xiangshengcontent}}" wx:key>
       <view class="content">
         <view class="contentImg">
-          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
         <view class="content-right">
           <view class="title">

pages/index/index.wxss

@@ -2,25 +2,27 @@
 
 /* 轮播图 */
 .swiper-container{
-  width: 95%;
+  width: 90%;
   height: 280rpx;
+  /* 居中作用 */
   margin: 0rpx auto;
   position: relative;
+  border-radius: 15rpx;
+  overflow: hidden;
 }
 
 .swiper{
   width: 100%;
   height: 100%;
+  border-radius: 15rpx;
 }
 .swiperItem{
   width: 100%;
   height: 100%;
-  /* height: auto; */
-  margin: 0rpx 20rpx;
   border-radius: 15rpx;
 }
 .swiperItem>image{
-  width: 95%;
+  width: 100%;
   height: 100%;
   border-radius: 15rpx;
 }
@@ -55,7 +57,6 @@
   height: 132rpx;
   margin: 0rpx auto;
   margin-top: 40rpx;
-  /* background-color: red; */
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -87,17 +88,18 @@
 .likeItem{
   width: 210rpx;
   height: 310rpx;
+  border-radius: 15rpx;
 }
 .likeimg{
   width: 210rpx;
   height: 210rpx;
-  border-radius: 10rpx;
+  border-radius: 15rpx;
   position: relative;
 }
 .likeItemIcon{
   width: 100%;
   height: 100%;
-  border-radius: 10rpx;
+  border-radius: 15rpx;
 }
 .likeText{
   font-size: 28rpx;
@@ -120,10 +122,12 @@
   color: #fff;
   font-size: 25rpx;
   padding: 5rpx 10rpx;
+  border-bottom-left-radius: 15rpx;
+  border-bottom-right-radius: 15rpx;
 }
 /* 主要内容 */
 .contentList{
-  width:90%;
+  width: 90%;
   margin: 0rpx auto;
   margin-top: 10rpx;
 }
@@ -133,7 +137,7 @@
   padding: 20rpx 0rpx;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1rpx solid #cdcdcd;
+  border-bottom: 1rpx solid #f1f1f1;
 }
 .contentImg{
   width: 232rpx;

pages/user/phoneLogin/phoneLogin.js

@@ -15,53 +15,4 @@ Page({
   onLoad: function (options) {
     
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-    
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-    
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-    
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-    
-  }
 })

pages/user/phoneLogin/phoneLogin.wxml

@@ -22,7 +22,7 @@
                 </view>
             </form>
         </view>
-
+        <!-- 其他登录方式 -->
         <view class="wechat" >
             <view class="tips" >其他账户登录</view>
             <view class="wecahtlogin" >

pages/user/user.js

@@ -11,9 +11,6 @@ Page({
     
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
   onLoad: function (options) {
     var that = this;
     //获得设备信息
@@ -21,7 +18,7 @@ Page({
       success (res) {
         console.log(res.windowHeight);
         that.setData({
-          phoneHeight:res.windowHeight,
+          phoneHeight: res.windowHeight,
         })
       }
     })
@@ -48,27 +45,20 @@ Page({
         app.globalData.login = false;
         that.setData({
           login: app.globalData.login,
-          avatarUrl:e.detail.userInfo.avatarUrl,
-          nickName:e.detail.userInfo.nickName
+          avatarUrl: e.detail.userInfo.avatarUrl,
+          nickName: e.detail.userInfo.nickName
         })
       }
     })
   },
-  
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  },
   phoneLogin:function(){
     wx.navigateTo({
       url: './phoneLogin/phoneLogin',
-      success: (result)=>{
-        
-      },
-      fail: ()=>{},
-      complete: ()=>{}
+    });
+  },
+  gotoLogin(){
+    wx.navigateTo({
+      url: './phoneLogin/phoneLogin',
     });
   }
 })

pages/user/user.wxml

@@ -65,7 +65,6 @@
                 <view class="">
                     <text class="icon-creative text-gray"></text>
                     夜间模式
-                    <!-- <button class="switch"></button> -->
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>
@@ -76,7 +75,7 @@
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>
-            <view class="choiceItem">
+            <view class="choiceItem" bindtap="gotoLogin">
                 <view class="">
                     <text class="icon-order text-gray"></text>
                     切换账号

pages/user/user.wxss

@@ -1,6 +1,6 @@
 /* pages/user/user.wxss */
 .body{
-    background-color: #f3f0f0;
+    background-color: #f1f1f1;
 }
 .topBar{
     width: 100%;
@@ -40,6 +40,7 @@
     width: 90%;
     height: 70rpx;
     padding: 0rpx 30rpx;
+    font-size: 32rpx;
 }
 .qianText{
     float: left;
@@ -55,7 +56,7 @@
     outline: none;
     text-align: center;
     line-height: 50rpx;
-    background-color: bisque;
+    background-color: #f1f1f1;
 }
 
 /* 选项卡 */
@@ -63,7 +64,8 @@
     width: 100%;
     height: auto;
     background-color: #fff;
-    margin-top:15rpx; 
+    margin-top:10rpx;
+    font-size: 32rpx; 
 }
 .choiceItem{
     display: flex;

utils/utils.js

@@ -0,0 +1,18 @@
+let myRequest = function(url,methods,data = {}){
+    wx.request({
+        url: url,
+        data: data,
+        header: {'content-type':'application/json'},
+        method: methods,
+        dataType: 'json',
+        responseType: 'text',
+        success: (result)=>{
+          console.log(result);
+          if(result.statusCode == 200){
+              //
+          }else{
+            //
+          }
+        },
+    })
+}