提交 b6285e7e authored 作者: 龙菲's avatar 龙菲

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

上级 02397310
......@@ -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"
......
差异被折叠。
差异被折叠。
......@@ -44,7 +44,7 @@ li {
//一些公共样式
.empty-space {
height: 100px;
background-color: #2069c4;
background-color: $themeColor;
width: 100%
}
......
$themeColor:#223e36;
// $themeColor: #2069c4;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
\ No newline at end of file
......@@ -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;
......
......@@ -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;
......
<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;
}
}
}
......
......@@ -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;
}
}
......
......@@ -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;
......
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -108,7 +108,6 @@ export default {
</script>
<style scoped lang="scss">
$themeColor: #2069c4;
.slide-img-group {
height: 100%;
}
......
......@@ -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
......@@ -23,6 +23,7 @@ import {
import './permission'
import '@/rem'
Vue.config.productionTip = false
Vue.use(ElementUI);
// 全局注册动画效果
......
<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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
}
}
......
......@@ -1055,7 +1055,7 @@ $themeRed: #892325;
a:hover {
cursor: pointer;
color: #2069c4;
color: $themeColor;
}
}
......
......@@ -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;
......
......@@ -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;
......
......@@ -212,7 +212,7 @@ export default {
}
li:hover,
.active {
background: #2069c4;
background: $themeColor;
color: #fff;
}
}
......
......@@ -233,7 +233,7 @@ export default {
// areaColor: "#12235c",
// },
// emphasis: {
// areaColor: "#2069c4",
// areaColor: "$themeColor",
// borderWidth: 0,
// color: "green",
// },
......
......@@ -81,7 +81,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: #2069c4;
$blue: $themeColor;
.home-virtural {
display: flex;
flex-direction: column;
......
......@@ -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="" />
......
<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" />
......
......@@ -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;
......
......@@ -44,7 +44,7 @@ export default {
</script>
<style lang='scss' scoped>
$blue: #2069c4;
$blue: $themeColor;
.container {
border: 1px solid #f1f1f1;
height: 300px;
......
......@@ -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;
......
......@@ -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 {
......
......@@ -310,7 +310,7 @@ export default {
border-radius: 0px;
&:last-child {
width: 160px;
background-color: #2069c4;
background-color: $themeColor;
&:hover {
filter: brightness(0.9);
}
......
......@@ -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;
......
......@@ -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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论