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.
1031 lines
48 KiB
1031 lines
48 KiB
<template>
|
|
<!-- 图书馆 -->
|
|
<div class="eb-container" ref="appRef">
|
|
<MainTitle class="title" :title="title"></MainTitle>
|
|
<div class="main-container">
|
|
<div class="left-box">
|
|
<div class="base-info">
|
|
<div class="title-box-samll">
|
|
<span>基本概况</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/xiaqu.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>建筑面积(㎡)</span>
|
|
<span>{{
|
|
baseInfo[0] && baseInfo[0].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/gendi.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>馆内座位(座)</span>
|
|
<span>{{
|
|
baseInfo[1] && baseInfo[1].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/hushu.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>现有图书(册)</span>
|
|
<span>{{
|
|
baseInfo[2] && baseInfo[2].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/renkou.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>馆藏图书(册)</span>
|
|
<span>{{
|
|
baseInfo[3] && baseInfo[3].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="activity-info">
|
|
<div class="title-box-samll">
|
|
<span>活动信息</span>
|
|
</div>
|
|
<div class="content-info" id="barChart"></div>
|
|
</div>
|
|
<div class="hot-rank">
|
|
<div class="title-box-samll">
|
|
<span>热度排行</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<vue-seamless-scroll
|
|
:data="rankList"
|
|
:class-option="rankOption"
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
|
>
|
|
<div class="hot-scenic-info">
|
|
<div
|
|
class="hot-scenic-item"
|
|
v-for="(item, index) in rankList"
|
|
:key="index"
|
|
>
|
|
<div class="ranking">
|
|
No.{{ index + 1 }}
|
|
</div>
|
|
<div class="scenicNmae">
|
|
{{ item.label }}
|
|
</div>
|
|
<div class="numvote">{{ item.value }}</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center-box">
|
|
<div class="video-box">
|
|
<common-live-player :video-url="videoUrl" :live="true" :muted="false"></common-live-player>
|
|
<div class="video-list" @click="changeVideo($event)">
|
|
<vue-seamless-scroll
|
|
:data="videoList"
|
|
:class-option="videoOption"
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="video-item"
|
|
v-for="(item, index) in videoList"
|
|
:key="index"
|
|
:data-index="index"
|
|
>
|
|
<img :src="item.coverImage" :data-index="index" />
|
|
<div class="title" :data-index="index">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
<div class="books">
|
|
<div class="title-box-medium" style="width: 860px;">
|
|
<span>图书推荐</span>
|
|
</div>
|
|
<div class="content-info" @click="openInfo($event, bookList)">
|
|
<vue-seamless-scroll
|
|
:data="bookList"
|
|
:class-option="bookOption"
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="book-item"
|
|
v-for="(item, index) in bookList"
|
|
:key="index"
|
|
:data-index="index"
|
|
>
|
|
<img :src="item.coverImage" :data-index="index" />
|
|
<span class="title" :data-index="index">{{ item.title }}</span>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<div class="borrowing-info">
|
|
<div class="title-box-samll">
|
|
<span>借阅分析</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/xiaqu.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>今日读者(人)</span>
|
|
<span>{{
|
|
borrowList[0] && borrowList[0].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/gendi.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>本月读者(人)</span>
|
|
<span>{{
|
|
borrowList[1] && borrowList[1].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/hushu.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>本月借阅(本)</span>
|
|
<span>{{
|
|
borrowList[2] && borrowList[2].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="require('@/assets/screenView/renkou.png')"
|
|
/>
|
|
<div class="content">
|
|
<span>本月归还(本)</span>
|
|
<span>{{
|
|
borrowList[3] && borrowList[3].value
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="classify-info">
|
|
<div class="title-box-samll">
|
|
<span>图书分类</span>
|
|
</div>
|
|
<div class="content-info" id="lineChart"></div>
|
|
</div>
|
|
<div class="info-list">
|
|
<div class="title-box-samll">
|
|
<span>图书馆资讯</span>
|
|
</div>
|
|
<div class="content-info" @click="openInfo($event, queryContentInfoList)">
|
|
<vue-seamless-scroll
|
|
:data="queryContentInfoList"
|
|
:class-option="infoOption"
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="info-item"
|
|
style="
|
|
display: flex;
|
|
overflow: hidden;
|
|
gap: 15px;
|
|
margin-bottom: 10px;
|
|
"
|
|
v-for="(
|
|
item, index
|
|
) in queryContentInfoList"
|
|
:key="index"
|
|
:data-index="index"
|
|
>
|
|
<img
|
|
:src="item.coverImage"
|
|
style="width: 50%; height: 120px"
|
|
:data-index="index"
|
|
/>
|
|
<div
|
|
style="
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
"
|
|
:data-index="index"
|
|
>
|
|
<div
|
|
style="font-size: 16px"
|
|
class="title"
|
|
:data-index="index"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
<div
|
|
style="
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
color: #c1c1c1;
|
|
"
|
|
:data-index="index"
|
|
>
|
|
{{ item.createTime }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-bottom-bg"></div>
|
|
<div class="page-left-bg"></div>
|
|
<div class="page-right-bg"></div>
|
|
<common-modal v-model="imgTextModal" @close="imgTextModal = false" :title="info.title" width="600">
|
|
<modalDetail :current-activity="info" :imgTextModal="imgTextModal"></modalDetail>
|
|
</common-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useIndex } from "../../utils/utilsDramAdmin";
|
|
import MainTitle from "./components/MainTitle.vue";
|
|
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
|
|
import * as echarts from "echarts";
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
|
|
import commonModal from '@/views/common-components/common-modal.vue'
|
|
import modalDetail from './components/modalDetail.vue'
|
|
|
|
export default {
|
|
name: "LibraryCenter",
|
|
components: { MainTitle, vueSeamlessScroll, CommonLivePlayer, commonModal, modalDetail },
|
|
data() {
|
|
return {
|
|
title: "翠屏区图书馆",
|
|
areaCode: "2021030823390054",
|
|
baseInfo: [],
|
|
borrowList: [],
|
|
rankList: [],
|
|
rankOption: {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 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)
|
|
},
|
|
videoList: [],
|
|
videoOption: {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
},
|
|
bookList: [],
|
|
bookOption: {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
},
|
|
|
|
queryContentInfoList: [],
|
|
infoOption: {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 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)
|
|
},
|
|
videoUrl: "",
|
|
imgTextModal: false,
|
|
info: {}
|
|
};
|
|
},
|
|
computed: {},
|
|
created() {},
|
|
beforeDestroy() {
|
|
echartsClear();
|
|
},
|
|
mounted() {
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
|
calcRate();
|
|
windowDraw();
|
|
this.queryContentInfo();
|
|
this.queryVideo()
|
|
// 基本概况
|
|
this.initDataInfo("libarayBaseInfo", data => {
|
|
this.baseInfo = data
|
|
})
|
|
// 活动信息
|
|
this.initDataInfo("libarayActivity", data => {
|
|
let xData = data.map(item => item.label)
|
|
let yData = data.map(item => Number(item.value))
|
|
this.initBarChart(xData, yData)
|
|
})
|
|
// 热度排行
|
|
this.initDataInfo("libarayHotRank", data => {
|
|
this.rankList = data
|
|
})
|
|
// 借阅分析
|
|
this.initDataInfo("libarayPersonSpecial", data => {
|
|
this.borrowList = data
|
|
})
|
|
// 图书分类
|
|
this.initDataInfo("libarayclassify", data => {
|
|
let xData = data.map(item => item.label)
|
|
let yData = data.map(item => Number(item.value))
|
|
this.initlineChart2(xData, yData)
|
|
})
|
|
// 图书推荐
|
|
this.queryRecommend()
|
|
},
|
|
beforeDestroy() {},
|
|
methods: {
|
|
initBarChart(xData, yData) {
|
|
let myChart = echarts.init(document.getElementById("barChart"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
label: {
|
|
backgroundColor: "#6a7985",
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
axisLabel: {
|
|
margin: 10,
|
|
interval: 0,
|
|
color: "#ffffff",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
data: xData,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#35414c",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
bottom: "15%",
|
|
width: "87%",
|
|
height: "75%",
|
|
},
|
|
series: [
|
|
{
|
|
data: yData,
|
|
type: "bar",
|
|
barWidth: "16px",
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: "#105071",
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: "#1892c2",
|
|
},
|
|
]
|
|
),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xData.length);
|
|
},
|
|
initlineChart2(xData, yData) {
|
|
let myChart = echarts.init(document.getElementById("lineChart"));
|
|
let num = 0;
|
|
yData.forEach((item) => {
|
|
num = num + Number(item);
|
|
});
|
|
let img =
|
|
"data:image/png;base64,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";
|
|
let data = [];
|
|
for (let i = 0; i < yData.length; i++) {
|
|
data.push({
|
|
value: yData[i],
|
|
name: xData[i],
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 1,
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
var seriesOption = [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
clockWise: false,
|
|
center: ["21%", "50%"],
|
|
radius: [70, 84],
|
|
hoverAnimation: false,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
position: "outside",
|
|
color: "#ddd",
|
|
formatter: function (params) {
|
|
var percent = 0;
|
|
var total = 0;
|
|
for (var i = 0; i < yData.length; i++) {
|
|
total += yData[i];
|
|
}
|
|
percent = (
|
|
(params.value / total) *
|
|
100
|
|
).toFixed(0);
|
|
if (params.name !== "") {
|
|
return (
|
|
params.name +
|
|
"\n" +
|
|
"\n" +
|
|
"占百分比：" +
|
|
percent +
|
|
"%"
|
|
);
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
},
|
|
labelLine: {
|
|
length: 30,
|
|
length2: 100,
|
|
show: true,
|
|
color: "#00ffff",
|
|
},
|
|
},
|
|
},
|
|
data: data,
|
|
},
|
|
];
|
|
let option = {
|
|
title: [
|
|
{
|
|
text: "{name|" + num + "本" + "}",
|
|
top: "center",
|
|
left: "10%",
|
|
textStyle: {
|
|
rich: {
|
|
name: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
color: "#fff",
|
|
padding: [0, 0, 0, 0],
|
|
},
|
|
val: {
|
|
fontSize: 14,
|
|
fontWeight: "bold",
|
|
color: "#fff",
|
|
padding: [0, 0, 5, 0],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
graphic: {
|
|
elements: [
|
|
{
|
|
type: "image",
|
|
z: 3,
|
|
style: {
|
|
image: img,
|
|
width: 110,
|
|
height: 110,
|
|
},
|
|
left: "8%",
|
|
top: "center",
|
|
position: [100, 100],
|
|
},
|
|
],
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
data: xData,
|
|
left: "50%",
|
|
width: "50%",
|
|
icon: "circle",
|
|
itemHeight: "12",
|
|
textStyle: {
|
|
color: "#FFF",
|
|
fontSize: "10px",
|
|
},
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
},
|
|
series: seriesOption,
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xData.length);
|
|
},
|
|
queryContentInfo() {
|
|
this.$http
|
|
.post(
|
|
"/content/queryContentInfo",
|
|
this.common.request({
|
|
areaCode: "",
|
|
hasParent: "0",
|
|
page: 1,
|
|
typeCode: "TSGINFO",
|
|
pageSize: 10,
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
this.queryContentInfoList = res.data.data.records;
|
|
}
|
|
});
|
|
},
|
|
queryRecommend() {
|
|
this.$http
|
|
.post(
|
|
"/content/queryContentInfo",
|
|
this.common.request({
|
|
areaCode: "",
|
|
hasParent: "0",
|
|
page: 1,
|
|
typeCode: "RECOMMEND",
|
|
pageSize: 10,
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
this.bookList = res.data.data.records;
|
|
}
|
|
});
|
|
},
|
|
// 获取数据
|
|
initDataInfo(type, callback) {
|
|
let params = {
|
|
page: 1,
|
|
pageSize: 100,
|
|
areaCode: this.areaCode,
|
|
type,
|
|
};
|
|
this.$http
|
|
.post("screen/getScreenSurveyPage", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
let data = res.data.data.records;
|
|
callback(data);
|
|
}
|
|
});
|
|
},
|
|
// 查询视频
|
|
queryVideo() {
|
|
this.$http.post("/screen/getScreenVideoList", this.common.request({ areaCode: this.areaCode, type: "libaray", state: "0" }))
|
|
.then(res => {
|
|
if (res.data.code === 200) {
|
|
this.videoList = res.data.data.length && res.data.data
|
|
this.videoUrl = this.videoList[0].urlList
|
|
}
|
|
})
|
|
},
|
|
// 切换视频
|
|
changeVideo(e){
|
|
let index = e.target.dataset.index
|
|
let data = this.videoList[index]
|
|
this.videoUrl = data.urlList
|
|
},
|
|
// 打开资讯
|
|
openInfo(e, list){
|
|
let index = e.target.dataset.index
|
|
let data = list[index]
|
|
if (data.contentType == "3") {
|
|
this.common.openWindow(data);
|
|
} else {
|
|
this.info = data
|
|
this.imgTextModal = true
|
|
}
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../styles/pbStyle.less";
|
|
.eb-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%;
|
|
|
|
.main-container {
|
|
width: 1804px;
|
|
height: 920px;
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left-box {
|
|
width: 458px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.base-info {
|
|
width: 100%;
|
|
height: 250px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
padding: 20px;
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
grid-template-rows: 50% 50%;
|
|
.data-item {
|
|
// width: 188px;
|
|
// height: 53px;
|
|
// margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.content {
|
|
width: 130px;
|
|
height: 53px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 10px;
|
|
|
|
span:nth-child(1) {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
font-family: "DIN";
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.activity-info {
|
|
width: 100%;
|
|
height: 300px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
}
|
|
}
|
|
.hot-rank {
|
|
width: 100%;
|
|
height: 350px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
.hot-scenic-info {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.hot-scenic-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 430px;
|
|
height: 34px;
|
|
margin-bottom: 10px;
|
|
background-image: url("../../assets/screenView/hot.png");
|
|
background-size: 100%;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.ranking {
|
|
width: 93px;
|
|
height: 34px;
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #c3d4ea;
|
|
|
|
background-image: url("../../assets/screenView/NoDefault.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.scenicNmae {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
width: 60%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
position: absolute;
|
|
left: 100px;
|
|
}
|
|
|
|
.numvote {
|
|
font-family: "Furore";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
color: #ffffff;
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
|
|
.hot-scenic-item:nth-child(1) .ranking {
|
|
width: 93px;
|
|
height: 34px;
|
|
background-image: url("../../assets/screenView/No1.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.hot-scenic-item:nth-child(2) .ranking {
|
|
width: 93px;
|
|
height: 34px;
|
|
background-image: url("../../assets/screenView/No2.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.hot-scenic-item:nth-child(3) .ranking {
|
|
width: 93px;
|
|
height: 34px;
|
|
background-image: url("../../assets/screenView/No3.png");
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.center-box {
|
|
width: 860px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.video-box {
|
|
width: 100%;
|
|
height: 650px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.video-list {
|
|
width: 100%;
|
|
height: 150px;
|
|
|
|
.list {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.video-item {
|
|
width: 260px;
|
|
height: 100%;
|
|
margin-right: 10px;
|
|
position: relative;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 150px;
|
|
border-radius: 8px;
|
|
}
|
|
.title {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 5px;
|
|
width: 100%;
|
|
height: 30px;
|
|
border-radius: 0 0 8px 8px;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.books {
|
|
width: 100%;
|
|
height: 250px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 50px));
|
|
background: unset;
|
|
.list {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.book-item {
|
|
width: 116px;
|
|
height: 100%;
|
|
margin-right: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 180px;
|
|
border-radius: 4px;
|
|
}
|
|
.title {
|
|
width: 100%;
|
|
height: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-box {
|
|
width: 458px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.borrowing-info {
|
|
width: 100%;
|
|
height: 250px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
padding: 20px;
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
grid-template-rows: 50% 50%;
|
|
.data-item {
|
|
// width: 188px;
|
|
// height: 53px;
|
|
// margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
img {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.content {
|
|
width: 130px;
|
|
height: 53px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 10px;
|
|
|
|
span:nth-child(1) {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
font-family: "DIN";
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.classify-info {
|
|
width: 100%;
|
|
height: 300px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.info-list {
|
|
width: 100%;
|
|
height: 350px;
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
padding: 10px;
|
|
color: #ffffff;
|
|
.list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.info-item {
|
|
width: 100%;
|
|
height: 120px;
|
|
position: relative;
|
|
margin-right: 20px;
|
|
|
|
.title {
|
|
display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
|
|
-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
|
|
text-overflow: ellipsis; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|