Skip to content

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

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

上级 1d51c628
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 800 行增加 和 333 行删除
src/assets/styles/index.scss
浏览文件 @ 9cb5fc3a
......@@ -3,6 +3,7 @@
/**适应移动端 */
@media screen and (max-width: 500px) {
html,
body {
width: 1920px;
......@@ -41,7 +42,7 @@ li {
//一些公共样式
.empty-space {
height: 100px;
background-color: $themeColor;
background-color: $deepBlue;
width: 100%;
}
......@@ -64,6 +65,7 @@ li {
}
.content-wrapper {
// width: 1200px;
// width: 100vw;
// padding: 0 13%;
......@@ -71,22 +73,23 @@ li {
/* display: flex;
flex-direction: column;
align-items: center; */
> .content {
>.content {
width: 1400px;
margin: auto;
}
}
.el-pager {
.btn-quicknext,
.number {
background: transparent !important;
border: 1px solid $themeColor !important;
color: $themeColor !important;
border: 1px solid $deepBlue !important;
color: $deepBlue !important;
}
.number.active {
background: $themeColor !important;
background: $deepBlue !important;
color: #fff !important;
}
}
......@@ -94,9 +97,11 @@ li {
.content-wrapper:not(.relic) {
padding-top: 0 !important;
padding-bottom: 40px !important;
> .content {
>.content {
box-shadow: none !important;
> .search {
>.search {
// padding: 24px 20%;
// padding: 16px 13%;
padding: 16px 0 32px;
......@@ -107,7 +112,7 @@ li {
width: 100%;
height: 46px;
> div {
>div {
width: 100%;
height: 100%;
}
......@@ -162,7 +167,7 @@ li {
padding: 0 !important;
height: auto !important;
> .name {
>.name {
padding: 20px 0 !important;
margin: 0 !important;
font-size: 20px !important;
......@@ -184,7 +189,7 @@ li {
border: 2px solid #999;
}
> div[class|='deco'] {
>div[class|='deco'] {
z-index: 2;
}
}
......@@ -195,7 +200,7 @@ li {
.desc {
background: none !important;
> .name {
>.name {
color: #0e45ab !important;
}
}
......@@ -208,10 +213,11 @@ li {
}
}
> .pagination-container {
> .pagination {
>.pagination-container {
>.pagination {
margin: 0 !important;
background-image: none !important;
.el-pager {
li {
width: 42px;
......@@ -221,7 +227,7 @@ li {
background: #fff;
min-width: 0;
margin: 0 16px;
color: $themeColor;
color: $deepBlue;
border-radius: 0 !important;
}
......@@ -236,6 +242,7 @@ li {
.display,
.cultural-relic {
.search-bar,
.content-wrapper,
.type-group {
......@@ -245,12 +252,14 @@ li {
.search-bar {
.search-item {
line-height: 46px;
&.none-border {
background: transparent !important;
}
> .el-checkbox {
>.el-checkbox {
color: #2b2d35;
.el-checkbox__inner {
width: 20px;
height: 20px;
......@@ -260,18 +269,21 @@ li {
border-width: 3px;
}
}
.el-checkbox__label {
font-size: 16px;
line-height: 20px;
}
.el-checkbox__input.is-checked {
.el-checkbox__inner {
background-color: $themeColor;
border-color: $themeColor;
background-color: $deepBlue;
border-color: $deepBlue;
}
+ .el-checkbox__label {
+.el-checkbox__label {
font-weight: 600;
color: $themeColor;
color: $deepBlue;
}
}
}
......@@ -286,9 +298,10 @@ li {
font-size: 16px;
padding: 8px 14%;
background-color: #fff;
.list-total-num {
font-size: 24px;
color: $themeSecondaryColor;
color: $yellow;
margin: 0 6px;
}
}
......@@ -296,7 +309,7 @@ li {
#app {
#navbar {
+ div {
+div {
min-height: 440px;
}
}
......
src/assets/styles/variable.scss
浏览文件 @ 9cb5fc3a
// $themeColor:#223e36;
// $themeColor: #2069c4;
// $themeColor:#132c33;
$themeColor: #252F57;
$themeSecondaryColor:#dfab46;
// $deepBlue:#223e36;
// $deepBlue: #2069c4;
// $deepBlue:#132c33;
$deepBlue: #252F57;
$yellow: #dfab46;
$puHuiTi: "Alibaba-PuHuiTi";
$siyuanSongBold: "SourceHanSerifCN-Bold";
$font-size-sm:14px;
$font-size-base:16px;
$font-size-lg:22px;
$font-size-sm: 14px;
$font-size-base: 16px;
$font-size-lg: 22px;
$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 {
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.volume {
position: relative;
.volume-progress {
......@@ -248,7 +248,7 @@ export default {
color: #5c5e66;
display: flex;
align-items: center;
color: $themeColor;
color: $deepBlue;
font-size: 38px;
}
.progress-bar-bg {
......@@ -263,7 +263,7 @@ export default {
margin: 0 10px;
}
.progress-bar {
background-color: $themeColor;
background-color: $deepBlue;
width: 0%;
height: 10px;
border-radius: 5px;
......@@ -281,4 +281,3 @@ export default {
}
}
</style>
src/components/Breadcrumb/index.vue
浏览文件 @ 9cb5fc3a
<template>
<el-breadcrumb separator-class="el-icon-arrow-right" :class="{ 'is-light': isLight }">
<el-breadcrumb-item v-for="(item, index) in list" :key="index" :to="{ path: item.path }">{{ item.name
}}</el-breadcrumb-item>
</el-breadcrumb>
<el-breadcrumb
separator-class="el-icon-arrow-right"
:class="{ 'is-light': isLight }"
>
<el-breadcrumb-item
v-for="(item, index) in list"
:key="index"
:to="{ path: item.path }"
>{{ item.name }}</el-breadcrumb-item
>
</el-breadcrumb>
</template>
<script>
export default {
name: 'Breadcrumb',
props: {
list: {
type: Array,
default: [
{
name: '首页',
path: "/"
}
]
name: "Breadcrumb",
props: {
list: {
type: Array,
default: [
{
name: "首页",
path: "/",
},
isLight: {
type: Boolean,
default: false
}
}
}
],
},
isLight: {
type: Boolean,
default: false,
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-breadcrumb__inner {
color: #666;
font-size: 18px;
color: #666;
font-size: 18px;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: $themeColor;
color: $deepBlue;
}
::v-deep .el-breadcrumb__inner.is-link:hover {
color: #b5800a;
color: #b5800a;
}
.isLight {
::v-deep .el-breadcrumb__inner {
color: #ccc;
font-size: 18px;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #fff;
}
::v-deep .el-breadcrumb__inner {
color: #ccc;
font-size: 18px;
}
::v-deep .el-breadcrumb__inner.is-link:hover {
color: #b5800a;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #fff;
}
::v-deep .el-breadcrumb__inner.is-link:hover {
color: #b5800a;
}
}
</style>
\ No newline at end of file
</style>
src/components/Footer/index.vue
浏览文件 @ 9cb5fc3a
<!-- -->
<template>
<div :class="{
footer: true,
//isHome:isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5',
isJYYCC: navbarStyle == '6',
isYLGDYW: navbarStyle == '7',
}">
<div
:class="{
footer: true,
//isHome:isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4',
isSMGZ: navbarStyle == '5',
isJYYCC: navbarStyle == '6',
isYLGDYW: navbarStyle == '7',
}"
>
<!-- <span>贵州省文化和旅游厅博物馆处版权所有</span>
<span>中国知网提供技术支持</span> -->
<div class="logo">
......@@ -25,7 +27,11 @@
{{ item.title }}
</div>
<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 }}
</li>
</ul>
......@@ -40,19 +46,24 @@
<el-popover placement="top-start" width="280" trigger="hover">
<span slot="reference">小程序</span>
<div class="wechat-app">
<img src="@/assets/imgs/wechat-app.jpg" alt="">
<img src="@/assets/imgs/wechat-app.jpg" alt="" />
</div>
</el-popover>
</span>
</div>
</div>
<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-现在 贵州省文化和旅游厅
</div>
<div class="support">网站建设：贵州同方知网科技发展有限公司</div>
<div class="advice">
<el-tooltip placement="top-start" content="谷歌 火狐 最佳分辨率（1920 x 1080）">
<el-tooltip
placement="top-start"
content="谷歌 火狐 最佳分辨率（1920 x 1080）"
>
<span>浏览建议</span>
</el-tooltip>
</div>
......@@ -166,7 +177,7 @@ export default {
padding: 30px 0;
justify-content: center;
align-items: center;
background-color: $themeColor;
background-color: $deepBlue;
flex-direction: column;
color: #fefefe;
font-size: 14px;
......@@ -188,8 +199,6 @@ export default {
.menu-item {
margin-right: 20px;
cursor: pointer;
}
}
......@@ -207,13 +216,11 @@ export default {
}
.copyright {
&>a {
& > a {
text-decoration: none;
color: #fff;
}
}
}
.map {
......
src/components/ListBanner/index.vue
浏览文件 @ 9cb5fc3a
......@@ -165,7 +165,7 @@ export default {
.text {
font-size: 28px;
font-weight: 400;
color: $themeColor;
color: $deepBlue;
}
}
}
......
src/components/MenuList/index.vue
浏览文件 @ 9cb5fc3a
......@@ -64,15 +64,15 @@ export default {
.el-menu-item {
background-color: #f5f5f9;
font-size: 16px;
// color: $themeColor;
// color: $deepBlue;
&:hover {
background-color: $themeColor;
background-color: $deepBlue;
color: #fff;
}
}
.el-menu-item.is-active {
color: $themeColor;
color: $deepBlue;
font-weight: bold;
}
.blueStyle {
......@@ -87,7 +87,7 @@ export default {
text-overflow: ellipsis;
&:hover {
background: rgba($color: #fff, $alpha: 0.6);
color: $themeColor;
color: $deepBlue;
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/ReaderOperations/index.vue
浏览文件 @ 9cb5fc3a
<template>
<div class="reader-operations">
<span class="operations" :style="{
color,
}">
<span
class="operations"
:style="{
color,
}"
>
<span class="operation-item">
<svg-icon icon-class="view" :style="{
fontSize: iconSize + 'px',
color,
}"></svg-icon>
<svg-icon
icon-class="view"
:style="{
fontSize: iconSize + 'px',
color,
}"
></svg-icon>
<span>{{ formatNum(info.browseCount) }}</span>
</span>
<span class="operation-item">
<svg-icon @click="handleLike" :icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'" :style="{
fontSize: iconSize + 'px',
color: info.loveCountStatus ? selectColor : color,
}"></svg-icon>
<svg-icon
@click="handleLike"
:icon-class="info.loveCountStatus ? 'dianzan-s' : 'dianzan'"
:style="{
fontSize: iconSize + 'px',
color: info.loveCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{
formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
formatNum(info.loveCount) == 0 ? "点赞" : formatNum(info.loveCount)
}}</span>
</span>
<span class="operation-item" @click="handleCollect">
<svg-icon :icon-class="info.collectCountStatus ? 'collect-s' : 'collect'" :style="{
fontSize: iconSize + 'px',
color: info.collectCountStatus ? selectColor : color,
}"></svg-icon>
<svg-icon
:icon-class="info.collectCountStatus ? 'collect-s' : 'collect'"
:style="{
fontSize: iconSize + 'px',
color: info.collectCountStatus ? selectColor : color,
}"
></svg-icon>
<span>{{
formatNum(info.collectCount) == 0
? "收藏"
: formatNum(info.collectCount)
formatNum(info.collectCount) == 0
? "收藏"
: formatNum(info.collectCount)
}}</span>
</span>
<span class="operation-item" @click="handleShare">
<svg-icon icon-class="share2" :style="{
fontSize: iconSize + 'px',
color,
}"></svg-icon>
<svg-icon
icon-class="share2"
:style="{
fontSize: iconSize + 'px',
color,
}"
></svg-icon>
<span>分享</span>
</span>
</span>
<el-dialog title="登录提示" :visible.sync="loginDialogVisible" width="30%" :before-close="handleLoginClose"
append-to-body>
<el-dialog
title="登录提示"
:visible.sync="loginDialogVisible"
width="30%"
:before-close="handleLoginClose"
append-to-body
>
<span>读者功能需登录进行使用，是否去登录？</span>
<span slot="footer" class="dialog-footer">
<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>
</el-dialog>
<el-dialog title="分享给朋友" :visible.sync="shareDialogVisible" width="40%" :before-close="handleShareClose"
append-to-body>
<el-dialog
title="分享给朋友"
:visible.sync="shareDialogVisible"
width="40%"
:before-close="handleShareClose"
append-to-body
>
<!-- <div class="qrcode">
</div> -->
<div class="copy">
......@@ -57,7 +85,9 @@
<template slot="append">
<el-button type="text" @click.native="copyUrl">
<svg-icon icon-class="copy"></svg-icon>
复制链接</el-button></template>
复制链接</el-button
></template
>
</el-input>
</div>
</el-dialog>
......@@ -128,8 +158,7 @@ export default {
}
setTimeout(() => {
this.$emit("reload", this.info.crId || this.info.exhibitionId);
}, 300)
}, 300);
});
} else {
this.loginDialogVisible = true;
......@@ -161,7 +190,7 @@ export default {
}
setTimeout(() => {
this.$emit("reload", this.info.crId || this.info.exhibitionId);
}, 300)
}, 300);
});
} else {
this.loginDialogVisible = true;
......@@ -239,7 +268,7 @@ export default {
}
.el-button--text {
color: $themeColor;
color: $deepBlue;
}
.copy {
......@@ -271,7 +300,7 @@ export default {
.el-button--primary {
border: none;
background-color: $themeColor;
background-color: $deepBlue;
}
}
</style>
\ No newline at end of file
</style>
src/components/SlideImageGroup/index.vue
浏览文件 @ 9cb5fc3a
<template>
<div class="slide-img-group">
<div class="list">
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide-item" v-for="(item, index) in imgList" :key="index" @click="handleClickItem(item)">
<swiper
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="" /> -->
<div class="img-container" @click="handelPreviewImages(imgList, index)">
<div
class="img-container"
@click="handelPreviewImages(imgList, index)"
>
<slot name="img" :item="item"></slot>
</div>
<slot name="info" :item="item" />
......@@ -17,7 +29,6 @@
<span>查看大图</span>
</div> -->
</swiper-slide>
<!--分页器。如果放置在swiper外面，需要自定义样式。-->
</swiper>
......@@ -28,13 +39,16 @@
<div class="swiper-button-prev swiper-button-white" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
</div>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="previewList"
:initial-index="initialIndex" />
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="previewList"
:initial-index="initialIndex"
/>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
......@@ -77,16 +91,16 @@ export default {
},
},
imgViewerVisible: false,
initialIndex: 0
initialIndex: 0,
};
},
mounted() { },
mounted() {},
methods: {
handelPreviewImages(items, index) {
this.imgViewerVisible = true;
this.previewList = items.map((item) => this.$getFullUrl(item.url));
this.initialIndex = index
this.initialIndex = index;
},
closeImgViewer() {
this.imgViewerVisible = false;
......@@ -98,12 +112,12 @@ export default {
},
};
</script>
<style scoped lang="scss">
.slide-img-group {
// height: 100%;
height: 240px;
.list{
.list {
position: relative;
display: flex;
justify-content: center;
......@@ -112,7 +126,7 @@ export default {
.swiper-container {
// padding: 0 60px;
width:calc(100% - 140px);
width: calc(100% - 140px);
// overflow-y: auto;
::v-deep .swiper-wrapper {
display: flex;
......@@ -164,7 +178,7 @@ export default {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: rgba($themeColor,0.4);
background-color: rgba($deepBlue, 0.4);
transform: translateY(-20px);
color: #333;
}
......@@ -193,18 +207,14 @@ export default {
}
::v-deep .swiper-pagination-bullets {
bottom:-10px;
.swiper-pagination-bullet{
bottom: -10px;
.swiper-pagination-bullet {
margin-right: 10px;
width: 10px;
height: 10px;
}
.swiper-pagination-bullet-active{
background: $themeColor;
.swiper-pagination-bullet-active {
background: $deepBlue;
}
}
</style>
\ No newline at end of file
src/components/Video/index.vue
浏览文件 @ 9cb5fc3a
<template>
<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="play-btn">
<i class="el-icon-caret-right"></i>
......@@ -53,7 +58,7 @@ export default {
};
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.video-container {
position: relative;
height: 100%;
......@@ -120,8 +125,8 @@ export default {
}
.blue {
.play-btn {
border: 2px solid $themeColor;
color: $themeColor;
border: 2px solid $deepBlue;
color: $deepBlue;
}
}
</style>
\ No newline at end of file
</style>
src/components/VideoPlayer/index.vue
浏览文件 @ 9cb5fc3a
<template>
<div class="m-video">
<video-player ref="videoPlayer" @play="autoIncrement" @timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied" :playsinline="true" :options="playerOptions">
<video-player
ref="videoPlayer"
@play="autoIncrement"
@timeupdate="onPlayerTimeupdate($event)"
@ready="playerReadied"
:playsinline="true"
:options="playerOptions"
>
</video-player>
</div>
</template>
......@@ -16,14 +22,14 @@ export default {
},
computed: {
player() {
return this.$refs.videoPlayer.player
return this.$refs.videoPlayer.player;
},
},
watch:{
src(newSrc){
console.log('newSrc',newSrc);
this.toggle(newSrc)
}
watch: {
src(newSrc) {
console.log("newSrc", newSrc);
this.toggle(newSrc);
},
},
data() {
return {
......@@ -76,11 +82,11 @@ export default {
let player = this.$refs.videoPlayer.player;
player.play();
},
playerReadied(player) { },
playerReadied(player) {},
toggle(newSrc){
this.player.src(newSrc)
}
toggle(newSrc) {
this.player.src(newSrc);
},
},
};
</script>
......@@ -93,10 +99,10 @@ export default {
height: 100%;
.video-js {
&:hover{
.vjs-big-play-button{
&:hover {
.vjs-big-play-button {
// background-color: #fff;
// color: $themeColor;
// color: $deepBlue;
}
}
video {
......@@ -117,7 +123,7 @@ export default {
transform: translate(-50%, -50%);
font-size: 50px;
color: #fff;
background-color: $themeColor;
background-color: $deepBlue;
}
.vjs-control-bar {
......
src/views/boutique/index-old.vue
浏览文件 @ 9cb5fc3a
......@@ -33,8 +33,10 @@
<YLGDYW v-else-if="activeTab == 'ylgdyw'" />
<JYYCC v-else-if="activeTab == 'jyycc'" />
<div v-else class="img-container">
<img :src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)
" alt="" />
<img
:src="require(`@/assets/imgs/boutique/${activeTab}.jpg`)"
alt=""
/>
</div>
</div>
</div>
......@@ -42,14 +44,14 @@
</template>
<script>
import mTabs from '@/views/home/components/Boutique.vue'
import mTabs from "@/views/home/components/Boutique.vue";
import SMGZ from "./components/SMGZ";
import YLGDYW from "./components/YLGDYW";
import JYYCC from "./components/jyycc";
import { mapGetters } from "vuex";
export default {
name: "Boutique",
components: { mTabs, SMGZ, YLGDYW,JYYCC },
components: { mTabs, SMGZ, YLGDYW, JYYCC },
data() {
return {
tabs: [
......@@ -143,7 +145,7 @@ export default {
position: relative;
overflow: hidden;
>img {
> img {
height: 500px;
object-fit: cover;
}
......@@ -220,7 +222,7 @@ export default {
overflow: hidden;
z-index: 1;
>p {
> p {
margin: 0;
font-size: 46px;
font-weight: 600;
......@@ -235,7 +237,7 @@ export default {
animation: hue 6s infinite linear;
}
>span {
> span {
font-weight: 600;
font-family: "宋体";
font-size: 24px;
......@@ -255,13 +257,13 @@ export default {
width: 100%;
bottom: 0;
>li {
> li {
flex: 1;
>div {
> div {
text-align: center;
>span {
> span {
font-size: 20px;
color: #333;
font-weight: 600;
......@@ -278,14 +280,14 @@ export default {
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $themeColor;
border-bottom: 3px solid $deepBlue;
border-radius: 30px;
}
}
}
&.active {
>span {
> span {
position: relative;
color: #003fa7;
text-shadow: 6px 2px 2px #999;
......@@ -296,7 +298,7 @@ export default {
left: 0;
width: 100%;
bottom: -10px;
border-bottom: 3px solid $themeColor;
border-bottom: 3px solid $deepBlue;
border-radius: 30px;
}
}
......@@ -306,7 +308,6 @@ export default {
}
.boutique-content {
.focus-content {
// padding: 20px 0;
// margin: 20px;
......@@ -320,7 +321,7 @@ export default {
// font-weight: 600;
// background: rgb(239 247 255);
>p {
> p {
margin: 0;
}
......
src/views/ccProduct/index.vue
浏览文件 @ 9cb5fc3a
......@@ -8,22 +8,51 @@
/> -->
<div class="content-wrapper">
<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-select class="years item" 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-select
class="years item"
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-select>
</el-col>
<el-col :span="6">
<el-cascader class="years item" v-model="regionCode" :options="regionTree" :props="culturalRegionProps"
placeholder="请选择所属地区" filterable @change="handleRegionChange" clearable popper-class="cascader"
:show-all-levels="false">
<el-cascader
class="years item"
v-model="regionCode"
:options="regionTree"
:props="culturalRegionProps"
placeholder="请选择所属地区"
filterable
@change="handleRegionChange"
clearable
popper-class="cascader"
:show-all-levels="false"
>
</el-cascader>
</el-col>
<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-col>
<el-col :span="6">
......@@ -40,12 +69,26 @@
件/套
</div>
<el-row :gutter="40" class="cr-list">
<el-col :span="item.status == 1 ? 6 : 0" class="cr-item" @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">
<el-col
:span="item.status == 1 ? 6 : 0"
class="cr-item"
@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">
<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 class="desc">
<div class="name">{{ item.title }}</div>
......@@ -73,18 +116,28 @@
</div>
</el-col>
</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">
<el-pagination @size-change="handleSizeChange" @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
@size-change="handleSizeChange"
@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>
</div>
</div>
</div>
</div>
</template>
<script>
import ListBanner from "@/components/ListBanner";
import { getCcProductList } from "@/api/literature";
......@@ -242,20 +295,19 @@ export default {
}
</style>
<style lang="scss" scoped>
$blue: $themeColor;
$blue: $deepBlue;
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: $themeColor;
// background-color: $deepBlue;
// color: #fff;
.content-wrapper {
padding-top: 60px;
background-color: #fff;
padding-bottom: 126px;
.content {
// width: 100%;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
......@@ -273,19 +325,18 @@ $text-indent: 16px;
}
.total {
padding-bottom:16px;
padding-bottom: 16px;
display: flex;
justify-content: flex-end;
font-size: 16px;
align-items: center;
.list-total-num {
font-size: 24px;
color: $themeSecondaryColor;
color: $yellow;
margin: 0 6px;
}
}
.cr-list {
// padding: 0 74px;
......@@ -301,14 +352,13 @@ $text-indent: 16px;
transition: all 0.5s ease;
&:hover {
border: 2px solid $themeColor;
border: 2px solid $deepBlue;
.face-image {
transform: scale(1.2);
}
.img-container {
.deco-left-top,
.deco-left-bottom,
.deco-right-top,
......@@ -316,12 +366,10 @@ $text-indent: 16px;
display: block;
}
}
}
.img-container {
background-color: rgba($themeColor, 0.1);
background-color: rgba($deepBlue, 0.1);
height: 268px;
cursor: pointer;
transition: all 0.5s ease;
......@@ -383,7 +431,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: $themeColor;
color: $deepBlue;
margin-bottom: 18px;
}
......@@ -468,5 +516,4 @@ $text-indent: 16px;
height: 116px;
}
}
</style>
\ No newline at end of file
</style>
src/views/culturalRelic/Detail.vue
浏览文件 @ 9cb5fc3a
......@@ -477,7 +477,7 @@ export default {
images: this.imgList,
options: {
initialViewIndex: index,
zoomRatio:1.4,
zoomRatio: 1.4,
},
});
},
......@@ -894,7 +894,7 @@ $node-w: 700px;
.swiper-button-prev {
background-image: none;
border: 2px solid #666;
background-color: rgba($themeColor, 0.5);
background-color: rgba($deepBlue, 0.5);
width: 60px;
height: 60px;
border-radius: 50%;
......@@ -952,7 +952,7 @@ $node-w: 700px;
&:hover,
&.active {
cursor: pointer;
// background-color: $themeColor;
// background-color: $deepBlue;
background-image: url(@/assets/imgs/show/outer-active.png);
> span {
......@@ -1001,7 +1001,7 @@ $node-w: 700px;
:hover {
background: #fff;
color: $themeColor;
color: $deepBlue;
}
}
}
......
src/views/culturalRelic/index-hasbg.vue
浏览文件 @ 9cb5fc3a
<template>
<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-wrapper">
<div class="search-item" @click="handleClickSearchBar('type')">
......@@ -26,7 +31,6 @@
<i class="el-icon-search"></i>
</div>
</div>
</div>
<transition name="el-zoom-in-top">
<div class="search-panel" v-show="showSearchPanel">
......@@ -537,7 +541,7 @@ $text-indent: 16px;
.cr-list {
// padding: 0 74px;
min-height: 500px;
.cr-item {
margin-bottom: 40px;
.container {
......@@ -554,7 +558,7 @@ $text-indent: 16px;
text-align: center;
text-align: center;
&:hover {
// border: 2px solid $themeColor;
// border: 2px solid $deepBlue;
// border-radius: 100%;
......@@ -574,7 +578,6 @@ $text-indent: 16px;
}
}
.hover-bg {
> div {
opacity: 1;
......@@ -683,7 +686,7 @@ $text-indent: 16px;
.name {
font-size: 18px;
font-weight: bold;
color: $themeColor;
color: $deepBlue;
margin-bottom: 18px;
width: 100%;
white-space: nowrap;
......@@ -869,7 +872,7 @@ $text-indent: 16px;
width: 28px;
height: 28px;
border-radius: 50%;
background: $themeColor;
background: $deepBlue;
min-width: 0;
margin: 0 10px;
color: #b7b7b7;
......
src/views/culturalRelic/index.vue
浏览文件 @ 9cb5fc3a
......@@ -10,13 +10,21 @@
<div class="search-wrapper">
<el-row :gutter="40">
<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>
<i class="el-icon-caret-bottom"></i>
</div>
</el-col>
<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>
<i class="el-icon-caret-bottom"></i>
</div>
......@@ -64,7 +72,7 @@
</el-scrollbar>
</div>
</transition>
<div class="list-total">
<div class="list-total">
共计文物
<span class="list-total-num">{{ list.total }}</span>
件/套
......@@ -137,12 +145,12 @@
</div>
</div>
</template>
<script>
import ListBanner from "@/components/ListBanner";
import { getCulturalRelicList, getCrExistDict } from "@/api/culturalRelic";
import { mapGetters } from "vuex";
import {debounce} from '@/utils/utils'
import { debounce } from "@/utils/utils";
export default {
name: "CulturalRelic",
components: { ListBanner },
......@@ -172,7 +180,7 @@ export default {
currentYears: "文物年代",
yearList: [],
typeList: [],
windowClick: null
windowClick: null,
};
},
computed: {
......@@ -208,36 +216,7 @@ export default {
});
this.typeList = typeList;
this.yearList = yearList;
// await this.$store.dispatch("dict/getDictList", ["culturalRelicType"]);
// 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)
this.windowClick = debounce(this.handleWindowClick, 200, true);
window.addEventListener("click", this.windowClick);
},
mounted() {
......@@ -251,9 +230,6 @@ export default {
this.onlyShow3d = value;
this.search();
},
// keyword(value) {
// debounce(this.handleKeyWordChange(value), 1000); //500ms
// },
},
methods: {
search() {
......@@ -361,26 +337,30 @@ export default {
this.showSearchPanel = false;
},
handleWindowClick(em) {
let parent = document.getElementsByClassName('search-panel')[0]
let parent2 = document.getElementById('type-select')
let parent3 = document.getElementById('year-select')
if (parent.contains(em.target) || parent2.contains(em.target) || parent3.contains(em.target)) {
return
let parent = document.getElementsByClassName("search-panel")[0];
let parent2 = document.getElementById("type-select");
let parent3 = document.getElementById("year-select");
if (
parent.contains(em.target) ||
parent2.contains(em.target) ||
parent3.contains(em.target)
) {
return;
} else {
this.showSearchPanel = false
this.showSearchPanel = false;
}
}
},
},
};
</script>
<style lang="scss" scoped>
$text-indent: 16px;
.cultural-relic {
width: 100%;
// background-color: $themeColor;
// background-color: $deepBlue;
// color: #fff;
.search-bar {
display: flex;
......@@ -388,7 +368,7 @@ $text-indent: 16px;
flex-direction: column;
// padding: 24px 20%;
// padding: 16px 13%;
padding:48px 0 16px;
padding: 48px 0 16px;
background: #fff;
.search-wrapper {
// display: flex;
......@@ -416,15 +396,15 @@ $text-indent: 16px;
margin-right: 20px;
cursor: pointer;
i{
i {
font-size: 18px;
&:hover{
&:hover {
color: #000;
}
}
.svg-icon{
.svg-icon {
font-size: 18px;
&:hover{
&:hover {
color: #000;
}
}
......@@ -502,6 +482,7 @@ $text-indent: 16px;
display: flex;
justify-content: center;
font-weight: 600;
background-color: rgba($color: $deepBlue, $alpha: 0.3);
::v-deep .el-scrollbar__view {
display: flex;
......@@ -531,6 +512,9 @@ $text-indent: 16px;
.text {
cursor: pointer;
&:hover {
color: $deepBlue;
}
}
.divider {
......@@ -583,7 +567,7 @@ $text-indent: 16px;
transition: all 0.5s ease;
&:hover {
// border: 2px solid $themeColor;
// border: 2px solid $deepBlue;
.face-image {
transform: scale(1.2);
......@@ -597,7 +581,6 @@ $text-indent: 16px;
display: block;
}
}
}
.img-container {
......@@ -668,7 +651,7 @@ $text-indent: 16px;
font-size: 20px;
padding: 20px 0;
// font-weight: bold;
// color: $themeColor;
// color: $deepBlue;
color: #333;
// margin-bottom: 18px;
width: 100%;
......@@ -803,7 +786,7 @@ $text-indent: 16px;
background: #fff;
min-width: 0;
margin: 0 16px;
color: $themeColor;
color: $deepBlue;
}
.active {
......@@ -815,4 +798,4 @@ $text-indent: 16px;
//可设置滚动条颜色
background: rgba($color: #000000, $alpha: 0.4);
}
</style>
\ No newline at end of file
</style>
src/views/display/components/ChStyle-old.vue
浏览文件 @ 9cb5fc3a
......@@ -2,12 +2,7 @@
<div class="ch-style">
<div class="content" id="content">
<div
class="
content-item
sliders
wow
animate__animated animate__fadeInRightBig
"
class="content-item sliders wow animate__animated animate__fadeInRightBig"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
......@@ -55,12 +50,12 @@
<el-row>
<el-col class="item">
<div class="label">关键词：</div>
<div class="value">{{ displayDetail.keyword ||'暂无'}}</div>
<div class="value">{{ displayDetail.keyword || "暂无" }}</div>
</el-col>
<el-col class="item" v-if="dicts.displayType">
<div class="label">展览类型：</div>
<div class="value">
{{ dicts.displayType[displayDetail.type]||'暂无' }}
{{ dicts.displayType[displayDetail.type] || "暂无" }}
</div>
</el-col>
</el-row>
......@@ -68,12 +63,17 @@
<el-col class="item" v-if="dicts.displayCharacter">
<div class="label">展览性质：</div>
<div class="value">
{{ dicts.displayCharacter[displayDetail.displayCharacter] ||'暂无'}}
{{
dicts.displayCharacter[displayDetail.displayCharacter] ||
"暂无"
}}
</div>
</el-col>
<el-col class="item">
<div class="label">展览单位：</div>
<div class="value">{{ displayDetail.deptName ||'暂无'}}</div>
<div class="value">
{{ displayDetail.deptName || "暂无" }}
</div>
</el-col>
</el-row>
</div>
......@@ -120,12 +120,7 @@
</el-carousel>
</div> -->
<div
class="
content-item
videos
wow
animate__animated animate__fadeInRight
"
class="content-item videos wow animate__animated animate__fadeInRight"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<div class="video-title">
......@@ -536,8 +531,8 @@ export default {
</script>
<style lang="scss">
.intro-content{
p{
.intro-content {
p {
font-family: $defaultFontFamily !important;
}
}
......@@ -789,22 +784,22 @@ $themeRed: #892325;
// margin-right: 10px;
// }
font-size: 32px;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
font-family: KaiTi;
font-weight: 400;
color: #0f0f0f;
margin-bottom: 43px;
position: relative;
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
}
&::after {
content: "";
display: inline-block;
width: 60px;
height: 2px;
background-color: #caad91;
position: absolute;
left: 0;
bottom: -12px;
}
}
.video-names {
display: flex;
......@@ -1061,7 +1056,7 @@ $themeRed: #892325;
a:hover {
cursor: pointer;
color: $themeColor;
color: $deepBlue;
}
}
......@@ -1101,4 +1096,4 @@ $themeRed: #892325;
height: 100%;
transform: translateX(0) scale(1) !important;
}
</style>
\ No newline at end of file
</style>
src/views/museum/index.vue
浏览文件 @ 9cb5fc3a
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论