Skip to content

E
exhibition_page
提交 500f4865 authored 作者: Anix's avatar Anix
浏览文件
操作

文物页、首页、精品展首屏布局修改

上级 77b2b159
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 360 行增加 和 25 行删除
src/assets/imgs/banner.png 0 → 100644
浏览文件 @ 500f4865
差异被折叠。
src/assets/imgs/gray.jpg 0 → 100644
浏览文件 @ 500f4865
差异被折叠。
src/assets/imgs/topic/smgz/dzbwg.png 0 → 100644
浏览文件 @ 500f4865
差异被折叠。
src/components/ReaderOperations/like.vue
浏览文件 @ 500f4865
......@@ -2,13 +2,21 @@
<span>
<span class="operations">
<span class="operation-item">
<svg-icon
<!-- <svg-icon
@click="handleLike"
:icon-class="loveCountStatus ? 'like-s' : 'like'"
:style="{
fontSize: iconSize + 'px',
color: loveCountStatus ? selectColor : '#61666d',
}"
></svg-icon> -->
<svg-icon
@click="handleLike"
:icon-class="loveCountStatus ? 'like-s' : 'like'"
:style="{
fontSize: iconSize + 'px',
color: loveCountStatus ? selectColor : '#ddd',
}"
></svg-icon>
<span>{{
formatNum(loveCount) == 0 ? "点赞" : formatNum(loveCount)
......
src/components/SlideImage/slider.vue 0 → 100644
浏览文件 @ 500f4865
<template>
<div class="card-slider">
<div class="swiper">
<swiper
class="swiper gallery-top"
:options="swiperOptionTop"
ref="swiperTop"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in imgList"
:key="index"
>
<img :src="item.pressUrl" alt="" />
<!-- <div class="enlarge" @click="handelPreviewImages(imgList)">
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> -->
</swiper-slide>
</swiper>
</div>
<!-- <el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="previewList"
/> -->
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
name: "SlideImage",
components: {
swiper,
swiperSlide,
/* "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), */
},
props: {
imgKey: {
type: String,
default: "pressUrl",
},
imgList: {
type: Array,
default: () => [],
},
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
imgViewerVisible: false,
};
},
/* mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.swiper;
const swiperThumbs = this.$refs.swiperThumbs.swiper;
swiperTop.controller.control = swiperThumbs;
swiperThumbs.controller.control = swiperTop;
});
}, */
methods: {
handelPreviewImages(items) {
this.imgViewerVisible = true;
this.previewList = items.map((item) => this.$getFullUrl(item.url));
},
closeImgViewer() {
this.imgViewerVisible = false;
},
},
};
</script>
<style lang="scss" scoped>
.card-slider {
width: 100%;
height: 100%;
.slide-item {
background: transparent;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
</style>
src/views/boutique/index.vue
浏览文件 @ 500f4865
......@@ -10,7 +10,7 @@
</li>
</ul>
</div> -->
<ul class="fixed-tabs">
<!-- <ul class="fixed-tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div class="tab-container">
<img
......@@ -22,7 +22,10 @@
<span class="name">{{ node.name }}</span>
</div>
</li>
</ul>
</ul> -->
<div class="boutique-tabs">
<m-tabs></m-tabs>
</div>
<div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab">
......@@ -48,6 +51,7 @@
</template>
<script>
import mTabs from '@/views/home/components/Boutique.vue'
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import SMGZ from "./components/SMGZ";
......@@ -55,7 +59,7 @@ import SMGZ from "./components/SMGZ";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { NavBar, Footer, SMGZ },
components: { NavBar, Footer, SMGZ, mTabs },
data() {
return {
tabs: [
......@@ -141,6 +145,10 @@ export default {
// object-fit: cover;
// }
// }
.boutique-tabs {
width: 100%;
height: 100vh;
}
.fixed-tabs {
position: fixed;
left: 0;
......@@ -149,6 +157,7 @@ export default {
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
display: none;
li {
flex: 1;
position: relative;
......
src/views/culturalRelic/detail-bp.vue 0 → 100644
浏览文件 @ 500f4865
差异被折叠。
src/views/culturalRelic/index.vue
浏览文件 @ 500f4865
......@@ -4,11 +4,11 @@
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
<span>{{currentType}}</span>
<span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
<div class="search-item" @click="handleClickSearchBar('years')">
<span>{{currentYears}}</span>
<span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i>
</div>
......@@ -87,6 +87,12 @@
<span>共{{list.total}}件文物</span>
</div> -->
<div class="content-wrapper">
<div class="shade">
<div class="jxl">
<img src="@/assets/imgs/shade/jxl.png" alt="" />
</div>
</div>
<div>
<div class="content">
<el-row :gutter="40" class="cr-list">
<el-col
......@@ -111,7 +117,7 @@
class="face-image"
lazy
/>
<div class="deco-left-top">
<!-- <div class="deco-left-top">
<img
:src="
require(`@/assets/imgs/list/img-deco${
......@@ -150,11 +156,19 @@
"
alt=""
/>
</div>
</div> -->
</div>
<div class="showIcon" v-if="item && item.url3d">
<svg-icon icon-class="3d" class="icon"></svg-icon>
</div>
<div class="hover-bg">
<div>
<div>
<div class="name">{{ item.name }}</div>
<div class="depart">{{ item.deptName }}</div>
</div>
</div>
</div>
<div class="desc">
<div class="name">{{ item.name }}</div>
<div class="desc-container">
......@@ -205,6 +219,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -250,13 +265,13 @@ export default {
{
label: "全部年代",
value: "",
}
},
];
let typeList = [
{
label: "全部类别",
value: "",
}
},
];
await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
for (const key in this.dicts.culturalRelicType) {
......@@ -599,12 +614,12 @@ $text-indent: 16px;
}
}
.total{
.total {
padding: 0 13%;
display: flex;
justify-content: flex-end;
background-color: #fff;
&>span{
& > span {
display: inline-block;
padding: 4px 8px;
background-color: #dfab46;
......@@ -615,7 +630,33 @@ $text-indent: 16px;
}
.content-wrapper {
background-color: #fff;
padding: 0;
padding-bottom: 126px;
> div {
padding: 0 13%;
}
.shade {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding: 0;
z-index: 0;
pointer-events: none;
> div.jxl {
height: 70vh;
filter: brightness(0.1);
opacity: 0.1;
position: absolute;
bottom: -80px;
right: -50px;
> img {
height: 100%;
}
}
}
.content {
padding: 16px 0 60px;
......@@ -628,17 +669,26 @@ $text-indent: 16px;
.cr-item {
margin-bottom: 40px;
.container {
border: 2px solid #f1f1f1;
// border: 2px solid #f1f1f1;
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
transition: all 0.5s ease;
width: 350px;
height: 350px;
// overflow: hidden;
justify-content: center;
text-align: center;
text-align: center;
&:hover {
border: 2px solid $themeColor;
.face-image {
// border: 2px solid $themeColor;
// border-radius: 100%;
/* .face-image {
transform: scale(1.2);
}
} */
.img-container {
.deco-left-top,
.deco-left-bottom,
......@@ -646,20 +696,75 @@ $text-indent: 16px;
.deco-right-bottom {
display: block;
}
> img {
transform: scale(1.2);
filter: grayscale(0.7) blur(1px);
}
}
.desc {
background: url("@/assets/imgs/list/card-title-bg.png");
// background: url("@/assets/imgs/list/card-title-bg.png");
// display: none;
opacity: 0;
}
.hover-bg {
> div {
opacity: 1;
width: 100%;
height: 100%;
}
}
}
.hover-bg {
width: 100%;
height: 100%;
// padding: 20px;
position: absolute;
left: 0;
top: 0;
> div {
opacity: 0;
width: 120%;
height: 120%;
display: flex;
justify-content: center;
align-items: center;
background: rgb(66 85 92 / 80%);
color: #fff;
text-align: center;
border-radius: 100%;
transition: all 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
> div {
.name {
font-weight: 600;
font-family: "楷体";
font-size: 26px;
padding: 20px;
}
.depart {
color: #84b3cf;
font-family: "黑体";
}
}
}
}
.img-container {
// background-color:#939393;
background-color: #42555c;
// background-color: #42555c;
// #42555c
height: 268px;
// height: 268px;
cursor: pointer;
transition: all 0.5s ease;
overflow: hidden;
position: relative;
width: 350px;
height: 250px;
padding: 30px;
.face-image {
height: 100%;
object-fit: contain;
......@@ -701,10 +806,12 @@ $text-indent: 16px;
}
}
.desc {
height: 120px;
padding: 36px 30px 20px;
transition: all 0.5s ease;
// height: 120px;
height: 36px;
// padding: 36px 30px 20px;
// transition: all 0.5s ease;
background: #fff;
// display: none;
.name {
font-size: 18px;
font-weight: bold;
......@@ -719,6 +826,7 @@ $text-indent: 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
display: none;
.left {
.deptName {
font-size: 14px;
......@@ -790,6 +898,73 @@ $text-indent: 16px;
}
}
.cultural-relic {
.content {
.cr-list {
.cr-item {
.container {
.info {
position: relative;
border-radius: 10px;
overflow: hidden;
padding: 50px 10px;
.name {
text-align: center;
padding-bottom: 50px;
}
.depart {
position: absolute;
bottom: 30px;
right: 10px;
}
.corner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
.deco-right-bottom {
position: absolute;
width: 36px;
height: 36px;
// display: none;
transition: all 0.5s ease;
img {
width: 100%;
height: 100%;
}
}
.deco-left-top {
left: 0;
top: 0;
transform: rotate(180deg);
}
.deco-left-bottom {
left: 0;
bottom: 0;
transform: rotate(90deg);
}
.deco-right-top {
right: 0;
top: 0;
transform: rotate(270deg);
}
.deco-right-bottom {
right: 0;
bottom: 0;
}
}
}
}
}
}
}
}
::v-deep .el-cascader .el-input .el-icon-arrow-down,
::v-deep .el-select .el-input .el-select__caret {
font-weight: bold;
......
src/views/home/components/Boutique.vue
浏览文件 @ 500f4865
......@@ -42,7 +42,7 @@
</template>
<script>
import mSmgz from "./topic/smgz.vue"
import mSmgz from "./topic/smgz2.vue"
import mJyycc from './topic/jyycc.vue'
import mYlgdyw from './topic/ylgdyw.vue'
import mSdcs from './topic/sdcs.vue'
......
src/views/home/components/banner.vue 0 → 100644
浏览文件 @ 500f4865
<template>
<div class="boutique">
<div class="banner">
<img src="@/assets/imgs/banner.png" alt="" />
</div>
</div>
</template>
<style lang="scss" scoped>
.boutique {
.banner {
width: 100%;
height: 100%;
> img {
width: 100%;
}
}
}
</style>
src/views/home/components/swiper.vue
浏览文件 @ 500f4865
......@@ -15,7 +15,7 @@
</template>
<script>
import pic0 from "@/assets/imgs/boutique/1.jpg";
import pic0 from "@/assets/imgs/topic/smgz/dzbwg.png";
import pic1 from "@/assets/imgs/topic/jyycc/jyycc.jpg";
import pic2 from "@/assets/imgs/topic/ylgdyw/ylgdyw.png";
import pic3 from "@/assets/imgs/topic/sdcs/sdcs.png";
......
src/views/home/components/topic/smgz2.vue 0 → 100644
浏览文件 @ 500f4865
<template>
<div class="m-smgz">
<div class="banner">
<img src="@/assets/imgs/topic/smgz/dzbwg.png" alt="" />
</div>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.m-smgz {
.banner {
width: 100%;
height: 100%;
> img {
width: 100%;
height: 100%;
}
}
}
</style>
src/views/home/index.vue
浏览文件 @ 500f4865
......@@ -12,7 +12,8 @@
</template>
<script>
import Boutique from "./components/Boutique.vue";
// import Boutique from "./components/Boutique.vue";
import Boutique from './components/banner.vue'
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论