Skip to content

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

完善3D模型列表页，增加3D模型详情页

上级 9f7935b0
显示空白字符变更
内嵌 并排
正在显示 包含 653 行增加 和 45 行删除
src/App.vue
浏览文件 @ 16259dd0
......@@ -19,7 +19,7 @@ export default {
data() {
return {
headerFixed: false,
whiteList: [""], //不需要nav或者footer的路由页面
whiteList: ["3dDetail"], //不需要nav或者footer的路由页面
};
},
mounted() {
......
src/icons/svg/cloud.svg 0 → 100644
浏览文件 @ 16259dd0
<?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="1697703877249" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24503" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M1022 236.61c-9.63 39.93-17 62-52 95.92-11.52 11.19-28 18-44.7 44.5a262 262 0 0 1-75.26 74.66c-56.45 36.9-119.52 57-184.39 72.62-30.4 7.33-61.65 9.65-92.15 16.27-36.89 8-71.32 23.83-107.57 33.93-23.47 6.54-95.52 17-154.38 1.82-42-10.86-76.94-42-88.93-59-19.48-27.6-30-74.94-9-99.92 10.7-12.75 4.81-19.81 1.84-35.5-11.71-61.78 40.31-117.3 102.58-109.14 10.67 1.39 17.49-1.15 24.33-8.53 11.74-12.66 31.11-22.69 51.1-21.69 43 4 58.71 20 80 49.91 5.23 7.33 11.2 13.08 20.07 14.69 23.86 4.35 46.16 22.06 53.83 46.31 8.81 27.85-1 64.95-32 76.94-8 4-6.89 5.08-11 17-10 29-47.74 36.84-78.9 26.78-2.18-0.7-2.87-0.16-5 0.2-23.19 3.89-43.94-11.09-49-34.18-4.16-19 5.92-32.74 14.79-47.19 2.16-3.54 7.23-7.56 9.5-6.46 4.73 2.28 0.31 6.92-1 10.26-7.46 18.86 2.81 37.71 21.63 36.77 19.11-1 39-5.73 48.06-24.15s4.28-40.76-9-54.95c-29-31-94.11-34.44-128.52-2.62-19.93 18.43-24.36 43.59-18.36 72.56 9 28.6 23.87 48.66 48 64.95 47.52 32.13 100.22 33.84 155.87 35 46.3 0.94 98.61-6.12 143.88-16 61.68-13.44 97.1-24.7 151.88-57 28-16.49 89.25-66.4 84.93-72.94s-39 18-66 18c-57.28 0-98.87-7.44-135.23-54.53-11.79-15.26-20.91-32.22-31.47-48.26-16.36-24.83-39.49-39.1-68.26-45.41-29.46-6.46-58.7-4.37-87.84 1.35-11.46 2.25-20.68 1.53-27.59-9.58a149.8 149.8 0 0 0-24.3-29.42c-21.38-19.43-75.57-44.68-134.89-47-52-2-99.06 16-110.91 21-55.95 30-95.29 82.62-98 154.27-0.72 19-8.38 31.86-26.26 39.76-28.6 12.63-48.29 34.57-60.9 63-18.56 42-24.89 85.65-19.77 131.25 6.45 57.47 26.41 108.39 71 147.12 28.29 24.58 60.5 40.69 99.1 42 28.49 0.94 54.69-7.19 80.6-17.44 17.64-7 18-7 25.18 10.13 14.7 35.17 38.19 62.11 72.34 79.58A235.08 235.08 0 0 0 479 859.59c30-2.55 57.35-13.22 80.13-33.81 39-35.22 44.45-81.45 42.54-130-0.44-11.23-2.12-22.41-3.27-34a33.43 33.43 0 0 1 4.21 0.65c3.05 1 6.07 2 9.08 3.09 39.05 14 78.73 21 120.26 12.86 97.64-19.25 126.6-107.36 116-176.09-1.11-7.24-4.77-9.41-11.73-7.23a51.32 51.32 0 0 0-26.63 18.71c-8.66 11.72-16.8 23.83-25.13 35.8-17.65 25.37-37.94 48.2-64.86 64-27.29 16-56.6 21.09-87.1 11.13-24.72-8.07-30.14-27.59-14.87-48.49 5.83-8 13-14.13 22.05-17.94 13-5.45 30.58-1.62 38.24 8 4.38 5.53 4.81 11.07 0 16.35-5.12 5.55-10.72 10.2-19 5.85a5.81 5.81 0 0 1 3.8-4.49c4.08-1.86 8.24-5 7.34-9.4-1-4.77-6.3-6.52-10.88-7.45-12.09-2.44-22.24 1.9-29.35 11.3-13.46 17.81-6.67 32.11 16.52 37.79 20.26 5 35 3.15 54.18-5 30.16-12.8 51.86-35.62 71.09-61.27 11.93-15.92 21.36-33.69 35.57-48 13.55-13.6 28.61-22.21 48-18.69 11 2 24.64 3.47 30 3 34-3 49-18.73 68.95-39 23.52-23.84 46.54-51.72 57.95-90.92 15.83-54.51 12.08-117.55 9.91-119.73zM520 608.73c-0.34 3.33-4.56 2.65-7.27 2.53C442 608.16 377 629.72 313.1 657c-41.07 17.56-83.39 31.61-129 30.84-62.09-1-106.38-47.53-104.5-109.65 0.42-13.91 3.36-27.44 11.69-39.08 13.41-18.73 32-25 54.1-20.92 20.74 3.87 40.43 25.23 44.61 46.61 2.54 13 1.64 25.29-5.49 36.69-6.22 10-15.74 14.6-27 13.32-12.89-1.46-22.51-8.76-26.45-21.5-5-16 9.59-31 26.91-27.41-1.18 3.75-3.93 3.93-6.05 5-7.39 3.63-11.84 9.45-10.69 17.77 1.29 9.29 8.06 14 16.76 15.22 8.07 1.18 14.35-2.34 18.41-9.55 8.81-15.61 2-42.7-14-55.7-13.45-10.94-28.72-14.44-44.68-7.78-19.74 8.24-26.57 25.87-27.35 45.56-2 49.77 27.42 99 93.56 100.83 41.86 1.19 80.77-12 119.05-27C341.83 635 380 618 421.32 610.38c30.3-5.59 60.69-10.17 91.61-5.58 2.83 0.42 7.57-0.71 7.07 3.93z" fill="#D0BE92" p-id="24504"></path><path d="M971.77 407.61c0.39 3.54-1.61 4.8-4.5 5.76-0.4-3.55 1.62-4.8 4.5-5.76z" fill="#D0BE92" p-id="24505"></path></svg>
\ No newline at end of file
src/icons/svg/mouse2.svg 0 → 100644
浏览文件 @ 16259dd0
<?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="1697706570225" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2673" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M616 64H408c-119.3 0-216 96.71-216 216v360c0 176.73 143.27 320 320 320s320-143.27 320-320V280c0-119.29-96.71-216-216-216z m168 576a272 272 0 1 1-544 0V280a168 168 0 0 1 168-168h92v113.3a56 56 0 0 0-44 54.7v80a56 56 0 0 0 112 0v-80a56 56 0 0 0-44-54.7V112h92a168 168 0 0 1 168 168zM512 238a42 42 0 0 1 42 42v80a42 42 0 0 1-84 0v-80a42 42 0 0 1 42-42z" p-id="2674"></path></svg>
\ No newline at end of file
src/icons/svg/pen.svg 0 → 100644
浏览文件 @ 16259dd0
<?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="1697706563782" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2522" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M952.905948 257.137938l-487.760107 481.546603c3.829253 35.330276-1.264376 79.475058-36.955902 115.63621-40.60453 41.146405-218.33966 135.938475-369.125521-31.320398 0 0 72.647428 3.179002 100.246949-59.461794 36.052776-118.164962 119.646088-139.587102 180.083257-138.214351L832.60961 138.431101c33.126649-32.765399 87.025189-32.765399 120.260213 0 33.162774 32.765399 33.162774 85.941438 0.036125 118.706837z m-748.149298 524.896635C185.176886 822.566852 159.311367 842.796867 159.311367 842.796867c74.309179 56.644041 200.493897-1.842376 228.815917-27.96077 49.997037-46.348409 20.41064-98.621322 20.013265-98.982573l-40.062654-39.629154c0 0.036125-116.611585-18.351513-163.321245 105.810203z m243.446553-105.774078l60.184294-59.353418-40.062654-39.593029-60.184294 59.353418c0-0.036125 36.414027 35.944401 40.062654 39.593029zM912.734919 178.02413c-11.018133-11.018133-28.972271-11.018133-40.062655 0l-364.284767 359.624639 40.062655 39.593029 364.284767-359.733014a27.52727 27.52727 0 0 0 0-39.484654z" p-id="2523"></path></svg>
\ No newline at end of file
src/icons/svg/power-off.svg 0 → 100644
浏览文件 @ 16259dd0
<?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="1697706575619" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2824" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"><path d="M512 920.917333c-225.28 0-408.917333-183.637333-408.917333-408.917333 0-174.762667 110.592-330.410667 275.797333-386.389333 10.922667-3.413333 22.528 2.048 25.941333 12.970666 3.413333 10.922667-2.048 22.528-12.970666 25.941334C243.029333 215.04 143.36 354.986667 143.36 512.682667c0 202.752 165.205333 367.957333 367.957333 367.957333s367.957333-165.205333 367.957334-367.957333c0-157.696-99.669333-296.96-248.490667-348.16-10.922667-3.413333-16.384-15.018667-12.970667-25.941334 3.413333-10.922667 15.018667-16.384 25.941334-12.970666 165.205333 55.978667 275.797333 211.626667 275.797333 386.389333 1.365333 225.28-182.272 408.917333-407.552 408.917333z" p-id="2825"></path><path d="M512 532.48c-11.605333 0-20.48-8.874667-20.48-20.48V123.562667c0-11.605333 8.874667-20.48 20.48-20.48s20.48 8.874667 20.48 20.48V512c0 11.605333-8.874667 20.48-20.48 20.48z" p-id="2826"></path></svg>
\ No newline at end of file
src/router/index.js
浏览文件 @ 16259dd0
......@@ -181,13 +181,18 @@ const routes = [
component: () =>
import("@/views/boutique/components/lzsg/index.vue"),
},
// 3d展示页面，仅供测试用
{
path: "/3d",
name: "3d",
component: () =>
import("@/views/3d/index.vue"),
},
{
path: "/3d/:id",
name: "3dDetail",
component: () =>
import("@/views/3d/detail.vue"),
},
// 404
{
path: "*",
......
src/views/3d/detail.vue
浏览文件 @ 16259dd0
<template>
<div class="container-3d">
<Viewer3d backgroundcolor="linear(0, 0, 0,40%)" />
<div class="left-text">
<div>多彩贵州</div>
<div>博物<br />盛筵</div>
</div>
<div class="top">
<div class="name">【{{ crInfo.name }}】</div>
<div class="deptName">
<svg-icon icon-class="cloud"></svg-icon>
<span>{{ crInfo.deptName }}</span>
<svg-icon icon-class="cloud"></svg-icon>
</div>
</div>
<div class="bottom">
<div class="current-content">{{ currentButton.value }}</div>
<div class="buttons">
<div
@click="handleChangeButton(item)"
:class="[
'button-item',
currentButton.value == item.value ? 'active' : '',
]"
v-for="(item, index) in buttons"
:key="index"
>
<svg-icon icon-class="wenshi1"></svg-icon>
<div class="text">{{ item.label }}</div>
</div>
</div>
</div>
<div class="right-top" @click="handleOpenIntro">
<svg-icon icon-class="pen"></svg-icon>
<div>简介</div>
</div>
<div class="right-bottom">
<div class="icon" @click="handelExit">
<svg-icon icon-class="power-off"></svg-icon>
<span>退出</span>
</div>
<div class="icon">
<svg-icon icon-class="mouse2"></svg-icon>
<span>放大、缩小</span>
</div>
</div>
<div class="fixed" v-show="showIntro">
<div class="intro-container">
<div class="name">{{ crInfo.name }}</div>
<div class="intro" style="overflow-x: hidden">
<el-scrollbar style="height: 100%">
{{ crInfo.intro }}
</el-scrollbar>
</div>
<div class="close" @click="handleCloseIntro">
<i class="el-icon-close"></i>
</div>
</div>
</div>
</div>
</template>
<script>
import Viewer3d from "@/components/Viewer3d";
export default {
components: { Viewer3d },
data() {
return {
crInfo: {
name: "兴义欧龙",
deptName: "贵州省地质博物馆",
year: "中三叠纪",
type: "古生物化石",
size: "板250cm×160cm， 龙长240cm",
intro:
"1976年贵州省博物馆收购的“尘定轩”斗彩山水人物盖碗，通高6.8厘米，口径6.7厘米，足径2.7厘米。敞口，圈足，盖可作倒置小碟，盖顶圈钮。此盖碗体形小巧玲珑，轻盈雅致。胎白细腻，釉色白中闪青，釉下绘青花高温烧制，釉上填彩低温烘烧，绘制处以手摸之，有凸出感。碗外壁绘唐杜牧“停车坐爱枫林晚”诗意图。一老人坐石上看枫树，一童子倚立车后，盖上绘山水，绘工细致、精湛。底足内及盖钮内有青花楷书“尘定轩”三字款，字体工整。此器据原收藏人石朴（石赞清的侄孙女）介绍，为清同治御用品，赏赐给石赞清。石赞清，贵阳人，生于清嘉庆十年（公元1805————公元1869年）。清道光十五年（公元1835年）中举人，清道光十八年（公元1838年）中进士，曾任天津府知府，工部右侍郎等职。因其无子，故将此器赠给其侄，后传给其侄孙女保存。这件传承清晰的文物具有重要历史价值，也是了解道光时期景德镇瓷器生产状况不可多得的实物资料。",
},
currentButton: {
label: "年代",
value: "中三叠纪",
},
buttons: [
{
label: "年代",
value: "中三叠纪",
},
{
label: "尺寸",
value: "板250cm×160cm， 龙长240cm",
},
],
showIntro: false,
};
},
mounted() {
console.log(this.$router);
},
methods: {
handleChangeButton(item) {
this.currentButton = item;
},
handleOpenIntro() {
this.showIntro = true;
},
handleCloseIntro() {
this.showIntro = false;
},
handelExit() {
this.$router.push("/3d");
},
},
};
</script>
<style scoped lang="scss">
$deep-yellow: #e7ba40;
$yellow: #e4d1ac;
$custom-font-family: "KaiTi" $siyuan-song-bold;
.container-3d {
width: 100%;
height: 100vh;
background-color: #011c4a;
position: relative;
.left-text {
position: absolute;
left: 0;
top: 0;
font-family: $custom-font-family;
& > div {
color: rgba($color: $deep-yellow, $alpha: 0.1);
&:nth-child(1) {
font-size: 140px;
writing-mode: vertical-lr;
}
&:nth-child(2) {
font-size: 70px;
padding-left: 16px;
letter-spacing: 4px;
}
}
}
.top {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
color: $deep-yellow;
font-family: $custom-font-family;
.name {
font-size: 46px;
margin-bottom: 8px;
}
.deptName {
font-size: 24px;
color: $yellow;
.svg-icon {
margin: 0 8px;
}
}
}
.bottom {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: $custom-font-family;
font-size: 18px;
.current-content {
height: 40px;
display: flex;
align-items: center;
padding: 0 120px;
color: $deep-yellow;
margin-bottom: 16px;
background: linear-gradient(
270deg,
rgba(216, 216, 216, 0) 0%,
rgba(191, 215, 255, 0.4) 51%,
rgba(216, 216, 216, 0) 100%
);
}
.buttons {
display: flex;
color: $yellow;
justify-content: space-between;
width: 180px;
.button-item {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
cursor: pointer;
&:hover {
color: $deep-yellow;
}
.svg-icon {
font-size: 24px;
}
.text {
position: relative;
&:after {
content: "";
position: absolute;
right: -38px;
top: 50%;
width: 32px;
height: 4px;
background: linear-gradient(
270deg,
rgba(216, 216, 216, 0) 3%,
$yellow 100%
);
}
&:before {
content: "";
position: absolute;
left: -38px;
top: 50%;
width: 32px;
height: 4px;
transform: rotate(180deg);
background: linear-gradient(
270deg,
rgba(216, 216, 216, 0) 3%,
$yellow 100%
);
}
}
}
.active {
color: $deep-yellow;
}
}
}
.right-top {
position: absolute;
right: 40px;
top: 40px;
color: $deep-yellow;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: $custom-font-family;
.svg-icon {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid $deep-yellow;
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
margin-bottom: 16px;
cursor: pointer;
}
}
.right-bottom {
position: absolute;
right: 40px;
bottom: 40px;
color: #fff;
font-family: $custom-font-family;
.icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 32px;
&:nth-child(1) {
cursor: pointer;
}
}
.svg-icon {
font-size: 60px;
}
}
.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
.intro-container {
width: 50vw;
height: 50vh;
background: linear-gradient(180deg, #604614 0%, #272215 100%);
border-radius: 6px;
position: relative;
padding: 40px;
color: $deep-yellow;
font-family: $custom-font-family;
line-height: 2;
font-size: 20px;
.name {
font-size: 24px;
text-align: center;
}
.intro {
height: calc(100% - 40px);
text-indent: 32px;
}
&::after {
position: absolute;
left: 20px;
top: 20px;
content: "";
width: calc(50vw - 40px);
height: calc(50vh - 40px);
border: 1px dashed $deep-yellow;
border-radius: 6px;
}
.close {
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
border: 1px solid $deep-yellow;
border-radius: 50%;
padding: 8px;
width: 40px;
height: 40px;
color: $deep-yellow;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
}
}
}
::v-deep .el-scrollbar__wrap {
overflow: hidden;
}
</style>
src/views/3d/index.vue
浏览文件 @ 16259dd0
......@@ -9,64 +9,123 @@
</div>
</div>
<div class="imgs">
<div class="crs">
<div class="left">
<div class="common-bg-name">
<div class="icon">
<img :src="Icon3D" />
<img :src="icon3D" />
</div>
<div class="name">清琥珀长命锁</div>
<div class="name">{{ leftImg.name }}</div>
</div>
<img :src="leftImg.url" class="cr-img" />
</div>
<div class="center">
<img :src="centerImg.url" />
<div class="content">
<div class="name">{{ centerImg.name }}</div>
<img class="line" :src="line" />
<div class="year">{{ centerImg.year }}</div>
<div class="desc">{{ centerImg.desc }}</div>
</div>
<img :src="leftImg" />
</div>
<div class="center"></div>
<div class="right">
<img :src="rightImg.url" class="cr-img" />
<div class="common-bg-name">
<div class="icon">
<img :src="Icon3D" />
<img :src="icon3D" />
</div>
<div class="name">{{ rightImg.name }}</div>
</div>
</div>
<div class="left-bottom">
<img :src="leftLineDraft.url" class="cr-img" />
<div class="common-cr-intro">
<img :src="dot" class="dot" />
<div class="name" :style="{ backgroundImage: greyBg }">
{{ leftLineDraft.name }}
</div>
</div>
<div class="name">斗彩山水人物盖碗</div>
</div>
<img :src="rightImg" />
<div class="right-bottom">
<img :src="rightLineDraft.url" class="cr-img" />
<div class="common-cr-intro right">
<div class="name" :style="{ backgroundImage: greyBg }">
{{ rightLineDraft.name }}
</div>
<img :src="dot" class="dot" />
</div>
</div>
<div class="crs"></div>
</div>
</div>
<div class="list">
<div class="comon-title">
<div class="comon-title blue">
<div class="ch">三维列表</div>
<div class="en">
<span>3D list</span>
<svg-icon icon-class="right"></svg-icon>
</div>
</div>
<div class="list-group">
<el-row>
<el-col
:span="6"
v-for="(item, index) in 8"
:key="index"
class="list-item"
@click.native="handleOpen3d(item)"
>
<div class="list-item-img" :style="{ backgroundImage: listBg }">
<img :src="centerImg.url" />
</div>
<div class="list-item-name">{{ centerImg.name }}</div>
<div class="list-item-icon">
<img :src="icon3D" alt="" />
</div>
</el-col>
</el-row>
</div>
<!-- <div class="box">
<Viewer3d backgroundcolor="0, 0, 0,40%" />
<div class="close">
<i class="el-icon-close"></i>
</div>
</div> -->
</div>
</template>
<script>
// import Viewer3d from "@/components/Viewer3d";
export default {
// components: { Viewer3d },
data() {
return {
title: "",
Icon3D: require("@/assets/imgs/3d/circle.png"),
leftImg: require("@/assets/imgs/3d/2.png"),
rightImg: require("@/assets/imgs/3d/4.png"),
centerImg: require("@/assets/imgs/3d/1.png"),
leftLineDraft: require("@/assets/imgs/line-draft/6.png"),
rightLineDraft: require("@/assets/imgs/line-draft/3.png"),
leftImg: {
url: require("@/assets/imgs/3d/2.png"),
name: "清琥珀长命锁",
},
rightImg: {
url: require("@/assets/imgs/3d/4.png"),
name: "斗彩山水人物盖碗",
},
centerImg: {
url: require("@/assets/imgs/3d/1.png"),
name: "螭首金杯、金盘",
year: "南宋(1127~1279)",
desc: "金杯系夹层，双螭缠绕其上，两螭首对称探出杯口成杯柄。承盘纹饰与金杯呼应，盘心为翻涌的浪花，双螭盘旋，口尾互衔。金杯、金盘共同构成教子升天纹。教子升天纹是宋代已降流行的纹饰，由天上的大龙和海水中的小龙组成，通过大龙呼唤小龙升天来借喻父母望子成龙的愿望，也可祝人高升。",
},
icon3D: require("@/assets/imgs/3d/circle.png"),
leftLineDraft: {
url: require("@/assets/imgs/line-draft/6.png"),
name: "清道光“尘定轩”斗彩山水人物盖碗",
},
rightLineDraft: {
url: require("@/assets/imgs/line-draft/3.png"),
name: "清圆雕白玉太白像",
},
dot: require("@/assets/imgs/3d/dot.png"),
greyBg: `url(${require("@/assets/imgs/3d/bg.png")})`,
bgCircle: `url(${require("@/assets/imgs/3d/bg-circle.png")})`,
line: require("@/assets/imgs/3d/line.png"),
listBg: `url(${require("@/assets/imgs/3d/bg-circle.png")})`,
};
},
methods: {},
methods: {
handleOpen3d(item) {
const newPage = this.$router.resolve({ path: "/3d/" + item });
window.open(newPage.href, "_blank");
},
},
};
</script>
......@@ -80,7 +139,7 @@ export default {
justify-content: center;
}
.ch {
font-size: 18px;
font-size: 22px;
}
.en {
font-size: 14px;
......@@ -90,23 +149,56 @@ export default {
}
}
}
.common-bg-name{
.icon{
.blue {
color: $deep-blue;
}
.common-bg-name {
&:nth-child(2) {
transform: translateX(60px);
}
&:nth-child(2) {
transform: translateX(-80px);
}
.icon {
width: 40px;
height: 40px;
img{
margin-bottom: 16px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.name{
.name {
background-color: $deep-blue;
width: 40px;
padding: 10px;
color: #fff;
}
}
.common-cr-intro {
display: flex;
align-items: center;
transform: translate(200px, 200px);
.dot {
width: 20px;
height: 20px;
}
.name {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 41px;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #fff;
font-size: 14px;
}
}
.common-cr-intro.right {
transform: translate(-240px, 160px);
}
.three {
min-height: 1000px !important;
width: 100%;
......@@ -117,4 +209,138 @@ export default {
.list {
padding: 100px 0;
}
.imgs {
position: relative;
display: flex;
justify-content: space-between;
padding: 0 100px;
.left,
.right {
display: flex;
.cr-img {
width: 400px;
height: 400px;
object-fit: contain;
cursor: pointer;
}
}
.left {
.cr-img {
transform: translateY(100px);
}
}
.right {
.cr-img {
width: 600px;
height: 600px;
}
}
.center {
width: 900px;
height: 900px;
transition: all ease 0.5s;
transform: translate(100px, 0px);
cursor: pointer;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.content {
position: absolute;
bottom: 0px;
.name {
font-size: 28px;
text-align: center;
width: 100%;
margin-bottom: 16px;
}
.year {
width: 100%;
text-align: center;
font-size: 14px;
margin-bottom: 16px;
}
.line {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
object-fit: contain;
margin-bottom: 16px;
}
.desc {
color: $deep-blue;
line-height: 1.8;
font-size: 14px;
text-align: center;
}
}
}
.left-bottom,
.right-bottom {
position: absolute;
top: 500px;
.cr-img {
position: absolute;
left: -100px;
}
}
.right-bottom {
right: 0;
top: 600px;
.cr-img {
width: 300px;
height: 300px;
object-fit: contain;
}
}
}
.list-group {
padding: 100px 8%;
.list-item {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-bottom: 32px;
position: relative;
.list-item-img {
width: 400px;
height: 300px;
display: flex;
justify-content: center;
margin-bottom: 16px;
background-size: contain;
background-position-x: 45%;
background-repeat: no-repeat;
padding: 40px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.list-item-name {
display: flex;
justify-content: center;
color: $deep-blue;
}
.list-item-icon {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
img {
width: 100%;
height: 100%;
}
}
}
}
</style>
src/views/boutique/components/lzsg/index.vue
浏览文件 @ 16259dd0
......@@ -30,7 +30,7 @@
data-wow-delay="0.5s"
>
<div>
<img src="@/assets/imgs/topic/lzsg/txt-bg.png" alt=""/>
<img src="@/assets/imgs/topic/lzsg/txt-bg.png" alt="" />
<div class="content">
<nav>六枝原则</nav>
<p v-for="node in principles">{{ node }}</p>
......@@ -51,20 +51,33 @@
/>
<div class="content">
<div class="title wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
<div
class="title wow animate__animated animate__fadeInUp"
data-wow-delay="0.5s"
>
<img src="@/assets/imgs/topic/lzsg/yc.png" alt="" />
</div>
<div class="tabs wow animate__animated animate__bounceIn" data-wow-delay="0.5s">
<div
class="tabs wow animate__animated animate__bounceIn"
data-wow-delay="0.5s"
>
<ul>
<li v-for="(node, i) in details" :key="i">
<div class="detail-card" :class="{active: node.title === curNode.title }" @click="handleDetailChange(node)">
<div
class="detail-card"
:class="{ active: node.title === curNode.title }"
@click="handleDetailChange(node)"
>
<!-- <img src="@/assets/imgs/topic/lzsg/tab.png" alt="" /> -->
<span>{{ node.title }}</span>
</div>
</li>
</ul>
</div>
<div class="detail wow animate__animated animate__fadeInRight" data-wow-delay="0.5s">
<div
class="detail wow animate__animated animate__fadeInRight"
data-wow-delay="0.5s"
>
<div class="desc">
{{ curNode.desc }}
</div>
......@@ -95,7 +108,11 @@
</div>
<!-- 第三部分 -->
<div class="part-3">
<img src="@/assets/imgs/topic/lzsg/community.png" alt="" class="bg wow animate__animated animate__fadeIn" />
<img
src="@/assets/imgs/topic/lzsg/community.png"
alt=""
class="bg wow animate__animated animate__fadeIn"
/>
<img
src="@/assets/imgs/topic/lzsg/community-color.png"
alt=""
......@@ -106,7 +123,7 @@
<div class="title wow animate__animated animate__fadeInUp">
<img src="@/assets/imgs/topic/lzsg/sqfz.png" alt="" />
</div>
<p class=" wow animate__animated animate__fadeIn">
<p class="wow animate__animated animate__fadeIn">
自建立生态博物馆以来，长角苗社区文化遗产和自然遗产得到了整体保护，社区经济不断发展，基础设施建设不断完善，文化教育水平不断提高，科学知识不断增强，文化交流不断扩大，社区居民生活水平不断得到完善。
</p>
<div class="swiper-area wow animate__animated animate__fadeInUp">
......@@ -131,7 +148,11 @@
</div>
<!-- 第四部分 -->
<div class="part-4">
<img src="@/assets/imgs/topic/lzsg/bg3.png" alt="" class="wow animate__animated animate__fadeIn" />
<img
src="@/assets/imgs/topic/lzsg/bg3.png"
alt=""
class="wow animate__animated animate__fadeIn"
/>
<div class="content">
<div class="title wow animate__animated animate__fadeInUp">
......@@ -181,7 +202,7 @@
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import summary from './data.json'
import summary from "./data.json";
export default {
components: {
......@@ -241,9 +262,9 @@ export default {
},
methods: {
handleDetailChange(node) {
this.curNode = node
}
}
this.curNode = node;
},
},
};
</script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论