小程序项目之猫眼案例-代码

最新推荐文章于 2023-10-24 21:01:58 发布

viceen

最新推荐文章于 2023-10-24 21:01:58 发布

阅读量3k

点赞数

分类专栏：小程序知识文章标签：列表 tab html5

本文链接：https://blog.csdn.net/weixin_44867717/article/details/109162760

版权

小程序知识专栏收录该内容

40 篇文章 5 订阅

订阅专栏

小程序项目之猫眼案例-源码

小程序页面结构


<!-- 简介 -->
<view class="detail">
  <!-- 背景滤镜 -->
  <div class="filter" style="background-image: url(https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-21.jpg)"></div>
  <view class="wrap">
    <!-- 封面 -->
    <navigator url="./video">
      <text class="play"></text>
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-21.jpg"></image>
    </navigator>
    <!-- 影片信息 -->
    <view class="meta">
      <text class="name">侏罗纪世界2</text>
      <text class="en">Jurassic World: Fallen Kingdom</text>
      <text class="rank">
        <text class="pic"></text>
        <text class="num">7.9</text>
      </text>
      <text class="count">(38.8万人评)</text>
      <text class="type">动作,冒险,科幻</text>
      <text class="">美国/128分钟</text>
      <text class="date">2018-06-15大陆上映</text>
    </view>
    <!-- 操作 -->
    <view class="action">
      <text>想看</text>
      <text>评分</text>
    </view>
  </view>
</view>

<!-- 提示 -->
<view class="tips">
  <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/egg.png"></image>有1个彩单，片尾字幕后
</view>

<!-- 简介 -->
<view class="brief {{spread ? 'spread' : ''}}">
  <view class="wrap">
  侏罗纪世界主题公园及豪华度假村被失控的恐龙们摧毁已有三年。如今，纳布拉尔岛已经被人类遗弃，岛上幸存的恐龙们在丛林中自给自足。当岛上的休眠火山开始活跃以后，欧文（克里斯·帕拉特 饰）与克莱尔（布莱丝·达拉斯·霍华德 饰）发起了一场运动，想要保护岛上幸存的恐龙们免于灭绝。欧文一心想要找到自己依然失踪在野外的迅猛龙首领布鲁，克莱尔如今也尊重起这些生物，以保护它们为己任。两人在熔岩开始喷发时来到了危险的小岛，他们的冒险也揭开了一个可能让地球回到史前时代般混乱秩序的阴谋。</view>
  <text class="more" bind:tap="spread"></text>
</view>

<!-- 演员表 -->
<view class="panel actor">
  <text class="title">演职人员</text>
  <scroll-view scroll-x>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-1.jpg"></image>
      <text class="name">胡安·安东尼奥·巴亚纳</text>
      <text class="role">导演</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-2.jpg"></image>
      <text class="name">费斯·费伊纳</text>
      <text class="role">Mercenary</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-3.jpg"></image>
      <text class="name">克里斯·帕拉特</text>
      <text class="role">Owen Grady</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-4.jpg"></image>
      <text class="name">布莱丝·达拉斯·霍华德</text>
      <text class="role">Claire Dearing</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-5.jpg"></image>
      <text class="name">泰德·拉文</text>
      <text class="role">Ken Wheatley</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-6.jpg"></image>
      <text class="name">托比·琼斯</text>
      <text class="role">Gunnar Eversol</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-7.jpg"></image>
      <text class="name">贾斯蒂斯·史密斯</text>
      <text class="role">Franklin</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-8.jpg"></image>
      <text class="name">詹姆斯·克伦威尔</text>
      <text class="role">Benjamin Lockwood</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-9.jpg"></image>
      <text class="name">黄荣亮</text>
      <text class="role">Dr. Henry Wu</text>
    </view>
    <view class="cell">
      <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/actor-10.jpg"></image>
      <text class="name">拉菲·斯波</text>
      <text class="role">Eli Mills</text>
    </view>
  </scroll-view>
</view>

<!-- 票房 -->
<view class="panel sales">
  <text class="title">票房</text>
  <view class="item">
    <text>1</text>
    <text>昨日票房排行</text>
  </view>
  <view class="item">
    <text>73308</text>
    <text>首周票房(万)</text>
  </view>
  <view class="item">
    <text>119001</text>
    <text>累计票房(万)</text>
  </view>
