Skip to content

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

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

上级 1d51c628
隐藏空白字符变更
内嵌 并排
正在显示 包含 2504 行增加 和 2302 行删除
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;
$defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; $defaultFontFamily: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
\ No newline at end of file
src/components/AudioPlayer/NormalPlayer.vue
浏览文件 @ 9cb5fc3a
...@@ -202,7 +202,7 @@ export default { ...@@ -202,7 +202,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.volume { .volume {
position: relative; position: relative;
.volume-progress { .volume-progress {
...@@ -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> >
<el-breadcrumb-item
v-for="(item, index) in list"
:key="index"
:to="{ path: item.path }"
>{{ item.name }}</el-breadcrumb-item
>
</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: { ],
type: Boolean, },
default: false isLight: {
} type: Boolean,
} default: false,
} },
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-breadcrumb__inner { ::v-deep .el-breadcrumb__inner {
color: #666; color: #666;
font-size: 18px; font-size: 18px;
} }
::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 {
color: #b5800a; color: #b5800a;
} }
.isLight { .isLight {
::v-deep .el-breadcrumb__inner { ::v-deep .el-breadcrumb__inner {
color: #ccc; color: #ccc;
font-size: 18px; font-size: 18px;
} }
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #fff;
}
::v-deep .el-breadcrumb__inner.is-link:hover { ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #b5800a; color: #fff;
} }
::v-deep .el-breadcrumb__inner.is-link:hover {
color: #b5800a;
}
} }
</style> </style>
\ No newline at end of file
src/components/Footer/index.vue
浏览文件 @ 9cb5fc3a
<!-- --> <!-- -->
<template> <template>
<div :class="{ <div
footer: true, :class="{
//isHome:isHome, footer: true,
isChStyle: navbarStyle == '2', //isHome:isHome,
isRedStyle: navbarStyle == '3', isChStyle: navbarStyle == '2',
isSDCS: navbarStyle == '4', isRedStyle: navbarStyle == '3',
isSMGZ: navbarStyle == '5', isSDCS: navbarStyle == '4',
isJYYCC: navbarStyle == '6', isSMGZ: navbarStyle == '5',
isYLGDYW: navbarStyle == '7', isJYYCC: navbarStyle == '6',
}"> 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
color, class="operations"
}"> :style="{
color,
}"
>
<span class="operation-item"> <span class="operation-item">
<svg-icon icon-class="view" :style="{ <svg-icon
fontSize: iconSize + 'px', icon-class="view"
color, :style="{
}"></svg-icon> fontSize: iconSize + 'px',
color,
}"
></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
fontSize: iconSize + 'px', @click="handleLike"
color: info.loveCountStatus ? selectColor : color, :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'"
}"></svg-icon> :style="{
fontSize: iconSize + 'px',
color: info.loveCountStatus ? selectColor : color,
}"
></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
fontSize: iconSize + 'px', :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
color: info.collectCountStatus ? selectColor : color, :style="{
}"></svg-icon> fontSize: iconSize + 'px',
color: info.collectCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{ <span>{{
formatNum(info.collectCount) == 0 formatNum(info.collectCount) == 0
? "收藏" ? "收藏"
: formatNum(info.collectCount) : formatNum(info.collectCount)
}}</span> }}</span>
</span> </span>
<span class="operation-item" @click="handleShare"> <span class="operation-item" @click="handleShare">
<svg-icon icon-class="share2" :style="{ <svg-icon
fontSize: iconSize + 'px', icon-class="share2"
color, :style="{
}"></svg-icon> fontSize: iconSize + 'px',
color,
}"
></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>
\ No newline at end of file
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" />
...@@ -17,7 +29,6 @@ ...@@ -17,7 +29,6 @@
<span>查看大图</span> <span>查看大图</span>
</div> --> </div> -->
</swiper-slide> </swiper-slide>
<!--分页器。如果放置在swiper外面，需要自定义样式。--> <!--分页器。如果放置在swiper外面，需要自定义样式。-->
</swiper> </swiper>
...@@ -28,13 +39,16 @@ ...@@ -28,13 +39,16 @@
<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>
<script> <script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css"; import "swiper/dist/css/swiper.css";
...@@ -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;
...@@ -98,12 +112,12 @@ export default { ...@@ -98,12 +112,12 @@ export default {
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.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>
\ No newline at end of file
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,18 +116,28 @@ ...@@ -73,18 +116,28 @@
</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>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ListBanner from "@/components/ListBanner"; import ListBanner from "@/components/ListBanner";
import { getCcProductList } from "@/api/literature"; import { getCcProductList } from "@/api/literature";
...@@ -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>
\ No newline at end of file
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
<template> <template>
<div class="content"> <div class="content">
<!-- 文物图片 --> <!-- 文物图片 -->
<!-- <div class="content-item display-detail_imgs" ref="imgs"> <!-- <div class="content-item display-detail_imgs" ref="imgs">
<img <img
class="animate__animated animate__fadeInDownBig" class="animate__animated animate__fadeInDownBig"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0" v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
...@@ -15,1188 +15,1180 @@ ...@@ -15,1188 +15,1180 @@
:src="CRDetail.faceImagePressUrl" :src="CRDetail.faceImagePressUrl"
/> />
</div> --> </div> -->
<div class="wrapper wow animate__animated animate__fadeInUpBig"> <div class="wrapper wow animate__animated animate__fadeInUpBig">
<div class="inner"> <div class="inner">
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
<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 <SlideImage
animate__animated animate__fadeInLeft :imgList="CRDetail.imagesVo"
" v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
> />
<SlideImage <SlideImage
:imgList="CRDetail.imagesVo" :imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0" v-else-if="CRDetail.faceImagePressUrl"
/> />
<SlideImage </div>
:imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
v-else-if="CRDetail.faceImagePressUrl" <div
/> class="info-container-right wow animate__animated animate__fadeInRight"
>
<div class="info-title">
<span>{{ CRDetail.name }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
</div> </div>
<div class="basic-info">
<div <div class="body-item">
class=" <span class="label">
info-container-right <!-- <svg-icon icon-class="keyword"></svg-icon> -->
wow 年代</span
animate__animated animate__fadeInRight >
" <span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
>
<div class="info-title">
<span>{{ CRDetail.name }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ CRDetail.browseCount }}</span>
</div>
</div> </div>
<div class="basic-info"> <div class="body-item">
<div class="body-item"> <span class="label">
<span class="label"> <!-- <svg-icon icon-class="glww"></svg-icon> -->
<!-- <svg-icon icon-class="keyword"></svg-icon> --> 来源</span
年代</span >
> <span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
<span class="value">{{ CRDetail.yearsLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="glww"></svg-icon> -->
来源</span
>
<span class="value">{{ CRDetail.sourceWay || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zllx"></svg-icon> -->
类别</span
>
<span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zlxz"></svg-icon> -->
级别</span
>
<span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwzd"></svg-icon> -->
质地</span
>
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwcc"></svg-icon> -->
尺寸
</span>
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zldq"></svg-icon> -->
馆藏单位</span
>
<span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</div>
</div> </div>
<div class="bottom"> <div class="body-item">
<div class="tools"> <span class="label">
<ReaderOperations <!-- <svg-icon icon-class="zllx"></svg-icon> -->
:loveCount="CRDetail.loveCount" 类别</span
:loveCountStatus="Boolean(CRDetail.loveCountStatus)" >
:collectCount="CRDetail.collectCount" <span class="value">{{ CRDetail.typeLabel || "暂无" }}</span>
:collectCountStatus="Boolean(CRDetail.collectCountStatus)" </div>
:sourceId="CRDetail.crId" <div class="body-item">
:title="CRDetail.name" <span class="label">
:sourceType="'biz_cultural_relic'" <!-- <svg-icon icon-class="zlxz"></svg-icon> -->
@reload="loadDetail" 级别</span
/> >
</div> <span class="value">{{ CRDetail.levelLabel || "暂无" }}</span>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D"> </div>
<svg-icon icon-class="3d" class="icon"></svg-icon <div class="body-item">
>查看文物3D模型 <span class="label">
</div> <!-- <svg-icon icon-class="wwzd"></svg-icon> -->
质地</span
>
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="wwcc"></svg-icon> -->
尺寸
</span>
<span class="value">{{ CRDetail.detailSize || "暂无" }}</span>
</div>
<div class="body-item">
<span class="label">
<!-- <svg-icon icon-class="zldq"></svg-icon> -->
馆藏单位</span
>
<span class="value">{{ CRDetail.deptName || "暂无" }}</span>
</div>
</div>
<div class="bottom">
<div class="tools">
<ReaderOperations
:loveCount="CRDetail.loveCount"
:loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount"
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId"
:title="CRDetail.name"
:sourceType="'biz_cultural_relic'"
@reload="loadDetail"
/>
</div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon
>查看文物3D模型
</div> </div>
</div> </div>
</div>
<div
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
>
<!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
<svg-icon icon-class="music"></svg-icon>
<AudioPlayer
style="display: none"
:url="$getFullUrl(CRDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div> </div>
</div> </div>
<div <div
class="content-item display-detail_tabbar" class="audio wow animate__animated animate__fadeInRight"
id="tabbar" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
:class="{ isFixed: isFixed }" @click="handleClickAudio"
v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
> >
<span v-for="(item, index) in tabbarData" :key="index"> <!-- <img src="@/assets/imgs/display/normal/music.png" alt="" /> -->
<span <svg-icon icon-class="music"></svg-icon>
@click="handleClickTabItem(item)" <AudioPlayer
:class="[ style="display: none"
'tab-item', :url="$getFullUrl(CRDetail.audiosVo[0].url)"
currentTab && currentTab.domId == item.domId ? 'active' : '', ref="AudioPlayer"
]" />
v-html="item.name" </div>
v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0" </div>
>
</span> <div
<span class="content-item display-detail_tabbar"
@click="handleClickTabItem(item)" id="tabbar"
v-else-if=" :class="{ isFixed: isFixed }"
item.domId == 'relateRelics' && >
relateRelics && <span v-for="(item, index) in tabbarData" :key="index">
relateRelics.length > 0 <span
" @click="handleClickTabItem(item)"
v-html="item.name" :class="[
:class="[ 'tab-item',
'tab-item', currentTab && currentTab.domId == item.domId ? 'active' : '',
currentTab && currentTab.domId == item.domId ? 'active' : '', ]"
]" v-html="item.name"
> v-if="CRDetail[item.domId] && CRDetail[item.domId].length > 0"
</span> >
</span>
<span
@click="handleClickTabItem(item)"
v-else-if="
item.domId == 'relateRelics' &&
relateRelics &&
relateRelics.length > 0
"
v-html="item.name"
:class="[
'tab-item',
currentTab && currentTab.domId == item.domId ? 'active' : '',
]"
>
</span> </span>
</span>
</div>
<!-- 文物简介 -->
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
<span>文物简介</span>
</div> </div>
<div class="intro-content">
<!-- 文物简介 --> <div class="left-box">简介</div>
<div
class="content-item display-detail_intro" <div class="intro-content-container" v-html="CRDetail.intro"></div>
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-title">
<!-- <svg-icon icon-class="jianjie"></svg-icon> -->
<!-- <i class="el-icon-tickets" style="margin-right: 10px"></i> -->
<span>文物简介</span>
</div>
<div class="intro-content">
<div class="left-box">简介</div>
<div class="intro-content-container" v-html="CRDetail.intro"></div>
</div>
</div> </div>
</div>
<!-- 文物视频 -->
<div <!-- 文物视频 -->
class="content-item display-detail_videos" <div
v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0" class="content-item display-detail_videos"
id="videosVo" v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
> id="videosVo"
<div class="video-title"> >
<!-- <i class="el-icon-video-camera"></i> --> <div class="video-title">
相关视频 <!-- <i class="el-icon-video-camera"></i> -->
</div> 相关视频
<div class="video-names"> </div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in CRDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div <div
class="video-item" :class="[
v-for="(item, index) in CRDetail.videosVo" 'name',
:key="index" currentVideo && item.fileId == currentVideo.fileId
@click="handleChangeCurrentVideo(item)" ? 'active'
: '',
]"
> >
<div {{ item.name.split(".")[0] }}
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }}
</div>
</div> </div>
</div> </div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
<video-player
<!--相关文物 --> v-if="currentVideo"
<div :src="$getFullUrl(currentVideo.url)"
class="content-item display-detail_relate_rc" class="video-box"
ref="units" ></video-player>
id="relateRelics" </div>
>
<div class="intro-title"> <!--相关文物 -->
<!-- <i class="el-icon-menu" style="margin-right: 10px"></i> --> <div
<span>相关文物推荐</span> class="content-item display-detail_relate_rc"
</div> ref="units"
<div class="recommend-type"> id="relateRelics"
<el-radio-group v-model="currentRcKey" size="small"> >
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio> <div class="intro-title">
<el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio> <!-- <i class="el-icon-menu" style="margin-right: 10px"></i> -->
<el-radio :label="'deptId'" v-if="CRDetail.deptId" <span>相关文物推荐</span>
>同馆藏</el-radio </div>
> <div class="recommend-type">
</el-radio-group> <el-radio-group v-model="currentRcKey" size="small">
</div> <el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-row :gutter="8" v-if="relateRelics.length > 0"> <el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
<el-col <el-radio :label="'deptId'" v-if="CRDetail.deptId"
:span="6" >同馆藏</el-radio
v-for="(item, index) in relateRelics"
:key="index"
> >
<div class="img-container" @click="handleToCr(item)"> </el-radio-group>
<img :src="item.faceImagePressUrl" alt="" />
</div>
<div class="cr-name">{{ item.name }}</div>
</el-col>
</el-row>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div> </div>
<!-- 相关文献 --> <el-row :gutter="8" v-if="relateRelics.length > 0">
<div <el-col
class="content-item display-detail_lts" :span="6"
id="literatureVo" v-for="(item, index) in relateRelics"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0" :key="index"
> >
<!-- <div class="wrapper"> --> <div class="img-container" @click="handleToCr(item)">
<div class="custom_title wow animate__animated animate__fadeInUp"> <img :src="item.faceImagePressUrl" alt="" />
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="wenxian"></svg-icon>
<span class="title">相关文献</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div> </div>
<div class="cr-name">{{ item.name }}</div>
</el-col>
</el-row>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
id="literatureVo"
v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
>
<!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div> </div>
<div class="lts-content wow animate__animated animate__fadeInUp"> <div class="center">
<el-table <svg-icon icon-class="wenxian"></svg-icon>
:data="CRDetail.literatureVo" <span class="title">相关文献</span>
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="CRDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </div>
</div> </div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> <el-image-viewer
v-if="imgViewerVisible"
<script> :on-close="closeImgViewer"
// import SearchBar from "@/components/SearchBar"; :url-list="imgList"
// import CustomTitle from "@/components/CustomTitle"; />
// import QRCode from "qrcodejs2"; </div>
import AudioPlayer from "@/components/AudioPlayer"; </template>
import Video from "@/components/Video";
import ReaderOperations from "@/components/ReaderOperations"; <script>
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic"; // import SearchBar from "@/components/SearchBar";
import { previewFile } from "@/utils/index"; // import CustomTitle from "@/components/CustomTitle";
import videoPlayer from "@/components/VideoPlayer"; // import QRCode from "qrcodejs2";
import SlideImage from "@/components/SlideImage"; import AudioPlayer from "@/components/AudioPlayer";
import { isElementInViewport2 } from "@/utils/index"; import Video from "@/components/Video";
export default { import ReaderOperations from "@/components/ReaderOperations";
components: { import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
AudioPlayer, import { previewFile } from "@/utils/index";
ReaderOperations, import videoPlayer from "@/components/VideoPlayer";
Video, import SlideImage from "@/components/SlideImage";
videoPlayer, import { isElementInViewport2 } from "@/utils/index";
SlideImage, export default {
"el-image-viewer": () => components: {
import("element-ui/packages/image/src/image-viewer"), AudioPlayer,
ReaderOperations,
Video,
videoPlayer,
SlideImage,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
let vm = this;
return {
imgViewerVisible: false,
CRDetail: {},
relateRelics: [],
audioPlaying: true,
page: null,
currentRcKey: "type",
currentVideo: null,
currentTab: null,
isFixed: false,
tabbarData: [
{
name: "文物简介",
domId: "intro",
},
{
name: "相关视频",
domId: "videosVo",
},
{
name: "相关文物",
domId: "relateRelics",
},
{
name: "相关文献",
domId: "literatureVo",
},
],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
};
},
watch: {
"$route.params.crId"(value) {
this.loadDetail(value);
},
currentRcKey(key) {
this.loadCrRecommend();
},
},
async mounted() {
let crId = this.$route.params.crId;
this.loadDetail(crId);
setTimeout(() => {
window.addEventListener("scroll", this.initHeight);
this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
this.tabbarData.map((item) => {
let dom = document.getElementById(item.domId);
if (dom) {
item.position = dom.offsetTop - 320; //100navbar 55tabbar
}
});
}, 500);
},
beforeRouteLeave(to, form, next) {
// 离开路由移除滚动事件
window.removeEventListener("scroll", this.initHeight);
next();
},
methods: {
async loadDetail(crId) {
if (crId) {
let res = await getRCDetailByIdV2({ crId });
if (res.code == 0) {
this.CRDetail = res.data.culturalRelicVo;
// this.relateRelics = res.data.recommendList.records;
if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) {
this.currentVideo = this.CRDetail.videosVo[0];
}
// 获取关联文物
this.loadCrRecommend();
this.$nextTick(() => {
// this.replaceFaceImage();
if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
}
}
}, },
data() {
let vm = this; async loadCrRecommend() {
return { const { crId } = this.CRDetail;
imgViewerVisible: false, const params = {
CRDetail: {}, crId,
relateRelics: [], page: 1,
audioPlaying: true, limit: 4,
page: null,
currentRcKey: "type",
currentVideo: null,
currentTab: null,
isFixed: false,
tabbarData: [
{
name: "文物简介",
domId: "intro",
},
{
name: "相关视频",
domId: "videosVo",
},
{
name: "相关文物",
domId: "relateRelics",
},
{
name: "相关文献",
domId: "literatureVo",
},
],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
}; };
if (this.currentRcKey == "type") {
params.type = this.CRDetail.type;
}
if (this.currentRcKey == "years") {
params.years = this.CRDetail.years;
}
if (this.currentRcKey == "deptId") {
params.deptId = this.CRDetail.deptId;
}
let res = await crRecommendByPage(params);
this.relateRelics = res.data.records;
// console.log("res", res);
}, },
watch: {
"$route.params.crId"(value) { replaceFaceImage() {
this.loadDetail(value); var img = new Image(); //新建一个图片对象
}, let url; //最终显示的大图
currentRcKey(key) { // debugger
this.loadCrRecommend(); if (this.CRDetail.faceImagePressUrl) {
}, url = this.$getFullUrl(this.CRDetail.faceImageUrl);
} else if (this.CRDetail.imagesVo.length > 0) {
url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
}
let faceImage = document.getElementById("faceImage");
img.src = url;
img.onload = function () {
faceImage.src = url;
};
}, },
async mounted() { handleBack() {
let crId = this.$route.params.crId; this.$router.go(-1);
this.loadDetail(crId); },
handleTo3D() {
this.$message.info("即将打开3D模型...");
setTimeout(() => { setTimeout(() => {
window.addEventListener("scroll", this.initHeight); window.open(this.CRDetail.url3d, "_blank");
this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度 }, 1000);
this.tabbarData.map((item) => {
let dom = document.getElementById(item.domId);
if (dom) {
item.position = dom.offsetTop - 320; //100navbar 55tabbar
}
});
}, 500);
}, },
beforeRouteLeave(to, form, next) {
// 离开路由移除滚动事件 closeImgViewer() {
window.removeEventListener("scroll", this.initHeight); this.imgViewerVisible = false;
next();
}, },
methods: {
async loadDetail(crId) { handelPreviewImages(items, hasImages) {
if (crId) { this.imgViewerVisible = true;
let res = await getRCDetailByIdV2({ crId }); if (hasImages) {
if (res.code == 0) { this.imgList = items.map((item) => this.$getFullUrl(item.url));
this.CRDetail = res.data.culturalRelicVo; } else {
// this.relateRelics = res.data.recommendList.records; this.imgList = items.map((item) => this.$getFullUrl(item));
if (this.CRDetail.videosVo && this.CRDetail.videosVo.length > 0) { }
this.currentVideo = this.CRDetail.videosVo[0]; },
} handleToDetail(crId) {
// 获取关联文物 // const newPage = this.$router.resolve({
this.loadCrRecommend(); // path: `culturalReli/${crId}`,
this.$nextTick(() => { // });
// this.replaceFaceImage(); // window.open(newPage.href, "_blank");
if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) { this.$router.push(`culturalRelic/${crId}`);
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭"); },
this.$refs.AudioPlayer.play(); // 点击音频
} handleClickAudio() {
}); this.audioPlaying = !this.audioPlaying;
} if (this.audioPlaying) {
} this.$refs["AudioPlayer"].play();
}, // console.log(this.$refs['audioContainer']);
} else {
async loadCrRecommend() { this.$refs["AudioPlayer"].pause();
const { crId } = this.CRDetail; }
const params = { },
crId,
page: 1, // 关联文献的行样式调整
limit: 4, tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
}; };
if (this.currentRcKey == "type") { } else {
params.type = this.CRDetail.type; return {
} background: "#fff !important",
if (this.currentRcKey == "years") {
params.years = this.CRDetail.years;
}
if (this.currentRcKey == "deptId") {
params.deptId = this.CRDetail.deptId;
}
let res = await crRecommendByPage(params);
this.relateRelics = res.data.records;
// console.log("res", res);
},
replaceFaceImage() {
var img = new Image(); //新建一个图片对象
let url; //最终显示的大图
// debugger
if (this.CRDetail.faceImagePressUrl) {
url = this.$getFullUrl(this.CRDetail.faceImageUrl);
} else if (this.CRDetail.imagesVo.length > 0) {
url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
}
let faceImage = document.getElementById("faceImage");
img.src = url;
img.onload = function () {
faceImage.src = url;
}; };
}, }
handleBack() { },
this.$router.go(-1); // 预览关联文献
}, handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
handleTo3D() { },
this.$message.info("即将打开3D模型...");
setTimeout(() => { closeImgViewer() {
window.open(this.CRDetail.url3d, "_blank"); this.imgViewerVisible = false;
}, 1000); },
},
handleToCr(item) {
closeImgViewer() { const { crId } = item;
this.imgViewerVisible = false; const newPage = this.$router.resolve({
}, path: "/culturalRelic/" + crId,
});
handelPreviewImages(items, hasImages) { window.open(newPage.href, "_blank");
this.imgViewerVisible = true; // this.$router.push(`/culturalRelic/${crId}`);
if (hasImages) { },
this.imgList = items.map((item) => this.$getFullUrl(item.url));
} else { handleChangeCurrentVideo(video) {
this.imgList = items.map((item) => this.$getFullUrl(item)); this.currentVideo = video;
} },
},
handleToDetail(crId) { handleClickTabItem(item) {
// const newPage = this.$router.resolve({ this.currentTab = item;
// path: `culturalReli/${crId}`, if (item.position) {
// }); document.documentElement.scrollTop = item.position;
// window.open(newPage.href, "_blank"); }
this.$router.push(`culturalRelic/${crId}`); },
},
// 点击音频 initHeight() {
handleClickAudio() { let scrollTop =
this.audioPlaying = !this.audioPlaying; window.pageYOffset ||
if (this.audioPlaying) { document.documentElement.scrollTop ||
this.$refs["AudioPlayer"].play(); document.body.scrollTop;
// console.log(this.$refs['audioContainer']); this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
} else { this.tabbarData.map((item) => {
this.$refs["AudioPlayer"].pause(); let content = document.getElementById(item.domId);
} if (content && isElementInViewport2(content)) {
}, this.currentTab = item;
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
closeImgViewer() {
this.imgViewerVisible = false;
},
handleToCr(item) {
const { crId } = item;
const newPage = this.$router.resolve({
path: "/culturalRelic/" + crId,
});
window.open(newPage.href, "_blank");
// this.$router.push(`/culturalRelic/${crId}`);
},
handleChangeCurrentVideo(video) {
this.currentVideo = video;
},
handleClickTabItem(item) {
this.currentTab = item;
if (item.position) {
document.documentElement.scrollTop = item.position;
} }
}, });
initHeight() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
this.tabbarData.map((item) => {
let content = document.getElementById(item.domId);
if (content && isElementInViewport2(content)) {
this.currentTab = item;
}
});
},
}, },
}; },
</script> };
</script>
<style lang="scss" >
// 自定义分页器样式 <style lang="scss">
#page { // 自定义分页器样式
height: 30px; #page {
display: flex; height: 30px;
justify-content: center; display: flex;
} justify-content: center;
.page-item { }
cursor: pointer; .page-item {
} cursor: pointer;
</style> }
</style>
<style lang="scss" scoped>
// 中国风主题样式 <style lang="scss" scoped>
/**公共样式开始 */ // 中国风主题样式
$titleFontFamily: SourceHanSerifCN-Bold; /**公共样式开始 */
.custom-title { $titleFontFamily: SourceHanSerifCN-Bold;
width: 50px; .custom-title {
background-color: #d72f3f; width: 50px;
min-height: 300px; background-color: #d72f3f;
color: #fff; min-height: 300px;
font-size: 28px; color: #fff;
writing-mode: vertical-rl; font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
letter-spacing: 10px;
}
.units {
background-image: linear-gradient(to bottom, #660d04, #520002);
min-height: 400px;
}
.content {
// background: url("@/assets/imgs/display/normal/bg1.png");
background-color: #f3f3f3;
min-height: 100px;
}
.content-item {
width: 100%;
}
.custom_title {
display: flex;
width: 100%;
padding: 50px 0 40px 0;
align-items: center;
.center {
width: 180px;
margin: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; .svg-icon {
box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px; font-size: 50px;
letter-spacing: 10px; color: $deepBlue;
} margin-right: 10px;
.units { }
background-image: linear-gradient(to bottom, #660d04, #520002); .title {
min-height: 400px; font-size: 26px;
} font-weight: 400;
.content { color: $deepBlue;
// background: url("@/assets/imgs/display/normal/bg1.png"); line-height: 101px;
background-color: #f3f3f3; }
min-height: 100px;
}
.content-item {
width: 100%;
} }
.desc {
.custom_title { flex: 1;
display: flex; display: flex;
width: 100%;
padding: 50px 0 40px 0;
align-items: center; align-items: center;
.center { .modify {
width: 180px; width: 16px;
margin: 0 10px; margin: 0 6px;
display: flex; img {
align-items: center; width: 100%;
.svg-icon {
font-size: 50px;
color: $themeColor;
margin-right: 10px;
}
.title {
font-size: 26px;
font-weight: 400;
color: $themeColor;
line-height: 101px;
} }
} }
.desc { .divider {
flex: 1; flex: 1;
display: flex; height: 6px;
align-items: center; background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
.modify { repeat-x;
width: 16px; img {
margin: 0 6px; width: 100%;
img {
width: 100%;
}
}
.divider {
flex: 1;
height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img {
width: 100%;
}
} }
} }
} }
}
.enlarge {
position: absolute; .enlarge {
bottom: 20px; position: absolute;
right: 40px; bottom: 20px;
display: flex; right: 40px;
z-index: 9; display: flex;
background-color: #c1925b; z-index: 9;
width: 40px; background-color: #c1925b;
height: 40px; width: 40px;
border-radius: 12px; height: 40px;
display: flex; border-radius: 12px;
justify-content: center; display: flex;
align-items: center; justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
.intro-title {
font-size: 26px;
font-weight: 400;
color: $deepBlue;
font-family: "SourceHanSerifCN-Bold";
display: flex;
align-items: center;
margin-bottom: 32px;
.svg-icon {
margin-right: 10px; margin-right: 10px;
cursor: pointer; font-size: 36px;
img {
width: 24px;
height: 24px;
}
} }
}
.intro-title {
font-size: 26px; .isFixed {
font-weight: 400; position: fixed;
color: $themeColor; left: 0;
font-family: "SourceHanSerifCN-Bold"; top: $nav-height;
display: flex; z-index: 99;
align-items: center; }
margin-bottom: 32px; /**公共样式结束 */
.svg-icon {
margin-right: 10px; /**样式开始 */
font-size: 36px; .content {
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/**轮播图 */
.display-detail_imgs {
height: 436px;
img {
width: 100%;
height: 100%;
object-fit: cover;
} }
} }
.wrapper {
.isFixed { width: 1200px;
position: fixed; // padding: 0 13%;
left: 0; // width: 100%;
top: $nav-height; // width: 78%;
z-index: 99;
}
/**公共样式结束 */
/**样式开始 */
.content {
width: 100%;
overflow: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; .inner {
flex-direction: column; width: 100%;
/**轮播图 */ // box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
.display-detail_imgs {
height: 436px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.wrapper {
width: 1200px;
// padding: 0 13%;
// width: 100%;
// width: 78%;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
.inner { min-height: 200px;
width: 100%; position: relative;
// box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); background-color: #fff;
display: flex; // margin: 36px 0 70px;
flex-direction: column; /**基本信息 */
align-items: center; .display-detail_basic_info {
justify-content: center;
min-height: 200px;
position: relative; position: relative;
background-color: #fff; .info-container {
// margin: 36px 0 70px; display: flex;
/**基本信息 */ justify-content: space-between;
.display-detail_basic_info { padding: 40px 36px;
position: relative; height: 100%;
.info-container { background-color: #fff;
display: flex; .info-container-left {
justify-content: space-between; min-height: 200px;
padding: 40px 36px; max-height: 460px;
height: 100%; margin-right: 50px;
background-color: #fff; flex: 1;
.info-container-left { overflow: hidden;
min-height: 200px; position: relative;
max-height: 460px; // .imagesVo-image-container {
margin-right: 50px; // // position: relative;
flex: 1;
overflow: hidden; // }
position: relative; .img-container {
// .imagesVo-image-container { height: 100%;
// // position: relative; width: 100%;
background: #f5f5f9;
// } img {
.img-container {
height: 100%;
width: 100%; width: 100%;
background: #f5f5f9; height: 100%;
img { object-fit: contain;
width: 100%; }
height: 100%; }
object-fit: contain; }
.info-container-right {
flex: 1;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-around;
.info-title {
font-size: 28px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
} }
} }
} }
.info-container-right { .basic-info {
flex: 1; .body-item {
min-height: 200px; display: flex;
display: flex; align-items: flex-start;
flex-direction: column; margin-bottom: 10px;
justify-content: space-around; font-size: 18px;
.info-title { .label {
font-size: 28px; display: flex;
font-weight: bold; align-items: center;
color: #444; width: 120px;
padding-bottom: 20px; // margin-right: 26px;
margin-bottom: 20px; // margin-bottom: 10px;
border-bottom: 2px solid #f2f2f2; font-weight: bold;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999; color: #999;
font-weight: normal;
.svg-icon { .svg-icon {
margin-right: 10px; width: 24px;
height: 24px;
margin-right: 16px;
} }
} }
.value {
color: #666;
// font-weight: bold;
}
} }
.basic-info { }
.body-item {
display: flex; .bottom {
align-items: flex-start; display: flex;
margin-bottom: 10px; flex-direction: column;
font-size: 18px; justify-content: flex-end;
.label { .qrcode {
display: flex; display: flex;
align-items: center; justify-content: center;
width: 120px; img {
// margin-right: 26px; width: 50%;
// margin-bottom: 10px; height: 100%;
font-weight: bold;
color: #999;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
}
.value {
color: #666;
// font-weight: bold;
}
} }
} }
.showIcon {
.bottom { height: 40px;
width: 100%;
display: flex; display: flex;
flex-direction: column; justify-content: center;
justify-content: flex-end; align-items: center;
.qrcode { background-color: $deepBlue;
display: flex; margin: 20px 0;
justify-content: center; color: #fff;
img { cursor: pointer;
width: 50%; transition: all 0.3s ease;
height: 100%; &:hover {
} // box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
opacity: 0.8;
}
.svg-icon {
margin-right: 8px;
} }
.showIcon { }
height: 40px; .tools {
width: 100%; width: 100%;
margin-top: 10px;
.tools-item {
color: #858585;
flex: 1;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
background-color: $themeColor;
margin: 20px 0;
color: #fff;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
&:hover {
// box-shadow: 2px 6px 6px 2px rgb(0 0 0 / 40%);
opacity: 0.8;
}
.svg-icon { .svg-icon {
width: 22px;
height: 22px;
margin-right: 8px; margin-right: 8px;
} }
} .like {
.tools { color: #831122;
width: 100%; }
margin-top: 10px; .collect {
.tools-item { color: $deepBlue;
color: #858585;
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: $themeColor;
}
} }
} }
} }
} }
} }
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $themeColor;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: $themeColor;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
} }
.audio {
.display-detail_tabbar { position: absolute;
background-color: #fff; right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid $deepBlue;
padding: 10px;
border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px; align-items: center;
border-bottom: 1px solid #f2f2f2; background-color: #fff;
.tab-item { transition: all 0.5s ease;
height: 100%; &:hover {
margin-right: 20px; box-shadow: 0 0 14px rgb(0 0 0 / 40%);
color: #666;
font-size: 24px;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
}
&::after {
display: none;
}
} }
.active { .svg-icon {
color: $themeColor; color: $deepBlue;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
}
.display-detail_tabbar {
background-color: #fff;
display: flex;
justify-content: center;
padding: 10px;
border-bottom: 1px solid #f2f2f2;
.tab-item {
height: 100%;
margin-right: 20px;
color: #666;
font-size: 24px;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
&:hover {
color: $deepBlue;
&::after { &::after {
display: inline-block; display: inline-block;
} }
} }
.tab-item::after, &::after {
.active::after { display: none;
position: absolute;
content: "";
height: 4px;
width: 100%;
bottom: -10px;
left: 0;
background-color: $themeColor;
} }
} }
/**简介和视频 */ .active {
.display-detail_intro { color: $deepBlue;
padding: 40px; &::after {
display: inline-block;
.intro-content {
line-height: 28px;
display: flex;
} }
.left-box { }
width: 60px; .tab-item::after,
background-color: $themeColor; .active::after {
min-height: 200px; position: absolute;
color: #fff; content: "";
height: 4px;
width: 100%;
bottom: -10px;
left: 0;
background-color: $deepBlue;
}
}
/**简介和视频 */
.display-detail_intro {
padding: 40px;
.intro-content {
line-height: 28px;
display: flex;
}
.left-box {
width: 60px;
background-color: $deepBlue;
min-height: 200px;
color: #fff;
font-size: 28px;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
}
.intro-content-container {
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($deepBlue, 10%);
}
}
.display-detail_videos {
display: flex;
flex-direction: column;
background-color: #fff;
.video-title {
display: flex;
// justify-content: center;
align-items: center;
font-size: 26px;
color: $deepBlue;
margin: 80px 0 40px;
font-family: SourceHanSerifCN-Bold;
padding-left: 46px;
i {
font-size: 28px; font-size: 28px;
writing-mode: vertical-rl; margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 10px;
font-family: SourceHanSerifCN-Bold;
}
.intro-content-container {
flex: 1;
text-indent: 34px;
padding: 16px 32px;
background-color: rgba($themeColor, 10%);
} }
} }
.video-names {
.display-detail_videos {
display: flex; display: flex;
flex-direction: column; justify-content: center;
background-color: #fff; border-bottom: 1px solid #f2f0f0;
.video-title { margin-bottom: 30px;
display: flex; .video-item {
// justify-content: center; font-size: 18px;
align-items: center; margin: 8px 30px;
font-size: 26px; .name {
color: $themeColor; color: #999;
margin: 80px 0 40px; position: relative;
font-family: SourceHanSerifCN-Bold; cursor: pointer;
padding-left: 46px; &:hover {
i { color: $deepBlue;
font-size: 28px; &::after {
margin-right: 10px; display: inline-block;
} }
} &::before {
.video-names { display: inline-block;
display: flex;
justify-content: center;
border-bottom: 1px solid #f2f0f0;
margin-bottom: 30px;
.video-item {
font-size: 18px;
margin: 8px 30px;
.name {
color: #999;
position: relative;
cursor: pointer;
&:hover {
color: $themeColor;
&::after {
display: inline-block;
}
&::before {
display: inline-block;
}
} }
}
.active::after,
.name::after {
content: "";
width: 50%;
height: 1px;
background-color: $themeColor;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $themeColor;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
} }
} }
} .active::after,
.video-box { .name::after {
height: 600px; content: "";
.video-player { width: 50%;
height: 100%; height: 1px;
background-color: $deepBlue;
position: absolute;
left: 0;
bottom: -9px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.active::before,
.name::before {
content: "";
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: $deepBlue;
position: absolute;
left: 50%;
bottom: -25px;
transform: translateX(-50%);
display: none;
}
.active::after,
.active::before {
display: inline-block;
} }
} }
} }
.video-box {
// 关联文物 height: 600px;
.display-detail_relate_rc { .video-player {
min-height: 560px; height: 100%;
// background-image: url("@/assets/imgs/display/normal/bg.png");
background-color: #fff;
background-size: 1%;
padding: 50px 46px;
.intro-title {
display: flex;
align-items: center;
font-family: SourceHanSerifCN-Bold;
}
.recommend-type {
margin-bottom: 20px;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 8px;
} }
.el-row { }
.el-col { }
.img-container {
// 关联文物
.display-detail_relate_rc {
min-height: 560px;
// background-image: url("@/assets/imgs/display/normal/bg.png");
background-color: #fff;
background-size: 1%;
padding: 50px 46px;
.intro-title {
display: flex;
align-items: center;
font-family: SourceHanSerifCN-Bold;
}
.recommend-type {
margin-bottom: 20px;
border-bottom: 1px solid #f2f2f2;
padding-bottom: 8px;
}
.el-row {
.el-col {
.img-container {
width: 100%;
height: 214px;
position: relative;
cursor: pointer;
background-color: #939393;
img {
width: 100%; width: 100%;
height: 214px; height: 100%;
position: relative; object-fit: contain;
cursor: pointer;
background-color: #939393;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.cr-name {
font-size: 18px;
// font-weight: bold;
color: #666;
text-align: left;
margin: 20px 0;
text-indent: 2px;
} }
} }
.cr-name {
font-size: 18px;
// font-weight: bold;
color: #666;
text-align: left;
margin: 20px 0;
text-indent: 2px;
}
} }
} }
}
/**关联文献 */
.display-detail_lts { /**关联文献 */
background-color: #fafafa; .display-detail_lts {
.lts-content { background-color: #fafafa;
flex: 1; .lts-content {
} flex: 1;
} }
} }
} }
} }
::v-deep .el-carousel__item--card { }
width: 100%; ::v-deep .el-carousel__item--card {
height: 100%; width: 100%;
transform: translateX(0) scale(1) !important; height: 100%;
} transform: translateX(0) scale(1) !important;
}
::v-deep .el-carousel {
height: 100%; ::v-deep .el-carousel {
} height: 100%;
::v-deep .el-carousel__container { }
height: 100%; ::v-deep .el-carousel__container {
} height: 100%;
::v-deep .el-tree { }
background: transparent; ::v-deep .el-tree {
.el-tree-node__content { background: transparent;
height: 50px; .el-tree-node__content {
:hover { height: 50px;
background: #fff; :hover {
color: $themeColor; background: #fff;
} color: $deepBlue;
} }
} }
::v-deep .el-radio__input { }
display: none; ::v-deep .el-radio__input {
display: none;
}
::v-deep .el-radio__label {
font-size: 18px;
padding-left: 0;
font-family: SourceHanSerifCN-Bold;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
color: $deepBlue;
}
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0;
// }
// ::v-deep .el-radio-button:last-child .el-radio-button__inner{
// border-radius: 0;
// }
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
} }
100% {
::v-deep .el-radio__label { transform: translateX(-1200px);
font-size: 18px;
padding-left: 0;
font-family: SourceHanSerifCN-Bold;
} }
::v-deep .el-radio__input.is-checked + .el-radio__label { }
color: $themeColor; @keyframes filmMoveRight {
0% {
transform: translateX(0);
} }
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{ 100% {
// border-radius: 0; transform: translateX(1200px);
// }
// ::v-deep .el-radio-button:last-child .el-radio-button__inner{
// border-radius: 0;
// }
@keyframes filmMoveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1200px);
}
} }
@keyframes filmMoveRight { }
0% {
transform: translateX(0); @keyframes audioRotate {
} 0% {
100% { transform: rotateZ(0deg);
transform: translateX(1200px);
}
} }
100% {
@keyframes audioRotate { transform: rotateZ(360deg);
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
} }
}
@-webkit-keyframes audioRotate {
0% { @-webkit-keyframes audioRotate {
transform: rotateZ(0deg); 0% {
} transform: rotateZ(0deg);
100% {
transform: rotateZ(360deg);
}
} }
100% {
.animation-play-paused { transform: rotateZ(360deg);
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
} }
</style> }
\ No newline at end of file
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
}
</style>
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">
...@@ -537,7 +541,7 @@ $text-indent: 16px; ...@@ -537,7 +541,7 @@ $text-indent: 16px;
.cr-list { .cr-list {
// padding: 0 74px; // padding: 0 74px;
min-height: 500px; min-height: 500px;
.cr-item { .cr-item {
margin-bottom: 40px; margin-bottom: 40px;
.container { .container {
...@@ -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>
...@@ -64,7 +72,7 @@ ...@@ -64,7 +72,7 @@
</el-scrollbar> </el-scrollbar>
</div> </div>
</transition> </transition>
<div class="list-total"> <div class="list-total">
共计文物 共计文物
<span class="list-total-num">{{ list.total }}</span> <span class="list-total-num">{{ list.total }}</span>
件/套 件/套
...@@ -137,12 +145,12 @@ ...@@ -137,12 +145,12 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
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,26 +337,30 @@ export default { ...@@ -361,26 +337,30 @@ 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>
<style lang="scss" scoped> <style lang="scss" scoped>
$text-indent: 16px; $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 {
...@@ -815,4 +798,4 @@ $text-indent: 16px; ...@@ -815,4 +798,4 @@ $text-indent: 16px;
//可设置滚动条颜色 //可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4); background: rgba($color: #000000, $alpha: 0.4);
} }
</style> </style>
\ No newline at end of file
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;
} }
} }
...@@ -789,22 +784,22 @@ $themeRed: #892325; ...@@ -789,22 +784,22 @@ $themeRed: #892325;
// margin-right: 10px; // margin-right: 10px;
// } // }
font-size: 32px; font-size: 32px;
font-family: KaiTi; font-family: KaiTi;
font-weight: 400; font-weight: 400;
color: #0f0f0f; color: #0f0f0f;
margin-bottom: 43px; margin-bottom: 43px;
position: relative; position: relative;
&::after { &::after {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 60px; width: 60px;
height: 2px; height: 2px;
background-color: #caad91; background-color: #caad91;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -12px; bottom: -12px;
} }
} }
.video-names { .video-names {
display: flex; display: flex;
...@@ -1061,7 +1056,7 @@ $themeRed: #892325; ...@@ -1061,7 +1056,7 @@ $themeRed: #892325;
a:hover { a:hover {
cursor: pointer; cursor: pointer;
color: $themeColor; color: $deepBlue;
} }
} }
...@@ -1101,4 +1096,4 @@ $themeRed: #892325; ...@@ -1101,4 +1096,4 @@ $themeRed: #892325;
height: 100%; height: 100%;
transform: translateX(0) scale(1) !important; transform: translateX(0) scale(1) !important;
} }
</style> </style>
\ No newline at end of file
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">
...@@ -31,13 +52,13 @@ ...@@ -31,13 +52,13 @@
<div class="info-item"> <div class="info-item">
<span class="label"> 展览类型： </span> <span class="label"> 展览类型： </span>
<span class="value">{{ <span class="value">{{
dicts.displayType[displayDetail.type] || "暂无" dicts.displayType[displayDetail.type] || "暂无"
}}</span> }}</span>
</div> </div>
<div class="info-item"> <div class="info-item">
<span class="label"> 展览性质： </span> <span class="label"> 展览性质： </span>
<span class="value">{{ <span class="value">{{
dicts.displayCharacter[displayDetail.displayCharacter] || "暂无" dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
}}</span> }}</span>
</div> </div>
<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>
title: true, <div
active: currentUnit.title == item.title, :class="{
}"> title: true,
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
unitValue.imagesVo.length > 0 && v-if="
unitValue.imagesVo.length < 4 unitValue.imagesVo.length > 0 &&
" :gutter="10"> unitValue.imagesVo.length < 4
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index" "
:span="24 / unitValue.imagesVo.length" style="height: 300px;"> :gutter="10"
<img :src="$getFullUrl(item.middleUrl || item.url)" alt="" style=" >
width: 100%; <el-col
height: 100%; v-for="(item, index) in unitValue.imagesVo"
object-fit: contain; :key="index"
cursor: pointer; :span="24 / unitValue.imagesVo.length"
" @click="handelPreviewImages(unitValue.imagesVo, index)" /> style="height: 300px"
>
<img
:src="$getFullUrl(item.middleUrl || item.url)"
alt=""
style="
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
"
@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
unitValue.culturalRelics && class="unit-content_crs"
unitValue.culturalRelics.length > 0 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 || item.faceImagePressUrl)" alt="" style=" <img
width: 100%; :src="
height: 100%; $getFullUrl(
object-fit: fill; item.faceImageMiddleUrl || item.faceImagePressUrl
cursor: pointer; )
" @click="handleToCr(item)" /> "
alt=""
style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
"
@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);
...@@ -1078,4 +1173,4 @@ $themeColor: #a30e0c; ...@@ -1078,4 +1173,4 @@ $themeColor: #a30e0c;
-webkit-animation-play-state: paused; -webkit-animation-play-state: paused;
/* Safari 和 Chrome */ /* Safari 和 Chrome */
} }
</style> </style>
\ No newline at end of file
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);
...@@ -1392,4 +1389,4 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -1392,4 +1389,4 @@ $titleFontFamily: SourceHanSerifCN-Bold;
-webkit-animation-play-state: paused; -webkit-animation-play-state: paused;
/* Safari 和 Chrome */ /* Safari 和 Chrome */
} }
</style> </style>
\ No newline at end of file
src/views/display/components/NormalStyleUnit.vue
浏览文件 @ 9cb5fc3a
<template> <template>
<div class="unit-container">
<div class="unit-content-menu">
<swiper
class="swiper unit-swiper"
:options="unitSwiperOption"
ref="videoSwiper"
>
<swiper-slide
:class="['slide-item', item.euId == curUnit.euId ? 'active' : '']"
v-for="(item, index) in exhibitionUnits"
:key="index"
@click.native="handleClickUnit(item)"
>
{{ item.title }}
</swiper-slide>
</swiper>
<div
class="swiper-button-prev unit-swiper-button-prev"
slot="button-prev"
>
<i class="el-icon-arrow-left"></i>
</div>
<div
class="swiper-button-next unit-swiper-button-next"
slot="button-next"
>
<i class="el-icon-arrow-right"></i>
</div>
</div>
<div class="unit-container"> <div class="unit-content">
<div class="unit-content-menu"> <div
<swiper class="swiper unit-swiper" :options="unitSwiperOption" ref="videoSwiper"> class="unit-content-container"
<swiper-slide :class="[ v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo"
'slide-item', :key="unitTitle"
item.euId == curUnit.euId ? 'active' : '', >
]" v-for="(item, index) in exhibitionUnits" :key="index" @click.native="handleClickUnit(item)"> <div class="unit-content-title">
{{ item.title }} {{ unitTitle }}
</swiper-slide> </div>
</swiper> <div
<div class="swiper-button-prev unit-swiper-button-prev" slot="button-prev"> class="text-indent unit-content_intro"
<i class="el-icon-arrow-left"></i> v-if="curUnit.intro"
</div> v-html="unitValue.intro"
<div class="swiper-button-next unit-swiper-button-next" slot="button-next"> ></div>
<i class="el-icon-arrow-right"></i> <div
</div> class="unit-content_images"
v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
>
<!-- <div class="imgs-title">单元图片</div> -->
<div class="unit-imgs">
<SlideImageGroup
:imgList="unitValue.imagesVo"
:needEnlarge="true"
v-if="unitValue.imagesVo.length > 3"
>
<template slot-scope="{ item }" slot="img">
<img
:src="$getFullUrl(item.middleUrl)"
alt=""
style="width: 100%; height: 100%; object-fit: contain"
/>
</template>
</SlideImageGroup>
<el-row
v-if="
unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4
"
:gutter="10"
>
<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-row>
</div>
</div> </div>
<div class="unit-content"> <div
<div class="unit-content-container" v-for="(unitValue, unitTitle) in curUnit.expandUnitInfo" class="unit-content_crs"
:key="unitTitle"> v-if="unitValue.culturalRelics && unitValue.culturalRelics.length > 0"
<div class="unit-content-title"> >
{{ unitTitle }} <div class="imgs-title">单元文物</div>
</div> <SlideImageGroup :imgList="unitValue.culturalRelics">
<div class="text-indent unit-content_intro" v-if="curUnit.intro" v-html="unitValue.intro"></div> <template slot-scope="{ item }" slot="img">
<div class="unit-content_images" v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"> <img
<!-- <div class="imgs-title">单元图片</div> --> :src="$getFullUrl(item.faceImageMiddleUrl)"
<div class="unit-imgs"> alt=""
style="
<SlideImageGroup :imgList="unitValue.imagesVo" :needEnlarge="true" width: 100%;
v-if="unitValue.imagesVo.length > 3"> height: 100%;
<template slot-scope="{ item }" slot="img"> object-fit: fill;
<img :src="$getFullUrl(item.middleUrl)" alt="" cursor: pointer;
style="width: 100%; height: 100%; object-fit: contain" /> "
</template> @click="handleToCr(item)"
</SlideImageGroup> />
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10"> </template>
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index" <template slot-scope="{ item }" slot="info">
:span="24 / unitValue.imagesVo.length" style="height:300px"> <div class="name">{{ item.name }}</div>
<img :src="$getFullUrl(item.middleUrl)" alt="" </template>
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;" </SlideImageGroup>
@click="handelPreviewImages(unitValue.imagesVo)" />
</el-col>
</el-row>
</div>
</div>
<div class="unit-content_crs" v-if="
unitValue.culturalRelics && unitValue.culturalRelics.length > 0
">
<div class="imgs-title">单元文物</div>
<SlideImageGroup :imgList="unitValue.culturalRelics">
<template slot-scope="{ item }" slot="img">
<img :src="$getFullUrl(item.faceImageMiddleUrl)" alt="" style="
width: 100%;
height: 100%;
object-fit: fill;
cursor: pointer;
" @click="handleToCr(item)" />
</template>
<template slot-scope="{ item }" slot="info">
<div class="name">{{ item.name }}</div>
</template>
</SlideImageGroup>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -75,247 +124,240 @@ import { swiper, swiperSlide } from "vue-awesome-swiper"; ...@@ -75,247 +124,240 @@ import { swiper, swiperSlide } from "vue-awesome-swiper";
import SlideImageGroup from "@/components/SlideImageGroup"; import SlideImageGroup from "@/components/SlideImageGroup";
import "swiper/dist/css/swiper.css"; import "swiper/dist/css/swiper.css";
export default { export default {
name: "NormalStyleUnit", name: "NormalStyleUnit",
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
SlideImageGroup, SlideImageGroup,
},
props: {
curUnit: {
type: Object,
default: null,
},
exhibitionUnits: {
type: Array,
default: null,
}, },
props: { },
curUnit: {
type: Object, data() {
default: null return {
unitSwiperOption: {
loop: false,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
slidesPerView: 4,
navigation: {
nextEl: ".unit-swiper-button-next",
prevEl: ".unit-swiper-button-prev",
}, },
exhibitionUnits: { },
type: Array, };
default: null },
} updated() {
let p = document.getElementsByTagName("p");
let arr = [...p];
arr.map((item) => {
item.style.color = "#333";
});
},
methods: {
handleClickUnit(item) {
this.$emit("handleClickUnit", item);
}, },
handelPreviewImages(images) {
data() { this.$emit("handelPreviewImages", images);
return {
unitSwiperOption: {
loop: false,
loopedSlides: 8, // looped slides should be the same
spaceBetween: 10,
slidesPerView: 4,
navigation: {
nextEl: ".unit-swiper-button-next",
prevEl: ".unit-swiper-button-prev",
},
},
}
}, },
updated() { handleToCr(item) {
let p = document.getElementsByTagName('p') this.$emit("handleToCr", item);
let arr = [...p]
arr.map(item => {
item.style.color = "#333"
})
}, },
methods: { },
handleClickUnit(item) { };
this.$emit('handleClickUnit', item)
},
handelPreviewImages(images) {
this.$emit('handelPreviewImages', images)
},
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;
font-family: $defaultFontFamily !important; font-family: $defaultFontFamily !important;
// color: #333 !important; // color: #333 !important;
} }
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.unit-container { .unit-container {
margin-bottom: 40px; margin-bottom: 40px;
position: relative; position: relative;
} }
.unit-content-menu { .unit-content-menu {
margin-right: 40px; margin-right: 40px;
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
.swiper-container { .swiper-container {
width: 90%; width: 90%;
.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 {
background: $themeColor;
color: #fff;
}
.active {
background: $deepBlue;
color: #fff;
} }
}
} }
.swiper-button-next, .swiper-button-next,
.swiper-button-prev { .swiper-button-prev {
// background-color: rgba(0,0,0,0.2); // background-color: rgba(0,0,0,0.2);
// border-radius: 50%; // border-radius: 50%;
background-image: none; background-image: none;
width: 60px; width: 60px;
height: 60px; height: 60px;
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);
} }
.unit-content { .unit-content {
flex: 1; flex: 1;
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 {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
&:nth-child(1) {
.unit-content-title {
font-size: 24px;
font-weight: bold;
}
}
} }
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images { &:nth-child(1) {
position: relative; .unit-content-title {
font-size: 24px;
font-weight: bold;
}
}
}
.unit-content_images_container { .unit-content_images {
height: 100%; position: relative;
display: flex;
flex-direction: column;
background-color: #f5f5f9;
.images_img { .unit-content_images_container {
flex: 1; height: 100%;
} display: flex;
flex-direction: column;
background-color: #f5f5f9;
.desc { .images_img {
display: flex; flex: 1;
justify-content: center; }
height: 40px;
align-items: center;
}
}
}
//单元文物和单元图片公共样式 .desc {
.imgs-title {
margin: 16px 0;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
font-size: 20px; height: 40px;
font-family: SourceHanSerifCN-Bold; align-items: center;
}
i {
margin: 0 10px;
font-size: 18px;
}
} }
}
.unit-imgs { //单元文物和单元图片公共样式
// height: 300px; .imgs-title {
margin: 16px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-family: SourceHanSerifCN-Bold;
i {
margin: 0 10px;
font-size: 18px;
} }
}
.unit-content_crs { .unit-imgs {
position: relative; // height: 300px;
}
.el-row { .unit-content_crs {
.el-col { position: relative;
margin-bottom: 10px;
.img-container { .el-row {
background-color: #f5f5f9; .el-col {
height: 250px; margin-bottom: 10px;
.images_img { .img-container {
height: 100%; background-color: #f5f5f9;
width: 100%; height: 250px;
position: relative;
cursor: pointer;
}
}
}
}
.desc { .images_img {
display: flex; height: 100%;
justify-content: center; width: 100%;
padding: 10px; position: relative;
align-items: center; cursor: pointer;
color: #333; }
font-size: 14px;
} }
}
} }
.buttons { .desc {
display: flex; display: flex;
justify-content: flex-end; justify-content: center;
padding: 10px;
.btn { align-items: center;
display: flex; color: #333;
align-content: center; font-size: 14px;
padding: 8px 10px; }
// border: 1px solid $themeColor; }
color: #666;
cursor: pointer;
&:hover {
color: $themeColor;
}
.svg-icon { .buttons {
font-size: 22px; display: flex;
margin: 0 4px; justify-content: flex-end;
}
} .btn {
display: flex;
align-content: center;
padding: 8px 10px;
// border: 1px solid $deepBlue;
color: #666;
cursor: pointer;
&:hover {
color: $deepBlue;
}
.svg-icon {
font-size: 22px;
margin: 0 4px;
}
} }
}
} }
</style> </style>
\ No newline at end of file
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;
} }
} }
...@@ -1204,4 +1203,4 @@ $themeColor: #a30e0c; ...@@ -1204,4 +1203,4 @@ $themeColor: #a30e0c;
-webkit-animation-play-state: paused; -webkit-animation-play-state: paused;
/* Safari 和 Chrome */ /* Safari 和 Chrome */
} }
</style> </style>
\ No newline at end of file
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;
...@@ -571,4 +571,4 @@ $text-indent: 16px; ...@@ -571,4 +571,4 @@ $text-indent: 16px;
color: #fff; color: #fff;
} }
} }
</style> </style>
\ No newline at end of file
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
$getFullUrl(item.faceImagePressUrl || item.faceImageUrl) :src="
" alt="" /> $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
"
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>
\ No newline at end of file
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;
...@@ -81,4 +72,4 @@ $blue: $themeColor; ...@@ -81,4 +72,4 @@ $blue: $themeColor;
flex: 1; flex: 1;
} }
} }
</style> </style>
\ No newline at end of file
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;
...@@ -313,4 +313,4 @@ export default { ...@@ -313,4 +313,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
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,16 +105,16 @@ $blue: $themeColor; ...@@ -105,16 +105,16 @@ $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 {
margin-left: 30px; margin-left: 30px;
} }
</style> </style>
\ No newline at end of file
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);
} }
...@@ -320,4 +320,4 @@ export default { ...@@ -320,4 +320,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
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);
} }
...@@ -359,10 +358,10 @@ $text-indent: 16px; ...@@ -359,10 +358,10 @@ $text-indent: 16px;
padding: 36px 30px; padding: 36px 30px;
transition: all 0.5s ease; transition: all 0.5s ease;
background: #fff; background: #fff;
.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;
...@@ -434,4 +433,4 @@ $text-indent: 16px; ...@@ -434,4 +433,4 @@ $text-indent: 16px;
color: #fff; color: #fff;
} }
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论