时间:1.5个小时左右
代码:130行左右
博客:1
学习内容:美化了影院管理、影厅管理的页面
<template> <div id="tab-bar"> <span class="tab-item" @click="switchTo('/home')"> <img :src="$route.path.includes('/home') ? tabBarImgArr[0].active:tabBarImgArr[0].normal"> <span :class="{on:$route.path.includes('/home')}">首页</span> </span> <span class="tab-item" @click="switchTo('/movie')"> <img :src="$route.path.includes('/movie') ? tabBarImgArr[1].active:tabBarImgArr[1].normal"> <span :class="{on:$route.path.includes('/movie')}">电影</span> </span> <span class="tab-item" @click="switchTo('/cinema')"> <img :src="$route.path.includes('/cinema') ? tabBarImgArr[2].active:tabBarImgArr[2].normal"> <span :class="{on:$route.path.includes('/cinema')}">影院</span> </span> <span class="tab-item" @click="switchTo('/my')"> <img :src="$route.path.includes('/my') ? tabBarImgArr[3].active:tabBarImgArr[3].normal"> <span :class="{on:$route.path.includes('/my')}">我的</span> </span> </div> </template> <script> export default { name: "TabBar", data(){ return{ tabBarImgArr:[ {normal:require('./images/home_light.svg'),active:require('./images/home_fill_light.svg')}, {normal:require('./images/movie_light.svg'),active:require('./images/movie_fill_light.svg')}, {normal:require('./images/cinema_light.svg'),active:require('./images/cinema_fill_light.svg')}, {normal:require('./images/my_light.svg'),active:require('./images/my_fill_light.svg')}, ] } }, methods:{ switchTo(path){ this.$router.replace(path); } } } </script> <style scoped lang="stylus" ref="stylesheet/stylus"> #tab-bar width 100% height 1.041rem position fixed left 0 bottom 0 right 0 z-index 999 display flex background-color: #fff; border-top 1px solid #f1f1f1 .tab-item display flex flex 1 justify-content center align-items center flex-direction column font-size 0.21rem margin-bottom 0.041rem color #333 img margin-bottom 0.041rem width 32% .on color red </style>
<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>