喜马拉雅lite

app.js

@@ -0,0 +1,39 @@
+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

app.json

@@ -0,0 +1,44 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/classification/classification",
+    "pages/collection/collection",
+    "pages/user/user"
+  ],
+  "window": {
+    "navigationBarTitleText": "喜马拉雅",
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTextStyle": "black"
+  },
+  "tabBar": {
+    "color":"#cdcdcd",
+    "selectedColor": "#ff520f",
+    "list": [{
+      "pagePath": "pages/index/index",
+      "text": "首页",
+      "iconPath": "image/icon/home-icon.png",
+      "selectedIconPath": "image/icon/home-selectIcon.png"
+    },
+    {
+      "pagePath": "pages/classification/classification",
+      "text": "分类",
+      "iconPath": "image/icon/fen-icon.png",
+      "selectedIconPath": "image/icon/fen-selectIcon.png"
+    },
+    {
+      "pagePath": "pages/collection/collection",
+      "text": "收藏",
+      "iconPath": "image/icon/collection-icon.png",
+      "selectedIconPath": "image/icon/collection-selectIcon.png"
+    },
+    {
+      "pagePath": "pages/user/user",
+      "text": "我的",
+      "iconPath": "image/icon/user-icon.png",
+      "selectedIconPath": "image/icon/user-selectIcon.png"
+    }]
+  },
+  "debug":true,
+  "sitemapLocation": "sitemap.json"
+}

app.wxss

@@ -0,0 +1,103 @@
+/**app.wxss**/
+
+/* 引入icon样式库 */
+@import 'icon.wxss';
+
+
+
+/* 登录样式 */
+.logo{
+    width: 128rpx;
+    height: 128rpx;
+    margin: 0rpx auto;
+    /* background-color: aqua */
+    position: relative;
+    top:200rpx;
+}
+.logoImg{
+    width: 100%;
+    height: 100%;
+}
+.loginButton{
+    width: 80%;
+    margin: 0rpx auto;
+    position: relative;
+    top: 500rpx;
+}
+.wechatLogin,.phoneLogin{
+    width: 100%;
+    height: 80rpx;
+    border-radius: 50rpx;
+}
+.wechatLogin button{
+    background-color: #70E500;
+    border-radius: 50rpx;
+    border: 1rpx solid #70E500;
+    color: #fff;
+}
+.phoneLogin{
+    margin-top: 40rpx;
+}
+.phoneLogin button{
+    border-radius: 50rpx;
+    border: 1rpx solid #70E500;
+    background-color: #fff;
+    color: #70E500;
+}
+
+/* 搜索框 */
+.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 */
+  }
+
+  /* 公共类 */
+.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-weight: 470;
+    color: #333;
+  }
+  .Title-right{
+    float: right;
+    font-size: 28rpx;
+    color: #aaa;
+  }

pages/classification/classification.js

