Skip to content

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

修改文物下拉面板颜色问题；拆分navbar组件

上级 1d51c628
显示空白字符变更
内嵌 并排
正在显示 包含 1239 行增加 和 1021 行删除
src/assets/styles/index.scss
浏览文件 @ 9cb5fc3a
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
/**适应移动端 */ /**适应移动端 */
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
html, html,
body { body {
width: 1920px; width: 1920px;
...@@ -41,7 +42,7 @@ li { ...@@ -41,7 +42,7 @@ li {
//一些公共样式 //一些公共样式
.empty-space { .empty-space {
height: 100px; height: 100px;
background-color: $themeColor; background-color: $deepBlue;
width: 100%; width: 100%;
} }
...@@ -64,6 +65,7 @@ li { ...@@ -64,6 +65,7 @@ li {
} }
.content-wrapper { .content-wrapper {
// width: 1200px; // width: 1200px;
// width: 100vw; // width: 100vw;
// padding: 0 13%; // padding: 0 13%;
...@@ -71,22 +73,23 @@ li { ...@@ -71,22 +73,23 @@ li {
/* display: flex; /* display: flex;
flex-direction: column; flex-direction: column;
align-items: center; */ align-items: center; */
> .content { >.content {
width: 1400px; width: 1400px;
margin: auto; margin: auto;
} }
} }
.el-pager { .el-pager {
.btn-quicknext, .btn-quicknext,
.number { .number {
background: transparent !important; background: transparent !important;
border: 1px solid $themeColor !important; border: 1px solid $deepBlue !important;
color: $themeColor !important; color: $deepBlue !important;
} }
.number.active { .number.active {
background: $themeColor !important; background: $deepBlue !important;
color: #fff !important; color: #fff !important;
} }
} }
...@@ -94,9 +97,11 @@ li { ...@@ -94,9 +97,11 @@ li {
.content-wrapper:not(.relic) { .content-wrapper:not(.relic) {
padding-top: 0 !important; padding-top: 0 !important;
padding-bottom: 40px !important; padding-bottom: 40px !important;
> .content {
>.content {
box-shadow: none !important; box-shadow: none !important;
> .search {
>.search {
// padding: 24px 20%; // padding: 24px 20%;
// padding: 16px 13%; // padding: 16px 13%;
padding: 16px 0 32px; padding: 16px 0 32px;
...@@ -107,7 +112,7 @@ li { ...@@ -107,7 +112,7 @@ li {
width: 100%; width: 100%;
height: 46px; height: 46px;
> div { >div {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
...@@ -162,7 +167,7 @@ li { ...@@ -162,7 +167,7 @@ li {
padding: 0 !important; padding: 0 !important;
height: auto !important; height: auto !important;
> .name { >.name {
padding: 20px 0 !important; padding: 20px 0 !important;
margin: 0 !important; margin: 0 !important;
font-size: 20px !important; font-size: 20px !important;
...@@ -184,7 +189,7 @@ li { ...@@ -184,7 +189,7 @@ li {
border: 2px solid #999; border: 2px solid #999;
} }
> div[class|='deco'] { >div[class|='deco'] {
z-index: 2; z-index: 2;
} }
} }
...@@ -195,7 +200,7 @@ li { ...@@ -195,7 +200,7 @@ li {
.desc { .desc {
background: none !important; background: none !important;
> .name { >.name {
color: #0e45ab !important; color: #0e45ab !important;
} }
} }
...@@ -208,10 +213,11 @@ li { ...@@ -208,10 +213,11 @@ li {
} }
} }
> .pagination-container { >.pagination-container {
> .pagination { >.pagination {
margin: 0 !important; margin: 0 !important;
background-image: none !important; background-image: none !important;
.el-pager { .el-pager {
li { li {
width: 42px; width: 42px;
...@@ -221,7 +227,7 @@ li { ...@@ -221,7 +227,7 @@ li {
background: #fff; background: #fff;
min-width: 0; min-width: 0;
margin: 0 16px; margin: 0 16px;
color: $themeColor; color: $deepBlue;
border-radius: 0 !important; border-radius: 0 !important;
} }
...@@ -236,6 +242,7 @@ li { ...@@ -236,6 +242,7 @@ li {
.display, .display,
.cultural-relic { .cultural-relic {
.search-bar, .search-bar,
.content-wrapper, .content-wrapper,
.type-group { .type-group {
...@@ -245,12 +252,14 @@ li { ...@@ -245,12 +252,14 @@ li {
.search-bar { .search-bar {
.search-item { .search-item {
line-height: 46px; line-height: 46px;
&.none-border { &.none-border {
background: transparent !important; background: transparent !important;
} }
> .el-checkbox { >.el-checkbox {
color: #2b2d35; color: #2b2d35;
.el-checkbox__inner { .el-checkbox__inner {
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -260,18 +269,21 @@ li { ...@@ -260,18 +269,21 @@ li {
border-width: 3px; border-width: 3px;
} }
} }
.el-checkbox__label { .el-checkbox__label {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
.el-checkbox__input.is-checked { .el-checkbox__input.is-checked {
.el-checkbox__inner { .el-checkbox__inner {
background-color: $themeColor; background-color: $deepBlue;
border-color: $themeColor; border-color: $deepBlue;
} }
+ .el-checkbox__label {
+.el-checkbox__label {
font-weight: 600; font-weight: 600;
color: $themeColor; color: $deepBlue;
} }
} }
} }
...@@ -286,9 +298,10 @@ li { ...@@ -286,9 +298,10 @@ li {
font-size: 16px; font-size: 16px;
padding: 8px 14%; padding: 8px 14%;
background-color: #fff; background-color: #fff;
.list-total-num { .list-total-num {
font-size: 24px; font-size: 24px;
color: $themeSecondaryColor; color: $yellow;
margin: 0 6px; margin: 0 6px;
} }
} }
...@@ -296,7 +309,7 @@ li { ...@@ -296,7 +309,7 @@ li {
#app { #app {
#navbar { #navbar {
+ div { +div {
min-height: 440px; min-height: 440px;
} }
} }
......
src/assets/styles/variable.scss
浏览文件 @ 9cb5fc3a
// $themeColor:#223e36; // $deepBlue:#223e36;
// $themeColor: #2069c4; // $deepBlue: #2069c4;
// $themeColor:#132c33; // $deepBlue:#132c33;
$themeColor: #252F57; $deepBlue: #252F57;
$themeSecondaryColor:#dfab46; $yellow: #dfab46;
$puHuiTi: "Alibaba-PuHuiTi"; $puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold"; $siyuanSongBold: "SourceHanSerifCN-Bold";
$font-size-sm:14px; $font-size-sm: 14px;
$font-size-base:16px; $font-size-base: 16px;
$font-size-lg:22px; $font-size-lg: 22px;
$nav-height: 120px; $nav-height: 120px;
......
src/components/AudioPlayer/NormalPlayer.vue
浏览文件 @ 9cb5fc3a
...@@ -248,7 +248,7 @@ export default { ...@@ -248,7 +248,7 @@ export default {
color: #5c5e66; color: #5c5e66;
display: flex; display: flex;
align-items: center; align-items: center;
color: $themeColor; color: $deepBlue;
font-size: 38px; font-size: 38px;
} }
.progress-bar-bg { .progress-bar-bg {
...@@ -263,7 +263,7 @@ export default { ...@@ -263,7 +263,7 @@ export default {
margin: 0 10px; margin: 0 10px;
} }
.progress-bar { .progress-bar {
background-color: $themeColor; background-color: $deepBlue;
width: 0%; width: 0%;
height: 10px; height: 10px;
border-radius: 5px; border-radius: 5px;
...@@ -281,4 +281,3 @@ export default { ...@@ -281,4 +281,3 @@ export default {
} }
} }
</style> </style>
src/components/Breadcrumb/index.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<el-breadcrumb separator-class="el-icon-arrow-right" :class="{ 'is-light': isLight }"> <el-breadcrumb
<el-breadcrumb-item v-for="(item, index) in list" :key="index" :to="{ path: item.path }">{{ item.name separator-class="el-icon-arrow-right"
}}</el-breadcrumb-item> :class="{ 'is-light': isLight }"
>
<el-breadcrumb-item
v-for="(item, index) in list"
:key="index"
:to="{ path: item.path }"
>{{ item.name }}</el-breadcrumb-item
>
</el-breadcrumb> </el-breadcrumb>
</template> </template>
<script> <script>
export default { export default {
name: 'Breadcrumb', name: "Breadcrumb",
props: { props: {
list: { list: {
type: Array, type: Array,
default: [ default: [
{ {
name: '首页', name: "首页",
path: "/" path: "/",
} },
] ],
}, },
isLight: { isLight: {
type: Boolean, type: Boolean,
default: false default: false,
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -34,7 +40,7 @@ export default { ...@@ -34,7 +40,7 @@ export default {
} }
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner { ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: $themeColor; color: $deepBlue;
} }
::v-deep .el-breadcrumb__inner.is-link:hover { ::v-deep .el-breadcrumb__inner.is-link:hover {
...@@ -54,6 +60,5 @@ export default { ...@@ -54,6 +60,5 @@ export default {
::v-deep .el-breadcrumb__inner.is-link:hover { ::v-deep .el-breadcrumb__inner.is-link:hover {
color: #b5800a; color: #b5800a;
} }
} }
</style> </style>
src/components/Footer/index.vue
浏览文件 @ 9cb5fc3a
<!-- --> <!-- -->
<template> <template>
<div :class="{ <div
:class="{
footer: true, footer: true,
//isHome:isHome, //isHome:isHome,
isChStyle: navbarStyle == '2', isChStyle: navbarStyle == '2',
...@@ -9,7 +10,8 @@ ...@@ -9,7 +10,8 @@
isSMGZ: navbarStyle == '5', isSMGZ: navbarStyle == '5',
isJYYCC: navbarStyle == '6', isJYYCC: navbarStyle == '6',
isYLGDYW: navbarStyle == '7', isYLGDYW: navbarStyle == '7',
}"> }"
>
<!-- <span>贵州省文化和旅游厅博物馆处版权所有</span> <!-- <span>贵州省文化和旅游厅博物馆处版权所有</span>
<span>中国知网提供技术支持</span> --> <span>中国知网提供技术支持</span> -->
<div class="logo"> <div class="logo">
...@@ -25,7 +27,11 @@ ...@@ -25,7 +27,11 @@
{{ item.title }} {{ item.title }}
</div> </div>
<ul v-if="item.children && item.children.length > 0"> <ul v-if="item.children && item.children.length > 0">
<li v-for="(v, i) in item.children" :key="i" @click="handleClickItem(v)"> <li
v-for="(v, i) in item.children"
:key="i"
@click="handleClickItem(v)"
>
{{ v.title }} {{ v.title }}
</li> </li>
</ul> </ul>
...@@ -40,19 +46,24 @@ ...@@ -40,19 +46,24 @@
<el-popover placement="top-start" width="280" trigger="hover"> <el-popover placement="top-start" width="280" trigger="hover">
<span slot="reference">小程序</span> <span slot="reference">小程序</span>
<div class="wechat-app"> <div class="wechat-app">
<img src="@/assets/imgs/wechat-app.jpg" alt=""> <img src="@/assets/imgs/wechat-app.jpg" alt="" />
</div> </div>
</el-popover> </el-popover>
</span> </span>
</div> </div>
</div> </div>
<div class="copyright"> <div class="copyright">
<a href="https://beian.miit.gov.cn" target="_blank"> 黔ICP备2022009785号-1 &nbsp; &nbsp;</a> <a href="https://beian.miit.gov.cn" target="_blank">
黔ICP备2022009785号-1 &nbsp; &nbsp;</a
>
|&nbsp; &nbsp; ©2022-现在 贵州省文化和旅游厅 |&nbsp; &nbsp; ©2022-现在 贵州省文化和旅游厅
</div> </div>
<div class="support">网站建设：贵州同方知网科技发展有限公司</div> <div class="support">网站建设：贵州同方知网科技发展有限公司</div>
<div class="advice"> <div class="advice">
<el-tooltip placement="top-start" content="谷歌 火狐 最佳分辨率（1920 x 1080）"> <el-tooltip
placement="top-start"
content="谷歌 火狐 最佳分辨率（1920 x 1080）"
>
<span>浏览建议</span> <span>浏览建议</span>
</el-tooltip> </el-tooltip>
</div> </div>
...@@ -166,7 +177,7 @@ export default { ...@@ -166,7 +177,7 @@ export default {
padding: 30px 0; padding: 30px 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $themeColor; background-color: $deepBlue;
flex-direction: column; flex-direction: column;
color: #fefefe; color: #fefefe;
font-size: 14px; font-size: 14px;
...@@ -188,8 +199,6 @@ export default { ...@@ -188,8 +199,6 @@ export default {
.menu-item { .menu-item {
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
} }
} }
...@@ -207,13 +216,11 @@ export default { ...@@ -207,13 +216,11 @@ export default {
} }
.copyright { .copyright {
&>a { & > a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
} }
} }
} }
.map { .map {
......
src/components/ListBanner/index.vue
浏览文件 @ 9cb5fc3a
...@@ -165,7 +165,7 @@ export default { ...@@ -165,7 +165,7 @@ export default {
.text { .text {
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: $themeColor; color: $deepBlue;
} }
} }
} }
......
src/components/MenuList/index.vue
浏览文件 @ 9cb5fc3a
...@@ -64,15 +64,15 @@ export default { ...@@ -64,15 +64,15 @@ export default {
.el-menu-item { .el-menu-item {
background-color: #f5f5f9; background-color: #f5f5f9;
font-size: 16px; font-size: 16px;
// color: $themeColor; // color: $deepBlue;
&:hover { &:hover {
background-color: $themeColor; background-color: $deepBlue;
color: #fff; color: #fff;
} }
} }
.el-menu-item.is-active { .el-menu-item.is-active {
color: $themeColor; color: $deepBlue;
font-weight: bold; font-weight: bold;
} }
.blueStyle { .blueStyle {
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
background: rgba($color: #fff, $alpha: 0.6); background: rgba($color: #fff, $alpha: 0.6);
color: $themeColor; color: $deepBlue;
font-weight: bold; font-weight: bold;
} }
} }
......
src/components/NavBar/components/loginDialog.vue 0 → 100644
浏览文件 @ 9cb5fc3a
<template>
<el-dialog
:visible.sync="visible"
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>
<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-item :label-width="formLabelWidth" prop="account">
<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-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-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"
/>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="opration">
<el-button
round
@click="handleLoginSubmit"
size="small"
class="loginBtn"
>登 陆</el-button
>
<div class="register" @click="handleToRegister">注册</div>
<div v-if="!isLoginByUsername">
提示：若您已经登录过“黔云展”小程序，请直接登录，账号及密码皆为您的手机号
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import { mapGetters } from "vuex";
import { getVerify } from "@/api/user";
import md5 from "js-md5";
export default {
name: "LoginDialog",
computed: {
...mapGetters(["token", "userInfo", "showLoginDialog"]),
},
data() {
var validateAccout = (rule, value, callback) => {
if (value === "") {
let text = this.isLoginByUsername ? "账号" : "手机号";
callback(new Error("请输入" + text));
} else {
if (!this.isLoginByUsername) {
var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
if (!pattern.test(value)) {
callback(new Error("请输入合法手机号/电话号"));
} else {
callback();
}
} else {
callback();
}
}
};
return {
visible: false,
loginForm: {
account: "",
password: "",
captcha: "",
},
requestCodeSuccess: false,
captchaImgSrc: "",
loading: false,
labelPosition: "right",
formLabelWidth: "1px",
loginRules: {
account: [
{ validator: validateAccout, required: true, trigger: "blur" },
],
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
},
isLoginByUsername: true,
loadingText: "",
};
},
watch: {
showLoginDialog(value) {
this.visible = value;
},
visible(value) {
if (value) {
this.handleGetCaptcha();
}
},
},
mounted() {},
methods: {
handleLoginSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// debugger
this.loading = true;
this.loadingText = "正在登录";
const { account, password, captcha } = this.loginForm;
const params = {
captcha,
password,
};
params.password = md5(params.password);
if (this.isLoginByUsername) {
params.username = account;
} else {
params.phone = account;
}
this.$store
.dispatch("user/login", params)
.then((res) => {
if (res.code == "0") {
this.$message.success("登录成功");
this.handleCloseLogin();
this.loading = false;
}
})
.catch((err) => {
console.log(err);
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
},
handleCloseLogin() {
this.visible = false;
this.$refs["loginForm"].resetFields;
if (this.showLoginDialog) {
this.$store.commit("app/OPEN_LOGIN_DIALOG", null);
}
},
handleGetCaptcha() {
this.currdatetime = new Date().getTime();
getVerify()
.then((res) => {
this.requestCodeSuccess = true;
const imgSrc = window.URL.createObjectURL(res);
this.captchaImgSrc = imgSrc;
})
.catch(() => {
this.requestCodeSuccess = false;
});
},
handleChangeLoginWay(type) {
this.isLoginByUsername = type === "username";
let line = document.getElementsByClassName("line")[0];
if (this.isLoginByUsername) {
line.style.left = "24px";
} else {
line.style.left = "136px";
}
},
handleToRegister() {
this.$router.push("/register?redirect=" + this.$route.fullPath);
this.handleCloseLogin();
},
},
};
</script>
<style scoped lang="scss">
.login {
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.text {
font-weight: bold;
font-size: 24px;
color: #666;
}
.close {
font-size: 34px;
cursor: pointer;
color: #ccc;
}
}
.login-box {
width: 500px;
margin: auto;
}
}
.opration {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-top: 20px;
.register {
display: flex;
justify-content: center;
margin: 20px 0;
font-size: 14px;
cursor: pointer;
&:hover {
color: #2069c4;
}
}
}
.dialog-footer {
display: flex;
justify-content: center;
}
.captcha {
display: flex;
justify-content: flex-end;
img {
margin-top: 2px;
height: 40px;
}
}
::v-deep .loginBtn {
padding: 16px !important;
border-radius: 0 !important;
width: 100%;
background-color: #2069c4;
color: #fff;
font-size: 14px;
&:hover {
filter: brightness(0.9) !important;
background-color: #2069c4;
color: #fff;
border: none;
border-radius: 0 !important;
padding: 16px !important;
width: 100%;
font-size: 14px;
}
}
::v-deep .el-dialog {
width: 400px;
border-radius: 0;
.el-dialog__body {
padding: 20px 30px 60px !important;
}
}
::v-deep .el-input__inner {
background: #e8f0fe;
border: none;
}
::v-deep .el-dialog__header {
padding: 48px 30px 10px !important;
color: #666 !important;
font-weight: bold;
}
::v-deep .el-dialog__headerbtn {
top: 48px !important;
font-size: 24px;
right: 30px;
}
.login-title {
display: flex;
position: relative;
.title-item {
margin-right: 40px;
cursor: pointer;
position: relative;
&:hover {
color: #2069c4;
}
}
.active {
color: #2069c4;
}
.line {
width: 18px;
height: 4px;
background-color: #2069c4;
// border-radius: 4px;
position: absolute;
left: 24px;
bottom: -14px;
transition: all 0.3s ease;
}
}
</style>
src/components/NavBar/index.vue
浏览文件 @ 9cb5fc3a
...@@ -43,10 +43,13 @@ ...@@ -43,10 +43,13 @@
</div> </div>
<div class="tools animate__animated animate__fadeInRight"> <div class="tools animate__animated animate__fadeInRight">
<div class="wrapper"> <div class="wrapper">
<span class="search-pic">
<i class="el-icon-search"></i>
以图搜图
</span>
<el-button round v-if="!hasToken" @click.native="handleToLogin"> <el-button round v-if="!hasToken" @click.native="handleToLogin">
<i class="el-icon-user"></i> <i class="el-icon-user"></i>
<span>登录</span> <span>登录</span>
<!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
</el-button> </el-button>
<el-dropdown trigger="click" v-else> <el-dropdown trigger="click" v-else>
<el-button round> <el-button round>
...@@ -54,7 +57,7 @@ ...@@ -54,7 +57,7 @@
<span>{{ <span>{{
hasToken ? userInfo.nickName || userInfo.username : "登录" hasToken ? userInfo.nickName || userInfo.username : "登录"
}}</span> }}</span>
<!-- <i class="el-icon-arrow-down el-icon--right"></i> --> <i class="el-icon-arrow-down" style="margin-left: 10px"></i>
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
...@@ -99,128 +102,27 @@ ...@@ -99,128 +102,27 @@
v-if="index != typeList.length - 1" v-if="index != typeList.length - 1"
></svg-icon> ></svg-icon>
</li> </li>
<!-- <li>
<span @click="handleToPage('/display', true)">基本陈列</span>
<svg-icon icon-class="wenshi"></svg-icon>
</li>
<li>
<span @click="handleToPage('/boutique', true)">十大精品展</span>
<svg-icon icon-class="wenshi"></svg-icon>
</li>
<li><span @click="handleToPage('/virtual', true)">虚拟展厅</span></li> -->
</ul> </ul>
</div> </div>
<!-- </transition> --> <LoginDialog ref="LoginDialog"/>
<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>
<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-item :label-width="formLabelWidth" prop="account">
<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-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-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"
/>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="opration">
<el-button
round
@click="handleLoginSubmit"
size="small"
class="loginBtn"
>登 陆</el-button
>
<div class="register" @click="handleToRegister">注册</div>
<div v-if="!isLoginByUsername">
提示：若您已经登录过“黔云展”小程序，请直接登录，账号及密码皆为您的手机号
</div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { getVerify } from "@/api/user";
import { getDisplayExistDict } from "@/api/display"; import { getDisplayExistDict } from "@/api/display";
import md5 from "js-md5"; import LoginDialog from "./components/loginDialog.vue";
export default { export default {
name: "NavBar", name: "NavBar",
components: {
LoginDialog,
},
computed: { computed: {
...mapGetters([ ...mapGetters([
"token", "token",
"userInfo", "userInfo",
"curPath", "curPath",
"navBarFixed", "navBarFixed",
"showLoginDialog",
"navbarStyle", "navbarStyle",
]), ]),
hasToken() { hasToken() {
...@@ -260,7 +162,7 @@ export default { ...@@ -260,7 +162,7 @@ export default {
path: "/ccProduct", path: "/ccProduct",
}; };
} }
if (value.name=='home') { if (value.name == "home") {
this.currentTab = { this.currentTab = {
name: "首页", name: "首页",
path: "/", path: "/",
...@@ -274,54 +176,19 @@ export default { ...@@ -274,54 +176,19 @@ export default {
}, },
immediate: true, immediate: true,
}, },
navBarFixed(value) {
console.log("navBarFixed", value);
},
showLoginDialog(value) {
this.loginVisible = value;
},
loginVisible(value) {
if (value) {
this.handleGetCaptcha();
}
},
"$route.path"(cur) { "$route.path"(cur) {
this.getAbsolute(cur); this.getAbsolute(cur);
this.isListPage(cur); this.isListPage(cur);
}, },
}, },
data() { data() {
var validateAccout = (rule, value, callback) => {
if (value === "") {
let text = this.isLoginByUsername ? "账号" : "手机号";
callback(new Error("请输入" + text));
} else {
if (!this.isLoginByUsername) {
var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
if (!pattern.test(value)) {
callback(new Error("请输入合法手机号/电话号"));
} else {
callback();
}
} else {
callback();
}
}
};
return { return {
pages: [ pages: [
{ {
name: "首页", name: "首页",
path: "/", path: "/",
}, },
// {
// name: "虚拟展厅",
// path: "/virtual",
// },
// {
// name: "精品展",
// path: "/boutique",
// },
{ {
name: "展览展示", name: "展览展示",
path: "/display", path: "/display",
...@@ -340,10 +207,6 @@ export default { ...@@ -340,10 +207,6 @@ export default {
}, },
], ],
}, },
// {
// name: "展览展示",
// path: "/display",
// },
{ {
name: "文物展示", name: "文物展示",
path: "/culturalRelic", path: "/culturalRelic",
...@@ -365,26 +228,6 @@ export default { ...@@ -365,26 +228,6 @@ export default {
isBoutique: false, //是否是精品展页 isBoutique: false, //是否是精品展页
isFixed: false, isFixed: false,
offsetTop: 0, offsetTop: 0,
loginVisible: false,
loginForm: {
account: "",
password: "",
captcha: "",
},
requestCodeSuccess: false,
captchaImgSrc: "",
formLabelWidth: "1px",
labelPosition: "right",
loading: false,
loginRules: {
account: [
{ validator: validateAccout, required: true, trigger: "blur" },
],
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
},
isLoginByUsername: true,
loadingText: "",
showSubMenu: false, showSubMenu: false,
typeList: [ typeList: [
{ {
...@@ -434,13 +277,9 @@ export default { ...@@ -434,13 +277,9 @@ export default {
this.isFixed = scrollTop > this.offsetTop ? true : false; this.isFixed = scrollTop > this.offsetTop ? true : false;
}, },
handleToRegister() {
this.$router.push("/register?redirect=" + this.$route.fullPath);
this.handleCloseLogin();
},
handleToLogin() { handleToLogin() {
this.loginVisible = true; this.$refs.LoginDialog.visible = true
// this.loginVisible = true;
}, },
handleToPersonal() { handleToPersonal() {
...@@ -470,79 +309,6 @@ export default { ...@@ -470,79 +309,6 @@ export default {
this.currentTab = tab; this.currentTab = tab;
}, },
handleLoginSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// debugger
this.loading = true;
this.loadingText = "正在登录";
const { account, password, captcha } = this.loginForm;
const params = {
captcha,
password,
};
params.password = md5(params.password);
if (this.isLoginByUsername) {
params.username = account;
} else {
params.phone = account;
}
this.$store
.dispatch("user/login", params)
.then((res) => {
if (res.code == "0") {
this.$message.success("登录成功");
this.handleCloseLogin();
// if (this.$route.name !== "home") {
// this.$router.push({
// path: this.$route.query.redirect || "/",
// });
// }
this.loading = false;
}
})
.catch((err) => {
console.log(err);
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
},
handleCloseLogin() {
this.loginVisible = false;
this.$refs["loginForm"].resetFields;
if (this.showLoginDialog) {
this.$store.commit("app/OPEN_LOGIN_DIALOG", null);
}
},
handleGetCaptcha() {
this.currdatetime = new Date().getTime();
getVerify()
.then((res) => {
this.requestCodeSuccess = true;
const imgSrc = window.URL.createObjectURL(res);
this.captchaImgSrc = imgSrc;
})
.catch(() => {
this.requestCodeSuccess = false;
});
},
handleChangeLoginWay(type) {
this.isLoginByUsername = type === "username";
let line = document.getElementsByClassName("line")[0];
if (this.isLoginByUsername) {
line.style.left = "24px";
} else {
line.style.left = "136px";
}
},
handleToPage(path, type, isOpenNewPage) { handleToPage(path, type, isOpenNewPage) {
if (path) { if (path) {
if (isOpenNewPage) { if (isOpenNewPage) {
...@@ -597,35 +363,30 @@ export default { ...@@ -597,35 +363,30 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// #2069c4: #2069c4;
.header-absolute { .header-absolute {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 9; z-index: 9;
background-color: rgba(#000, 0.25) !important; background-color: rgba(#000, 0.25) !important;
// background-color: rgba($themeColor, 0.3)!important;
} }
.header-fixed { .header-fixed {
position: fixed !important; position: fixed !important;
background-color: $themeColor !important; background-color: $deepBlue !important;
z-index: 99; z-index: 99;
top: 0; top: 0;
} }
.show-themeColor { .show-themeColor {
background-color: $themeColor !important; background-color: $deepBlue !important;
} }
.isChStyle { .isChStyle {
// background-color: #892325 !important;
background-color: rgba(0, 0, 0, 0.25) !important; background-color: rgba(0, 0, 0, 0.25) !important;
} }
.isRedStyle { .isRedStyle {
// background-color: #813525 !important;
background-color: rgba(0, 0, 0, 0.25) !important; background-color: rgba(0, 0, 0, 0.25) !important;
} }
...@@ -649,11 +410,10 @@ export default { ...@@ -649,11 +410,10 @@ export default {
height: $nav-height; height: $nav-height;
width: 100%; width: 100%;
transition: all 0.5s ease; transition: all 0.5s ease;
background-color: $themeColor; background-color: $deepBlue;
position: relative; position: relative;
z-index: 99; z-index: 99;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px; box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
// padding-top: 10px;
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -750,7 +510,6 @@ export default { ...@@ -750,7 +510,6 @@ export default {
} }
.submenu { .submenu {
// background: #f8f8f8;
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
color: #fff; color: #fff;
height: 50px; height: 50px;
...@@ -762,15 +521,13 @@ export default { ...@@ -762,15 +521,13 @@ export default {
ul { ul {
display: flex; display: flex;
align-items: center; align-items: center;
// transform: translateX(50%); //往后移会导致不容易移动到想选择的子菜单中
li { li {
margin-right: 40px; margin-right: 40px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
span { span {
color: $themeSecondaryColor; color: $yellow;
} }
} }
...@@ -789,6 +546,14 @@ export default { ...@@ -789,6 +546,14 @@ export default {
transform: translateY(-50%); transform: translateY(-50%);
.wrapper { .wrapper {
transform: translateY(4px); transform: translateY(4px);
.search-pic {
color: #fff;
margin-right: 8px;
cursor: pointer;
&:hover {
color: $yellow;
}
}
} }
.el-button { .el-button {
...@@ -827,140 +592,4 @@ export default { ...@@ -827,140 +592,4 @@ export default {
background-color: #f8f8f8; background-color: #f8f8f8;
color: #8a919f; color: #8a919f;
} }
.login {
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.text {
font-weight: bold;
font-size: 24px;
color: #666;
}
.close {
font-size: 34px;
cursor: pointer;
color: #ccc;
}
}
.login-box {
width: 500px;
margin: auto;
}
}
.opration {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-top: 20px;
.register {
display: flex;
justify-content: center;
margin: 20px 0;
font-size: 14px;
cursor: pointer;
&:hover {
color: #2069c4;
}
}
}
.dialog-footer {
display: flex;
justify-content: center;
}
.captcha {
display: flex;
justify-content: flex-end;
img {
margin-top: 2px;
height: 40px;
}
}
::v-deep .loginBtn {
padding: 16px !important;
border-radius: 0 !important;
width: 100%;
background-color: #2069c4;
color: #fff;
font-size: 14px;
&:hover {
filter: brightness(0.9) !important;
background-color: #2069c4;
color: #fff;
border: none;
border-radius: 0 !important;
padding: 16px !important;
width: 100%;
font-size: 14px;
}
}
::v-deep .el-dialog {
width: 400px;
border-radius: 0;
.el-dialog__body {
padding: 20px 30px 60px !important;
}
}
::v-deep .el-input__inner {
background: #e8f0fe;
border: none;
}
::v-deep .el-dialog__header {
padding: 48px 30px 10px !important;
color: #666 !important;
font-weight: bold;
}
::v-deep .el-dialog__headerbtn {
top: 48px !important;
font-size: 24px;
right: 30px;
}
.login-title {
display: flex;
position: relative;
.title-item {
margin-right: 40px;
cursor: pointer;
position: relative;
&:hover {
color: #2069c4;
}
}
.active {
color: #2069c4;
}
.line {
width: 18px;
height: 4px;
background-color: #2069c4;
// border-radius: 4px;
position: absolute;
left: 24px;
bottom: -14px;
transition: all 0.3s ease;
}
}
</style> </style>
src/components/ReaderOperations/index.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div class="reader-operations"> <div class="reader-operations">
<span class="operations" :style="{ <span
class="operations"
:style="{
color, color,
}"> }"
>
<span class="operation-item"> <span class="operation-item">
<svg-icon icon-class="view" :style="{ <svg-icon
icon-class="view"
:style="{
fontSize: iconSize + 'px', fontSize: iconSize + 'px',
color, color,
}"></svg-icon> }"
></svg-icon>
<span>{{ formatNum(info.browseCount) }}</span> <span>{{ formatNum(info.browseCount) }}</span>
</span> </span>
<span class="operation-item"> <span class="operation-item">
<svg-icon @click="handleLike" :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'" :style="{ <svg-icon
@click="handleLike"
:icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'"
:style="{
fontSize: iconSize + 'px', fontSize: iconSize + 'px',
color: info.loveCountStatus ? selectColor : color, color: info.loveCountStatus ? selectColor : color,
}"></svg-icon> }"
></svg-icon>
<span>{{ <span>{{
formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount) formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
}}</span> }}</span>
</span> </span>
<span class="operation-item" @click="handleCollect"> <span class="operation-item" @click="handleCollect">
<svg-icon :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'" :style="{ <svg-icon
:icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
:style="{
fontSize: iconSize + 'px', fontSize: iconSize + 'px',
color: info.collectCountStatus ? selectColor : color, color: info.collectCountStatus ? selectColor : color,
}"></svg-icon> }"
></svg-icon>
<span>{{ <span>{{
formatNum(info.collectCount) == 0 formatNum(info.collectCount) == 0
? "收藏" ? "收藏"
...@@ -31,24 +44,39 @@ ...@@ -31,24 +44,39 @@
}}</span> }}</span>
</span> </span>
<span class="operation-item" @click="handleShare"> <span class="operation-item" @click="handleShare">
<svg-icon icon-class="share2" :style="{ <svg-icon
icon-class="share2"
:style="{
fontSize: iconSize + 'px', fontSize: iconSize + 'px',
color, color,
}"></svg-icon> }"
></svg-icon>
<span>分享</span> <span>分享</span>
</span> </span>
</span> </span>
<el-dialog title="登录提示" :visible.sync="loginDialogVisible" width="30%" :before-close="handleLoginClose" <el-dialog
append-to-body> title="登录提示"
:visible.sync="loginDialogVisible"
width="30%"
:before-close="handleLoginClose"
append-to-body
>
<span>读者功能需登录进行使用，是否去登录？</span> <span>读者功能需登录进行使用，是否去登录？</span>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="loginDialogVisible = false">取 消</el-button> <el-button @click="loginDialogVisible = false">取 消</el-button>
<el-button type="primary" @click.native="handleToLogin">确 定</el-button> <el-button type="primary" @click.native="handleToLogin"
>确 定</el-button
>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog title="分享给朋友" :visible.sync="shareDialogVisible" width="40%" :before-close="handleShareClose" <el-dialog
append-to-body> title="分享给朋友"
:visible.sync="shareDialogVisible"
width="40%"
:before-close="handleShareClose"
append-to-body
>
<!-- <div class="qrcode"> <!-- <div class="qrcode">
</div> --> </div> -->
<div class="copy"> <div class="copy">
...@@ -57,7 +85,9 @@ ...@@ -57,7 +85,9 @@
<template slot="append"> <template slot="append">
<el-button type="text" @click.native="copyUrl"> <el-button type="text" @click.native="copyUrl">
<svg-icon icon-class="copy"></svg-icon> <svg-icon icon-class="copy"></svg-icon>
复制链接</el-button></template> 复制链接</el-button
></template
>
</el-input> </el-input>
</div> </div>
</el-dialog> </el-dialog>
...@@ -128,8 +158,7 @@ export default { ...@@ -128,8 +158,7 @@ export default {
} }
setTimeout(() => { setTimeout(() => {
this.$emit("reload", this.info.crId || this.info.exhibitionId); this.$emit("reload", this.info.crId || this.info.exhibitionId);
}, 300) }, 300);
}); });
} else { } else {
this.loginDialogVisible = true; this.loginDialogVisible = true;
...@@ -161,7 +190,7 @@ export default { ...@@ -161,7 +190,7 @@ export default {
} }
setTimeout(() => { setTimeout(() => {
this.$emit("reload", this.info.crId || this.info.exhibitionId); this.$emit("reload", this.info.crId || this.info.exhibitionId);
}, 300) }, 300);
}); });
} else { } else {
this.loginDialogVisible = true; this.loginDialogVisible = true;
...@@ -239,7 +268,7 @@ export default { ...@@ -239,7 +268,7 @@ export default {
} }
.el-button--text { .el-button--text {
color: $themeColor; color: $deepBlue;
} }
.copy { .copy {
...@@ -271,7 +300,7 @@ export default { ...@@ -271,7 +300,7 @@ export default {
.el-button--primary { .el-button--primary {
border: none; border: none;
background-color: $themeColor; background-color: $deepBlue;
} }
} }
</style> </style>
src/components/SlideImageGroup/index.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div class="slide-img-group"> <div class="slide-img-group">
<div class="list"> <div class="list">
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs"> <swiper
<swiper-slide class="slide-item" v-for="(item, index) in imgList" :key="index" @click="handleClickItem(item)"> class="swiper gallery-thumbs"
:options="swiperOptionThumbs"
ref="swiperThumbs"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in imgList"
:key="index"
@click="handleClickItem(item)"
>
<!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> --> <!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> -->
<div class="img-container" @click="handelPreviewImages(imgList, index)"> <div
class="img-container"
@click="handelPreviewImages(imgList, index)"
>
<slot name="img" :item="item"></slot> <slot name="img" :item="item"></slot>
</div> </div>
<slot name="info" :item="item" /> <slot name="info" :item="item" />
...@@ -18,7 +30,6 @@ ...@@ -18,7 +30,6 @@
</div> --> </div> -->
</swiper-slide> </swiper-slide>
<!--分页器。如果放置在swiper外面，需要自定义样式。--> <!--分页器。如果放置在swiper外面，需要自定义样式。-->
</swiper> </swiper>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
...@@ -28,10 +39,13 @@ ...@@ -28,10 +39,13 @@
<div class="swiper-button-prev swiper-button-white" slot="button-prev"> <div class="swiper-button-prev swiper-button-white" slot="button-prev">
<i class="el-icon-arrow-left"></i> <i class="el-icon-arrow-left"></i>
</div> </div>
</div> </div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="previewList" <el-image-viewer
:initial-index="initialIndex" /> v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="previewList"
:initial-index="initialIndex"
/>
</div> </div>
</template> </template>
...@@ -77,16 +91,16 @@ export default { ...@@ -77,16 +91,16 @@ export default {
}, },
}, },
imgViewerVisible: false, imgViewerVisible: false,
initialIndex: 0 initialIndex: 0,
}; };
}, },
mounted() { }, mounted() {},
methods: { methods: {
handelPreviewImages(items, index) { handelPreviewImages(items, index) {
this.imgViewerVisible = true; this.imgViewerVisible = true;
this.previewList = items.map((item) => this.$getFullUrl(item.url)); this.previewList = items.map((item) => this.$getFullUrl(item.url));
this.initialIndex = index this.initialIndex = index;
}, },
closeImgViewer() { closeImgViewer() {
this.imgViewerVisible = false; this.imgViewerVisible = false;
...@@ -103,7 +117,7 @@ export default { ...@@ -103,7 +117,7 @@ export default {
.slide-img-group { .slide-img-group {
// height: 100%; // height: 100%;
height: 240px; height: 240px;
.list{ .list {
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -112,7 +126,7 @@ export default { ...@@ -112,7 +126,7 @@ export default {
.swiper-container { .swiper-container {
// padding: 0 60px; // padding: 0 60px;
width:calc(100% - 140px); width: calc(100% - 140px);
// overflow-y: auto; // overflow-y: auto;
::v-deep .swiper-wrapper { ::v-deep .swiper-wrapper {
display: flex; display: flex;
...@@ -164,7 +178,7 @@ export default { ...@@ -164,7 +178,7 @@ export default {
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 50%; border-radius: 50%;
background-color: rgba($themeColor,0.4); background-color: rgba($deepBlue, 0.4);
transform: translateY(-20px); transform: translateY(-20px);
color: #333; color: #333;
} }
...@@ -193,18 +207,14 @@ export default { ...@@ -193,18 +207,14 @@ export default {
} }
::v-deep .swiper-pagination-bullets { ::v-deep .swiper-pagination-bullets {
bottom:-10px; bottom: -10px;
.swiper-pagination-bullet{ .swiper-pagination-bullet {
margin-right: 10px; margin-right: 10px;
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
.swiper-pagination-bullet-active{ .swiper-pagination-bullet-active {
background: $themeColor; background: $deepBlue;
} }
} }
</style> </style>
\ No newline at end of file
src/components/Video/index.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div :class="['video-container', theme]" @click="hanleClick"> <div :class="['video-container', theme]" @click="hanleClick">
<video :src="url" class="video-dom" ref="video" :controls="isPlaying"></video> <video
:src="url"
class="video-dom"
ref="video"
:controls="isPlaying"
></video>
<div class="modal" :style="{ opacity: opacity }"> <div class="modal" :style="{ opacity: opacity }">
<div class="play-btn"> <div class="play-btn">
<i class="el-icon-caret-right"></i> <i class="el-icon-caret-right"></i>
...@@ -53,7 +58,7 @@ export default { ...@@ -53,7 +58,7 @@ export default {
}; };
</script> </script>
<style scoped lang='scss'> <style scoped lang="scss">
.video-container { .video-container {
position: relative; position: relative;
height: 100%; height: 100%;
...@@ -120,8 +125,8 @@ export default { ...@@ -120,8 +125,8 @@ export default {
} }
.blue { .blue {
.play-btn { .play-btn {
border: 2px solid $themeColor; border: 2px solid $deepBlue;
color: $themeColor; color: $deepBlue;
} }
} }
</style> </style>
src/components/VideoPlayer/index.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div class="m-video"> <div class="m-video">
<video-player ref="videoPlayer" @play="autoIncrement" @timeupdate="onPlayerTimeupdate($event)" <video-player
@ready="playerReadied" :playsinline="true" :options="playerOptions"> ref="videoPlayer"
@play="autoIncrement"
@timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied"
:playsinline="true"
:options="playerOptions"
>
</video-player> </video-player>
</div> </div>
</template> </template>
...@@ -16,14 +22,14 @@ export default { ...@@ -16,14 +22,14 @@ export default {
}, },
computed: { computed: {
player() { player() {
return this.$refs.videoPlayer.player return this.$refs.videoPlayer.player;
}, },
}, },
watch:{ watch: {
src(newSrc){ src(newSrc) {
console.log('newSrc',newSrc); console.log("newSrc", newSrc);
this.toggle(newSrc) this.toggle(newSrc);
} },
}, },
data() { data() {
return { return {
...@@ -76,11 +82,11 @@ export default { ...@@ -76,11 +82,11 @@ export default {
let player = this.$refs.videoPlayer.player; let player = this.$refs.videoPlayer.player;
player.play(); player.play();
}, },
playerReadied(player) { }, playerReadied(player) {},
toggle(newSrc){ toggle(newSrc) {
this.player.src(newSrc) this.player.src(newSrc);
} },
}, },
}; };
</script> </script>
...@@ -93,10 +99,10 @@ export default { ...@@ -93,10 +99,10 @@ export default {
height: 100%; height: 100%;
.video-js { .video-js {
&:hover{ &:hover {
.vjs-big-play-button{ .vjs-big-play-button {
// background-color: #fff; // background-color: #fff;
// color: $themeColor; // color: $deepBlue;
} }
} }
video { video {
...@@ -117,7 +123,7 @@ export default { ...@@ -117,7 +123,7 @@ export default {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 50px; font-size: 50px;
color: #fff; color: #fff;
background-color: $themeColor; background-color: $deepBlue;
} }
.vjs-control-bar { .vjs-control-bar {
......
src/views/boutique/index-old.vue
浏览文件 @ 9cb5fc3a
...@@ -33,8 +33,10 @@ ...@@ -33,8 +33,10 @@
<YLGDYW v-else-if="activeTab == 'ylgdyw'" /> <YLGDYW v-else-if="activeTab == 'ylgdyw'" />
<JYYCC v-else-if="activeTab == 'jyycc'" /> <JYYCC v-else-if="activeTab == 'jyycc'" />
<div v-else class="img-container"> <div v-else class="img-container">
<img :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`) <img
" alt="" /> :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)"
alt=""
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -42,14 +44,14 @@ ...@@ -42,14 +44,14 @@
</template> </template>
<script> <script>
import mTabs from '@/views/home/components/Boutique.vue' import mTabs from "@/views/home/components/Boutique.vue";
import SMGZ from "./components/SMGZ"; import SMGZ from "./components/SMGZ";
import YLGDYW from "./components/YLGDYW"; import YLGDYW from "./components/YLGDYW";
import JYYCC from "./components/jyycc"; import JYYCC from "./components/jyycc";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
export default { export default {
name: "Boutique", name: "Boutique",
components: { mTabs, SMGZ, YLGDYW,JYYCC }, components: { mTabs, SMGZ, YLGDYW, JYYCC },
data() { data() {
return { return {
tabs: [ tabs: [
...@@ -143,7 +145,7 @@ export default { ...@@ -143,7 +145,7 @@ export default {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
>img { > img {
height: 500px; height: 500px;
object-fit: cover; object-fit: cover;
} }
...@@ -220,7 +222,7 @@ export default { ...@@ -220,7 +222,7 @@ export default {
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
>p { > p {
margin: 0; margin: 0;
font-size: 46px; font-size: 46px;
font-weight: 600; font-weight: 600;
...@@ -235,7 +237,7 @@ export default { ...@@ -235,7 +237,7 @@ export default {
animation: hue 6s infinite linear; animation: hue 6s infinite linear;
} }
>span { > span {
font-weight: 600; font-weight: 600;
font-family: "宋体"; font-family: "宋体";
font-size: 24px; font-size: 24px;
...@@ -255,13 +257,13 @@ export default { ...@@ -255,13 +257,13 @@ export default {
width: 100%; width: 100%;
bottom: 0; bottom: 0;
>li { > li {
flex: 1; flex: 1;
>div { > div {
text-align: center; text-align: center;
>span { > span {
font-size: 20px; font-size: 20px;
color: #333; color: #333;
font-weight: 600; font-weight: 600;
...@@ -278,14 +280,14 @@ export default { ...@@ -278,14 +280,14 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
border-bottom: 3px solid $themeColor; border-bottom: 3px solid $deepBlue;
border-radius: 30px; border-radius: 30px;
} }
} }
} }
&.active { &.active {
>span { > span {
position: relative; position: relative;
color: #003fa7; color: #003fa7;
text-shadow: 6px 2px 2px #999; text-shadow: 6px 2px 2px #999;
...@@ -296,7 +298,7 @@ export default { ...@@ -296,7 +298,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
border-bottom: 3px solid $themeColor; border-bottom: 3px solid $deepBlue;
border-radius: 30px; border-radius: 30px;
} }
} }
...@@ -306,7 +308,6 @@ export default { ...@@ -306,7 +308,6 @@ export default {
} }
.boutique-content { .boutique-content {
.focus-content { .focus-content {
// padding: 20px 0; // padding: 20px 0;
// margin: 20px; // margin: 20px;
...@@ -320,7 +321,7 @@ export default { ...@@ -320,7 +321,7 @@ export default {
// font-weight: 600; // font-weight: 600;
// background: rgb(239 247 255); // background: rgb(239 247 255);
>p { > p {
margin: 0; margin: 0;
} }
......
src/views/ccProduct/index.vue
浏览文件 @ 9cb5fc3a
...@@ -8,22 +8,51 @@ ...@@ -8,22 +8,51 @@
/> --> /> -->
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="40" class="search wow animate__animated animate__fadeIn"> <el-row
:gutter="40"
class="search wow animate__animated animate__fadeIn"
>
<el-col :span="6"> <el-col :span="6">
<el-select class="years item" v-model="deptId" placeholder="请选择所属单位" filterable @change="handleDeptChange" <el-select
clearable> class="years item"
<el-option v-for="(item, index) in deptList" :key="index" :label="item.name" :value="item.id"> v-model="deptId"
placeholder="请选择所属单位"
filterable
@change="handleDeptChange"
clearable
>
<el-option
v-for="(item, index) in deptList"
:key="index"
:label="item.name"
:value="item.id"
>
</el-option> </el-option>
</el-select> </el-select>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-cascader class="years item" v-model="regionCode" :options="regionTree" :props="culturalRegionProps" <el-cascader
placeholder="请选择所属地区" filterable @change="handleRegionChange" clearable popper-class="cascader" class="years item"
:show-all-levels="false"> v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
popper-class="cascader"
:show-all-levels="false"
>
</el-cascader> </el-cascader>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-input class="input item" v-model="keyword" placeholder="请输入关键词" @keyup.enter.native="search" clearable> <el-input
class="input item"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input> </el-input>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
...@@ -40,12 +69,26 @@ ...@@ -40,12 +69,26 @@
件/套 件/套
</div> </div>
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
<el-col :span="item.status == 1 ? 6 : 0" class="cr-item" @click.native="handleClick(item)" <el-col
@mouseenter.native="handleEnterImg(item)" @mouseleave.native="handleLeaveImg(item)" :span="item.status == 1 ? 6 : 0"
v-for="(item, index) in list.records" :key="index"> class="cr-item"
<div class="container wow animate__animated animate__fadeInUp" v-if="item.status == 1"> @click.native="handleClick(item)"
@mouseenter.native="handleEnterImg(item)"
@mouseleave.native="handleLeaveImg(item)"
v-for="(item, index) in list.records"
:key="index"
>
<div
class="container wow animate__animated animate__fadeInUp"
v-if="item.status == 1"
>
<div class="img-container"> <div class="img-container">
<img :src="$getFullUrl(item.imagesVo[0].pressUrl)" width="100%" class="face-image" lazy /> <img
:src="$getFullUrl(item.imagesVo[0].pressUrl)"
width="100%"
class="face-image"
lazy
/>
</div> </div>
<div class="desc"> <div class="desc">
<div class="name">{{ item.title }}</div> <div class="name">{{ item.title }}</div>
...@@ -73,11 +116,21 @@ ...@@ -73,11 +116,21 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty description="暂无数据" v-if="list.records.length == 0"></el-empty> <el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination-container"> <div class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" <el-pagination
:current-page="Number(list.current)" :page-sizes="[20, 40, 100]" :page-size="Number(list.size)" @size-change="handleSizeChange"
layout="total, prev, pager, next" :total="Number(list.total)" class="pagination"> @current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[20, 40, 100]"
:page-size="Number(list.size)"
layout="total, prev, pager, next"
:total="Number(list.total)"
class="pagination"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
...@@ -242,20 +295,19 @@ export default { ...@@ -242,20 +295,19 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
$text-indent: 16px; $text-indent: 16px;
.cultural-relic { .cultural-relic {
width: 100%; width: 100%;
// background-color: $themeColor; // background-color: $deepBlue;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
background-color: #fff; background-color: #fff;
padding-bottom: 126px; padding-bottom: 126px;
.content { .content {
// width: 100%; // width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
...@@ -273,19 +325,18 @@ $text-indent: 16px; ...@@ -273,19 +325,18 @@ $text-indent: 16px;
} }
.total { .total {
padding-bottom:16px; padding-bottom: 16px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
font-size: 16px; font-size: 16px;
align-items: center; align-items: center;
.list-total-num { .list-total-num {
font-size: 24px; font-size: 24px;
color: $themeSecondaryColor; color: $yellow;
margin: 0 6px; margin: 0 6px;
} }
} }
.cr-list { .cr-list {
// padding: 0 74px; // padding: 0 74px;
...@@ -301,14 +352,13 @@ $text-indent: 16px; ...@@ -301,14 +352,13 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $themeColor; border: 2px solid $deepBlue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
.img-container { .img-container {
.deco-left-top, .deco-left-top,
.deco-left-bottom, .deco-left-bottom,
.deco-right-top, .deco-right-top,
...@@ -316,12 +366,10 @@ $text-indent: 16px; ...@@ -316,12 +366,10 @@ $text-indent: 16px;
display: block; display: block;
} }
} }
} }
.img-container { .img-container {
background-color: rgba($themeColor, 0.1); background-color: rgba($deepBlue, 0.1);
height: 268px; height: 268px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
...@@ -383,7 +431,7 @@ $text-indent: 16px; ...@@ -383,7 +431,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $themeColor; color: $deepBlue;
margin-bottom: 18px; margin-bottom: 18px;
} }
...@@ -468,5 +516,4 @@ $text-indent: 16px; ...@@ -468,5 +516,4 @@ $text-indent: 16px;
height: 116px; height: 116px;
} }
} }
</style> </style>
src/views/culturalRelic/Detail.vue
浏览文件 @ 9cb5fc3a
...@@ -477,7 +477,7 @@ export default { ...@@ -477,7 +477,7 @@ export default {
images: this.imgList, images: this.imgList,
options: { options: {
initialViewIndex: index, initialViewIndex: index,
zoomRatio:1.4, zoomRatio: 1.4,
}, },
}); });
}, },
...@@ -894,7 +894,7 @@ $node-w: 700px; ...@@ -894,7 +894,7 @@ $node-w: 700px;
.swiper-button-prev { .swiper-button-prev {
background-image: none; background-image: none;
border: 2px solid #666; border: 2px solid #666;
background-color: rgba($themeColor, 0.5); background-color: rgba($deepBlue, 0.5);
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
...@@ -952,7 +952,7 @@ $node-w: 700px; ...@@ -952,7 +952,7 @@ $node-w: 700px;
&:hover, &:hover,
&.active { &.active {
cursor: pointer; cursor: pointer;
// background-color: $themeColor; // background-color: $deepBlue;
background-image: url(@/assets/imgs/show/outer-active.png); background-image: url(@/assets/imgs/show/outer-active.png);
> span { > span {
...@@ -1001,7 +1001,7 @@ $node-w: 700px; ...@@ -1001,7 +1001,7 @@ $node-w: 700px;
:hover { :hover {
background: #fff; background: #fff;
color: $themeColor; color: $deepBlue;
} }
} }
} }
......
src/views/culturalRelic/detail-bp.vue
浏览文件 @ 9cb5fc3a
...@@ -22,11 +22,7 @@ ...@@ -22,11 +22,7 @@
<div class="content-item display-detail_basic_info"> <div class="content-item display-detail_basic_info">
<div class="info-container"> <div class="info-container">
<div <div
class=" class="info-container-left wow animate__animated animate__fadeInLeft"
info-container-left
wow
animate__animated animate__fadeInLeft
"
> >
<SlideImage <SlideImage
:imgList="CRDetail.imagesVo" :imgList="CRDetail.imagesVo"
...@@ -39,11 +35,7 @@ ...@@ -39,11 +35,7 @@
</div> </div>
<div <div
class=" class="info-container-right wow animate__animated animate__fadeInRight"
info-container-right
wow
animate__animated animate__fadeInRight
"
> >
<div class="info-title"> <div class="info-title">
<span>{{ CRDetail.name }} </span> <span>{{ CRDetail.name }} </span>
...@@ -341,21 +333,21 @@ ...@@ -341,21 +333,21 @@
:url-list="imgList" :url-list="imgList"
/> />
</div> </div>
</template> </template>
<script> <script>
// import SearchBar from "@/components/SearchBar"; // import SearchBar from "@/components/SearchBar";
// import CustomTitle from "@/components/CustomTitle"; // import CustomTitle from "@/components/CustomTitle";
// import QRCode from "qrcodejs2"; // import QRCode from "qrcodejs2";
import AudioPlayer from "@/components/AudioPlayer"; import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video"; import Video from "@/components/Video";
import ReaderOperations from "@/components/ReaderOperations"; import ReaderOperations from "@/components/ReaderOperations";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic"; import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index"; import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage"; import SlideImage from "@/components/SlideImage";
import { isElementInViewport2 } from "@/utils/index"; import { isElementInViewport2 } from "@/utils/index";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
ReaderOperations, ReaderOperations,
...@@ -581,26 +573,26 @@ ...@@ -581,26 +573,26 @@
}); });
}, },
}, },
}; };
</script> </script>
<style lang="scss" > <style lang="scss">
// 自定义分页器样式 // 自定义分页器样式
#page { #page {
height: 30px; height: 30px;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.page-item { .page-item {
cursor: pointer; cursor: pointer;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
$titleFontFamily: SourceHanSerifCN-Bold; $titleFontFamily: SourceHanSerifCN-Bold;
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: #d72f3f; background-color: #d72f3f;
min-height: 300px; min-height: 300px;
...@@ -612,21 +604,21 @@ ...@@ -612,21 +604,21 @@
justify-content: center; justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px; box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px; letter-spacing: 10px;
} }
.units { .units {
background-image: linear-gradient(to bottom, #660d04, #520002); background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px; min-height: 400px;
} }
.content { .content {
// background: url("@/assets/imgs/display/normal/bg1.png"); // background: url("@/assets/imgs/display/normal/bg1.png");
background-color: #f3f3f3; background-color: #f3f3f3;
min-height: 100px; min-height: 100px;
} }
.content-item { .content-item {
width: 100%; width: 100%;
} }
.custom_title { .custom_title {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 50px 0 40px 0; padding: 50px 0 40px 0;
...@@ -638,13 +630,13 @@ ...@@ -638,13 +630,13 @@
align-items: center; align-items: center;
.svg-icon { .svg-icon {
font-size: 50px; font-size: 50px;
color: $themeColor; color: $deepBlue;
margin-right: 10px; margin-right: 10px;
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $themeColor; color: $deepBlue;
line-height: 101px; line-height: 101px;
} }
} }
...@@ -669,9 +661,9 @@ ...@@ -669,9 +661,9 @@
} }
} }
} }
} }
.enlarge { .enlarge {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
right: 40px; right: 40px;
...@@ -690,12 +682,12 @@ ...@@ -690,12 +682,12 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
} }
.intro-title { .intro-title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $themeColor; color: $deepBlue;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -704,18 +696,18 @@ ...@@ -704,18 +696,18 @@
margin-right: 10px; margin-right: 10px;
font-size: 36px; font-size: 36px;
} }
} }
.isFixed { .isFixed {
position: fixed; position: fixed;
left: 0; left: 0;
top: $nav-height; top: $nav-height;
z-index: 99; z-index: 99;
} }
/**公共样式结束 */ /**公共样式结束 */
/**样式开始 */ /**样式开始 */
.content { .content {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
...@@ -848,7 +840,7 @@ ...@@ -848,7 +840,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $themeColor; background-color: $deepBlue;
margin: 20px 0; margin: 20px 0;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
...@@ -879,7 +871,7 @@ ...@@ -879,7 +871,7 @@
color: #831122; color: #831122;
} }
.collect { .collect {
color: $themeColor; color: $deepBlue;
} }
} }
} }
...@@ -893,7 +885,7 @@ ...@@ -893,7 +885,7 @@
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
border: 2px solid $themeColor; border: 2px solid $deepBlue;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
...@@ -905,7 +897,7 @@ ...@@ -905,7 +897,7 @@
box-shadow: 0 0 14px rgb(0 0 0 / 40%); box-shadow: 0 0 14px rgb(0 0 0 / 40%);
} }
.svg-icon { .svg-icon {
color: $themeColor; color: $deepBlue;
font-size: 80px; font-size: 80px;
} }
img { img {
...@@ -931,7 +923,7 @@ ...@@ -931,7 +923,7 @@
position: relative; position: relative;
&:hover { &:hover {
color: $themeColor; color: $deepBlue;
&::after { &::after {
display: inline-block; display: inline-block;
} }
...@@ -941,7 +933,7 @@ ...@@ -941,7 +933,7 @@
} }
} }
.active { .active {
color: $themeColor; color: $deepBlue;
&::after { &::after {
display: inline-block; display: inline-block;
} }
...@@ -954,7 +946,7 @@ ...@@ -954,7 +946,7 @@
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
left: 0; left: 0;
background-color: $themeColor; background-color: $deepBlue;
} }
} }
/**简介和视频 */ /**简介和视频 */
...@@ -967,7 +959,7 @@ ...@@ -967,7 +959,7 @@
} }
.left-box { .left-box {
width: 60px; width: 60px;
background-color: $themeColor; background-color: $deepBlue;
min-height: 200px; min-height: 200px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -982,7 +974,7 @@ ...@@ -982,7 +974,7 @@
flex: 1; flex: 1;
text-indent: 34px; text-indent: 34px;
padding: 16px 32px; padding: 16px 32px;
background-color: rgba($themeColor, 10%); background-color: rgba($deepBlue, 10%);
} }
} }
...@@ -995,7 +987,7 @@ ...@@ -995,7 +987,7 @@
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
font-size: 26px; font-size: 26px;
color: $themeColor; color: $deepBlue;
margin: 80px 0 40px; margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
padding-left: 46px; padding-left: 46px;
...@@ -1017,7 +1009,7 @@ ...@@ -1017,7 +1009,7 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $themeColor; color: $deepBlue;
&::after { &::after {
display: inline-block; display: inline-block;
} }
...@@ -1031,7 +1023,7 @@ ...@@ -1031,7 +1023,7 @@
content: ""; content: "";
width: 50%; width: 50%;
height: 1px; height: 1px;
background-color: $themeColor; background-color: $deepBlue;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -9px; bottom: -9px;
...@@ -1045,7 +1037,7 @@ ...@@ -1045,7 +1037,7 @@
width: 0; width: 0;
height: 0; height: 0;
border: 8px solid transparent; border: 8px solid transparent;
border-top-color: $themeColor; border-top-color: $deepBlue;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: -25px; bottom: -25px;
...@@ -1119,84 +1111,84 @@ ...@@ -1119,84 +1111,84 @@
} }
} }
} }
} }
::v-deep .el-carousel__item--card { ::v-deep .el-carousel__item--card {
width: 100%; width: 100%;
height: 100%; height: 100%;
transform: translateX(0) scale(1) !important; transform: translateX(0) scale(1) !important;
} }
::v-deep .el-carousel { ::v-deep .el-carousel {
height: 100%; height: 100%;
} }
::v-deep .el-carousel__container { ::v-deep .el-carousel__container {
height: 100%; height: 100%;
} }
::v-deep .el-tree { ::v-deep .el-tree {
background: transparent; background: transparent;
.el-tree-node__content { .el-tree-node__content {
height: 50px; height: 50px;
:hover { :hover {
background: #fff; background: #fff;
color: $themeColor; color: $deepBlue;
} }
} }
} }
::v-deep .el-radio__input { ::v-deep .el-radio__input {
display: none; display: none;
} }
::v-deep .el-radio__label { ::v-deep .el-radio__label {
font-size: 18px; font-size: 18px;
padding-left: 0; padding-left: 0;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
} }
::v-deep .el-radio__input.is-checked + .el-radio__label { ::v-deep .el-radio__input.is-checked + .el-radio__label {
color: $themeColor; color: $deepBlue;
} }
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{ // ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0; // border-radius: 0;
// } // }
// ::v-deep .el-radio-button:last-child .el-radio-button__inner{ // ::v-deep .el-radio-button:last-child .el-radio-button__inner{
// border-radius: 0; // border-radius: 0;
// } // }
@keyframes filmMoveLeft { @keyframes filmMoveLeft {
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
100% { 100% {
transform: translateX(-1200px); transform: translateX(-1200px);
} }
} }
@keyframes filmMoveRight { @keyframes filmMoveRight {
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
100% { 100% {
transform: translateX(1200px); transform: translateX(1200px);
} }
} }
@keyframes audioRotate { @keyframes audioRotate {
0% { 0% {
transform: rotateZ(0deg); transform: rotateZ(0deg);
} }
100% { 100% {
transform: rotateZ(360deg); transform: rotateZ(360deg);
} }
} }
@-webkit-keyframes audioRotate { @-webkit-keyframes audioRotate {
0% { 0% {
transform: rotateZ(0deg); transform: rotateZ(0deg);
} }
100% { 100% {
transform: rotateZ(360deg); transform: rotateZ(360deg);
} }
} }
.animation-play-paused { .animation-play-paused {
animation-play-state: paused; animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */ -webkit-animation-play-state: paused; /* Safari 和 Chrome */
} }
</style> </style>
\ No newline at end of file
src/views/culturalRelic/index-hasbg.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic">
<ListBanner title="共计已上线文物" :num="list.total" unit="件/套" :info="['文物','展示']"/> <ListBanner
title="共计已上线文物"
:num="list.total"
unit="件/套"
:info="['文物', '展示']"
/>
<div class="search-bar wow animate__animated animate__fadeIn"> <div class="search-bar wow animate__animated animate__fadeIn">
<div class="search-wrapper"> <div class="search-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')"> <div class="search-item" @click="handleClickSearchBar('type')">
...@@ -26,7 +31,6 @@ ...@@ -26,7 +31,6 @@
<i class="el-icon-search"></i> <i class="el-icon-search"></i>
</div> </div>
</div> </div>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div class="search-panel" v-show="showSearchPanel"> <div class="search-panel" v-show="showSearchPanel">
...@@ -554,7 +558,7 @@ $text-indent: 16px; ...@@ -554,7 +558,7 @@ $text-indent: 16px;
text-align: center; text-align: center;
text-align: center; text-align: center;
&:hover { &:hover {
// border: 2px solid $themeColor; // border: 2px solid $deepBlue;
// border-radius: 100%; // border-radius: 100%;
...@@ -574,7 +578,6 @@ $text-indent: 16px; ...@@ -574,7 +578,6 @@ $text-indent: 16px;
} }
} }
.hover-bg { .hover-bg {
> div { > div {
opacity: 1; opacity: 1;
...@@ -683,7 +686,7 @@ $text-indent: 16px; ...@@ -683,7 +686,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $themeColor; color: $deepBlue;
margin-bottom: 18px; margin-bottom: 18px;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
...@@ -869,7 +872,7 @@ $text-indent: 16px; ...@@ -869,7 +872,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: $themeColor; background: $deepBlue;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/culturalRelic/index.vue
浏览文件 @ 9cb5fc3a
...@@ -10,13 +10,21 @@ ...@@ -10,13 +10,21 @@
<div class="search-wrapper"> <div class="search-wrapper">
<el-row :gutter="40"> <el-row :gutter="40">
<el-col :span="6"> <el-col :span="6">
<div class="search-item" id="type-select" @click.lazy="handleClickSearchBar('type')"> <div
class="search-item"
id="type-select"
@click.lazy="handleClickSearchBar('type')"
>
<span>{{ currentType }}</span> <span>{{ currentType }}</span>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<div class="search-item" id="year-select" @click="handleClickSearchBar('years')"> <div
class="search-item"
id="year-select"
@click="handleClickSearchBar('years')"
>
<span>{{ currentYears }}</span> <span>{{ currentYears }}</span>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
...@@ -142,7 +150,7 @@ ...@@ -142,7 +150,7 @@
import ListBanner from "@/components/ListBanner"; import ListBanner from "@/components/ListBanner";
import { getCulturalRelicList, getCrExistDict } from "@/api/culturalRelic"; import { getCulturalRelicList, getCrExistDict } from "@/api/culturalRelic";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import {debounce} from '@/utils/utils' import { debounce } from "@/utils/utils";
export default { export default {
name: "CulturalRelic", name: "CulturalRelic",
components: { ListBanner }, components: { ListBanner },
...@@ -172,7 +180,7 @@ export default { ...@@ -172,7 +180,7 @@ export default {
currentYears: "文物年代", currentYears: "文物年代",
yearList: [], yearList: [],
typeList: [], typeList: [],
windowClick: null windowClick: null,
}; };
}, },
computed: { computed: {
...@@ -208,36 +216,7 @@ export default { ...@@ -208,36 +216,7 @@ export default {
}); });
this.typeList = typeList; this.typeList = typeList;
this.yearList = yearList; this.yearList = yearList;
// await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]); this.windowClick = debounce(this.handleWindowClick, 200, true);
// for (const key in this.dicts.culturalRelicType) {
// typeList.push({
// label: this.dicts.culturalRelicType[key],
// value: key,
// });
// }
// let res = await this.$store.dispatch("dict/getDictTree", [
// "culturalRelicYears",
// ]);
// this.culturalRelicYears = res.culturalRelicYears;
// traveseYears(this.culturalRelicYears);
// // 获取叶子节点
// function traveseYears(arr) {
// if (arr && arr.length > 0) {
// arr.map((item) => {
// if (item.children && item.children.length > 0) {
// traveseYears(item.children);
// } else {
// yearList.push({
// value: item.value,
// label: item.label,
// });
// }
// });
// }
// }
this.windowClick = debounce(this.handleWindowClick, 200, true)
window.addEventListener("click", this.windowClick); window.addEventListener("click", this.windowClick);
}, },
mounted() { mounted() {
...@@ -251,9 +230,6 @@ export default { ...@@ -251,9 +230,6 @@ export default {
this.onlyShow3d = value; this.onlyShow3d = value;
this.search(); this.search();
}, },
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
}, },
methods: { methods: {
search() { search() {
...@@ -361,16 +337,20 @@ export default { ...@@ -361,16 +337,20 @@ export default {
this.showSearchPanel = false; this.showSearchPanel = false;
}, },
handleWindowClick(em) { handleWindowClick(em) {
let parent = document.getElementsByClassName('search-panel')[0] let parent = document.getElementsByClassName("search-panel")[0];
let parent2 = document.getElementById('type-select') let parent2 = document.getElementById("type-select");
let parent3 = document.getElementById('year-select') let parent3 = document.getElementById("year-select");
if (parent.contains(em.target) || parent2.contains(em.target) || parent3.contains(em.target)) { if (
return parent.contains(em.target) ||
parent2.contains(em.target) ||
parent3.contains(em.target)
) {
return;
} else { } else {
this.showSearchPanel = false this.showSearchPanel = false;
}
} }
}, },
},
}; };
</script> </script>
...@@ -380,7 +360,7 @@ $text-indent: 16px; ...@@ -380,7 +360,7 @@ $text-indent: 16px;
.cultural-relic { .cultural-relic {
width: 100%; width: 100%;
// background-color: $themeColor; // background-color: $deepBlue;
// color: #fff; // color: #fff;
.search-bar { .search-bar {
display: flex; display: flex;
...@@ -388,7 +368,7 @@ $text-indent: 16px; ...@@ -388,7 +368,7 @@ $text-indent: 16px;
flex-direction: column; flex-direction: column;
// padding: 24px 20%; // padding: 24px 20%;
// padding: 16px 13%; // padding: 16px 13%;
padding:48px 0 16px; padding: 48px 0 16px;
background: #fff; background: #fff;
.search-wrapper { .search-wrapper {
// display: flex; // display: flex;
...@@ -416,15 +396,15 @@ $text-indent: 16px; ...@@ -416,15 +396,15 @@ $text-indent: 16px;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
i{ i {
font-size: 18px; font-size: 18px;
&:hover{ &:hover {
color: #000; color: #000;
} }
} }
.svg-icon{ .svg-icon {
font-size: 18px; font-size: 18px;
&:hover{ &:hover {
color: #000; color: #000;
} }
} }
...@@ -502,6 +482,7 @@ $text-indent: 16px; ...@@ -502,6 +482,7 @@ $text-indent: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-weight: 600; font-weight: 600;
background-color: rgba($color: $deepBlue, $alpha: 0.3);
::v-deep .el-scrollbar__view { ::v-deep .el-scrollbar__view {
display: flex; display: flex;
...@@ -531,6 +512,9 @@ $text-indent: 16px; ...@@ -531,6 +512,9 @@ $text-indent: 16px;
.text { .text {
cursor: pointer; cursor: pointer;
&:hover {
color: $deepBlue;
}
} }
.divider { .divider {
...@@ -583,7 +567,7 @@ $text-indent: 16px; ...@@ -583,7 +567,7 @@ $text-indent: 16px;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
// border: 2px solid $themeColor; // border: 2px solid $deepBlue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
...@@ -597,7 +581,6 @@ $text-indent: 16px; ...@@ -597,7 +581,6 @@ $text-indent: 16px;
display: block; display: block;
} }
} }
} }
.img-container { .img-container {
...@@ -668,7 +651,7 @@ $text-indent: 16px; ...@@ -668,7 +651,7 @@ $text-indent: 16px;
font-size: 20px; font-size: 20px;
padding: 20px 0; padding: 20px 0;
// font-weight: bold; // font-weight: bold;
// color: $themeColor; // color: $deepBlue;
color: #333; color: #333;
// margin-bottom: 18px; // margin-bottom: 18px;
width: 100%; width: 100%;
...@@ -803,7 +786,7 @@ $text-indent: 16px; ...@@ -803,7 +786,7 @@ $text-indent: 16px;
background: #fff; background: #fff;
min-width: 0; min-width: 0;
margin: 0 16px; margin: 0 16px;
color: $themeColor; color: $deepBlue;
} }
.active { .active {
......
src/views/display/components/ChStyle-old.vue
浏览文件 @ 9cb5fc3a
...@@ -2,12 +2,7 @@ ...@@ -2,12 +2,7 @@
<div class="ch-style"> <div class="ch-style">
<div class="content" id="content"> <div class="content" id="content">
<div <div
class=" class="content-item sliders wow animate__animated animate__fadeInRightBig"
content-item
sliders
wow
animate__animated animate__fadeInRightBig
"
ref="imgs" ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
...@@ -55,12 +50,12 @@ ...@@ -55,12 +50,12 @@
<el-row> <el-row>
<el-col class="item"> <el-col class="item">
<div class="label">关键词：</div> <div class="label">关键词：</div>
<div class="value">{{ displayDetail.keyword ||'暂无'}}</div> <div class="value">{{ displayDetail.keyword || "暂无" }}</div>
</el-col> </el-col>
<el-col class="item" v-if="dicts.displayType"> <el-col class="item" v-if="dicts.displayType">
<div class="label">展览类型：</div> <div class="label">展览类型：</div>
<div class="value"> <div class="value">
{{ dicts.displayType[displayDetail.type]||'暂无' }} {{ dicts.displayType[displayDetail.type] || "暂无" }}
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -68,12 +63,17 @@ ...@@ -68,12 +63,17 @@
<el-col class="item" v-if="dicts.displayCharacter"> <el-col class="item" v-if="dicts.displayCharacter">
<div class="label">展览性质：</div> <div class="label">展览性质：</div>
<div class="value"> <div class="value">
{{ dicts.displayCharacter[displayDetail.displayCharacter] ||'暂无'}} {{
dicts.displayCharacter[displayDetail.displayCharacter] ||
"暂无"
}}
</div> </div>
</el-col> </el-col>
<el-col class="item"> <el-col class="item">
<div class="label">展览单位：</div> <div class="label">展览单位：</div>
<div class="value">{{ displayDetail.deptName ||'暂无'}}</div> <div class="value">
{{ displayDetail.deptName || "暂无" }}
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -120,12 +120,7 @@ ...@@ -120,12 +120,7 @@
</el-carousel> </el-carousel>
</div> --> </div> -->
<div <div
class=" class="content-item videos wow animate__animated animate__fadeInRight"
content-item
videos
wow
animate__animated animate__fadeInRight
"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
> >
<div class="video-title"> <div class="video-title">
...@@ -536,8 +531,8 @@ export default { ...@@ -536,8 +531,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.intro-content{ .intro-content {
p{ p {
font-family: $defaultFontFamily !important; font-family: $defaultFontFamily !important;
} }
} }
...@@ -1061,7 +1056,7 @@ $themeRed: #892325; ...@@ -1061,7 +1056,7 @@ $themeRed: #892325;
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: $themeColor; color: $deepBlue;
} }
} }
......
src/views/display/components/ChStyle.vue
浏览文件 @ 9cb5fc3a
...@@ -2,15 +2,32 @@ ...@@ -2,15 +2,32 @@
<div class="ch-style"> <div class="ch-style">
<div class="content" id="content"> <div class="content" id="content">
<div class="e-imgs"> <div class="e-imgs">
<swiper class="swiper gallery-top" :options="swiperOption" ref="swiperTop"> <swiper
<swiper-slide class="slide-item" v-for="(item, index) in displayDetail.imagesVo" :key="index"> class="swiper gallery-top"
<img :src="$getFullUrl(item.middleUrl || item.pressUrl)" style="cursor:pointer" :options="swiperOption"
@click="handelPreviewImages(displayDetail.imagesVo, index)" /> ref="swiperTop"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<img
:src="$getFullUrl(item.middleUrl || item.pressUrl)"
style="cursor: pointer"
@click="handelPreviewImages(displayDetail.imagesVo, index)"
/>
</swiper-slide> </swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next"> <div
class="swiper-button-next swiper-button-white"
slot="button-next"
>
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</div> </div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"> <div
class="swiper-button-prev swiper-button-white"
slot="button-prev"
>
<i class="el-icon-arrow-left"></i> <i class="el-icon-arrow-left"></i>
</div> </div>
</swiper> </swiper>
...@@ -21,7 +38,11 @@ ...@@ -21,7 +38,11 @@
{{ displayDetail.title }} {{ displayDetail.title }}
</div> </div>
<div class="e-tools"> <div class="e-tools">
<ReaderOperations :info="displayDetail" :sourceType="'biz_exhibition'" @reload="reload" /> <ReaderOperations
:info="displayDetail"
:sourceType="'biz_exhibition'"
@reload="reload"
/>
</div> </div>
<div class="e-info"> <div class="e-info">
<div class="info-item"> <div class="info-item">
...@@ -46,7 +67,9 @@ ...@@ -46,7 +67,9 @@
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="label"> 展览地区： </span> <span class="label"> 展览地区： </span>
<span class="value">{{ displayDetail.regionName || "暂无" }}</span> <span class="value">{{
displayDetail.regionName || "暂无"
}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -57,26 +80,45 @@ ...@@ -57,26 +80,45 @@
<div class="text" v-html="displayDetail.intro"></div> <div class="text" v-html="displayDetail.intro"></div>
</div> </div>
</div> </div>
<div class="e-units wow animate__animated animate__fadeInUp" ref="units" <div
v-if="displayDetail.exhibitionUnits.length > 0"> class="e-units wow animate__animated animate__fadeInUp"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="units-title">展览单元</div> <div class="units-title">展览单元</div>
<div class="units-content" v-if="currentUnit"> <div class="units-content" v-if="currentUnit">
<div class="left"> <div class="left">
<div class="line" :style="{ <div
height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px', class="line"
}"></div> :style="{
height:
(displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
}"
></div>
<div class="dots"> <div class="dots">
<div class="dot-item" v-for="(item, index) in displayDetail.exhibitionUnits" :key="index" <div
:style="{ top: index * 130 - 17 + 'px' }" @click="handleClickUnitTitle(item)" class="dot-item"
@mouseenter="handleMouseEnterUnit(item)" @mouseleave="handleMouseLeaveUnit"> v-for="(item, index) in displayDetail.exhibitionUnits"
<div class="circle" :style="{ :key="index"
'background-image': `url(${require(`@/assets/imgs/display/red/${currentUnit.title == item.title ? 'circle-s' : 'circle' :style="{ top: index * 130 - 17 + 'px' }"
@click="handleClickUnitTitle(item)"
@mouseenter="handleMouseEnterUnit(item)"
@mouseleave="handleMouseLeaveUnit"
>
<div
class="circle"
:style="{
'background-image': `url(${require(`@/assets/imgs/display/red/${
currentUnit.title == item.title ? 'circle-s' : 'circle'
}.png`)})`, }.png`)})`,
}"></div> }"
<div :class="{ ></div>
<div
:class="{
title: true, title: true,
active: currentUnit.title == item.title, active: currentUnit.title == item.title,
}"> }"
>
{{ item.title }} {{ item.title }}
</div> </div>
</div> </div>
...@@ -84,52 +126,98 @@ ...@@ -84,52 +126,98 @@
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="unit-content"> <div class="unit-content">
<div class="unit-content-container" v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo" <div
:key="unitTitle"> class="unit-content-container"
v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title"> <div class="unit-content-title">
{{ unitTitle }} {{ unitTitle }}
</div> </div>
<div class="text-indent unit-content_intro" v-if="currentUnit.intro" v-html="unitValue.intro"></div> <div
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"> class="text-indent unit-content_intro"
v-if="currentUnit.intro"
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<!-- <div class="imgs-title">单元图片</div> --> <!-- <div class="imgs-title">单元图片</div> -->
<div class="unit-imgs"> <div class="unit-imgs">
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true" <SlideImageGroup
v-if="unitValue.imagesVo.length > 3"> :imgList="unitValue.imagesVo"
:needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.middleUrl || item.url)" alt="" <img
style="width: 100%; height: 100%; object-fit: contain" /> :src="$getFullUrl(item.middleUrl || item.url)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
"
/>
</template> </template>
</SlideImageGroup> </SlideImageGroup>
<el-row v-if=" <el-row
v-if="
unitValue.imagesVo.length > 0 && unitValue.imagesVo.length > 0 &&
unitValue.imagesVo.length < 4 unitValue.imagesVo.length < 4
" :gutter="10"> "
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index" :gutter="10"
:span="24 / unitValue.imagesVo.length" style="height: 300px;"> >
<img :src="$getFullUrl(item.middleUrl || item.url)" alt="" style=" <el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.middleUrl || item.url)"
alt=""
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
cursor: pointer; cursor: pointer;
" @click="handelPreviewImages(unitValue.imagesVo, index)" /> "
@click="
handelPreviewImages(unitValue.imagesVo, index)
"
/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<div class="unit-content_crs" v-if=" <div
class="unit-content_crs"
v-if="
unitValue.culturalRelics && unitValue.culturalRelics &&
unitValue.culturalRelics.length > 0 unitValue.culturalRelics.length > 0
"> "
>
<div class="imgs-title">相关文物</div> <div class="imgs-title">相关文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics"> <SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImageMiddleUrl || item.faceImagePressUrl)" alt="" style=" <img
:src="
$getFullUrl(
item.faceImageMiddleUrl || item.faceImagePressUrl
)
"
alt=""
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
cursor: pointer; cursor: pointer;
" @click="handleToCr(item)" /> "
@click="handleToCr(item)"
/>
</template> </template>
<template slot-scope="{ item }" slot="info"> <template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
...@@ -142,35 +230,41 @@ ...@@ -142,35 +230,41 @@
</div> </div>
</div> </div>
<div class=" <div
e-video class="e-video wow animate__animated animate__fadeInRight"
wow v-if="currentVideo.url"
animate__animated animate__fadeInRight >
" v-if="currentVideo.url"> <div class="video-title">展览视频</div>
<div class="video-title">
展览视频
</div>
<div class="video-content"> <div class="video-content">
<video-player
<video-player v-if="currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player> v-if="currentVideo.url"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
<div class="video-names"> <div class="video-names">
<div :class="{ <div
'video-item': true, active: currentVideo && item.fileId == currentVideo.fileId :class="{
}" v-for="(item, index) in displayDetail.videosVo" :key="index" @click="handleChangeCurrentVideo(item)"> 'video-item': true,
{{ active: currentVideo && item.fileId == currentVideo.fileId,
item.name.split(".")[0] }"
}} v-for="(item, index) in displayDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
{{ item.name.split(".")[0] }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="e-virtual" v-if="displayDetail.virtualVo.length > 0"> <div class="e-virtual" v-if="displayDetail.virtualVo.length > 0">
<div class="virtual-title">虚拟展厅</div> <div class="virtual-title">虚拟展厅</div>
<div class="wrapper"> <div class="wrapper">
<div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo" <div
:key="index"> class="img-container"
@click="handleToVR(item)"
v-for="(item, index) in displayDetail.virtualVo"
:key="index"
>
<img :src="item.faceImagePressUrl" alt="" /> <img :src="item.faceImagePressUrl" alt="" />
<div class="modal"> <div class="modal">
<svg-icon icon-class="360"></svg-icon> <svg-icon icon-class="360"></svg-icon>
...@@ -180,29 +274,41 @@ ...@@ -180,29 +274,41 @@
</div> </div>
</div> </div>
<div class="e-lts" v-if=" <div
displayDetail.literatureVo && class="e-lts"
displayDetail.literatureVo.length > 0 v-if="
"> displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<div class="lts-title">相关文献</div> <div class="lts-title">相关文献</div>
<div class="lts-content"> <div class="lts-content">
<div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index" <div
@click="handleViewLt(item)"> class="lt-item"
v-for="(item, index) in displayDetail.literatureVo"
:key="index"
@click="handleViewLt(item)"
>
<span class="lt-order">[{{ index + 1 }}]</span> <span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span> <span class="lt-authors" v-if="item.authors"
>{{ item.authors }}.</span
>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span> <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span> <span class="lt-source" v-if="item.source"
>{{ item.source }}.</span
>
<span class="lt-date" v-if="item.date">{{ item.date }}</span> <span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-image-viewer
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" v-if="imgViewerVisible"
:initial-index="initialIndex" /> :on-close="closeImgViewer"
:url-list="imgList"
:initial-index="initialIndex"
/>
</div> </div>
</template> </template>
...@@ -274,7 +380,7 @@ export default { ...@@ -274,7 +380,7 @@ export default {
}, },
currentUnit: null, currentUnit: null,
currentVideo: {}, currentVideo: {},
initialIndex: 0 initialIndex: 0,
}; };
}, },
computed: { computed: {
...@@ -287,11 +393,11 @@ export default { ...@@ -287,11 +393,11 @@ export default {
// let units = this.$refs. // let units = this.$refs.
}, },
updated() { updated() {
let p = document.getElementsByTagName('p') let p = document.getElementsByTagName("p");
let arr = [...p] let arr = [...p];
arr.map(item => { arr.map((item) => {
item.style.color = "#fff" item.style.color = "#fff";
}) });
}, },
methods: { methods: {
async loadDetail() { async loadDetail() {
...@@ -393,7 +499,7 @@ export default { ...@@ -393,7 +499,7 @@ export default {
handelPreviewImages(images, index) { handelPreviewImages(images, index) {
this.imgViewerVisible = true; this.imgViewerVisible = true;
this.imgList = images.map((item) => this.$getFullUrl(item.url)); this.imgList = images.map((item) => this.$getFullUrl(item.url));
this.initialIndex = index this.initialIndex = index;
}, },
closeImgViewer() { closeImgViewer() {
...@@ -446,8 +552,7 @@ export default { ...@@ -446,8 +552,7 @@ export default {
}; };
</script> </script>
<style lang="scss">
<style lang="scss" >
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
...@@ -459,14 +564,14 @@ export default { ...@@ -459,14 +564,14 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$themeColor: #a30e0c; $deepBlue: #a30e0c;
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: $themeColor; background-color: $deepBlue;
min-height: 300px; min-height: 300px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -521,7 +626,6 @@ $themeColor: #a30e0c; ...@@ -521,7 +626,6 @@ $themeColor: #a30e0c;
top: -$nav-height; top: -$nav-height;
height: 100%; height: 100%;
.content { .content {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -533,7 +637,6 @@ $themeColor: #a30e0c; ...@@ -533,7 +637,6 @@ $themeColor: #a30e0c;
display: flex; display: flex;
justify-content: center; justify-content: center;
.slide-item { .slide-item {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -559,12 +662,11 @@ $themeColor: #a30e0c; ...@@ -559,12 +662,11 @@ $themeColor: #a30e0c;
font-weight: 800; font-weight: 800;
transform: translateY(-72px); transform: translateY(-72px);
font-size: 26px !important; font-size: 26px !important;
background-color: #1C4E52; background-color: #1c4e52;
} }
.swiper-button-next { .swiper-button-next {
transform: translateX(-100px); transform: translateX(-100px);
} }
.swiper-button-prev { .swiper-button-prev {
...@@ -576,7 +678,7 @@ $themeColor: #a30e0c; ...@@ -576,7 +678,7 @@ $themeColor: #a30e0c;
background-image: url(@/assets/imgs/display/ch/pattern2.png); background-image: url(@/assets/imgs/display/ch/pattern2.png);
background-size: 100%; background-size: 100%;
width: 100%; width: 100%;
background-color: #1C4E52; background-color: #1c4e52;
padding-bottom: 73px; padding-bottom: 73px;
// height:4818px ; // height:4818px ;
} }
...@@ -623,7 +725,7 @@ $themeColor: #a30e0c; ...@@ -623,7 +725,7 @@ $themeColor: #a30e0c;
min-height: 572px; min-height: 572px;
color: #fff; color: #fff;
&>.title { & > .title {
font-size: 46px; font-size: 46px;
font-family: PingFang; font-family: PingFang;
font-weight: 800; font-weight: 800;
...@@ -635,7 +737,7 @@ $themeColor: #a30e0c; ...@@ -635,7 +737,7 @@ $themeColor: #a30e0c;
justify-content: center; justify-content: center;
} }
&>.text { & > .text {
font-size: 24px; font-size: 24px;
font-family: PingFang; font-family: PingFang;
font-weight: 500; font-weight: 500;
...@@ -734,7 +836,6 @@ $themeColor: #a30e0c; ...@@ -734,7 +836,6 @@ $themeColor: #a30e0c;
color: #fff; color: #fff;
.unit-content-container { .unit-content-container {
.unit-content-title { .unit-content-title {
font-family: PingFang; font-family: PingFang;
line-height: 48px; line-height: 48px;
...@@ -843,12 +944,12 @@ $themeColor: #a30e0c; ...@@ -843,12 +944,12 @@ $themeColor: #a30e0c;
display: flex; display: flex;
align-content: center; align-content: center;
padding: 8px 10px; padding: 8px 10px;
// border: 1px solid $themeColor; // border: 1px solid $deepBlue;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $themeColor; color: $deepBlue;
} }
.svg-icon { .svg-icon {
...@@ -868,7 +969,6 @@ $themeColor: #a30e0c; ...@@ -868,7 +969,6 @@ $themeColor: #a30e0c;
width: 100%; width: 100%;
padding: 0 13%; padding: 0 13%;
.video-title { .video-title {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -903,7 +1003,7 @@ $themeColor: #a30e0c; ...@@ -903,7 +1003,7 @@ $themeColor: #a30e0c;
} }
.active { .active {
color: $themeSecondaryColor; color: $yellow;
} }
} }
...@@ -917,8 +1017,6 @@ $themeColor: #a30e0c; ...@@ -917,8 +1017,6 @@ $themeColor: #a30e0c;
} }
} }
} }
} }
.e-virtual { .e-virtual {
...@@ -1001,7 +1099,6 @@ $themeColor: #a30e0c; ...@@ -1001,7 +1099,6 @@ $themeColor: #a30e0c;
} }
} }
/**关联文献 */ /**关联文献 */
.e-lts { .e-lts {
color: #333; color: #333;
...@@ -1035,7 +1132,7 @@ $themeColor: #a30e0c; ...@@ -1035,7 +1132,7 @@ $themeColor: #a30e0c;
color: #dbb645; color: #dbb645;
} }
&>span { & > span {
padding: 0 4px; padding: 0 4px;
} }
} }
...@@ -1043,7 +1140,6 @@ $themeColor: #a30e0c; ...@@ -1043,7 +1140,6 @@ $themeColor: #a30e0c;
} }
} }
::v-deep .el-carousel { ::v-deep .el-carousel {
height: 100%; height: 100%;
} }
...@@ -1052,7 +1148,6 @@ $themeColor: #a30e0c; ...@@ -1052,7 +1148,6 @@ $themeColor: #a30e0c;
height: 100%; height: 100%;
} }
@keyframes audioRotate { @keyframes audioRotate {
0% { 0% {
transform: rotateZ(0deg); transform: rotateZ(0deg);
......
src/views/display/components/NormalStyle.vue
浏览文件 @ 9cb5fc3a
...@@ -649,7 +649,7 @@ export default { ...@@ -649,7 +649,7 @@ export default {
}; };
</script> </script>
<style lang="scss" > <style lang="scss">
// 自定义分页器样式 // 自定义分页器样式
#page { #page {
height: 30px; height: 30px;
...@@ -670,7 +670,6 @@ export default { ...@@ -670,7 +670,6 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
...@@ -711,19 +710,19 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -711,19 +710,19 @@ $titleFontFamily: SourceHanSerifCN-Bold;
i { i {
margin-right: 10px; margin-right: 10px;
font-size: 28px; font-size: 28px;
color: $themeColor; color: $deepBlue;
} }
.svg-icon { .svg-icon {
font-size: 32px; font-size: 32px;
color: $themeColor; color: $deepBlue;
margin-right: 10px; margin-right: 10px;
} }
.title { .title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $themeColor; color: $deepBlue;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
} }
} }
...@@ -934,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -934,7 +933,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.collect { .collect {
color: $themeColor; color: $deepBlue;
} }
} }
} }
...@@ -949,7 +948,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -949,7 +948,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
transform-origin: center center; transform-origin: center center;
border: 2px solid $themeColor; border: 2px solid $deepBlue;
padding: 10px; padding: 10px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
...@@ -963,7 +962,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -963,7 +962,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.svg-icon { .svg-icon {
color: $themeColor; color: $deepBlue;
font-size: 80px; font-size: 80px;
} }
...@@ -984,14 +983,14 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -984,14 +983,14 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.tab-item { .tab-item {
height: 100%; height: 100%;
margin-right: 40px; margin-right: 40px;
color: $themeColor; color: $deepBlue;
font-size: 24px; font-size: 24px;
font-family: $titleFontFamily; font-family: $titleFontFamily;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
color: $themeColor; color: $deepBlue;
&::after { &::after {
display: inline-block; display: inline-block;
...@@ -1004,7 +1003,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1004,7 +1003,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.active { .active {
color: $themeColor; color: $deepBlue;
&::after { &::after {
display: inline-block; display: inline-block;
...@@ -1019,7 +1018,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1019,7 +1018,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
left: 0; left: 0;
background-color: $themeColor; background-color: $deepBlue;
} }
} }
...@@ -1033,7 +1032,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1033,7 +1032,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.intro-title { .intro-title {
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
color: $themeColor; color: $deepBlue;
font-family: "SourceHanSerifCN-Bold"; font-family: "SourceHanSerifCN-Bold";
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1056,7 +1055,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1056,7 +1055,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.left-box { .left-box {
width: 60px; width: 60px;
background-color: $themeColor; background-color: $deepBlue;
min-height: 200px; min-height: 200px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -1072,7 +1071,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1072,7 +1071,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
flex: 1; flex: 1;
text-indent: 34px; text-indent: 34px;
padding: 16px 32px; padding: 16px 32px;
background-color: rgba($themeColor, 10%); background-color: rgba($deepBlue, 10%);
} }
} }
...@@ -1087,7 +1086,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1087,7 +1086,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// justify-content: center; // justify-content: center;
align-items: center; align-items: center;
font-size: 24px; font-size: 24px;
color: $themeColor; color: $deepBlue;
padding: 0 40px; padding: 0 40px;
margin-bottom: 32px; margin-bottom: 32px;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
...@@ -1116,17 +1115,17 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1116,17 +1115,17 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.name { .name {
padding: 8px; padding: 8px;
// border-radius: 4px; // border-radius: 4px;
color: $themeColor; color: $deepBlue;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
border: 1px solid $themeColor; border: 1px solid $deepBlue;
font-size: 14px; font-size: 14px;
&:hover { &:hover {
background: $themeColor; background: $deepBlue;
color: $themeSecondaryColor; color: $yellow;
} }
&:not(&:last-child) { &:not(&:last-child) {
border-bottom: none; border-bottom: none;
...@@ -1135,8 +1134,8 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1135,8 +1134,8 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.active { .active {
background: $themeColor; background: $deepBlue;
color: $themeSecondaryColor; color: $yellow;
} }
} }
} }
...@@ -1157,7 +1156,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1157,7 +1156,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// display: flex; // display: flex;
// justify-content: center; // justify-content: center;
// align-items: center; // align-items: center;
// color: $themeColor; // color: $deepBlue;
// font-weight: bolder; // font-weight: bolder;
// font-size: 28px; // font-size: 28px;
// transform: translateY(-6px); // transform: translateY(-6px);
...@@ -1169,18 +1168,18 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1169,18 +1168,18 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// .slide-item { // .slide-item {
// padding: 8px; // padding: 8px;
// border-radius: 4px; // border-radius: 4px;
// color: $themeColor; // color: $deepBlue;
// cursor: pointer; // cursor: pointer;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// overflow: hidden; // overflow: hidden;
// width: 100%; // width: 100%;
// white-space: nowrap; // white-space: nowrap;
// border: 1px solid $themeColor; // border: 1px solid $deepBlue;
// font-size: 14px; // font-size: 14px;
// } // }
// .active { // .active {
// background: $themeColor; // background: $deepBlue;
// color: #fff; // color: #fff;
// } // }
// } // }
...@@ -1273,7 +1272,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1273,7 +1272,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 26px; font-size: 26px;
color: $themeColor; color: $deepBlue;
font-family: SourceHanSerifCN-Bold; font-family: SourceHanSerifCN-Bold;
i { i {
...@@ -1328,7 +1327,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1328,7 +1327,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
} }
.lt-name { .lt-name {
color: $themeColor; color: $deepBlue;
cursor: pointer; cursor: pointer;
} }
} }
...@@ -1345,8 +1344,6 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1345,8 +1344,6 @@ $titleFontFamily: SourceHanSerifCN-Bold;
height: 100%; height: 100%;
} }
@keyframes filmMoveLeft { @keyframes filmMoveLeft {
0% { 0% {
transform: translateX(0); transform: translateX(0);
......
src/views/display/components/NormalStyleUnit.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div class="unit-container"> <div class="unit-container">
<div class="unit-content-menu"> <div class="unit-content-menu">
<swiper class="swiper unit-swiper" :options="unitSwiperOption" ref="videoSwiper"> <swiper
<swiper-slide :class="[ class="swiper unit-swiper"
'slide-item', :options="unitSwiperOption"
item.euId == curUnit.euId ? 'active' : '', ref="videoSwiper"
]" v-for="(item, index) in exhibitionUnits" :key="index" @click.native="handleClickUnit(item)"> >
<swiper-slide
:class="['slide-item', item.euId == curUnit.euId ? 'active' : '']"
v-for="(item, index) in exhibitionUnits"
:key="index"
@click.native="handleClickUnit(item)"
>
{{ item.title }} {{ item.title }}
</swiper-slide> </swiper-slide>
</swiper> </swiper>
<div class="swiper-button-prev unit-swiper-button-prev" slot="button-prev"> <div
class="swiper-button-prev unit-swiper-button-prev"
slot="button-prev"
>
<i class="el-icon-arrow-left"></i> <i class="el-icon-arrow-left"></i>
</div> </div>
<div class="swiper-button-next unit-swiper-button-next" slot="button-next"> <div
class="swiper-button-next unit-swiper-button-next"
slot="button-next"
>
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</div> </div>
</div> </div>
<div class="unit-content"> <div class="unit-content">
<div class="unit-content-container" v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo" <div
:key="unitTitle"> class="unit-content-container"
v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
:key="unitTitle"
>
<div class="unit-content-title"> <div class="unit-content-title">
{{ unitTitle }} {{ unitTitle }}
</div> </div>
<div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="unitValue.intro"></div> <div
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"> class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="unitValue.intro"
></div>
<div
class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<!-- <div class="imgs-title">单元图片</div> --> <!-- <div class="imgs-title">单元图片</div> -->
<div class="unit-imgs"> <div class="unit-imgs">
<SlideImageGroup
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true" :imgList="unitValue.imagesVo"
v-if="unitValue.imagesVo.length > 3"> :needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.middleUrl)" alt="" <img
style="width: 100%; height: 100%; object-fit: contain" /> :src="$getFullUrl(item.middleUrl)"
alt=""
style="width: 100%; height: 100%; object-fit: contain"
/>
</template> </template>
</SlideImageGroup> </SlideImageGroup>
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10"> <el-row
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index" v-if="
:span="24 / unitValue.imagesVo.length" style="height:300px"> unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4
<img :src="$getFullUrl(item.middleUrl)" alt="" "
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;" :gutter="10"
@click="handelPreviewImages(unitValue.imagesVo)" /> >
<el-col
v-for="(item, index) in unitValue.imagesVo"
:key="index"
:span="24 / unitValue.imagesVo.length"
style="height: 300px"
>
<img
:src="$getFullUrl(item.middleUrl)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
"
@click="handelPreviewImages(unitValue.imagesVo)"
/>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
<div class="unit-content_crs" v-if=" <div
unitValue.culturalRelics && unitValue.culturalRelics.length > 0 class="unit-content_crs"
"> v-if="unitValue.culturalRelics && unitValue.culturalRelics.length > 0"
>
<div class="imgs-title">单元文物</div> <div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics"> <SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img"> <template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImageMiddleUrl)" alt="" style=" <img
:src="$getFullUrl(item.faceImageMiddleUrl)"
alt=""
style="
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
cursor: pointer; cursor: pointer;
" @click="handleToCr(item)" /> "
@click="handleToCr(item)"
/>
</template> </template>
<template slot-scope="{ item }" slot="info"> <template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
...@@ -84,12 +133,12 @@ export default { ...@@ -84,12 +133,12 @@ export default {
props: { props: {
curUnit: { curUnit: {
type: Object, type: Object,
default: null default: null,
}, },
exhibitionUnits: { exhibitionUnits: {
type: Array, type: Array,
default: null default: null,
} },
}, },
data() { data() {
...@@ -104,30 +153,30 @@ export default { ...@@ -104,30 +153,30 @@ export default {
prevEl: ".unit-swiper-button-prev", prevEl: ".unit-swiper-button-prev",
}, },
}, },
} };
}, },
updated() { updated() {
let p = document.getElementsByTagName('p') let p = document.getElementsByTagName("p");
let arr = [...p] let arr = [...p];
arr.map(item => { arr.map((item) => {
item.style.color = "#333" item.style.color = "#333";
}) });
}, },
methods: { methods: {
handleClickUnit(item) { handleClickUnit(item) {
this.$emit('handleClickUnit', item) this.$emit("handleClickUnit", item);
}, },
handelPreviewImages(images) { handelPreviewImages(images) {
this.$emit('handelPreviewImages', images) this.$emit("handelPreviewImages", images);
}, },
handleToCr(item) { handleToCr(item) {
this.$emit('handleToCr', item) this.$emit("handleToCr", item);
} },
} },
} };
</script> </script>
<style lang="scss" > <style lang="scss">
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
...@@ -141,7 +190,6 @@ export default { ...@@ -141,7 +190,6 @@ export default {
.unit-container { .unit-container {
margin-bottom: 40px; margin-bottom: 40px;
position: relative; position: relative;
} }
.unit-content-menu { .unit-content-menu {
...@@ -155,20 +203,19 @@ export default { ...@@ -155,20 +203,19 @@ export default {
.slide-item { .slide-item {
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 4px;
color: $themeColor; color: $deepBlue;
cursor: pointer; cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
border: 1px solid $themeColor; border: 1px solid $deepBlue;
} }
.active { .active {
background: $themeColor; background: $deepBlue;
color: #fff; color: #fff;
} }
} }
} }
...@@ -182,7 +229,7 @@ export default { ...@@ -182,7 +229,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $themeColor; color: $deepBlue;
font-weight: bolder; font-weight: bolder;
font-size: 28px; font-size: 28px;
transform: translateY(-6px); transform: translateY(-6px);
...@@ -193,14 +240,12 @@ export default { ...@@ -193,14 +240,12 @@ export default {
padding: 60px 40px 0; padding: 60px 40px 0;
.unit-content-container { .unit-content-container {
.unit-content-title { .unit-content-title {
font-size: 20px; font-size: 20px;
line-height: 2; line-height: 2;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 48px; margin-top: 48px;
} }
.unit-content_intro { .unit-content_intro {
...@@ -213,16 +258,13 @@ export default { ...@@ -213,16 +258,13 @@ export default {
} }
&:nth-child(1) { &:nth-child(1) {
.unit-content-title { .unit-content-title {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
} }
} }
} }
.unit-content_images { .unit-content_images {
position: relative; position: relative;
...@@ -303,12 +345,12 @@ export default { ...@@ -303,12 +345,12 @@ export default {
display: flex; display: flex;
align-content: center; align-content: center;
padding: 8px 10px; padding: 8px 10px;
// border: 1px solid $themeColor; // border: 1px solid $deepBlue;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $themeColor; color: $deepBlue;
} }
.svg-icon { .svg-icon {
......
src/views/display/components/RedStyle.vue
浏览文件 @ 9cb5fc3a
...@@ -546,8 +546,7 @@ export default { ...@@ -546,8 +546,7 @@ export default {
}; };
</script> </script>
<style lang="scss">
<style lang="scss" >
.unit-content_intro { .unit-content_intro {
p { p {
// color: red !important; // color: red !important;
...@@ -559,14 +558,14 @@ export default { ...@@ -559,14 +558,14 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$themeColor: #a30e0c; $deepBlue: #a30e0c;
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
.custom-title { .custom-title {
width: 50px; width: 50px;
background-color: $themeColor; background-color: $deepBlue;
min-height: 300px; min-height: 300px;
color: #fff; color: #fff;
font-size: 28px; font-size: 28px;
...@@ -950,12 +949,12 @@ $themeColor: #a30e0c; ...@@ -950,12 +949,12 @@ $themeColor: #a30e0c;
display: flex; display: flex;
align-content: center; align-content: center;
padding: 8px 10px; padding: 8px 10px;
// border: 1px solid $themeColor; // border: 1px solid $deepBlue;
color: #666; color: #666;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $themeColor; color: $deepBlue;
} }
.svg-icon { .svg-icon {
...@@ -1008,7 +1007,7 @@ $themeColor: #a30e0c; ...@@ -1008,7 +1007,7 @@ $themeColor: #a30e0c;
} }
.active { .active {
color: $themeSecondaryColor; color: $yellow;
} }
} }
......
src/views/display/index.vue
浏览文件 @ 9cb5fc3a
...@@ -303,13 +303,13 @@ export default { ...@@ -303,13 +303,13 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: $themeColor; // background-color: $deepBlue;
// color: #fff; // color: #fff;
.type-group { .type-group {
...@@ -333,16 +333,16 @@ $text-indent: 16px; ...@@ -333,16 +333,16 @@ $text-indent: 16px;
line-height: 46px; line-height: 46px;
// margin-right: 16px; // margin-right: 16px;
cursor: pointer; cursor: pointer;
// border: 1px solid $themeSecondaryColor; // border: 1px solid $yellow;
color: #999; color: #999;
&:hover { &:hover {
color: $themeColor; color: $deepBlue;
} }
} }
.active { .active {
background: $themeSecondaryColor; background: $yellow;
color: #fff; color: #fff;
} }
.search-item { .search-item {
...@@ -425,7 +425,7 @@ $text-indent: 16px; ...@@ -425,7 +425,7 @@ $text-indent: 16px;
.boutique-tag { .boutique-tag {
width: 40px; width: 40px;
height: 40px; height: 40px;
background: $themeSecondaryColor; background: $yellow;
color: #fff; color: #fff;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -463,7 +463,7 @@ $text-indent: 16px; ...@@ -463,7 +463,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $themeColor; color: $deepBlue;
margin-bottom: 18px; margin-bottom: 18px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -561,7 +561,7 @@ $text-indent: 16px; ...@@ -561,7 +561,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: $themeColor; background: $deepBlue;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 9cb5fc3a
...@@ -134,7 +134,7 @@ export default { ...@@ -134,7 +134,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
.home-cr { .home-cr {
// background-image: url("@/assets/imgs/home/display-bg.png"); // background-image: url("@/assets/imgs/home/display-bg.png");
background-size: cover; background-size: cover;
...@@ -213,10 +213,10 @@ $blue: $themeColor; ...@@ -213,10 +213,10 @@ $blue: $themeColor;
} }
&:hover { &:hover {
background-color: transparent; background-color: transparent;
.detail{ .detail {
opacity: 1; opacity: 1;
} }
.title{ .title {
opacity: 0; opacity: 0;
} }
} }
......
src/views/home/components/Virtural.vue
浏览文件 @ 9cb5fc3a
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
<template> <template>
<div class="home-virtural"> <div class="home-virtural">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="title wow animate__animated animate__fadeInUp" data-wow-offset="200"> <div
class="title wow animate__animated animate__fadeInUp"
data-wow-offset="200"
>
<div class="ch">虚拟展厅</div> <div class="ch">虚拟展厅</div>
<div class="en">Virtual Exhibition Hall</div> <div class="en">Virtual Exhibition Hall</div>
</div> </div>
...@@ -21,12 +24,21 @@ ...@@ -21,12 +24,21 @@
<el-col :span="18"> <el-col :span="18">
<div class="virtual-items wow animate__animated animate__fadeInRight"> <div class="virtual-items wow animate__animated animate__fadeInRight">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12" v-for="(item, index) in list" :key="index" @click.native="handleClick(item)" <el-col
@mouseenter.native="handleMouseEnter(item)" @mouseleave.native="handleMouseLeave()"> :span="12"
v-for="(item, index) in list"
:key="index"
@click.native="handleClick(item)"
@mouseenter.native="handleMouseEnter(item)"
@mouseleave.native="handleMouseLeave()"
>
<div class="item"> <div class="item">
<img :src=" <img
:src="
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
" alt="" /> "
alt=""
/>
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
</div> </div>
</el-col> </el-col>
...@@ -69,7 +81,7 @@ export default { ...@@ -69,7 +81,7 @@ export default {
data() { data() {
return { return {
list: [], list: [],
currentItem: null currentItem: null,
}; };
}, },
mounted() { mounted() {
...@@ -81,7 +93,7 @@ export default { ...@@ -81,7 +93,7 @@ export default {
if (res.code == 0) { if (res.code == 0) {
this.list = res.data; this.list = res.data;
this.currentItem = this.list[0] this.currentItem = this.list[0];
console.log(this.currentItem); console.log(this.currentItem);
} }
}, },
...@@ -92,19 +104,18 @@ export default { ...@@ -92,19 +104,18 @@ export default {
}, 1000); }, 1000);
}, },
handleMouseEnter(item) { handleMouseEnter(item) {
this.currentItem = item this.currentItem = item;
}, },
handleMouseLeave() { handleMouseLeave() {
// this.currentItem = null // this.currentItem = null
} },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
.home-virtural { .home-virtural {
display: flex; display: flex;
...@@ -187,7 +198,6 @@ $blue: $themeColor; ...@@ -187,7 +198,6 @@ $blue: $themeColor;
.svg-icon { .svg-icon {
font-size: 20px; font-size: 20px;
margin-right: 4px; margin-right: 4px;
} }
} }
} }
...@@ -199,7 +209,6 @@ $blue: $themeColor; ...@@ -199,7 +209,6 @@ $blue: $themeColor;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 25vh; height: 25vh;
...@@ -226,7 +235,6 @@ $blue: $themeColor; ...@@ -226,7 +235,6 @@ $blue: $themeColor;
.active, .active,
.item:hover { .item:hover {
img { img {
transform: scale(1.1); transform: scale(1.1);
filter: grayscale(0); filter: grayscale(0);
......
src/views/museum/Detail.vue
浏览文件 @ 9cb5fc3a
...@@ -150,7 +150,7 @@ export default { ...@@ -150,7 +150,7 @@ export default {
}, },
handelPreviewImages(items, index) { handelPreviewImages(items, index) {
this.imgList = items this.imgList = items;
const $viewer = this.$viewerApi({ const $viewer = this.$viewerApi({
images: this.imgList, images: this.imgList,
options: { options: {
...@@ -379,7 +379,7 @@ $node-w: 700px; ...@@ -379,7 +379,7 @@ $node-w: 700px;
&:hover, &:hover,
&.active { &.active {
cursor: pointer; cursor: pointer;
// background-color: $themeColor; // background-color: $deepBlue;
background-image: url(@/assets/imgs/show/outer-active.png); background-image: url(@/assets/imgs/show/outer-active.png);
> span { > span {
......
src/views/museum/index.vue
浏览文件 @ 9cb5fc3a
...@@ -37,7 +37,6 @@ ...@@ -37,7 +37,6 @@
clearable clearable
> >
</el-input> </el-input>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="search-button" @click="search"> <div class="search-button" @click="search">
...@@ -76,7 +75,6 @@ ...@@ -76,7 +75,6 @@
class="face-image" class="face-image"
lazy lazy
/> />
</div> </div>
<div class="desc"> <div class="desc">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
...@@ -242,7 +240,7 @@ export default { ...@@ -242,7 +240,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
...@@ -251,23 +249,22 @@ $text-indent: 16px; ...@@ -251,23 +249,22 @@ $text-indent: 16px;
padding-bottom: 126px; padding-bottom: 126px;
background-color: #fff; background-color: #fff;
.content { .content {
.search { .search {
padding: 48px 0 32px; padding: 48px 0 32px;
} }
.search-button{ .search-button {
height: 44px; height: 44px;
} }
.total { .total {
padding-bottom:16px; padding-bottom: 16px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
font-size: 16px; font-size: 16px;
align-items: center; align-items: center;
.list-total-num { .list-total-num {
font-size: 24px; font-size: 24px;
color: $themeSecondaryColor; color: $yellow;
margin: 0 6px; margin: 0 6px;
} }
} }
...@@ -284,7 +281,7 @@ $text-indent: 16px; ...@@ -284,7 +281,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $themeColor; border: 2px solid $deepBlue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -301,7 +298,6 @@ $text-indent: 16px; ...@@ -301,7 +298,6 @@ $text-indent: 16px;
object-fit: cover; object-fit: cover;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
} }
.desc { .desc {
height: 100px; height: 100px;
...@@ -311,7 +307,7 @@ $text-indent: 16px; ...@@ -311,7 +307,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $themeColor; color: $deepBlue;
margin-bottom: 18px; margin-bottom: 18px;
} }
.deptName { .deptName {
...@@ -335,5 +331,4 @@ $text-indent: 16px; ...@@ -335,5 +331,4 @@ $text-indent: 16px;
height: 116px; height: 116px;
} }
} }
</style> </style>
src/views/personal/components/Card/index.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div <div class="container wow animate__animated animate__fadeInUp" v-if="url">
class="container wow animate__animated animate__fadeInUp"
v-if="url"
>
<div class="img"> <div class="img">
<img <img :src="url" v-if="url" width="100%" class="img" lazy />
:src="url"
v-if="url"
width="100%"
class="img"
lazy
/>
<img <img
v-else v-else
src="@/assets/404_images/no-pic.png" src="@/assets/404_images/no-pic.png"
...@@ -43,8 +34,8 @@ export default { ...@@ -43,8 +34,8 @@ export default {
}; };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
.container { .container {
border: 1px solid #f1f1f1; border: 1px solid #f1f1f1;
height: 300px; height: 300px;
......
src/views/personal/components/Info.vue
浏览文件 @ 9cb5fc3a
...@@ -264,7 +264,7 @@ export default { ...@@ -264,7 +264,7 @@ export default {
} }
::v-deep .el-descriptions__extra { ::v-deep .el-descriptions__extra {
.el-button { .el-button {
background-color: $themeColor; background-color: $deepBlue;
border-radius: 0; border-radius: 0;
border: none; border: none;
} }
...@@ -300,7 +300,7 @@ export default { ...@@ -300,7 +300,7 @@ export default {
.edit-button { .edit-button {
width: 160px; width: 160px;
height: 50px; height: 50px;
background-color: $themeColor; background-color: $deepBlue;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/views/personal/index.vue
浏览文件 @ 9cb5fc3a
...@@ -52,8 +52,8 @@ export default { ...@@ -52,8 +52,8 @@ export default {
}; };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
.personal { .personal {
padding: 40px 0; padding: 40px 0;
background-color: #fff; background-color: #fff;
...@@ -105,13 +105,13 @@ $blue: $themeColor; ...@@ -105,13 +105,13 @@ $blue: $themeColor;
} }
::v-deep .el-tabs__active-bar { ::v-deep .el-tabs__active-bar {
background-color: $themeColor; background-color: $deepBlue;
} }
::v-deep { ::v-deep {
.el-tabs__item:hover, .el-tabs__item:hover,
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: $themeColor; color: $deepBlue;
} }
} }
::v-deep .el-descriptions { ::v-deep .el-descriptions {
......
src/views/register/index.vue
浏览文件 @ 9cb5fc3a
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
<script> <script>
import { register } from "@/api/user"; import { register } from "@/api/user";
import { checkUserName, checkPhone } from "@/utils/validate"; import { checkUserName, checkPhone } from "@/utils/validate";
import md5 from 'js-md5' import md5 from "js-md5";
export default { export default {
data() { data() {
var validatePass = (rule, value, callback) => { var validatePass = (rule, value, callback) => {
...@@ -215,7 +215,7 @@ export default { ...@@ -215,7 +215,7 @@ export default {
nickName, nickName,
status: 1, status: 1,
}; };
params.password = md5(params.password) params.password = md5(params.password);
register(params) register(params)
.then((res) => { .then((res) => {
if (res.code == "0") { if (res.code == "0") {
...@@ -260,7 +260,7 @@ export default { ...@@ -260,7 +260,7 @@ export default {
.wrapper { .wrapper {
width: 100%; width: 100%;
// background-image: url("@/assets/imgs/home/display-bg.png"); // background-image: url("@/assets/imgs/home/display-bg.png");
// background-color: rgba($color: $themeColor, $alpha: 0.2); // background-color: rgba($color: $deepBlue, $alpha: 0.2);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
background-position: center; background-position: center;
...@@ -312,7 +312,7 @@ export default { ...@@ -312,7 +312,7 @@ export default {
border-radius: 0px; border-radius: 0px;
&:last-child { &:last-child {
width: 160px; width: 160px;
background-color: $themeColor; background-color: $deepBlue;
&:hover { &:hover {
filter: brightness(0.9); filter: brightness(0.9);
} }
......
src/views/virtual/index.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div class="display"> <div class="display">
<ListBanner title="虚拟展厅" unit="个" :num="list.total"/> <ListBanner title="虚拟展厅" unit="个" :num="list.total" />
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<div class="search wow animate__animated animate__fadeIn"> <div class="search wow animate__animated animate__fadeIn">
...@@ -110,7 +110,6 @@ export default { ...@@ -110,7 +110,6 @@ export default {
value: "code", value: "code",
label: "name", label: "name",
children: "children", children: "children",
}, },
culturalRelicYears: [], culturalRelicYears: [],
onlyShow3d: false, onlyShow3d: false,
...@@ -227,11 +226,11 @@ export default { ...@@ -227,11 +226,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$blue: $themeColor; $blue: $deepBlue;
$text-indent: 16px; $text-indent: 16px;
.display { .display {
width: 100%; width: 100%;
// background-color: $themeColor; // background-color: $deepBlue;
// color: #fff; // color: #fff;
.content-wrapper { .content-wrapper {
padding-top: 60px; padding-top: 60px;
...@@ -302,7 +301,7 @@ $text-indent: 16px; ...@@ -302,7 +301,7 @@ $text-indent: 16px;
cursor: pointer; cursor: pointer;
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
border: 2px solid $themeColor; border: 2px solid $deepBlue;
.face-image { .face-image {
transform: scale(1.2); transform: scale(1.2);
} }
...@@ -362,7 +361,7 @@ $text-indent: 16px; ...@@ -362,7 +361,7 @@ $text-indent: 16px;
.name { .name {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: $themeColor; color: $deepBlue;
margin-bottom: 18px; margin-bottom: 18px;
} }
.deptName { .deptName {
...@@ -425,7 +424,7 @@ $text-indent: 16px; ...@@ -425,7 +424,7 @@ $text-indent: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; border-radius: 50%;
background: $themeColor; background: $deepBlue;
min-width: 0; min-width: 0;
margin: 0 10px; margin: 0 10px;
color: #b7b7b7; color: #b7b7b7;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论