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

stats template的样式实现

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

<template name="starsTemplate">
  <view class="stars-container">
    <view class="stars">
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
    </view>
    <text class="star-score">8.9</text>
  </view>
</template>

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

.stars-container {
  display: flex;
  flex-direction: row;
}

.stars {
  display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 24rpx;
  margin-top: 6rpx;
}

.stars image {
  padding-left: 3rpx;
  height: 17rpx;
  width: 17rpx;
}

.star-score {
  color: #1f3463;
}

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

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

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

@import "../movie/movie-template.wxss"

6.进入目录 pages/movies，修改文件 movies.wxss

@import "movie-list/movie-list-template.wxss"