• 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>
  • 相关阅读:
    登录功能实现
    JavaScript中的apply()方法和call()方法使用介绍
    导致JSON无法解析的问题
    git
    Xcode 与 macOS 系统版本的兼容问题
    创建多个Target
    验证合法身份证
    Xcode 6创建预编译头文件.pch
    About In-App Purchase
    Xcode 6制作通用framework库
  • 原文地址:https://www.cnblogs.com/j-y-s/p/14903308.html
Copyright © 2020-2023  润新知