Skip to content

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

完善以图搜图静态页面；修改颜色变量

上级 d65f7bf6
隐藏空白字符变更
内嵌 并排
正在显示 包含 465 行增加 和 223 行删除
README.md
浏览文件 @ 69d9e5b7
...@@ -7,7 +7,7 @@ cnpm install 或者 npm install 由于vue-video-player 建议用cnpm install保 ...@@ -7,7 +7,7 @@ cnpm install 或者 npm install 由于vue-video-player 建议用cnpm install保
### Compiles and hot-reloads for development ### Compiles and hot-reloads for development
``` ```
npm run serve npm run dev
``` ```
### Compiles and minifies for production ### Compiles and minifies for production
......
package.json
浏览文件 @ 69d9e5b7
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-slidepage": "^1.0.0", "vue-slidepage": "^1.0.0",
"vue-video-player": "^5.0.2", "vue-video-player": "^5.0.2",
"vue-waterfall-easy": "^2.4.4",
"vuex": "^3.6.2", "vuex": "^3.6.2",
"wowjs": "^1.1.3" "wowjs": "^1.1.3"
}, },
......
src/assets/styles/index.scss
浏览文件 @ 69d9e5b7
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
} }
#app { #app {
// font-family: "Alibaba-PuHuiTi",Avenir, Helvetica, Arial, sans-serif; // font-family: "Alibaba-pu-hui-ti",Avenir, Helvetica, Arial, sans-serif;
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
...@@ -42,7 +42,7 @@ li { ...@@ -42,7 +42,7 @@ li {
//一些公共样式 //一些公共样式
.empty-space { .empty-space {
height: 100px; height: 100px;
background-color: $deepBlue; background-color: $deep-blue;
width: 100%; width: 100%;
} }
...@@ -84,12 +84,12 @@ li { ...@@ -84,12 +84,12 @@ li {
.btn-quicknext, .btn-quicknext,
.number { .number {
background: transparent !important; background: transparent !important;
border: 1px solid $deepBlue !important; border: 1px solid $deep-blue !important;
color: $deepBlue !important; color: $deep-blue !important;
} }
.number.active { .number.active {
background: $deepBlue !important; background: $deep-blue !important;
color: #fff !important; color: #fff !important;
} }
} }
...@@ -227,7 +227,7 @@ li { ...@@ -227,7 +227,7 @@ li {
background: #fff; background: #fff;
min-width: 0; min-width: 0;
margin: 0 16px; margin: 0 16px;
color: $deepBlue; color: $deep-blue;
border-radius: 0 !important; border-radius: 0 !important;
} }
...@@ -277,13 +277,13 @@ li { ...@@ -277,13 +277,13 @@ li {
.el-checkbox__input.is-checked { .el-checkbox__input.is-checked {
.el-checkbox__inner { .el-checkbox__inner {
background-color: $deepBlue; background-color: $deep-blue;
border-color: $deepBlue; border-color: $deep-blue;
} }
+.el-checkbox__label { +.el-checkbox__label {
font-weight: 600; font-weight: 600;
color: $deepBlue; color: $deep-blue;
} }
} }
} }
......
src/assets/styles/variable.scss
浏览文件 @ 69d9e5b7
// $deepBlue:#223e36;
// $deepBlue: #2069c4;
// $deepBlue:#132c33;
$deepBlue: #252F57;
$yellow: #dfab46;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
$font-size-sm: 14px; $deep-blue: #252F57;//主题深蓝
$font-size-base: 16px; $yellow: #dfab46;//辅色黄色，用于高亮，选中菜单等
$font-size-lg: 22px; $pu-hui-ti: "Alibaba-pu-hui-ti";//阿里巴巴普惠体
$siyuan-song-bold: "SourceHanSerifCN-Bold";//思源宋体加粗
$nav-height: 120px; $font-size-sm: 14px;//小号字体
$font-size-base: 16px;//普通字体
$font-size-lg: 22px;//大号字体
$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; $nav-height: 120px;//导航高度
\ No newline at end of file
$default-font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;//默认字体
\ No newline at end of file
src/components/AudioPlayer/NormalPlayer.vue
浏览文件 @ 69d9e5b7
...@@ -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: $deepBlue; color: $deep-blue;
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: $deepBlue; background-color: $deep-blue;
width: 0%; width: 0%;
height: 10px; height: 10px;
border-radius: 5px; border-radius: 5px;
......
src/components/Breadcrumb/index.vue
浏览文件 @ 69d9e5b7
...@@ -40,7 +40,7 @@ export default { ...@@ -40,7 +40,7 @@ export default {
} }
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner { ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: $deepBlue; color: $deep-blue;
} }
::v-deep .el-breadcrumb__inner.is-link:hover { ::v-deep .el-breadcrumb__inner.is-link:hover {
......
src/components/Footer/index.vue
浏览文件 @ 69d9e5b7
...@@ -166,7 +166,7 @@ export default { ...@@ -166,7 +166,7 @@ export default {
padding: 30px 0; padding: 30px 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $deepBlue; background-color: $deep-blue;
flex-direction: column; flex-direction: column;
color: #fefefe; color: #fefefe;
font-size: 14px; font-size: 14px;
......
src/components/ListBanner/index.vue
浏览文件 @ 69d9e5b7
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
.total { .total {
// width: 400px; // width: 400px;
color: #fff; color: #fff;
font-family: $puHuiTi; font-family: $pu-hui-ti;
// position: relative; // position: relative;
z-index: 1; z-index: 1;
font-size: 40px; font-size: 40px;
...@@ -108,7 +108,7 @@ export default { ...@@ -108,7 +108,7 @@ export default {
font-weight: normal; font-weight: normal;
.num { .num {
// font-size: 56px; // font-size: 56px;
font-family: $puHuiTi; font-family: $pu-hui-ti;
font-size: 60px; font-size: 60px;
margin-right: 10px; margin-right: 10px;
color: #ffbe1a; color: #ffbe1a;
...@@ -165,7 +165,7 @@ export default { ...@@ -165,7 +165,7 @@ export default {
.text { .text {
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: $deepBlue; color: $deep-blue;
} }
} }
} }
......
src/components/MenuList/index.vue
浏览文件 @ 69d9e5b7
...@@ -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: $deepBlue; // color: $deep-blue;
&:hover { &:hover {
background-color: $deepBlue; background-color: $deep-blue;
color: #fff; color: #fff;
} }
} }
.el-menu-item.is-active { .el-menu-item.is-active {
color: $deepBlue; color: $deep-blue;
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: $deepBlue; color: $deep-blue;
font-weight: bold; font-weight: bold;
} }
} }
......
src/components/NavBar/index.vue
浏览文件 @ 69d9e5b7
...@@ -290,7 +290,7 @@ export default { ...@@ -290,7 +290,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.fixed { .fixed {
position: fixed !important; position: fixed !important;
background-color: $deepBlue !important; background-color: $deep-blue !important;
z-index: 99; z-index: 99;
top: 0; top: 0;
} }
...@@ -303,7 +303,7 @@ export default { ...@@ -303,7 +303,7 @@ export default {
height: $nav-height; height: $nav-height;
width: 100%; width: 100%;
transition: all 0.5s ease; transition: all 0.5s ease;
background-color: $deepBlue; background-color: $deep-blue;
position: relative; position: relative;
z-index: 99; z-index: 99;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
...@@ -348,7 +348,7 @@ export default { ...@@ -348,7 +348,7 @@ export default {
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
font-family: "Alibaba-PuHuiTi"; font-family: "Alibaba-pu-hui-ti";
position: relative; position: relative;
height: 100%; height: 100%;
text-align: center; text-align: center;
......
src/components/ReaderOperations/index.vue
浏览文件 @ 69d9e5b7
...@@ -268,7 +268,7 @@ export default { ...@@ -268,7 +268,7 @@ export default {
} }
.el-button--text { .el-button--text {
color: $deepBlue; color: $deep-blue;
} }
.copy { .copy {
...@@ -300,7 +300,7 @@ export default { ...@@ -300,7 +300,7 @@ export default {
.el-button--primary { .el-button--primary {
border: none; border: none;
background-color: $deepBlue; background-color: $deep-blue;
} }
} }
</style> </style>
src/components/SlideImageGroup/index.vue
浏览文件 @ 69d9e5b7
...@@ -178,7 +178,7 @@ export default { ...@@ -178,7 +178,7 @@ export default {
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 50%; border-radius: 50%;
background-color: rgba($deepBlue, 0.4); background-color: rgba($deep-blue, 0.4);
transform: translateY(-20px); transform: translateY(-20px);
color: #333; color: #333;
} }
...@@ -214,7 +214,7 @@ export default { ...@@ -214,7 +214,7 @@ export default {
height: 10px; height: 10px;
} }
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background: $deepBlue; background: $deep-blue;
} }
} }
</style> </style>
src/components/Video/index.vue
浏览文件 @ 69d9e5b7
...@@ -125,8 +125,8 @@ export default { ...@@ -125,8 +125,8 @@ export default {
} }
.blue { .blue {
.play-btn { .play-btn {
border: 2px solid $deepBlue; border: 2px solid $deep-blue;
color: $deepBlue; color: $deep-blue;
} }
} }
</style> </style>
src/components/VideoPlayer/index.vue
浏览文件 @ 69d9e5b7
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
&:hover { &:hover {
.vjs-big-play-button { .vjs-big-play-button {
// background-color: #fff; // background-color: #fff;
// color: $deepBlue; // color: $deep-blue;
} }
} }
video { video {
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 50px; font-size: 50px;
color: #fff; color: #fff;
background-color: $deepBlue; background-color: $deep-blue;
} }
.vjs-control-bar { .vjs-control-bar {
......
src/views/boutique/index-old.vue
浏览文件 @ 69d9e5b7
...@@ -280,7 +280,7 @@ export default { ...@@ -280,7 +280,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
border-bottom: 3px solid $deepBlue; border-bottom: 3px solid $deep-blue;
border-radius: 30px; border-radius: 30px;
} }
} }
...@@ -298,7 +298,7 @@ export default { ...@@ -298,7 +298,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
border-bottom: 3px solid $deepBlue; border-bottom: 3px solid $deep-blue;
border-radius: 30px; border-radius: 30px;
} }
} }
......
src/views/ccProduct/Detail.vue
浏览文件 @ 69d9e5b7
...@@ -145,7 +145,7 @@ export default { ...@@ -145,7 +145,7 @@ export default {
.intro { .intro {
& > p { & > p {
color: #666; color: #666;
// font-family: $defaultFontFamily; // font-family: $default-font-family;
} }
} }
......
src/views/ccProduct/index.vue
浏览文件 @ 69d9e5b7
...@@ -295,13 +295,13 @@ export default { ...@@ -295,13 +295,13 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
$text-indent: 16px; $text-indent: 16px;
.cultural-relic { .cultural-relic {
width: 100%; width: 100%;
// background-color: $deepBlue; // background-color: $deep-blue;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
...@@ -352,7 +352,7 @@ $text-indent: 16px; ...@@ -352,7 +352,7 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $deepBlue; border: 2px solid $deep-blue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
...@@ -369,7 +369,7 @@ $text-indent: 16px; ...@@ -369,7 +369,7 @@ $text-indent: 16px;
} }
.img-container { .img-container {
background-color: rgba($deepBlue, 0.1); background-color: rgba($deep-blue, 0.1);
height: 268px; height: 268px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
...@@ -431,7 +431,7 @@ $text-indent: 16px; ...@@ -431,7 +431,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $deepBlue; color: $deep-blue;
margin-bottom: 18px; margin-bottom: 18px;
} }
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 69d9e5b7
...@@ -894,7 +894,7 @@ $node-w: 700px; ...@@ -894,7 +894,7 @@ $node-w: 700px;
.swiper-button-prev { .swiper-button-prev {
background-image: none; background-image: none;
border: 2px solid #666; border: 2px solid #666;
background-color: rgba($deepBlue, 0.5); background-color: rgba($deep-blue, 0.5);
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
...@@ -952,7 +952,7 @@ $node-w: 700px; ...@@ -952,7 +952,7 @@ $node-w: 700px;
&:hover, &:hover,
&.active { &.active {
cursor: pointer; cursor: pointer;
// background-color: $deepBlue; // background-color: $deep-blue;
background-image: url(@/assets/imgs/show/outer-active.png); background-image: url(@/assets/imgs/show/outer-active.png);
> span { > span {
...@@ -1001,7 +1001,7 @@ $node-w: 700px; ...@@ -1001,7 +1001,7 @@ $node-w: 700px;
:hover { :hover {
background: #fff; background: #fff;
color: $deepBlue; color: $deep-blue;
} }
} }
} }
......
src/views/culturalRelic/detail-bp.vue
浏览文件 @ 69d9e5b7
...@@ -630,13 +630,13 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -630,13 +630,13 @@ $titleFontFamily: SourceHanSerifCN-Bold;
align-items: center; align-items: center;
.svg-icon { .svg-icon {
font-size: 50px; font-size: 50px;
color: $deepBlue; color: $deep-blue;
margin-right: 10px; margin-right: 10px;
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $deepBlue; color: $deep-blue;
line-height: 101px; line-height: 101px;
} }
} }
...@@ -687,7 +687,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -687,7 +687,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title { .intro-title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $deepBlue; color: $deep-blue;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -840,7 +840,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -840,7 +840,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $deepBlue; background-color: $deep-blue;
margin: 20px 0; margin: 20px 0;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -871,7 +871,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -871,7 +871,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
color: #831122; color: #831122;
} }
.collect { .collect {
color: $deepBlue; color: $deep-blue;
} }
} }
} }
...@@ -885,7 +885,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -885,7 +885,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
border: 2px solid $deepBlue; border: 2px solid $deep-blue;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
...@@ -897,7 +897,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -897,7 +897,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
box-shadow: 0 0 14px rgb(0 0 0 / 40%); box-shadow: 0 0 14px rgb(0 0 0 / 40%);
} }
.svg-icon { .svg-icon {
color: $deepBlue; color: $deep-blue;
font-size: 80px; font-size: 80px;
} }
img { img {
...@@ -923,7 +923,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -923,7 +923,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
position: relative; position: relative;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
&::after { &::after {
display: inline-block; display: inline-block;
} }
...@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
} }
.active { .active {
color: $deepBlue; color: $deep-blue;
&::after { &::after {
display: inline-block; display: inline-block;
} }
...@@ -946,7 +946,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -946,7 +946,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
left: 0; left: 0;
background-color: $deepBlue; background-color: $deep-blue;
} }
} }
/**简介和视频 */ /**简介和视频 */
...@@ -959,7 +959,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -959,7 +959,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.left-box { .left-box {
width: 60px; width: 60px;
background-color: $deepBlue; background-color: $deep-blue;
min-height: 200px; min-height: 200px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -974,7 +974,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -974,7 +974,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex: 1; flex: 1;
text-indent: 34px; text-indent: 34px;
padding: 16px 32px; padding: 16px 32px;
background-color: rgba($deepBlue, 10%); background-color: rgba($deep-blue, 10%);
} }
} }
...@@ -987,7 +987,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -987,7 +987,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
font-size: 26px; font-size: 26px;
color: $deepBlue; color: $deep-blue;
margin: 80px 0 40px; margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
padding-left: 46px; padding-left: 46px;
...@@ -1009,7 +1009,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1009,7 +1009,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
&::after { &::after {
display: inline-block; display: inline-block;
} }
...@@ -1023,7 +1023,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1023,7 +1023,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
content: ""; content: "";
width: 50%; width: 50%;
height: 1px; height: 1px;
background-color: $deepBlue; background-color: $deep-blue;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -9px; bottom: -9px;
...@@ -1037,7 +1037,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1037,7 +1037,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 0; width: 0;
height: 0; height: 0;
border: 8px solid transparent; border: 8px solid transparent;
border-top-color: $deepBlue; border-top-color: $deep-blue;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: -25px; bottom: -25px;
...@@ -1130,7 +1130,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1130,7 +1130,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 50px; height: 50px;
:hover { :hover {
background: #fff; background: #fff;
color: $deepBlue; color: $deep-blue;
} }
} }
} }
...@@ -1144,7 +1144,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1144,7 +1144,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: $deepBlue; color: $deep-blue;
} }
// ::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-hasbg.vue
浏览文件 @ 69d9e5b7
...@@ -558,7 +558,7 @@ $text-indent: 16px; ...@@ -558,7 +558,7 @@ $text-indent: 16px;
text-align: center; text-align: center;
text-align: center; text-align: center;
&:hover { &:hover {
// border: 2px solid $deepBlue; // border: 2px solid $deep-blue;
// border-radius: 100%; // border-radius: 100%;
...@@ -686,7 +686,7 @@ $text-indent: 16px; ...@@ -686,7 +686,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $deepBlue; color: $deep-blue;
margin-bottom: 18px; margin-bottom: 18px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
...@@ -872,7 +872,7 @@ $text-indent: 16px; ...@@ -872,7 +872,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: $deepBlue; background: $deep-blue;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/culturalRelic/index.vue
浏览文件 @ 69d9e5b7
...@@ -360,7 +360,7 @@ $text-indent: 16px; ...@@ -360,7 +360,7 @@ $text-indent: 16px;
.cultural-relic { .cultural-relic {
width: 100%; width: 100%;
// background-color: $deepBlue; // background-color: $deep-blue;
// color: #fff; // color: #fff;
.search-bar { .search-bar {
display: flex; display: flex;
...@@ -482,7 +482,7 @@ $text-indent: 16px; ...@@ -482,7 +482,7 @@ $text-indent: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-weight: 600; font-weight: 600;
background-color: rgba($color: $deepBlue, $alpha: 0.3); background-color: rgba($color: $deep-blue, $alpha: 0.3);
::v-deep .el-scrollbar__view { ::v-deep .el-scrollbar__view {
display: flex; display: flex;
...@@ -513,7 +513,7 @@ $text-indent: 16px; ...@@ -513,7 +513,7 @@ $text-indent: 16px;
.text { .text {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
} }
} }
...@@ -567,7 +567,7 @@ $text-indent: 16px; ...@@ -567,7 +567,7 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
// border: 2px solid $deepBlue; // border: 2px solid $deep-blue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
...@@ -651,7 +651,7 @@ $text-indent: 16px; ...@@ -651,7 +651,7 @@ $text-indent: 16px;
font-size: 20px; font-size: 20px;
padding: 20px 0; padding: 20px 0;
// font-weight: bold; // font-weight: bold;
// color: $deepBlue; // color: $deep-blue;
color: #333; color: #333;
// margin-bottom: 18px; // margin-bottom: 18px;
width: 100%; width: 100%;
...@@ -786,7 +786,7 @@ $text-indent: 16px; ...@@ -786,7 +786,7 @@ $text-indent: 16px;
background: #fff; background: #fff;
min-width: 0; min-width: 0;
margin: 0 16px; margin: 0 16px;
color: $deepBlue; color: $deep-blue;
} }
.active { .active {
......
src/views/display/components/ChStyle-old.vue
浏览文件 @ 69d9e5b7
...@@ -533,7 +533,7 @@ export default { ...@@ -533,7 +533,7 @@ export default {
<style lang="scss"> <style lang="scss">
.intro-content { .intro-content {
p { p {
font-family: $defaultFontFamily !important; font-family: $default-font-family !important;
} }
} }
</style> </style>
...@@ -1056,7 +1056,7 @@ $themeRed: #892325; ...@@ -1056,7 +1056,7 @@ $themeRed: #892325;
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: $deepBlue; color: $deep-blue;
} }
} }
......
src/views/display/components/ChStyle.vue
浏览文件 @ 69d9e5b7
...@@ -556,7 +556,7 @@ export default { ...@@ -556,7 +556,7 @@ export default {
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
font-family: $defaultFontFamily !important; font-family: $default-font-family !important;
font-size: 22px; font-size: 22px;
text-indent: 44px; text-indent: 44px;
// color: #fff !important; // color: #fff !important;
...@@ -564,14 +564,14 @@ export default { ...@@ -564,14 +564,14 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$deepBlue: #a30e0c; $deep-blue: #a30e0c;
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: $deepBlue; background-color: $deep-blue;
min-height: 300px; min-height: 300px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -944,12 +944,12 @@ $deepBlue: #a30e0c; ...@@ -944,12 +944,12 @@ $deepBlue: #a30e0c;
display: flex; display: flex;
align-content: center; align-content: center;
padding: 8px 10px; padding: 8px 10px;
// border: 1px solid $deepBlue; // border: 1px solid $deep-blue;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
} }
.svg-icon { .svg-icon {
......
src/views/display/components/ChStyleUnit.vue
浏览文件 @ 69d9e5b7
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
<style lang="scss"> <style lang="scss">
.units-content-intro,.unit-intro{ .units-content-intro,.unit-intro{
p{ p{
font-family: $defaultFontFamily !important; font-family: $default-font-family !important;
} }
} }
</style> </style>
......
src/views/display/components/NormalStyle.vue
浏览文件 @ 69d9e5b7
...@@ -664,7 +664,7 @@ export default { ...@@ -664,7 +664,7 @@ export default {
.display-detail_intro { .display-detail_intro {
.intro-content { .intro-content {
p { p {
font-family: $defaultFontFamily !important; font-family: $default-font-family !important;
} }
} }
} }
...@@ -710,19 +710,19 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -710,19 +710,19 @@ $titleFontFamily: SourceHanSerifCN-Bold;
i { i {
margin-right: 10px; margin-right: 10px;
font-size: 28px; font-size: 28px;
color: $deepBlue; color: $deep-blue;
} }
.svg-icon { .svg-icon {
font-size: 32px; font-size: 32px;
color: $deepBlue; color: $deep-blue;
margin-right: 10px; margin-right: 10px;
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $deepBlue; color: $deep-blue;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
} }
} }
...@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.collect { .collect {
color: $deepBlue; color: $deep-blue;
} }
} }
} }
...@@ -948,7 +948,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -948,7 +948,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
border: 2px solid $deepBlue; border: 2px solid $deep-blue;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
...@@ -962,7 +962,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -962,7 +962,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.svg-icon { .svg-icon {
color: $deepBlue; color: $deep-blue;
font-size: 80px; font-size: 80px;
} }
...@@ -983,14 +983,14 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -983,14 +983,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.tab-item { .tab-item {
height: 100%; height: 100%;
margin-right: 40px; margin-right: 40px;
color: $deepBlue; color: $deep-blue;
font-size: 24px; font-size: 24px;
font-family: $titleFontFamily; font-family: $titleFontFamily;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
&::after { &::after {
display: inline-block; display: inline-block;
...@@ -1003,7 +1003,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1003,7 +1003,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.active { .active {
color: $deepBlue; color: $deep-blue;
&::after { &::after {
display: inline-block; display: inline-block;
...@@ -1018,7 +1018,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1018,7 +1018,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
left: 0; left: 0;
background-color: $deepBlue; background-color: $deep-blue;
} }
} }
...@@ -1032,7 +1032,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1032,7 +1032,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title { .intro-title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $deepBlue; color: $deep-blue;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1055,7 +1055,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1055,7 +1055,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.left-box { .left-box {
width: 60px; width: 60px;
background-color: $deepBlue; background-color: $deep-blue;
min-height: 200px; min-height: 200px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -1071,7 +1071,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1071,7 +1071,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex: 1; flex: 1;
text-indent: 34px; text-indent: 34px;
padding: 16px 32px; padding: 16px 32px;
background-color: rgba($deepBlue, 10%); background-color: rgba($deep-blue, 10%);
} }
} }
...@@ -1086,7 +1086,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1086,7 +1086,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
font-size: 24px; font-size: 24px;
color: $deepBlue; color: $deep-blue;
padding: 0 40px; padding: 0 40px;
margin-bottom: 32px; margin-bottom: 32px;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
...@@ -1115,16 +1115,16 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1115,16 +1115,16 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.name { .name {
padding: 8px; padding: 8px;
// border-radius: 4px; // border-radius: 4px;
color: $deepBlue; color: $deep-blue;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
border: 1px solid $deepBlue; border: 1px solid $deep-blue;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background: $deepBlue; background: $deep-blue;
color: $yellow; color: $yellow;
} }
&:not(&:last-child) { &:not(&:last-child) {
...@@ -1134,7 +1134,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1134,7 +1134,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.active { .active {
background: $deepBlue; background: $deep-blue;
color: $yellow; color: $yellow;
} }
} }
...@@ -1156,7 +1156,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1156,7 +1156,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// display: flex; // display: flex;
// justify-content: center; // justify-content: center;
// align-items: center; // align-items: center;
// color: $deepBlue; // color: $deep-blue;
// font-weight: bolder; // font-weight: bolder;
// font-size: 28px; // font-size: 28px;
// transform: translateY(-6px); // transform: translateY(-6px);
...@@ -1168,18 +1168,18 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1168,18 +1168,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// .slide-item { // .slide-item {
// padding: 8px; // padding: 8px;
// border-radius: 4px; // border-radius: 4px;
// color: $deepBlue; // color: $deep-blue;
// cursor: pointer; // cursor: pointer;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// overflow: hidden; // overflow: hidden;
// width: 100%; // width: 100%;
// white-space: nowrap; // white-space: nowrap;
// border: 1px solid $deepBlue; // border: 1px solid $deep-blue;
// font-size: 14px; // font-size: 14px;
// } // }
// .active { // .active {
// background: $deepBlue; // background: $deep-blue;
// color: #fff; // color: #fff;
// } // }
// } // }
...@@ -1272,7 +1272,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1272,7 +1272,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 26px; font-size: 26px;
color: $deepBlue; color: $deep-blue;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
i { i {
...@@ -1327,7 +1327,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1327,7 +1327,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.lt-name { .lt-name {
color: $deepBlue; color: $deep-blue;
cursor: pointer; cursor: pointer;
} }
} }
......
src/views/display/components/NormalStyleUnit.vue
浏览文件 @ 69d9e5b7
...@@ -180,7 +180,7 @@ export default { ...@@ -180,7 +180,7 @@ export default {
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
font-family: $defaultFontFamily !important; font-family: $default-font-family !important;
// color: #333 !important; // color: #333 !important;
} }
...@@ -203,17 +203,17 @@ export default { ...@@ -203,17 +203,17 @@ export default {
.slide-item { .slide-item {
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 4px;
color: $deepBlue; color: $deep-blue;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
border: 1px solid $deepBlue; border: 1px solid $deep-blue;
} }
.active { .active {
background: $deepBlue; background: $deep-blue;
color: #fff; color: #fff;
} }
} }
...@@ -229,7 +229,7 @@ export default { ...@@ -229,7 +229,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $deepBlue; color: $deep-blue;
font-weight: bolder; font-weight: bolder;
font-size: 28px; font-size: 28px;
transform: translateY(-6px); transform: translateY(-6px);
...@@ -345,12 +345,12 @@ export default { ...@@ -345,12 +345,12 @@ export default {
display: flex; display: flex;
align-content: center; align-content: center;
padding: 8px 10px; padding: 8px 10px;
// border: 1px solid $deepBlue; // border: 1px solid $deep-blue;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
} }
.svg-icon { .svg-icon {
......
src/views/display/components/RedStyle.vue
浏览文件 @ 69d9e5b7
...@@ -550,7 +550,7 @@ export default { ...@@ -550,7 +550,7 @@ export default {
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
font-family: $defaultFontFamily !important; font-family: $default-font-family !important;
font-size: 22px; font-size: 22px;
text-indent: 44px; text-indent: 44px;
// color: #fff !important; // color: #fff !important;
...@@ -558,14 +558,14 @@ export default { ...@@ -558,14 +558,14 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$deepBlue: #a30e0c; $deep-blue: #a30e0c;
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: $deepBlue; background-color: $deep-blue;
min-height: 300px; min-height: 300px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -949,12 +949,12 @@ $deepBlue: #a30e0c; ...@@ -949,12 +949,12 @@ $deepBlue: #a30e0c;
display: flex; display: flex;
align-content: center; align-content: center;
padding: 8px 10px; padding: 8px 10px;
// border: 1px solid $deepBlue; // border: 1px solid $deep-blue;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
} }
.svg-icon { .svg-icon {
......
src/views/display/index.vue
浏览文件 @ 69d9e5b7
...@@ -303,13 +303,13 @@ export default { ...@@ -303,13 +303,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: $deepBlue; // background-color: $deep-blue;
// color: #fff; // color: #fff;
.type-group { .type-group {
...@@ -337,7 +337,7 @@ $text-indent: 16px; ...@@ -337,7 +337,7 @@ $text-indent: 16px;
color: #999; color: #999;
&:hover { &:hover {
color: $deepBlue; color: $deep-blue;
} }
} }
...@@ -463,7 +463,7 @@ $text-indent: 16px; ...@@ -463,7 +463,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $deepBlue; color: $deep-blue;
margin-bottom: 18px; margin-bottom: 18px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -561,7 +561,7 @@ $text-indent: 16px; ...@@ -561,7 +561,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: $deepBlue; background: $deep-blue;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 69d9e5b7
...@@ -134,7 +134,7 @@ export default { ...@@ -134,7 +134,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
.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;
...@@ -147,7 +147,7 @@ $blue: $deepBlue; ...@@ -147,7 +147,7 @@ $blue: $deepBlue;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba pu-hui-ti";
// .ch { // .ch {
// color: #2d4bb5; // color: #2d4bb5;
// margin-bottom: 12px; // margin-bottom: 12px;
...@@ -184,7 +184,7 @@ $blue: $deepBlue; ...@@ -184,7 +184,7 @@ $blue: $deepBlue;
color: #2d4ab5; color: #2d4ab5;
margin-bottom: 8px; margin-bottom: 8px;
// margin-top: 40px; // margin-top: 40px;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba pu-hui-ti";
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
} }
......
src/views/home/components/Display.vue
浏览文件 @ 69d9e5b7
...@@ -157,7 +157,7 @@ export default { ...@@ -157,7 +157,7 @@ export default {
color: #fff; color: #fff;
// margin-top: 10px; // margin-top: 10px;
// margin-bottom: 90px; // margin-bottom: 90px;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba pu-hui-ti";
flex-basis: auto; flex-basis: auto;
font-size: 48px; font-size: 48px;
font-weight: bold; font-weight: bold;
...@@ -205,7 +205,7 @@ export default { ...@@ -205,7 +205,7 @@ export default {
.content { .content {
color: #fff; color: #fff;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba pu-hui-ti";
width: 600px; width: 600px;
height: 100%; height: 100%;
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 69d9e5b7
...@@ -577,7 +577,7 @@ export default { ...@@ -577,7 +577,7 @@ export default {
// margin-top: 100px;//去除上间距 // margin-top: 100px;//去除上间距
width: 600px; width: 600px;
color: #333; color: #333;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba pu-hui-ti";
height: 50vh; height: 50vh;
position: relative; position: relative;
padding: 40px; padding: 40px;
...@@ -680,7 +680,7 @@ export default { ...@@ -680,7 +680,7 @@ export default {
} }
.num { .num {
// font-weight: bold; // font-weight: bold;
font-family: $puHuiTi; font-family: $pu-hui-ti;
font-size: 60px; font-size: 60px;
margin: 0 4px; margin: 0 4px;
cursor: pointer; cursor: pointer;
......
src/views/home/components/Virtural.vue
浏览文件 @ 69d9e5b7
...@@ -115,7 +115,7 @@ export default { ...@@ -115,7 +115,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
.home-virtural { .home-virtural {
display: flex; display: flex;
...@@ -134,7 +134,7 @@ $blue: $deepBlue; ...@@ -134,7 +134,7 @@ $blue: $deepBlue;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 100px 0 80px 0; padding: 100px 0 80px 0;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba pu-hui-ti";
.ch { .ch {
font-size: 30px; font-size: 30px;
...@@ -153,7 +153,7 @@ $blue: $deepBlue; ...@@ -153,7 +153,7 @@ $blue: $deepBlue;
width: 74vw; width: 74vw;
.intro { .intro {
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba pu-hui-ti";
color: #ffffff; color: #ffffff;
margin-top: 110px; margin-top: 110px;
// width: 300px; // width: 300px;
......
src/views/museum/Detail.vue
浏览文件 @ 69d9e5b7
...@@ -379,7 +379,7 @@ $node-w: 700px; ...@@ -379,7 +379,7 @@ $node-w: 700px;
&:hover, &:hover,
&.active { &.active {
cursor: pointer; cursor: pointer;
// background-color: $deepBlue; // background-color: $deep-blue;
background-image: url(@/assets/imgs/show/outer-active.png); background-image: url(@/assets/imgs/show/outer-active.png);
> span { > span {
......
src/views/museum/index.vue
浏览文件 @ 69d9e5b7
...@@ -240,7 +240,7 @@ export default { ...@@ -240,7 +240,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
...@@ -281,7 +281,7 @@ $text-indent: 16px; ...@@ -281,7 +281,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $deepBlue; border: 2px solid $deep-blue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -307,7 +307,7 @@ $text-indent: 16px; ...@@ -307,7 +307,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $deepBlue; color: $deep-blue;
margin-bottom: 18px; margin-bottom: 18px;
} }
.deptName { .deptName {
......
src/views/personal/components/Card/index.vue
浏览文件 @ 69d9e5b7
...@@ -35,7 +35,7 @@ export default { ...@@ -35,7 +35,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
.container { .container {
border: 1px solid #f1f1f1; border: 1px solid #f1f1f1;
height: 300px; height: 300px;
......
src/views/personal/components/Info.vue
浏览文件 @ 69d9e5b7
...@@ -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: $deepBlue; background-color: $deep-blue;
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: $deepBlue; background-color: $deep-blue;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/views/personal/index.vue
浏览文件 @ 69d9e5b7
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
.personal { .personal {
padding: 40px 0; padding: 40px 0;
background-color: #fff; background-color: #fff;
...@@ -106,13 +106,13 @@ $blue: $deepBlue; ...@@ -106,13 +106,13 @@ $blue: $deepBlue;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
background-color: $deepBlue; background-color: $deep-blue;
} }
::v-deep { ::v-deep {
.el-tabs__item:hover, .el-tabs__item:hover,
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: $deepBlue; color: $deep-blue;
} }
} }
::v-deep .el-descriptions { ::v-deep .el-descriptions {
......
src/views/register/index.vue
浏览文件 @ 69d9e5b7
...@@ -260,7 +260,7 @@ export default { ...@@ -260,7 +260,7 @@ export default {
.wrapper { .wrapper {
width: 100%; width: 100%;
// background-image: url("@/assets/imgs/home/display-bg.png"); // background-image: url("@/assets/imgs/home/display-bg.png");
// background-color: rgba($color: $deepBlue, $alpha: 0.2); // background-color: rgba($color: $deep-blue, $alpha: 0.2);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
...@@ -312,7 +312,7 @@ export default { ...@@ -312,7 +312,7 @@ export default {
border-radius: 0px; border-radius: 0px;
&:last-child { &:last-child {
width: 160px; width: 160px;
background-color: $deepBlue; background-color: $deep-blue;
&:hover { &:hover {
filter: brightness(0.9); filter: brightness(0.9);
} }
......
src/views/searchPic/components/imgList/index.vue 0 → 100644
浏览文件 @ 69d9e5b7
<template>
<div class="img-list">
<vue-waterfall-easy
:maxCols="7"
v-if="imgsArr.length > 0"
:imgsArr="imgsArr"
@scrollReachBottom="loadImgList"
:gap="30"
ref="waterfall"
@click="handleClickImg"
:src-key="getSrcKey"
>
<div slot="waterfall-over" class="load-over">已加载完全部</div>
</vue-waterfall-easy>
<el-empty v-else></el-empty>
</div>
</template>
<script>
import { imgList } from "../../mock";
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
components: {
vueWaterfallEasy,
},
data() {
return {
current: 0,
size: 20,
total: 20,
hasMore: true,
imgsArr: imgList, //图片数组
};
},
computed: {
getSrcKey() {
return "filePath";
},
},
mounted() {
this.loadImgList();
},
methods: {
async loadImgList() {
if (this.total === this.imgsArr.length) {
this.hasMore = false;
this.$refs.waterfall && this.$refs.waterfall.waterfallOver();
}
// const params = {
// };
// let res = await getListFileByPage(params);
// if (res && res.data) {
// const { records, size, current, total } = res.data;
// this.size = size;
// this.current = current;
// this.total = total;
// let list = JSON.parse(JSON.stringify(records));
// this.imgsArr = this.imgsArr.concat(list);
// this.current++;
// }
},
handleClickImg(e){
console.log(e);
}
},
};
</script>
<style lang="scss" scoped>
$box-shadow: 0 2px 8px rgba(28, 31, 35, 0.03),
0 16px 48px 8px rgba(28, 31, 35, 0.08);
.img-list {
height: calc(100vh);
::v-deep .vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box {
border-radius: none;
box-shadow: none;
transition: all ease 0.3s;
cursor: pointer;
&:hover {
transform: translateY(-10px);
}
}
::v-deep .img-wraper {
img {
border-radius: 14px;
transition: all ease 0.3s;
box-shadow: $box-shadow;
&:hover {
// box-shadow: $box-shadow-deep;
}
}
}
.load-over {
padding: 20px 0;
}
}
</style>
src/views/searchPic/index.vue
浏览文件 @ 69d9e5b7
...@@ -13,7 +13,16 @@ ...@@ -13,7 +13,16 @@
<div class="right-pic"></div> <div class="right-pic"></div>
</div> </div>
<div class="upload-wrapper"> <div class="upload-wrapper">
<div class="upload-panel"> <div class="upload-bar">
<div class="left-area">
<div class="text">点击这里 上传图片</div>
<div class="camera">
<i class="el-icon-camera"></i>
</div>
</div>
<div class="right-button">以图搜图</div>
</div>
<!-- <div class="upload-panel">
<el-upload <el-upload
ref="upload" ref="upload"
class="upload-area" class="upload-area"
...@@ -49,13 +58,29 @@ ...@@ -49,13 +58,29 @@
</div> </div>
</div> </div>
</el-upload> </el-upload>
</div> -->
</div>
<div class="current-pic" v-if="showResult">
<div class="img-container">
<div class="close">
<i class="el-icon-close"></i>
</div>
<img
src="http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png"
alt=""
/>
</div> </div>
</div> </div>
<ImgList v-if="showResult" />
</div> </div>
</template> </template>
<script> <script>
import ImgList from "./components/imgList";
export default { export default {
components: {
ImgList,
},
data() { data() {
return { return {
// progressText: "", //进度文字 // progressText: "", //进度文字
...@@ -63,6 +88,7 @@ export default { ...@@ -63,6 +88,7 @@ export default {
showProgress: false, //是否展示进度条 showProgress: false, //是否展示进度条
fileList: [], //双向绑定的文件，上传完之后会被清空 fileList: [], //双向绑定的文件，上传完之后会被清空
showFileList: [], //展示的文件列表,上传之后不会被清空 showFileList: [], //展示的文件列表,上传之后不会被清空
showResult: true, //是否展示图片结果
}; };
}, },
mounted() {}, mounted() {},
...@@ -81,16 +107,8 @@ export default { ...@@ -81,16 +107,8 @@ export default {
formData.append("file", file); formData.append("file", file);
this.showProgress = true; this.showProgress = true;
// TODO:上传接口调用 // TODO:上传接口调用
// await realtimeUpload(formData, this).then((res) => {
// if (res.code == "0") {
// this.$message.success(res.data);
// } else {
// this.$message.warning(res.data);
// }
// });
setTimeout(() => { setTimeout(() => {
this.showProgress = false; this.showProgress = false;
// this.rotateFn(0)
this.progressPercent = 0; this.progressPercent = 0;
}, 1000); }, 1000);
}, },
...@@ -110,30 +128,39 @@ export default { ...@@ -110,30 +128,39 @@ export default {
} }
this.showProgress = false; this.showProgress = false;
}, },
// 关闭已上传的图片
handleCloseImg() {
console.log("关闭");
},
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
$box-shadow-hover: rgba(0, 0, 0, 0.16) 0px 3px 6px,
rgba(0, 0, 0, 0.23) 0px 3px 6px;
$transition-ease-03s: all ease 0.3s;
.app-container { .app-container {
width: 100%; width: 100%;
background-image: url("@/assets/imgs/home-new/all-bg.png");
} }
.banner { .banner {
height: 400px; height: 400px;
background: $deepBlue; // background: $deep-blue;
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; // overflow: hidden;
.left-pic { .left-pic {
transition: all ease 0.5s; transition: all ease 0.5s;
position: absolute; position: absolute;
left: -100px; left: -100px;
top: 0; top: 100px;
height: 150%; height: 150%;
width: 700px; width: 700px;
background-size: contain; background-size: contain;
background-image: url("@/assets/imgs/search-pic/6.png"); background-image: url("@/assets/imgs/search-pic/6.png");
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 2; z-index: 0;
} }
.right-pic { .right-pic {
position: absolute; position: absolute;
...@@ -144,7 +171,7 @@ export default { ...@@ -144,7 +171,7 @@ export default {
background-size: contain; background-size: contain;
background-image: url("@/assets/imgs/search-pic/3.png"); background-image: url("@/assets/imgs/search-pic/3.png");
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: 2; z-index: 0;
} }
.text { .text {
position: absolute; position: absolute;
...@@ -156,7 +183,8 @@ export default { ...@@ -156,7 +183,8 @@ export default {
color: #fff; color: #fff;
padding: 100px 12%; padding: 100px 12%;
opacity: 1; opacity: 1;
transition: all ease 0.3s; transition: $transition-ease-03s;
color: $deep-blue;
.title { .title {
font-size: 48px; font-size: 48px;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
...@@ -171,65 +199,148 @@ export default { ...@@ -171,65 +199,148 @@ export default {
} }
} }
.upload-wrapper { .upload-wrapper {
height: 300px;
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 0 13%;
position: relative; position: relative;
transition: all ease 0.5s; margin-bottom: 16px;
.upload-panel { font-size: 18px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; .upload-bar {
height: 320px; box-shadow: $box-shadow;
width: 60%; background: #fff;
background-color: #fff; border-radius: 8px;
border-radius: 16px; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; padding: 10px 20px;
position: absolute; border: 1px solid $deep-blue;
transform: translateY(-100px); position: relative;
z-index: 10; cursor: pointer;
transition: all ease 0.5s; transition: $transition-ease-03s;
.upload-area { &:hover {
width: calc(100% - 40px); box-shadow: $box-shadow-hover;
height: calc(100% - 40px); }
border-radius: 16px; .left-area {
transition: all ease 0.5s; display: flex;
::v-deep .el-upload { justify-content: space-between;
width: 100%; padding-right: 16px;
height: 100%; width: 80%;
.el-upload-dragger { i {
display: flex; font-size: 30px;
justify-content: center; color: $deep-blue;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
.icon {
border-radius: 50%;
background-color: rgba($color: $deepBlue, $alpha: 0.2);
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
.svg-icon {
font-size: 48px;
color: rgba($color: $deepBlue, $alpha: 0.8);
}
}
.camera {
opacity: 0;
}
}
} }
} }
.right-button {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: $deep-blue;
height: 100%;
position: absolute;
right: 0;
top: 0;
border-radius: 0 8px 8px 0;
}
}
}
// .upload-wrapper {
// height: 300px;
// width: 100%;
// display: flex;
// justify-content: center;
// position: relative;
// transition: all ease 0.5s;
// .upload-panel {
// box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
// height: 320px;
// width: 60%;
// background-color: #fff;
// border-radius: 16px;
// display: flex;
// justify-content: center;
// align-items: center;
// position: absolute;
// transform: translateY(-100px);
// z-index: 10;
// transition: all ease 0.5s;
// .upload-area {
// width: calc(100% - 40px);
// height: calc(100% - 40px);
// border-radius: 16px;
// transition: all ease 0.5s;
// ::v-deep .el-upload {
// width: 100%;
// height: 100%;
// .el-upload-dragger {
// display: flex;
// justify-content: center;
// align-items: center;
// flex-direction: column;
// width: 100%;
// height: 100%;
// .icon {
// border-radius: 50%;
// background-color: rgba($color: $deep-blue, $alpha: 0.2);
// height: 100px;
// width: 100px;
// display: flex;
// justify-content: center;
// align-items: center;
// margin-bottom: 10px;
// .svg-icon {
// font-size: 48px;
// color: rgba($color: $deep-blue, $alpha: 0.8);
// }
// }
// .camera {
// opacity: 0;
// }
// }
// }
// }
// }
// }
.current-pic {
display: flex;
justify-content: center;
padding: 0 13%;
position: relative;
z-index: 2;
margin-bottom: 50px;
.img-container {
background: #fff;
border-radius: 8px;
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0;
position: relative;
box-shadow: $box-shadow;
transition: all ease 0.3s;
&:hover {
box-shadow: $box-shadow-hover;
}
.close {
font-size: 30px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
img {
width: 110px;
height: 110px;
}
} }
} }
.img-wrapper { .img-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
} }
</style> </style>
src/views/searchPic/mock.js 0 → 100644
浏览文件 @ 69d9e5b7
export const imgList = [
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/62%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0/low/62.%E8%B4%B5%E5%B7%9E%E6%B8%85%E6%B1%9F%E5%8D%8F%E4%B8%AD%E5%86%9B%E9%83%A8%E5%8F%B8%E4%B9%8B%E5%85%B3%E9%98%B2%E9%93%9C%E5%8D%B0.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/42%E8%88%9E%E8%B9%88%E4%BF%91/low/42.%E8%88%9E%E8%B9%88%E4%BF%91.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/31%E9%93%9C%E8%BD%A6%E9%A9%AC/low/31.%E9%93%9C%E8%BD%A6%E9%A9%AC.png",
},
{
filePath:
"http://localhost:8081/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/%E8%B4%B5%E5%B7%9E%E7%9C%81%E5%8D%9A%E7%89%A9%E9%A6%86-%E6%96%87%E7%89%A92/faceImage/53%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB/low/53.%E8%BF%9B%E8%B4%A1%E4%BA%BA%E7%9F%B3%E5%88%BB.png",
},
];
src/views/virtual/index.vue
浏览文件 @ 69d9e5b7
...@@ -226,11 +226,11 @@ export default { ...@@ -226,11 +226,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $deepBlue; $blue: $deep-blue;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: $deepBlue; // background-color: $deep-blue;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
...@@ -301,7 +301,7 @@ $text-indent: 16px; ...@@ -301,7 +301,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $deepBlue; border: 2px solid $deep-blue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -361,7 +361,7 @@ $text-indent: 16px; ...@@ -361,7 +361,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $deepBlue; color: $deep-blue;
margin-bottom: 18px; margin-bottom: 18px;
} }
.deptName { .deptName {
...@@ -424,7 +424,7 @@ $text-indent: 16px; ...@@ -424,7 +424,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: $deepBlue; background: $deep-blue;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论