<template>
|
<div class="integralProdBox">
|
<div class="topContent">
|
<el-carousel :interval="5000" arrow="always">
|
<el-carousel-item v-for="item in form.imgIdUrls" :key="item">
|
<video v-show='getFileType(item.imgUrl) === "video"' controls :src="item.imgUrl"/>
|
<img v-show='getFileType(item.imgUrl) !== "video"' :src="item.imgUrl"/>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="spuName">{{form.spuName}}</div>
|
<div class="couponTag">可售数量：{{form.surplus === -1 ?'不限制':form.surplus+' (单瓶)'}}</div>
|
</div>
|
<div class="infoContent">
|
<div class="infoTop">介绍 </div>
|
<div class="introduce" v-html="form.productDesc"></div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getFileType } from '@/utils/getFileType'
|
export default {
|
props: ['form'],
|
methods: {
|
// 获取文件类型
|
getFileType (file) {
|
return getFileType(file)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.integralProdBox{
|
font-size: 16px;
|
width: 100%;
|
.topContent{
|
img, video{
|
width: 100%;
|
height: 100%;
|
}
|
div{
|
margin-bottom: 8px;
|
}
|
.couponTag{
|
color: #f56c6c;
|
}
|
}
|
.infoContent{
|
margin-top: 20px;
|
margin-bottom: 15px;
|
max-width: 455px;
|
.infoTop{
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
font-size: 14px;
|
font-weight: 400;
|
color: #333;
|
position: relative;
|
margin-bottom: 12px;
|
}
|
.infoTop::after{
|
right: 8%;
|
}
|
.infoTop::before{
|
left: 8%;
|
}
|
.infoTop::after, .infoTop::before{
|
content: '';
|
width: 25%;
|
height: 1px;
|
position: absolute;
|
top: 50%;
|
background-color: #bdbdbd;
|
}
|
}
|
.introduce{
|
width: 95%;
|
padding-left: 13px;
|
img, video{width: 100%;height: auto}
|
div,p{
|
width: 100% !important;
|
}
|
}
|
}
|
</style>
|