</view>

<!-- 视频和剧照 -->
<view class="panel media">
  <text class="title">视频和剧照</text>
  <navigator>62</navigator>
  <scroll-view scroll-x>
    <view class="cell">
      <image class="video" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-1.jpg"></image>
      <image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-2.jpg"></image>
      <image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-3.jpg"></image>
      <image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-4.jpg"></image>
      <image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-5.jpg"></image>
      <image class="picture" mode="aspectFill" src="https://maoyan2.oss-cn-beijing.aliyuncs.com/media-6.jpg"></image>
    </view>
  </scroll-view>
</view>

<!-- 评论 -->
<view class="panel comments">
  <text class="title">观众评论</text>
  <view class="item">
    <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/avatar-1.jpg"></image>
    <view class="info">
      <text>茶三刘</text>
      <text class="rank"></text>
      <text class="content">那个敲地板的恐龙真的要吓死我😂😂😂</text>
      <view class="extra">
        <text class="date">06-15</text>
        <text class="like">4740</text>
      </view>
    </view>
  </view>
  <view class="item">
    <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/avatar-2.jpg"></image>
    <view class="info">
      <text>天人丶之心</text>
      <text class="rank"></text>
      <text class="content">总体来说还是很完美。布鲁比以前意识很强。对于人类所制造出来的迅猛龙还是和历史的真真的迅猛龙来相对比较。他还是一个开胃菜吧。所以呢。这部侏罗纪世界2非常不错。在侏罗纪公园大家应该还记得。苍龙吧。那是一个更了不得龙，虽然这部见苍龙只有两次。也正名了他的存在必要。在下一部侏罗纪世界3。大家会见到真真苍龙的厉害。那就是人类的灾难。到这里我想说。我期待下部。布鲁会又给大家带来惊喜。以为布鲁是恐龙里面的主角。欢迎大家。下次观看。侏罗纪世界3丶期待吧</text>
      <view class="extra">
        <text class="date">06-15</text>
        <text class="like">4740</text>
      </view>
    </view>
  </view>
  <view class="item">
    <image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/avatar-3.jpg"></image>
    <view class="info">
      <text>山～下</text>
      <text class="rank"></text>
      <text class="content">真的JA,男神，拍的太好了!梅茜的身世也震惊了我!恐龙超级逼真，有幸参加了导演沙龙和侏罗纪世界2的发布会，知道了很多花絮，虽然那时候说，看花絮，觉得基本就看完了侏罗纪2，但是真实看，还是超级震撼。装死还在偷笑，啊啊啊啊啊，完蛋，要喜欢上“小”恐龙了。我的blue!JA拍的电影不偏剧情，所以给人留下映象最深的当然是逼真的特效。结尾梅茜的举动我觉得要站在她的立场去想，也许对正常人来讲，不应该去按这个键，这样，人类会受到攻击，但对她来讲，她觉得她和那些恐龙是一样的，是再生，是复制，她想他们活下去。即便，没有按这个键，有的恐龙也已经卖出去，送出去了，恐龙已经被放出，可能，这就是侏罗纪世界3要讲得了吧。</text>
      <view class="extra">
        <text class="date">06-15</text>
        <text class="like">4740</text>
      </view>
    </view>
  </view>
  <navigator>查看全部93761条观众评论</navigator>
</view>

<!-- 购票 -->
<navigator class="buy">优惠购票</navigator>

获取后台接口数据版页面

<!-- 头部 -->
<view class="header">
	<!-- 位置 -->
	<navigator url="./index" hover-class="none" class="location">北京</navigator>
	<!-- 切换 -->
	<view class="tabs" bindtap="handleChange">
		<text data-index='0' class="{{currentIndex===0?'current': ''}}">热映</text>
		<text data-index='1' class="{{currentIndex===1?'current': ''}}">待映</text>
	</view>
	<!-- 搜索 -->
	<navigator url="./index" hover-class="none" class="search"></navigator>
</view>

