Skip to content

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

优化UI

上级 9c919715
显示空白字符变更
内嵌 并排
正在显示 包含 473 行增加 和 261 行删除
src/components/CustomTitle/index.vue
浏览文件 @ 7b8bfa72
<!-- -->
<template>
<div class="custom-title">
{{ text }}
<svg-icon icon-class="mz-list"></svg-icon>
<span> {{ text }}</span>
</div>
</template>
......@@ -30,5 +31,6 @@ export default {
border-bottom: 1px solid rgba($color: #b8b8b8, $alpha: 0.3);
margin-bottom: 32px;
font-family: "KaiTi";
color: #666;
}
</style>
src/components/Footer/index.vue
浏览文件 @ 7b8bfa72
......@@ -55,6 +55,6 @@ export default {
background-color: #892325 !important;
}
.isRedStyle {
background-color: #610a03 !important;
background-color: #a30e0c !important;
}
</style>
src/components/NavBar/index.vue
浏览文件 @ 7b8bfa72
......@@ -434,7 +434,7 @@ export default {
background-color: #892325 !important;
}
.isRedStyle {
background-color: #610a03 !important;
background-color: #a30e0c !important;
}
.nav {
height: 100px;
......
src/components/ReaderOperations/index.vue
浏览文件 @ 7b8bfa72
......@@ -4,7 +4,7 @@
<span class="operation-item" v-if="like">
<svg-icon
@click="handleLike"
icon-class="like"
:icon-class="loveCountStatus?'mz-collect-s':'mz-collect'"
:style="{ fontSize: iconSize + 'px' }"
:class="loveCountStatus ? 'like' : ''"
></svg-icon>
......@@ -20,7 +20,8 @@
</span>
<span v-if="share" class="operation-item" @click="handleShare">
<svg-icon
icon-class="share2"
icon-class="mz-fx"
class="collect"
:style="{ fontSize: iconSize + 'px' }"
></svg-icon>
<span>分享</span>
......@@ -236,7 +237,7 @@ export default {
color: #831122;
}
.collect {
color: #2069c4;
color: #831122;
}
}
......
src/components/Video/index.vue
浏览文件 @ 7b8bfa72
......@@ -92,7 +92,7 @@ export default {
top: 50%;
transform: translate(-50%, -50%);
i {
font-size: 58px;
font-size: 70px;
z-index: 1;
transform: scaleX(1.5);
}
......@@ -100,14 +100,14 @@ export default {
}
.blur {
width: 100px;
height: 70px;
width: 120px;
height: 84px;
background-color: #fff;
position: absolute;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
filter: blur(26px);
filter: blur(20px);
z-index: 0;
}
}
......
src/icons/svg/collect.svg
浏览文件 @ 7b8bfa72
<?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="1657871872507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13498" 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="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="13499"></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="1661505107073" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2547" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M956.074981 429.633061c-2.269693-7.402597-9.495258-20.456914-33.253358-24.761963l-262.98253-38.078247L545.028231 135.12042c-10.788717-21.770839-25.152866-26.356274-35.308157-26.356274-22.055318 0-34.348296 21.659299-36.747949 26.333762L358.140797 366.791827l-258.923074 37.492916c-17.794271 3.03308-30.413684 12.443403-34.585703 25.830295-4.454452 14.257725 1.025353 29.039383 16.334014 43.886533l183.937243 178.568978-43.757596 254.118652c-1.089821 6.290263-4.364401 25.438369 7.185656 39.083134 10.022261 11.857049 26.898627 14.632255 45.416376 6.531763 0.456395-0.198521 0.939395-0.418532 1.396813-0.676405l233.834676-122.453936 233.920634 122.453936c8.866948 4.670369 16.790408 6.941086 24.150026 6.941086 9.301853 0 17.643845-3.667529 23.537066-10.285251 4.782933-5.393847 10.022261-15.282055 7.777127-32.752961L753.055125 652.571572l188.720176-183.174879C958.630177 453.04119 958.849164 438.762999 956.074981 429.633061" p-id="2548"></path></svg>
\ No newline at end of file
src/icons/svg/mz-collect-s.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484392351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M874.666667 209.066667c-89.6-89.6-230.4-89.6-320 0L507.733333 256 469.333333 213.333333C384 128 238.933333 128 149.333333 213.333333c-89.6 89.6-89.6 230.4 0 320 119.466667 115.2 238.933333 230.4 358.4 349.866667 59.733333-55.466667 115.2-110.933333 174.933334-166.4l187.733333-187.733333c89.6-89.6 89.6-234.666667 4.266667-320zM512 537.6c-76.8 0-136.533333-59.733333-136.533333-136.533333s59.733333-136.533333 136.533333-136.533334c46.933333 0 89.6 21.333333 115.2 59.733334 17.066667 21.333333 25.6 51.2 25.6 76.8 0 76.8-64 136.533333-140.8 136.533333z" p-id="3267"></path><path d="M576 358.4c-12.8-21.333333-38.4-34.133333-64-34.133333-42.666667 0-76.8 34.133333-76.8 76.8s34.133333 76.8 76.8 76.8 76.8-34.133333 76.8-76.8c4.266667-17.066667 0-29.866667-12.8-42.666667z" p-id="3268"></path></svg>
\ No newline at end of file
src/icons/svg/mz-collect.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484377255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2558" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M507.733333 883.2c-8.533333 0-17.066667-4.266667-21.333333-8.533333l-332.8-324.266667c-93.866667-93.866667-93.866667-247.466667 0-337.066667 93.866667-93.866667 243.2-93.866667 337.066667 0l17.066666 17.066667 21.333334-21.333333c93.866667-93.866667 243.2-93.866667 337.066666 0C913.066667 256 938.666667 315.733333 938.666667 379.733333s-25.6 123.733333-68.266667 170.666667L691.2 725.333333l-162.133333 153.6c-4.266667 4.266667-12.8 4.266667-21.333334 4.266667zM324.266667 204.8c-46.933333 0-93.866667 17.066667-128 51.2-68.266667 68.266667-68.266667 183.466667 0 256l311.466666 302.933333 140.8-132.266666 174.933334-174.933334c68.266667-68.266667 68.266667-183.466667 0-256-68.266667-68.266667-183.466667-68.266667-256 0l-42.666667 42.666667c-12.8 12.8-29.866667 12.8-42.666667 0l-29.866666-38.4c-34.133333-34.133333-81.066667-51.2-128-51.2z m524.8 320z" p-id="2559"></path><path d="M512 524.8c-76.8 0-136.533333-59.733333-136.533333-136.533333s59.733333-136.533333 136.533333-136.533334c46.933333 0 89.6 21.333333 115.2 59.733334 17.066667 21.333333 25.6 51.2 25.6 76.8 0 72.533333-64 136.533333-140.8 136.533333z m0-217.6c-42.666667 0-76.8 34.133333-76.8 76.8s34.133333 76.8 76.8 76.8 76.8-34.133333 76.8-76.8c0-17.066667-4.266667-29.866667-12.8-42.666667-12.8-21.333333-38.4-34.133333-64-34.133333z" p-id="2560"></path><path d="M512 388.266667m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z" p-id="2561"></path></svg>
\ No newline at end of file
src/icons/svg/mz-download.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484374544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2417" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 955.733333c-213.333333 0-384-170.666667-384-384 0-93.866667 34.133333-183.466667 93.866667-251.733333 8.533333-12.8 25.6-12.8 38.4-4.266667 12.8 8.533333 12.8 25.6 4.266666 38.4-51.2 59.733333-81.066667 136.533333-81.066666 217.6 0 183.466667 149.333333 328.533333 328.533333 328.533334s328.533333-149.333333 328.533333-328.533334c0-76.8-29.866667-153.6-76.8-213.333333-8.533333-12.8-8.533333-29.866667 4.266667-38.4 12.8-8.533333 29.866667-8.533333 38.4 4.266667 59.733333 68.266667 89.6 157.866667 89.6 247.466666 0 213.333333-170.666667 384-384 384z" p-id="2418"></path><path d="M452.266667 166.4c4.266667 136.533333 12.8 268.8 17.066666 405.333333-8.533333-12.8-21.333333-29.866667-38.4-46.933333-17.066667-12.8-25.6-17.066667-46.933333-34.133333-55.466667-38.4-72.533333-55.466667-76.8-46.933334-4.266667 8.533333 4.266667 38.4 17.066667 59.733334 8.533333 12.8 12.8 21.333333 17.066666 21.333333 17.066667 17.066667 34.133333 38.4 55.466667 51.2 21.333333 17.066667 55.466667 72.533333 128 243.2 0-12.8 4.266667-29.866667 4.266667-46.933333 4.266667-34.133333 4.266667-51.2 8.533333-72.533334 0-12.8 4.266667-34.133333 12.8-59.733333 21.333333-25.6 38.4-42.666667 51.2-51.2 12.8-8.533333 21.333333-12.8 34.133333-17.066667 17.066667-8.533333 29.866667-12.8 55.466667-21.333333 51.2-21.333333 51.2-17.066667 51.2-21.333333 17.066667-8.533333 42.666667-25.6 68.266667-64 0 0-46.933333 21.333333-98.133334 29.866666-29.866667 4.266667-29.866667 0-59.733333 4.266667-21.333333 4.266667-42.666667 8.533333-64 21.333333-12.8 8.533333-29.866667 21.333333-51.2 46.933334-17.066667-238.933333-17.066667-354.133333-8.533333-396.8 0-4.266667 4.266667-25.6-4.266667-42.666667-12.8-25.6-51.2-29.866667-64 0-12.8 8.533333-12.8 29.866667-8.533333 38.4z" p-id="2419"></path></svg>
\ No newline at end of file
src/icons/svg/mz-fh.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484386421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2985" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M584.533333 499.2c0 12.8 4.266667 29.866667 12.8 42.666667 4.266667 8.533333-4.266667 34.133333-12.8 38.4-21.333333 8.533333-21.333333-12.8-25.6-25.6-8.533333-29.866667-25.6-38.4-55.466666-21.333334-25.6 12.8-46.933333 34.133333-68.266667 51.2-21.333333 21.333333-21.333333 68.266667 4.266667 89.6 17.066667 17.066667 34.133333 29.866667 55.466666 42.666667 42.666667 25.6 85.333333 21.333333 123.733334-12.8 8.533333-8.533333 17.066667-17.066667 29.866666-25.6 17.066667-12.8 29.866667-8.533333 38.4 12.8 21.333333 51.2 59.733333 68.266667 110.933334 59.733333 34.133333-4.266667 68.266667 8.533333 98.133333 34.133334 8.533333 8.533333 21.333333 12.8 34.133333 21.333333 25.6-68.266667-12.8-102.4-46.933333-136.533333-55.466667-51.2-115.2-93.866667-179.2-136.533334-17.066667-12.8-25.6-21.333333-25.6-34.133333" p-id="2986"></path><path d="M584.533333 516.266667c0-12.8 4.266667-29.866667 12.8-42.666667 4.266667-8.533333-4.266667-34.133333-12.8-38.4-21.333333-8.533333-21.333333 12.8-25.6 25.6-8.533333 29.866667-29.866667 38.4-55.466666 21.333333-25.6-12.8-46.933333-34.133333-68.266667-51.2-21.333333-21.333333-17.066667-68.266667 4.266667-89.6 17.066667-17.066667 38.4-29.866667 55.466666-42.666666 42.666667-25.6 85.333333-21.333333 123.733334 12.8 8.533333 8.533333 17.066667 17.066667 29.866666 25.6 17.066667 12.8 29.866667 8.533333 38.4-8.533334 21.333333-51.2 59.733333-68.266667 110.933334-59.733333 34.133333 4.266667 68.266667-8.533333 98.133333-34.133333 8.533333-8.533333 21.333333-12.8 34.133333-21.333334 25.6 68.266667-12.8 102.4-46.933333 136.533334-55.466667 51.2-119.466667 93.866667-179.2 136.533333-17.066667 12.8-25.6 21.333333-25.6 29.866667M456.533333 507.733333c0-8.533333-8.533333-12.8-21.333333-17.066666-8.533333-8.533333-34.133333-21.333333-46.933333-42.666667-8.533333-17.066667-4.266667-21.333333-17.066667-29.866667 0 0-8.533333-8.533333-25.6-12.8-25.6-4.266667-128 34.133333-256 102.4 128 68.266667 230.4 106.666667 256 102.4 17.066667 0 29.866667-12.8 29.866667-12.8 12.8-8.533333 8.533333-17.066667 17.066666-34.133333s12.8-21.333333 46.933334-38.4c8.533333-4.266667 12.8-12.8 17.066666-17.066667z" p-id="2987"></path></svg>
\ No newline at end of file
src/icons/svg/mz-fx.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484383322" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M469.333333 913.066667c-213.333333 0-384-170.666667-384-384s170.666667-384 384-384c12.8 0 25.6 12.8 25.6 25.6s-12.8 29.866667-25.6 29.866666c-183.466667 0-328.533333 149.333333-328.533333 328.533334s149.333333 328.533333 328.533333 328.533333 328.533333-149.333333 328.533334-328.533333c0-12.8 12.8-25.6 25.6-25.6s25.6 12.8 25.6 25.6c4.266667 213.333333-170.666667 384-379.733334 384z" p-id="2844"></path><path d="M640 123.733333c-4.266667 4.266667-34.133333 21.333333-38.4 51.2-8.533333 34.133333 12.8 72.533333 42.666667 85.333334 12.8 8.533333 38.4 8.533333 51.2-4.266667 4.266667-8.533333 8.533333-17.066667 8.533333-29.866667 0-4.266667-4.266667-12.8-4.266667-12.8 0-4.266667-4.266667-8.533333-8.533333-12.8-4.266667-4.266667-8.533333-4.266667-12.8-4.266666h-8.533333c-4.266667 4.266667-8.533333 4.266667-12.8 8.533333-4.266667 4.266667-8.533333 8.533333-12.8 8.533333-4.266667 0-8.533333-8.533333-8.533334-12.8-8.533333-17.066667 0-34.133333 0-34.133333 4.266667-17.066667 17.066667-21.333333 25.6-25.6 4.266667 0 17.066667-8.533333 29.866667-4.266667 8.533333 0 12.8 4.266667 12.8 4.266667 8.533333 4.266667 12.8 8.533333 17.066667 8.533333 4.266667 12.8 8.533333 17.066667 12.8 21.333334 4.266667 8.533333 17.066667 21.333333 17.066666 38.4 0 4.266667 0 8.533333-4.266666 17.066666l-25.6 38.4c-4.266667 4.266667-4.266667 8.533333 0 8.533334 0 0 4.266667 4.266667 8.533333 4.266666 17.066667 0 34.133333-4.266667 46.933333-4.266666 8.533333 0 12.8 4.266667 17.066667 4.266666 17.066667 8.533333 21.333333 21.333333 25.6 34.133334 0 4.266667 4.266667 8.533333 4.266667 17.066666v17.066667s0 8.533333-4.266667 12.8c-4.266667 12.8-17.066667 21.333333-21.333333 21.333333-4.266667 4.266667-17.066667 8.533333-34.133334 8.533334 0 0-21.333333-4.266667-29.866666-17.066667 0-4.266667-4.266667-8.533333-4.266667-12.8 0-4.266667 4.266667-4.266667 12.8-8.533333 8.533333 0 8.533333 0 12.8-4.266667l4.266667-4.266667c8.533333 4.266667 8.533333 0 8.533333-4.266666 0-8.533333-4.266667-12.8-4.266667-17.066667l-8.533333-8.533333c-8.533333-4.266667-21.333333-8.533333-29.866667-4.266667-17.066667 4.266667-29.866667 25.6-34.133333 42.666667-4.266667 34.133333 21.333333 68.266667 55.466667 81.066666 29.866667 8.533333 59.733333-4.266667 64-8.533333 8.533333-4.266667 29.866667-17.066667 38.4-38.4 4.266667-12.8 4.266667-29.866667 4.266666-34.133333 0-12.8-4.266667-25.6-4.266666-34.133334 0-4.266667 0-4.266667-4.266667-8.533333 0-4.266667-4.266667-4.266667 0-8.533333 0-4.266667 4.266667-4.266667 4.266667-4.266667 12.8-8.533333 68.266667-68.266667 85.333333-123.733333 0-4.266667 4.266667-8.533333 4.266667-17.066667-8.533333-4.266667-12.8-4.266667-17.066667-8.533333-51.2-12.8-136.533333 4.266667-149.333333 12.8 0 0-4.266667 4.266667-4.266667 0 0 0-4.266667 0-4.266667-4.266667s-4.266667-4.266667-4.266666-8.533333c-4.266667-4.266667-12.8-12.8-25.6-21.333334-4.266667-4.266667-17.066667-8.533333-34.133334-12.8-29.866667-4.266667-51.2 8.533333-59.733333 12.8" p-id="2845"></path><path d="M541.866667 294.4c-8.533333 4.266667-8.533333 8.533333-8.533334 17.066667 4.266667 8.533333 12.8 12.8 21.333334 4.266666 12.8-4.266667 29.866667 0 38.4 8.533334-34.133333 0-68.266667 12.8-98.133334 34.133333-38.4 25.6-64 68.266667-72.533333 115.2 0 25.6 0 38.4 4.266667 51.2 0 8.533333 8.533333 17.066667 17.066666 17.066667s17.066667-8.533333 17.066667-21.333334v-38.4c4.266667-38.4 25.6-68.266667 55.466667-93.866666 25.6-21.333333 59.733333-29.866667 93.866666-25.6 0 12.8-4.266667 21.333333-12.8 29.866666-8.533333 8.533333-4.266667 17.066667 0 21.333334 4.266667 4.266667 8.533333 4.266667 12.8 0 25.6-42.666667 46.933333-81.066667 72.533334-123.733334l-140.8 4.266667z" p-id="2846"></path></svg>
\ No newline at end of file
src/icons/svg/mz-list.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484380168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2700" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M200.533333 311.466667C162.133333 311.466667 128 277.333333 128 234.666667s34.133333-76.8 76.8-76.8 76.8 34.133333 76.8 76.8c-4.266667 42.666667-38.4 76.8-81.066667 76.8z m0-106.666667c-17.066667 0-29.866667 12.8-29.866666 29.866667 0 17.066667 12.8 29.866667 29.866666 29.866666 17.066667 0 29.866667-12.8 29.866667-29.866666 0-12.8-12.8-29.866667-29.866667-29.866667z" p-id="2701"></path><path d="M200.533333 337.066667c29.866667 0 59.733333-17.066667 72.533334-38.4 0 34.133333-34.133333 64-72.533334 64S132.266667 332.8 128 298.666667c17.066667 21.333333 42.666667 38.4 72.533333 38.4zM200.533333 785.066667c-42.666667 0-76.8-34.133333-76.8-76.8s34.133333-76.8 76.8-76.8 76.8 34.133333 76.8 76.8-34.133333 76.8-76.8 76.8z m0-102.4c-17.066667 0-29.866667 12.8-29.866666 29.866666s12.8 29.866667 29.866666 29.866667c17.066667 0 29.866667-12.8 29.866667-29.866667s-12.8-29.866667-29.866667-29.866666z" p-id="2702"></path><path d="M200.533333 810.666667c29.866667 0 59.733333-17.066667 72.533334-38.4-4.266667 38.4-38.4 64-72.533334 64S132.266667 810.666667 128 772.266667c17.066667 21.333333 42.666667 38.4 72.533333 38.4zM200.533333 546.133333C162.133333 546.133333 128 512 128 469.333333s34.133333-76.8 76.8-76.8 76.8 34.133333 76.8 76.8-38.4 76.8-81.066667 76.8z m0-102.4c-17.066667 0-29.866667 12.8-29.866666 29.866667s12.8 29.866667 29.866666 29.866667c17.066667 0 29.866667-12.8 29.866667-29.866667s-12.8-29.866667-29.866667-29.866667z" p-id="2703"></path><path d="M200.533333 571.733333c29.866667 0 59.733333-17.066667 72.533334-38.4 0 34.133333-34.133333 64-72.533334 64s-68.266667-29.866667-72.533333-64c17.066667 21.333333 42.666667 38.4 72.533333 38.4zM857.6 320H384c-21.333333 0-38.4-17.066667-38.4-38.4v-17.066667c0-21.333333 17.066667-38.4 38.4-38.4h473.6c21.333333 0 38.4 17.066667 38.4 38.4v12.8c0 25.6-17.066667 42.666667-38.4 42.666667zM857.6 554.666667H384c-21.333333 0-38.4-17.066667-38.4-38.4v-12.8c0-21.333333 17.066667-38.4 38.4-38.4h473.6c21.333333 0 38.4 17.066667 38.4 38.4v12.8c0 21.333333-17.066667 38.4-38.4 38.4zM857.6 793.6H384c-21.333333 0-38.4-17.066667-38.4-38.4v-12.8c0-21.333333 17.066667-38.4 38.4-38.4h473.6c21.333333 0 38.4 17.066667 38.4 38.4v12.8c0 21.333333-17.066667 38.4-38.4 38.4z" p-id="2704"></path></svg>
\ No newline at end of file
src/icons/svg/mz-play-s.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484389558" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3126" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333zM260.266667 580.266667c-4.266667-4.266667 0-12.8 12.8-17.066667 17.066667-4.266667 34.133333-21.333333 34.133333-42.666667s-12.8-38.4-34.133333-42.666666c-8.533333 0-17.066667-8.533333-12.8-17.066667 0-4.266667 8.533333-8.533333 12.8-8.533333l119.466666 68.266666c-38.4 21.333333-81.066667 46.933333-119.466666 68.266667-8.533333-4.266667-12.8-4.266667-12.8-8.533333zM768 512c-8.533333 8.533333-12.8 17.066667-17.066667 21.333333-55.466667 51.2-166.4 89.6-183.466666 89.6 0 0-4.266667 0-8.533334 4.266667-4.266667 0-4.266667 4.266667-4.266666 12.8 0 4.266667 0 8.533333-4.266667 12.8 0 8.533333-8.533333 29.866667-17.066667 42.666667-4.266667 8.533333-12.8 25.6-29.866666 38.4-29.866667 21.333333-64 21.333333-72.533334 21.333333-8.533333 0-51.2 0-81.066666-34.133333-34.133333-34.133333-38.4-98.133333-8.533334-132.266667 12.8-17.066667 42.666667-34.133333 68.266667-29.866667 12.8 4.266667 21.333333 12.8 29.866667 25.6 4.266667 8.533333 4.266667 12.8 4.266666 17.066667 0 4.266667 0 12.8-4.266666 21.333333s-8.533333 8.533333-12.8 12.8c-4.266667 4.266667-8.533333 4.266667-8.533334 4.266667-8.533333 0-12.8 0-21.333333-4.266667s-17.066667-4.266667-17.066667 0c-4.266667 4.266667-4.266667 17.066667-4.266666 21.333334 0 25.6 21.333333 38.4 21.333333 42.666666 17.066667 12.8 38.4 12.8 46.933333 12.8 4.266667 0 21.333333 0 38.4-12.8 8.533333-4.266667 12.8-12.8 12.8-12.8 4.266667-8.533333 8.533333-17.066667 12.8-21.333333 4.266667-12.8 4.266667-21.333333 4.266667-25.6 0-12.8 4.266667-38.4-8.533333-59.733333 0-4.266667-4.266667-12.8-17.066667-17.066667-21.333333-12.8-38.4-21.333333-59.733333-29.866667-4.266667-4.266667-8.533333-4.266667-8.533334-8.533333s4.266667-4.266667 8.533334-8.533333c21.333333-8.533333 38.4-21.333333 59.733333-29.866667 8.533333-4.266667 12.8-17.066667 17.066667-17.066667 12.8-21.333333 8.533333-42.666667 8.533333-59.733333 0-4.266667 0-17.066667-4.266667-25.6-4.266667-8.533333-4.266667-12.8-12.8-21.333333 0 0-4.266667-8.533333-12.8-12.8-17.066667-12.8-34.133333-12.8-38.4-12.8-8.533333 0-25.6 0-46.933333 12.8 0 0-21.333333 17.066667-21.333333 42.666666 0 4.266667 0 17.066667 4.266666 21.333334 4.266667 4.266667 12.8 4.266667 21.333334 0s12.8-4.266667 21.333333-4.266667c0 0 4.266667 0 8.533333 4.266667 0 0 8.533333 4.266667 12.8 8.533333 4.266667 8.533333 4.266667 17.066667 4.266667 21.333333 0 4.266667 0 8.533333-4.266667 17.066667-17.066667 0-29.866667 8.533333-38.4 12.8-25.6 8.533333-55.466667-8.533333-68.266666-25.6-29.866667-38.4-25.6-98.133333 8.533333-136.533333 29.866667-34.133333 72.533333-34.133333 81.066667-34.133334 8.533333 0 42.666667 0 72.533333 21.333334 17.066667 12.8 25.6 29.866667 29.866667 38.4 8.533333 12.8 12.8 34.133333 17.066666 42.666666 0 4.266667 0 8.533333 4.266667 12.8 0 8.533333 0 8.533333 4.266667 12.8 4.266667 4.266667 8.533333 4.266667 8.533333 4.266667 21.333333 0 132.266667 34.133333 187.733333 85.333333 4.266667 0 8.533333 8.533333 17.066667 17.066667z" p-id="3127"></path></svg>
\ No newline at end of file
src/icons/svg/mz-play.svg 0 → 100644
浏览文件 @ 7b8bfa72
<?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="1661484370707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2275" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 938.666667C277.333333 938.666667 85.333333 746.666667 85.333333 512S277.333333 85.333333 512 85.333333s426.666667 192 426.666667 426.666667-192 426.666667-426.666667 426.666667z m0-793.6c-200.533333 0-366.933333 166.4-366.933333 366.933333s166.4 366.933333 366.933333 366.933333 366.933333-166.4 366.933333-366.933333-166.4-366.933333-366.933333-366.933333z" p-id="2276"></path><path d="M750.933333 512c-8.533333-8.533333-12.8-17.066667-17.066666-17.066667-51.2-46.933333-153.6-81.066667-174.933334-81.066666h-8.533333s-4.266667-4.266667-4.266667-8.533334v-12.8c0-8.533333-8.533333-25.6-17.066666-38.4-4.266667-8.533333-12.8-21.333333-29.866667-34.133333C469.333333 298.666667 439.466667 298.666667 430.933333 298.666667c-8.533333 0-51.2 0-76.8 34.133333-29.866667 34.133333-34.133333 89.6-8.533333 123.733333 12.8 17.066667 38.4 34.133333 64 25.6 12.8-4.266667 21.333333-12.8 29.866667-25.6 4.266667-8.533333 4.266667-12.8 4.266666-17.066666 0-4.266667 0-12.8-4.266666-21.333334-4.266667-4.266667-8.533333-8.533333-12.8-8.533333 0-8.533333-4.266667-8.533333-8.533334-8.533333-8.533333 0-8.533333 0-17.066666 4.266666-8.533333 0-12.8 0-17.066667-4.266666-8.533333-4.266667-4.266667-12.8-4.266667-17.066667 0-21.333333 21.333333-38.4 21.333334-38.4 17.066667-12.8 34.133333-12.8 42.666666-12.8 4.266667 0 21.333333 0 38.4 12.8 8.533333 4.266667 12.8 12.8 12.8 12.8 4.266667 8.533333 8.533333 12.8 12.8 21.333333 4.266667 8.533333 4.266667 21.333333 4.266667 25.6 0 12.8 4.266667 34.133333-8.533333 55.466667 0 4.266667-4.266667 12.8-17.066667 17.066667-17.066667 8.533333-38.4 17.066667-55.466667 29.866666-4.266667 4.266667-8.533333 4.266667-8.533333 8.533334s4.266667 4.266667 8.533333 8.533333c17.066667 8.533333 38.4 17.066667 55.466667 29.866667 8.533333 4.266667 12.8 12.8 17.066667 17.066666 12.8 21.333333 8.533333 38.4 8.533333 55.466667 0 4.266667 0 12.8-4.266667 25.6-4.266667 8.533333-4.266667 12.8-8.533333 21.333333 0 0-4.266667 8.533333-12.8 12.8-17.066667 12.8-29.866667 12.8-38.4 12.8-8.533333 0-25.6 0-42.666667-12.8 0 0-21.333333-17.066667-21.333333-38.4 0-4.266667 0-12.8 4.266667-17.066666 4.266667-4.266667 8.533333-4.266667 17.066666 0s12.8 4.266667 17.066667 4.266666c0 0 4.266667 0 8.533333-4.266666 0 0 8.533333-4.266667 12.8-8.533334 4.266667-8.533333 4.266667-17.066667 4.266667-21.333333 0-4.266667 0-8.533333-4.266667-17.066667-8.533333-12.8-17.066667-21.333333-29.866666-25.6-21.333333-8.533333-51.2 8.533333-64 25.6-25.6 34.133333-21.333333 89.6 8.533333 123.733334 29.866667 29.866667 68.266667 34.133333 76.8 34.133333 8.533333 0 42.666667 0 68.266667-21.333333 17.066667-12.8 25.6-25.6 29.866666-34.133334 8.533333-12.8 12.8-29.866667 12.8-38.4v-12.8c0-4.266667 0-8.533333 4.266667-8.533333 4.266667-4.266667 8.533333-4.266667 8.533333-4.266667 17.066667 0 119.466667-34.133333 170.666667-81.066666 8.533333-17.066667 12.8-21.333333 21.333333-29.866667z" p-id="2277"></path><path d="M285.866667 452.266667c-8.533333 0-12.8 4.266667-12.8 8.533333s4.266667 12.8 12.8 12.8c17.066667 4.266667 29.866667 21.333333 29.866666 38.4 0 21.333333-12.8 34.133333-29.866666 38.4-8.533333 4.266667-12.8 12.8-8.533334 17.066667 0 4.266667 4.266667 4.266667 8.533334 8.533333 38.4-21.333333 72.533333-42.666667 110.933333-64l-110.933333-59.733333z" p-id="2278"></path></svg>
\ No newline at end of file
src/views/culturalRelic/Detail.vue
浏览文件 @ 7b8bfa72
<!-- -->
<template>
<div class="display-detail">
<div class="cr-detail">
<div class="wrapper">
<div class="back">
<el-button
type="text"
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
<svg-icon icon-class="mz-fh"></svg-icon>
<span>返回上页 </span>
</div>
<el-row class="detail-container" :gutter="10">
<el-row class="cr-detail_info" :gutter="10">
<el-col class="cr-images" :span="18">
<el-carousel
indicator-position="outside"
......@@ -34,21 +30,13 @@
</el-col>
<el-col class="relic-info" :span="8">
<div class="info-title">
<div class="title-container">
<h2>
<div class="title">
{{ CRDetail.name }}
</h2>
<span class="view-container">
</div>
<div class="view-container">
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<span class="view-text">{{ CRDetail.browseCount }}</span>
</span>
</div>
<!-- <AudioPlayer
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
/> -->
</div>
<div class="info-body">
<div class="basic-info">
......@@ -110,7 +98,8 @@
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
<svg-icon icon-class="music"></svg-icon>
<img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer
style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
......@@ -120,73 +109,109 @@
</el-col>
</el-row>
<div class="margin-bottom-32">
<div class="cr-detail_intro">
<CustomTitle text="文物简介" />
<div class="intro text-indent">
<div class="intro-and-video">
<div class="intro-content wow animate__animated animate__fadeInLeft">
{{ CRDetail.intro }}
</div>
</div>
<div class="relate-book margin-bottom-32">
<CustomTitle text="相关文献" />
<div
class="book-item"
v-for="(item, index) in CRDetail.literatureVo"
:key="index"
class="intro-video wow animate__animated animate__fadeInRight"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
>
<el-carousel trigger="click" height="320px">
<el-carousel-item
v-for="item in CRDetail.videosVo"
:key="item.fileId"
>
<span class="mr-20">{{ item.name }}</span>
<span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span>
<Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<div class="relate-cultual-relic margin-bottom-32">
</div>
<div class="cr-detail_relate_cr">
<CustomTitle text="关联文物" />
<div class="display-group">
<div
class="display-item"
<el-row :gutter="40" class="cr-list">
<el-col
:span="8"
class="cr-item"
@click.native="handleToDetail(item.crId)"
v-for="(item, index) in relateRelics"
:key="index"
@click="handleToDetail(item.crId)"
>
<div class="container wow animate__animated animate__fadeInUp">
<div class="img">
<img
:src="$getFullUrl(item.faceImageUrl)"
v-if="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
:alt="item.title"
:alt="item.name"
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.name }}</h4>
</div>
<!-- <div class="desc-time">
<span>{{ item.time }}</span>
</div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a> -->
</div>
<div class="desc">
<span class="name">{{ item.name }}</span>
</div>
</div>
</el-col>
</el-row>
</div>
<div
class="relate-video margin-bottom-32"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
class="cr-detail_relate_lt"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
>
<CustomTitle text="关联视频" />
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item
v-for="item in CRDetail.videosVo"
:key="item.fileId"
<CustomTitle text="相关文献" />
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="CRDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<div class="video-container">
<div class="video-box">
<Video :url="$getFullUrl(item.url)" />
</div>
<div class="info-box">
<h4 class="name">{{ item.name.split(".")[0] }}</h4>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
<el-image-viewer
......@@ -200,16 +225,19 @@
<script>
import SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
import QRCode from "qrcodejs2";
import { getRCDetailById, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index";
export default {
components: {
SearchBar,
CustomTitle,
AudioPlayer,
ReaderOperations,
Video,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
......@@ -259,10 +287,7 @@ export default {
// 获取关联文物
this.loadCrRecommend();
this.$nextTick(() => {
if (
this.CRDetail.audiosVo &&
this.CRDetail.audiosVo.length > 0
) {
if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
......@@ -341,6 +366,24 @@ export default {
this.$refs["AudioPlayer"].pause();
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
},
};
</script>
......@@ -350,11 +393,7 @@ export default {
margin-right: 20px;
}
$label: #9f9c9a;
.search {
width: 1200px;
margin: auto;
margin-bottom: 32px;
}
.wrapper {
width: 1200px;
margin: 60px auto;
......@@ -362,14 +401,21 @@ $label: #9f9c9a;
padding: 40px;
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
display: flex;
align-items: center;
color: $label;
cursor: pointer;
.svg-icon {
font-size: 28px;
margin-right: 10px;
}
span {
font-size: 16px;
}
.detail-container {
margin-bottom: 32px;
}
/**文物基本信息 */
.cr-detail_info {
margin-top: 32px;
// display: flex;
img {
max-width: 100%;
......@@ -407,13 +453,23 @@ $label: #9f9c9a;
position: relative;
.info-title {
display: flex;
// align-items: center;
flex-direction: column;
margin-bottom: 40px;
.title-container {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
.title {
font-size: 28px;
font-weight: bold;
color: #444;
}
.view-container {
.view-svg-icon {
color: #999;
margin-right: 5px;
}
.view-text {
color: #999;
}
}
.play {
margin-left: 10px;
......@@ -446,102 +502,158 @@ $label: #9f9c9a;
padding: 6px 10px;
width: 100%;
background-color: #c1925b;
border-radius: 48px;
// border-radius: 48px;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
img {
margin-right: 10px;
}
}
.audio {
position: absolute;
right: -200px;
right: -180px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
// border: 1px solid #2069c4;
// padding: 10px;
border: 2px solid #2069c4;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: #2069c4;
font-size: 80px;
}
img {
width: 28px;
height: 28px;
width: 60px;
height: 60px;
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
.title-container {
display: flex;
justify-content: center;
position: relative;
.operation {
position: absolute;
right: 0;
display: flex;
align-items: center;
height: 100%;
@-webkit-keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
}
.content {
text-indent: 32px;
}
}
.relate-book {
.book-item {
margin-bottom: 10px;
// 文物简介
.cr-detail_intro {
margin-top: 32px;
.intro-and-video {
display: flex;
justify-content: space-between;
.intro-content {
flex: 1;
line-height: 1.5;
text-indent: 32px;
padding: 0 30px 0 20px;
}
.intro-video {
min-height: 320px;
flex: 1;
}
.relate-cultual-relic {
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
}
}
/**文物相关文献 */
// .cr-detail_relate_lt {
// margin-top: 32px;
// .book-item {
// margin-bottom: 10px;
// }
// }
.display-item {
width: 282px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
// padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
.cr-detail_relate_lt {
margin: 100px 0;
.wrapper {
display: flex;
background-color: #fafafa;
border: 2px solid #cccccc;
border-left: none;
.lts-content {
flex: 1;
padding: 10px;
}
}
}
/**关联文物 */
.cr-detail_relate_cr {
margin-top: 32px;
.cr-list {
.cr-item {
margin-bottom: 40px;
.container {
border: 1px solid #f1f1f1;
height: 300px;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
&:hover {
img {
border-radius: 16px 16px 0 0;
transform: scale(1.2);
}
.desc {
background-color: #2069c4;
color: #fff;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
}
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
display: block;
img {
height: 100%;
object-fit: contain;
transition: all 0.5s ease;
// width: auto;
}
}
.display-source {
margin-top: 8px;
.desc {
padding: 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
}
}
}
}
.relate-video {
}
/**关联视频 */
.cr-detail_relate_video {
margin: 32px 0;
.video-container {
display: flex;
flex-direction: column;
......@@ -567,11 +679,21 @@ $label: #9f9c9a;
text-indent: 28px;
}
.margin-bottom-32 {
margin-bottom: 32px;
}
.el-image-container {
width: 100%;
height: 100%;
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
transform: translateX(0) scale(1) !important;
}
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
</style>
src/views/display/components/BlueStyle.vue
浏览文件 @ 7b8bfa72
......@@ -2,7 +2,12 @@
<div class="content">
<!-- 展览图片 -->
<div
class="content-item display-detail_imgs wow animate__animated animate__fadeInDownBig"
class="
content-item
display-detail_imgs
wow
animate__animated animate__fadeInDownBig
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
......@@ -13,9 +18,15 @@
</div>
<div class="wrapper wow animate__animated animate__fadeInUpBig">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info ">
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div class="info-container-left wow animate__animated animate__fadeInLeft" >
<div
class="
info-container-left
wow
animate__animated animate__fadeInLeft
"
>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide
v-for="(item, index) in displayDetail.imagesVo"
......@@ -28,12 +39,18 @@
<img :src="item.url" alt="" srcset="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination">1234</div>
<div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
<!-- <div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</div>
<div class="info-container-right wow animate__animated animate__fadeInRight">
<div
class="
info-container-right
wow
animate__animated animate__fadeInRight
"
>
<div class="info-title">
<span>{{ displayDetail.title }} </span>
<div class="view-count">
......@@ -114,8 +131,8 @@
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<!-- <img src="@/assets/imgs/display/ch/audio.png" alt="" /> -->
<svg-icon icon-class="music"></svg-icon>
<img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
......@@ -124,8 +141,8 @@
</div>
</div>
<!-- 展览简介 -->
<div class="content-item display-detail_intro ">
<div class="intro-content wow animate__animated animate__fadeInUpBig">
<div class="content-item display-detail_intro">
<div class="intro-content wow animate__animated animate__fadeInLeft">
<div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span>
......@@ -135,7 +152,7 @@
</div>
</div>
<div
class="intro-video wow animate__animated animate__fadeInUpBig"
class="intro-video wow animate__animated animate__fadeInRight"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<el-carousel :interval="4000" type="card" indicator-position="none">
......@@ -154,7 +171,7 @@
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="custom_title wow animate__animated animate__fadeInUpBig">
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
......@@ -177,7 +194,9 @@
</div>
</div>
<div class="unit-container">
<div class="unit-content-menu wow animate__animated animate__fadeInLeft">
<div
class="unit-content-menu wow animate__animated animate__fadeInLeft"
>
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
......@@ -248,7 +267,10 @@
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<div class="img-container wow animate__animated animate__fadeInUp" @click="handleToCr(item)">
<div
class="img-container wow animate__animated animate__fadeInUp"
@click="handleToCr(item)"
>
<img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" />
<div class="cr-name-intro" v-if="index == 0">
<div class="cr-name">{{ item.name }}</div>
......@@ -260,13 +282,13 @@
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts wow animate__animated animate__fadeInUp"
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<!-- <div class="wrapper"> -->
<div class="custom_title">
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
......@@ -288,7 +310,7 @@
<div class="divider"></div>
</div>
</div>
<div class="lts-content">
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
......@@ -372,32 +394,43 @@ export default {
},
},
data() {
let vm = this;
return {
imgViewerVisible: false,
relateRelics: [],
audioPlaying: true,
curUnit: [],
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
swiperOption: {
autoplay: false,
// autoplay: false,
effect: "fade",
pagination: {
el: ".swiper-pagination",
type: "bullets",
type: "custom",
clickable: true,
// renderCustom: function (swiper, current, total) {
// var customPaginationHtml = "";
// for (var i = 0; i < total; i++) {
// //判断哪个分页器此刻应该被激活
// if (i == current - 1) {
// customPaginationHtml += `<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>`;
// } else {
// customPaginationHtml += `<span class="swiper-pagination-customs"></span>`;
// }
// }
// return (
// `<span class="swiperPag">` + customPaginationHtml + `</span>`
// );
// },
renderCustom: function (swiper, current, total) {
var customPaginationHtml = "";
for (var i = 0; i < total; i++) {
//判断哪个分页器此刻应该被激活
if (i == current - 1) {
customPaginationHtml += `<img class="page-item" src="${vm.dotImgS}" />`;
} else {
customPaginationHtml += `<img class="page-item" src="${vm.dotImg}" />`;
}
}
return `<span id="page">` + customPaginationHtml + `</span>`;
},
},
on: {
click: function (e) {
let page = document.getElementById("page");
var item = e.target;
var lists = Array.from(page.querySelectorAll("img"));
let index = lists.indexOf(item);
vm.swiper.slideTo(index);
},
},
},
};
......@@ -409,7 +442,6 @@ export default {
},
async mounted() {
this.loadDetail();
// let units = this.$refs.
},
methods: {
async loadDetail() {
......@@ -501,7 +533,6 @@ export default {
},
handleToCr(item) {
console.log(item);
const { crId } = item;
this.$router.push({
path: "/culturalRelic/" + crId,
......@@ -513,25 +544,13 @@ export default {
<style lang="scss" >
// 自定义分页器样式
.swiperPag {
#page {
height: 30px;
display: flex;
justify-content: center;
}
.swiper-pagination-customs {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 10px;
background-color: rgba($color: #2069c4, $alpha: 0.5);
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
width: 10px;
height: 10px;
display: inline-block;
background-color: #2069c4;
.page-item {
cursor: pointer;
}
</style>
......@@ -556,6 +575,9 @@ export default {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content {
background: url("@/assets/imgs/display/normal/bg1.png");
}
.content-item {
width: 100%;
}
......@@ -741,19 +763,24 @@ export default {
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
// border: 1px solid #2069c4;
// padding: 10px;
border: 2px solid #2069c4;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: #2069c4;
font-size: 80px;
}
img {
width: 28px;
height: 28px;
width: 60px;
height: 60px;
}
}
}
......@@ -897,24 +924,27 @@ export default {
}
&:not(&:first-child) {
margin-bottom: 30px;
.img-container {
height: 214px;
}
}
}
.img-container {
width: 100%;
max-height: 100%;
height: 100%;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
&:hover {
box-shadow: rgba(32, 105, 196, 0.4) 5px 5px,
rgba(32, 105, 196, 0.3) 10px 10px, rgba(32, 105, 196, 0.2) 15px 15px,
rgba(32, 105, 196, 0.1) 20px 20px,
rgba(32, 105, 196, 0.05) 25px 25px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
img {
transform: scale(1.1);
}
}
img {
width: 100%;
height: 214px;
max-height: 560px;
object-fit: cover;
transition: all 0.5s ease;
}
}
}
......
src/views/display/components/ChStyle.vue
浏览文件 @ 7b8bfa72
......@@ -2,7 +2,12 @@
<div class="display-detail">
<div class="content" id="content">
<div
class="content-item sliders wow animate__animated animate__fadeInRightBig"
class="
content-item
sliders
wow
animate__animated animate__fadeInRightBig
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
......@@ -34,17 +39,19 @@
<div class="right-layer"></div>
</div>
</div>
<div class="content-item intro wow animate__animated animate__fadeInUp">
<div class="content-item intro">
<div class="wrapper">
<div class="title wow animate__animated animate__fadeInUp">
<div>{{ displayDetail.title }}</div>
<div class="view-count">
<div class="title">
<div class="wow animate__animated animate__fadeIn">
{{ displayDetail.title }}
</div>
<div class="view-count wow animate__animated animate__fadeIn">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<div class="desc-and-tools wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="desc-and-tools">
<div class="desc wow animate__animated animate__fadeIn">
<el-row>
<el-col class="item">
<div class="label">关键词：</div>
......@@ -72,7 +79,7 @@
</el-col>
</el-row>
</div>
<div class="tools">
<div class="tools wow animate__animated animate__fadeIn">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
......@@ -88,8 +95,14 @@
<div class="divider"></div>
<div class="intro-and-video">
<div class="intro-container">
<div class="intro-title wow animate__animated animate__fadeInUpBig">展览简介</div>
<div class="intro-content wow animate__animated animate__fadeInLeft">
<div
class="intro-title wow animate__animated animate__fadeInLeft"
>
展览简介
</div>
<div
class="intro-content wow animate__animated animate__fadeInLeft"
>
{{ displayDetail.intro }}
</div>
</div>
......@@ -97,11 +110,7 @@
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos wow animate__animated animate__fadeInRight"
>
<el-carousel
:interval="4000"
type="card"
indicator-position="none"
>
<el-carousel>
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
......@@ -117,7 +126,8 @@
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<svg-icon icon-class="music"></svg-icon>
<!-- <svg-icon icon-class="music"></svg-icon> -->
<img src="@/assets/imgs/display/normal/music-red.png" alt="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
......@@ -144,9 +154,9 @@
<ChStyleUnit :units="displayDetail.exhibitionUnits" />
</div>
</div>
<div class="content-item lts wow animate__animated animate__fadeInUp">
<div class="content-item lts">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title wow animate__animated animate__fadeInUp">
<div class="custom-title-prefix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div>
......@@ -163,7 +173,7 @@
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="wrapper">
<div class="wrapper wow animate__animated animate__fadeInUp">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
......@@ -628,22 +638,21 @@ export default {
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
// border: 1px solid #892325;
border: 2px solid #892325;
padding: 10px;
border-radius: 50%;
// padding: 10px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
.svg-icon {
color: #831122;
font-size: 80px;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
img {
width: 60px;
height: 60px;
}
// img {
// width: 28px;
// height: 28px;
// }
}
}
}
......
src/views/display/components/NormalStyle.vue
浏览文件 @ 7b8bfa72
......@@ -3,12 +3,8 @@
<div class="display-detail">
<div class="wrapper">
<div class="back">
<el-button
type="text"
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
<svg-icon icon-class="mz-fh"></svg-icon>
<span>返回上页 </span>
</div>
<el-row class="detail-container" :gutter="60">
<el-col class="cr-images" :span="16">
......@@ -381,10 +377,16 @@ $label: #9f9c9a;
// 返回按钮
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
display: flex;
align-items: center;
color: $label;
cursor: pointer;
.svg-icon {
font-size: 28px;
margin-right: 10px;
}
span {
font-size: 16px;
}
}
......
src/views/display/components/RedStyle.vue
浏览文件 @ 7b8bfa72
......@@ -3,7 +3,12 @@
<div class="content" id="content">
<!-- 展览图片 -->
<div
class="content-item display-detail_imgs wow animate__animated animate__fadeInDownBig"
class="
content-item
display-detail_imgs
wow
animate__animated animate__fadeInDownBig
"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
......@@ -22,7 +27,14 @@
</swiper>
</div>
<!-- 展览基本信息 -->
<div class="content-item wow display-detail_basic_info animate__animated animate__fadeInUpBig">
<div
class="
content-item
display-detail_basic_info
wow
animate__animated animate__fadeInUp
"
>
<div class="wrapper">
<div class="top">
<div class="top-wrapper">
......@@ -111,7 +123,14 @@
</div>
</div>
<!-- 展览简介 -->
<div class="content-item display-detail_intro wow animate__animated animate__fadeInRight">
<div
class="
content-item
display-detail_intro
wow
animate__animated animate__fadeInUp
"
>
<div class="wrapper">
<div class="custom-title">展览简介</div>
<div class="intro-content">
......@@ -134,7 +153,12 @@
</div>
<!--展览单元 -->
<div
class="content-item display-detail_units wow animate__animated animate__fadeInLeft"
class="
content-item
display-detail_units
wow
animate__animated animate__fadeInUp
"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
......@@ -247,7 +271,12 @@
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts wow animate__animated animate__fadeInRight"
class="
content-item
display-detail_lts
wow
animate__animated animate__fadeInUp
"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
......
src/views/museum/Detail.vue
浏览文件 @ 7b8bfa72
......@@ -3,12 +3,8 @@
<div class="display-detail">
<div class="wrapper">
<div class="back">
<el-button
type="text"
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
<svg-icon icon-class="mz-fh"></svg-icon>
<span>返回上页 </span>
</div>
<el-row class="detail-container" :gutter="10">
<el-col class="cr-images" :span="18">
......@@ -166,10 +162,16 @@ $label: #9f9c9a;
padding: 40px;
.back {
font-size: 18px;
font-weight: bold;
margin-bottom: 40px;
.el-button {
display: flex;
align-items: center;
color: $label;
cursor: pointer;
.svg-icon {
font-size: 28px;
margin-right: 10px;
}
span {
font-size: 16px;
}
}
.detail-container {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论