提交 69d9e5b7 authored 作者: 龙菲's avatar 龙菲

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

上级 d65f7bf6
......@@ -7,7 +7,7 @@ cnpm install 或者 npm install 由于vue-video-player 建议用cnpm install保
### Compiles and hot-reloads for development
```
npm run serve
npm run dev
```
### Compiles and minifies for production
......
......@@ -30,6 +30,7 @@
"vue-router": "^3.5.1",
"vue-slidepage": "^1.0.0",
"vue-video-player": "^5.0.2",
"vue-waterfall-easy": "^2.4.4",
"vuex": "^3.6.2",
"wowjs": "^1.1.3"
},
......
......@@ -11,7 +11,7 @@
}
#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;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......@@ -42,7 +42,7 @@ li {
//一些公共样式
.empty-space {
height: 100px;
background-color: $deepBlue;
background-color: $deep-blue;
width: 100%;
}
......@@ -84,12 +84,12 @@ li {
.btn-quicknext,
.number {
background: transparent !important;
border: 1px solid $deepBlue !important;
color: $deepBlue !important;
border: 1px solid $deep-blue !important;
color: $deep-blue !important;
}
.number.active {
background: $deepBlue !important;
background: $deep-blue !important;
color: #fff !important;
}
}
......@@ -227,7 +227,7 @@ li {
background: #fff;
min-width: 0;
margin: 0 16px;
color: $deepBlue;
color: $deep-blue;
border-radius: 0 !important;
}
......@@ -277,13 +277,13 @@ li {
.el-checkbox__input.is-checked {
.el-checkbox__inner {
background-color: $deepBlue;
border-color: $deepBlue;
background-color: $deep-blue;
border-color: $deep-blue;
}
+.el-checkbox__label {
font-weight: 600;
color: $deepBlue;
color: $deep-blue;
}
}
}
......
// $deepBlue:#223e36;
// $deepBlue: #2069c4;
// $deepBlue:#132c33;
$deepBlue: #252F57;
$yellow: #dfab46;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 22px;
$deep-blue: #252F57;//主题深蓝
$yellow: #dfab46;//辅色黄色,用于高亮,选中菜单等
$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;
\ No newline at end of file
$nav-height: 120px;//导航高度
$default-font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;//默认字体
\ No newline at end of file
......@@ -248,7 +248,7 @@ export default {
color: #5c5e66;
display: flex;
align-items: center;
color: $deepBlue;
color: $deep-blue;
font-size: 38px;
}
.progress-bar-bg {
......@@ -263,7 +263,7 @@ export default {
margin: 0 10px;
}
.progress-bar {
background-color: $deepBlue;
background-color: $deep-blue;
width: 0%;
height: 10px;
border-radius: 5px;
......
......@@ -40,7 +40,7 @@ export default {
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: $deepBlue;
color: $deep-blue;
}
::v-deep .el-breadcrumb__inner.is-link:hover {
......
......@@ -166,7 +166,7 @@ export default {
padding: 30px 0;
justify-content: center;
align-items: center;
background-color: $deepBlue;
background-color: $deep-blue;
flex-direction: column;
color: #fefefe;
font-size: 14px;
......
......@@ -79,7 +79,7 @@ export default {
.total {
// width: 400px;
color: #fff;
font-family: $puHuiTi;
font-family: $pu-hui-ti;
// position: relative;
z-index: 1;
font-size: 40px;
......@@ -108,7 +108,7 @@ export default {
font-weight: normal;
.num {
// font-size: 56px;
font-family: $puHuiTi;
font-family: $pu-hui-ti;
font-size: 60px;
margin-right: 10px;
color: #ffbe1a;
......@@ -165,7 +165,7 @@ export default {
.text {
font-size: 28px;
font-weight: 400;
color: $deepBlue;
color: $deep-blue;
}
}
}
......
......@@ -64,15 +64,15 @@ export default {
.el-menu-item {
background-color: #f5f5f9;
font-size: 16px;
// color: $deepBlue;
// color: $deep-blue;
&:hover {
background-color: $deepBlue;
background-color: $deep-blue;
color: #fff;
}
}
.el-menu-item.is-active {
color: $deepBlue;
color: $deep-blue;
font-weight: bold;
}
.blueStyle {
......@@ -87,7 +87,7 @@ export default {
text-overflow: ellipsis;
&:hover {
background: rgba($color: #fff, $alpha: 0.6);
color: $deepBlue;
color: $deep-blue;
font-weight: bold;
}
}
......
......@@ -290,7 +290,7 @@ export default {
<style lang="scss" scoped>
.fixed {
position: fixed !important;
background-color: $deepBlue !important;
background-color: $deep-blue !important;
z-index: 99;
top: 0;
}
......@@ -303,7 +303,7 @@ export default {
height: $nav-height;
width: 100%;
transition: all 0.5s ease;
background-color: $deepBlue;
background-color: $deep-blue;
position: relative;
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
......@@ -348,7 +348,7 @@ export default {
color: #fff;
display: flex;
align-items: center;
font-family: "Alibaba-PuHuiTi";
font-family: "Alibaba-pu-hui-ti";
position: relative;
height: 100%;
text-align: center;
......
......@@ -268,7 +268,7 @@ export default {
}
.el-button--text {
color: $deepBlue;
color: $deep-blue;
}
.copy {
......@@ -300,7 +300,7 @@ export default {
.el-button--primary {
border: none;
background-color: $deepBlue;
background-color: $deep-blue;
}
}
</style>
......@@ -178,7 +178,7 @@ export default {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: rgba($deepBlue, 0.4);
background-color: rgba($deep-blue, 0.4);
transform: translateY(-20px);
color: #333;
}
......@@ -214,7 +214,7 @@ export default {
height: 10px;
}
.swiper-pagination-bullet-active {
background: $deepBlue;
background: $deep-blue;
}
}
</style>
......@@ -125,8 +125,8 @@ export default {
}
.blue {
.play-btn {
border: 2px solid $deepBlue;
color: $deepBlue;
border: 2px solid $deep-blue;
color: $deep-blue;
}
}
</style>
......@@ -102,7 +102,7 @@ export default {
&:hover {
.vjs-big-play-button {
// background-color: #fff;
// color: $deepBlue;
// color: $deep-blue;
}
}
video {
......@@ -123,7 +123,7 @@ export default {
transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
background-color: $deepBlue;
background-color: $deep-blue;
}
.vjs-control-bar {
......
......@@ -280,7 +280,7 @@ export default {
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $deepBlue;
border-bottom: 3px solid $deep-blue;
border-radius: 30px;
}
}
......@@ -298,7 +298,7 @@ export default {
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $deepBlue;
border-bottom: 3px solid $deep-blue;
border-radius: 30px;
}
}
......
......@@ -145,7 +145,7 @@ export default {
.intro {
& > p {
color: #666;
// font-family: $defaultFontFamily;
// font-family: $default-font-family;
}
}
......
......@@ -295,13 +295,13 @@ export default {
}
</style>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: $deepBlue;
// background-color: $deep-blue;
// color: #fff;
.content-wrapper {
padding-top: 60px;
......@@ -352,7 +352,7 @@ $text-indent: 16px;
transition: all 0.5s ease;
&:hover {
border: 2px solid $deepBlue;
border: 2px solid $deep-blue;
.face-image {
transform: scale(1.2);
......@@ -369,7 +369,7 @@ $text-indent: 16px;
}
.img-container {
background-color: rgba($deepBlue, 0.1);
background-color: rgba($deep-blue, 0.1);
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
......@@ -431,7 +431,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: $deepBlue;
color: $deep-blue;
margin-bottom: 18px;
}
......
......@@ -894,7 +894,7 @@ $node-w: 700px;
.swiper-button-prev {
background-image: none;
border: 2px solid #666;
background-color: rgba($deepBlue, 0.5);
background-color: rgba($deep-blue, 0.5);
width: 60px;
height: 60px;
border-radius: 50%;
......@@ -952,7 +952,7 @@ $node-w: 700px;
&:hover,
&.active {
cursor: pointer;
// background-color: $deepBlue;
// background-color: $deep-blue;
background-image: url(@/assets/imgs/show/outer-active.png);
> span {
......@@ -1001,7 +1001,7 @@ $node-w: 700px;
:hover {
background: #fff;
color: $deepBlue;
color: $deep-blue;
}
}
}
......
......@@ -630,13 +630,13 @@ $titleFontFamily: SourceHanSerifCN-Bold;
align-items: center;
.svg-icon {
font-size: 50px;
color: $deepBlue;
color: $deep-blue;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: $deepBlue;
color: $deep-blue;
line-height: 101px;
}
}
......@@ -687,7 +687,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title {
font-size: 26px;
font-weight: 400;
color: $deepBlue;
color: $deep-blue;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
......@@ -840,7 +840,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex;
justify-content: center;
align-items: center;
background-color: $deepBlue;
background-color: $deep-blue;
margin: 20px 0;
color: #fff;
cursor: pointer;
......@@ -871,7 +871,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
color: #831122;
}
.collect {
color: $deepBlue;
color: $deep-blue;
}
}
}
......@@ -885,7 +885,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $deepBlue;
border: 2px solid $deep-blue;
padding: 10px;
border-radius: 50%;
display: flex;
......@@ -897,7 +897,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: $deepBlue;
color: $deep-blue;
font-size: 80px;
}
img {
......@@ -923,7 +923,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
position: relative;
&:hover {
color: $deepBlue;
color: $deep-blue;
&::after {
display: inline-block;
}
......@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
}
.active {
color: $deepBlue;
color: $deep-blue;
&::after {
display: inline-block;
}
......@@ -946,7 +946,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%;
bottom: -10px;
left: 0;
background-color: $deepBlue;
background-color: $deep-blue;
}
}
/**简介和视频 */
......@@ -959,7 +959,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.left-box {
width: 60px;
background-color: $deepBlue;
background-color: $deep-blue;
min-height: 200px;
color: #fff;
font-size: 28px;
......@@ -974,7 +974,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($deepBlue, 10%);
background-color: rgba($deep-blue, 10%);
}
}
......@@ -987,7 +987,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// justify-content: center;
align-items: center;
font-size: 26px;
color: $deepBlue;
color: $deep-blue;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
padding-left: 46px;
......@@ -1009,7 +1009,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
position: relative;
cursor: pointer;
&:hover {
color: $deepBlue;
color: $deep-blue;
&::after {
display: inline-block;
}
......@@ -1023,7 +1023,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
content: "";
width: 50%;
height: 1px;
background-color: $deepBlue;
background-color: $deep-blue;
position: absolute;
left: 0;
bottom: -9px;
......@@ -1037,7 +1037,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $deepBlue;
border-top-color: $deep-blue;
position: absolute;
left: 50%;
bottom: -25px;
......@@ -1130,7 +1130,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 50px;
:hover {
background: #fff;
color: $deepBlue;
color: $deep-blue;
}
}
}
......@@ -1144,7 +1144,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-family: SourceHanSerifCN-Bold;
}
::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{
// border-radius: 0;
......
......@@ -558,7 +558,7 @@ $text-indent: 16px;
text-align: center;
text-align: center;
&:hover {
// border: 2px solid $deepBlue;
// border: 2px solid $deep-blue;
// border-radius: 100%;
......@@ -686,7 +686,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: $deepBlue;
color: $deep-blue;
margin-bottom: 18px;
width: 100%;
white-space: nowrap;
......@@ -872,7 +872,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: $deepBlue;
background: $deep-blue;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
......@@ -360,7 +360,7 @@ $text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: $deepBlue;
// background-color: $deep-blue;
// color: #fff;
.search-bar {
display: flex;
......@@ -482,7 +482,7 @@ $text-indent: 16px;
display: flex;
justify-content: center;
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 {
display: flex;
......@@ -513,7 +513,7 @@ $text-indent: 16px;
.text {
cursor: pointer;
&:hover {
color: $deepBlue;
color: $deep-blue;
}
}
......@@ -567,7 +567,7 @@ $text-indent: 16px;
transition: all 0.5s ease;
&:hover {
// border: 2px solid $deepBlue;
// border: 2px solid $deep-blue;
.face-image {
transform: scale(1.2);
......@@ -651,7 +651,7 @@ $text-indent: 16px;
font-size: 20px;
padding: 20px 0;
// font-weight: bold;
// color: $deepBlue;
// color: $deep-blue;
color: #333;
// margin-bottom: 18px;
width: 100%;
......@@ -786,7 +786,7 @@ $text-indent: 16px;
background: #fff;
min-width: 0;
margin: 0 16px;
color: $deepBlue;
color: $deep-blue;
}
.active {
......
......@@ -533,7 +533,7 @@ export default {
<style lang="scss">
.intro-content {
p {
font-family: $defaultFontFamily !important;
font-family: $default-font-family !important;
}
}
</style>
......@@ -1056,7 +1056,7 @@ $themeRed: #892325;
a:hover {
cursor: pointer;
color: $deepBlue;
color: $deep-blue;
}
}
......
......@@ -556,7 +556,7 @@ export default {
.unit-content_intro {
p {
// color: red !important;
font-family: $defaultFontFamily !important;
font-family: $default-font-family !important;
font-size: 22px;
text-indent: 44px;
// color: #fff !important;
......@@ -564,14 +564,14 @@ export default {
}
</style>
<style lang="scss" scoped>
$deepBlue: #a30e0c;
$deep-blue: #a30e0c;
// 中国风主题样式
/**公共样式开始 */
.custom-title {
width: 50px;
background-color: $deepBlue;
background-color: $deep-blue;
min-height: 300px;
color: #fff;
font-size: 28px;
......@@ -944,12 +944,12 @@ $deepBlue: #a30e0c;
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $deepBlue;
// border: 1px solid $deep-blue;
color: #666;
cursor: pointer;
&:hover {
color: $deepBlue;
color: $deep-blue;
}
.svg-icon {
......
......@@ -89,7 +89,7 @@ export default {
<style lang="scss">
.units-content-intro,.unit-intro{
p{
font-family: $defaultFontFamily !important;
font-family: $default-font-family !important;
}
}
</style>
......
......@@ -664,7 +664,7 @@ export default {
.display-detail_intro {
.intro-content {
p {
font-family: $defaultFontFamily !important;
font-family: $default-font-family !important;
}
}
}
......@@ -710,19 +710,19 @@ $titleFontFamily: SourceHanSerifCN-Bold;
i {
margin-right: 10px;
font-size: 28px;
color: $deepBlue;
color: $deep-blue;
}
.svg-icon {
font-size: 32px;
color: $deepBlue;
color: $deep-blue;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: $deepBlue;
color: $deep-blue;
font-family: "SourceHanSerifCN-Bold";
}
}
......@@ -933,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.collect {
color: $deepBlue;
color: $deep-blue;
}
}
}
......@@ -948,7 +948,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $deepBlue;
border: 2px solid $deep-blue;
padding: 10px;
border-radius: 50%;
display: flex;
......@@ -962,7 +962,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.svg-icon {
color: $deepBlue;
color: $deep-blue;
font-size: 80px;
}
......@@ -983,14 +983,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.tab-item {
height: 100%;
margin-right: 40px;
color: $deepBlue;
color: $deep-blue;
font-size: 24px;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $deepBlue;
color: $deep-blue;
&::after {
display: inline-block;
......@@ -1003,7 +1003,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.active {
color: $deepBlue;
color: $deep-blue;
&::after {
display: inline-block;
......@@ -1018,7 +1018,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%;
bottom: -10px;
left: 0;
background-color: $deepBlue;
background-color: $deep-blue;
}
}
......@@ -1032,7 +1032,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title {
font-size: 26px;
font-weight: 400;
color: $deepBlue;
color: $deep-blue;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
......@@ -1055,7 +1055,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.left-box {
width: 60px;
background-color: $deepBlue;
background-color: $deep-blue;
min-height: 200px;
color: #fff;
font-size: 28px;
......@@ -1071,7 +1071,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($deepBlue, 10%);
background-color: rgba($deep-blue, 10%);
}
}
......@@ -1086,7 +1086,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// justify-content: center;
align-items: center;
font-size: 24px;
color: $deepBlue;
color: $deep-blue;
padding: 0 40px;
margin-bottom: 32px;
font-family: SourceHanSerifCN-Bold;
......@@ -1115,16 +1115,16 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.name {
padding: 8px;
// border-radius: 4px;
color: $deepBlue;
color: $deep-blue;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $deepBlue;
border: 1px solid $deep-blue;
font-size: 14px;
&:hover {
background: $deepBlue;
background: $deep-blue;
color: $yellow;
}
&:not(&:last-child) {
......@@ -1134,7 +1134,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.active {
background: $deepBlue;
background: $deep-blue;
color: $yellow;
}
}
......@@ -1156,7 +1156,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// display: flex;
// justify-content: center;
// align-items: center;
// color: $deepBlue;
// color: $deep-blue;
// font-weight: bolder;
// font-size: 28px;
// transform: translateY(-6px);
......@@ -1168,18 +1168,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// .slide-item {
// padding: 8px;
// border-radius: 4px;
// color: $deepBlue;
// color: $deep-blue;
// cursor: pointer;
// text-overflow: ellipsis;
// overflow: hidden;
// width: 100%;
// white-space: nowrap;
// border: 1px solid $deepBlue;
// border: 1px solid $deep-blue;
// font-size: 14px;
// }
// .active {
// background: $deepBlue;
// background: $deep-blue;
// color: #fff;
// }
// }
......@@ -1272,7 +1272,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex;
align-items: center;
font-size: 26px;
color: $deepBlue;
color: $deep-blue;
font-family: SourceHanSerifCN-Bold;
i {
......@@ -1327,7 +1327,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
}
.lt-name {
color: $deepBlue;
color: $deep-blue;
cursor: pointer;
}
}
......
......@@ -180,7 +180,7 @@ export default {
.unit-content_intro {
p {
// color: red !important;
font-family: $defaultFontFamily !important;
font-family: $default-font-family !important;
// color: #333 !important;
}
......@@ -203,17 +203,17 @@ export default {
.slide-item {
padding: 8px;
border-radius: 4px;
color: $deepBlue;
color: $deep-blue;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $deepBlue;
border: 1px solid $deep-blue;
}
.active {
background: $deepBlue;
background: $deep-blue;
color: #fff;
}
}
......@@ -229,7 +229,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
color: $deepBlue;
color: $deep-blue;
font-weight: bolder;
font-size: 28px;
transform: translateY(-6px);
......@@ -345,12 +345,12 @@ export default {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $deepBlue;
// border: 1px solid $deep-blue;
color: #666;
cursor: pointer;
&:hover {
color: $deepBlue;
color: $deep-blue;
}
.svg-icon {
......
......@@ -550,7 +550,7 @@ export default {
.unit-content_intro {
p {
// color: red !important;
font-family: $defaultFontFamily !important;
font-family: $default-font-family !important;
font-size: 22px;
text-indent: 44px;
// color: #fff !important;
......@@ -558,14 +558,14 @@ export default {
}
</style>
<style lang="scss" scoped>
$deepBlue: #a30e0c;
$deep-blue: #a30e0c;
// 中国风主题样式
/**公共样式开始 */
.custom-title {
width: 50px;
background-color: $deepBlue;
background-color: $deep-blue;
min-height: 300px;
color: #fff;
font-size: 28px;
......@@ -949,12 +949,12 @@ $deepBlue: #a30e0c;
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $deepBlue;
// border: 1px solid $deep-blue;
color: #666;
cursor: pointer;
&:hover {
color: $deepBlue;
color: $deep-blue;
}
.svg-icon {
......
......@@ -303,13 +303,13 @@ export default {
</script>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
$text-indent: 16px;
.display {
width: 100%;
// background-color: $deepBlue;
// background-color: $deep-blue;
// color: #fff;
.type-group {
......@@ -337,7 +337,7 @@ $text-indent: 16px;
color: #999;
&:hover {
color: $deepBlue;
color: $deep-blue;
}
}
......@@ -463,7 +463,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: $deepBlue;
color: $deep-blue;
margin-bottom: 18px;
white-space: nowrap;
overflow: hidden;
......@@ -561,7 +561,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: $deepBlue;
background: $deep-blue;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
......@@ -134,7 +134,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
.home-cr {
// background-image: url("@/assets/imgs/home/display-bg.png");
background-size: cover;
......@@ -147,7 +147,7 @@ $blue: $deepBlue;
display: flex;
flex-direction: column;
align-items: center;
font-family: "Alibaba PuHuiTi";
font-family: "Alibaba pu-hui-ti";
// .ch {
// color: #2d4bb5;
// margin-bottom: 12px;
......@@ -184,7 +184,7 @@ $blue: $deepBlue;
color: #2d4ab5;
margin-bottom: 8px;
// margin-top: 40px;
font-family: "Alibaba PuHuiTi";
font-family: "Alibaba pu-hui-ti";
font-size: 48px;
font-weight: bold;
}
......
......@@ -157,7 +157,7 @@ export default {
color: #fff;
// margin-top: 10px;
// margin-bottom: 90px;
font-family: "Alibaba PuHuiTi";
font-family: "Alibaba pu-hui-ti";
flex-basis: auto;
font-size: 48px;
font-weight: bold;
......@@ -205,7 +205,7 @@ export default {
.content {
color: #fff;
font-family: "Alibaba PuHuiTi";
font-family: "Alibaba pu-hui-ti";
width: 600px;
height: 100%;
......
......@@ -577,7 +577,7 @@ export default {
// margin-top: 100px;//去除上间距
width: 600px;
color: #333;
font-family: "Alibaba PuHuiTi";
font-family: "Alibaba pu-hui-ti";
height: 50vh;
position: relative;
padding: 40px;
......@@ -680,7 +680,7 @@ export default {
}
.num {
// font-weight: bold;
font-family: $puHuiTi;
font-family: $pu-hui-ti;
font-size: 60px;
margin: 0 4px;
cursor: pointer;
......
......@@ -115,7 +115,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
.home-virtural {
display: flex;
......@@ -134,7 +134,7 @@ $blue: $deepBlue;
flex-direction: column;
align-items: center;
padding: 100px 0 80px 0;
font-family: "Alibaba PuHuiTi";
font-family: "Alibaba pu-hui-ti";
.ch {
font-size: 30px;
......@@ -153,7 +153,7 @@ $blue: $deepBlue;
width: 74vw;
.intro {
font-family: "Alibaba PuHuiTi";
font-family: "Alibaba pu-hui-ti";
color: #ffffff;
margin-top: 110px;
// width: 300px;
......
......@@ -379,7 +379,7 @@ $node-w: 700px;
&:hover,
&.active {
cursor: pointer;
// background-color: $deepBlue;
// background-color: $deep-blue;
background-image: url(@/assets/imgs/show/outer-active.png);
> span {
......
......@@ -240,7 +240,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
$text-indent: 16px;
.display {
width: 100%;
......@@ -281,7 +281,7 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid $deepBlue;
border: 2px solid $deep-blue;
.face-image {
transform: scale(1.2);
}
......@@ -307,7 +307,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: $deepBlue;
color: $deep-blue;
margin-bottom: 18px;
}
.deptName {
......
......@@ -35,7 +35,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
.container {
border: 1px solid #f1f1f1;
height: 300px;
......
......@@ -264,7 +264,7 @@ export default {
}
::v-deep .el-descriptions__extra {
.el-button {
background-color: $deepBlue;
background-color: $deep-blue;
border-radius: 0;
border: none;
}
......@@ -300,7 +300,7 @@ export default {
.edit-button {
width: 160px;
height: 50px;
background-color: $deepBlue;
background-color: $deep-blue;
display: flex;
justify-content: center;
align-items: center;
......
......@@ -53,7 +53,7 @@ export default {
</script>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
.personal {
padding: 40px 0;
background-color: #fff;
......@@ -106,13 +106,13 @@ $blue: $deepBlue;
}
::v-deep .el-tabs__active-bar {
background-color: $deepBlue;
background-color: $deep-blue;
}
::v-deep {
.el-tabs__item:hover,
.el-tabs__item.is-active {
color: $deepBlue;
color: $deep-blue;
}
}
::v-deep .el-descriptions {
......
......@@ -260,7 +260,7 @@ export default {
.wrapper {
width: 100%;
// 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-size: 100%;
background-position: center;
......@@ -312,7 +312,7 @@ export default {
border-radius: 0px;
&:last-child {
width: 160px;
background-color: $deepBlue;
background-color: $deep-blue;
&:hover {
filter: brightness(0.9);
}
......
<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>
......@@ -13,7 +13,16 @@
<div class="right-pic"></div>
</div>
<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
ref="upload"
class="upload-area"
......@@ -49,13 +58,29 @@
</div>
</div>
</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>
<ImgList v-if="showResult" />
</div>
</template>
<script>
import ImgList from "./components/imgList";
export default {
components: {
ImgList,
},
data() {
return {
// progressText: "", //进度文字
......@@ -63,6 +88,7 @@ export default {
showProgress: false, //是否展示进度条
fileList: [], //双向绑定的文件,上传完之后会被清空
showFileList: [], //展示的文件列表,上传之后不会被清空
showResult: true, //是否展示图片结果
};
},
mounted() {},
......@@ -81,16 +107,8 @@ export default {
formData.append("file", file);
this.showProgress = true;
// TODO:上传接口调用
// await realtimeUpload(formData, this).then((res) => {
// if (res.code == "0") {
// this.$message.success(res.data);
// } else {
// this.$message.warning(res.data);
// }
// });
setTimeout(() => {
this.showProgress = false;
// this.rotateFn(0)
this.progressPercent = 0;
}, 1000);
},
......@@ -110,30 +128,39 @@ export default {
}
this.showProgress = false;
},
// 关闭已上传的图片
handleCloseImg() {
console.log("关闭");
},
},
};
</script>
<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 {
width: 100%;
background-image: url("@/assets/imgs/home-new/all-bg.png");
}
.banner {
height: 400px;
background: $deepBlue;
// background: $deep-blue;
width: 100%;
position: relative;
overflow: hidden;
// overflow: hidden;
.left-pic {
transition: all ease 0.5s;
position: absolute;
left: -100px;
top: 0;
top: 100px;
height: 150%;
width: 700px;
background-size: contain;
background-image: url("@/assets/imgs/search-pic/6.png");
background-repeat: no-repeat;
z-index: 2;
z-index: 0;
}
.right-pic {
position: absolute;
......@@ -144,7 +171,7 @@ export default {
background-size: contain;
background-image: url("@/assets/imgs/search-pic/3.png");
background-repeat: no-repeat;
z-index: 2;
z-index: 0;
}
.text {
position: absolute;
......@@ -156,7 +183,8 @@ export default {
color: #fff;
padding: 100px 12%;
opacity: 1;
transition: all ease 0.3s;
transition: $transition-ease-03s;
color: $deep-blue;
.title {
font-size: 48px;
font-family: "SourceHanSerifCN-Bold";
......@@ -171,59 +199,141 @@ export default {
}
}
.upload-wrapper {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
padding: 0 13%;
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;
margin-bottom: 16px;
font-size: 18px;
.upload-bar {
box-shadow: $box-shadow;
background: #fff;
border-radius: 8px;
width: 100%;
display: flex;
justify-content: space-between;
padding: 10px 20px;
border: 1px solid $deep-blue;
position: relative;
cursor: pointer;
transition: $transition-ease-03s;
&:hover {
box-shadow: $box-shadow-hover;
}
.left-area {
display: flex;
justify-content: space-between;
padding-right: 16px;
width: 80%;
i {
font-size: 30px;
color: $deep-blue;
}
}
.right-button {
width: 20%;
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%;
color: #fff;
background: $deep-blue;
height: 100%;
.el-upload-dragger {
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;
align-items: center;
flex-direction: column;
padding: 0 13%;
position: relative;
z-index: 2;
margin-bottom: 50px;
.img-container {
background: #fff;
border-radius: 8px;
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;
}
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;
}
}
}
......@@ -231,5 +341,6 @@ export default {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
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",
},
];
......@@ -226,11 +226,11 @@ export default {
</script>
<style lang="scss" scoped>
$blue: $deepBlue;
$blue: $deep-blue;
$text-indent: 16px;
.display {
width: 100%;
// background-color: $deepBlue;
// background-color: $deep-blue;
// color: #fff;
.content-wrapper {
padding-top: 60px;
......@@ -301,7 +301,7 @@ $text-indent: 16px;
cursor: pointer;
transition: all 0.5s ease;
&:hover {
border: 2px solid $deepBlue;
border: 2px solid $deep-blue;
.face-image {
transform: scale(1.2);
}
......@@ -361,7 +361,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: $deepBlue;
color: $deep-blue;
margin-bottom: 18px;
}
.deptName {
......@@ -424,7 +424,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: $deepBlue;
background: $deep-blue;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论