<!-- 电影列表 热映 -->
<view class="items hots" hidden="{{currentIndex!==0}}">
<!-- <view class="items hots" wx:if='{{currentIndex===0}}'> -->
	<navigator wx:key='{{item.id}}' wx:for='{{list}}' url="./detail">
		<view class="item">
			<!-- 播放按钮 -->
			<text class="play"></text>
			<image src="{{item.img}}"></image>
			<!-- 信息 -->
			<view class="meta">
				<text class="name">{{item.nm}}</text>
        <text class="type">{{item.cat}}</text>
        <text class="actor">{{item.desc}}</text>
        <text class="count">{{item.showInfo}}</text>
			</view>
			<!-- 状态 -->
			<view class="status">
				<block wx:if="{{item.preSale == 0}}">
          <view class="extra">
            {{item.mk}}<text>分</text>
          </view>
          <text class="btn">购票</text>
        </block>
        <block wx:else>
          <view class="extra">
            {{item.wish}}<text>人想看</text>
          </view>
          <text class="btn presell">预售</text>
        </block>
			</view>
		</view>
	</navigator>
</view>

<!-- 电影列表 待映 -->
<view class="items-wrap" hidden="{{currentIndex!==1}}">
<!-- <view class="items-wrap" wx:if='{{currentIndex===1}}'> -->
	<text class="title">近期最受欢迎</text>
	<scroll-view scroll-x>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-11.jpg"></image>
				<text class="name">爱情公寓</text>
				<text class="count">480793人想看</text>
				<text class="date">8月10号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-12.jpg"></image>
				<text class="name">新乌龙院之笑闹江湖</text>
				<text class="count">258662人想看</text>
				<text class="date">7月13号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-13.jpg"></image>
				<text class="name">狄仁杰之四大天王</text>
				<text class="count">213853人想看</text>
				<text class="date">7月27号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-14.jpg"></image>
				<text class="name">动物世界</text>
				<text class="count">139346人想看</text>
				<text class="date">6月29号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-15.jpg"></image>
				<text class="name">金蝉脱壳2</text>
				<text class="count">101054人想看</text>
				<text class="date">6月29号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-16.jpg"></image>
				<text class="name">爵迹2</text>
				<text class="count">90902人想看</text>
				<text class="date">7月6号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-17.jpg"></image>
				<text class="name">邪不压正</text>
				<text class="count">78093人想看</text>
				<text class="date">7月13号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-18.jpg"></image>
				<text class="name">昨日晴空</text>
				<text class="count">76172人想看</text>
				<text class="date">8月10号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-19.jpg"></image>
				<text class="name">大轰炸</text>
				<text class="count">67771人想看</text>
			<text class="date">8月17号</text>
			</navigator>
		</view>
		<view class="cell">
			<text class="collect"></text>
			<navigator url="./detail">
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-20.jpg"></image>
				<text class="name">超人总动员2</text>
				<text class="count">61887人想看</text>
				<text class="date">6月22号</text>
			</navigator>
		</view>
	</scroll-view>
	<!-- 列表 -->
	<view class="items plan">
		<text class="title">6月21日 周四</text>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-1.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">侏罗纪世界2</text>
					<text class="type">动作,冒险,科幻</text>
					<text class="actor">主演: 克里斯·帕拉特,布莱丝·达拉斯·霍华德,泰德·拉文</text>
					<text class="count">今天205家影院放映4445场</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						8.5<text>分</text>
					</view>
					<text class="btn">购票</text>
				</view>
			</view>
		</navigator>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-2.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">猛虫过江</text>
					<text class="type">喜剧,动作</text>
					<text class="actor">主演: 小沈阳,潘斌龙,宋芸桦</text>
					<text class="count">今天189家影院放映1067场</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						8.1<text>分</text>
					</view>
					<text class="btn">购票</text>
				</view>
			</view>
		</navigator>
		<text class="title">6月22日 周五</text>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-3.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">超人总动员2</text>
					<text class="type">动画,动作,冒险</text>
					<text class="actor">主演: 格雷格·T·尼尔森,霍利·亨特,莎拉·沃威尔</text>
					<text class="count">2018-06-22 本周五上映</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						59972<text>人想看</text>
					</view>
					<text class="btn presell">预售</text>
				</view>
			</view>
		</navigator>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-4.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">泄密者</text>
					<text class="type">动作,悬疑,犯罪</text>
					<text class="actor">主演: 吴镇宇,张智霖,佘诗曼</text>
					<text class="count">今天182家影院放映644场</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						7.9<text>分</text>
					</view>
					<text class="btn">购票</text>
				</view>
			</view>
		</navigator>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-5.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">龙虾刑警</text>
					<text class="type">喜剧,动作,犯罪</text>
					<text class="actor">主演: 王千源,袁姗姗,刘桦</text>
					<text class="count">2018-06-22 本周五上映</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						42371<text>人想看</text>
					</view>
					<text class="btn presell">预售</text>
				</view>
			</view>
		</navigator>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-6.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">动物世界</text>
					<text class="type">动作,悬疑,冒险</text>
					<text class="actor">主演: 李易峰,迈克尔·道格拉斯,周冬雨</text>
					<text class="count">2018-06-29 下周五上映</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						136247<text>人想看</text>
					</view>
					<text class="btn presell">预售</text>
				</view>
			</view>
		</navigator>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-7.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">超时空同居</text>
					<text class="type">喜剧,爱情,奇幻</text>
					<text class="actor">主演: 雷佳音,佟丽娅,徐峥</text>
					<text class="count">今日121家影院放映440场</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						8.6<text>分</text>
					</view>
					<text class="btn">购票</text>
				</view>
			</view>
		</navigator>
		<text class="title">6月23日 周六</text>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-8.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">金蝉脱壳2</text>
					<text class="type">动作,惊悚,犯罪</text>
					<text class="actor">主演: 西尔维斯特·史泰龙,黄晓明,戴夫·巴蒂斯塔</text>
					<text class="count">2018-06-29 下周五上映</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						98214<text>人想看</text>
					</view>
					<text class="btn presell">预售</text>
				</view>
			</view>
		</navigator>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-9.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">复仇者联盟3: 无限战争</text>
					<text class="type">动作,冒险,科幻</text>
					<text class="actor">主演: 小罗伯特·唐尼,克里斯·海姆斯沃斯,马克·鲁法洛</text>
					<text class="count">今天102家影院放映260场</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						8.6<text>分</text>
					</view>
					<text class="btn">购票</text>
				</view>
			</view>
		</navigator>
		<navigator url="./detail">
			<view class="item">
				<!-- 播放按钮 -->
				<text class="play"></text>
				<image src="https://maoyan2.oss-cn-beijing.aliyuncs.com/movie-10.jpg"></image>
				<!-- 信息 -->
				<view class="meta">
					<text class="name">第七个小矮人</text>
					<text class="type">喜剧,动画,冒险</text>
					<text class="actor">主演: Otto Waalkes,Mirco Nontschew,Boris Aljinovic</text>
					<text class="count">今天130家影院放映255场</text>
				</view>
				<!-- 状态 -->
				<view class="status">
					<view class="extra">
						8.4<text>分</text>
					</view>
					<text class="btn">购票</text>
				</view>
			</view>
		</navigator>
	</view>