@@ -0,0 +1,248 @@
+// pages/classification/classification.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    activeIndex:0,
+    VerticalNavTop: 0,
+    TabCur: 0,
+    ificationTitle:[
+      {title:"有声书"},
+      {title:"畅销书"},
+      {title:"儿童"},
+      {title:"相声评书"},
+      {title:"情感生活"},
+      {title:"人文"},
+      {title:"历史"},
+      {title:"国学书院"},
+      {title:"音乐"},
+      {title:"英语"},
+      {title:"教育培训"},
+      {title:"健康养生"},
+      {title:"广播剧"},
+      {title:"戏曲"}
+    ],
+    ificationContent:[
+      {
+        title:"有声书",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"畅销书",
+        content:[
+          {text:"社科"},
+          {text:"经管"},
+          {text:"文学"},
+          {text:"励志"},
+          {text:"名著"},
+          {text:"生活"}
+        ]
+      },
+      {
+        title:"儿童",
+        content:[
+          {text:"故事"},
+          {text:"儿歌"},
+          {text:"动画"},
+          {text:"科普"},
+          {text:"名著"},
+          {text:"国学"}
+        ]
+      },
+      {
+        title:"相声评书",
+        content:[
+          {text:"单田芳"},
+          {text:"郭德纲"},
+          {text:"热门相声"},
+          {text:"单口相声"},
+          {text:"名家评书"},
+          {text:"新锐笑将"}
+        ]
+      },
+      {
+        title:"情感生活",
+        content:[
+          {text:"恋爱技巧"},
+          {text:"睡前夜话"},
+          {text:"情绪压力"},
+          {text:"婚姻家庭"},
+          {text:"个人成长"},
+          {text:"心理健康"}
+        ]
+      },
+      {
+        title:"人文",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"历史",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"国学书院",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"音乐",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"英语",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"教育培训",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"健康养生",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var that = this;
+    wx.getSystemInfo({
+      success (res) {
+        console.log(res.screenHeight);
+        var height = (res.screenHeight*2);
+        console.log(height);
+        that.setData({
+          phoneHeight:height
+        })
+      }
+    })
+  },
+
+  showActive:function (e) {
+    console.log(e);
+    if(e.target.offsetTop=== parseInt(281.4*e.target.dataset.index)){
+      that.setData({
+        activeIndex: e.target.dataset.index,
+      })
+    }
+    // this.setData({
+    //   activeIndex: e.detail
+    //  })
+  },
+  change:function (e){
+    var that = this;
+    console.log(e)
+    that.setData({
+      VerticalNavTop: (e.currentTarget.dataset.index - 1) * 50,
+      activeIndex: e.currentTarget.dataset.index,
+      TabCur: e.currentTarget.dataset.id,
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/classification/classification.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/classification/classification.wxml

@@ -0,0 +1,36 @@
+<!--pages/classification/classification.wxml-->
+<!-- 搜索框 -->
+<view class="search marginTopBottom">
+  <view class="icon-search"></view>
+  <input placeholder="搜索你想听的节目"></input>
+</view>
+
+<!-- 分类索引 -->
+<view class="ification">
+    <!-- 左边部分 -->
+   
+    <scroll-view class="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>
+        </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">
+                    {{item.title}}
+                    <text class="icon-right"></text>
+                </view>
+            </view>
+            <view class="content">
+                <view class="contentText" wx:for="{{item.content}}" wx:key>
+                    {{item.text}}
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+    
+</view>

pages/classification/classification.wxss

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

pages/collection/collection.js

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

pages/collection/collection.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/collection/collection.wxml

@@ -0,0 +1,12 @@
+
+<!-- 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>
+</view>
+
+<!-- 登录按钮 -->
+
+<view class="loginButton" hover-class="none" hover-stop-propagation="false">
+    <view class="wechatLogin"><button><text class="icon-github"></text>微信登录</button></view>
+    <view class="phoneLogin"><button>手机号登录</button></view>
+</view>

pages/collection/collection.wxss

@@ -0,0 +1 @@
+/* pages/collection/collection.wxss */

pages/index/index.js

@@ -0,0 +1,109 @@
+//index.js
+//获取应用实例
+const app = getApp()
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    imgList:[
+      '/image/ad1.jpg',
+      '/image/ad2.jpg',
+      '/image/ad3.jpg',
+      '/image/ad4.jpg',
+      '/image/ad5.jpg',
+      '/image/ad6.jpg',
+      '/image/ad7.jpg'
+    ],
+    navList:[
+      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"榜单"},
+      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"听小说"},
+      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"情感电台"},
+      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"听相声"},
+      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"儿童故事"},
+    ],
+    swiperCurrent: 0,
+  },
+  //轮播图改变事件
+  swiperChange: function(e){
+    //console.log(e.detail.current);
+    this.setData({
+     swiperCurrent: e.detail.current
+    })
+   },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var that = this;
+    wx.request({
+      url: 'http://mobile.ximalaya.com/mobile/discovery/v3/recommend/hotAndGuess?code=43_310000_3100&device=android&version=5.4.45',
+      data: {},
+      header: {'content-type':'application/json'},
+      method: 'GET',
+      dataType: 'json',
+      responseType: 'text',
+      success: (result)=>{
+        console.log(result);
+        that.setData({
+          xiaoshuocontent:result.data.hotRecommends.list[0].list,
+          xiangshengcontent:result.data.hotRecommends.list[2].list,
+          tuokocontent:result.data.hotRecommends.list[4].list
+        })
+      },
+      fail: ()=>{},
+      complete: ()=>{}
+    });
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    
+  }
+})

pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/index/index.wxml

