Skip to content

E
exhibition_page
提交 94aee6d3 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

红色主题

上级 0f22ce97
显示空白字符变更
内嵌 并排
正在显示 包含 633 行增加 和 740 行删除
src/components/Footer/index.vue
浏览文件 @ 94aee6d3
......@@ -4,7 +4,7 @@
:class="{
footer: true,
//isHome:isHome,
isChStyle: navbarStyle == '2',
//isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5',
......@@ -230,7 +230,9 @@ export default {
background-color: #892325 !important;
}
.isRedStyle {
background-color: #a30e0c !important;
background-color: #813525 !important;
position: relative;
top: -$nav-height;
}
.isSDCS {
......
src/components/NavBar/index.vue
浏览文件 @ 94aee6d3
......@@ -6,7 +6,7 @@
'header-fixed ': isFixed,
// 'header-absolute': isHome || isBoutique,
//'show-themeColor': isFixed && isHome,
isChStyle: navbarStyle == '2',
//isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4' && isFixed,
isSMGZ: navbarStyle == '5' && isFixed,
......@@ -601,7 +601,8 @@ export default {
}
.isRedStyle {
background-color: #a30e0c !important;
// background-color: #813525 !important;
background-color: rgba(0,0,0,0.25) !important;
}
.isSDCS {
......
src/components/ReaderOperations/index.vue
浏览文件 @ 94aee6d3
<template>
<div class="reader-operations">
<span class="operations">
<span class="operation-item" v-if="like">
<span
class="operations"
:style="{
color: color,
}"
>
<span class="operation-item">
<svg-icon
icon-class="view"
:style="{
fontSize: iconSize + 'px',
color: color,
}"
></svg-icon>
<span>{{ formatNum(info.browseCount) }}</span>
</span>
<span class="operation-item">
<svg-icon
@click="handleLike"
icon-class="like-s"
:icon-class="info.loaveCountStatus ? 'dianzan-s' : 'dianzan'"
:style="{
fontSize: iconSize + 'px',
color: loveCountStatus ? selectColor : '#61666d',
color: info.loaveCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{
formatNum(loveCount) == 0 ? "点赞" : formatNum(loveCount)
formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
}}</span>
</span>
<span class="operation-item" @click="handleCollect" v-if="collect">
<span class="operation-item" @click="handleCollect">
<svg-icon
icon-class="collect-s-2"
:icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
:style="{
fontSize: iconSize + 'px',
color: collectCountStatus ? selectColor : '#61666d',
color: info.collectCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{
formatNum(collectCount) == 0 ? "收藏" : formatNum(collectCount)
formatNum(info.collectCount) == 0
? "收藏"
: formatNum(info.collectCount)
}}</span>
</span>
<span v-if="share" class="operation-item" @click="handleShare">
<span class="operation-item" @click="handleShare">
<svg-icon
icon-class="share2"
:style="{
......@@ -82,62 +99,90 @@ import { debounce, formatNum } from "@/utils/index";
export default {
name: "ReaderOperations",
props: {
// 是否需要点赞,默认需要
like: {
type: Boolean,
default: true,
},
// 是否需要收藏，默认需要
collect: {
type: Boolean,
default: true,
},
// 是否需要分享，默认需要
share: {
type: Boolean,
default: true,
},
// 点赞数量
loveCount: {
type: String,
default: "0",
},
// 收藏数量
collectCount: {
type: String,
default: "0",
},
// 点赞状态
loveCountStatus: {
type: Boolean,
default: false,
},
// 收藏状态
collectCountStatus: {
type: Boolean,
default: false,
},
sourceId: {
type: String,
default: "",
// // 是否需要点赞,默认需要
// like: {
// type: Boolean,
// default: true,
// },
// // 是否需要收藏，默认需要
// collect: {
// type: Boolean,
// default: true,
// },
// // 是否需要分享，默认需要
// share: {
// type: Boolean,
// default: true,
// },
// // 点赞数量
// loveCount: {
// type: String,
// default: "0",
// },
// // 收藏数量
// collectCount: {
// type: String,
// default: "0",
// },
// // 点赞状态
// loveCountStatus: {
// type: Boolean,
// default: false,
// },
// // 收藏状态
// collectCountStatus: {
// type: Boolean,
// default: false,
// },
// sourceId: {
// type: String,
// default: "",
// },
info: {
type: Object,
default: () => ({}),
},
// 来源类型 biz_cultural_relic-文物；biz_exhibition-布展；biz_elite_exhibition-精品展
sourceType: {
type: String,
default: "",
},
title: {
type: String,
default: "",
},
// title: {
// type: String,
// default: "",
// },
iconSize: {
type: [Number, String],
default: 28,
},
color: {
type: String,
default: "#fff",
},
selectColor: {
type: String,
default: "$themeColor",
default: "#fff",
},
// //图标未选中时的颜色
// iconColor: {
// type: String,
// default: "#fff",
// },
// //图标选中时的颜色
// selectIconColor: {
// type: String,
// default: "#fff",
// },
// // 文字未选中时的颜色
// fontColor: {
// type: String,
// default: "#fff",
// },
// // 文本选中时的颜色
// selectFontColor: {
// type: String,
// default: "#fff",
// },
},
data() {
return {
......@@ -152,10 +197,19 @@ export default {
methods: {
handleCollect: debounce(function () {
if (this.token) {
let sourceId;
let title;
if (this.sourceType == "biz_cultural_relic") {
sourceId = this.info.crId;
title = this.info.name;
} else if (this.sourceType == "biz_exhibition") {
sourceId = this.info.exhibitionId;
title = this.info.title;
}
const params = {
sourceId: this.sourceId,
sourceType: this.sourceType,
title: this.title,
sourceId,
title,
};
this.$store.dispatch("user/toggleCollect", params).then(() => {
if (!this.collectCountStatus) {
......@@ -173,13 +227,22 @@ export default {
// 点赞
handleLike: debounce(function () {
if (this.token) {
let sourceId;
let title;
if (this.sourceType == "biz_cultural_relic") {
sourceId = this.info.crId;
title = this.info.name;
} else if (this.sourceType == "biz_exhibition") {
sourceId = this.info.exhibitionId;
title = this.info.title;
}
const params = {
sourceId: this.sourceId,
sourceType: this.sourceType,
title: this.title,
sourceId,
title,
};
this.$store.dispatch("user/toggleLike", params).then(() => {
if (!this.loveCountStatus) {
if (!this.info.loaveCountStatus) {
// 点赞
this.$message.success("已点赞！");
} else {
......@@ -230,9 +293,9 @@ export default {
</script>
<style lang="scss" scoped>
.reader-operations{
.reader-operations {
width: 100%;
max-width: 300px;
max-width: 500px;
}
.operations {
// margin-top: 22px;
......@@ -242,14 +305,12 @@ export default {
.operation-item {
display: flex;
align-items: center;
// margin-right: 32px;
cursor: pointer;
font-size: 14px;
}
.svg-icon {
margin-right: 10px;
font-size: 24px;
color: #61666d;
}
.like {
color: #831122;
......
src/icons/svg/collect-s-2.svg deleted 100644 → 0
浏览文件 @ 0f22ce97
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667543993617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4363" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M284.458667 941.397333c-36.437333 15.637333-68.48-7.68-64.896-47.168l22.613333-248.917333-164.394667-188.053333c-26.069333-29.824-13.653333-67.562667 24.789334-76.309334l243.370666-55.381333 127.786667-214.677333c20.288-34.090667 59.946667-34.069333 80.213333 0l127.786667 214.677333 243.370667 55.381333c38.656 8.789333 50.858667 46.485333 24.789333 76.309334l-164.394667 188.053333 22.741334 249.002667c3.605333 39.509333-28.458667 62.805333-64.896 47.146666l-229.504-98.517333-229.376 98.453333z" p-id="4364"></path></svg>
\ No newline at end of file
src/icons/svg/collect-s.svg
浏览文件 @ 94aee6d3
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661508484412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2637" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M519.2 807.2l255.2 133.6c12 6.4 25.6-4 23.2-16.8L748.8 640c-0.8-4.8 0.8-10.4 4.8-14.4L960 424.8c9.6-9.6 4-25.6-8.8-27.2l-284.8-41.6c-5.6-0.8-9.6-4-12-8.8l-128-257.6c-5.6-12-23.2-12-28.8 0L370.4 348c-2.4 4.8-7.2 8-12 8.8L73.6 398.4c-13.6 1.6-18.4 17.6-8.8 27.2l206.4 200.8c4 4 5.6 8.8 4.8 14.4l-48.8 284c-2.4 12.8 11.2 23.2 23.2 16.8L505.6 808c4-3.2 8.8-3.2 13.6-0.8z" p-id="2638"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671607074293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4937" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="4938"></path></svg>
\ No newline at end of file
src/icons/svg/collect.svg
浏览文件 @ 94aee6d3
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1661508487793" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2779" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676zM691.986257 602.337471c-6.882757 7.039323-10.060123 16.974603-8.471952 26.722618l37.000706 229.480508L526.666024 751.025908c-9.343809-5.232165-20.74344-5.232165-30.117948-0.062422L302.262138 857.856006l37.779442-229.387387c1.588171-9.717316-1.52575-19.652596-8.40953-26.754341L170.703847 436.176081l220.156142-31.686676c2.191922-0.378623 4.288676-0.980327 6.274914-1.771343 7.674796-2.63092 14.32117-8.233522 18.061354-16.156982l97.392144-206.183919 96.550986 206.712969c4.422729 9.406231 13.205766 16.008602 23.483854 17.596773l219.638349 33.886785L691.986257 602.337471z" p-id="2780"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671607054461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4481" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24zM551.786667 756.032l170.976 106.24c2.624 1.621333 5.717333 2.122667 8.650666 1.408 6.410667-1.557333 10.56-8.426667 8.928-15.424l-46.485333-198.24a77.141333 77.141333 0 0 1 24.277333-75.733333L870.293333 441.706667c2.485333-2.165333 4.053333-5.312 4.330667-8.746667 0.565333-7.136-4.490667-13.173333-10.976-13.696l-199.712-16.288a75.989333 75.989333 0 0 1-64.064-47.168l-76.938667-188.16a12.309333 12.309333 0 0 0-6.538666-6.741333c-5.898667-2.496-12.725333 0.373333-15.328 6.741333l-76.949334 188.16a75.989333 75.989333 0 0 1-64.064 47.168l-199.701333 16.288a11.68 11.68 0 0 0-7.978667 4.181333 13.226667 13.226667 0 0 0 1.333334 18.261334l152.16 132.586666a77.141333 77.141333 0 0 1 24.277333 75.733334l-46.485333 198.229333a13.333333 13.333333 0 0 0 1.514666 9.877333c3.488 5.792 10.581333 7.530667 16.064 4.128l170.986667-106.229333a75.296 75.296 0 0 1 79.562667 0z" p-id="4482"></path></svg>
\ No newline at end of file
src/icons/svg/dianzan-s.svg 0 → 100644
浏览文件 @ 94aee6d3
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671607060729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4633" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="4634"></path></svg>
\ No newline at end of file
src/icons/svg/dianzan.svg 0 → 100644
浏览文件 @ 94aee6d3
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671607066277" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4785" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="4786"></path></svg>
\ No newline at end of file
src/icons/svg/view.svg
浏览文件 @ 94aee6d3
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1657871877834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13638" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M1024 512c-93.44 180.224-287.744 303.872-512 303.872S93.44 692.224 0 512c93.44-180.224 287.744-303.872 512-303.872S930.56 331.776 1024 512zM512 698.112c110.08 0 199.168-85.248 199.168-190.464S622.08 317.184 512 317.184s-199.168 85.248-199.168 190.464S401.92 698.112 512 698.112z" p-id="13639"></path><path d="M369.664 512c0 83.2 63.744 150.784 142.336 150.784S654.336 595.2 654.336 512 590.592 361.216 512 361.216 369.664 428.8 369.664 512z" p-id="13640"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1671608555533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4541" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M997 435.6c-28.2-36.7-65.4-81.4-107.4-122.2-54.6-53.2-110.5-95.6-166.1-126.3-71.2-39.2-142-59.1-210.7-59.1s-139.6 19.9-210.7 59.1c-55.5 30.7-111.4 73.1-166.1 126.3-42 40.8-79.3 85.5-107.5 122.1-34.8 45.3-34.8 107.8 0 153.1 28.2 36.7 65.4 81.4 107.4 122.2C190.5 764 246.5 806.4 302 837.1c71.2 39.2 142.1 59.1 210.7 59.1 68.7 0 139.6-19.9 210.8-59 55.5-30.7 111.4-73.1 166.1-126.3 42-40.8 79.3-85.6 107.4-122.2 34.8-45.3 34.8-107.8 0-153.1z m-37.3 99c-66.2 89-243.8 299-446.8 299-57.5 0-117.7-17.1-179-50.8-50.5-27.7-101.7-66.6-152.2-115.6-51.1-49.5-91-99.5-115.7-132.6-10-13.5-10-31.6 0-44.9 66.1-89 243.7-299 446.8-299 57.5 0 117.6 17.1 179 50.8 50.5 27.7 101.7 66.6 152.2 115.6 51.1 49.5 91 99.5 115.7 132.6 9.9 13.4 9.9 31.6 0 44.9z" p-id="4542"></path><path d="M512 321.7c-105.7 0-191.6 86-191.6 191.6 0 105.7 86 191.6 191.6 191.6s191.6-86 191.6-191.6c0-105.7-86-191.6-191.6-191.6z m0 319.2c-70.3 0-127.6-57.2-127.6-127.6S441.7 385.7 512 385.7s127.6 57.2 127.6 127.6S582.3 640.9 512 640.9z" p-id="4543"></path></svg>
\ No newline at end of file
src/views/display/components/RedStyle.vue
浏览文件 @ 94aee6d3
<template>
<div class="display-detail">
<div class="red-style">
<div class="content" id="content">
<!-- 展览图片 -->
<div class="e-imgs">
<swiper
class="swiper gallery-top"
:options="swiperOption"
ref="swiperTop"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img :src="$getFullUrl(item.middleUrl)" alt="" />
</swiper-slide>
<div
class="swiper-button-next swiper-button-white"
slot="button-next"
>
<i class="el-icon-arrow-right"></i>
</div>
<div
class="swiper-button-prev swiper-button-white"
slot="button-prev"
>
<i class="el-icon-arrow-left"></i>
</div>
</swiper>
</div>
<div class="e-name">
{{ displayDetail.title }}
</div>
<div class="e-tools">
<ReaderOperations
:info="displayDetail"
:sourceType="'biz_exhibition'"
@reload="reload"
/>
</div>
<div class="e-info">
<div class="info-item">
<span class="label"> 关键词： </span>
<span class="value">{{ displayDetail.keyword || "暂无" }}</span>
</div>
<div class="info-item">
<span class="label"> 展览类型： </span>
<span class="value">{{
dicts.displayType[displayDetail.type] || "暂无"
}}</span>
</div>
<div class="info-item">
<span class="label"> 展览性质： </span>
<span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
}}</span>
</div>
<div class="info-item">
<span class="label"> 展览单位： </span>
<span class="value">{{ displayDetail.deptName || "暂无" }}</span>
</div>
<div class="info-item">
<span class="label"> 展览地区： </span>
<span class="value">{{ displayDetail.regionName || "暂无" }}</span>
</div>
</div>
<div class="e-intro">
<div class="face-image">
<img :src="displayDetail.faceImageMiddleUrl" />
</div>
<div class="intro-text">
<div class="title">展览简介</div>
<div class="text" v-html="displayDetail.intro"></div>
</div>
</div>
<div
class="e-units wow animate__animated animate__fadeInUp"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="units-title">展览单元</div>
<div class="units-content" v-if="currentUnit">
<div class="left">
<div
class="line"
:style="{
height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
}"
></div>
<div class="dots">
<div
class="dot-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
:style="{ top: index * 130 - 17 + 'px' }"
@click="handleClickUnitTitle(item)"
@mouseenter="handleMouseEnterUnit(item)"
@mouseleave="handleMouseLeaveUnit"
>
<div
class="circle"
:style="{
'background-image': `url(${require(`@/assets/imgs/display/red/${
currentUnit.title == item.title ? 'circle-s' : 'circle'
}.png`)})`,
}"
></div>
<div
:class="{
title: true,
active: currentUnit.title == item.title,
}"
>
{{ item.title }}
</div>
</div>
</div>
</div>
<!-- <div class="left-menu">
<div
class="left-menu-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
@click="handleClickUnitTitle(item)"
>
<div
:class="{ 'base-img': true, active: currentUnit == item }"
:id="item.euId"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<img :src="$getFullUrl(item.imagesVo[0].pressUrl)" alt="" />
</div>
<div class="text">
<svg-icon icon-class="collect-s"></svg-icon>{{ item.title }}
</div>
</div>
</div> -->
<div class="right-content">
<div class="unit-content">
<div
class="unit-content-container"
v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title">
{{ unitTitle }}
</div>
<div
class="text-indent unit-content_intro"
v-if="currentUnit.intro"
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<div class="imgs-title">单元图片</div>
<div class="unit-imgs">
<SlideImageGroup
:imgList="unitValue.imagesVo"
:needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img">
<img
:src="$getFullUrl(item.pressUrl)"
alt=""
style="width: 100%; height: 100%; object-fit: contain"
/>
</template>
</SlideImageGroup>
<el-row
v-if="
unitValue.imagesVo.length > 0 &&
unitValue.imagesVo.length < 4
"
:gutter="10"
>
<el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.pressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
"
@click="handelPreviewImages(unitValue.imagesVo)"
/>
</el-col>
</el-row>
</div>
</div>
<div
class="unit-content_crs"
v-if="
unitValue.culturalRelics &&
unitValue.culturalRelics.length > 0
"
>
<div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img
:src="$getFullUrl(item.faceImagePressUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
"
@click="handleToCr(item)"
/>
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
</template>
</SlideImageGroup>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 展览图片 -->
<!-- <div
class="
content-item
display-detail_imgs
......@@ -12,16 +242,6 @@
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<!-- <el-carousel height="430px">
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<div class="img-container">
<img :src="$getFullUrl(item.pressUrl)" alt="" />
</div>
</el-carousel-item>
</el-carousel> -->
<img
id="faceImage"
v-if="displayDetail.faceImageMiddleUrl"
......@@ -36,9 +256,9 @@
id="faceImage"
:src="$getFullUrl(displayDetail.imagesVo[0].middleUrl)"
/>
</div>
</div> -->
<!-- 展览基本信息 -->
<div
<!-- <div
class="
content-item
display-detail_basic_info
......@@ -79,29 +299,6 @@
:imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
v-else-if="displayDetail.faceImagePressUrl"
/>
<!-- <el-carousel>
<el-carousel-item v-for="(item, index) in displayDetail.imagesVo" :key="index"
class="imagesVo-image-container">
<div class="img-container" @click="handelPreviewImages(displayDetail.imagesVo)">
<img :src="$getFullUrl(item.pressUrl)" alt="点击查看大图" srcset="" />
</div>
<div class="enlarge" @click="handelPreviewImages(displayDetail.imagesVo)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel> -->
<!-- <el-image
:src="
$getFullUrl(
displayDetail.faceImagePressUrl ||
displayDetail.faceImageUrl
)
"
fit="cover"
@click.native="
handelPreviewImages([displayDetail.faceImageUrl])
"
></el-image> -->
</div>
<div class="info-container-right">
<div class="info-title">
......@@ -178,9 +375,9 @@
</div>
</div>
</div>
</div>
</div> -->
<!-- 展览简介 -->
<div
<!-- <div
class="
content-item
display-detail_intro
......@@ -197,9 +394,9 @@
></div>
</div>
</div>
</div>
</div> -->
<!-- 视频 -->
<div
<!-- <div
class="
content-item
display-detail_videos
......@@ -238,9 +435,9 @@
class="video-box"
></video-player>
</div>
</div>
</div> -->
<!-- 虚拟展厅 -->
<div
<!-- <div
class="display-detail_virtual content-item"
v-if="displayDetail.virtualVo.length > 0"
>
......@@ -258,9 +455,9 @@
</div>
</div>
</div>
</div>
</div> -->
<!--展览单元 -->
<div
<!-- <div
class="
content-item
display-detail_units
......@@ -280,7 +477,6 @@
:key="index"
@click="handleClickUnitTitle(item)"
>
<!-- {{ item.imagesVo }} -->
<div
:class="{ 'base-img': true, active: currentUnit == item }"
:id="item.euId"
......@@ -389,124 +585,12 @@
</div>
</div>
</div>
<!-- <el-row v-if="currentUnit">
<el-col>
<div class="unit-name-intro2">
<div class="unit-name">{{ currentUnit.title }}</div>
<div class="unit-intro" v-html="currentUnit.intro"></div>
</div>
<div class="unit-images" v-if="currentUnit.imagesVo.length > 0">
<div class="unit-images-title">
<svg-icon icon-class="collect-s"></svg-icon>
单元图片
<svg-icon icon-class="collect-s"></svg-icon>
</div>
<el-carousel v-if="currentUnit.imagesVo.length > 0" height="400px">
<el-carousel-item v-for="(item, index) in currentUnit.imagesVo" :key="index"
class="imagesVo-image-container">
<div class="img-container" @click="handelPreviewImages(currentUnit.imagesVo)">
<img :src="$getFullUrl(item.pressUrl)" alt="点击查看大图" srcset="" />
</div>
<div class="enlarge" @click="handelPreviewImages(currentUnit.imagesVo)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
</div>
<div class="unit-content_crs" v-if="
currentUnit.culturalRelics &&
currentUnit.culturalRelics.length > 0
">
<div class="unit-images-title">
<svg-icon icon-class="collect-s"></svg-icon>
单元文物
<svg-icon icon-class="collect-s"></svg-icon>
</div>
<el-row :gutter="20">
<el-col v-for="(item, index) in currentUnit.culturalRelics" :key="index"
:span="index == 0 ? 24 : 8" @click.native="handleToCr(item)">
<el-image :src="$getFullUrl(item.faceImagePressUrl)" fit="cover" class="images_img"></el-image>
<div class="desc">
{{ item.name }}
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row> -->
</div>
</div>
<!-- <div class="units-content">
<div
class="units-content-item"
v-for="(item, index) in displayDetail.exhibitionUnits"
:key="index"
>
<div class="units-content-container">
<div class="title">{{ item.title }}</div>
<div class="intro">{{ item.intro }}</div>
<div
class="imgs"
v-if="item.imagesVo && item.imagesVo.length > 0"
>
<el-carousel
:interval="4000"
type="card"
height="200px"
v-if="item.imagesVo.length > 3"
>
<el-carousel-item
v-for="(img, i) in item.imagesVo"
:key="i"
>
<el-image
:src="img.pressUrl"
@click.native="handelPreviewImages(item.imagesVo)"
></el-image>
</el-carousel-item>
</el-carousel>
<el-row :gutter="20" v-else>
<el-col
:span="10"
v-for="(img, i) in item.imagesVo"
:key="i"
>
<el-image
:src="img.pressUrl"
@click.native="handelPreviewImages(item.imagesVo)"
></el-image>
</el-col>
</el-row>
</div>
<div
class="imgs"
v-if="item.culturalRelicVo && item.culturalRelicVo.length > 0"
>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item
v-for="item in displayDetail.culturalRelicVo"
:key="item.fileId"
>
<el-image :src="img.faceImagePressUrl"></el-image>
</el-carousel-item>
</el-carousel>
<div class="desc-title">相关文物</div>
</div>
</div>
<div
class="units-content-img"
:style="{
backgroundImage: `url('${item.imagesVo[0].pressUrl}')`,
}"
></div>
</div>
</div> -->
</div>
</div>
<!-- 相关文献 -->
<div
<!-- <div
class="
content-item
display-detail_lts
......@@ -558,7 +642,7 @@
</el-table>
</div>
</div>
</div>
</div> -->
</div>
<el-image-viewer
v-if="imgViewerVisible"
......@@ -680,7 +764,7 @@ export default {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
// this.$refs.AudioPlayer.play();
// }
this.replaceFaceImage();
// this.replaceFaceImage();
});
},
......@@ -756,6 +840,13 @@ export default {
this.currentUnit = item;
this.expandUnitInfo();
},
handleMouseEnterUnit(item) {
this.currentUnit = item;
this.expandUnitInfo();
},
handleMouseLeaveUnit() {
// this.currentUnit = {};
},
expandUnitInfo() {
// 将每个单元下的所有数据变成key-value形式，方便遍历
......@@ -797,6 +888,7 @@ export default {
p {
// color: red !important;
font-family: $defaultFontFamily !important;
color: #fff;
}
}
</style>
......@@ -805,9 +897,6 @@ $themeColor: #a30e0c;
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1400px;
}
.custom-title {
width: 50px;
......@@ -858,197 +947,312 @@ $themeColor: #a30e0c;
/**公共样式结束 */
/**样式开始 */
.display-detail {
.red-style {
overflow: hidden;
background-image: url("@/assets/imgs/display/red/bg.png");
background-size: 100%;
background-repeat: no-repeat;
position: relative;
top: -$nav-height;
height: 100%;
padding-bottom: 73px;
.content {
width: 100%;
overflow: hidden;
/**轮播图 */
.display-detail_imgs {
height: 436px;
.e-imgs {
padding: 200px 0 0;
display: flex;
justify-content: center;
.slide-item {
display: flex;
justify-content: center;
height: 414px;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
}
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
border: 2px solid #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bolder;
transform: translateY(-72px);
font-size: 26px !important;
}
}
/**基本信息 */
.display-detail_basic_info {
margin: 80px 0;
.e-name {
font-size: 66px;
font-weight: bold;
color: #ffffff;
text-shadow: 0px 4px 5px #3b130b;
display: flex;
justify-content: center;
margin-top: 70px;
}
.wrapper {
min-height: 200px;
border-left: 4px solid #ccc9cd;
border-right: 4px solid #ccc9cd;
position: relative;
overflow: hidden;
&:hover {
.top-list,
.bottom-list {
animation-play-state: paused;
-webkit-animation-play-state: paused;
.e-tools {
display: flex;
justify-content: center;
margin-top: 45px;
}
.e-info {
display: flex;
color: #fff;
padding: 0 13%;
display: flex;
justify-content: space-between;
font-size: 18px;
margin-top: 86px;
}
.top {
.e-intro {
padding: 0 10%;
position: relative;
height: 524px;
margin-top: 160px;
.face-image {
height: 414px;
width: 648px;
position: absolute;
left: 0;
left: 13%;
z-index: 2;
top: 50px;
border: 4px solid #f3cf40;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.intro-text {
position: absolute;
left: 648px;
top: 0;
overflow: hidden;
display: flex;
width: 1400px;
padding: 54px 54px 60px 335px;
min-height: 572px;
color: #fff;
background-color: rgba(#591d11, 0.8);
& > .title {
font-size: 46px;
font-family: PingFang;
font-weight: 800;
color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 40px;
}
& > .text {
font-size: 24px;
font-family: PingFang;
font-weight: 500;
color: #ffffff;
line-height: 48px;
// text-indent: 48px;
}
}
}
.bottom {
.e-units {
color: #fff;
padding: 0 10% 35px;
width: 100%;
margin-top: 204px;
.units-title {
display: flex;
justify-content: center;
font-size: 48px;
font-family: PingFang;
font-weight: 800;
color: #ffffff;
line-height: 53px;
text-shadow: 0px 4px 0px #7d1813;
margin-bottom: 185px;
}
.units-content {
display: flex;
width: 100%;
justify-content: space-between;
.left {
position: relative;
width: 35%;
.line {
background-image: url("@/assets/imgs/display/red/line.png");
width: 1px;
background-size: 100%;
}
.dots {
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 100%;
.dot-item {
position: absolute;
display: flex;
align-items: center;
left: -17px;
cursor: pointer;
width: 100%;
.circle {
width: 35px;
height: 35px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 30px;
}
.title {
font-size: 32px;
font-family: PingFang;
font-weight: bold;
color: #ffffff;
line-height: 48px;
opacity: 0.5;
width: calc(100% - 67px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-wrapper,
.bottom-wrapper {
display: flex;
width: 2400px;
.active {
color: #e5b87d;
opacity: 1;
}
.film-img-container {
animation: filmMoveLeft 60s linear infinite;
height: 30px;
img {
width: 1400px;
height: 100%;
}
}
}
.right-content {
// flex: 1;
// width: 58vw;
width: 50%;
.unit-content {
width: 100%;
position: relative;
top: -35px;
color: #fff;
.unit-content-title {
font-size: 28px;
font-family: PingFang;
font-weight: bold;
line-height: 48px;
}
.info-container {
display: flex;
justify-content: space-between;
padding: 30px 20px 30px 0;
height: 100%;
.unit-content_intro {
font-size: 16px;
font-weight: 400;
line-height: 36px;
// text-indent: 32px;
margin-bottom: 20px;
.info-container-left {
min-height: 200px;
max-height: 460px;
margin-right: 50px;
flex: 1;
overflow: hidden;
p {
color: #fff !important;
}
}
.imagesVo-image-container {
// position: relative;
.img-container {
height: 100%;
width: 100%;
.unit-content_images {
position: relative;
img {
width: 100%;
.unit-content_images_container {
height: 100%;
object-fit: cover;
}
}
}
}
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.info-container-right {
.images_img {
flex: 1;
min-height: 200px;
padding: 30px 0;
}
.info-title {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.desc {
display: flex;
justify-content: space-between;
.title {
font-size: 24px;
font-weight: 500;
color: #8b0000;
font-weight: bold;
justify-content: center;
height: 40px;
align-items: center;
}
}
}
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
//单元文物和单元图片公共样式
.imgs-title {
margin: 16px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-family: SourceHanSerifCN-Bold;
.svg-icon {
margin-right: 10px;
}
i {
margin: 0 10px;
font-size: 18px;
}
}
.basic-info {
font-size: 16px;
.unit-imgs {
// height: 300px;
}
.body-item {
display: flex;
font-size: 14px;
.unit-content_crs {
position: relative;
.label {
display: block;
width: 140px;
margin-right: 26px;
.el-row {
.el-col {
margin-bottom: 10px;
font-weight: bold;
color: #9f9c9a;
.svg-icon {
margin-right: 8px;
font-size: 16px;
.img-container {
background-color: #f5f5f9;
height: 250px;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
}
}
}
.reader-operations {
margin-top: 20px;
}
}
.desc {
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
color: #333;
font-size: 14px;
}
}
/**简介 */
.display-detail_intro {
.buttons {
display: flex;
justify-content: center;
justify-content: flex-end;
.wrapper {
.btn {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
.intro-content,
.intro-video {
flex: 1;
padding: 40px 0;
&:hover {
color: $themeColor;
}
.intro-content {
padding: 20px;
text-indent: 32px;
background-color: #f3f3f3;
margin: 20px;
line-height: 2;
font-size: 16px;
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
}
}
}
.intro-video {
padding: 20px;
}
}
}
......@@ -1218,13 +1422,10 @@ $themeColor: #a30e0c;
display: flex;
justify-content: center;
margin-top: 100px;
// height: 750px;
// height: calc(100vh);
background-image: url("@/assets/imgs/display/red/unit-bg.jpg");
background-size: 100% 100%;
padding-bottom: 32px;
.wrapper {
// width;
display: flex;
// border: 2px solid #cccccc;
border-left: none;
......@@ -1320,380 +1521,7 @@ $themeColor: #a30e0c;
}
}
}
.right-content {
// flex: 1;
width: 58vw;
.unit-content {
width: 100%;
// flex: 1;
padding: 60px 40px 0;
.unit-content-container {
}
.unit-content-title {
font-size: 24px;
line-height: 2;
display: flex;
justify-content: center;
margin-top: 48px;
}
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.images_img {
flex: 1;
}
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
}
}
//单元文物和单元图片公共样式
.imgs-title {
margin: 16px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-family: SourceHanSerifCN-Bold;
i {
margin: 0 10px;
font-size: 18px;
}
}
.unit-imgs {
// height: 300px;
}
.unit-content_crs {
position: relative;
.el-row {
.el-col {
margin-bottom: 10px;
.img-container {
background-color: #f5f5f9;
height: 250px;
.images_img {
height: 100%;
width: 100%;
position: relative;
cursor: pointer;
}
}
}
}
.desc {
display: flex;
justify-content: center;
padding: 10px;
align-items: center;
color: #333;
font-size: 14px;
}
}
.buttons {
display: flex;
justify-content: flex-end;
.btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
}
}
}
// .el-col {
// &:first-child {
// position: relative;
// .img-container {
// height: 420px;
// }
// .unit-name-intro {
// width: 100%;
// height: 100%;
// position: absolute;
// left: 0;
// top: 0;
// padding: 100px 28px 50px;
// background-image: linear-gradient(to top,
// rgba(0, 0, 0, 0.8),
// rgba(0, 0, 0, 0.1));
// cursor: pointer;
// transition: all 0.5s ease;
// &:hover {
// background: rgba(0, 0, 0, 0.8);
// .unit-intro {
// color: #fff;
// }
// }
// .unit-name {
// font-size: 24px;
// font-weight: bold;
// color: #ffffff;
// text-align: center;
// margin-bottom: 40px;
// }
// .unit-intro {
// font-size: 16px;
// font-weight: 400;
// color: #ccc;
// text-indent: 32px;
// line-height: 40px;
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 5;
// -webkit-box-orient: vertical;
// }
// }
// .unit-name-intro2 {
// padding: 80px 40px;
// .unit-name {
// font-size: 24px;
// font-weight: bold;
// color: #520002;
// display: flex;
// justify-content: center;
// margin-bottom: 30px;
// }
// .unit-intro {
// line-height: 2;
// text-indent: 32px;
// font-size: 16px;
// }
// }
// .unit-images {
// margin: 20px 40px 40px;
// }
// // 共用
// .unit-images-title {
// display: flex;
// justify-content: center;
// font-size: 14px;
// margin-bottom: 20px;
// align-items: center;
// color: #520002;
// .svg-icon {
// margin: 0 10px;
// }
// }
// .unit-content_crs {
// position: relative;
// padding: 10px 40px;
// .el-row {
// // background-color: #f5f5f9;
// .el-col {
// margin-bottom: 10px;
// }
// }
// .images_img {
// height: 250px;
// width: 100%;
// position: relative;
// cursor: pointer;
// }
// .desc {
// display: flex;
// justify-content: center;
// padding: 10px;
// align-items: center;
// color: #333;
// font-size: 14px;
// }
// }
// }
// }
// .img-container {
// width: 100%;
// height: 100%;
// // height: 162px;
// overflow: hidden;
// cursor: pointer;
// img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// transition: all ease 0.5s;
// object-fit: contain;
// }
// }
}
}
/**以下为手风琴样式（暂时弃用） */
// &:hover {
// width: 100%;
// .custom-title,
// .units {
// display: none;
// }
// }
// .units-content {
// display: flex;
// // flex-wrap: wrap;
// flex: 1;
// &:hover {
// .units-content-item {
// width: 10vw;
// justify-content: flex-start;
// align-items: flex-start;
// padding: 50px;
// .title {
// writing-mode: vertical-rl;
// color: #ccc;
// }
// }
// }
// .units-content-item {
// width: 25%;
// // height: calc(100vh - 4px);
// display: flex;
// justify-content: center;
// align-items: center;
// position: relative;
// transition: width 0.5s ease 0.1s;
// padding: 50px;
// overflow-x: hidden;
// &:hover {
// // width: 70%;
// width: 70vw;
// .units-content-img {
// filter: none;
// background-image: url("@/assets/imgs/display/red/unit-bg.jpg") !important;
// }
// .title {
// writing-mode: horizontal-tb;
// color: #666;
// font-size: 40px !important;
// }
// .intro {
// padding: 60px 0;
// }
// .intro,
// .imgs,
// .desc-title {
// display: block !important;
// }
// .desc-title {
// display: flex !important;
// }
// }
// .units-content-container {
// position: relative;
// z-index: 1;
// color: #fff;
// display: flex;
// flex-direction: column;
// .title {
// font-size: 32px;
// font-family: "KaiTi";
// }
// .intro {
// margin-top: 10px;
// display: none;
// font-family: "KaiTi";
// color: #333;
// text-indent: 32px;
// font-size: 22px;
// line-height: 36px;
// width: calc(68vw - 40px);
// margin-bottom: 10px;
// }
// .imgs {
// display: none;
// .el-image {
// width: 100%;
// height: 300px;
// }
// }
// .desc-title {
// display: none;
// font-size: 14px;
// color: #333;
// display: flex;
// justify-content: center;
// }
// }
// .units-content-img {
// position: absolute;
// left: 0;
// top: 0;
// width: 100%;
// height: 100%;
// // z-index: -1;
// -webkit-filter: brightness(0.3);
// filter: brightness(0.3);
// // transition: all 1s ease;
// cursor: pointer;
// background-size: cover;
// background-repeat: no-repeat;
// }
// }
// }
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论