Skip to content

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

更新神秘贵州精品展

上级 66cd0480
显示空白字符变更
内嵌 并排
正在显示 包含 246 行增加 和 130 行删除
src/assets/imgs/boutique/smgz/3_hall/hall_pics/1-1.png
查看替换文件 @ 66cd0480 浏览文件 @ 3bc56aad
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/1-2.png
查看替换文件 @ 66cd0480 浏览文件 @ 3bc56aad
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/2-2.png
查看替换文件 @ 66cd0480 浏览文件 @ 3bc56aad
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/3-1.png
查看替换文件 @ 66cd0480 浏览文件 @ 3bc56aad
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/3-2.png
查看替换文件 @ 66cd0480 浏览文件 @ 3bc56aad
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/4-1.png
查看替换文件 @ 66cd0480 浏览文件 @ 3bc56aad
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/imgs/boutique/smgz/3_hall/hall_pics/4-2.png 0 → 100644
浏览文件 @ 3bc56aad
This image diff could not be displayed because it is too large. You can view the blob instead.
src/views/boutique/components/SMGZ.vue
浏览文件 @ 3bc56aad
......@@ -60,6 +60,12 @@
<div class="title">展览简介</div>
<div class="main">
<p>
贵州在国际学术界享有“古生物王国”的美誉，境内瓮安生物群、凯里生物群、青岩生物群、关岭动物群等11个古生物群的发现，在全球具有石破天惊的影响。
</p>
<p>
展览立足独有而丰富的古生物标本以及丰厚的科研成果，用博物馆展览语言全面阐释“神秘贵州”古生物化石承载的地史信息，传播地学知识，增强文化自信，助推生态文明建设，促进人类和谐发展。
</p>
<!-- <p>
《神秘贵州——古生物王国》展览以“主题制”为统领，系统归集贵州近10亿年地质沉积史和6.09亿年生命演化史中的重大事件和重要材料，分为“沉积巨著”“生命源头”“龙的故乡”“陆地寻踪”四部分。
</p>
<p>
......@@ -85,7 +91,7 @@
<span class="main-text"
>“陆地寻踪”：展示贵州彻底抬升为陆地后，侏罗纪至第四纪恐龙的兴衰、哺乳动物的崛起以及古人类的出现，呼吁人们顺应自然，保护自然，与自然和谐相处。</span
>
</p>
</p> -->
</div>
</div>
</div>
......@@ -150,7 +156,7 @@
>
<img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" />
</div>
<div
<!-- <div
class="crs-content-buttons wow animate__animated animate__fadeInUp"
>
<div
......@@ -164,12 +170,16 @@
>
{{ item.name }}
</div>
</div>
<div class="crs-content-imgs wow animate__animated animate__fadeInUp">
</div> -->
<div class="crs-content-swiper">
<swiper :options="swiperOption2" ref="mySwiper">
<swiper-slide v-for="(v, i) in units" :key="i">
<div class="crs-content-imgs">
<div
class="item"
v-for="(item, index) in crPics[curentUnitCrIndex]"
v-for="(item, index) in crPics[i]"
:key="index"
@click="handleToCr(item.crId)"
>
<div class="img-container">
<img :src="item.url" alt="" />
......@@ -177,6 +187,16 @@
<div class="cr-name">{{ item.name }}</div>
</div>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</swiper>
</div>
</div>
</div>
......@@ -195,12 +215,19 @@
<img src="@/assets/imgs/boutique/smgz/5_guide/pic2.png" alt="" />
</div>
</div>
<div
class="guide-content-3d-imgs wow animate__animated animate__fadeInDown"
<div class="vr">
<div class="img-container"></div>
</div>
<!-- <div
class="
guide-content-3d-imgs
wow
animate__animated animate__fadeInDown
"
>
<img src="@/assets/imgs/boutique/smgz/5_guide/pic3.png" alt="" />
</div>
</div> -->
</div>
</div>
......@@ -256,7 +283,7 @@ import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import MDialog from "@/components/MDialog";
import videoPlayer from "@/components/VideoPlayer";
import { crPics } from "../data";
export default {
name: "SMGZ",
components: {
......@@ -287,77 +314,13 @@ export default {
],
curentUnitPicIndex: 0,
curentUnitCrIndex: 0,
unitPics: [["1", "2"], ["1", "2"], ["1", "2"], ["1"]],
crPics: [
[
{
name: "梁氏关岭鱼龙",
index: "1",
url: "http://222.85.214.245:9603/files/2022-09-28-680c2523-d5fd-4994-8b68-4b64591ecc40/low/1.%E6%A2%81%E6%B0%8F%E5%85%B3%E5%B2%AD%E9%B1%BC%E9%BE%99.jpg",
},
{
name: "邓氏贵州鱼龙（模式标本）",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/1/low/2.%E9%82%93%E6%B0%8F%E8%B4%B5%E5%B7%9E%E9%B1%BC%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
{
name: "美丽瓦窑龙（模式标本）",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/2/low/%E7%BE%8E%E4%B8%BD%E7%93%A6%E7%AA%91%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
],
[
{
name: "许氏创孔海百合",
index: "1",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/9/low/8.%E8%AE%B8%E6%B0%8F%E5%88%9B%E5%AD%94%E6%B5%B7%E7%99%BE%E5%90%88%EF%BC%88106%E3%8E%A1%EF%BC%89.jpg",
},
{
name: "黄果树安顺龙",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/25/low/24.%E9%BB%84%E6%9E%9C%E6%A0%91%E5%AE%89%E9%A1%BA%E9%BE%99.jpg",
},
{
name: "杨氏幻龙",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/15/low/14.%E6%9D%A8%E6%B0%8F%E5%B9%BB%E9%BE%99.jpg",
},
],
[
{
name: "梁氏关岭鱼龙",
index: "1",
url: "http://222.85.214.245:9603/files/2022-09-28-680c2523-d5fd-4994-8b68-4b64591ecc40/low/1.%E6%A2%81%E6%B0%8F%E5%85%B3%E5%B2%AD%E9%B1%BC%E9%BE%99.jpg",
},
{
name: "邓氏贵州鱼龙（模式标本）",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/1/low/2.%E9%82%93%E6%B0%8F%E8%B4%B5%E5%B7%9E%E9%B1%BC%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
{
name: "美丽瓦窑龙（模式标本）",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/2/low/%E7%BE%8E%E4%B8%BD%E7%93%A6%E7%AA%91%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
],
[
{
name: "许氏创孔海百合",
index: "1",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/9/low/8.%E8%AE%B8%E6%B0%8F%E5%88%9B%E5%AD%94%E6%B5%B7%E7%99%BE%E5%90%88%EF%BC%88106%E3%8E%A1%EF%BC%89.jpg",
},
{
name: "黄果树安顺龙",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/25/low/24.%E9%BB%84%E6%9E%9C%E6%A0%91%E5%AE%89%E9%A1%BA%E9%BE%99.jpg",
},
{
name: "杨氏幻龙",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/15/low/14.%E6%9D%A8%E6%B0%8F%E5%B9%BB%E9%BE%99.jpg",
},
],
unitPics: [
["1", "2"],
["1", "2"],
["1", "2"],
["1", "2"],
],
swiperOption: {
// loop: true,
// autoplay: {
......@@ -381,10 +344,41 @@ export default {
prevEl: ".swiper-button-prev",
},
},
swiperOption2: {
// effect: "coverflow",
fadeEffect: {
crossFade: true,
},
grabCursor: true,
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
sildeChage: function () {
console.log(this.$refs.mySwiper.swiper);
//滑块改变时
//this.$refs.mySwiper.swiper里是有一个realIndex
//不确定的可以console.log(this.$refs.mySwiper.swiper)
//往往我们会误会拿currentIndex，其实realIndex才是它真实的索引值，currentIndex是页面上查看元素时所运行起来展示的索引
},
},
},
showVideo: false,
src: "",
};
},
computed: {
crPics() {
return crPics;
},
},
watch: {
curentUnitPicIndex(value) {
console.log(this.unitPics[value]);
......@@ -417,19 +411,34 @@ export default {
behavior: "smooth", // 平滑移动
});
},
handleClikeVideo(video) {
// this.$message.info("视频暂未上架，请稍候~");
this.src = `static/video/${video}`;
this.$nextTick(() => {
this.showVideo = true;
});
},
handleToCr(crId) {
if (crId) {
const newPage = this.$router.resolve({
path: "culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
}
},
},
};
</script>
<style lang="scss" scoped>
@function sWidth($width) {
@return $width * 1.2 + px;
}
@function sHeight($height) {
@return $height * 0.8 + px;
}
// 公共样式
.smgz-item {
position: relative;
......@@ -444,12 +453,20 @@ export default {
}
}
@function sWidth($width) {
@return $width * 1.2 + px;
}
@function sHeight($height) {
@return $height * 0.8 + px;
.swiper-button-next,
.swiper-button-prev {
background-image: none;
border: 5px solid #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bolder;
}
// 公共样式结束
.smgz {
......@@ -508,7 +525,7 @@ export default {
background-image: url("@/assets/imgs/boutique/smgz/2_intro/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
overflow:visible;
overflow: visible;
// .bg {
// width: 100%;
// height: sHeight(1620);
......@@ -550,11 +567,18 @@ export default {
font-size: 28px;
font-weight: 800;
color: #292b2d;
line-height: 33px;
line-height: 36px;
display: flex;
justify-content: center;
}
.main {
.main-text {
font-size: 16px;
font-weight: 600;
color: #292b2d;
line-height: 40px;
font-family: PingFang SC;
}
& > p {
font-size: 16px;
font-weight: 600;
......@@ -635,32 +659,19 @@ export default {
border: 3px solid #fff;
box-shadow: 0px 12px 30px 0px #051730;
border-radius: 4px;
background: #3b4982;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: contain;
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
border: 5px solid #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bolder;
}
}
}
}
.crs {
height: 1100px;
height: 1000px;
.crs-content {
width: 100%;
height: 100%;
......@@ -676,37 +687,45 @@ export default {
.crs-content-title {
margin-bottom: 70px;
}
.crs-content-buttons {
display: flex;
.button-item {
margin: 0 70px;
height: sHeight(112);
padding: 0 sWidth(40);
// .crs-content-buttons {
// display: flex;
// .button-item {
// margin: 0 70px;
// height: sHeight(112);
// padding: 0 sWidth(40);
// display: flex;
// align-items: center;
// background: #3b4982;
// font-size: 30px;
// font-family: PingFang SC;
// font-weight: 800;
// color: #ffffff;
// cursor: pointer;
// border: 2px solid transparent;
// }
// .button-item:hover,
// .active {
// background: #141c3c;
// border: 2px solid #ffffff;
// box-shadow: 0px 12px 30px 0px #051730;
// }
// }
.crs-content-swiper {
width: 80%;
margin-top: 88px;
.swiper-container {
height: sHeight(600);
.swiper-slide {
display: flex;
align-items: center;
background: #3b4982;
font-size: 30px;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
cursor: pointer;
border: 2px solid transparent;
}
.button-item:hover,
.active {
background: #141c3c;
border: 2px solid #ffffff;
box-shadow: 0px 12px 30px 0px #051730;
}
}
justify-content: center;
.crs-content-imgs {
margin-top: 88px;
// margin-top: 88px;
display: flex;
// justify-content: center;
.item {
.img-container {
width: 500px;
height: 460px;
width: 400px;
height: sHeight(460);
margin: 0 18px;
background-color: #fff;
overflow: hidden;
......@@ -737,6 +756,19 @@ export default {
}
}
// .img-container {
// width: 80%;
// height: 100%;
// img {
// width: 100%;
// height: 100%;
// object-fit: contain;
// }
// }
}
}
}
.guide {
height: 1700px;
.guide-content {
......
src/views/boutique/data.js 0 → 100644
浏览文件 @ 3bc56aad
export var crPics = [
[
{
name: "梁氏关岭鱼龙",
crId: "e9ce56605b774c0385473cdb08edcee7",
index: "1",
url: "http://222.85.214.245:9603/files/2022-09-28-680c2523-d5fd-4994-8b68-4b64591ecc40/low/1.%E6%A2%81%E6%B0%8F%E5%85%B3%E5%B2%AD%E9%B1%BC%E9%BE%99.jpg",
},
{
name: "邓氏贵州鱼龙（模式标本）",
crId: "dac1984d5ca74f48b6183ff4525f180c",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/1/low/2.%E9%82%93%E6%B0%8F%E8%B4%B5%E5%B7%9E%E9%B1%BC%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
{
name: "美丽瓦窑龙（模式标本）",
crId: "adabb46a077e48a98d57135f6c640d65",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/2/low/%E7%BE%8E%E4%B8%BD%E7%93%A6%E7%AA%91%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
},
],
[
{
name: "许氏创孔海百合",
crId: "fffa08c7843544b89abf1f053d2f10dc",
index: "1",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/9/low/8.%E8%AE%B8%E6%B0%8F%E5%88%9B%E5%AD%94%E6%B5%B7%E7%99%BE%E5%90%88%EF%BC%88106%E3%8E%A1%EF%BC%89.jpg",
},
{
name: "黄果树安顺龙",
crId: "675dc67d064440f4aa5e51548e9a3c24",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/25/low/24.%E9%BB%84%E6%9E%9C%E6%A0%91%E5%AE%89%E9%A1%BA%E9%BE%99.jpg",
},
{
name: "杨氏幻龙",
crId: "60749f07723842cf85e2493978c761f4",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/15/low/14.%E6%9D%A8%E6%B0%8F%E5%B9%BB%E9%BE%99.jpg",
},
],
///
[
{
name: "兴义欧龙",
crId: "5b4536ede4494a8f97113b6712575c56",
index: "1",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/14/low/13.兴义欧龙.jpg",
},
{
name: "盘县混鱼龙",
crId: "09690224efc440d5bc54d11d1a961625",
index: "2",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/32/low/30.盘县混鱼龙.jpg",
},
{
name: "东方恐头龙",
crId: "1f48d2c232b74f0ab0037f99a07a1c4d",
index: "3",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/24/low/23.东方恐头龙.jpg",
},
],
[
{
name: "孙氏新铺龙（模式标本 副型）",
crId: "25d19df6dedc4df794026e134df6ff3e",
index: "1",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/5/low/5.孙氏新铺龙（模式标本）.png",
},
{
name: "乌沙安顺龙",
crId: "2bfefcd0a262402297bd2b1c43766e8f",
index: "2",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/16/low/16.乌沙安顺龙.jpg",
},
{
name: "羊圈幻龙",
crId: "5bf5a31036f2446ba346dd5f1a47c028",
index: "3",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/13/low/12.羊圈幻龙.jpg",
},
],
]
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论