You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
15 KiB
377 lines
15 KiB
7 months ago
|
<template>
|
||
|
|
<div class="container" ref="appRef">
|
||
|
|
<outsideTitle :title="title"></outsideTitle>
|
||
|
|
<div class="main">
|
||
|
|
<div class="video-box">
|
||
|
|
<span class="box-title" style="font-size: 36px">叙永新闻</span>
|
||
|
|
<div style="width: 100%; height: 780px">
|
||
|
|
<common-live-player
|
||
|
|
:videoUrl="currentVideo.playUrl"
|
||
|
|
:muted="false"
|
||
|
|
:aspect="'173:100'"
|
||
|
|
@ended="ended"
|
||
|
|
></common-live-player>
|
||
|
|
</div>
|
||
|
|
<span class="box-title"
|
||
|
|
>正在播放：{{ currentVideo.title }}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="right-box">
|
||
|
|
<div class="contetn-box">
|
||
|
|
<span class="box-title" style="font-size: 36px"
|
||
|
|
>热点推荐</span
|
||
|
|
>
|
||
|
|
<div class="list">
|
||
|
|
<vue-seamless-scroll
|
||
|
|
:data="contentList"
|
||
|
|
:class-option="option"
|
||
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
||
|
|
>
|
||
|
|
<div style="width: 100%">
|
||
|
|
<!-- <div
|
||
|
|
class="list-item"
|
||
|
|
v-for="(item, index) in contentList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<div class="content">
|
||
|
|
<div class="content-title">
|
||
|
|
{{ item.title }}
|
||
|
|
</div>
|
||
|
|
<div class="tag">
|
||
|
|
<span>{{ item.source }}</span>
|
||
|
|
<span>{{ item.publishTime }}</span>
|
||
|
|
<div style="display: flex; align-items: center;">
|
||
|
|
<Icon type="eye" style="margin-right: 5px;"></Icon>
|
||
|
|
<span>{{ item.playCount }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img :src="item.img" />
|
||
|
|
</div> -->
|
||
|
|
<div
|
||
|
|
class="item-box"
|
||
|
|
v-for="(item, index) in contentList"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<img :src="item.img" />
|
||
|
|
<div style="width: 100%; margin-top: 5px">
|
||
|
|
<span
|
||
|
|
style="
|
||
|
|
font-size: 24px;
|
||
|
|
color: #ffffff;
|
||
|
|
"
|
||
|
|
>{{ item.title }}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 20px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
style="
|
||
|
|
font-size: 18px;
|
||
|
|
color: #ffffff;
|
||
|
|
"
|
||
|
|
>{{ item.source }}</span
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
style="
|
||
|
|
font-size: 18px;
|
||
|
|
color: #ffffff;
|
||
|
|
"
|
||
|
|
>{{ item.publishTime }}</span
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
type="eye"
|
||
|
|
color="#ffffff"
|
||
|
|
size="20"
|
||
|
|
style="margin-right: 5px"
|
||
|
|
></Icon>
|
||
|
|
<span
|
||
|
|
style="
|
||
|
|
font-size: 18px;
|
||
|
|
color: #ffffff;
|
||
|
|
"
|
||
|
|
>{{ item.playCount }}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</vue-seamless-scroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="qrcode-box">
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<img :src="require('@/assets/wlxy.jpg')" />
|
||
|
|
<span>文旅叙永</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<img :src="require('@/assets/xyfb.png')" />
|
||
|
|
<span>看叙永</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { useIndex } from "@/utils/utilsDramAdmin";
|
||
|
|
import outsideTitle from "./components/outsideTitle.vue";
|
||
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
||
|
|
import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
|
||
|
|
export default {
|
||
|
|
name: "OutSide",
|
||
|
|
components: {
|
||
|
|
outsideTitle,
|
||
|
|
vueSeamlessScroll,
|
||
|
|
CommonLivePlayer,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "智慧广电示范区",
|
||
|
|
videoList: [],
|
||
|
|
contentList: [],
|
||
|
|
index: 0,
|
||
|
|
currentVideo: {},
|
||
|
|
option: {
|
||
|
|
step: 0.3, // 数值越大速度滚动越快
|
||
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
||
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
||
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
||
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
||
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {},
|
||
|
|
mounted() {
|
||
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
||
|
|
calcRate();
|
||
|
|
windowDraw();
|
||
|
|
this.queryTvList();
|
||
|
|
this.queryContentList();
|
||
|
|
},
|
||
|
|
beforeDestroy() {},
|
||
|
|
methods: {
|
||
|
|
ended() {
|
||
|
|
this.index += 1;
|
||
|
|
if (this.index > this.videoList.length - 1) {
|
||
|
|
this.index = 0;
|
||
|
|
}
|
||
|
|
this.onClick(this.index);
|
||
|
|
},
|
||
|
|
// 自动播放点击
|
||
|
|
onClick(index) {
|
||
|
|
this.currentVideo = this.videoList[index];
|
||
|
|
},
|
||
|
|
// 查询电视新闻列表
|
||
|
|
queryTvList() {
|
||
|
|
let url = "/links/getTVInfoPage";
|
||
|
|
let params = {
|
||
|
|
page: 0,
|
||
|
|
};
|
||
|
|
|
||
|
|
this.$http.post(url, this.common.request(params)).then((res) => {
|
||
|
|
if (res && res.data.code >= 200 && res.data.code < 400) {
|
||
|
|
this.videoList = res.data.data.contentList.splice(0, 10);
|
||
|
|
this.videoList = this.videoList.map((item) => ({
|
||
|
|
...item,
|
||
|
|
playUrl: item.playInfo.playUrl,
|
||
|
|
}));
|
||
|
|
this.onClick(0);
|
||
|
|
} else {
|
||
|
|
this.$Message.error("获取数据失败");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 查询列表
|
||
|
|
queryContentList() {
|
||
|
|
let url = "/links/getColumnInfoPage";
|
||
|
|
let params = {
|
||
|
|
jumpId: 958,
|
||
|
|
page: 0,
|
||
|
|
};
|
||
|
|
|
||
|
|
this.$http.post(url, this.common.request(params)).then((res) => {
|
||
|
|
if (res && res.data.code >= 200 && res.data.code < 400) {
|
||
|
|
this.contentList = res.data.data.contentList.splice(0, 10);
|
||
|
|
this.contentList.forEach((item) => {
|
||
|
|
if (item.imgList.length > 0) {
|
||
|
|
item.img = item.imgList[0].url;
|
||
|
|
}
|
||
|
|
if (item.playCount >= 1000) {
|
||
|
|
item.playCount =
|
||
|
|
(item.playCount / 1000).toFixed(1) + "K";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$Message.error("获取数据失败");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.box-title {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
font-family: "ShiShangZhongHeiJianTi";
|
||
|
|
font-size: 30px;
|
||
|
|
background: linear-gradient(180deg, #ffffff 27.08%, #bcddff 100%);
|
||
|
|
margin: 5px 0;
|
||
|
|
background-clip: text;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
writing-mode: unset;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
width: 1920px;
|
||
|
|
height: 1080px;
|
||
|
|
transform: scale(var(--scale)) translate(-50%, -50%);
|
||
|
|
transform-origin: 0 0;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
background-image: url("./../../assets/largeScreen/page-bg.png");
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.main {
|
||
|
|
width: 100%;
|
||
|
|
height: 920px;
|
||
|
|
padding: 0 30px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.video-box {
|
||
|
|
width: 1350px;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.right-box {
|
||
|
|
width: 480px;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.contetn-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 680px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.list {
|
||
|
|
width: 100%;
|
||
|
|
height: 625px;
|
||
|
|
.list-item {
|
||
|
|
width: 100%;
|
||
|
|
height: 130px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.content {
|
||
|
|
width: 255px;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.content-title {
|
||
|
|
width: 100%;
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 18px;
|
||
|
|
display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
|
||
|
|
-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
|
||
|
|
text-overflow: ellipsis; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
|
||
|
|
-webkit-line-clamp: 3;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.tag {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
color: #d8d4d4;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
width: 200px;
|
||
|
|
height: 122px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-bottom: 30px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 270px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.qrcode-box {
|
||
|
|
width: 100%;
|
||
|
|
height: 220px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
img {
|
||
|
|
width: 200px;
|
||
|
|
height: 200px;
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
font-family: "ShiShangZhongHeiJianTi";
|
||
|
|
font-size: 18px;
|
||
|
|
background: linear-gradient(
|
||
|
|
180deg,
|
||
|
|
#ffffff 27.08%,
|
||
|
|
#bcddff 100%
|
||
|
|
);
|
||
|
|
margin: 5px 0;
|
||
|
|
background-clip: text;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|