Skip to content

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

首页更新

上级 664acb4a
隐藏空白字符变更
内嵌 并排
正在显示 包含 516 行增加 和 180 行删除
src/assets/styles/variable.scss
浏览文件 @ dcba3a6d
......@@ -10,6 +10,6 @@ $font-size-sm:14px;
$font-size-base:16px;
$font-size-lg:22px;
$nav-height: 120px;
$nav-height: 130px;
$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
src/components/NavBar/index.vue
浏览文件 @ dcba3a6d
<template>
<div :class="{
<div
:class="{
nav: true,
'header-absolute': isAbsolute,
'header-fixed ': isFixed,
......@@ -11,7 +12,9 @@
isSMGZ: navbarStyle == '5' && isFixed,
isJYYCC: navbarStyle == '6' && isFixed,
isYLGDYW: navbarStyle == '7' && isFixed,
}" id="navbar">
}"
id="navbar"
>
<div class="container">
<div class="logo-container animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo3.png" />
......@@ -19,12 +22,23 @@
</div>
<div class="right">
<div class="tabs animate__animated animate__fadeInUp">
<div class="tab-item" :class="{
activeHome: currentTab.name == item.name && isHome,
<div
class="tab-item"
:class="{
active: currentTab.name == item.name,
}" v-for="(item, index) in pages" :key="index" @click="handleClickTab(item)" @mouseenter="handleEnterTabItem(item)" @mouseleave="handleLeaveTabItem(item)">
}"
v-for="(item, index) in pages"
:key="index"
@click="handleClickTab(item)"
@mouseenter="handleEnterTabItem(item)"
@mouseleave="handleLeaveTabItem(item)"
>
<span @click="handleToPage(item.path)">{{ item.name }} </span>
<i v-if="item.name == '陈列展览'" class="el-icon-arrow-down" style="transform: translate(30%, 30%); cursor: pointer"></i>
<i
v-if="item.name == '陈列展览'"
:class="currentTab.name=='陈列展览'?'el-icon-arrow-up':'el-icon-arrow-down'"
style="transform: translate(30%, 30%); cursor: pointer"
></i>
</div>
</div>
<div class="tools animate__animated animate__fadeInRight">
......@@ -36,10 +50,19 @@
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="!hasToken" @click.native="handleToLogin" class="operation-item">登录
<el-dropdown-item
v-if="!hasToken"
@click.native="handleToLogin"
class="operation-item"
>登录
</el-dropdown-item>
<el-dropdown-item v-if="hasToken" class="operation-item" @click.native="handleToPersonal">
个人中心</el-dropdown-item>
<el-dropdown-item
v-if="hasToken"
class="operation-item"
@click.native="handleToPersonal"
>
个人中心</el-dropdown-item
>
<el-dropdown-item v-if="hasToken" @click.native="handleLogOut">
<span>退出</span>
</el-dropdown-item>
......@@ -49,14 +72,27 @@
</div>
</div>
</div>
<transition name="el-zoom-in-top">
<div class="submenu" v-show="showSubMenu" @mouseenter="handleEnterSubmenu" @mouseleave="handleMouseLeaveSubMenu">
<ul>
<li v-for="(item, index) in typeList" :key="index" @click="handleToPage('/display/', item.value, true)">
<span>{{ item.label }}</span>
<svg-icon icon-class="wenshi" v-if="index != typeList.length - 1"></svg-icon>
</li>
<!-- <li>
<!-- 加特效会有抖动 -->
<!-- <transition name="el-zoom-in-top"> -->
<div
class="submenu"
v-show="showSubMenu"
@mouseenter="handleEnterSubmenu"
@mouseleave="handleMouseLeaveSubMenu"
>
<ul>
<li
v-for="(item, index) in typeList"
:key="index"
@click="handleToPage('/display/', item.value, true)"
>
<span>{{ item.label }}</span>
<svg-icon
icon-class="wenshi"
v-if="index != typeList.length - 1"
></svg-icon>
</li>
<!-- <li>
<span @click="handleToPage('/display', true)">基本陈列</span>
<svg-icon icon-class="wenshi"></svg-icon>
</li>
......@@ -65,43 +101,95 @@
<svg-icon icon-class="wenshi"></svg-icon>
</li>
<li><span @click="handleToPage('/virtual', true)">虚拟展厅</span></li> -->
</ul>
</div>
</transition>
<el-dialog :visible.sync="loginVisible" append-to-body v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" :element-loading-text="loadingText" :before-close="handleCloseLogin">
</ul>
</div>
<!-- </transition> -->
<el-dialog
:visible.sync="loginVisible"
append-to-body
v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0.5)"
:element-loading-text="loadingText"
:before-close="handleCloseLogin"
>
<div slot="title" class="login-title">
<div :class="['title-item', isLoginByUsername ? 'active' : '']" @click="handleChangeLoginWay('username')">
<div
:class="['title-item', isLoginByUsername ? 'active' : '']"
@click="handleChangeLoginWay('username')"
>
账号登录
</div>
<div :class="['title-item', isLoginByUsername ? '' : 'active']" @click="handleChangeLoginWay('phone')">
<div
:class="['title-item', isLoginByUsername ? '' : 'active']"
@click="handleChangeLoginWay('phone')"
>
手机号登录
</div>
<div class="line"></div>
</div>
<div class="login">
<el-form :model="loginForm" :label-position="labelPosition" ref="loginForm" :rules="loginRules">
<el-form
:model="loginForm"
:label-position="labelPosition"
ref="loginForm"
:rules="loginRules"
>
<el-form-item :label-width="formLabelWidth" prop="account">
<el-input v-model="loginForm.account" autocomplete="off" clearable :placeholder="isLoginByUsername ? '账号' : '手机号'"></el-input>
<el-input
v-model="loginForm.account"
autocomplete="off"
clearable
:placeholder="isLoginByUsername ? '账号' : '手机号'"
></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-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="12">
<el-form-item prop="captcha">
<el-input ref="captcha" v-model="loginForm.captcha" placeholder="请输入验证码" name="captcha" tabindex="3" auto-complete="on" @keyup.enter.native="handleLoginSubmit" />
<el-input
ref="captcha"
v-model="loginForm.captcha"
placeholder="请输入验证码"
name="captcha"
tabindex="3"
auto-complete="on"
@keyup.enter.native="handleLoginSubmit"
/>
</el-form-item>
</el-col>
<el-col :span="12" class="captcha">
<img v-if="requestCodeSuccess" :src="captchaImgSrc" @click="handleGetCaptcha" />
<img v-else src="@/assets/404_images/checkcode.png" @click="handleGetCaptcha" />
<img
v-if="requestCodeSuccess"
:src="captchaImgSrc"
@click="handleGetCaptcha"
/>
<img
v-else
src="@/assets/404_images/checkcode.png"
@click="handleGetCaptcha"
/>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="opration">
<el-button round @click="handleLoginSubmit" size="small" class="loginBtn">登 陆</el-button>
<el-button
round
@click="handleLoginSubmit"
size="small"
class="loginBtn"
>登 陆</el-button
>
<div class="register" @click="handleToRegister">注册</div>
</div>
</div>
......@@ -124,7 +212,7 @@ export default {
"showLoginDialog",
"navbarStyle",
]),
hasToken () {
hasToken() {
return this.token;
},
},
......@@ -173,22 +261,22 @@ export default {
},
immediate: true,
},
navBarFixed (value) {
navBarFixed(value) {
console.log("navBarFixed", value);
},
showLoginDialog (value) {
showLoginDialog(value) {
this.loginVisible = value;
},
loginVisible (value) {
loginVisible(value) {
if (value) {
this.handleGetCaptcha();
}
},
'$route.path' (cur) {
this.getAbsolute(cur)
}
"$route.path"(cur) {
this.getAbsolute(cur);
},
},
data () {
data() {
var validateAccout = (rule, value, callback) => {
if (value === "") {
let text = this.isLoginByUsername ? "账号" : "手机号";
......@@ -290,10 +378,10 @@ export default {
value: "",
},
],
isAbsolute: true
isAbsolute: true,
};
},
mounted () {
mounted() {
window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => {
......@@ -303,20 +391,20 @@ export default {
});
this.loadDisplayTypeList();
let path = this.$route.path
this.getAbsolute(path)
let path = this.$route.path;
this.getAbsolute(path);
},
methods: {
getAbsolute (path) {
let arr = path.split('/')
console.log('path', path)
if (path.indexOf('/display') === 0 && arr.length === 4) {
this.isAbsolute = false
getAbsolute(path) {
let arr = path.split("/");
console.log("path", path);
if (path.indexOf("/display") === 0 && arr.length === 4) {
this.isAbsolute = false;
} else {
this.isAbsolute = true
this.isAbsolute = true;
}
},
initHeight () {
initHeight() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
......@@ -324,20 +412,20 @@ export default {
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
handleToRegister () {
handleToRegister() {
this.$router.push("/register?redirect=" + this.$route.fullPath);
this.handleCloseLogin();
},
handleToLogin () {
handleToLogin() {
this.loginVisible = true;
},
handleToPersonal () {
handleToPersonal() {
this.$router.push("/personal");
},
async handleLogOut () {
async handleLogOut() {
this.$confirm("是否确定退出?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
......@@ -356,11 +444,11 @@ export default {
});
},
handleClickTab (tab) {
handleClickTab(tab) {
this.currentTab = tab;
},
handleLoginSubmit () {
handleLoginSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// debugger
......@@ -401,7 +489,7 @@ export default {
});
},
handleCloseLogin () {
handleCloseLogin() {
this.loginVisible = false;
this.$refs["loginForm"].resetFields;
if (this.showLoginDialog) {
......@@ -409,7 +497,7 @@ export default {
}
},
handleGetCaptcha () {
handleGetCaptcha() {
this.currdatetime = new Date().getTime();
getVerify()
.then((res) => {
......@@ -422,7 +510,7 @@ export default {
});
},
handleChangeLoginWay (type) {
handleChangeLoginWay(type) {
this.isLoginByUsername = type === "username";
let line = document.getElementsByClassName("line")[0];
if (this.isLoginByUsername) {
......@@ -432,7 +520,7 @@ export default {
}
},
handleToPage (path, type, isOpenNewPage) {
handleToPage(path, type, isOpenNewPage) {
if (path) {
if (isOpenNewPage) {
const newPage = this.$router.resolve({
......@@ -448,41 +536,40 @@ export default {
}
},
handleEnterTabItem (item) {
handleEnterTabItem(item) {
if (item.name == "陈列展览") {
this.showSubMenu = true;
}
},
handleLeaveTabItem (item) {
handleLeaveTabItem(item) {
if (item.name == "陈列展览" && this.showSubMenu) {
this.showSubMenu = false;
}
},
handleEnterSubmenu () {
handleEnterSubmenu() {
if (!this.showSubMenu) {
this.showSubMenu = true;
}
},
handleMouseLeaveSubMenu () {
handleMouseLeaveSubMenu() {
if (this.showSubMenu) {
this.showSubMenu = false;
}
},
async loadDisplayTypeList () {
async loadDisplayTypeList() {
let res = await getDisplayExistDict();
// debugger
this.typeList = [...this.typeList, ...res.data.typeList];
},
},
destroyed () {
destroyed() {
window.removeEventListener("scroll", this.initHeight);
},
};
</script>
......@@ -534,17 +621,13 @@ export default {
}
.nav {
height: 120px;
height: $nav-height;
width: 100%;
transition: all 0.5s ease;
background-color: $themeColor;
// background-color: rgba(0, 0, 0, 0.3);
position: relative;
z-index: 99;
// background-color: #fff;
// background-image: url('@/assets/imgs/home/panel-bg.png');
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
// padding: 10px 0;
padding-top: 10px;
.container {
width: 100%;
......@@ -557,7 +640,7 @@ export default {
.logo-container {
display: flex;
align-items: center;
margin-bottom: 16px;
img {
width: 50px;
height: 50px;
......@@ -568,7 +651,7 @@ export default {
.name {
font-size: 30px;
font-weight: bold;
font-family: 'SourceHanSerifCN-Bold';
font-family: "SourceHanSerifCN-Bold";
color: #fff;
margin-left: 8px;
}
......@@ -578,33 +661,29 @@ export default {
display: flex;
height: 100%;
align-items: center;
.tabs {
display: flex;
// margin-right: 80px;
min-width: 900px;
height: 100%;
justify-content: space-between;
.tab-item {
// margin-right: 70px;
color: #fff;
display: flex;
align-items: center;
font-family: 'Alibaba-PuHuiTi';
font-family: "Alibaba-PuHuiTi";
position: relative;
height: 100%;
text-align: center;
padding-bottom: 16px;
&::after {
position: absolute;
content: '';
content: "";
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 0;
height: 0;
border: 8px solid #fff;
border: 8px solid rgba(#000, 0.3);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid transparent;
......@@ -616,22 +695,28 @@ export default {
opacity: 1;
}
&:hover {
cursor: pointer;
color: #f5c872;
& > i {
color: #f5c872;
transform: rotate(180deg);
}
}
& > span {
transform: translateY(4px);
font-size: 20px;
font-size: 26px;
display: inline-block;
position: relative;
&:hover {
cursor: pointer;
}
}
.router-link-exact-active {
color: #fff8a3;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
& > i {
transition: all ease 0.3s;
}
}
.active {
color: #f5c872;
}
.active::after {
opacity: 1;
}
......@@ -649,12 +734,10 @@ export default {
position: absolute;
width: 100%;
z-index: 99;
// border-bottom: 1px solid #f2f2f2;
ul {
display: flex;
align-items: center;
transform: translateX(50%);
// transform: translateX(50%); //往后移会导致不容易移动到想选择的子菜单中
li {
margin-right: 40px;
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ dcba3a6d
......@@ -3,8 +3,8 @@
<div class="home-cr">
<div class="text wow animate__animated animate__fadeIn">文物</div>
<div class="title wow animate__animated animate__fadeInUp">
<!-- <div class="ch">每日推送</div>
<div class="en">Daily Exhibition Push</div> -->
<!-- <div class="ch">每日推送</div>-->
<div class="en">Cultural Relic</div>
<!-- <div class="title-img">
<img src="@/assets/imgs/home-new/daily.png" alt="" />
</div> -->
......@@ -20,11 +20,19 @@
:key="index"
@click="handleClick(v)"
>
<div class="img">
<div class="cr-img">
<img :src="$getFullUrl(v.faceImageMiddleUrl || v.faceImageUrl)" />
<div class="title">
{{ v.name }}
</div>
<div class="detail">
<div class="detail-title">{{ v.name }}</div>
<div class="detail-intro">{{ v.intro }}</div>
<div class="detail-dianji" @click="handleClick(v)">
展品更多信息
<img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div>
</div>
</div>
</div>
<!-- <div class="list" v-if="list.length>0"> -->
......@@ -62,17 +70,17 @@
<script>
import { getRecommendCr } from "@/api/culturalRelic";
import tempCrs from "../tempCr.json";
export default {
name: "CulturalRelic",
data() {
return {
list: [],
list: tempCrs,
length: "",
};
},
created() {
this.loadList();
// this.loadList();
},
watch: {
list: {
......@@ -139,35 +147,32 @@ $blue: $themeColor;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0 0 0;
font-family: "Alibaba PuHuiTi";
.ch {
color: #2d4bb5;
margin-bottom: 12px;
font-size: 32px;
font-weight: bold;
}
// .ch {
// color: #2d4bb5;
// margin-bottom: 12px;
// font-size: 32px;
// font-weight: bold;
// }
.en {
width: 393px;
height: 35px;
font-size: 36px;
font-family: PingFang SC;
font-weight: bold;
color: #2d4ab5;
line-height: 34px;
margin-bottom: 40px;
margin-bottom: 30px;
}
.title-img {
height: 100px;
margin-bottom: 40px;
img {
width: 100%;
height: 100%;
}
}
// .title-img {
// height: 100px;
// margin-bottom: 40px;
// img {
// width: 100%;
// height: 100%;
// }
// }
.all {
// margin-top: 65px;
height: 29px;
cursor: pointer;
img {
......@@ -177,8 +182,8 @@ $blue: $themeColor;
}
.text {
color: #2d4ab5;
margin-bottom: 36px;
margin-top: 40px;
margin-bottom: 8px;
// margin-top: 40px;
font-family: "Alibaba PuHuiTi";
font-size: 48px;
font-weight: bold;
......@@ -190,11 +195,10 @@ $blue: $themeColor;
display: flex;
position: relative;
.list-item {
.img {
& > .cr-img {
width: 280px;
height: 280px;
background-color: #a5b8d4;
border-radius: 50%;
display: flex;
justify-content: center;
......@@ -202,28 +206,67 @@ $blue: $themeColor;
transition: all ease 0.5s;
position: relative;
cursor: pointer;
img {
// width: 100%;
height: 100%;
object-fit: contain;
}
&:hover {
background-color: transparent;
background-image: url("@/assets/imgs/home-new/cr-bg.png");
background-size: contain;
.detail{
opacity: 1;
}
.title{
opacity: 0;
}
}
& > .title {
background-image: url("@/assets/imgs/home-new/title-bg.png");
width: 56px;
color: #fff;
font-size: 18px;
writing-mode: vertical-lr;
writing-mode: vertical-rl;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
padding: 20px 8px;
position: absolute;
}
& > .detail {
opacity: 0;
position: absolute;
left: -200px;
top: 100px;
background-color: rgba(#11203a, 0.8);
width: 300px;
height: 300px;
border-radius: 50%;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 24px;
transition: all ease 0.5s;
z-index: 2;
.detail-title {
font-size: 28px;
margin-bottom: 16px;
}
.detail-intro {
font-size: 16px;
margin-bottom: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.detail-dianji {
display: flex;
align-items: center;
& > img {
margin-left: 8px;
}
}
}
}
......@@ -238,14 +281,25 @@ $blue: $themeColor;
}
&:nth-child(1) {
top: 0;
.detail {
right: -180px !important;
left: auto;
}
}
&:nth-child(2) {
top: calc(130px);
left: 570px;
& > .cr-img {
background-image: url("@/assets/imgs/home-new/cr-bg.png");
background-size: contain;
}
}
&:nth-child(3) {
top: calc(200px * 2 - 50px);
.detail {
right: -140px !important;
left: auto;
}
}
&:nth-child(4),
&:nth-child(5),
......@@ -265,6 +319,10 @@ $blue: $themeColor;
}
&:nth-child(6) {
top: calc(240px * 2 - 50px);
& > .cr-img {
background-image: url("@/assets/imgs/home-new/cr-bg.png");
background-size: contain;
}
}
}
}
......
src/views/home/components/Display.vue
浏览文件 @ dcba3a6d
......@@ -2,24 +2,43 @@
<template>
<div class="home-display">
<div class="title wow animate__animated animate__fadeInUp">展览</div>
<EntranceIcon
<div class="en wow animate__animated animate__fadeInUp">Exhibition</div>
<div
class="dianji wow animate__animated animate__fadeInUp"
@click="handleClickAll"
>
查看全部
<img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div>
<!-- <EntranceIcon
color="#fff"
text="查看更多"
@click.native="handleClickAll"
class="dianji wow animate__animated animate__fadeInUp"
/>
/> -->
<div class="wrapper wow animate__animated animate__fadeInUp">
<div class="sliders">
<div class="slide-item" v-if="list[0]">
<div class="content">
<div class="content-name">{{ list[0].title }}</div>
<div class="content-intro" v-html="list[0].intro || ''"></div>
<div class="dianji" @click="handleClick(list[0])">
<span class="txt">点击查看</span>
<img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div>
</div>
<div class="img" @click="handleClick(list[0])">
<img :src="$getFullUrl(list[0].faceImageMiddleUrl)" alt="" />
<div class="img-name">{{ list[0].title }}</div>
</div>
</div>
</div>
<!-- <div
class="sliders"
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
> -->
<div
class="sliders"
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
v-if="list.length > 0"
>
<div
......@@ -34,7 +53,6 @@
<span class="txt">点击体验</span>
<img src="@/assets/imgs/home-new/dianji.png" alt="" />
</div>
<!-- <EntranceIcon color="#fff" @click.native="handleClick(item)" /> -->
</div>
<div class="img" @click="handleClick(item)">
<img
......@@ -44,7 +62,7 @@
<div class="img-name">{{ item.title }}</div>
</div>
</div>
</div>
</div> -->
<!-- <div class="pagination wow animate__animated animate__fadeInUp">
<ul>
<li v-for="(item, index) in list" :key="index" :class="list[currentIndex] == item ? 'active' : ''"
......@@ -60,6 +78,7 @@
<script>
import { getRecommendDisplay } from "@/api/display";
import EntranceIcon from "@/components/EntranceIcon";
import { titles } from "../../display/boutiqueTitles";
export default {
name: "Display",
components: {
......@@ -70,6 +89,7 @@ export default {
list: [],
currentIndex: 0,
sliderItemWidth: 0,
boutiqueTitles:titles
};
},
mounted() {
......@@ -87,12 +107,21 @@ export default {
console.log(-this.currentIndex * this.sliderItemWidth);
},
handleClick(item) {
const { exhibitionId, themeType } = item;
const newPage = this.$router.resolve({
path: `display/${themeType}/${exhibitionId}`,
});
window.open(newPage.href, "_blank");
// this.$router.push(`display/${themeType}/${exhibitionId}`);
let index = this.boutiqueTitles.indexOf(item.title);
let newPage;
if (index == -1) {
const { themeType, exhibitionId } = item;
newPage = this.$router.resolve({
path: `/display/${themeType}/${exhibitionId}`,
});
} else {
newPage = this.$router.resolve({
path: `/boutique/${item.title}`,
});
}
setTimeout(() => {
window.open(newPage.href, "_blank");
}, 300);
},
getSlideItemWidth() {
setTimeout(() => {
......@@ -131,9 +160,20 @@ export default {
flex-basis: auto;
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
margin-bottom: 8px;
}
.en {
height: 35px;
font-size: 36px;
font-family: PingFang SC;
font-weight: bold;
color: #fff;
line-height: 34px;
margin-bottom: 30px;
}
.dianji {
color: #fff;
font-size: 22px;
margin-bottom: 50px;
}
......@@ -168,17 +208,19 @@ export default {
height: 100%;
.content-name {
font-size: 24px;
font-size: 28px;
font-weight: bold;
margin-bottom: 40px;
display: flex;
justify-content: center;
}
.content-intro {
font-size: 18px;
font-size: 22px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 40px;
text-indent: 44px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
......@@ -191,11 +233,13 @@ export default {
// line-height: 48px;
}
.dianji {
font-size: 32px;
font-size: 26px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
cursor: pointer;
display: flex;
align-items: center;
.txt {
margin-right: 10px;
}
......@@ -205,10 +249,9 @@ export default {
.img {
// margin-top: 240px;
width: 580px;
height: 640px;
height: 340px;
cursor: pointer;
overflow: hidden;
height: 250px;
&:hover {
box-shadow: 2px 6px 6px 2px rgba(0, 0, 0, 0.3);
......
src/views/home/components/MuseumMap.vue
浏览文件 @ dcba3a6d
......@@ -158,7 +158,6 @@ export default {
coordinateSystem: "geo",
data: v.data,
renderItem(params, api) {
console.log("params", v.data[params.dataIndex].type);
let type = v.data[params.dataIndex].type;
let url;
let width;
......@@ -167,7 +166,7 @@ export default {
width = 8;
} else {
url = "ms-icon";
width=20
width = 20;
}
//具体实现自定义图标的方法
return {
......@@ -182,7 +181,7 @@ export default {
v.data[params.dataIndex].value[0],
v.data[params.dataIndex].value[1],
])[1],
width:width
width: width,
},
};
},
......@@ -209,6 +208,7 @@ export default {
faceImageUrl = `<div>
<div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
<div/>
<div style="font-size:12px;color:#999;font-weight:400">点击图标立即查看>></div>
</div>`;
that.curMuseum = item;
return;
......@@ -217,6 +217,13 @@ export default {
return faceImageUrl;
},
},
// dataRange: {
// min : 0,//值域控件最小值
// max : maxRange,//值域控件最大值
// calculable : true,//默认为false,设置为true时值域显示为线性渐变
// precision:0,//小数精度，默认为0
// color: ['red', 'orange', 'yellow','#FFFCEC']//值域颜色，最少两个
// },
// visualMap: {
// min: 0,
// max: 20000,
......@@ -239,7 +246,7 @@ export default {
//静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: "#333",
color: "#fff",
fontSize: 10,
fontFamily: "Arial",
},
......@@ -258,12 +265,8 @@ export default {
// 地图区域的多边形 图形样式。
normal: {
borderColor: "#fff", // 边框颜色
// areaColor: "#2759af", // 区域颜色
areaColor: "#a5c3e7",
// areaColor:'#294046',
color: "#ff5555",
// shadowBlur: 10, // 图形阴影的模糊大小
// shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
color: "#fff",
},
emphasis: {
// areaColor: "#2759af",
......@@ -275,6 +278,108 @@ export default {
shadowBlur: 3,
},
},
regions: [
{
name: "贵阳市",
itemStyle: {
normal: {
areaColor: "rgba(26, 90, 79,1)",
},
emphasis: {
areaColor: "rgba(26, 90, 79,0.9)",
},
},
},
{
name: "遵义市",
itemStyle: {
normal: {
areaColor: "rgba(156, 30, 30,1)",
},
emphasis: {
areaColor: "rgba(156, 30, 30,0.9)",
},
},
},
{
name: "毕节市",
itemStyle: {
normal: {
areaColor: "rgba(212, 123, 45,1)",
},
emphasis: {
areaColor: "rgba(212, 123, 45,0.9)",
},
},
},
{
name: "六盘水市",
itemStyle: {
normal: {
areaColor: "rgba(236, 184, 66,1)",
},
emphasis: {
areaColor: "rgba(236, 184, 66,0.9)",
},
},
},
{
name: "安顺市",
itemStyle: {
normal: {
areaColor: "rgba(30, 97, 140,1)",
},
emphasis: {
areaColor: "rgba(30, 97, 140,0.9)",
},
},
},
{
name: "铜仁市",
itemStyle: {
normal: {
areaColor: "rgba(62,56,65,1)",
},
emphasis: {
areaColor: "rgba(62,56,65,0.9)",
},
},
},
{
name: "黔西南布依族苗族自治州",
itemStyle: {
normal: {
areaColor: "rgba(21,85,154,1)",
},
emphasis: {
areaColor: "rgba(21,85,154,0.8)",
},
},
},
{
name: "黔南布依族苗族自治州",
itemStyle: {
normal: {
areaColor: "rgba(20,74,116,1)",
},
emphasis: {
areaColor: "rgba(20,74,116,0.8)",
},
},
},
{
name: "黔东南苗族侗族自治州",
itemStyle: {
normal: {
areaColor: "rgba(37, 47, 87,1)",
},
emphasis: {
areaColor: "rgba(37, 47, 87,0.8)",
},
},
},
],
},
};
......@@ -320,10 +425,10 @@ export default {
},
handleClick(item) {
const { id } = item;
// const newPage = this.$router.resolve({
// path: `museum/${id}`,
// });
// window.open(newPage.href, "_blank");
const newPage = this.$router.resolve({
path: `museum/${id}`,
});
window.open(newPage.href, "_blank");
// this.$router.push({
// path: `museum/${id}`,
// });
......@@ -384,7 +489,6 @@ export default {
background-repeat: no-repeat;
.title {
color: #fff;
// margin-bottom: 43px;
display: flex;
flex-direction: column;
align-items: center;
......@@ -403,7 +507,6 @@ export default {
.title-img {
height: 100px;
// height: 136px;
img {
width: 100%;
height: 100%;
......@@ -424,10 +527,9 @@ export default {
display: flex;
justify-content: space-between;
align-items: flex-start;
// padding-top: 100px;
.content {
// margin-top: 100px;//去除上间距
width: 600px;
margin-top: 100px;
color: #333;
font-family: "Alibaba PuHuiTi";
height: 50vh;
......@@ -452,7 +554,6 @@ export default {
left: 0;
width: 100%;
height: 100%;
// background-color:rgba(#2069c4,0.8);
background-color: rgba(0, 0, 0, 0.7);
}
}
......@@ -465,16 +566,13 @@ export default {
}
.intro {
font-size: 20px;
font-weight: 300;
font-size: 22px;
font-weight: 600;
margin-bottom: 85px;
overflow: hidden;
color: #255780;
width: 400px;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 6;
// overflow: hidden;
text-indent: 44px;
}
.entrance {
......@@ -531,11 +629,13 @@ export default {
& > p {
color: #fff;
.label {
font-size: 32px;
font-size: 28px;
}
.num {
font-weight: bold;
// font-weight: bold;
font-family: $puHuiTi;
font-size: 60px;
margin: 0 4px;
}
}
}
......
src/views/home/index.vue
浏览文件 @ dcba3a6d
......@@ -45,9 +45,9 @@ export default {
display: flex;
flex-direction: column;
background-color: #fff;
padding-bottom: 100px;
.home-item {
height: calc(100vh - 120px);
height: calc(100vh - $nav-height);
width: 100%;
position: relative;
}
......
src/views/home/tempCr.json 0 → 100644
浏览文件 @ dcba3a6d
[{
"crId": "80f7c57c768749fbad359e0ce9bce4a1",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/middle/54.1螭首金杯.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/low/54.1螭首金杯.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/54螭首金杯、金盘/54.1螭首金杯.png",
"intro": "金杯系夹层，双螭缠绕其上，两螭首对称探出杯口成杯柄。承盘纹饰与金杯呼应，盘心为翻涌的浪花，双螭盘旋，口尾互衔。金杯、金盘共同构成教子升天纹。教子升天纹是宋代已降流行的纹饰，由天上的大龙和海水中的小龙组成，通过大龙呼唤小龙升天来借喻父母望子成龙的愿望，也可祝人高升。",
"name": "螭首金杯、金盘"
},
{
"crId": "4df7d6c888524cac89a2095be5a1d305",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/21鎏金三足铜鍪/middle/21.鎏金三足铜鍪.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/21鎏金三足铜鍪/low/21.鎏金三足铜鍪.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/21鎏金三足铜鍪/21.鎏金三足铜鍪.png",
"intro": "侈口束颈，圆鼓腹，圜底，腹上部一侧有一环形耳，腹下接三矮蹄足，器表鎏金。其原型为巴文化器物中的铜鍪，在赫章可乐地域中，将其增加三足并鎏金。",
"name": "鎏金三足铜鍪"
},
{
"crId": "7ccbc32192e5486ca944a12f9002edc2",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/middle/59.平播鼎.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/low/59.平播鼎.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/59平播鼎/59.平播鼎.png",
"intro": "器身圆形，深腹，弧形底，附兽首柱状三足。口沿处饰两道弦纹，中间饰云雷纹，下面横列篆书“平播安黔之鼎”，6字环钟一圈，腹部满铸篆体铭文，计56行，每行5字，起首行多一字。铭文之下也是两道弦纹夹一圈云雷纹。",
"name": "平播鼎"
}, {
"crId": "07e32dbd6db9478d904c48e024f0adb1",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/middle/31.铜车马.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/low/31.铜车马.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/31铜车马/31.铜车马.png",
"intro": "铜车马属于辎车，马由首、尾、颈、足、躯、耳等11段装配，除双耳外，其余9段钧用砂模空心浇铸，铜壳菲薄，铸技高超，马的神态逼真，昂首翘尾，鬃毛平整，竖耳咧嘴作嘶鸣状，十分矫健。车属双曲辕车，双轮十二幅。卷曲成U形覆瓦状的车棚厚度仅1毫米，轻柔如纸，是迄今为止国内出土的汉墓中的车马里最完整的一个，这对了解汉代车制、冶炼工艺具有相当重要的价值。",
"name": "铜车马"
}, {
"crId": "2f670d1ebf8e4297b1c89f3299a6187a",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/middle/71.青釉陶兽水盂.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/low/71.青釉陶兽水盂.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/71青釉陶兽水盂/71.青釉陶兽水盂.png",
"intro": "塑为狮形，昂首站立，全身用细纹刻画出卷曲的毛发，狮背有一长颈口，狮身饰青釉，开鱼牙片纹，看起来形态生动、雄浑。",
"name": "青釉陶兽水盂"
},
{
"crId": "056c729a98cc47de852de5a499f95d19",
"deptName": "贵州省博物馆",
"faceImageMiddleUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/46漆盘/middle/46.漆盘.png",
"faceImagePressUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/46漆盘/low/46.漆盘.png",
"faceImageUrl": "http://114.115.157.218:9602/files/culturalRelicImport/2022-12-20-ba663e0ebd1445298631d77df692d414/贵州省博物馆-文物2/faceImage/46漆盘/46.漆盘.png",
"intro": "麻胎，黑地，朱绘兼有鎏金的色彩搭配，形如满月，敞口折唇，上大下小，浅平底，唇边铜扣鎏金。盘身内壁绘夔纹图案，外壁绘海潮纹图案。平底中央线描凤鸟纹样。折唇背面针刻隶书铭文共61字，详细记载该器制作时间、地点、工序、工匠及管理人员姓氏等。",
"name": "漆盘"
}
]
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论