|
@@ -2,9 +2,20 @@
|
|
<div class="WorldCup" :style="'font-size: ' + fontSize + 'px'">
|
|
<div class="WorldCup" :style="'font-size: ' + fontSize + 'px'">
|
|
<div class="up">
|
|
<div class="up">
|
|
<img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
|
|
<img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
|
|
- <div class="video">
|
|
|
|
- <img src="" alt="" />
|
|
|
|
- </div>
|
|
|
|
|
|
+ <van-swipe class="Banner video" :autoplay="3000" indicator-color="white">
|
|
|
|
+ <van-swipe-item
|
|
|
|
+ v-for="item in Banner"
|
|
|
|
+ :key="item.url"
|
|
|
|
+ @click="() => playVideo(item)"
|
|
|
|
+ >
|
|
|
|
+ <van-icon name="play-circle-o" class="play" />
|
|
|
|
+ <img
|
|
|
|
+ :src="item.url + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ </van-swipe-item>
|
|
|
|
+ </van-swipe>
|
|
|
|
+
|
|
<img class="activityTitle" :src="require('../../assets/img/T.png')" />
|
|
<img class="activityTitle" :src="require('../../assets/img/T.png')" />
|
|
<div class="activity">
|
|
<div class="activity">
|
|
<p>
|
|
<p>
|
|
@@ -67,9 +78,16 @@
|
|
投票
|
|
投票
|
|
</van-button>
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <Shanshipin />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
<script setup>
|
|
|
|
+import Shanshipin from "@/components/shanshipin.vue";
|
|
|
|
+// import { ElCarouselItem, ElCarousel } from "element-plus";
|
|
|
|
+// import "element-plus/theme-chalk/base.css";
|
|
|
|
+// import "element-plus/theme-chalk/el-carousel.css";
|
|
|
|
+// import "element-plus/theme-chalk/el-carousel-item.css";
|
|
import { isShanshipin, isWechat } from "@/utils/isTerminal";
|
|
import { isShanshipin, isWechat } from "@/utils/isTerminal";
|
|
import { ref, provide, reactive } from "vue";
|
|
import { ref, provide, reactive } from "vue";
|
|
import chat from "./components/chat.vue";
|
|
import chat from "./components/chat.vue";
|
|
@@ -293,6 +311,22 @@ function vote() {
|
|
.up {
|
|
.up {
|
|
padding-top: 38.8vw;
|
|
padding-top: 38.8vw;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ .Banner {
|
|
|
|
+ font-size: 0;
|
|
|
|
+ position: relative;
|
|
|
|
+ img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ .play {
|
|
|
|
+ position: absolute;
|
|
|
|
+ font-size: 40px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ z-index: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.upbg {
|
|
.upbg {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|