</view>

<!-- 加载更多... -->
<text class="loading">加载更多...</text>

逻辑

Page({
  data: {
    currentIndex: 0,
    offset: 0,
    limit: 10,
    list: []
  },
  loadData: function () {
    // 调用后台接口获取数据
    wx.showLoading({
      title: '正在加载数据...',
      mask: true
    })
    wx.request({
      url: 'https://wx.maoyan.com/mmdb/movie/v2/list/hot.json',
      data: {
        // 筛选条件
        ct: '北京',
        // 从第几条开始查询
        offset: this.data.offset,
        // 每页查询多少条数据
        limit: this.data.limit
      },
      success: (res) => {
        let hot = res.data.data.hot
        // 需要对图片地址进行加工处理
        hot = hot.map(item => {
          item.img = item.img.replace('w.h', '128.180')
          return item
        })
          //每次自动加载效果
        this.setData({
          // 把新请求的一页数据追加到原有的数组列表中
          list: [...this.data.list, ...hot]
        })
        // 数据获取成功，隐藏提示效果
        wx.hideLoading()
      }
    })
  },
  onLoad: function () {
    // 页面开发加载时调用后台接口
    this.loadData()
  },
  handleChange: function (e) {
    // 控制Tab的切换
    let index = parseInt(e.target.dataset.index)
    this.setData({
      currentIndex: index
    })
  },
  onPullDownRefresh: function () {
    // console.log('pulldown')
    // 这里应该调用后台接口获取最新数据
    this.setData({
      offset: 0
    })
    this.loadData()
  },
  onReachBottom: function () {
    // 页面滚动到底部的时候触发
    // console.log('bottom')
    // 触底时应该加载下一页数据
    this.setData({
      offset: this.data.offset + this.data.limit
    })
    this.loadData()
  }
});

