2021年5月3日 团队冲刺阶段07

昨天完成了浏览新闻资讯的添加功能,页面还不够美观,今天,修缮了修缮代码。

<template>
  <div>
    <div class="movie-item" v-if="movieList.length" v-for="(item,index) in movieList" :key="index">
      <img :src="server+item.poster" alt="" @click="$router.push({path:'/movie_detail',query:{movie_id:item.movie_id}})">
      <div class="info">
        <div class="name" @click="$router.push({path:'/movie_detail',query:{movie_id:item.movie_id}})">{{item.name}}</div>
        <div v-if="new Date()-new Date(item.public_date)>=0">
          <div class="descInfo" v-if="item.score">评分:<span class="number">{{item.score.toFixed(1)}}</span></div>
          <div class="descInfo" v-else>暂无评分</div>
        </div>
        <div v-else>
          <div class="descInfo" v-if="item.wish_num">想看:<span class="number">{{item.wish_num}}</span>人想看</div>
          <div class="descInfo" v-else>暂无想看</div>
        </div>
        <div class="descInfo">类型:{{item.type}}</div>
        <div class="descInfo ellipsis">主演:<span>{{item.actor}}</span></div>
      </div>
      <span class="buy" :class="{pre_sell: new Date(item.public_date)-new Date()>0}" @click="$router.push({path:'/select_cinema',query:{movie_id:item.movie_id}})">{{new Date(item.public_date)-new Date()>0?'预售':'购票'}}</span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "MovieItem",
        data(){
          return{
            //服务器地址
            server:'http://localhost:3000',
          }
        },
        props: {
          movieList: {
            type: Array,
            require: true,
            default: []
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .movie-item
    display flex
    justify-content space-around
    align-items center
    padding .2rem 0
    img
      display inline-block
      width 20%
    .info
      width 68%
      display flex
      flex-flow column
      padding .25rem
      font-size .28rem
      color #9d9d9d
      .name
        font-weight 700
        font-size .345rem
        padding-bottom .2rem
        color #333
      .descInfo
        padding-bottom .12rem
        .number
          color #ffb400
          font-family PingFangSC-Regular,Hiragino Sans GB,sans-serif
          font-weight 700
          font-size .315rem
    .buy
      background-color #dd2727
      border-radius .08rem
      font-size .25rem
      color #fff
      width 12%
      padding .16rem .12rem
      text-align center
    .pre_sell
      background-color #2d98f3
</style>
原文地址:https://www.cnblogs.com/j-y-s/p/14903308.html