在这里插入图片描述

代码

movieInfo.vue

显示图片不一样大
在这里插入图片描述

<template><div class="movie-container"><div class="header"><div class="header-inner clearfix"><div class="movie-info-left"><div class="avatar-shadow">
<!--            显示图片--><img class="avatar" :src="movieInfo.moviePoster"></div></div><div class="movie-info-right"><div class="movie-info-msg">
<!--            显示影院的基本信息--><h1 class="movie-name">{{movieInfo.movieName}}</h1>
<!--            <h1>&nbsp;|</h1>--><ul><li>{{movieInfo.movieCategoryList}}</li><li>{{movieInfo.movieArea}} / {{movieInfo.movieLength}}分钟</li><li>{{movieInfo.releaseDate}} {{movieInfo.movieArea}} 上映</li></ul></div><div class="movie-info-btn">
<!--            进入观看--><el-button class="buy-btn" type="primary" @click="toWatchMovie">在线观看</el-button></div><div class="movie-info-score"><div class="movie-index box-office-container"><span class="movie-index-title">累计票房</span><div style="display: flex;align-items: flex-end;"><span class="box-office">{{movieInfo.movieBoxOffice}}</span><span class="unit">元</span></div></div></div></div></div></div><div class="movie-info-detail-container"><div class="movie-info-detail clearfix"><div class="main-content"><div class="crumbs-nav-container"><a href="/welcome">panda电影</a> &gt; <a href="/movie">电影</a> &gt; {{movieInfo.movieName}}</div><!--          ”介绍“ 所显示的--><el-tabs v-model="activeName"><el-tab-pane label="介绍" name="introduction"><div class="tab-body"><!-- 剧情简介 --><div class="module"><div class="mod-title"><h2>剧情简介</h2></div><div class="mod-content"><span class="dra">{{movieInfo.movieIntroduction}}</span></div></div><!-- 图集 --><div class="module"><div class="mod-title"><h2>图集</h2><a class="more" @click="showPictures">全部</a></div><div class="mod-content"><div class="pictures-list"><div v-if="movieInfo.moviePictures.length === 0">暂无图片资源</div><!--                :preview-src-list:图片有时候需要放大预览，放大后可支持放大缩小等功能，element中的preview-src-list属性可以实现。-->
<!--                     460*258 --><el-imageclass="default-img":src="movieInfo.moviePictures[0]":preview-src-list="movieInfo.moviePictures"v-if="movieInfo.moviePictures.length > 0"></el-image>
<!--                  slice(1)     如果是1个参数，列arr.slice(1)从索引截取到末尾如果是2个参数, 列arr.slice（1，3）从索引1截取到3--><!--                    图片大小为126*126--><div class="little-pictures"><el-imageclass="default-img"v-for="(item,index) in movieInfo.moviePictures.slice(1)":key="index":src="item":preview-src-list="movieInfo.moviePictures"></el-image></div></div></div></div></div></el-tab-pane><!--            ”图集“所显示的--><el-tab-pane label="图集" name="pictures"><div class="tab-body"><div class="pictures-list"><div class="little-pictures"><div v-if="movieInfo.moviePictures.length == 0">暂无图片资源</div>
<!--                    图片大小为126*126--><el-imagefit="cover"class="default-img"v-for="(item,index) in movieInfo.moviePictures":key="index":src="item":preview-src-list="movieInfo.moviePictures"></el-image></div></div></div></el-tab-pane></el-tabs></div></div></div></div>
</template><script>
import movieItem from './../../components/movie/movie-item';export default {name: "MovieInfo",components:{movieItem},data() {return {movieInfo: {moviePictures: []},movieId: this.$route.params.movieId,activeName: 'introduction',colors: ['#99A9BF', '#F7BA2A', '#ff9900'],httpURL: this.global.base}},created() {this.getMovieInfo()},methods: {async getMovieInfo(){const _this = thisconst {data : res} = await axios.get('sysMovie/find/' + this.movieId)if(res.code !== 200) return this.$message.error('数据查询失败')this.movieInfo = res.data// console.log(res.data)//字符串拼接（海报）this.movieInfo.moviePoster = this.httpURL + JSON.parse(res.data.moviePoster)[0]//其他的图集this.movieInfo.moviePictures = JSON.parse(this.movieInfo.moviePictures).map((obj, index) => {return this.httpURL + obj})//电影的类型this.movieInfo.movieCategoryList = this.movieInfo.movieCategoryList.map((obj,index) => {return obj.movieCategoryName;}).join(" ")},showPictures(){this.activeName = 'pictures'},//转到播放页面toWatchMovie(){// let cinemaId = 1this.$router.push('/watchMovie/'+  this.movieInfo.movieId )}}
}
</script><style scoped>
.movie-container{}a{text-decoration: none;cursor:pointer;
}.header{padding: 0;width: 100%;min-width: 1200px;background: url('../../assets/movie-info-background.jpg')
}.header-inner{width: 1200px;margin: 0 auto;position: relative;
}.clearfix::before, .clearfix::after{content: " ";display: table;
}.clearfix::after{clear: both;
}.movie-info-left{width: 300px;height: 370px;float: left;position: relative;top: 70px;overflow: hidden;z-index: 9;
}.avatar-shadow{position: relative;margin: 0 30px;width: 240px;height: 330px;padding-bottom: 40px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAAyAgMAAAAfG76+AAAADFBMVEUAAAAAAAAAAAAAAAA16TeWAAAABHRSTlMOAgoGQ0SIeAAAADpJREFUSMdjGAWjYBRgAasoAAwdFACKbB7VPEI076YAUGbzfwrAqOYRormcAjCANodSAEY1j2oexJoBlx1+yE7RXIIAAAAASUVORK5CYII=) no-repeat bottom;
}.avatar{border: 4px solid #fff;height: 322px;width: 232px;
}.movie-info-msg{position: absolute;color: #fff;font-size: 14px;z-index: 1;
}.movie-name{width: 900px;margin-top: 0;font-size: 26px;line-height: 32px;font-weight: 700;margin-bottom: 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;max-height: 64px;
}.movie-ename{width: 340px;font-size: 18px;line-height: 1.3;margin-bottom: 14px;
}ul{width: 250px;list-style: none;padding-left: 0;margin-bottom: 20px;
}ul li{margin: 12px 0;line-height: 100%;
}.movie-info-btn{position: absolute;bottom: 20px;
}.buy-btn{margin-top: 10px;width: 250px;height: 40px;font-size: 16px;text-align: center;
}.movie-info-score{position: absolute;top: 145px;left: 342px;
}.movie-index {margin-bottom: 16px;color: #fff;
}.box-office-container{display: flex;flex-direction: column;
}.movie-index-title{font-size: 12px;margin-bottom: 8px;
}.movie-score-num{font-size: 30px;color: #ffc600;height: 30px;line-height: 30px;margin-right: 10px;
}.score-container{display: flex;flex-direction: column;align-items: center;font-size: 12px;
}.box-office{font-size: 30px;
}.unit{font-size: 12px;padding-left: 1px;line-height: 24px;
}.movie-info-right{height: 300px;position: relative;margin-right: 30px;margin-left: 300px;margin-top: 70px;
}.movie-info-detail-container{width:1200px;margin: 0 auto;
}.movie-info-detail{margin-top: 80px;
}.main-content {width: 730px;float: left;margin-bottom: 20px;
}.crumbs-nav-container {margin-bottom: 25px;color: #333;
}.crumbs-nav-container a{color: inherit;
}.el-tabs >>> .el-tabs__item{font-size: 20px;
}.tab-body{margin-top: 40px;
}.module{position: relative;margin-bottom: 60px;
}.mod-title h2{display: inline-block;margin: 0;padding: 0;font-weight: 400;font-size: 18px;color: #333;line-height: 18px;
}.mod-title h2:before {float: left;content: "";display: inline-block;width: 4px;height: 18px;margin-right: 6px;background-color: #409EFF;
}.mod-content{margin-top: 20px;color: #333;
}.mod-content .dra{font-size: 14px;line-height: 26px;
}.more{float: right;cursor: pointer;font-size: 14px;color: #999;padding-right: 14px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAOCAYAAAASVl2WAAAABmJLR0QA/wD/AP+gvaeTAAAAv0lEQVQY013RTUpDQRAE4G8eghcR8ScgKCIugpJFjuIjqAvBc7jxj0muEnCjiIQQJOImB3GnbnpkfL1qpqqrunpSzvkDPxjhGdq2VarBF3q4wRHknP8RzvCEQzzguCalaHZwiwHecY6XogCf8TjFHh7Rh9Tx3AylIZa4TgWpSBuY4BSrYlFXKsr4bjrTW5HkJJa9SBW4jbtukmKxG5MDLOKqfzEPcB9LzQN8LSdfwxj7eMMlZvV/NFiPzFddEH4Bt5Y1mf3fnDwAAAAASUVORK5CYII=) no-repeat 100%;
}.portrait{margin-bottom: 6px;width: 128px;height: 170px;overflow: hidden;
}.portrait .default-img{width: 128px;height: 170px;
}.pictures-list{display: flex;
}.pictures-list>.el-image:first-child{width: 465px;height: 258px;
}.pictures-list .default-img{border-style: none;cursor: pointer;width: 126px;height: 126px;
}.little-pictures{width: 262px;height: 262px;display: flex;flex-wrap: wrap;margin-left: 10px;justify-content: space-between;
}#pane-pictures .little-pictures{width: 100%;justify-content: flex-start;margin-left: 0;
}#pane-pictures .default-img{margin-top: 10px;margin-left: 10px;
}.user-avatar{width: 50px;height: 50px;margin-right: 20px;
}.main-header{font-size: 16px;
}.user-name{margin-top: 2px;
}</style>