接口图片的数据格式-可自定义

在这里插入图片描述

每次自动加载效果

在这里插入图片描述

样式


page {
  background-color: #F6F6F6;
}

/*头部*/
.header {
  background-color: #FFF;
}

.header .location {
  width: 120rpx;
  text-align: center;
}

.header .location::after {
  content: '';
  display: inline-block;
  border-width: 8rpx;
  border-style: solid;
  border-color: #666 transparent transparent transparent;

  position: relative;
  top: 4rpx;
  left: 8rpx;
}

.header .tabs {
  flex: 1;
  font-weight: 700;
  margin: 0 120rpx;

  display: flex;
  justify-content: space-around;
}

.header .tabs text {
  padding: 0 20rpx;
  position: relative;
}

.header .tabs .current {
  color: #EF4238;
}

.header .tabs .current::after {
  content: '';
  display: inline-block;

  position: absolute;
  bottom: 4rpx;
  left: 0;

  width: 100%;
  border-bottom: 1px solid #EF4238;
}

.search {
  width: 88rpx;
  height: 88rpx;
  padding: 20rpx;
  margin-left: 32rpx;
  box-sizing: border-box;
  background-image: url('https://maoyan2.oss-cn-beijing.aliyuncs.com/search.png');
  background-clip: content-box;
  background-origin: content-box;
  background-size: contain;
  border-left: 1rpx solid #E6E6E6;
}

/*列表*/
.items {
  background-color: #FFF;
}

.plan {
  border-top: 1rpx solid #E6E6E6;
}

.items image {
  width: 128rpx;
  height: 180rpx;
}

.item {
  display: flex;
  padding: 24rpx 0;
  margin-left: 30rpx;
  border-bottom: 1rpx solid #E6E6E6;
  position: relative;
}

.item .play {
  left: 39rpx;
  top: 50%;

  margin-top: -25rpx;
}

.item .meta {
  flex: 1;
  margin: 0 20rpx;
}

.item .meta text {
  display: block;
  line-height: 1.7;
  color: #666;
  font-size: 26rpx;
}

.item .meta .name {
  font-size: 34rpx;
  font-weight: 700;
  color: #333;
}

.item .meta .actor {
  width: 440rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item .meta .count {
  color: #999;
}

.item .status {
  display: flex;
  align-items: center;
  
  position: relative;

  width: 96rpx;
  margin-right: 30rpx;
}

.item .status .btn {
  width: 100%;
  height: 54rpx;
  text-align: center;
  line-height: 54rpx;
  color: #FFF;
  font-size: 24rpx;
  border-radius: 8rpx;
  background-color: #f03d37;
}

.item .status .presell {
  background-color: #3c9fe6;
}

.item .status .extra {
  position: absolute;
  top: 0;
  right: 0;

  width: 160rpx;
  text-align: right;

  font-size: 30rpx;
  color: #faaf00;
}

.item .extra text {
  font-size: 70%;
}

.loading {
  display: block;
  padding: 20rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #999;
}

.title {
  display: block;
  padding: 24rpx 0 0 30rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #FFF;
}

scroll-view {
  height: 396rpx;
  padding: 24rpx 30rpx;
  margin-bottom: 20rpx;
  white-space: nowrap;
  border-bottom: 1rpx solid #E6E6E6;
  background-color: #FFF;
  box-sizing: border-box;
}

.cell {
  display: inline-block;
  width: 170rpx;
  margin-right: 20rpx;

  position: relative;
}

.cell:last-child {
  margin-right: 0;
}

.cell image {
  width: 170rpx;
  height: 230rpx;
}

.cell text {
  display: block;
  line-height: 1.4;
  font-size: 24rpx;
  color: #999;
}

.cell .name {
  width: 100%;
  margin-top: 10rpx;
  font-size: 26rpx;
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.cell .collect {
  position: absolute;
  left: 0;
  top: 0;

  width: 56rpx;
  height: 56rpx;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: url(https://maoyan2.oss-cn-beijing.aliyuncs.com/heart.png);
  background-size: 36rpx;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0 0 8rpx 0;
}