慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-movie template的样式实现

movie template的样式实现

1.进入目录 pages/movies/movie，修改文件 movie-template.wxml

<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
  <view class="movie-container">
    <image class="movie-image" src="/images/yourname.png"></image>
    <text class="movie-title">你的名字.</text>
    <template is="starsTemplate"/>
  </view>
</template>

2.进入目录 pages/movies/movie，修改文件 movie-template.wxss

@import "../stars/stars-template.wxss";

.movie-container {
  display: flex;
  flex-direction: column;
  padding: 0 22rpx;
}

.movie-img {
  width: 200rpx;
  height: 270rpx;
  padding-bottom: 20rpx;
}

.movie-title {
  margin-bottom: 16rpx;
  font-size: 24rpx;
}