Skip to content

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

增加主题色变量；修改文物列表样式

上级 02397310
隐藏空白字符变更
内嵌 并排
正在显示 包含 485 行增加 和 307 行删除
package.json
浏览文件 @ b6285e7e
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
"svgo": "^2.8.0", "svgo": "^2.8.0",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-slidepage": "^1.0.0",
"vue-video-player": "^5.0.2", "vue-video-player": "^5.0.2",
"vuex": "^3.6.2", "vuex": "^3.6.2",
"wowjs": "^1.1.3" "wowjs": "^1.1.3"
......
src/assets/imgs/list/banner.png
查看替换文件 @ 02397310 浏览文件 @ b6285e7e
src/assets/imgs/list/banner.png

1.2 MB | W: | H:

src/assets/imgs/list/banner.png

1.6 MB | W: | H:

src/assets/imgs/list/banner.png
src/assets/imgs/list/banner.png
src/assets/imgs/list/banner.png
src/assets/imgs/list/banner.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/styles/index.scss
浏览文件 @ b6285e7e
...@@ -44,7 +44,7 @@ li { ...@@ -44,7 +44,7 @@ li {
//一些公共样式 //一些公共样式
.empty-space { .empty-space {
height: 100px; height: 100px;
background-color: #2069c4; background-color: $themeColor;
width: 100% width: 100%
} }
......
src/assets/styles/variable.scss 0 → 100644
浏览文件 @ b6285e7e
$themeColor:#223e36;
// $themeColor: #2069c4;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
\ No newline at end of file
src/components/AudioPlayer/NormalPlayer.vue
浏览文件 @ b6285e7e
...@@ -248,7 +248,7 @@ export default { ...@@ -248,7 +248,7 @@ export default {
color: #5c5e66; color: #5c5e66;
display: flex; display: flex;
align-items: center; align-items: center;
color: #2069c4; color: $themeColor;
font-size: 38px; font-size: 38px;
} }
.progress-bar-bg { .progress-bar-bg {
...@@ -263,7 +263,7 @@ export default { ...@@ -263,7 +263,7 @@ export default {
margin: 0 10px; margin: 0 10px;
} }
.progress-bar { .progress-bar {
background-color: #2069c4; background-color: $themeColor;
width: 0%; width: 0%;
height: 10px; height: 10px;
border-radius: 5px; border-radius: 5px;
......
src/components/Footer/index.vue
浏览文件 @ b6285e7e
...@@ -153,7 +153,7 @@ export default { ...@@ -153,7 +153,7 @@ export default {
padding: 30px 0; padding: 30px 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #2069c4; background-color: $themeColor;
flex-direction: column; flex-direction: column;
color: #fefefe; color: #fefefe;
font-size: 14px; font-size: 14px;
......
src/components/ListBanner/index.vue
浏览文件 @ b6285e7e
<template> <template>
<div class="banner wow animate__animated animate__fadeIn"> <div class="banner wow animate__animated animate__fadeIn">
<div class="title wow animate__animated animate__fadeInLeft"> <!-- <div class="title wow animate__animated animate__fadeInLeft">
<div class="img-container"> <div class="img-container">
<img src="@/assets/imgs/list/ding.png" alt="" srcset="" /> <img src="@/assets/imgs/list/ding.png" alt="" srcset="" />
</div> </div>
<div class="text">{{ title }}</div> <div class="text">{{ title }}</div>
</div> -->
<div class="total">
<div class="total-title">目前共有藏品</div>
<div class="amount">12,313件</div>
</div>
<div class="img-container">
<img src="@/assets/imgs/list/banner2.png" alt=""></img>
</div> </div>
</div> </div>
</template> </template>
...@@ -24,11 +31,43 @@ export default { ...@@ -24,11 +31,43 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.banner { .banner {
width: 100%; width: 100%;
height: 222px; height: 360px;
background-image: url("@/assets/imgs/list/banner.png"); position: relative;
background-size:100% 100%; background-color: rgba($themeColor, 0.9);
display: flex; // height: 222px;
align-items: center; // background-image: url("@/assets/imgs/list/banner2.png");
// background-size:100% 100%;
// display: flex;
// align-items: center;
// background-size: 100%;
// background-position: 0 -100px;
.total {
width: 400px;
position: absolute;
left: 200px;
top: 50%;
transform: translateY(-50%);
color: #fff;
.total-title {
font-size: 28px;
}
.amount{
font-size: 56px;
font-weight: bold;
}
}
.img-container {
position: absolute;
right: 200px;
top: 61%;
transform: translateY(-50%);
width: 800px;
img {
width: 100%;
height: 100%;
}
}
.title { .title {
padding: 0 13%; padding: 0 13%;
display: flex; display: flex;
...@@ -40,13 +79,14 @@ export default { ...@@ -40,13 +79,14 @@ export default {
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain;
} }
} }
.text { .text {
font-size: 28px; font-size: 28px;
// font-family: "Alibaba-PuHuiTi"; // font-family: "Alibaba-PuHuiTi";
font-weight: 400; font-weight: 400;
color: #2069c4; color: $themeColor;
} }
} }
} }
......
src/components/MenuList/index.vue
浏览文件 @ b6285e7e
...@@ -64,15 +64,15 @@ export default { ...@@ -64,15 +64,15 @@ export default {
.el-menu-item { .el-menu-item {
background-color: #f5f5f9; background-color: #f5f5f9;
font-size: 16px; font-size: 16px;
// color: #2069c4; // color: $themeColor;
&:hover { &:hover {
background-color: #2069c4; background-color: $themeColor;
color: #fff; color: #fff;
} }
} }
.el-menu-item.is-active { .el-menu-item.is-active {
color: #2069c4; color: $themeColor;
font-weight: bold; font-weight: bold;
} }
.blueStyle { .blueStyle {
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
background: rgba($color: #fff, $alpha: 0.6); background: rgba($color: #fff, $alpha: 0.6);
color: #2069c4; color: $themeColor;
font-weight: bold; font-weight: bold;
} }
} }
......
src/components/NavBar/index.vue
浏览文件 @ b6285e7e
...@@ -518,7 +518,9 @@ export default { ...@@ -518,7 +518,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$themeColor: #2069c4; // $themeColor: $themeColor;
$themeColor: $themeColor;
.home-nav { .home-nav {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -528,7 +530,7 @@ $themeColor: #2069c4; ...@@ -528,7 +530,7 @@ $themeColor: #2069c4;
} }
.header-fixed { .header-fixed {
position: fixed !important; position: fixed !important;
background-color: #2069c4 !important; background-color: $themeColor !important;
z-index: 99; z-index: 99;
top: 0; top: 0;
} }
...@@ -557,7 +559,7 @@ $themeColor: #2069c4; ...@@ -557,7 +559,7 @@ $themeColor: #2069c4;
height: 100px; height: 100px;
width: 100%; width: 100%;
transition: all 0.5s ease; transition: all 0.5s ease;
background-color: #2069c4; background-color: $themeColor;
// background-color: #fff; // background-color: #fff;
// background-image: url('@/assets/imgs/home/panel-bg.png'); // background-image: url('@/assets/imgs/home/panel-bg.png');
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
...@@ -771,7 +773,7 @@ $themeColor: #2069c4; ...@@ -771,7 +773,7 @@ $themeColor: #2069c4;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #2069c4; color: $themeColor;
} }
} }
} }
...@@ -794,12 +796,12 @@ $themeColor: #2069c4; ...@@ -794,12 +796,12 @@ $themeColor: #2069c4;
padding: 16px !important; padding: 16px !important;
border-radius: 0 !important; border-radius: 0 !important;
width: 100%; width: 100%;
background-color: #2069c4; background-color: $themeColor;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
filter: brightness(0.9) !important; filter: brightness(0.9) !important;
background-color: #2069c4; background-color: $themeColor;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 0 !important; border-radius: 0 !important;
...@@ -841,17 +843,17 @@ $themeColor: #2069c4; ...@@ -841,17 +843,17 @@ $themeColor: #2069c4;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
color: #2069c4; color: $themeColor;
} }
} }
.active { .active {
color: #2069c4; color: $themeColor;
} }
.line { .line {
width: 18px; width: 18px;
height: 4px; height: 4px;
background-color: #2069c4; background-color: $themeColor;
// border-radius: 4px; // border-radius: 4px;
position: absolute; position: absolute;
left: 24px; left: 24px;
......
src/components/ReaderOperations/collect.vue
浏览文件 @ b6285e7e
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
}, },
selectColor: { selectColor: {
type: String, type: String,
default: "#2069c4", default: "$themeColor",
}, },
}, },
data() { data() {
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
} }
.el-button--text { .el-button--text {
color: #2069c4; color: $themeColor;
} }
::v-deep .el-input-group__append { ::v-deep .el-input-group__append {
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
} }
.el-button--primary { .el-button--primary {
border: none; border: none;
background-color: #2069c4; background-color: $themeColor;
} }
} }
</style> </style>
\ No newline at end of file
src/components/ReaderOperations/index.vue
浏览文件 @ b6285e7e
...@@ -136,7 +136,7 @@ export default { ...@@ -136,7 +136,7 @@ export default {
}, },
selectColor: { selectColor: {
type: String, type: String,
default: "#2069c4", default: "$themeColor",
}, },
}, },
data() { data() {
...@@ -260,7 +260,7 @@ export default { ...@@ -260,7 +260,7 @@ export default {
} }
.el-button--text { .el-button--text {
color: #2069c4; color: $themeColor;
} }
.copy { .copy {
...@@ -290,7 +290,7 @@ export default { ...@@ -290,7 +290,7 @@ export default {
} }
.el-button--primary { .el-button--primary {
border: none; border: none;
background-color: #2069c4; background-color: $themeColor;
} }
} }
</style> </style>
\ No newline at end of file
src/components/ReaderOperations/like.vue
浏览文件 @ b6285e7e
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
}, },
selectColor: { selectColor: {
type: String, type: String,
default: "#2069c4", default: "$themeColor",
}, },
}, },
data() { data() {
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
} }
.el-button--text { .el-button--text {
color: #2069c4; color: $themeColor;
} }
::v-deep .el-input-group__append { ::v-deep .el-input-group__append {
padding: 0 40px; padding: 0 40px;
...@@ -165,7 +165,7 @@ ...@@ -165,7 +165,7 @@
} }
.el-button--primary { .el-button--primary {
border: none; border: none;
background-color: #2069c4; background-color: $themeColor;
} }
} }
</style> </style>
\ No newline at end of file
src/components/ReaderOperations/share.vue
浏览文件 @ b6285e7e
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
}, },
selectColor: { selectColor: {
type: String, type: String,
default: "#2069c4", default: "$themeColor",
}, },
}, },
data() { data() {
...@@ -133,7 +133,7 @@ export default { ...@@ -133,7 +133,7 @@ export default {
} }
.el-button--text { .el-button--text {
color: #2069c4; color: $themeColor;
} }
.copy { .copy {
...@@ -163,7 +163,7 @@ export default { ...@@ -163,7 +163,7 @@ export default {
} }
.el-button--primary { .el-button--primary {
border: none; border: none;
background-color: #2069c4; background-color: $themeColor;
} }
} }
</style> </style>
\ No newline at end of file
src/components/SlideImageGroup/index.vue
浏览文件 @ b6285e7e
...@@ -108,7 +108,6 @@ export default { ...@@ -108,7 +108,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$themeColor: #2069c4;
.slide-img-group { .slide-img-group {
height: 100%; height: 100%;
} }
......
src/components/Video/index.vue
浏览文件 @ b6285e7e
...@@ -120,8 +120,8 @@ export default { ...@@ -120,8 +120,8 @@ export default {
} }
.blue { .blue {
.play-btn { .play-btn {
border: 2px solid #2069c4; border: 2px solid $themeColor;
color: #2069c4; color: $themeColor;
} }
} }
</style> </style>
\ No newline at end of file
src/main.js
浏览文件 @ b6285e7e
...@@ -23,6 +23,7 @@ import { ...@@ -23,6 +23,7 @@ import {
import './permission' import './permission'
import '@/rem' import '@/rem'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
// 全局注册动画效果 // 全局注册动画效果
......
src/views/boutique/components/SMGZ.vue
浏览文件 @ b6285e7e
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" /> <img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" />
</div> </div>
</div> </div>
<div class="text img wow animate__animated animate__fadeInUp"> <!-- <div class="text img wow animate__animated animate__fadeInUp">
<div class="text-content"> <div class="text-content">
<div class="title">展览简介</div> <div class="title">展览简介</div>
<div class="main"> <div class="main">
...@@ -65,35 +65,19 @@ ...@@ -65,35 +65,19 @@
<p> <p>
展览立足独有而丰富的古生物标本以及丰厚的科研成果，用博物馆展览语言全面阐释“神秘贵州”古生物化石承载的地史信息，传播地学知识，增强文化自信，助推生态文明建设，促进人类和谐发展。 展览立足独有而丰富的古生物标本以及丰厚的科研成果，用博物馆展览语言全面阐释“神秘贵州”古生物化石承载的地史信息，传播地学知识，增强文化自信，助推生态文明建设，促进人类和谐发展。
</p> </p>
<!-- <p>
《神秘贵州——古生物王国》展览以“主题制”为统领，系统归集贵州近10亿年地质沉积史和6.09亿年生命演化史中的重大事件和重要材料，分为“沉积巨著”“生命源头”“龙的故乡”“陆地寻踪”四部分。
</p>
<p>
<span class="main-num">01</span>
<span class="main-text"
>“沉积巨著”：展示贵州5万余米厚度沉积岩与古生物化石的关系，揭示地球环境对生命的塑造和影响。</span
>
</p>
<p>
<span class="main-num">02</span>
<span class="main-text"
>“生命源头”：以“动物生命的起源--瓮安生物群”拉开帷幕，展示远古贵州从震旦纪至二叠纪海洋生物演化历程。</span
>
</p>
<p>
<span class="main-num">03</span>
<span class="main-text"
>“龙的故乡”：用三叠纪生命复苏全球唯一实证的青岩生物群拉开帷幕，全面展示三叠纪生物从复苏-繁盛，重点展示晚三叠世海生爬行动物多样性及其生存适应性演化。</span
>
</p>
<p>
<span class="main-num">04</span>
<span class="main-text"
>“陆地寻踪”：展示贵州彻底抬升为陆地后，侏罗纪至第四纪恐龙的兴衰、哺乳动物的崛起以及古人类的出现，呼吁人们顺应自然，保护自然，与自然和谐相处。</span
>
</p> -->
</div> </div>
</div> </div>
</div> -->
<div class="text wow animate__animated animate__fadeInUp">
<div class="title">展览简介</div>
<div class="main">
<p>
贵州在国际学术界享有“古生物王国”的美誉，境内瓮安生物群、凯里生物群、青岩生物群、关岭动物群等11个古生物群的发现，在全球具有石破天惊的影响。
</p>
<p>
展览立足独有而丰富的古生物标本以及丰厚的科研成果，用博物馆展览语言全面阐释“神秘贵州”古生物化石承载的地史信息，传播地学知识，增强文化自信，助推生态文明建设，促进人类和谐发展。
</p>
</div>
</div> </div>
</div> </div>
<div class="hall smgz-item"> <div class="hall smgz-item">
...@@ -101,7 +85,8 @@ ...@@ -101,7 +85,8 @@
<div <div
class="hall-content-title wow animate__animated animate__fadeInDown" class="hall-content-title wow animate__animated animate__fadeInDown"
> >
<img src="@/assets/imgs/boutique/smgz/3_hall/title.png" alt="" /> <!-- <img src="@/assets/imgs/boutique/smgz/3_hall/title.png" alt="" /> -->
— 展览单元 —
</div> </div>
<div class="hall-content-intro"> <div class="hall-content-intro">
<div <div
...@@ -150,7 +135,8 @@ ...@@ -150,7 +135,8 @@
<div <div
class="crs-content-title wow animate__animated animate__fadeInDown" class="crs-content-title wow animate__animated animate__fadeInDown"
> >
<img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" /> — 展览精品 —
<!-- <img src="@/assets/imgs/boutique/smgz/4_cr/title.png" alt="" /> -->
</div> </div>
<!-- <div <!-- <div
class="crs-content-buttons wow animate__animated animate__fadeInUp" class="crs-content-buttons wow animate__animated animate__fadeInUp"
...@@ -201,7 +187,8 @@ ...@@ -201,7 +187,8 @@
<div <div
class="guide-content-title wow animate__animated animate__fadeInDown" class="guide-content-title wow animate__animated animate__fadeInDown"
> >
<img src="@/assets/imgs/boutique/smgz/5_guide/title.png" alt="" /> <!-- <img src="@/assets/imgs/boutique/smgz/5_guide/title.png" alt="" /> -->
— 展览导航 —
</div> </div>
<div class="guide-content-imgs"> <div class="guide-content-imgs">
<div class="img-container wow animate__animated animate__fadeInLeft"> <div class="img-container wow animate__animated animate__fadeInLeft">
...@@ -223,7 +210,8 @@ ...@@ -223,7 +210,8 @@
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
<div class="vr-text"> <div class="vr-text">
<svg-icon icon-class="dianji"></svg-icon> 点击进入神秘贵州展厅 <svg-icon icon-class="dianji"></svg-icon>
点击进入神秘贵州展厅
</div> </div>
</div> </div>
</div> </div>
...@@ -305,18 +293,11 @@ ...@@ -305,18 +293,11 @@
</div> </div>
</div> </div>
</div> </div>
<m-dialog v-if="showVideo" @close="showVideo = false"> <m-dialog v-if="showVideo" @close="showVideo = false">
<div class="smgz-video"> <div class="smgz-video">
<video-player :src="src"></video-player> <video-player :src="src"></video-player>
</div> </div>
</m-dialog> </m-dialog>
<!-- <m-dialog v-if="showVrDialog" @close="showVrDialog = false">
<div class="smgz-video">
</div>
</m-dialog> -->
</div> </div>
</template> </template>
...@@ -326,6 +307,7 @@ import "swiper/dist/css/swiper.css"; ...@@ -326,6 +307,7 @@ import "swiper/dist/css/swiper.css";
import MDialog from "@/components/MDialog"; import MDialog from "@/components/MDialog";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import { crPics } from "../data"; import { crPics } from "../data";
// import { SlideContainer, SlidePage } from 'vue-slidepage'
export default { export default {
name: "SMGZ", name: "SMGZ",
components: { components: {
...@@ -333,6 +315,8 @@ export default { ...@@ -333,6 +315,8 @@ export default {
swiperSlide, swiperSlide,
MDialog, MDialog,
videoPlayer, videoPlayer,
// SlideContainer,
// SlidePage
}, },
data() { data() {
let that = this; let that = this;
...@@ -426,6 +410,26 @@ export default { ...@@ -426,6 +410,26 @@ export default {
showVrIFrame: false, showVrIFrame: false,
vrIFrameLoaded: false, //vr iframe加载是否完毕 vrIFrameLoaded: false, //vr iframe加载是否完毕
isVrLoaded: false, //是否要加载vr iframe isVrLoaded: false, //是否要加载vr iframe
options: {
licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",
afterLoad: this.afterLoad,
scrollOverflow: true,
scrollBar: false,
menu: "#menu",
// navigation: true,
// anchors: ['page1', 'page2', 'page3'],
sectionsColor: [
"#41b883",
"#ff5f45",
"#0798ec",
"#fec401",
"#1bcee6",
"#ee1a59",
"#2c3e4f",
"#ba5be9",
"#b4b8ab",
],
},
}; };
}, },
computed: { computed: {
...@@ -535,6 +539,11 @@ export default { ...@@ -535,6 +539,11 @@ export default {
top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
); );
}, },
next() {
// 向下滚动一页
this.$refs.fullpage.api.moveSectionDown();
},
}, },
}; };
</script> </script>
...@@ -593,6 +602,7 @@ export default { ...@@ -593,6 +602,7 @@ export default {
} }
.left-title { .left-title {
height: sHeight(676); height: sHeight(676);
width: sHeight(400);
left: sWidth(368); left: sWidth(368);
bottom: sHeight(188); bottom: sHeight(188);
z-index: 1; z-index: 1;
...@@ -609,7 +619,10 @@ export default { ...@@ -609,7 +619,10 @@ export default {
} }
} }
.ms { .ms {
height: sHeight(829); width: sWidth(800);
height: sHeight(800);
// width: 1587px;
// height: 922px;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
...@@ -641,6 +654,11 @@ export default { ...@@ -641,6 +654,11 @@ export default {
.cover { .cover {
width: 100%; width: 100%;
top: sHeight(20); top: sHeight(20);
display: flex;
justify-content: center;
img {
width: 88%;
}
} }
.cover2 { .cover2 {
top: sHeight(230); top: sHeight(230);
...@@ -659,53 +677,68 @@ export default { ...@@ -659,53 +677,68 @@ export default {
} }
.text { .text {
width: 100%; width: 100%;
display: flex; position: absolute;
justify-content: center; bottom: 0;
top: sHeight(950); color: #fff;
z-index: 2; background-color: rgba(0, 23, 58, 0.75);
.text-content { padding: 32px 56px;
position: absolute; .title {
// left: 0; font-size: 28px;
width: 60%; }
background-image: url("@/assets/imgs/boutique/smgz/2_intro/text.png"); .main {
background-repeat: no-repeat; font-size: 18px;
background-size: 100% 100%; font-weight: normal;
padding: 100px 100px 120px;
.title {
font-size: 28px;
font-weight: 800;
color: #292b2d;
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;
color: #292b2d;
line-height: 40px;
font-family: PingFang SC;
.main-num {
font-size: 22px;
font-family: DIN-BlackItalic;
font-weight: 600;
color: #133f7c;
line-height: 40px;
font-style: italic;
margin-right: 6px;
}
}
}
} }
} }
// .text {
// width: 100%;
// display: flex;
// justify-content: center;
// top: sHeight(950);
// z-index: 2;
// .text-content {
// position: absolute;
// // left: 0;
// width: 60%;
// background-image: url("@/assets/imgs/boutique/smgz/2_intro/text.png");
// background-repeat: no-repeat;
// background-size: 100% 100%;
// padding: 100px 100px 120px;
// .title {
// font-size: 28px;
// font-weight: 800;
// color: #292b2d;
// 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;
// color: #292b2d;
// line-height: 40px;
// font-family: PingFang SC;
// .main-num {
// font-size: 22px;
// font-family: DIN-BlackItalic;
// font-weight: 600;
// color: #133f7c;
// line-height: 40px;
// font-style: italic;
// margin-right: 6px;
// }
// }
// }
// }
// }
} }
.hall { .hall {
...@@ -726,6 +759,9 @@ export default { ...@@ -726,6 +759,9 @@ export default {
padding-top: 200px; padding-top: 200px;
.hall-content-title { .hall-content-title {
margin-bottom: 70px; margin-bottom: 70px;
font-size: 42px;
color: #fff;
letter-spacing: 2px;
} }
.hall-content-intro { .hall-content-intro {
display: flex; display: flex;
...@@ -808,6 +844,9 @@ export default { ...@@ -808,6 +844,9 @@ export default {
align-items: center; align-items: center;
.crs-content-title { .crs-content-title {
margin-bottom: 70px; margin-bottom: 70px;
font-size: 42px;
color: #00173a;
letter-spacing: 2px;
} }
// .crs-content-buttons { // .crs-content-buttons {
// display: flex; // display: flex;
...@@ -907,6 +946,9 @@ export default { ...@@ -907,6 +946,9 @@ export default {
align-items: center; align-items: center;
.guide-content-title { .guide-content-title {
margin-bottom: 70px; margin-bottom: 70px;
font-size: 42px;
color: #fff;
letter-spacing: 2px;
} }
.guide-content-imgs { .guide-content-imgs {
display: flex; display: flex;
......
src/views/boutique/index.vue
浏览文件 @ b6285e7e
<template> <template>
<div class="boutique"> <div class="boutique">
<div class="boutique-header"> <!-- <div class="boutique-header">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" /> <img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
<ul class="tabs"> <ul class="tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)"> <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
...@@ -9,7 +9,20 @@ ...@@ -9,7 +9,20 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> </div> -->
<ul class="fixed-tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
<div class="tab-container">
<img
:src="
require(`@/assets/imgs/boutique/smgz/7_leftBar/${node.tab}.png`)
"
alt=""
/>
<span class="name">{{ node.name }}</span>
</div>
</li>
</ul>
<div class="boutique-content" ref="boutiqueContent"> <div class="boutique-content" ref="boutiqueContent">
<div class="focus-content" v-if="activeTab"> <div class="focus-content" v-if="activeTab">
...@@ -22,7 +35,10 @@ ...@@ -22,7 +35,10 @@
<SMGZ v-else-if="activeTab == 'smgz'" /> <SMGZ v-else-if="activeTab == 'smgz'" />
<div v-else class="img-container"> <div v-else class="img-container">
<img <img
:src="require(`@/assets/imgs/boutique/${activeTab}.jpg`) || require(`@/assets/imgs/boutique/${activeTab}.png`)" :src="
require(`@/assets/imgs/boutique/${activeTab}.jpg`) ||
require(`@/assets/imgs/boutique/${activeTab}.png`)
"
alt="" alt=""
/> />
</div> </div>
...@@ -39,7 +55,7 @@ import SMGZ from "./components/SMGZ"; ...@@ -39,7 +55,7 @@ import SMGZ from "./components/SMGZ";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
export default { export default {
name: "Boutique", name: "Boutique",
components: { NavBar, Footer, SMGZ}, components: { NavBar, Footer, SMGZ },
data() { data() {
return { return {
tabs: [ tabs: [
...@@ -50,6 +66,7 @@ export default { ...@@ -50,6 +66,7 @@ export default {
{ tab: "cjm", name: "长角苗民俗及文化遗产" }, { tab: "cjm", name: "长角苗民俗及文化遗产" },
], ],
activeTab: "", activeTab: "",
// content: { title: "四渡赤水" } // content: { title: "四渡赤水" }
}; };
}, },
...@@ -101,12 +118,12 @@ export default { ...@@ -101,12 +118,12 @@ export default {
methods: { methods: {
handleTabClick(data) { handleTabClick(data) {
this.activeTab = data.tab; this.activeTab = data.tab;
let el = document.getElementsByClassName("boutique-header")[0]; // let el = document.getElementsByClassName("boutique-header")[0];
let height = el.offsetHeight - this.navbarHeight ; //5像素偏移量 // let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
document.documentElement.scroll({ // document.documentElement.scroll({
top: height, // top: height,
behavior: "smooth", // 平滑移动 // behavior: "smooth", // 平滑移动
}); // });
}, },
}, },
}; };
...@@ -115,13 +132,65 @@ export default { ...@@ -115,13 +132,65 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.boutique { .boutique {
min-height: calc(100% - 300px); min-height: calc(100% - 300px);
.boutique-header {
position: relative; // .boutique-header {
overflow: hidden; // position: relative;
> img { // overflow: hidden;
height: 500px; // > img {
object-fit: cover; // height: 500px;
// object-fit: cover;
// }
// }
.fixed-tabs {
position: fixed;
left: 0;
top: 100px;
z-index: 9999;
height: calc(100vh - 100px);
display: flex;
flex-direction: column;
li {
flex: 1;
position: relative;
.tab-container {
width: 100px;
height: 100%;
position: absolute;
left: -70px;
transition: all ease 0.5s;
display: flex;
align-items: center;
cursor: pointer;
&:hover {
left: 0;
.name {
opacity: 1;
}
}
img {
width: 100%;
height: 100%;
}
.name {
position: absolute;
left: 2px;
opacity: 0;
color: #fff;
font-family: "SourceHanSerifCN-Bold";
width: 80%;
margin: 4px;
}
}
} }
// li {
// margin-bottom: 32px;
// & > span {
// color: #fff;
// cursor: pointer;
// }
// }
} }
.boutique-title { .boutique-title {
height: 500px; height: 500px;
...@@ -153,59 +222,59 @@ export default { ...@@ -153,59 +222,59 @@ export default {
color: #666; color: #666;
} }
} }
ul.tabs { // ul.tabs {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
position: absolute; // position: absolute;
z-index: 1; // z-index: 1;
padding: 10px 0; // padding: 10px 0;
width: 100%; // width: 100%;
bottom: 0; // bottom: 0;
> li { // > li {
flex: 1; // flex: 1;
> div { // > div {
text-align: center; // text-align: center;
> span { // > span {
font-size: 20px; // font-size: 20px;
color: #333; // color: #333;
font-weight: 600; // font-weight: 600;
font-family: "楷体"; // font-family: "楷体";
&:hover { // &:hover {
cursor: pointer; // cursor: pointer;
position: relative; // position: relative;
color: #003fa7; // color: #003fa7;
&::after { // &::after {
content: ""; // content: "";
position: absolute; // position: absolute;
left: 0; // left: 0;
width: 100%; // width: 100%;
bottom: -10px; // bottom: -10px;
border-bottom: 3px solid #2069c4; // border-bottom: 3px solid $themeColor;
border-radius: 30px; // border-radius: 30px;
} // }
} // }
} // }
&.active { // &.active {
> span { // > span {
position: relative; // position: relative;
color: #003fa7; // color: #003fa7;
text-shadow: 6px 2px 2px #999; // text-shadow: 6px 2px 2px #999;
&::after { // &::after {
content: ""; // content: "";
position: absolute; // position: absolute;
left: 0; // left: 0;
width: 100%; // width: 100%;
bottom: -10px; // bottom: -10px;
border-bottom: 3px solid #2069c4; // border-bottom: 3px solid $themeColor;
border-radius: 30px; // border-radius: 30px;
} // }
} // }
} // }
} // }
} // }
} // }
.boutique-content { .boutique-content {
.focus-content { .focus-content {
// padding: 20px 0; // padding: 20px 0;
......
src/views/ccProduct/index.vue
浏览文件 @ b6285e7e
...@@ -296,11 +296,11 @@ export default { ...@@ -296,11 +296,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4; $blue: $themeColor;
$text-indent: 16px; $text-indent: 16px;
.cultural-relic { .cultural-relic {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: $themeColor;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
...@@ -404,7 +404,7 @@ $text-indent: 16px; ...@@ -404,7 +404,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid #2069c4; border: 2px solid $themeColor;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -475,7 +475,7 @@ $text-indent: 16px; ...@@ -475,7 +475,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: $themeColor;
margin-bottom: 18px; margin-bottom: 18px;
} }
.desc-container { .desc-container {
...@@ -592,7 +592,7 @@ $text-indent: 16px; ...@@ -592,7 +592,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: $themeColor;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/culturalRelic/Detail.vue
浏览文件 @ b6285e7e
...@@ -601,7 +601,6 @@ export default { ...@@ -601,7 +601,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$themeColor: #2069c4;
$titleFontFamily: SourceHanSerifCN-Bold; $titleFontFamily: SourceHanSerifCN-Bold;
.custom-title { .custom-title {
width: 50px; width: 50px;
...@@ -698,7 +697,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -698,7 +697,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title { .intro-title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: #2069c4; color: $themeColor;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -851,7 +850,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -851,7 +850,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #2069c4; background-color: $themeColor;
margin: 20px 0; margin: 20px 0;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -882,7 +881,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -882,7 +881,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
color: #831122; color: #831122;
} }
.collect { .collect {
color: #2069c4; color: $themeColor;
} }
} }
} }
...@@ -1094,10 +1093,11 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1094,10 +1093,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 214px; height: 214px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
background-color: #939393;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: contain;
} }
} }
.cr-name { .cr-name {
...@@ -1154,7 +1154,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1154,7 +1154,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
} }
::v-deep .el-radio__input.is-checked + .el-radio__label { ::v-deep .el-radio__input.is-checked + .el-radio__label {
color: #2069c4; color: $themeColor;
} }
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{ // ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0; // border-radius: 0;
......
src/views/culturalRelic/index.vue
浏览文件 @ b6285e7e
...@@ -420,18 +420,18 @@ export default { ...@@ -420,18 +420,18 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$themeColor: #2069c4;
$text-indent: 16px; $text-indent: 16px;
.cultural-relic { .cultural-relic {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: $themeColor;
// color: #fff; // color: #fff;
.search-bar { .search-bar {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 24px 20%; padding: 24px 20%;
background: rgb($themeColor, 1) url("@/assets/imgs/home/panel-bg.png"); // background: rgb($themeColor, 1) url("@/assets/imgs/home/panel-bg.png");
// background-color: rgba(19, 44, 51,0.7);
// margin-bottom: 40px; // margin-bottom: 40px;
// background-image: url("@/assets/imgs/list/search-bg.png"); // background-image: url("@/assets/imgs/list/search-bg.png");
...@@ -635,7 +635,7 @@ $text-indent: 16px; ...@@ -635,7 +635,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid #2069c4; border: 2px solid $themeColor;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -652,7 +652,9 @@ $text-indent: 16px; ...@@ -652,7 +652,9 @@ $text-indent: 16px;
} }
} }
.img-container { .img-container {
background-color: #fff; // background-color:#939393;
background-color: #42555c;
// #42555c
height: 268px; height: 268px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
...@@ -660,7 +662,7 @@ $text-indent: 16px; ...@@ -660,7 +662,7 @@ $text-indent: 16px;
position: relative; position: relative;
.face-image { .face-image {
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.deco-left-top, .deco-left-top,
...@@ -706,7 +708,7 @@ $text-indent: 16px; ...@@ -706,7 +708,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: $themeColor;
margin-bottom: 18px; margin-bottom: 18px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
...@@ -826,7 +828,7 @@ $text-indent: 16px; ...@@ -826,7 +828,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: $themeColor;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/display/components/BlueStyle.vue
浏览文件 @ b6285e7e
...@@ -705,7 +705,6 @@ export default { ...@@ -705,7 +705,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$themeColor: #2069c4;
$titleFontFamily: SourceHanSerifCN-Bold; $titleFontFamily: SourceHanSerifCN-Bold;
.custom-title { .custom-title {
width: 50px; width: 50px;
...@@ -738,7 +737,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -738,7 +737,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
i { i {
margin-right: 10px; margin-right: 10px;
font-size: 28px; font-size: 28px;
color: #2069c4; color: $themeColor;
} }
.svg-icon { .svg-icon {
font-size: 32px; font-size: 32px;
...@@ -929,7 +928,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -929,7 +928,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
color: #831122; color: #831122;
} }
.collect { .collect {
color: #2069c4; color: $themeColor;
} }
} }
} }
...@@ -1016,7 +1015,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1016,7 +1015,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title { .intro-title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: #2069c4; color: $themeColor;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1328,11 +1327,11 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1328,11 +1327,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex; display: flex;
align-content: center; align-content: center;
padding: 8px 10px; padding: 8px 10px;
// border: 1px solid #2069c4; // border: 1px solid $themeColor;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #2069c4; color: $themeColor;
} }
.svg-icon { .svg-icon {
font-size: 22px; font-size: 22px;
...@@ -1399,7 +1398,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1399,7 +1398,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
} }
.lt-name { .lt-name {
color: #2069c4; color: $themeColor;
cursor: pointer; cursor: pointer;
} }
} }
......
src/views/display/components/ChStyle.vue
浏览文件 @ b6285e7e
...@@ -1055,7 +1055,7 @@ $themeRed: #892325; ...@@ -1055,7 +1055,7 @@ $themeRed: #892325;
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: #2069c4; color: $themeColor;
} }
} }
......
src/views/display/index.vue
浏览文件 @ b6285e7e
...@@ -303,11 +303,11 @@ export default { ...@@ -303,11 +303,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4; $blue: $themeColor;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: $themeColor;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
...@@ -375,7 +375,7 @@ $text-indent: 16px; ...@@ -375,7 +375,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid #2069c4; border: 2px solid $themeColor;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -392,7 +392,7 @@ $text-indent: 16px; ...@@ -392,7 +392,7 @@ $text-indent: 16px;
} }
} }
.img-container { .img-container {
background-color: #f8f8f8; background-color: #fff;
height: 268px; height: 268px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
...@@ -400,7 +400,7 @@ $text-indent: 16px; ...@@ -400,7 +400,7 @@ $text-indent: 16px;
position: relative; position: relative;
.face-image { .face-image {
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.deco-left-top, .deco-left-top,
...@@ -446,7 +446,7 @@ $text-indent: 16px; ...@@ -446,7 +446,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: $themeColor;
margin-bottom: 18px; margin-bottom: 18px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -538,7 +538,7 @@ $text-indent: 16px; ...@@ -538,7 +538,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: $themeColor;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ b6285e7e
...@@ -99,7 +99,7 @@ export default { ...@@ -99,7 +99,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4; $blue: $themeColor;
.home-cr { .home-cr {
background-image: url("@/assets/imgs/home/display-bg.png"); background-image: url("@/assets/imgs/home/display-bg.png");
background-size: cover; background-size: cover;
......
src/views/home/components/Display.vue
浏览文件 @ b6285e7e
...@@ -212,7 +212,7 @@ export default { ...@@ -212,7 +212,7 @@ export default {
} }
li:hover, li:hover,
.active { .active {
background: #2069c4; background: $themeColor;
color: #fff; color: #fff;
} }
} }
......
src/views/home/components/MuseumMap.vue
浏览文件 @ b6285e7e
...@@ -233,7 +233,7 @@ export default { ...@@ -233,7 +233,7 @@ export default {
// areaColor: "#12235c", // areaColor: "#12235c",
// }, // },
// emphasis: { // emphasis: {
// areaColor: "#2069c4", // areaColor: "$themeColor",
// borderWidth: 0, // borderWidth: 0,
// color: "green", // color: "green",
// }, // },
......
src/views/home/components/Virtural.vue
浏览文件 @ b6285e7e
...@@ -81,7 +81,7 @@ export default { ...@@ -81,7 +81,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4; $blue: $themeColor;
.home-virtural { .home-virtural {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/views/home/components/topic/smgz.vue
浏览文件 @ b6285e7e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<img src="@/assets/imgs/topic/smgz/waterfall.png" alt="" /> <img src="@/assets/imgs/topic/smgz/waterfall.png" alt="" />
</div> </div>
<div class="gzmap animate__animated animate__fadeIn delay3"> <div class="gzmap animate__animated animate__fadeIn delay3">
<img src="@/assets/imgs/topic/smgz/map.png" alt="" /> <img src="@/assets/imgs/topic/smgz/map2.png" alt="" />
</div> </div>
<div class="animal animate__animated animate__fadeIn delay1"> <div class="animal animate__animated animate__fadeIn delay1">
<img src="@/assets/imgs/topic/smgz/animal.png" alt="" /> <img src="@/assets/imgs/topic/smgz/animal.png" alt="" />
...@@ -18,13 +18,13 @@ ...@@ -18,13 +18,13 @@
</div> </div>
</div> </div>
<div class="gzregion animate__animated animate__fadeInRight delay4"> <div class="gzregion animate__animated animate__fadeInRight delay4">
<img src="@/assets/imgs/topic/smgz/region.png" alt="" /> <img src="@/assets/imgs/topic/smgz/region2.png" alt="" />
</div> </div>
<div class="archaeology animate__animated animate__fadeInUp delay1"> <div class="archaeology animate__animated animate__fadeInUp delay1">
<img src="@/assets/imgs/topic/smgz/archaeology.png" alt="" /> <img src="@/assets/imgs/topic/smgz/archaeology.png" alt="" />
</div> </div>
<div class="evolution animate__animated animate__bounceIn delay5"> <div class="evolution animate__animated animate__bounceIn delay5">
<img src="@/assets/imgs/topic/smgz/evolution.png" alt="" /> <img src="@/assets/imgs/topic/smgz/evolution2.png" alt="" />
</div> </div>
<div class="title-first animate__animated animate__fadeInDown delay6"> <div class="title-first animate__animated animate__fadeInDown delay6">
<img src="@/assets/imgs/topic/smgz/smgz.png" alt="" /> <img src="@/assets/imgs/topic/smgz/smgz.png" alt="" />
......
src/views/home/index.vue
浏览文件 @ b6285e7e
<template> <template>
<div class="home"> <div class="home">
<!-- <div class="home-item">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
</div> -->
<Boutique class="home-item" ref="Boutique" /> <Boutique class="home-item" ref="Boutique" />
<Virtural class="home-item" ref="Virtural" /> <Virtural class="home-item" ref="Virtural" />
<CulturalRelic class="home-item" ref="CulturalRelic" /> <CulturalRelic class="home-item" ref="CulturalRelic" />
......
src/views/museum/index.vue
浏览文件 @ b6285e7e
...@@ -260,11 +260,11 @@ export default { ...@@ -260,11 +260,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4; $blue: $themeColor;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: $themeColor;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
...@@ -314,7 +314,7 @@ $text-indent: 16px; ...@@ -314,7 +314,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid #2069c4; border: 2px solid $themeColor;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -385,7 +385,7 @@ $text-indent: 16px; ...@@ -385,7 +385,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: $themeColor;
margin-bottom: 18px; margin-bottom: 18px;
} }
.deptName { .deptName {
...@@ -444,7 +444,7 @@ $text-indent: 16px; ...@@ -444,7 +444,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: $themeColor;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/personal/components/Card/index.vue
浏览文件 @ b6285e7e
...@@ -44,7 +44,7 @@ export default { ...@@ -44,7 +44,7 @@ export default {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
$blue: #2069c4; $blue: $themeColor;
.container { .container {
border: 1px solid #f1f1f1; border: 1px solid #f1f1f1;
height: 300px; height: 300px;
......
src/views/personal/components/Info.vue
浏览文件 @ b6285e7e
...@@ -264,7 +264,7 @@ export default { ...@@ -264,7 +264,7 @@ export default {
} }
::v-deep .el-descriptions__extra { ::v-deep .el-descriptions__extra {
.el-button { .el-button {
background-color: #2069c4; background-color: $themeColor;
border-radius: 0; border-radius: 0;
border: none; border: none;
} }
...@@ -300,7 +300,7 @@ export default { ...@@ -300,7 +300,7 @@ export default {
.edit-button { .edit-button {
width: 160px; width: 160px;
height: 50px; height: 50px;
background-color: #2069c4; background-color: $themeColor;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/views/personal/index.vue
浏览文件 @ b6285e7e
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
$blue: #2069c4; $blue: $themeColor;
.personal { .personal {
padding: 40px 0; padding: 40px 0;
background-color: #fff; background-color: #fff;
...@@ -105,13 +105,13 @@ $blue: #2069c4; ...@@ -105,13 +105,13 @@ $blue: #2069c4;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
background-color: #2069c4; background-color: $themeColor;
} }
::v-deep { ::v-deep {
.el-tabs__item:hover, .el-tabs__item:hover,
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #2069c4; color: $themeColor;
} }
} }
::v-deep .el-descriptions { ::v-deep .el-descriptions {
......
src/views/register/index.vue
浏览文件 @ b6285e7e
...@@ -310,7 +310,7 @@ export default { ...@@ -310,7 +310,7 @@ export default {
border-radius: 0px; border-radius: 0px;
&:last-child { &:last-child {
width: 160px; width: 160px;
background-color: #2069c4; background-color: $themeColor;
&:hover { &:hover {
filter: brightness(0.9); filter: brightness(0.9);
} }
......
src/views/virtual/index.vue
浏览文件 @ b6285e7e
...@@ -267,11 +267,11 @@ export default { ...@@ -267,11 +267,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: #2069c4; $blue: $themeColor;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: #2069c4; // background-color: $themeColor;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
...@@ -343,7 +343,7 @@ $text-indent: 16px; ...@@ -343,7 +343,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid #2069c4; border: 2px solid $themeColor;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -414,7 +414,7 @@ $text-indent: 16px; ...@@ -414,7 +414,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #2069c4; color: $themeColor;
margin-bottom: 18px; margin-bottom: 18px;
} }
.deptName { .deptName {
...@@ -477,7 +477,7 @@ $text-indent: 16px; ...@@ -477,7 +477,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: #2069c4; background: $themeColor;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
vue.config.js
浏览文件 @ b6285e7e
...@@ -41,6 +41,7 @@ module.exports = defineConfig({ ...@@ -41,6 +41,7 @@ module.exports = defineConfig({
assetsDir: 'static', assetsDir: 'static',
transpileDependencies: true, transpileDependencies: true,
lintOnSave: false, //关闭eslint检查 lintOnSave: false, //关闭eslint检查
devServer: { devServer: {
host: 'localhost', host: 'localhost',
port: '8080', port: '8080',
...@@ -48,17 +49,18 @@ module.exports = defineConfig({ ...@@ -48,17 +49,18 @@ module.exports = defineConfig({
hot: true, hot: true,
proxy: { proxy: {
'/api': { '/api': {
// target: 'http://192.168.1.230:9562/api', // target: 'http://192.168.1.230:9562/api',//测试内网
target: 'http://222.85.214.245:9602/api', target: 'http://222.85.214.245:9602/api',//测试外网
// target:'http://192.168.1.230:9562/api', target: 'http://114.115.157.218:9602/api',//生产
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' '^/api': ''
} }
}, },
'/files':{ '/files': {
// target:'http://192.168.1.230:9563/files', // target:'http://192.168.1.230:9563/files',//测试内网
target: 'http://222.85.214.245:9604/files', // target: 'http://222.85.214.245:9604/files',//测试外网
target: 'http://114.115.157.218:9602/files',//生产
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/files': '' '^/files': ''
...@@ -66,57 +68,13 @@ module.exports = defineConfig({ ...@@ -66,57 +68,13 @@ module.exports = defineConfig({
} }
} }
}, },
// configureWebpack: { css: {
// // 采用cdn的方式,所以将以下这些文件配置不打包 loaderOptions: {
// externals: { sass: {
// vue: "vue", additionalData: `@import "@/assets/styles/variable.scss";` //引入全局变量
// 'vue-router': 'VueRouter', }
// vuex: 'Vuex', }
// axios: 'axios', },
// 'core-js': 'core-js',
// },
// resolve: {
// alias: {
// '@': resolve('src')
// }
// },
// optimization: {
// splitChunks: {
// cacheGroups: {
// vendor: {
// //第三方库抽离
// chunks: "all",
// test: /node_modules/,
// name: "vendor",
// minChunks: 1, //在分割之前，这个代码块最小应该被引用的次数
// maxInitialRequests: 5,
// minSize: 0, //大于0个字节
// priority: 100 //权重
// },
// common: {
// //公用模块抽离
// chunks: "all",
// test: /[\\/]src[\\/]utils[\\/]/,
// name: "common",
// minChunks: 1,
// maxInitialRequests: 5,
// minSize: 0, //大于0个字节
// priority: 60
// },
// // styles: {
// // //样式抽离
// // name: "styles",
// // test: /\.(sa|sc|c)ss$/,
// // chunks: "all",
// // enforce: true
// // },
// runtimeChunk: {
// name: "manifest"
// }
// }
// }
// }
// },
chainWebpack: config => { chainWebpack: config => {
config config
.plugin('html') .plugin('html')
...@@ -141,6 +99,58 @@ module.exports = defineConfig({ ...@@ -141,6 +99,58 @@ module.exports = defineConfig({
symbolId: 'icon-[name]' symbolId: 'icon-[name]'
}) })
.end() .end()
// configureWebpack: {
// // 采用cdn的方式,所以将以下这些文件配置不打包
// externals: {
// vue: "vue",
// 'vue-router': 'VueRouter',
// vuex: 'Vuex',
// axios: 'axios',
// 'core-js': 'core-js',
// },
// resolve: {
// alias: {
// '@': resolve('src')
// }
// },
// optimization: {
// splitChunks: {
// cacheGroups: {
// vendor: {
// //第三方库抽离
// chunks: "all",
// test: /node_modules/,
// name: "vendor",
// minChunks: 1, //在分割之前，这个代码块最小应该被引用的次数
// maxInitialRequests: 5,
// minSize: 0, //大于0个字节
// priority: 100 //权重
// },
// common: {
// //公用模块抽离
// chunks: "all",
// test: /[\\/]src[\\/]utils[\\/]/,
// name: "common",
// minChunks: 1,
// maxInitialRequests: 5,
// minSize: 0, //大于0个字节
// priority: 60
// },
// // styles: {
// // //样式抽离
// // name: "styles",
// // test: /\.(sa|sc|c)ss$/,
// // chunks: "all",
// // enforce: true
// // },
// runtimeChunk: {
// name: "manifest"
// }
// }
// }
// }
// },
// cdn // cdn
// if (IS_PRODUCTION) { // if (IS_PRODUCTION) {
// config.plugin('html').tap(args => { // config.plugin('html').tap(args => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论