Skip to content

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

增加以图搜图的静态页面；删除多余代码；封装复用组件

上级 8882e374
显示空白字符变更
内嵌 并排
正在显示 包含 317 行增加 和 165 行删除
src/assets/imgs/search-pic/2.png 0 → 100644
浏览文件 @ 9b5bd34c
差异被折叠。
src/assets/imgs/search-pic/4.png 0 → 100644
浏览文件 @ 9b5bd34c
差异被折叠。
src/components/Footer/index.vue
浏览文件 @ 9b5bd34c
<!-- -->
<template>
<div
:class="{
footer: true,
//isHome:isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5',
isJYYCC: navbarStyle == '6',
isYLGDYW: navbarStyle == '7',
}"
>
<div class="footer">
<!-- <span>贵州省文化和旅游厅博物馆处版权所有</span>
<span>中国知网提供技术支持</span> -->
<div class="logo">
......
src/components/NavBar/config.js 0 → 100644
浏览文件 @ 9b5bd34c
// nav中的菜单
export const menus = [
{
label: "首页",
path: "/",
},
{
label: "展览展示",
path: "/display",
children: [
{
label: "基本陈列展",
path: "/display",
},
{
label: "十大精品展",
path: "/boutique",
},
{
label: "虚拟展厅",
path: "/virtual",
},
],
},
{
label: "文物展示",
path: "/culturalRelic",
},
{
label: "博物馆",
path: "/museum",
},
{
label: "文创产品",
path: "/ccProduct",
},
]
// 各个主题下的nav下的背景颜色，暂未上色
export const colors = {
CN: {
color: 'rgba(0, 0, 0, 0.25)',
desc: '中国风'
},
RED: {
color: 'rgba(0, 0, 0, 0.25)',
desc: '红色文化'
},
SDCS: {
color: '#6c0c0d',
desc: '四渡赤水精品展'
},
SMGZ: {
color: '#00173a',
desc: '神秘贵州精品展'
},
JYYCC: {
color: '#343b66',
desc: '记忆与传承精品展'
},
YLGDYW: {
color: '#212040',
desc: '夜郎国的疑问精品展'
},
}
\ No newline at end of file
src/components/NavBar/index.vue
浏览文件 @ 9b5bd34c
......@@ -2,16 +2,8 @@
<div
:class="{
nav: true,
'header-absolute': isAbsolute,
'header-fixed ': isFixed,
// 'header-absolute': isHome || isBoutique,
'show-themeColor': showThemeColor,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4' && isFixed,
isSMGZ: navbarStyle == '5' && isFixed,
isJYYCC: navbarStyle == '6' && isFixed,
isYLGDYW: navbarStyle == '7' && isFixed,
fixed: isFixed,
'background-transparent': isBackgroundTransparent,
}"
id="navbar"
>
......@@ -25,17 +17,17 @@
<div
class="tab-item"
:class="{
active: currentTab.name == item.name,
active: currentTab.label == item.label,
}"
v-for="(item, index) in pages"
v-for="(item, index) in menus"
:key="index"
@click="handleClickTab(item)"
@mouseenter="handleEnterTabItem(item)"
@mouseleave="handleLeaveTabItem(item)"
>
<span @click="handleToPage(item.path)">{{ item.name }} </span>
<span @click="handleToPage(item.path)">{{ item.label }} </span>
<i
v-if="item.name == '展览展示'"
v-if="item.label == '展览展示'"
class="el-icon-arrow-down"
style="transform: translate(30%, 30%); cursor: pointer"
></i>
......@@ -43,7 +35,7 @@
</div>
<div class="tools animate__animated animate__fadeInRight">
<div class="wrapper">
<span class="search-pic">
<span class="search-pic" @click="handleToSearchPic">
<i class="el-icon-search"></i>
以图搜图
</span>
......@@ -82,8 +74,6 @@
</div>
</div>
</div>
<!-- 加特效会有抖动 -->
<!-- <transition name="el-zoom-in-top"> -->
<div
class="submenu"
v-show="showSubMenu"
......@@ -112,62 +102,59 @@
import { mapGetters } from "vuex";
import { getDisplayExistDict } from "@/api/display";
import LoginDialog from "./components/loginDialog.vue";
import { menus } from "./config";
export default {
name: "NavBar",
components: {
LoginDialog,
},
computed: {
...mapGetters([
"token",
"userInfo",
"curPath",
"navBarFixed",
"navbarStyle",
]),
...mapGetters(["token", "userInfo", "curPath"]),
hasToken() {
return this.token;
},
// nav背景颜色为透明
isBackgroundTransparent() {
const { path } = this.$route;
const isIndex = path == "/";
const isBoutique = path.includes("/boutique");
return !this.isFixed && (isIndex || isBoutique);
},
},
watch: {
curPath: {
handler: function (value) {
this.isHome = value.name == "home";
this.isBoutique = value.name == "boutique";
const currentPath = value.path;
if (currentPath == "/") {
this.currentTab = {
name: value.name,
path: value.path,
label: "首页",
path: "/",
};
if (value.name.indexOf("display") != -1) {
} else if (
currentPath.includes("/boutique") ||
currentPath.includes("/display")
) {
this.currentTab = {
name: "展览展示",
label: "展览展示",
path: "/display",
};
}
if (value.name.indexOf("culturalRelic") != -1) {
} else if (currentPath.includes("/museum")) {
this.currentTab = {
name: "文物展示",
path: "/culturalRelic",
};
}
if (value.name.indexOf("museum") != -1) {
this.currentTab = {
name: "博物馆",
label: "博物馆",
path: "/museum",
};
}
if (value.name.indexOf("ccProduct") != -1) {
} else if (currentPath.includes("/ccProduct")) {
this.currentTab = {
name: "文创产品",
label: "文创产品",
path: "/ccProduct",
};
}
if (value.name == "home") {
} else if (currentPath.includes("/culturalRelic")) {
this.currentTab = {
name: "首页",
path: "/",
label: "文物展示",
path: "/culturalRelic",
};
}
if (value.params.themeType) {
this.$store.commit("app/CHANGE_NAV_COLOR", value.params.themeType);
} else {
......@@ -176,56 +163,14 @@ export default {
},
immediate: true,
},
"$route.path"(cur) {
this.getAbsolute(cur);
this.isListPage(cur);
},
},
data() {
return {
pages: [
{
name: "首页",
path: "/",
},
{
name: "展览展示",
path: "/display",
children: [
{
name: "基本陈列展",
path: "/display",
},
{
name: "十大精品展",
path: "/boutique",
},
{
name: "虚拟展厅",
path: "/virtual",
},
],
},
{
name: "文物展示",
path: "/culturalRelic",
},
{
name: "博物馆",
path: "/museum",
},
{
name: "文创产品",
path: "/ccProduct",
},
],
menus,
currentTab: {
name: "首页",
path: "/",
},
isHome: true,
isBoutique: false, //是否是精品展页
isFixed: false,
offsetTop: 0,
showSubMenu: false,
......@@ -235,44 +180,18 @@ export default {
value: "",
},
],
isAbsolute: true,
showThemeColor: false,
};
},
mounted() {
window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => {
this.offsetTop = document.querySelector("#navbar").offsetTop;
let navBarHeight = document.querySelector("#navbar").offsetHeight;
this.$store.commit("app/SET_NAVBAR_HEIGHT", navBarHeight);
});
this.loadDisplayTypeList();
let path = this.$route.path;
this.getAbsolute(path);
this.isListPage(path);
},
methods: {
getAbsolute(path) {
let arr = path.split("/");
if (path.indexOf("/display") === 0 && arr.length === 4) {
this.isAbsolute = false;
} else {
this.isAbsolute = true;
}
},
isListPage(path) {
let pages = [
"/display",
"/culturalRelic",
"/museum",
"/ccProduct",
"/personal",
];
this.showThemeColor = pages.includes(path);
},
initHeight() {
let scrollTop =
window.pageYOffset ||
......@@ -354,9 +273,12 @@ export default {
async loadDisplayTypeList() {
let res = await getDisplayExistDict();
// debugger
this.typeList = [...this.typeList, ...res.data.typeList];
},
handleToSearchPic() {
this.$router.push("/searchPic");
},
},
destroyed() {
......@@ -366,47 +288,15 @@ export default {
</script>
<style lang="scss" scoped>
.header-absolute {
position: absolute;
top: 0;
left: 0;
z-index: 9;
background-color: rgba(#000, 0.25) !important;
}
.header-fixed {
.fixed {
position: fixed !important;
background-color: $deepBlue !important;
z-index: 99;
top: 0;
}
.show-themeColor {
background-color: $deepBlue !important;
}
.isChStyle {
background-color: rgba(0, 0, 0, 0.25) !important;
}
.isRedStyle {
background-color: rgba(0, 0, 0, 0.25) !important;
}
.isSDCS {
background-color: #6c0c0d !important;
}
.isSMGZ {
background-color: #00173a !important;
}
.isJYYCC {
background-color: #343b66 !important;
}
.isYLGDYW {
background-color: #212040 !important;
.background-transparent {
background-color: rgba(#000, 0.25) !important;
}
.nav {
......@@ -576,12 +466,10 @@ export default {
.el-dropdown-menu {
background-color: #fff;
// border: 1px solid #8a919f;
}
.el-dropdown-menu__item {
background-color: transparent;
// color: #fff;
color: #8a919f;
a {
......
src/icons/svg/img.svg 0 → 100644
浏览文件 @ 9b5bd34c
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695881329387" class="icon" viewBox="0 0 1128 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3169" xmlns:xlink="http://www.w3.org/1999/xlink" width="88.125" height="80"><path d="M165.789 99.167h783c22.5 0 40.5 18 40.5 40.5v319.5c-40.5-31.5-117-81-175.5-81-85.5 0-162 198-256.5 198-72-4.5-171-85.5-283.5-72-45 9-108 81-148.5 135v-499.5c0-22.5 18-40.5 40.5-40.5zM354.788 423.167c-36 0-67.5-13.5-90-36s-36-58.5-36-90c0-31.5 13.5-67.5 36-90 22.5-22.5 54-36 90-36 31.5 0 63 13.5 90 36 22.5 22.5 36 58.5 36 90 0 31.5-13.5 67.5-36 90-27 22.5-58.5 36-90 36zM971.288 40.667h-828c-45 0-81 36-81 81v738c0 45 36 81 81 81h828c45 0 81-36 81-81v-738c0-45-36-81-81-81z" p-id="3170"></path></svg>
\ No newline at end of file
src/router/index.js
浏览文件 @ 9b5bd34c
......@@ -145,6 +145,15 @@ const routes = [
keepAlive: false,
},
},
// 以图搜图
{
path: "/searchPic",
name: "searchPic",
component: () => import("@/views/searchPic/index.vue"),
meta: {
keepAlive: false,
},
},
{
path: "/jyycc",
name: "JYYCC",
......
src/views/searchPic/index.vue 0 → 100644
浏览文件 @ 9b5bd34c
<template>
<div class="app-container show-result">
<div class="banner">
<div class="text">
<div class="title">以图搜图</div>
<div class="subtitle">
以图搜图是一种方便快捷的搜索方式，它可以帮助您在海量的图片信息中快速找到您需要的图片。
<br />
通过上传或直接输入图片，以图搜图可以为您匹配相似的图片，或者根据图片内容找到相关的图片，让您可以更轻松地获取所需图片。
</div>
</div>
<div class="left-pic"></div>
<div class="right-pic"></div>
</div>
<div class="upload-wrapper">
<div class="upload-panel">
<el-upload
ref="upload"
class="upload-area"
name="zipFile"
accept=".zip"
:action="importZipUrl"
:headers="headers"
:on-success="handleSuccess"
:on-change="handleChange"
:auto-upload="false"
drag
>
<div class="icon">
<svg-icon icon-class="img"></svg-icon>
</div>
<div class="text">
<em>拖拽图片</em> 到这里或 <em>点击这里</em> 上传图片
</div>
<div class="camera">
<svg-icon icon-class="camera"></svg-icon>
</div>
</el-upload>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.app-container {
width: 100%;
}
.banner {
height: 400px;
background: $deepBlue;
width: 100%;
position: relative;
overflow: hidden;
.left-pic {
transition: all ease 0.5s;
position: absolute;
left: -100px;
top: 0;
height: 150%;
width: 700px;
background-size: contain;
background-image: url("@/assets/imgs/search-pic/6.png");
background-repeat: no-repeat;
z-index: 2;
}
.right-pic {
position: absolute;
right: 0;
bottom: 0;
height: 80%;
width: 400px;
background-size: contain;
background-image: url("@/assets/imgs/search-pic/3.png");
background-repeat: no-repeat;
z-index: 2;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
color: #fff;
padding: 100px 12%;
opacity: 1;
transition: all ease 0.3s;
.title {
font-size: 48px;
font-family: "SourceHanSerifCN-Bold";
text-align: center;
margin-bottom: 8px;
}
.subtitle {
text-align: center;
text-indent: 28px;
letter-spacing: 2px;
}
}
}
.upload-wrapper {
height: 400px;
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: $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 {
display: none;
}
}
}
}
}
}
.show-result {
.banner {
.subtitle {
opacity: 0;
}
}
.upload-wrapper {
height: 90px;
.upload-panel {
height: 80px;
transform: translateY(-200px);
}
}
::v-deep .el-upload-dragger {
align-items: flex-start !important;
padding: 0 10px;
position: relative;
.icon {
opacity: 0;
}
.text {
transform: translateY(-28px);
}
.camera {
color: $deepBlue;
display: inline-block;
position: absolute;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论