Skip to content

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

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

上级 02397310
隐藏空白字符变更
内嵌 并排
正在显示 包含 485 行增加 和 307 行删除
package.json
浏览文件 @ b6285e7e
......@@ -25,6 +25,7 @@
"svgo": "^2.8.0",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vue-slidepage": "^1.0.0",
"vue-video-player": "^5.0.2",
"vuex": "^3.6.2",
"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 {
//一些公共样式
.empty-space {
height: 100px;
background-color: #2069c4;
background-color: $themeColor;
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 {
color: #5c5e66;
display: flex;
align-items: center;
color: #2069c4;
color: $themeColor;
font-size: 38px;
}
.progress-bar-bg {
......@@ -263,7 +263,7 @@ export default {
margin: 0 10px;
}
.progress-bar {
background-color: #2069c4;
background-color: $themeColor;
width: 0%;
height: 10px;
border-radius: 5px;
......
src/components/Footer/index.vue
浏览文件 @ b6285e7e
......@@ -153,7 +153,7 @@ export default {
padding: 30px 0;
justify-content: center;
align-items: center;
background-color: #2069c4;
background-color: $themeColor;
flex-direction: column;
color: #fefefe;
font-size: 14px;
......
src/components/ListBanner/index.vue
浏览文件 @ b6285e7e
<template>
<div class="banner wow animate__animated animate__fadeIn">
<div class="title wow animate__animated animate__fadeInLeft">
<div class="banner wow animate__animated animate__fadeIn">
<!-- <div class="title wow animate__animated animate__fadeInLeft">
<div class="img-container">
<img src="@/assets/imgs/list/ding.png" alt="" srcset="" />
</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>
</template>
......@@ -24,11 +31,43 @@ export default {
<style lang='scss' scoped>
.banner {
width: 100%;
height: 222px;
background-image: url("@/assets/imgs/list/banner.png");
background-size:100% 100%;
display: flex;
align-items: center;
height: 360px;
position: relative;
background-color: rgba($themeColor, 0.9);
// height: 222px;
// 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 {
padding: 0 13%;
display: flex;
......@@ -40,13 +79,14 @@ export default {
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.text {
font-size: 28px;
// font-family: "Alibaba-PuHuiTi";
font-weight: 400;
color: #2069c4;
color: $themeColor;
}
}
}
......
src/components/MenuList/index.vue
浏览文件 @ b6285e7e
......@@ -64,15 +64,15 @@ export default {
.el-menu-item {
background-color: #f5f5f9;
font-size: 16px;
// color: #2069c4;
// color: $themeColor;
&:hover {
background-color: #2069c4;
background-color: $themeColor;
color: #fff;
}
}
.el-menu-item.is-active {
color: #2069c4;
color: $themeColor;
font-weight: bold;
}
.blueStyle {
......@@ -87,7 +87,7 @@ export default {
text-overflow: ellipsis;
&:hover {
background: rgba($color: #fff, $alpha: 0.6);
color: #2069c4;
color: $themeColor;
font-weight: bold;
}
}
......
src/components/NavBar/index.vue
浏览文件 @ b6285e7e
......@@ -518,7 +518,9 @@ export default {
</script>
<style lang="scss" scoped>
$themeColor: #2069c4;
// $themeColor: $themeColor;
$themeColor: $themeColor;
.home-nav {
position: absolute;
top: 0;
......@@ -528,7 +530,7 @@ $themeColor: #2069c4;
}
.header-fixed {
position: fixed !important;
background-color: #2069c4 !important;
background-color: $themeColor !important;
z-index: 99;
top: 0;
}
......@@ -557,7 +559,7 @@ $themeColor: #2069c4;
height: 100px;
width: 100%;
transition: all 0.5s ease;
background-color: #2069c4;
background-color: $themeColor;
// background-color: #fff;
// background-image: url('@/assets/imgs/home/panel-bg.png');
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
......@@ -771,7 +773,7 @@ $themeColor: #2069c4;
font-size: 14px;
cursor: pointer;
&:hover {
color: #2069c4;
color: $themeColor;
}
}
}
......@@ -794,12 +796,12 @@ $themeColor: #2069c4;
padding: 16px !important;
border-radius: 0 !important;
width: 100%;
background-color: #2069c4;
background-color: $themeColor;
color: #fff;
font-size: 14px;
&:hover {
filter: brightness(0.9) !important;
background-color: #2069c4;
background-color: $themeColor;
color: #fff;
border: none;
border-radius: 0 !important;
......@@ -841,17 +843,17 @@ $themeColor: #2069c4;
cursor: pointer;
position: relative;
&:hover {
color: #2069c4;
color: $themeColor;
}
}
.active {
color: #2069c4;
color: $themeColor;
}
.line {
width: 18px;
height: 4px;
background-color: #2069c4;
background-color: $themeColor;
// border-radius: 4px;
position: absolute;
left: 24px;
......
src/components/ReaderOperations/collect.vue
浏览文件 @ b6285e7e
......@@ -72,7 +72,7 @@
},
selectColor: {
type: String,
default: "#2069c4",
default: "$themeColor",
},
},
data() {
......@@ -146,7 +146,7 @@
}
.el-button--text {
color: #2069c4;
color: $themeColor;
}
::v-deep .el-input-group__append {
......@@ -159,7 +159,7 @@
}
.el-button--primary {
border: none;
background-color: #2069c4;
background-color: $themeColor;
}
}
</style>
\ No newline at end of file
src/components/ReaderOperations/index.vue
浏览文件 @ b6285e7e
......@@ -136,7 +136,7 @@ export default {
},
selectColor: {
type: String,
default: "#2069c4",
default: "$themeColor",
},
},
data() {
......@@ -260,7 +260,7 @@ export default {
}
.el-button--text {
color: #2069c4;
color: $themeColor;
}
.copy {
......@@ -290,7 +290,7 @@ export default {
}
.el-button--primary {
border: none;
background-color: #2069c4;
background-color: $themeColor;
}
}
</style>
\ No newline at end of file
src/components/ReaderOperations/like.vue
浏览文件 @ b6285e7e
......@@ -70,7 +70,7 @@
},
selectColor: {
type: String,
default: "#2069c4",
default: "$themeColor",
},
},
data() {
......@@ -153,7 +153,7 @@
}
.el-button--text {
color: #2069c4;
color: $themeColor;
}
::v-deep .el-input-group__append {
padding: 0 40px;
......@@ -165,7 +165,7 @@
}
.el-button--primary {
border: none;
background-color: #2069c4;
background-color: $themeColor;
}
}
</style>
\ No newline at end of file
src/components/ReaderOperations/share.vue
浏览文件 @ b6285e7e
......@@ -63,7 +63,7 @@ export default {
},
selectColor: {
type: String,
default: "#2069c4",
default: "$themeColor",
},
},
data() {
......@@ -133,7 +133,7 @@ export default {
}
.el-button--text {
color: #2069c4;
color: $themeColor;
}
.copy {
......@@ -163,7 +163,7 @@ export default {
}
.el-button--primary {
border: none;
background-color: #2069c4;
background-color: $themeColor;
}
}
</style>
\ No newline at end of file
src/components/SlideImageGroup/index.vue
浏览文件 @ b6285e7e
......@@ -108,7 +108,6 @@ export default {
</script>
<style scoped lang="scss">
$themeColor: #2069c4;
.slide-img-group {
height: 100%;
}
......
src/components/Video/index.vue
浏览文件 @ b6285e7e
......@@ -120,8 +120,8 @@ export default {
}
.blue {
.play-btn {
border: 2px solid #2069c4;
color: #2069c4;
border: 2px solid $themeColor;
color: $themeColor;
}
}
</style>
\ No newline at end of file
src/main.js
浏览文件 @ b6285e7e
......@@ -23,6 +23,7 @@ import {
import './permission'
import '@/rem'
Vue.config.productionTip = false
Vue.use(ElementUI);
// 全局注册动画效果
......
src/views/boutique/components/SMGZ.vue
浏览文件 @ b6285e7e
......@@ -55,7 +55,7 @@
<img src="@/assets/imgs/boutique/smgz/2_intro/title.png" alt="" />
</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="title">展览简介</div>
<div class="main">
......@@ -65,35 +65,19 @@
<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 class="text wow animate__animated animate__fadeInUp">
<div class="title">展览简介</div>
<div class="main">
<p>
贵州在国际学术界享有“古生物王国”的美誉，境内瓮安生物群、凯里生物群、青岩生物群、关岭动物群等11个古生物群的发现，在全球具有石破天惊的影响。
</p>
<p>
展览立足独有而丰富的古生物标本以及丰厚的科研成果，用博物馆展览语言全面阐释“神秘贵州”古生物化石承载的地史信息，传播地学知识，增强文化自信，助推生态文明建设，促进人类和谐发展。
</p>
</div>
</div>
</div>
<div class="hall smgz-item">
......@@ -101,7 +85,8 @@
<div
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 class="hall-content-intro">
<div
......@@ -150,7 +135,8 @@
<div
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
class="crs-content-buttons wow animate__animated animate__fadeInUp"
......@@ -201,7 +187,8 @@
<div
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 class="guide-content-imgs">
<div class="img-container wow animate__animated animate__fadeInLeft">
......@@ -223,7 +210,8 @@
<div class="modal">
<svg-icon icon-class="360"></svg-icon>
<div class="vr-text">
<svg-icon icon-class="dianji"></svg-icon> 点击进入神秘贵州展厅
<svg-icon icon-class="dianji"></svg-icon>
点击进入神秘贵州展厅
</div>
</div>
</div>
......@@ -305,18 +293,11 @@
</div>
</div>
</div>
<m-dialog v-if="showVideo" @close="showVideo = false">
<div class="smgz-video">
<video-player :src="src"></video-player>
</div>
</m-dialog>
<!-- <m-dialog v-if="showVrDialog" @close="showVrDialog = false">
<div class="smgz-video">
</div>
</m-dialog> -->
</div>
</template>
......@@ -326,6 +307,7 @@ import "swiper/dist/css/swiper.css";
import MDialog from "@/components/MDialog";
import videoPlayer from "@/components/VideoPlayer";
import { crPics } from "../data";
// import { SlideContainer, SlidePage } from 'vue-slidepage'
export default {
name: "SMGZ",
components: {
......@@ -333,6 +315,8 @@ export default {
swiperSlide,
MDialog,
videoPlayer,
// SlideContainer,
// SlidePage
},
data() {
let that = this;
......@@ -426,6 +410,26 @@ export default {
showVrIFrame: false,
vrIFrameLoaded: 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: {
......@@ -535,6 +539,11 @@ export default {
top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
);
},
next() {
// 向下滚动一页
this.$refs.fullpage.api.moveSectionDown();
},
},
};
</script>
......@@ -593,6 +602,7 @@ export default {
}
.left-title {
height: sHeight(676);
width: sHeight(400);
left: sWidth(368);
bottom: sHeight(188);
z-index: 1;
......@@ -609,7 +619,10 @@ export default {
}
}
.ms {
height: sHeight(829);
width: sWidth(800);
height: sHeight(800);
// width: 1587px;
// height: 922px;
right: 0;
bottom: 0;
}
......@@ -641,6 +654,11 @@ export default {
.cover {
width: 100%;
top: sHeight(20);
display: flex;
justify-content: center;
img {
width: 88%;
}
}
.cover2 {
top: sHeight(230);
......@@ -659,53 +677,68 @@ export default {
}
.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;
}
}
}
position: absolute;
bottom: 0;
color: #fff;
background-color: rgba(0, 23, 58, 0.75);
padding: 32px 56px;
.title {
font-size: 28px;
}
.main {
font-size: 18px;
font-weight: normal;
}
}
// .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 {
......@@ -726,6 +759,9 @@ export default {
padding-top: 200px;
.hall-content-title {
margin-bottom: 70px;
font-size: 42px;
color: #fff;
letter-spacing: 2px;
}
.hall-content-intro {
display: flex;
......@@ -808,6 +844,9 @@ export default {
align-items: center;
.crs-content-title {
margin-bottom: 70px;
font-size: 42px;
color: #00173a;
letter-spacing: 2px;
}
// .crs-content-buttons {
// display: flex;
......@@ -907,6 +946,9 @@ export default {
align-items: center;
.guide-content-title {
margin-bottom: 70px;
font-size: 42px;
color: #fff;
letter-spacing: 2px;
}
.guide-content-imgs {
display: flex;
......
src/views/boutique/index.vue
浏览文件 @ b6285e7e
<template>
<div class="boutique">
<div class="boutique-header">
<!-- <div class="boutique-header">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
<ul class="tabs">
<li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
......@@ -9,7 +9,20 @@
</div>
</li>
</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="focus-content" v-if="activeTab">
......@@ -22,7 +35,10 @@
<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`)"
:src="
require(`@/assets/imgs/boutique/${activeTab}.jpg`) ||
require(`@/assets/imgs/boutique/${activeTab}.png`)
"
alt=""
/>
</div>
......@@ -39,7 +55,7 @@ import SMGZ from "./components/SMGZ";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { NavBar, Footer, SMGZ},
components: { NavBar, Footer, SMGZ },
data() {
return {
tabs: [
......@@ -50,6 +66,7 @@ export default {
{ tab: "cjm", name: "长角苗民俗及文化遗产" },
],
activeTab: "",
// content: { title: "四渡赤水" }
};
},
......@@ -101,12 +118,12 @@ export default {
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", // 平滑移动
});
// let el = document.getElementsByClassName("boutique-header")[0];
// let height = el.offsetHeight - this.navbarHeight; //5像素偏移量
// document.documentElement.scroll({
// top: height,
// behavior: "smooth", // 平滑移动
// });
},
},
};
......@@ -115,13 +132,65 @@ export default {
<style lang="scss" scoped>
.boutique {
min-height: calc(100% - 300px);
.boutique-header {
position: relative;
overflow: hidden;
> img {
height: 500px;
object-fit: cover;
// .boutique-header {
// position: relative;
// overflow: hidden;
// > img {
// 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 {
height: 500px;
......@@ -153,59 +222,59 @@ export default {
color: #666;
}
}
ul.tabs {
display: flex;
justify-content: space-between;
position: absolute;
z-index: 1;
padding: 10px 0;
width: 100%;
bottom: 0;
// ul.tabs {
// display: flex;
// justify-content: space-between;
// position: absolute;
// z-index: 1;
// padding: 10px 0;
// width: 100%;
// bottom: 0;
> li {
flex: 1;
> div {
text-align: center;
> span {
font-size: 20px;
color: #333;
font-weight: 600;
font-family: "楷体";
&:hover {
cursor: pointer;
position: relative;
color: #003fa7;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid #2069c4;
border-radius: 30px;
}
}
}
// > li {
// flex: 1;
// > div {
// text-align: center;
// > span {
// font-size: 20px;
// color: #333;
// font-weight: 600;
// font-family: "楷体";
// &:hover {
// cursor: pointer;
// position: relative;
// color: #003fa7;
// &::after {
// content: "";
// position: absolute;
// left: 0;
// width: 100%;
// bottom: -10px;
// border-bottom: 3px solid $themeColor;
// border-radius: 30px;
// }
// }
// }
&.active {
> span {
position: relative;
color: #003fa7;
text-shadow: 6px 2px 2px #999;
&::after {
content: "";
position: absolute;
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid #2069c4;
border-radius: 30px;
}
}
}
}
}
}
// &.active {
// > span {
// position: relative;
// color: #003fa7;
// text-shadow: 6px 2px 2px #999;
// &::after {
// content: "";
// position: absolute;
// left: 0;
// width: 100%;
// bottom: -10px;
// border-bottom: 3px solid $themeColor;
// border-radius: 30px;
// }
// }
// }
// }
// }
// }
.boutique-content {
.focus-content {
// padding: 20px 0;
......
src/views/ccProduct/index.vue
浏览文件 @ b6285e7e
......@@ -296,11 +296,11 @@ export default {
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$blue: $themeColor;
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: #2069c4;
// background-color: $themeColor;
// color: #fff;
.content-wrapper {
padding-top: 60px;
......@@ -404,7 +404,7 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid #2069c4;
border: 2px solid $themeColor;
.face-image {
transform: scale(1.2);
}
......@@ -475,7 +475,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
color: $themeColor;
margin-bottom: 18px;
}
.desc-container {
......@@ -592,7 +592,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #2069c4;
background: $themeColor;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
src/views/culturalRelic/Detail.vue
浏览文件 @ b6285e7e
......@@ -601,7 +601,6 @@ export default {
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$themeColor: #2069c4;
$titleFontFamily: SourceHanSerifCN-Bold;
.custom-title {
width: 50px;
......@@ -698,7 +697,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title {
font-size: 26px;
font-weight: 400;
color: #2069c4;
color: $themeColor;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
......@@ -851,7 +850,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex;
justify-content: center;
align-items: center;
background-color: #2069c4;
background-color: $themeColor;
margin: 20px 0;
color: #fff;
cursor: pointer;
......@@ -882,7 +881,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
color: #831122;
}
.collect {
color: #2069c4;
color: $themeColor;
}
}
}
......@@ -1094,10 +1093,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 214px;
position: relative;
cursor: pointer;
background-color: #939393;
img {
width: 100%;
height: 100%;
object-fit: fill;
object-fit: contain;
}
}
.cr-name {
......@@ -1154,7 +1154,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-family: SourceHanSerifCN-Bold;
}
::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{
// border-radius: 0;
......
src/views/culturalRelic/index.vue
浏览文件 @ b6285e7e
......@@ -420,18 +420,18 @@ export default {
</script>
<style lang="scss" scoped>
$themeColor: #2069c4;
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: #2069c4;
// background-color: $themeColor;
// color: #fff;
.search-bar {
display: flex;
align-items: center;
flex-direction: column;
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;
// background-image: url("@/assets/imgs/list/search-bg.png");
......@@ -635,7 +635,7 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid #2069c4;
border: 2px solid $themeColor;
.face-image {
transform: scale(1.2);
}
......@@ -652,7 +652,9 @@ $text-indent: 16px;
}
}
.img-container {
background-color: #fff;
// background-color:#939393;
background-color: #42555c;
// #42555c
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
......@@ -660,7 +662,7 @@ $text-indent: 16px;
position: relative;
.face-image {
height: 100%;
object-fit: cover;
object-fit: contain;
transition: all 0.5s ease;
}
.deco-left-top,
......@@ -706,7 +708,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
color: $themeColor;
margin-bottom: 18px;
width: 100%;
white-space: nowrap;
......@@ -826,7 +828,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #2069c4;
background: $themeColor;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
src/views/display/components/BlueStyle.vue
浏览文件 @ b6285e7e
......@@ -705,7 +705,6 @@ export default {
<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$themeColor: #2069c4;
$titleFontFamily: SourceHanSerifCN-Bold;
.custom-title {
width: 50px;
......@@ -738,7 +737,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
i {
margin-right: 10px;
font-size: 28px;
color: #2069c4;
color: $themeColor;
}
.svg-icon {
font-size: 32px;
......@@ -929,7 +928,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
color: #831122;
}
.collect {
color: #2069c4;
color: $themeColor;
}
}
}
......@@ -1016,7 +1015,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title {
font-size: 26px;
font-weight: 400;
color: #2069c4;
color: $themeColor;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
......@@ -1328,11 +1327,11 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid #2069c4;
// border: 1px solid $themeColor;
color: #666;
cursor: pointer;
&:hover {
color: #2069c4;
color: $themeColor;
}
.svg-icon {
font-size: 22px;
......@@ -1399,7 +1398,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
.lt-name {
color: #2069c4;
color: $themeColor;
cursor: pointer;
}
}
......
src/views/display/components/ChStyle.vue
浏览文件 @ b6285e7e
......@@ -1055,7 +1055,7 @@ $themeRed: #892325;
a:hover {
cursor: pointer;
color: #2069c4;
color: $themeColor;
}
}
......
src/views/display/index.vue
浏览文件 @ b6285e7e
......@@ -303,11 +303,11 @@ export default {
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$blue: $themeColor;
$text-indent: 16px;
.display {
width: 100%;
// background-color: #2069c4;
// background-color: $themeColor;
// color: #fff;
.content-wrapper {
padding-top: 60px;
......@@ -375,7 +375,7 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid #2069c4;
border: 2px solid $themeColor;
.face-image {
transform: scale(1.2);
}
......@@ -392,7 +392,7 @@ $text-indent: 16px;
}
}
.img-container {
background-color: #f8f8f8;
background-color: #fff;
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
......@@ -400,7 +400,7 @@ $text-indent: 16px;
position: relative;
.face-image {
height: 100%;
object-fit: cover;
object-fit: contain;
transition: all 0.5s ease;
}
.deco-left-top,
......@@ -446,7 +446,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
color: $themeColor;
margin-bottom: 18px;
white-space: nowrap;
overflow: hidden;
......@@ -538,7 +538,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #2069c4;
background: $themeColor;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ b6285e7e
......@@ -99,7 +99,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$blue: $themeColor;
.home-cr {
background-image: url("@/assets/imgs/home/display-bg.png");
background-size: cover;
......
src/views/home/components/Display.vue
浏览文件 @ b6285e7e
......@@ -212,7 +212,7 @@ export default {
}
li:hover,
.active {
background: #2069c4;
background: $themeColor;
color: #fff;
}
}
......
src/views/home/components/MuseumMap.vue
浏览文件 @ b6285e7e
......@@ -233,7 +233,7 @@ export default {
// areaColor: "#12235c",
// },
// emphasis: {
// areaColor: "#2069c4",
// areaColor: "$themeColor",
// borderWidth: 0,
// color: "green",
// },
......
src/views/home/components/Virtural.vue
浏览文件 @ b6285e7e
......@@ -81,7 +81,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$blue: $themeColor;
.home-virtural {
display: flex;
flex-direction: column;
......
src/views/home/components/topic/smgz.vue
浏览文件 @ b6285e7e
......@@ -4,7 +4,7 @@
<img src="@/assets/imgs/topic/smgz/waterfall.png" alt="" />
</div>
<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 class="animal animate__animated animate__fadeIn delay1">
<img src="@/assets/imgs/topic/smgz/animal.png" alt="" />
......@@ -18,13 +18,13 @@
</div>
</div>
<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 class="archaeology animate__animated animate__fadeInUp delay1">
<img src="@/assets/imgs/topic/smgz/archaeology.png" alt="" />
</div>
<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 class="title-first animate__animated animate__fadeInDown delay6">
<img src="@/assets/imgs/topic/smgz/smgz.png" alt="" />
......
src/views/home/index.vue
浏览文件 @ b6285e7e
<template>
<div class="home">
<!-- <div class="home-item">
<img src="@/assets/imgs/boutique/banner.jpg" width="100%" />
</div> -->
<Boutique class="home-item" ref="Boutique" />
<Virtural class="home-item" ref="Virtural" />
<CulturalRelic class="home-item" ref="CulturalRelic" />
......
src/views/museum/index.vue
浏览文件 @ b6285e7e
......@@ -260,11 +260,11 @@ export default {
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$blue: $themeColor;
$text-indent: 16px;
.display {
width: 100%;
// background-color: #2069c4;
// background-color: $themeColor;
// color: #fff;
.content-wrapper {
padding-top: 60px;
......@@ -314,7 +314,7 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid #2069c4;
border: 2px solid $themeColor;
.face-image {
transform: scale(1.2);
}
......@@ -385,7 +385,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
color: $themeColor;
margin-bottom: 18px;
}
.deptName {
......@@ -444,7 +444,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #2069c4;
background: $themeColor;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
src/views/personal/components/Card/index.vue
浏览文件 @ b6285e7e
......@@ -44,7 +44,7 @@ export default {
</script>
<style lang='scss' scoped>
$blue: #2069c4;
$blue: $themeColor;
.container {
border: 1px solid #f1f1f1;
height: 300px;
......
src/views/personal/components/Info.vue
浏览文件 @ b6285e7e
......@@ -264,7 +264,7 @@ export default {
}
::v-deep .el-descriptions__extra {
.el-button {
background-color: #2069c4;
background-color: $themeColor;
border-radius: 0;
border: none;
}
......@@ -300,7 +300,7 @@ export default {
.edit-button {
width: 160px;
height: 50px;
background-color: #2069c4;
background-color: $themeColor;
display: flex;
justify-content: center;
align-items: center;
......
src/views/personal/index.vue
浏览文件 @ b6285e7e
......@@ -53,7 +53,7 @@ export default {
</script>
<style lang='scss' scoped>
$blue: #2069c4;
$blue: $themeColor;
.personal {
padding: 40px 0;
background-color: #fff;
......@@ -105,13 +105,13 @@ $blue: #2069c4;
}
::v-deep .el-tabs__active-bar {
background-color: #2069c4;
background-color: $themeColor;
}
::v-deep {
.el-tabs__item:hover,
.el-tabs__item.is-active {
color: #2069c4;
color: $themeColor;
}
}
::v-deep .el-descriptions {
......
src/views/register/index.vue
浏览文件 @ b6285e7e
......@@ -310,7 +310,7 @@ export default {
border-radius: 0px;
&:last-child {
width: 160px;
background-color: #2069c4;
background-color: $themeColor;
&:hover {
filter: brightness(0.9);
}
......
src/views/virtual/index.vue
浏览文件 @ b6285e7e
......@@ -267,11 +267,11 @@ export default {
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$blue: $themeColor;
$text-indent: 16px;
.display {
width: 100%;
// background-color: #2069c4;
// background-color: $themeColor;
// color: #fff;
.content-wrapper {
padding-top: 60px;
......@@ -343,7 +343,7 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid #2069c4;
border: 2px solid $themeColor;
.face-image {
transform: scale(1.2);
}
......@@ -414,7 +414,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: #2069c4;
color: $themeColor;
margin-bottom: 18px;
}
.deptName {
......@@ -477,7 +477,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #2069c4;
background: $themeColor;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
vue.config.js
浏览文件 @ b6285e7e
......@@ -41,6 +41,7 @@ module.exports = defineConfig({
assetsDir: 'static',
transpileDependencies: true,
lintOnSave: false, //关闭eslint检查
devServer: {
host: 'localhost',
port: '8080',
......@@ -48,17 +49,18 @@ module.exports = defineConfig({
hot: true,
proxy: {
'/api': {
// target: 'http://192.168.1.230:9562/api',
target: 'http://222.85.214.245:9602/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://114.115.157.218:9602/api',//生产
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/files':{
// target:'http://192.168.1.230:9563/files',
target: 'http://222.85.214.245:9604/files',
'/files': {
// target:'http://192.168.1.230:9563/files',//测试内网
// target: 'http://222.85.214.245:9604/files',//测试外网
target: 'http://114.115.157.218:9602/files',//生产
changeOrigin: true,
pathRewrite: {
'^/files': ''
......@@ -66,57 +68,13 @@ module.exports = defineConfig({
}
}
},
// 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"
// }
// }
// }
// }
// },
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/styles/variable.scss";` //引入全局变量
}
}
},
chainWebpack: config => {
config
.plugin('html')
......@@ -141,6 +99,58 @@ module.exports = defineConfig({
symbolId: 'icon-[name]'
})
.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
// if (IS_PRODUCTION) {
// config.plugin('html').tap(args => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论