|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/video_bg.jpg')})`}">
|
|
|
|
|
|
+ <div v-if="!isMobile" class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/video_bg.jpg')})`}">
|
|
<div class="title">{{hotspot.title}}</div>
|
|
<div class="title">{{hotspot.title}}</div>
|
|
<div class="img-con">
|
|
<div class="img-con">
|
|
<span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
|
|
<span @click="active-=1" :class="{noshow:active<=0}">上一张</span>
|
|
@@ -15,6 +15,16 @@
|
|
<div class="desc" v-html="hotspot.content">
|
|
<div class="desc" v-html="hotspot.content">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div v-else class="mbimages" :style="{backgroundImage:`url(${require('@/assets/images/project/mb_hostpot.jpg')})`}">
|
|
|
|
+ <div class="title">{{hotspot.title}}</div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <div v-if="hotspot.content" class="desc">
|
|
|
|
+ <p>简介:</p>
|
|
|
|
+ <div v-html="hotspot.content"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -109,4 +119,57 @@ export default {
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+@position:62px;
|
|
|
|
+.mbimages{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-size: 100% calc(100% + @position);
|
|
|
|
+ background-position: 0 -@position;
|
|
|
|
+ text-align: center;
|
|
|
|
+ .title{
|
|
|
|
+ width: 90%;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ color: #DBA761;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ background: #BC1515;
|
|
|
|
+ border-radius: 60px;
|
|
|
|
+ margin: 20px auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .videocon{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding-bottom: 40px;
|
|
|
|
+ >video{
|
|
|
|
+ max-width: 1000px;
|
|
|
|
+ border: 10px solid #BC1515;
|
|
|
|
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
|
+ max-height: 600px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .desc{
|
|
|
|
+ color: #DBA761;
|
|
|
|
+ text-align: left;
|
|
|
|
+ width: 85%;
|
|
|
|
+ margin: 20px auto 0;
|
|
|
|
+ p{
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ div{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ line-height: 1.5;
|
|
|
|
+ max-height: 50vh;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|