@@ -0,0 +1,160 @@
+<!-- index.wxml -->
+<!-- 搜索框 -->
+<view class="search marginTopBottom">
+  <view class="icon-search"></view>
+  <input placeholder="搜索你想听的节目"></input>
+</view>
+<!-- 轮播图 -->
+<view class="swiper-container">
+  <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}}" mode="widthFix"></image>
+    </swiper-item>
+  </swiper>
+  <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
+  <view class="dots">
+    <block wx:for="{{imgList.length}}" wx:key>
+      <!-- 根据index判断是否选中 -->
+      <view class="dotsItem{{index == swiperCurrent ? ' active' : ''}}"></view>
+    </block>
+  </view>
+</view>
+<!-- 宫格导航 -->
+<view class="nav">
+  <block wx:for="{{navList}}" wx:key>
+    <view class="navItem">
+      <!-- 因为没有合适的图，所以全部使用的一样的 -->
+      <image class="navIcon" src="{{item.navIconImg}}" mode="widthFix" lazy-load="false"></image>
+      <text class="navText">{{item.navText}}</text>
+    </view>
+  </block>
+</view>
+<!-- 猜你喜欢 -->
+<view class="like">
+  <view class="barTitle">
+    <view class="Title-left">猜你喜欢</view>
+    <view class="Title-right">查看全部></view>
+  </view>
+  <!-- 这没有没有使用数据绑定，因为是练手而且数据比较少 -->
+  <view class="likeItemBox">
+    <view class="likeItem">
+      <view class="likeimg">
+        <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix" lazy-load="false"></image>
+        <view class="cover">
+          <!-- text用来显示icon  暂无 -->
+          <text class=""></text> 4.6亿
+        </view>
+      </view>
+      <view class="likeText">米小圈上学记:一二三年级</view>
+    </view>
+    <view class="likeItem">
+      <view class="likeimg">
+        <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix" lazy-load="false"></image>
+        <view class="cover">
+          <text class=""></text> 4.6亿
+        </view>
+      </view>
+      <view class="likeText">段子来了</view>
+    </view>
+    <view class="likeItem">
+      <view class="likeimg">
+        <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix" lazy-load="false"></image>
+        <view class="cover">
+          <text class=""></text> 4.6亿
+        </view>
+      </view>
+      <view class="likeText">读者</view>
+    </view>
+  </view>
+</view>
+<!-- 有声小说 -->
+<view class="contentList">
+  <view class="barTitle">
+    <view class="Title-left">有声小说</view>
+    <view class="Title-right">查看全部></view>
+  </view>
+  <block wx:for="{{xiaoshuocontent}}" wx:key>
+    <view class="content">
+      <view class="contentImg">
+        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+      </view>
+      <view class="content-right">
+        <view class="title">
+          <view class="titleText">{{item.title}}</view>
+          <view class="introduction">{{item.trackTitle}}</view>
+        </view>
+        <view class="count">
+          <text class="playcount">
+            <!-- <text class="icon-"></text> -->
+            126亿
+          </text>
+          <text class="jicount">
+            {{item.tracks}}集
+          </text>
+        </view>
+      </view>
+    </view>
+  </block>
+</view>
+
+<!-- 相声评书 -->
+<view class="contentList">
+  <view class="barTitle">
+    <view class="Title-left">相声评书</view>
+    <view class="Title-right">查看全部></view>
+  </view>
+  <block wx:for="{{xiangshengcontent}}" wx:key>
+    <view class="content">
+      <view class="contentImg">
+        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+      </view>
+      <view class="content-right">
+        <view class="title">
+          <view class="titleText">{{item.title}}</view>
+          <view class="introduction">{{item.trackTitle}}</view>
+        </view>
+        <view class="count">
+          <text class="playcount">
+            <!-- <text class="icon-"></text> -->
+            126亿
+          </text>
+          <text class="jicount">
+            {{item.tracks}}集
+          </text>
+        </view>
+      </view>
+    </view>
+  </block>
+</view>
+
+<!-- 脱口秀 -->
+<view class="contentList">
+  <view class="barTitle">
+    <view class="Title-left">脱口秀</view>
+    <view class="Title-right">查看全部></view>
+  </view>
+  <block wx:for="{{tuokocontent}}" wx:key>
+    <view class="content">
+      <view class="contentImg">
+        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+      </view>
+      <view class="content-right">
+        <view class="title">
+          <view class="titleText">{{item.title}}</view>
+          <view class="introduction">{{item.trackTitle}}</view>
+        </view>
+        <view class="count">
+          <text class="playcount">
+            <!-- <text class="icon-"></text> -->
+            126亿
+          </text>
+          <text class="jicount">
+            {{item.tracks}}集
+          </text>
+        </view>
+      </view>
+    </view>
+  </block>
+</view>

pages/index/index.wxss

