Skip to content

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

修改listBanner

上级 500f4865
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 114 行增加 和 58 行删除
src/assets/styles/variable.scss
浏览文件 @ 4dcddaaa
......@@ -2,4 +2,9 @@
// $themeColor: #2069c4;
$themeColor:#132c33;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
\ No newline at end of file
$siyuanSongBold: "SourceHanSerifCN-Bold";
$font-size-sm:14px;
$font-size-base:16px;
$font-size-lg:22px;
src/components/ListBanner/index.vue
浏览文件 @ 4dcddaaa
......@@ -6,14 +6,17 @@
</div>
<div class="text">{{ title }}</div>
</div> -->
<div class="total">
<div class="total-title">目前共有藏品</div>
<div class="amount">12,313件</div>
<div class="total" >
<div class="total-title">{{title}}</div>
<div class="amount">
<span class="num">{{num}}</span>
<span class="unit">{{unit}}</span>
</div>
</div>
<!-- <div class="banner-1">
<img src="@/assets/imgs/list/banner3.png" alt="" />
</div> -->
<div class="banner-2">
<div class="banner-2 wow animate__animated animate__fadeInLeftBig" data-wow-duration="2s">
<img src="@/assets/imgs/list/banner2.png" alt="" />
</div>
</div>
......@@ -27,6 +30,14 @@ export default {
type: String,
default: "标题",
},
num:{
type: String,
default: '0',
},
unit:{
type: String,
default: '个',
},
},
};
</script>
......@@ -36,7 +47,7 @@ export default {
width: 100%;
height: 360px;
position: relative;
background-color: rgba($themeColor, 0.9);
background-image: linear-gradient(to right,$themeColor,rgba($themeColor, 0.9),$themeColor);
padding: 0 13%;
display: flex;
align-items: center;
......@@ -61,8 +72,15 @@ export default {
font-size: 28px;
}
.amount {
font-size: 56px;
font-weight: bold;
.num{
font-size: 56px;
font-family: $puHuiTi;
}
.unit{
font-size: $font-size-base;
}
}
}
// .banner-1 {
......@@ -80,7 +98,7 @@ export default {
// position: absolute;
// right: 320px;
// top: 54%;
transform: translateY(20px);
margin-top: 30px;
width: 520px;
img {
width: 100%;
......@@ -103,7 +121,6 @@ export default {
}
.text {
font-size: 28px;
// font-family: "Alibaba-PuHuiTi";
font-weight: 400;
color: $themeColor;
}
......
src/components/NavBar/index.vue
浏览文件 @ 4dcddaaa
......@@ -3,14 +3,14 @@
:class="{
nav: true,
'header-fixed ': isFixed,
'home-nav': isHome,
'home-nav': isHome || isBoutique,
'show-themeColor':isFixed&&isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5',
isJYYCC: navbarStyle == '6',
isYLGDYW: navbarStyle == '7',
isChStyle: navbarStyle == '2' && isFixed,
isRedStyle: navbarStyle == '3'&& isFixed,
isSDCS: navbarStyle == '4'&& isFixed,
isSMGZ: navbarStyle == '5'&& isFixed,
isJYYCC: navbarStyle == '6'&& isFixed,
isYLGDYW: navbarStyle == '7'&& isFixed,
}"
id="navbar"
>
......@@ -202,6 +202,7 @@ export default {
curPath: {
handler: function (value) {
this.isHome = value.name == "home";
this.isBoutique = value.name=='boutique'
this.currentTab = {
name: value.name,
path: value.path,
......@@ -323,6 +324,7 @@ export default {
path: "/",
},
isHome: true,
isBoutique:false,//是否是精品展页
isFixed: false,
offsetTop: 0,
loginVisible: false,
......
src/components/SlideImage/index.vue
浏览文件 @ 4dcddaaa
......@@ -19,14 +19,14 @@
</div>
</swiper-slide>
<!-- <div
<div
class="swiper-button-next swiper-button-white"
slot="button-next"
></div>
<div
class="swiper-button-prev swiper-button-white"
slot="button-prev"
></div> -->
></div>
</swiper>
<!-- 小缩略图 -->
<swiper
......
src/components/SlideImage/slider.vue
浏览文件 @ 4dcddaaa
......@@ -16,6 +16,14 @@
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div> -->
</swiper-slide>
<div
class="swiper-button-next swiper-button-white"
slot="button-next"
></div>
<div
class="swiper-button-prev swiper-button-white"
slot="button-prev"
></div>
</swiper>
</div>
......
src/router/index.js
浏览文件 @ 4dcddaaa
......@@ -30,7 +30,7 @@ const routes = [
// 精品展
{
path: '/boutique',
name: 'about',
name: 'boutique',
component: () => import('@/views/boutique'),
meta: {
keepAlive: true
......
src/views/boutique/index.vue
浏览文件 @ 4dcddaaa
......@@ -24,26 +24,20 @@
</li>
</ul> -->
<div class="boutique-tabs">
<m-tabs></m-tabs>
<m-tabs @handleClickItem="handleClickItem"></m-tabs>
</div>
<div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab">
<p
v-if="activeTab == 'cjm'"
style="display: flex; justify-content: center"
>
<p v-if="activeTab == 'cjm'" style="display: flex; justify-content: center">
长角苗民俗及文化遗产
</p>
<SMGZ v-else-if="activeTab == 'smgz'" />
<div v-else class="img-container">
<img
:src="
require(`@/assets/imgs/boutique/${activeTab}.jpg`) ||
require(`@/assets/imgs/boutique/${activeTab}.png`)
"
alt=""
/>
<img :src="
require(`@/assets/imgs/boutique/${activeTab}.jpg`) ||
require(`@/assets/imgs/boutique/${activeTab}.png`)
" alt="" />
</div>
</div>
</div>
......@@ -52,14 +46,11 @@
<script>
import mTabs from '@/views/home/components/Boutique.vue'
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import SMGZ from "./components/SMGZ";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { NavBar, Footer, SMGZ, mTabs },
components: { SMGZ, mTabs },
data() {
return {
tabs: [
......@@ -120,15 +111,25 @@ export default {
this.activeTab = "sdcs";
},
methods: {
handleTabClick(data) {
this.activeTab = data.tab;
// let el = document.getElementsByClassName("boutique-header")[0];
// let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
// document.documentElement.scroll({
// top: height,
// behavior: "smooth", // 平滑移动
// });
},
// handleTabClick(data) {
// this.activeTab = data.tab;
// let el = document.getElementsByClassName("boutique-header")[0];
// let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
// document.documentElement.scroll({
// top: height,
// behavior: "smooth", // 平滑移动
// });
// },
handleClickItem(key) {
this.activeTab = key
let el = document.getElementsByClassName("boutique-tabs")[0];
let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
document.documentElement.scroll({
top: height,
behavior: "smooth", // 平滑移动
});
}
},
};
</script>
......@@ -149,6 +150,7 @@ export default {
width: 100%;
height: 100vh;
}
.fixed-tabs {
position: fixed;
left: 0;
......@@ -158,9 +160,11 @@ export default {
display: flex;
flex-direction: column;
display: none;
li {
flex: 1;
position: relative;
.tab-container {
width: 100px;
height: 100%;
......@@ -170,16 +174,20 @@ export default {
display: flex;
align-items: center;
cursor: pointer;
&:hover {
left: 0;
.name {
opacity: 1;
}
}
img {
width: 100%;
height: 100%;
}
.name {
position: absolute;
left: 2px;
......@@ -201,13 +209,14 @@ export default {
// }
// }
}
.boutique-title {
height: 500px;
position: relative;
overflow: hidden;
z-index: 1;
> p {
>p {
margin: 0;
font-size: 46px;
font-weight: 600;
......@@ -221,7 +230,8 @@ export default {
-webkit-text-fill-color: transparent;
animation: hue 6s infinite linear;
}
> span {
>span {
font-weight: 600;
font-family: "宋体";
font-size: 24px;
......@@ -231,6 +241,7 @@ export default {
color: #666;
}
}
// ul.tabs {
// display: flex;
// justify-content: space-between;
......@@ -298,11 +309,13 @@ export default {
font-weight: 600;
// background: rgb(239 247 255);
> p {
>p {
margin: 0;
}
.img-container {
width: 100%;
img {
width: 100%;
}
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 4dcddaaa
......@@ -51,7 +51,7 @@
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<span>相关文献</span>
<span>相关文物</span>
</li>
</ul>
<!-- 基本信息 -->
......@@ -766,6 +766,7 @@ $node-w: 700px;
text-align: center;
font-weight: 600;
font-family: "楷体";
color: #ccc;
}
}
}
......
src/views/culturalRelic/index.vue
浏览文件 @ 4dcddaaa
<template>
<div class="cultural-relic">
<ListBanner title="文物展" />
<ListBanner title="共计已上线文物" :num="list.total" unit="件/套"/>
<div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
......@@ -574,7 +574,7 @@ $text-indent: 16px;
.search-panel {
min-height: 100px;
max-height: 138px;
background: rgb(#8ac7ff, 1) url("@/assets/imgs/home/panel-bg.png");
background: rgb($themeColor, 0.15) url("@/assets/imgs/home/panel-bg.png");
width: 100%;
display: flex;
justify-content: center;
......@@ -666,6 +666,8 @@ $text-indent: 16px;
.cr-list {
// padding: 0 74px;
min-height: 500px;
.cr-item {
margin-bottom: 40px;
.container {
......
src/views/display/index.vue
浏览文件 @ 4dcddaaa
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner title="基本陈列" />
<ListBanner title="共计已上线展览" :num="list.total" />
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
......
src/views/home/components/Boutique.vue
浏览文件 @ 4dcddaaa
......@@ -28,8 +28,8 @@
<m-sdcs></m-sdcs>
</div>
</el-carousel-item> -->
<el-carousel-item v-for="(node, i) in topics" :key="i">
<div class="img-container">
<el-carousel-item v-for="(node, i) in topics" :key="i" @click.native="handleClickItem(node)">
<div class="img-container" >
<component :is="node.component" v-if="node.show"></component>
</div>
</el-carousel-item>
......@@ -63,18 +63,24 @@ export default {
{
component: mSmgz,
show: true,
key:'smgz'
},
{
component: mJyycc,
show: true,
key:'jyycc'
},
{
component: mYlgdyw,
show: true,
key:'ylgdyw'
},
{
component: mSdcs,
show: true,
key:'sdcs'
},
],
};
......@@ -93,6 +99,9 @@ export default {
let em = this.$refs['cur_carousel']
em.setActiveItem(i)
},
handleClickItem(item){
this.$emit('handleClickItem',item.key)
}
},
};
......
src/views/museum/index.vue
浏览文件 @ 4dcddaaa
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner title="博物馆" />
<ListBanner title="共计已收录博物馆" :num="list.total"/>
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
......@@ -135,7 +135,7 @@ export default {
return {
list: {
records: [],
size: 20,
size: 21,
current: 1,
total: 0,
},
......@@ -339,7 +339,7 @@ $text-indent: 16px;
position: relative;
.face-image {
height: 100%;
object-fit: cover;
object-fit: contain;
transition: all 0.5s ease;
}
.deco-left-top,
......@@ -378,7 +378,7 @@ $text-indent: 16px;
}
}
.desc {
height: 110px;
height: 100px;
padding: 36px 30px;
transition: all 0.5s ease;
background: #fff;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论