Skip to content

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

优化UI

上级 9c919715
隐藏空白字符变更
内嵌 并排
正在显示 包含 495 行增加 和 283 行删除
src/components/CustomTitle/index.vue
浏览文件 @ 7b8bfa72
<!-- --> <!-- -->
<template> <template>
<div class="custom-title"> <div class="custom-title">
{{ text }} <svg-icon icon-class="mz-list"></svg-icon>
<span> {{ text }}</span>
</div> </div>
</template> </template>
...@@ -30,5 +31,6 @@ export default { ...@@ -30,5 +31,6 @@ export default {
border-bottom: 1px solid rgba($color: #b8b8b8, $alpha: 0.3); border-bottom: 1px solid rgba($color: #b8b8b8, $alpha: 0.3);
margin-bottom: 32px; margin-bottom: 32px;
font-family: "KaiTi"; font-family: "KaiTi";
color: #666;
} }
</style> </style>
src/components/Footer/index.vue
浏览文件 @ 7b8bfa72
...@@ -55,6 +55,6 @@ export default { ...@@ -55,6 +55,6 @@ export default {
background-color: #892325 !important; background-color: #892325 !important;
} }
.isRedStyle { .isRedStyle {
background-color: #610a03 !important; background-color: #a30e0c !important;
} }
</style> </style>
src/components/NavBar/index.vue
浏览文件 @ 7b8bfa72
...@@ -434,7 +434,7 @@ export default { ...@@ -434,7 +434,7 @@ export default {
background-color: #892325 !important; background-color: #892325 !important;
} }
.isRedStyle { .isRedStyle {
background-color: #610a03 !important; background-color: #a30e0c !important;
} }
.nav { .nav {
height: 100px; height: 100px;
......
src/components/ReaderOperations/index.vue
浏览文件 @ 7b8bfa72
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<span class="operation-item" v-if="like"> <span class="operation-item" v-if="like">
<svg-icon <svg-icon
@click="handleLike" @click="handleLike"
icon-class="like" :icon-class="loveCountStatus?'mz-collect-s':'mz-collect'"
:style="{ fontSize: iconSize + 'px' }" :style="{ fontSize: iconSize + 'px' }"
:class="loveCountStatus ? 'like' : ''" :class="loveCountStatus ? 'like' : ''"
></svg-icon> ></svg-icon>
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
</span> </span>
<span v-if="share" class="operation-item" @click="handleShare"> <span v-if="share" class="operation-item" @click="handleShare">
<svg-icon <svg-icon
icon-class="share2" icon-class="mz-fx"
class="collect"
:style="{ fontSize: iconSize + 'px' }" :style="{ fontSize: iconSize + 'px' }"
></svg-icon> ></svg-icon>
<span>分享</span> <span>分享</span>
...@@ -30,7 +31,7 @@ ...@@ -30,7 +31,7 @@
title="登录提示" title="登录提示"
:visible.sync="loginDialogVisible" :visible.sync="loginDialogVisible"
width="30%" width="30%"
:before-close="handleLoginClose" :before-close="handleLoginClose"
:modal="false" :modal="false"
> >
<span>读者功能需登录进行使用，是否去登录？</span> <span>读者功能需登录进行使用，是否去登录？</span>
...@@ -236,7 +237,7 @@ export default { ...@@ -236,7 +237,7 @@ export default {
color: #831122; color: #831122;
} }
.collect { .collect {
color: #2069c4; color: #831122;
} }
} }
......
src/components/Video/index.vue
浏览文件 @ 7b8bfa72
...@@ -92,7 +92,7 @@ export default { ...@@ -92,7 +92,7 @@ export default {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
i { i {
font-size: 58px; font-size: 70px;
z-index: 1; z-index: 1;
transform: scaleX(1.5); transform: scaleX(1.5);
} }
...@@ -100,14 +100,14 @@ export default { ...@@ -100,14 +100,14 @@ export default {
} }
.blur { .blur {
width: 100px; width: 120px;
height: 70px; height: 84px;
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 50%; bottom: 50%;
transform: translate(-50%, 50%); transform: translate(-50%, 50%);
filter: blur(26px); filter: blur(20px);
z-index: 0; 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"); } <?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>
</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
\ 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> <template>
<div class="display-detail"> <div class="cr-detail">
<div class="wrapper"> <div class="wrapper">
<div class="back"> <div class="back">
<el-button <svg-icon icon-class="mz-fh"></svg-icon>
type="text" <span>返回上页 </span>
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
</div> </div>
<el-row class="detail-container" :gutter="10"> <el-row class="cr-detail_info" :gutter="10">
<el-col class="cr-images" :span="18"> <el-col class="cr-images" :span="18">
<el-carousel <el-carousel
indicator-position="outside" indicator-position="outside"
...@@ -34,21 +30,13 @@ ...@@ -34,21 +30,13 @@
</el-col> </el-col>
<el-col class="relic-info" :span="8"> <el-col class="relic-info" :span="8">
<div class="info-title"> <div class="info-title">
<div class="title-container"> <div class="title">
<h2> {{ CRDetail.name }}
{{ CRDetail.name }} </div>
</h2> <div class="view-container">
<span class="view-container"> <svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
<svg-icon icon-class="view" class="view-svg-icon"></svg-icon> <span class="view-text">{{ CRDetail.browseCount }}</span>
<span class="view-text">{{ CRDetail.browseCount }}</span>
</span>
</div> </div>
<!-- <AudioPlayer
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
/> -->
</div> </div>
<div class="info-body"> <div class="info-body">
<div class="basic-info"> <div class="basic-info">
...@@ -110,7 +98,8 @@ ...@@ -110,7 +98,8 @@
@click="handleClickAudio" @click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0" 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 <AudioPlayer
style="display: none" style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)" :url="$getFullUrl(CRDetail.audiosVo[0].url)"
...@@ -120,73 +109,109 @@ ...@@ -120,73 +109,109 @@
</el-col> </el-col>
</el-row> </el-row>
<div class="margin-bottom-32"> <div class="cr-detail_intro">
<CustomTitle text="文物简介" /> <CustomTitle text="文物简介" />
<div class="intro text-indent"> <div class="intro-and-video">
{{ CRDetail.intro }} <div class="intro-content wow animate__animated animate__fadeInLeft">
{{ CRDetail.intro }}
</div>
<div
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"
>
<Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item>
</el-carousel>
</div>
</div> </div>
</div> </div>
<div class="relate-book margin-bottom-32"> <div class="cr-detail_relate_cr">
<CustomTitle text="相关文献" />
<div
class="book-item"
v-for="(item, index) in CRDetail.literatureVo"
:key="index"
>
<span class="mr-20">{{ item.name }}</span>
<span class="mr-20">{{ item.author }}</span>
<span>{{ item.source }}</span>
</div>
</div>
<div class="relate-cultual-relic margin-bottom-32">
<CustomTitle text="关联文物" /> <CustomTitle text="关联文物" />
<div class="display-group"> <el-row :gutter="40" class="cr-list">
<div <el-col
class="display-item" :span="8"
class="cr-item"
@click.native="handleToDetail(item.crId)"
v-for="(item, index) in relateRelics" v-for="(item, index) in relateRelics"
:key="index" :key="index"
@click="handleToDetail(item.crId)"
> >
<img <div class="container wow animate__animated animate__fadeInUp">
:src="$getFullUrl(item.faceImageUrl)" <div class="img">
width="100%" <img
:alt="item.title" v-if="
/> $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
<div class="display-desc"> "
<div class="desc-title"> :src="
<h4>{{ item.name }}</h4> $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
width="100%"
:alt="item.name"
/>
<img
v-else
src="@/assets/404_images/no-pic.png"
alt=""
width="100%"
height="100%"
class="img"
/>
</div> </div>
<!-- <div class="desc-time"> <div class="desc">
<span>{{ item.time }}</span> <span class="name">{{ item.name }}</span>
</div> </div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a> -->
</div> </div>
</div> </el-col>
</div> </el-row>
</div> </div>
<div <div
class="relate-video margin-bottom-32" class="cr-detail_relate_lt"
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0" v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
> >
<CustomTitle text="关联视频" /> <CustomTitle text="相关文献" />
<el-carousel :interval="4000" type="card" height="400px"> <div class="lts-content wow animate__animated animate__fadeInUp">
<el-carousel-item <el-table
v-for="item in CRDetail.videosVo" :data="CRDetail.literatureVo"
:key="item.fileId" :header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
> >
<div class="video-container"> <el-table-column
<div class="video-box"> prop="name"
<Video :url="$getFullUrl(item.url)" /> label="名称"
</div> align="center"
<div class="info-box"> ></el-table-column>
<h4 class="name">{{ item.name.split(".")[0] }}</h4> <el-table-column
</div> prop="authors"
</div> label="作者"
</el-carousel-item> align="center"
</el-carousel> ></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>
</div> </div>
</div> </div>
<el-image-viewer <el-image-viewer
...@@ -200,16 +225,19 @@ ...@@ -200,16 +225,19 @@
<script> <script>
import SearchBar from "@/components/SearchBar"; import SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer"; import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import CustomTitle from "@/components/CustomTitle"; import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations"; import ReaderOperations from "@/components/ReaderOperations";
import QRCode from "qrcodejs2"; import QRCode from "qrcodejs2";
import { getRCDetailById, crRecommendByPage } from "@/api/culturalRelic"; import { getRCDetailById, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index";
export default { export default {
components: { components: {
SearchBar, SearchBar,
CustomTitle, CustomTitle,
AudioPlayer, AudioPlayer,
ReaderOperations, ReaderOperations,
Video,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -259,10 +287,7 @@ export default { ...@@ -259,10 +287,7 @@ export default {
// 获取关联文物 // 获取关联文物
this.loadCrRecommend(); this.loadCrRecommend();
this.$nextTick(() => { this.$nextTick(() => {
if ( if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
this.CRDetail.audiosVo &&
this.CRDetail.audiosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭"); this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play(); this.$refs.AudioPlayer.play();
} }
...@@ -341,6 +366,24 @@ export default { ...@@ -341,6 +366,24 @@ export default {
this.$refs["AudioPlayer"].pause(); 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> </script>
...@@ -350,11 +393,7 @@ export default { ...@@ -350,11 +393,7 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
$label: #9f9c9a; $label: #9f9c9a;
.search {
width: 1200px;
margin: auto;
margin-bottom: 32px;
}
.wrapper { .wrapper {
width: 1200px; width: 1200px;
margin: 60px auto; margin: 60px auto;
...@@ -362,14 +401,21 @@ $label: #9f9c9a; ...@@ -362,14 +401,21 @@ $label: #9f9c9a;
padding: 40px; padding: 40px;
.back { .back {
font-size: 18px; font-size: 18px;
font-weight: bold; display: flex;
margin-bottom: 40px; align-items: center;
.el-button { color: $label;
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; // display: flex;
img { img {
max-width: 100%; max-width: 100%;
...@@ -407,13 +453,23 @@ $label: #9f9c9a; ...@@ -407,13 +453,23 @@ $label: #9f9c9a;
position: relative; position: relative;
.info-title { .info-title {
display: flex; display: flex;
// align-items: center; align-items: center;
flex-direction: column; justify-content: space-between;
margin-bottom: 40px; margin-bottom: 40px;
.title-container { .title {
display: flex; font-size: 28px;
justify-content: space-between; font-weight: bold;
align-items: center; color: #444;
}
.view-container {
.view-svg-icon {
color: #999;
margin-right: 5px;
}
.view-text {
color: #999;
}
} }
.play { .play {
margin-left: 10px; margin-left: 10px;
...@@ -446,102 +502,158 @@ $label: #9f9c9a; ...@@ -446,102 +502,158 @@ $label: #9f9c9a;
padding: 6px 10px; padding: 6px 10px;
width: 100%; width: 100%;
background-color: #c1925b; background-color: #c1925b;
border-radius: 48px; // border-radius: 48px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
cursor: pointer; 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 { img {
margin-right: 10px; margin-right: 10px;
} }
} }
.audio { .audio {
position: absolute; position: absolute;
right: -200px; right: -180px;
top: 34px; top: 34px;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
// border: 1px solid #2069c4; border: 2px solid #2069c4;
// padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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 { .svg-icon {
color: #2069c4; color: #2069c4;
font-size: 80px; font-size: 80px;
} }
img { img {
width: 28px; width: 60px;
height: 28px; height: 60px;
}
}
@keyframes audioRotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
} }
} }
}
.title-container { @-webkit-keyframes audioRotate {
display: flex; 0% {
justify-content: center; transform: rotateZ(0deg);
position: relative; }
.operation { 100% {
position: absolute; transform: rotateZ(360deg);
right: 0; }
display: flex;
align-items: center;
height: 100%;
} }
} }
.content { .content {
text-indent: 32px; 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 { // .cr-detail_relate_lt {
margin-top: 24px; // margin-top: 32px;
display: flex; // .book-item {
flex-flow: row wrap; // margin-bottom: 10px;
// }
// }
.display-item { .cr-detail_relate_lt {
width: 282px; margin: 100px 0;
margin-bottom: 32px; .wrapper {
border-radius: 16px; display: flex;
border: 1px solid rgba(0, 0, 0, 0.1); background-color: #fafafa;
// padding: 0 0 32px 0; border: 2px solid #cccccc;
background-color: #fff; border-left: none;
margin-right: 10px; .lts-content {
cursor: pointer; flex: 1;
img { padding: 10px;
border-radius: 16px 16px 0 0; }
} }
.display-desc { }
padding: 0 16px; /**关联文物 */
.desc-content { .cr-detail_relate_cr {
text-indent: 16px; margin-top: 32px;
white-space: nowrap; .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 {
transform: scale(1.2);
}
.desc {
background-color: #2069c4;
color: #fff;
}
}
.img {
background-color: #f8f8f8;
height: 240px;
cursor: pointer;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; img {
display: block; height: 100%;
object-fit: contain;
transition: all 0.5s ease;
// width: auto;
}
}
.desc {
padding: 16px 0;
display: flex;
justify-content: center;
transition: all 0.5s ease;
flex: 1;
} }
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
} }
} }
} }
} }
/**关联视频 */
.relate-video { .cr-detail_relate_video {
margin: 32px 0;
.video-container { .video-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -567,11 +679,21 @@ $label: #9f9c9a; ...@@ -567,11 +679,21 @@ $label: #9f9c9a;
text-indent: 28px; text-indent: 28px;
} }
.margin-bottom-32 {
margin-bottom: 32px;
}
.el-image-container { .el-image-container {
width: 100%; width: 100%;
height: 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> </style>
src/views/display/components/BlueStyle.vue
浏览文件 @ 7b8bfa72
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<div class="content"> <div class="content">
<!-- 展览图片 --> <!-- 展览图片 -->
<div <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" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
...@@ -13,9 +18,15 @@ ...@@ -13,9 +18,15 @@
</div> </div>
<div class="wrapper wow animate__animated animate__fadeInUpBig"> <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">
<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 :options="swiperOption" ref="mySwiper">
<swiper-slide <swiper-slide
v-for="(item, index) in displayDetail.imagesVo" v-for="(item, index) in displayDetail.imagesVo"
...@@ -28,12 +39,18 @@ ...@@ -28,12 +39,18 @@
<img :src="item.url" alt="" srcset="" /> <img :src="item.url" alt="" srcset="" />
</div> </div>
</swiper-slide> </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-prev" slot="button-prev"></div> -->
<!-- <div class="swiper-button-next" slot="button-next"></div> --> <!-- <div class="swiper-button-next" slot="button-next"></div> -->
</swiper> </swiper>
</div> </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"> <div class="info-title">
<span>{{ displayDetail.title }} </span> <span>{{ displayDetail.title }} </span>
<div class="view-count"> <div class="view-count">
...@@ -109,13 +126,13 @@ ...@@ -109,13 +126,13 @@
</div> </div>
</div> </div>
<div <div
class="audio wow animate__animated animate__fadeInRight" class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio" @click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
> >
<!-- <img src="@/assets/imgs/display/ch/audio.png" alt="" /> --> <img src="@/assets/imgs/display/normal/music.png" alt="" />
<svg-icon icon-class="music"></svg-icon> <!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer <AudioPlayer
style="display: none" style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)" :url="$getFullUrl(displayDetail.audiosVo[0].url)"
...@@ -124,8 +141,8 @@ ...@@ -124,8 +141,8 @@
</div> </div>
</div> </div>
<!-- 展览简介 --> <!-- 展览简介 -->
<div class="content-item display-detail_intro "> <div class="content-item display-detail_intro">
<div class="intro-content wow animate__animated animate__fadeInUpBig"> <div class="intro-content wow animate__animated animate__fadeInLeft">
<div class="intro-title"> <div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon> <svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span> <span>展览简介</span>
...@@ -135,7 +152,7 @@ ...@@ -135,7 +152,7 @@
</div> </div>
</div> </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" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
> >
<el-carousel :interval="4000" type="card" indicator-position="none"> <el-carousel :interval="4000" type="card" indicator-position="none">
...@@ -154,7 +171,7 @@ ...@@ -154,7 +171,7 @@
ref="units" ref="units"
v-if="displayDetail.exhibitionUnits.length > 0" 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="desc">
<div class="divider"></div> <div class="divider"></div>
<img <img
...@@ -177,7 +194,9 @@ ...@@ -177,7 +194,9 @@
</div> </div>
</div> </div>
<div class="unit-container"> <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 --> <!-- 只能单开 unique-opened -->
<menu-list <menu-list
:items="displayDetail.exhibitionUnits" :items="displayDetail.exhibitionUnits"
...@@ -248,7 +267,10 @@ ...@@ -248,7 +267,10 @@
v-for="(item, index) in displayDetail.culturalRelicVo" v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index" :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="" /> <img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" />
<div class="cr-name-intro" v-if="index == 0"> <div class="cr-name-intro" v-if="index == 0">
<div class="cr-name">{{ item.name }}</div> <div class="cr-name">{{ item.name }}</div>
...@@ -260,13 +282,13 @@ ...@@ -260,13 +282,13 @@
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div <div
class="content-item display-detail_lts wow animate__animated animate__fadeInUp" class="content-item display-detail_lts"
v-if=" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" "
> >
<!-- <div class="wrapper"> --> <!-- <div class="wrapper"> -->
<div class="custom_title"> <div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc"> <div class="desc">
<div class="divider"></div> <div class="divider"></div>
<img <img
...@@ -288,7 +310,7 @@ ...@@ -288,7 +310,7 @@
<div class="divider"></div> <div class="divider"></div>
</div> </div>
</div> </div>
<div class="lts-content"> <div class="lts-content wow animate__animated animate__fadeInUp">
<el-table <el-table
:data="displayDetail.literatureVo" :data="displayDetail.literatureVo"
:header-cell-style="{ :header-cell-style="{
...@@ -372,32 +394,43 @@ export default { ...@@ -372,32 +394,43 @@ export default {
}, },
}, },
data() { data() {
let vm = this;
return { return {
imgViewerVisible: false, imgViewerVisible: false,
relateRelics: [], relateRelics: [],
audioPlaying: true, audioPlaying: true,
curUnit: [], curUnit: [],
dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
page: null,
swiperOption: { swiperOption: {
autoplay: false, // autoplay: false,
effect: "fade", effect: "fade",
pagination: { pagination: {
el: ".swiper-pagination", el: ".swiper-pagination",
type: "bullets", type: "custom",
clickable: true, clickable: true,
// renderCustom: function (swiper, current, total) { renderCustom: function (swiper, current, total) {
// var customPaginationHtml = ""; var customPaginationHtml = "";
// for (var i = 0; i < total; i++) { for (var i = 0; i < total; i++) {
// //判断哪个分页器此刻应该被激活 //判断哪个分页器此刻应该被激活
// if (i == current - 1) { if (i == current - 1) {
// customPaginationHtml += `<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>`; customPaginationHtml += `<img class="page-item" src="${vm.dotImgS}" />`;
// } else { } else {
// customPaginationHtml += `<span class="swiper-pagination-customs"></span>`; customPaginationHtml += `<img class="page-item" src="${vm.dotImg}" />`;
// } }
// } }
// return ( return `<span id="page">` + customPaginationHtml + `</span>`;
// `<span class="swiperPag">` + 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 { ...@@ -409,7 +442,6 @@ export default {
}, },
async mounted() { async mounted() {
this.loadDetail(); this.loadDetail();
// let units = this.$refs.
}, },
methods: { methods: {
async loadDetail() { async loadDetail() {
...@@ -501,7 +533,6 @@ export default { ...@@ -501,7 +533,6 @@ export default {
}, },
handleToCr(item) { handleToCr(item) {
console.log(item);
const { crId } = item; const { crId } = item;
this.$router.push({ this.$router.push({
path: "/culturalRelic/" + crId, path: "/culturalRelic/" + crId,
...@@ -513,25 +544,13 @@ export default { ...@@ -513,25 +544,13 @@ export default {
<style lang="scss" > <style lang="scss" >
// 自定义分页器样式 // 自定义分页器样式
.swiperPag { #page {
height: 30px; height: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.page-item {
.swiper-pagination-customs { cursor: pointer;
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;
} }
</style> </style>
...@@ -556,6 +575,9 @@ export default { ...@@ -556,6 +575,9 @@ export default {
background-image: linear-gradient(to bottom, #660d04, #520002); background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px; min-height: 400px;
} }
.content {
background: url("@/assets/imgs/display/normal/bg1.png");
}
.content-item { .content-item {
width: 100%; width: 100%;
} }
...@@ -741,19 +763,24 @@ export default { ...@@ -741,19 +763,24 @@ export default {
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
// border: 1px solid #2069c4; border: 2px solid #2069c4;
// padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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 { .svg-icon {
color: #2069c4; color: #2069c4;
font-size: 80px; font-size: 80px;
} }
img { img {
width: 28px; width: 60px;
height: 28px; height: 60px;
} }
} }
} }
...@@ -897,24 +924,27 @@ export default { ...@@ -897,24 +924,27 @@ export default {
} }
&:not(&:first-child) { &:not(&:first-child) {
margin-bottom: 30px; margin-bottom: 30px;
.img-container {
height: 214px;
}
} }
} }
.img-container { .img-container {
width: 100%; width: 100%;
max-height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; overflow: hidden;
&:hover { &:hover {
box-shadow: rgba(32, 105, 196, 0.4) 5px 5px, box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
rgba(32, 105, 196, 0.3) 10px 10px, rgba(32, 105, 196, 0.2) 15px 15px, img {
rgba(32, 105, 196, 0.1) 20px 20px, transform: scale(1.1);
rgba(32, 105, 196, 0.05) 25px 25px; }
} }
img { img {
width: 100%; width: 100%;
height: 214px; height: 214px;
max-height: 560px;
object-fit: cover; object-fit: cover;
transition: all 0.5s ease;
} }
} }
} }
......
src/views/display/components/ChStyle.vue
浏览文件 @ 7b8bfa72
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<div class="display-detail"> <div class="display-detail">
<div class="content" id="content"> <div class="content" id="content">
<div <div
class="content-item sliders wow animate__animated animate__fadeInRightBig" class="
content-item
sliders
wow
animate__animated animate__fadeInRightBig
"
ref="imgs" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
...@@ -34,17 +39,19 @@ ...@@ -34,17 +39,19 @@
<div class="right-layer"></div> <div class="right-layer"></div>
</div> </div>
</div> </div>
<div class="content-item intro wow animate__animated animate__fadeInUp"> <div class="content-item intro">
<div class="wrapper"> <div class="wrapper">
<div class="title wow animate__animated animate__fadeInUp"> <div class="title">
<div>{{ displayDetail.title }}</div> <div class="wow animate__animated animate__fadeIn">
<div class="view-count"> {{ displayDetail.title }}
</div>
<div class="view-count wow animate__animated animate__fadeIn">
<svg-icon icon-class="view"></svg-icon> <svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span> <span>{{ displayDetail.browseCount }}</span>
</div> </div>
</div> </div>
<div class="desc-and-tools wow animate__animated animate__fadeInUp"> <div class="desc-and-tools">
<div class="desc"> <div class="desc wow animate__animated animate__fadeIn">
<el-row> <el-row>
<el-col class="item"> <el-col class="item">
<div class="label">关键词：</div> <div class="label">关键词：</div>
...@@ -72,7 +79,7 @@ ...@@ -72,7 +79,7 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="tools"> <div class="tools wow animate__animated animate__fadeIn">
<ReaderOperations <ReaderOperations
:loveCount="displayDetail.loveCount" :loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
...@@ -88,8 +95,14 @@ ...@@ -88,8 +95,14 @@
<div class="divider"></div> <div class="divider"></div>
<div class="intro-and-video"> <div class="intro-and-video">
<div class="intro-container"> <div class="intro-container">
<div class="intro-title wow animate__animated animate__fadeInUpBig">展览简介</div> <div
<div class="intro-content wow animate__animated animate__fadeInLeft"> class="intro-title wow animate__animated animate__fadeInLeft"
>
展览简介
</div>
<div
class="intro-content wow animate__animated animate__fadeInLeft"
>
{{ displayDetail.intro }} {{ displayDetail.intro }}
</div> </div>
</div> </div>
...@@ -97,11 +110,7 @@ ...@@ -97,11 +110,7 @@
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="videos wow animate__animated animate__fadeInRight" class="videos wow animate__animated animate__fadeInRight"
> >
<el-carousel <el-carousel>
:interval="4000"
type="card"
indicator-position="none"
>
<el-carousel-item <el-carousel-item
v-for="item in displayDetail.videosVo" v-for="item in displayDetail.videosVo"
:key="item.fileId" :key="item.fileId"
...@@ -117,7 +126,8 @@ ...@@ -117,7 +126,8 @@
@click="handleClickAudio" @click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0" 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 <AudioPlayer
style="display: none" style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)" :url="$getFullUrl(displayDetail.audiosVo[0].url)"
...@@ -144,9 +154,9 @@ ...@@ -144,9 +154,9 @@
<ChStyleUnit :units="displayDetail.exhibitionUnits" /> <ChStyleUnit :units="displayDetail.exhibitionUnits" />
</div> </div>
</div> </div>
<div class="content-item lts wow animate__animated animate__fadeInUp"> <div class="content-item lts">
<div class="wrapper"> <div class="wrapper">
<div class="custom-title"> <div class="custom-title wow animate__animated animate__fadeInUp">
<div class="custom-title-prefix"> <div class="custom-title-prefix">
<img src="@/assets/imgs/display/ch/custom-title.png" alt="" /> <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
</div> </div>
...@@ -163,7 +173,7 @@ ...@@ -163,7 +173,7 @@
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" "
> >
<div class="wrapper"> <div class="wrapper wow animate__animated animate__fadeInUp">
<el-table <el-table
:data="displayDetail.literatureVo" :data="displayDetail.literatureVo"
:header-cell-style="{ :header-cell-style="{
...@@ -628,22 +638,21 @@ export default { ...@@ -628,22 +638,21 @@ export default {
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
// border: 1px solid #892325; border: 2px solid #892325;
padding: 10px;
border-radius: 50%; border-radius: 50%;
// padding: 10px;
width: 60px;
height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.svg-icon { background-color: #fff;
color: #831122; transition: all 0.5s ease;
font-size: 80px; &: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 @@ ...@@ -3,12 +3,8 @@
<div class="display-detail"> <div class="display-detail">
<div class="wrapper"> <div class="wrapper">
<div class="back"> <div class="back">
<el-button <svg-icon icon-class="mz-fh"></svg-icon>
type="text" <span>返回上页 </span>
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
</div> </div>
<el-row class="detail-container" :gutter="60"> <el-row class="detail-container" :gutter="60">
<el-col class="cr-images" :span="16"> <el-col class="cr-images" :span="16">
...@@ -381,10 +377,16 @@ $label: #9f9c9a; ...@@ -381,10 +377,16 @@ $label: #9f9c9a;
// 返回按钮 // 返回按钮
.back { .back {
font-size: 18px; font-size: 18px;
font-weight: bold; display: flex;
margin-bottom: 40px; align-items: center;
.el-button { color: $label;
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 @@ ...@@ -3,7 +3,12 @@
<div class="content" id="content"> <div class="content" id="content">
<!-- 展览图片 --> <!-- 展览图片 -->
<div <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" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
...@@ -22,7 +27,14 @@ ...@@ -22,7 +27,14 @@
</swiper> </swiper>
</div> </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="wrapper">
<div class="top"> <div class="top">
<div class="top-wrapper"> <div class="top-wrapper">
...@@ -111,7 +123,14 @@ ...@@ -111,7 +123,14 @@
</div> </div>
</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="wrapper">
<div class="custom-title">展览简介</div> <div class="custom-title">展览简介</div>
<div class="intro-content"> <div class="intro-content">
...@@ -134,7 +153,12 @@ ...@@ -134,7 +153,12 @@
</div> </div>
<!--展览单元 --> <!--展览单元 -->
<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" ref="units"
v-if="displayDetail.exhibitionUnits.length > 0" v-if="displayDetail.exhibitionUnits.length > 0"
> >
...@@ -247,7 +271,12 @@ ...@@ -247,7 +271,12 @@
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<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=" v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0 displayDetail.literatureVo && displayDetail.literatureVo.length > 0
" "
......
src/views/museum/Detail.vue
浏览文件 @ 7b8bfa72
...@@ -3,12 +3,8 @@ ...@@ -3,12 +3,8 @@
<div class="display-detail"> <div class="display-detail">
<div class="wrapper"> <div class="wrapper">
<div class="back"> <div class="back">
<el-button <svg-icon icon-class="mz-fh"></svg-icon>
type="text" <span>返回上页 </span>
icon="el-icon-arrow-left"
@click.native="handleBack"
>返回上页</el-button
>
</div> </div>
<el-row class="detail-container" :gutter="10"> <el-row class="detail-container" :gutter="10">
<el-col class="cr-images" :span="18"> <el-col class="cr-images" :span="18">
...@@ -166,10 +162,16 @@ $label: #9f9c9a; ...@@ -166,10 +162,16 @@ $label: #9f9c9a;
padding: 40px; padding: 40px;
.back { .back {
font-size: 18px; font-size: 18px;
font-weight: bold; display: flex;
margin-bottom: 40px; align-items: center;
.el-button { color: $label;
color: $label; cursor: pointer;
.svg-icon {
font-size: 28px;
margin-right: 10px;
}
span {
font-size: 16px;
} }
} }
.detail-container { .detail-container {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论