@@ -0,0 +1,187 @@
+/**index.wxss**/
+
+/* 轮播图 */
+.swiper-container{
+  width: 90%;
+  margin: 0rpx auto;
+  position: relative;
+}
+.swiper{
+  width: 100%;
+}
+.swiperItem{
+  width: 100%;
+  /* height: auto; */
+  border-radius: 15rpx;
+}
+.swiperItem>image{
+  width: 100%;
+  border-radius: 15rpx;
+}
+.dots{
+  width: auto;
+  height: 10rpx;
+  position: absolute;
+  bottom: 20rpx;
+  border-radius: 50rpx;
+  left: 240rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3rpx 10rpx;
+}
+.dotsItem{
+  width: 8rpx;
+  height: 8rpx;
+  margin: 0rpx 8rpx;
+  border-radius: 50%;
+  background-color: #cdcdcd;
+  transition: all .3s;
+}
+.active{
+  width: 10rpx;
+  height: 10rpx;
+  background-color: #fff;
+}
+/* 宫格导航 */
+.nav{
+  width: 90%;
+  height: 132rpx;
+  margin: 0rpx auto;
+  margin-top: 40rpx;
+  /* background-color: red; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+}
+.navItem{
+  width: 94rpx;
+  font-size: 20rpx;
+  text-align: center;
+  line-height: 35rpx;
+  color: #aaa;
+}
+.navIcon{
+  width: 84rpx;
+  height: 84rpx;
+}
+/* 猜你喜欢 */
+.like{
+  width: 90%;
+  margin: 0rpx auto;
+  margin-top: 40rpx;
+}
+.likeItemBox{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.likeItem{
+  width: 210rpx;
+  height: 310rpx;
+}
+.likeimg{
+  width: 210rpx;
+  height: 210rpx;
+  border-radius: 10rpx;
+  position: relative;
+}
+.likeItemIcon{
+  width: 100%;
+  height: 100%;
+  border-radius: 10rpx;
+}
+.likeText{
+  font-size: 28rpx;
+  color: #333;
+  padding: 20rpx 0rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cover{
+  width: 190rpx;
+  height: 40rpx;
+  /* 透明背景层 */
+  background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
+  /* opacity: 0.3; */
+  position: absolute;
+  bottom: 0rpx;
+  color: #fff;
+  font-size: 25rpx;
+  padding: 5rpx 10rpx;
+}
+/* 主要内容 */
+.contentList{
+  width:90%;
+  margin: 0rpx auto;
+  margin-top: 10rpx;
+}
+.content{
+  width: 100%;
+  height: auto;
+  padding: 20rpx 0rpx;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1rpx solid #cdcdcd;
+}
+.contentImg{
+  width: 232rpx;
+  height: 232rpx;
+  border-radius: 15rpx;
+}
+.contentImg>image{
+  width: 100%;
+  height: 100%;
+  border-radius: 15rpx;
+}
+.content-right{
+  width: 530rpx;
+  height: 100%;
+  margin-left: 20rpx;
+}
+.title{
+  width: 100%;
+  height: 138rpx;
+  overflow: hidden;
+}
+.titleText{
+  font-size: 35rpx;
+  color: #333;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.introduction{
+  font-size: 28rpx;
+  color: #cdcdcd;
+  text-align: left;
+  padding: 15rpx 0rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.count{
+  width: 100%;
+  height: 50rpx;
+  display: flex;
+  justify-content: start;
+}
+.playcount{
+ font-size: 25rpx;
+ color: #cdcdcd;
+ margin-right: 30rpx;
+}
+.jicount{
+  font-size: 25rpx;
+  color: #cdcdcd;
+}

pages/user/user.js

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

pages/user/user.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/user/user.wxml

@@ -0,0 +1,13 @@
+<!--pages/user/user.wxml-->
+
+<!-- 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>
+</view>
+
+<!-- 登录按钮 -->
+
+<view class="loginButton" hover-class="none" hover-stop-propagation="false">
+    <view class="wechatLogin"><button><text class="icon-github"></text>微信登录</button></view>
+    <view class="phoneLogin"><button>手机号登录</button></view>
+</view>

pages/user/user.wxss

@@ -0,0 +1 @@
+/* pages/user/user.wxss */

project.config.json

@@ -0,0 +1,69 @@
+{
+	"description": "项目配置文件",
+	"packOptions": {
+		"ignore": []
+	},
+	"setting": {
+		"urlCheck": false,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true,
+		"coverView": true,
+		"autoAudits": false,
+		"checkInvalidKey": true,
+		"checkSiteMap": true,
+		"uploadWithSourceMap": true,
+		"babelSetting": {
+			"ignore": [],
+			"disablePlugins": [],
+			"outputPath": ""
+		}
+	},
+	"compileType": "miniprogram",
+	"libVersion": "2.7.7",
+	"appid": "wx101d03d3f1aab84c",
+	"projectname": "%E4%BB%BF%E5%96%9C%E9%A9%AC%E6%8B%89%E9%9B%85lite",
+	"debugOptions": {
+		"hidedInDevtools": []
+	},
+	"isGameTourist": false,
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"plugin": {
+			"current": -1,
+			"list": []
+		},
+		"game": {
+			"currentL": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": 1,
+			"list": [
+				{
+					"id": -1,
+					"name": "收藏页",
+					"pathName": "pages/collection/collection",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "分类页",
+					"pathName": "pages/classification/classification",
+					"scene": null
+				}
+			]
+		}
+	}
+}

sitemap.json

@@ -0,0 +1,7 @@
+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}