Skip to content

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

首页文物推荐完善

上级 893e8d9e
隐藏空白字符变更
内嵌 并排
正在显示 包含 302 行增加 和 162 行删除
src/components/NavBar/index.vue
浏览文件 @ 265a2d3b
......@@ -109,7 +109,7 @@ export default {
path: "/virtual",
},
{
name: "布展",
name: "展览",
path: "/display",
},
{
......@@ -151,10 +151,13 @@ export default {
</script>
<style lang="scss" scoped>
a {
color: #fff;
text-decoration: none;
.tab-item {
a {
color: #fff;
text-decoration: none;
}
}
.nav {
height: 100px;
width: 100%;
......@@ -213,16 +216,24 @@ a {
}
.el-dropdown-menu {
background-color: transparent;
background-color: #fff;
// border: 1px solid #8a919f;
}
.el-dropdown-menu__item {
background-color: transparent;
color: #fff;
// color: #fff;
color: #8a919f;
a {
text-decoration: none;
color: #8a919f;
}
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
// background-color: rgba(255, 255, 255, 0.2);
// color: #fff;
background-color: #f8f8f8;
color: #8a919f;
}
</style>
\ No newline at end of file
src/views/display/Detail.vue
浏览文件 @ 265a2d3b
......@@ -127,7 +127,7 @@
displayDetail.exhibitionUnits.length > 0
"
>
<CustomTitle text="布展单元" />
<CustomTitle text="展览单元" />
<el-row :gutter="20">
<el-col :span="8">
<!-- 只能单开 unique-opened -->
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 265a2d3b
......@@ -7,33 +7,38 @@
</div>
<div class="text">文物</div>
<div class="list">
<el-carousel indicator-position="outside" :autoplay="false" arrow="never">
<el-carousel-item>
<el-row :gutter="14">
<el-col
:span="6"
v-for="item in list1"
:key="item.crId"
class="container"
>
<img :src="item.faceImageUrl" alt="" width="100%" />
</el-col>
</el-row>
<!-- 1231
<el-carousel>
<el-carousel-item v-for="(item,index) in length" :key="index">
{{item}}
</el-carousel-item>
<el-carousel-item>
</el-carousel> -->
<el-carousel indicator-position="outside" :autoplay="false" arrow="never">
<el-carousel-item v-for="(item, index) in list" :key="index">
<el-row :gutter="14">
<el-col
:span="6"
v-for="item in list2"
:key="item.crId"
class="container"
>
<img :src="item.faceImageUrl" alt="" width="100%" />
<el-col :span="6" v-for="i in item" :key="i.crId" class="container">
<img :src="i.faceImageUrl" alt="" width="100%" />
<div class="info" v-show='i.faceImageUrl'>
<div class="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWay }}</div>
</div>
</el-col>
</el-row>
</el-carousel-item>
</el-carousel>
</div>
<!-- <el-row v-if="list.length < 9 && list.length > 0" :gutter="14">
<el-col
:span="24 / list.length"
class="container"
v-for="item in list"
:key="item.crId"
>
<el-image :src="item.faceImageUrl" style="width: 100%; height: 100%" />
</el-col>
</el-row> -->
</div>
</template>
......@@ -42,18 +47,44 @@ import { getRecommendCr } from "@/api/culturalRelic";
export default {
data() {
return {
list1: [],
list2: [],
list: [],
length: "",
};
},
mounted() {
created() {
this.loadList();
},
// watch: {
// list: {
// handler: function (value) {
// console.log(value);
// this.list = value;
// },
// immediate: true,
// deep: true,
// },
// },
methods: {
async loadList() {
let res = await getRecommendCr();
this.list1 = res.data.slice(0, 8);
this.list2 = res.data.slice(-8);
if (res.data.length > 8) {
this.length =
res.data.length % 8 == 0
? res.data.length / 8
: Math.floor(res.data.length / 8) + 1;
for (let i = 0; i < this.length; i++) {
let data = [];
if (i == length - 1) {
data = res.data.slice(8 * i, res.data.length);
} else {
data = res.data.slice(8 * i, (i + 1) * 8);
}
this.$set(this.list, i, data);
}
this.$set(this, "list", this.list);
} else {
this.list = res.data;
}
},
},
};
......@@ -100,16 +131,24 @@ export default {
height: 226px;
margin-bottom: 40px;
cursor: pointer;
position: relative;
img {
width: 100%;
height: 100%;
}
.info{
position: absolute;
right: 20px;
bottom: 10px;
font-family: Lisu;
color: #fff;
}
}
}
::v-deep .el-carousel__container {
height: 492px;
}
.el-carousel--horizontal{
.el-carousel--horizontal {
overflow: hidden;
}
</style>
src/views/home/components/Display.vue
浏览文件 @ 265a2d3b
......@@ -3,7 +3,7 @@
<div class="home-display">
<div class="title">展览</div>
<transition name="el-fade-in-linear">
<div class="wrapper" v-show="currentItem.exhibitionId">
<div class="wrapper" v-show="currentItem">
<div class="content">
<div class="content-name">{{ currentItem.title }}</div>
<div class="content-intro">
......@@ -17,12 +17,12 @@
<div class="pagination">
<ul>
<li
v-for="(item, index) in [1, 2, 3, 4]"
v-for="(item, index) in list"
:key="index"
:class="currentPage == item ? 'active' : ''"
:class="currentItem == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ item }}
{{ index + 1 }}
</li>
</ul>
</div>
......@@ -65,7 +65,7 @@ export default {
data() {
return {
list: [],
currentPage: 1,
// currentPage: 1,
currentItem: {},
};
},
......@@ -79,10 +79,11 @@ export default {
this.currentItem = this.list[0];
},
handleChangePage(page) {
this.currentPage = page;
debugger;
// this.currentPage = page;
// debugger
this.currentItem = null;
this.currentItem = this.list[page - 1];
// this.currentItem = null;
this.currentItem = page;
},
},
};
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 265a2d3b
......@@ -39,7 +39,8 @@ export default {
};
},
mounted() {
// this.changeOptions();
echarts.registerMap("guizhou", guizhou);
this.changeOptions("guizhou");
this.$nextTick(() => {
this.init();
});
......@@ -66,9 +67,7 @@ export default {
}
});
// 图标
console.log("seriesList", seriesList);
const series = seriesList.map((v) => {
console.log("v", v);
return {
type: "custom", //配置显示方式为用户自定义
coordinateSystem: "geo",
......@@ -92,10 +91,6 @@ export default {
},
};
});
console.log("series", series);
// debugger;
// options
this.distributionOptions = {
tooltip: {
// 提示框组件
......@@ -114,7 +109,11 @@ export default {
item.longitude == a.value[0] &&
item.latitude == a.value[1]
) {
faceImageUrl = `<img width="200px" src="${item.faceImageUrl}" />`;
faceImageUrl = `<div>
<div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
<div/>
<img width="400px" src="${item.faceImageUrl}" />
</div>`;
that.curMuseum = item;
return;
}
......@@ -156,42 +155,73 @@ export default {
// ],
label: {
normal: {
//静态的时候展示样式
show: true, //是否显示地图省份得名称
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
fontFamily: "Arial",
},
},
emphasis: {
// 高亮状态下的样式
//动态展示的样式
color: "#fff",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
// 地图区域的多边形 图形样式。
normal: {
borderColor: "#fff", // 边框颜色
areaColor: "#2759af", // 区域颜色
textStyle: {
// 文字颜色
color: "#fff",
},
// shadowBlur: 10, // 图形阴影的模糊大小
// shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
areaColor: "#013C62",
shadowColor: "#182f68",
shadowOffsetX: 0,
shadowOffsetY: 25,
borderColor: "#2ab8ff",
borderWidth: 1.5,
areaColor: "#12235c",
},
emphasis: {
areaColor: "#7b39e2",
color: "#fff",
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green",
},
},
// label: {
// normal: {
// //静态的时候展示样式
// show: true, //是否显示地图省份得名称
// textStyle: {
// color: "#fff",
// fontSize: 10,
// fontFamily: "Arial",
// },
// },
// emphasis: {
// // 高亮状态下的样式
// //动态展示的样式
// color: "#fff",
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowBlur: 20,
// borderWidth: 0,
// shadowColor: "rgba(0, 0, 0, 0.5)",
// },
// },
// itemStyle: {
// // 地图区域的多边形 图形样式。
// normal: {
// borderColor: "#fff", // 边框颜色
// areaColor: "#2759af", // 区域颜色
// textStyle: {
// // 文字颜色
// color: "#fff",
// },
// // shadowBlur: 10, // 图形阴影的模糊大小
// // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
// },
// emphasis: {
// areaColor: "#7b39e2",
// color: "#fff",
// },
// },
},
};
},
......@@ -205,11 +235,30 @@ export default {
init() {
echarts.registerMap("guizhou", guizhou);
this.changeOptions("guizhou");
let that = this;
setTimeout(() => {
this.myChart = echarts.init(document.getElementById("map"));
this.myChart.setOption(this.distributionOptions);
that.myChart = echarts.init(document.getElementById("map"));
that.myChart.setOption(this.distributionOptions);
that.myChart.on("click", (params) => {
// console.log(params);
// 有标注点的地方有data
if (params.data && params.data.value) {
that.museumList.forEach((item) => {
if (
item.longitude &&
item.latitude &&
item.longitude == params.data.value[0] &&
item.latitude == params.data.value[1]
) {
that.curMuseum = item;
return;
}
});
}
that.handleClick(that.curMuseum);
});
window.onresize = () => {
this.myChart.resize();
that.myChart.resize();
};
}, 500);
},
......@@ -226,7 +275,7 @@ export default {
padding: 70px 13% 114px 13%;
.title {
color: #333;
margin-bottom: 43px;
// margin-bottom: 43px;
display: flex;
flex-direction: column;
align-items: center;
......@@ -273,7 +322,7 @@ export default {
.map {
width: 900px;
height: 580px;
height: 820px;
}
}
}
......
src/views/home/index-new.vue
浏览文件 @ 265a2d3b
......@@ -49,7 +49,7 @@
</h1>
</div>
<div style="background-color: #f3ecef" id="page3" class="page">
布展推荐
展览推荐
</div>
<div style="background-color: #607271" id="page4" class="page">
文物推荐
......
src/views/home/index.vue
浏览文件 @ 265a2d3b
<template>
<!-- <child1 slot="skeleton" /> -->
<div class="home">
<!-- <Boutique class="home-item" ref="Boutique" v-if="boutiqueShow" />
<Virtural class="home-item" ref="Virtural" v-if="virtualShow" />
<CulturalRelic class="home-item" ref="CulturalRelic" v-if="crShow" />
<Display class="home-item" ref="Display" v-if="displayShow" />
<MuseumMap class="home-item" ref="MuseumMap" v-if="mapShow" /> -->
<vue-lazy-component>
<Boutique class="home-item" />
<Boutique class="home-item" ref="Boutique" />
</vue-lazy-component>
<vue-lazy-component>
<Virtural class="home-item" />
<Virtural class="home-item" ref="Virtural" />
</vue-lazy-component>
<vue-lazy-component>
<CulturalRelic class="home-item" />
<CulturalRelic class="home-item" ref="CulturalRelic" />
</vue-lazy-component>
<vue-lazy-component>
<Display class="home-item" />
<Display class="home-item" ref="Display" />
</vue-lazy-component>
<vue-lazy-component>
<MuseumMap class="home-item" />
<vue-lazy-component>
<MuseumMap class="home-item" ref="MuseumMap" />
</vue-lazy-component>
<!-- <Footer /> -->
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
// import NavBar from "@/components/NavBar";
// import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
......@@ -31,8 +35,8 @@ import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default {
components: {
NavBar,
Footer,
// NavBar,
// Footer,
MuseumMap,
Boutique,
Virtural,
......@@ -41,15 +45,40 @@ export default {
},
name: "Home",
data() {
return {};
return {
boutiqueShow: true,
virtualShow: true,
crShow: true,
displayShow: true,
mapShow: true,
currentScroll:''
};
},
mounted() {
// window.addEventListener("scroll", this.handleScrollbox, true);
},
methods: {
handleClickVitual() {
//暂时写死
window.open(
"https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980"
);
},
// handleScrollbox() {
// this.currentScroll = window.pageYOffset; //表示当前滚动的位置
// if (this.currentScroll >= this.$refs.testref.offsetTop - 600) {
// //当前滚动位置到达testref的时候，显示div（100作为调整用）
// this.testShow = true;
// }
// if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) {
// this.testShow2 = true;
// }
// if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) {
// this.testShow3 = true;
// }
// if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) {
// this.testShow4 = true;
// }
// },
// },
// beforeDestroy() {
// window.removeEventListener("scroll", this.handleScrollbox, true);
},
};
</script>
......
src/views/login/index.vue
浏览文件 @ 265a2d3b
<!-- -->
<template>
<div class="login">
<div class="title">
<div class="text">登录</div>
<div class="close" @click="handleCloseLogin">×</div>
</div>
<el-form :model="loginForm" :label-position="labelPosition" ref="loginForm">
<el-form-item :label-width="formLabelWidth" prop="username">
<el-input
v-model="loginForm.username"
autocomplete="off"
clearable
placeholder="用户名/手机号"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" prop="password">
<el-input
v-model="loginForm.password"
autocomplete="off"
type="password"
clearable
show-password
placeholder="密码"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<el-row :gutter="10">
<el-col :span="16">
<el-form-item prop="captcha">
<el-input
ref="captcha"
v-model="loginForm.captcha"
placeholder="请输入验证码"
name="captcha"
tabindex="3"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
</el-col>
<el-col :span="8" class="captcha">
<img
v-if="requestCodeSuccess"
style="margin-top: 2px"
:src="captchaImgSrc"
@click="handleGetCaptcha"
/>
<img
v-else
style="margin-top: 2px"
src="@/assets/404_images/checkcode.png"
@click="handleGetCaptcha"
/>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="opration">
<div class="register">
<router-link to="/register"> 注册 </router-link>
<span style="margin: 0 10px"> | </span>
<router-link to="/register"> 忘记密码 </router-link>
<div class="wrapper">
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="login">
<div class="title">
<div class="text">登录</div>
<div class="close" @click="handleCloseLogin">×</div>
</div>
<el-button @click="handleLogin" size="small" :loading="loading"
>登 陆</el-button
<el-form
:model="loginForm"
:label-position="labelPosition"
ref="loginForm"
>
<el-form-item :label-width="formLabelWidth" prop="username">
<el-input
v-model="loginForm.username"
autocomplete="off"
clearable
placeholder="用户名/手机号"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" prop="password">
<el-input
v-model="loginForm.password"
autocomplete="off"
type="password"
clearable
show-password
placeholder="密码"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<el-row :gutter="10">
<el-col :span="16">
<el-form-item prop="captcha">
<el-input
ref="captcha"
v-model="loginForm.captcha"
placeholder="请输入验证码"
name="captcha"
tabindex="3"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
</el-form-item>
</el-col>
<el-col :span="8" class="captcha">
<img
v-if="requestCodeSuccess"
style="margin-top: 2px"
:src="captchaImgSrc"
@click="handleGetCaptcha"
/>
<img
v-else
style="margin-top: 2px"
src="@/assets/404_images/checkcode.png"
@click="handleGetCaptcha"
/>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="opration">
<div class="register">
<router-link to="/register"> 注册 </router-link>
<span style="margin: 0 10px"> | </span>
<router-link to="/register"> 忘记密码 </router-link>
</div>
<el-button @click="handleLogin" size="small" :loading="loading"
>登 陆</el-button
>
</div>
</div>
</div>
</template>
......@@ -146,6 +153,9 @@ export default {
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
}
.login {
width: 500px;
margin: 50px auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论