watchMovie.vue

把电影文件放在pulic下面，根据movieId

<template><div class=""><!--      <a href="https://www.sdsrty.com/index.php/vod/play/id/260964/sid/1/nid/1.html">电影链接+{{this.movieId}}</a>--><video class="el-icon-video-camera"   controls="controls" autoplay="" name="media">
<!--这里进行一个字符串的拼接（vue.config.js），http://localhost:8081/1.mp4--><source  :src="this.publicPath+this.movieId+'.mp4'" type="video/mp4">
<!--        <source  :src="getImgUrl(item)" type="video/mp4">-->
<!--          <source src="../../assets/movie/B.mp4" type="video/mp4">--></video></div>
</template><script>export default {data() {return{movieId: this.$route.params.movieId,publicPath: process.env.BASE_URL}},created(){this.init()},methods: {init(){},// //获取接口代码块没写 如果有接口 还需调用接口// getImgUrl(item){//   //  this.GLOBAL.IMGS 是公共的图片路径//   //  item.avatar 接口获取到的路径数据//   // var url = this.GLOBAL.IMGS + item.avatar;//   // var url ="http://localhost:8081/media/testHuawei.c4367207.mp4"//   // var url ="http://localhost:8081/media/B.f6c00ff6.mp4"//   // http://localhost:8081/media/testHuawei2.c4367207.mp4//   var url = "http://localhost:8181/images/movieTV/testHuawei"+".mp4"//   return url;// }}}</script><style scoped>
.el-icon-video-camera{width:100%;height:100%;object-fit: fill
}</style>