1. <template>
    2.   <view id="container">
    3.     <view v-for="item of movie" :key="item.id" class="list">
    4.       <image :src="item.pic" class="i"></image>
    5.       <view class="title">{{ item.title }}</view>
    6.       <view class="span">
    7.         <block v-for="item of item.star" :key="item.id">
    8.           <image
    9.             class="star"
    10.             v-if="item >= 1.5"
    11.             src="../../../image/star.png"
    12.           />
    13.           <image
    14.             class="star"
    15.             v-else-if="item >= 1"
    16.             src="../../../image/ban-star.png"
    17.           />
    18.           <image class="star" v-else src="../../../image/no-star.png" />
    19.         </block>
    20.         <view class="raiting">{{ item.raiting }}</view>
    21.       </view>
    22.     </view>
    23.   </view>
    24. </template>
    26. <script>
    27. import "./index.scss";
    28. import Taro from "@tarojs/taro";
    29. export default {
    30.   data() {
    31.     return {
    32.       movie: [],
    33.     };
    34.   },
    35.   mounted() {
    36.     Taro.request({
    37.       url: "http://47.113.106.101:6505/api/movie/top250",
    38.       data: {},
    39.       header: {
    40.         "content-type": "application/json",
    41.       },
    42.       success: (res) => {
    43.         var movie = res.data.result;
    44.         movie.forEach((item) => {
    45.           item.star = handleStart(item.raiting);
    46.         });
    47.         this.movie = movie;
    48.       },
    49.     });
    50.   },
    51. };
    52. function handleStart(value) {
    53.   var arr = [];
    54.   for (let i = 0; i < 5; i++) {
    55.     if (value > 2) {
    56.       arr.push(2);
    57.     } else if (value > 0) {
    58.       arr.push(value);
    59.     } else {
    60.       arr.push(0);
    61.     }
    62.     value -= 2;
    63.   }
    64.   return arr;
    65. }
    66. </script>
    67. <style>
    69. #container {
    70.   margin-left: auto;
    71.   margin-right: auto;
    72.   display: grid;
    73.   grid-template-columns: repeat(3,33vw);
    74.   justify-items: center;
    75.   align-items: center;
    76. }
    77. .list {
    78.   padding: 20px;
    79. }
    80. .title {
    81.   font-size: 25px;
    82.   text-align: center;
    83. }
    84. .star {
    85.   width: 20px;
    86.   height: 20px;
    87. }
    88. .i {
    89.   width: 150rpx;
    90.   height: 170rpx;
    91. }
    92. .list .span {
    93.   width: 120px;
    94.   margin-left: auto;
    95.   margin-right: auto;
    96. }
    97. .raiting{
    98.   text-align: center;
    99. }
    100. </style>