`stars.wxml`
~~~html
<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>
~~~
`movie-template.wxml`
~~~html
<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
<view class="movie-container">
<image class="movie-img" src="/images/fanghua.jpg"></image>
<text class="movie-title">芳華</text>
<template is="starsTemplate" />
</view>
</template>
~~~
`movie-list-template.wxml`
~~~html
<template name="movieListTemplate">
<view class="movie-list-container">
<view class="movie-head">
<text class="slogan">正在熱映</text>
<view class="more">
<text class="more-text">更多</text>
<image class="more-img" src="/images/icon/arrow-right.png"></image>
</view>
</view>
<view class="movies-container">
<template is="movieTemplate" />
<template is="movieTemplate" />
<template is="movieTemplate" />
</view>
</view>
</template>
~~~
`movies.wxml`
~~~html
<import src="movie-list/movie-list-template.wxml" />
<view>
<template is="movieListTemplate" />
<template is="movieListTemplate" />
<template is="movieListTemplate" />
</view>
~~~
`star-template.wxss`
~~~css
.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;
}
~~~
`movie-template.wxss`
~~~css
.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;
}
~~~
`movie-list-template.wxss`
~~~css
.movie-list-container{
background-color: #fff;
display: flex;
flex-direction: column;
}
.movie-head{
padding: 30rpx 20rpx 22rpx;
/*display: flex;
flex-direction: row;
justify-content: space-between;*/
}
.slogan{
font-size: 24rpx;
}
.more{
float: right;
}
.more-text{
vertical-align: middle;
margin-right: 10rpx;
color: #1f4ba5;
}
.more-img{
width: 9rpx;
height: 16rpx;
vertical-align: midde;
}
.movies-container{
display: flex;
flex-direction: row;
}
~~~
