This commit is contained in:
parent
ae5b3b7bcd
commit
7fc75735b5
|
|
@ -12,6 +12,8 @@ module.exports = {
|
|||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
// 关闭组件命名规则
|
||||
'vue/multi-word-component-names':'off'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
24
package.json
24
package.json
|
|
@ -8,11 +8,14 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.8",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.6.3",
|
||||
"jquery": "^3.7.1",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3",
|
||||
"vuex": "^4.0.0"
|
||||
"vuex": "^4.0.0",
|
||||
"vue-quill-editor": "^3.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
|
|
@ -25,6 +28,23 @@
|
|||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0"
|
||||
"sass-loader": "^12.0.0",
|
||||
"vue-i18n": "^9.10.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-vars":"off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 6.1 KiB |
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<title>连云港市革命纪念馆</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/* 分页 */
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
/* 文字风格 Sans-serif 各笔画粗细相同，Serif 笔画粗细不同，monospace 等宽体，cursive草书，fantasy梦幻 */
|
||||
font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
|
||||
'黑体', '宋体', Arial;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 重置各标签的默认样式 */
|
||||
a,
|
||||
body,
|
||||
center,
|
||||
cite,
|
||||
code,
|
||||
dd,
|
||||
del,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
em,
|
||||
fieldset,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
form,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
header,
|
||||
hr,
|
||||
html,
|
||||
img,
|
||||
input,
|
||||
label,
|
||||
legend,
|
||||
li,
|
||||
mark,
|
||||
ol,
|
||||
p,
|
||||
section,
|
||||
span,
|
||||
textarea,
|
||||
time,
|
||||
td,
|
||||
th,
|
||||
ul {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-style: normal;
|
||||
box-sizing: border-box;
|
||||
/* 自动换行 */
|
||||
word-wrap: break-word;
|
||||
/* 强制英文单词断行 */
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 设置标签为块级分类 */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
fieldset,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 去除input标签的默认样式 */
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
font-family: 'Microsoft YaHei', sans-serif, 'Helvetica Neue', Helvetica, Arial,
|
||||
'黑体', '宋体', Arial;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* 禁止多文本框手动拖动大小 */
|
||||
textarea {
|
||||
resize: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* 去掉按下的阴影盒子 */
|
||||
input,
|
||||
textarea,
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* 清除a标签下划线 */
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus,
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 清除列表前面的点 */
|
||||
ol,
|
||||
li,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 清除IE下图片的边框 */
|
||||
img {
|
||||
border-style: none;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
/* 解决chrome浏览器默认黄色背景问题 */
|
||||
input:-webkit-autofill,
|
||||
textarea:-webkit-autofill,
|
||||
select:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0 900px #fff inset;
|
||||
}
|
||||
|
||||
/* 设置默认滚动条样式 */
|
||||
::-webkit-input-placeholder {
|
||||
color: #afbdcc;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: #afbdcc;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
color: #afbdcc;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color: #afbdcc;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #cccccc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
::-webkit-resizer {
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 593 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<!-- 底部 -->
|
||||
<footer>
|
||||
<div class="bottom-imgs">
|
||||
<img class="footer-logo" :src="require('@/assets/imgs/logo.png')" @click="toHome" />
|
||||
<img class="footer-logo" :src="require('@/assets/imgs/logo.png')"/>
|
||||
</div>
|
||||
<a href="https://beian.miit.gov.cn "><img class="sheld" :src="require('@/assets/imgs/图层 105.png')" alt="" /></a>
|
||||
<div class="middle-msgs">
|
||||
<div class="middle-msgs" v-if="$i18n.locale=='zh'">
|
||||
<div>
|
||||
<span>版权所有：连云港市革命纪念馆</span>
|
||||
<span>
|
||||
|
|
@ -27,46 +28,47 @@
|
|||
<span>苏ICP备2023013855号</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-msgs" v-else>
|
||||
<img class="footer-img" v-if="$i18n.locale=='en'" src="@/assets/imgs/enFooter.png" alt="">
|
||||
<img class="footer-img" v-if="$i18n.locale=='ko'" src="@/assets/imgs/krFooter.png" alt="">
|
||||
<img class="footer-img" v-if="$i18n.locale=='jp'" src="@/assets/imgs/jpFooter.png" alt="">
|
||||
</div>
|
||||
<div class="wxgzh-all">
|
||||
<div class="wxgzh" >
|
||||
<img :src="require('@/assets/imgs/wxewm.png')" alt="" />
|
||||
<p>微信公众号</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<div class="modelBtm">
|
||||
<span class="msg">
|
||||
<p>版权所有：连云港市革命纪念馆</p>
|
||||
<p>苏ICP备2023013855号</p>
|
||||
<p>{{$t('main.copyright')}}</p>
|
||||
<p>{{$t('main.ba')}}</p>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "FootHeader",
|
||||
name: "FootPart",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lang: ''
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.lang = localStorage.getItem('langtype')
|
||||
},
|
||||
methods: {
|
||||
toHome() {
|
||||
if (this.lang == 'cn') {
|
||||
this.$router.push('/')
|
||||
} else {
|
||||
this.$router.push('/foreignlang')
|
||||
}
|
||||
}
|
||||
// toHome() {
|
||||
// if (this.lang == 'cn') {
|
||||
// this.$router.push('/')
|
||||
// } else {
|
||||
// this.$router.push('/foreignlang')
|
||||
// }
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/* 底部信息 */
|
||||
footer {
|
||||
/* height: 200px; */
|
||||
|
|
@ -106,7 +108,10 @@ footer {
|
|||
top: 30%;
|
||||
left: 38%;
|
||||
}
|
||||
|
||||
.middle-msgs .footer-img{
|
||||
width: 7rem;
|
||||
height: auto;
|
||||
}
|
||||
.middle-msgs div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -202,6 +207,13 @@ footer {
|
|||
|
||||
.modelBtm {
|
||||
display: block;
|
||||
.msg{
|
||||
padding: .4rem 0;
|
||||
p{
|
||||
font-size: .28rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,5 +273,4 @@ footer {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
|
@ -4,12 +4,54 @@
|
|||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo.png" alt="">
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="search-area">
|
||||
<div class="language">
|
||||
<span class="type">中文</span>
|
||||
<span class="type">English</span>
|
||||
<span class="type">한국어</span>
|
||||
<span class="type">日本語</span>
|
||||
<span class="type" @click="toggle('zh')">中文</span>
|
||||
<span class="type" @click="toggle('en')">English</span>
|
||||
<span class="type" @click="toggle('ko')">한국어</span>
|
||||
<span class="type" @click="toggle('jp')">日本語</span>
|
||||
</div>
|
||||
<div class="search">
|
||||
<span class="search_icon" @click="search"></span>
|
||||
<input class="search_input" type="text" laceholder="输入要搜索的内容" @keyup.enter="search" ref="searchMsg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-contain" v-if="$i18n.locale=='zh'">
|
||||
<div class="line">
|
||||
<p>日最大承载量：5000人</p>
|
||||
<p>日瞬时最大承载量：1000人</p>
|
||||
</div>
|
||||
<div class="line">
|
||||
<p>当前在馆人数：0 人</p>
|
||||
<p>当前游览舒适度：舒服</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showMenu" @click="showSmallMenu=!showSmallMenu">|||</div>
|
||||
</div>
|
||||
<div class="decorate-line"></div>
|
||||
<div class="menu">
|
||||
<div class="item" v-for="(item,index) in menu" :key="item.id" @click="toggleMenu(item,index)" @mouseover="hoveCurrent=index" @mouseleave="hoveCurrent=0">
|
||||
<div :class="{active: currentMenu==index}">
|
||||
{{$t(item.name)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-children" v-if="menu[hoveCurrent].children&&$i18n.locale=='zh'">
|
||||
<div class="item-children-style" v-for="(item,index) in menu[hoveCurrent].children" :key="index">
|
||||
<span class="children-name">{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-children" v-else-if="menu[currentMenu].children&&$i18n.locale=='zh'" >
|
||||
<div class="item-children-style" v-for="(item,index) in menu[currentMenu].children" :key="index" @click="jumpToList(menu[currentMenu].path,index)">
|
||||
<span class="children-name">{{item.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏菜单 -->
|
||||
<div class="small-menu" v-if="showSmallMenu">
|
||||
<div class="list">
|
||||
<div class="item" v-for="(item,index) in menu" :key="item.id" @click="toggleMenu(item,index)">
|
||||
<span> {{$t(item.name)}} </span>
|
||||
<span>></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,18 +62,283 @@ export default {
|
|||
name: "HeaderComp",
|
||||
data() {
|
||||
return {
|
||||
input1:'',
|
||||
currentMenu:0,
|
||||
hoveCurrent:0,
|
||||
showSmallMenu:false,
|
||||
menu:[
|
||||
{
|
||||
id: 1, name:'main.home',path:'/home', version:'all'
|
||||
},
|
||||
{
|
||||
id: 2, name:'main.introduce',path:'/introduce', version:'all',children:[
|
||||
{ name:'场馆简介' },
|
||||
{ name:'组织结构' },
|
||||
{ name:'领导成员' },
|
||||
{ name:'联系我们' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3, name:'main.digitHall',path:'/home', version:'all'
|
||||
},
|
||||
// {
|
||||
// id: 4, name:'工作动态',path:'/dynamic'
|
||||
// },
|
||||
{
|
||||
id: 5, name:'main.culture',path:'/relic', version:'all'
|
||||
},
|
||||
{
|
||||
id: 6, name:'main.search',path:'/search', version:'all',children:[
|
||||
{ name:'宣讲' },
|
||||
{ name:'陈展' },
|
||||
{ name:'小推车公益' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7, name:'main.guide',path:'/guide', version:'all'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
let language = localStorage.getItem('language')
|
||||
this.$i18n.locale = language || 'zh'
|
||||
if( this.$i18n.locale == 'zh'){
|
||||
let index = this.menu.findIndex(ele=>{
|
||||
return ele.name=='工作动态'
|
||||
})
|
||||
if(index==-1){
|
||||
this.menu.splice(3,0,{id:4,name:'工作动态',path:'/dynamic'})
|
||||
}
|
||||
}else{
|
||||
this.menu = this.menu.filter(ele=>{
|
||||
return ele.name!='工作动态'
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
toggleMenu(item,i){
|
||||
if(item.name=='main.digitHall'){
|
||||
window.open('http://www.backlightvr.com/tour/0738e24d171e6b6a')
|
||||
}else{
|
||||
this.currentMenu = i
|
||||
this.showSmallMenu = false
|
||||
this.$router.push({path: item.path})
|
||||
}
|
||||
},
|
||||
jumpToList(url,type){
|
||||
console.log(url,type)
|
||||
this.$router.push({path:url,query:{type:type}})
|
||||
},
|
||||
toggle(language){
|
||||
localStorage.removeItem('language','')
|
||||
localStorage.setItem('language',language)
|
||||
window.open(window.location.origin,'_self')
|
||||
},
|
||||
search(){
|
||||
let searchWord = this.$refs.searchMsg.value;
|
||||
if(searchWord!=''){
|
||||
this.$router.push({path:'/result',query:{title: searchWord}}).then(()=>{
|
||||
this.$refs.searchMsg.value = ''
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main{
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: #961824;
|
||||
.decorate-line{
|
||||
width: 100%;
|
||||
height: .0125rem;
|
||||
background-color: #bd3844;
|
||||
}
|
||||
.top{
|
||||
|
||||
height: 1.5rem;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #d0b689;
|
||||
background-color: #961824;
|
||||
.logo{
|
||||
img{
|
||||
width: 4.75rem;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.search-area{
|
||||
.language{
|
||||
cursor: pointer;
|
||||
.type{
|
||||
font-size: .175rem;
|
||||
display: inline-block;
|
||||
padding: 0 .1625rem;
|
||||
border-right: .025rem solid #d0b689;
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search {
|
||||
width: 3.5rem;
|
||||
height: .4625rem;
|
||||
background-color: #fff;
|
||||
border-radius: .2313rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: .0625rem;
|
||||
.search_icon {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
display: block;
|
||||
background-image: url("@/assets/imgs/图层 19@2x.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: .1rem;
|
||||
left: .15rem;
|
||||
}
|
||||
.search_input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: .225rem;
|
||||
position: absolute;
|
||||
/* top: .1rem; */
|
||||
left: .5rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.area-contain{
|
||||
display: flex;
|
||||
font-size: .2rem;
|
||||
.line{
|
||||
line-height: .275rem;
|
||||
margin-left: .125rem;
|
||||
p{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.showMenu{
|
||||
display: none;
|
||||
font-size: .5rem;
|
||||
color: #d0b689;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
color: #fff;
|
||||
height: .75rem;
|
||||
font-size: .25rem;
|
||||
padding: 0 1rem;
|
||||
position: relative;
|
||||
.item{
|
||||
flex: 1;
|
||||
line-height: .68rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
.active{
|
||||
width: 1.6rem;
|
||||
background: url('@/assets/imgs/图层 50.png') no-repeat;
|
||||
background-size: contain;
|
||||
background-position: left bottom;
|
||||
}
|
||||
}
|
||||
.item-children{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: .75rem;
|
||||
top: .75rem;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
display: flex;
|
||||
color: #fff;
|
||||
font-size: .25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1.25rem;
|
||||
cursor: pointer;
|
||||
.item-children-style{
|
||||
.children-name{
|
||||
display: inline-block;
|
||||
height: .225rem;
|
||||
line-height: .225rem;
|
||||
padding: 0 .25rem;
|
||||
border-right: .0125rem solid #fff;
|
||||
}
|
||||
&:last-child{
|
||||
.children-name{
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0px) and (max-width: 1000px) {
|
||||
.main{
|
||||
height: 1.5rem;
|
||||
.top{
|
||||
padding: 0 .3rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
.search-area {
|
||||
display: none;
|
||||
}
|
||||
.area-contain{
|
||||
display: none;
|
||||
}
|
||||
.showMenu{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
.menu{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
position: fixed;
|
||||
top: 1.4rem;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
.list{
|
||||
width: 45%;
|
||||
padding: 0 .375rem .5rem .375rem;
|
||||
background-color: #606060;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #f5f4f3;
|
||||
font-size: .3rem;
|
||||
border-bottom: 1px solid #8B8A8A;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div class="page-controller">
|
||||
<span class="btns">首页</span>
|
||||
<div class="pages">
|
||||
<span class="arror">
|
||||
<img :src="require('@/assets/imgs/_arror left.png')" alt="" />
|
||||
</span>
|
||||
<span class="page-num" v-for="n in 5" :key="n">{{ n }}</span>
|
||||
<span class="more">...</span>
|
||||
<span class="arror">
|
||||
<img :src="require('@/assets/imgs/_arror right.png')" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
<span class="btns">末页</span>
|
||||
<span class="count">总页数：12</span>
|
||||
<form action="">
|
||||
<input class="empty" type="text" name="" id="" />
|
||||
<input class="check" type="submit" value="确定" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "PageController",
|
||||
props: {
|
||||
msg: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.page-controller {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
margin-left: 24%;
|
||||
}
|
||||
.btns {
|
||||
margin: 0 .4125rem;
|
||||
padding: .1rem 0;
|
||||
box-sizing: border-box;
|
||||
font-size: .225rem;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #2c2b2b;
|
||||
}
|
||||
.pages {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.pages > span {
|
||||
display: block;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page-num {
|
||||
font-size: .225rem;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
color: #2c2b2b;
|
||||
line-height: .5rem;
|
||||
}
|
||||
.page-num:nth-child(2) {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
background: #a81c1d;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.arror {
|
||||
display: block;
|
||||
padding: .1rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.more {
|
||||
padding: .1rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.count {
|
||||
padding: .125rem 0;
|
||||
margin: 0 .125rem;
|
||||
box-sizing: border-box;
|
||||
font-size: .225rem;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #828181;
|
||||
line-height: .225rem;
|
||||
}
|
||||
form {
|
||||
display: flex;
|
||||
}
|
||||
.empty {
|
||||
width: .7375rem;
|
||||
height: .4875rem;
|
||||
border: .0063rem solid #aaaaaa;
|
||||
border-radius: .0625rem;
|
||||
}
|
||||
.check {
|
||||
width: .8875rem;
|
||||
height: .4875rem;
|
||||
background: #a81c1d;
|
||||
border-radius: .0625rem;
|
||||
font-size: .225rem;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-left: .1875rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
module.exports={
|
||||
language: '英文',
|
||||
main:{
|
||||
home: 'Home',
|
||||
introduce:'Hall Profile',
|
||||
digitHall:'Digital Hall',
|
||||
culture:'Cultural Relics',
|
||||
search: 'Welfare Fund',
|
||||
guide:'Contact Us',
|
||||
introduceDesc:'Lianyungang Revolutionary Memorial Hall is a large-scale patriotic education base that the Central Committee and the Provincial Party Committee attach great importance to. It is a classic red tourism scenic spot integrating many functions, such as propaganda, education, collection, research and tourism, and also a large-scale revolutionary memorial hall at the municipal level in China at present.',
|
||||
more:'More',
|
||||
copyright:'Copyrights Lianyungang Revolutionary Memorial Hall',
|
||||
ba:'Jiangsu ICP Filing No. 2023013855-1'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
module.exports={
|
||||
language: '日语',
|
||||
main:{
|
||||
home: 'トップページ',
|
||||
introduce:'記念館概要',
|
||||
digitHall:'デジタル記念館',
|
||||
culture:'文物巡礼',
|
||||
search: '公益基金',
|
||||
guide:'お問い合わせ',
|
||||
introduceDesc:'連雲港市革命記念館は中国中央、省委員に高度に重視され、全力に製造された大型愛国主義の教育基地であり；宣伝、収集、研究、旅行などの様々の機能を集めた総合的な赤革命聖地の景勝地であり、ここも現在全国の相当な大きな規模の地級・市級の総合類革命記念館である',
|
||||
more:'詳細',
|
||||
copyright:'著作権所有:連雲港市革命記念館',
|
||||
ba:'蘇ICP備2023013855号-1',
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
module.exports={
|
||||
language: '韩语',
|
||||
main:{
|
||||
home: '메인 화면',
|
||||
introduce:'기념관 개황',
|
||||
digitHall:'디지털 기념관',
|
||||
culture:'문물 순례',
|
||||
search: '공익기금',
|
||||
guide:'연락처',
|
||||
introduceDesc:'연운항시 혁명기념관은 중앙, 성위원회가 고도로 중시하고 힘을 기울여 만든 대형 애국주의 교육기지이다. 선교, 수장, 연구, 관광 등 많은 기능을 일체화한 종합적인 홍색관광 경전 관광지이며 현재 전국 규모가 비교적 큰 지시급 종합류 혁명기념관이기도 하다',
|
||||
more:'이상',
|
||||
copyright:'Copyright:연운항혁명기념관',
|
||||
ba:'소ICP비2023013855호-1',
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
module.exports={
|
||||
language: '中文',
|
||||
main:{
|
||||
home: '首页',
|
||||
introduce:'纪念馆概况',
|
||||
digitHall:'数字纪念馆',
|
||||
culture:'文物',
|
||||
search: '寻红·红巡',
|
||||
guide:'参观指南',
|
||||
copyright:'版权所有：连云港市革命纪念馆',
|
||||
ba:'苏ICP备2023013855号'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
// eslint-disable-next-line
|
||||
;(function(win, lib) {
|
||||
var doc = win.document;
|
||||
var docEl = doc.documentElement;
|
||||
var metaEl = doc.querySelector('meta[name="viewport"]');
|
||||
var flexibleEl = doc.querySelector('meta[name="flexible"]');
|
||||
var dpr = 0;
|
||||
var scale = 0;
|
||||
var tid;
|
||||
var flexible = lib.flexible || (lib.flexible = {});
|
||||
if (metaEl) {
|
||||
console.warn('将根据已有的meta标签来设置缩放比例');
|
||||
// eslint-disable-next-line
|
||||
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
|
||||
if (match) {
|
||||
scale = parseFloat(match[1]);
|
||||
dpr = parseInt(1 / scale);
|
||||
}
|
||||
} else if (flexibleEl) {
|
||||
var content = flexibleEl.getAttribute('content');
|
||||
if (content) {
|
||||
// eslint-disable-next-line
|
||||
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
|
||||
// eslint-disable-next-line
|
||||
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
|
||||
if (initialDpr) {
|
||||
dpr = parseFloat(initialDpr[1]);
|
||||
scale = parseFloat((1 / dpr).toFixed(2));
|
||||
}
|
||||
if (maximumDpr) {
|
||||
dpr = parseFloat(maximumDpr[1]);
|
||||
scale = parseFloat((1 / dpr).toFixed(2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!dpr && !scale) {
|
||||
// var isAndroid = win.navigator.appVersion.match(/android/gi);yy
|
||||
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
|
||||
var devicePixelRatio = win.devicePixelRatio;
|
||||
if (isIPhone) {
|
||||
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
||||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
|
||||
dpr = 3;
|
||||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
|
||||
dpr = 2;
|
||||
} else {
|
||||
dpr = 1;
|
||||
}
|
||||
} else {
|
||||
// 其他设备下，仍旧使用1倍的方案
|
||||
dpr = 1;
|
||||
}
|
||||
scale = 1 / dpr;
|
||||
}
|
||||
|
||||
docEl.setAttribute('data-dpr', dpr);
|
||||
if (!metaEl) {
|
||||
metaEl = doc.createElement('meta');
|
||||
metaEl.setAttribute('name', 'viewport');
|
||||
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(metaEl);
|
||||
} else {
|
||||
var wrap = doc.createElement('div');
|
||||
wrap.appendChild(metaEl);
|
||||
doc.write(wrap.innerHTML);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshRem(){
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
// if(width/dpr<1400){
|
||||
// width = 1400*dpr
|
||||
// }else if(width/dpr>2560){
|
||||
// width = 2560*dpr
|
||||
// }
|
||||
// if (width / dpr > 540) {
|
||||
// width = width * dpr;
|
||||
|
||||
// }
|
||||
if(width / dpr > 2560){
|
||||
width = 1920*dpr
|
||||
}else if(width / dpr > 1920){
|
||||
width = 1920*dpr
|
||||
}else if(width / dpr > 1400){
|
||||
width = 1800*dpr
|
||||
}else if(width / dpr > 1200){
|
||||
width = 1700*dpr
|
||||
}else if(width / dpr > 1000){
|
||||
width = 1600*dpr
|
||||
}else if(width / dpr > 800){
|
||||
width = 1400*dpr
|
||||
}else if(width / dpr > 500){
|
||||
width = 1200*dpr
|
||||
}else{
|
||||
width = 1000*dpr
|
||||
}
|
||||
var rem = width / 24;
|
||||
|
||||
docEl.style.fontSize = rem + 'px';
|
||||
flexible.rem = win.rem = rem;
|
||||
}
|
||||
|
||||
win.addEventListener('resize', function() {
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
win.addEventListener('pageshow', function(e) {
|
||||
if (e.persisted) {
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === 'complete') {
|
||||
doc.body.style.fontSize = 12 * dpr + 'px';
|
||||
} else {
|
||||
// eslint-disable-next-line
|
||||
doc.addEventListener('DOMContentLoaded', function(e) {
|
||||
doc.body.style.fontSize = 12 * dpr + 'px';
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
refreshRem();
|
||||
|
||||
flexible.dpr = win.dpr = dpr;
|
||||
flexible.refreshRem = refreshRem;
|
||||
flexible.rem2px = function(d) {
|
||||
var val = parseFloat(d) * this.rem;
|
||||
if (typeof d === 'string' && d.match(/rem$/)) {
|
||||
val += 'px';
|
||||
}
|
||||
return val;
|
||||
}
|
||||
flexible.px2rem = function(d) {
|
||||
var val = parseFloat(d) / this.rem;
|
||||
if (typeof d === 'string' && d.match(/px$/)) {
|
||||
val += 'rem';
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
})(window, window['lib'] || (window['lib'] = {}));
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "lib-flexible",
|
||||
"version": "0.3.2",
|
||||
"description": "移动端适配解决方案",
|
||||
"main": "flexible.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"适配"
|
||||
],
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
37
src/main.js
37
src/main.js
|
|
@ -3,4 +3,39 @@ import App from './App.vue'
|
|||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
createApp(App).use(store).use(router).mount('#app')
|
||||
import './lib-flexible'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import './assets/css/reset.css'
|
||||
import './assets/css/common.css'
|
||||
|
||||
|
||||
import 'quill/dist/quill.core.css'
|
||||
import 'quill/dist/quill.snow.css'
|
||||
import 'quill/dist/quill.bubble.css'
|
||||
import axios from 'axios'
|
||||
import { createI18n } from 'vue-i18n';
|
||||
const app = createApp(App)
|
||||
|
||||
// 线上
|
||||
const baseUrl = 'http://192.168.3.114:8085'
|
||||
axios.defaults.baseURL = baseUrl
|
||||
app.use(ElementPlus)
|
||||
app.config.globalProperties.$http = axios
|
||||
app.config.globalProperties.$baseUrl = baseUrl
|
||||
const i18n = createI18n ({
|
||||
locale:'zh',
|
||||
messages:{
|
||||
//中文
|
||||
'zh':require('./lang/zh.js'),
|
||||
//英文
|
||||
'en':require('./lang/en.js'),
|
||||
//韩语
|
||||
'ko':require('./lang/ko.js'),
|
||||
// 日语
|
||||
'jp':require('./lang/jp.js'),
|
||||
}
|
||||
})
|
||||
app.use(store).use(router).use(i18n).use(ElementPlus).mount('#app')
|
||||
// app.use(store).use(router).use(ElementPlus).mount('#app')
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,108 @@ const routes = [
|
|||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component: () => import('@/views/index.vue')
|
||||
component: () => import('@/views/index.vue'),
|
||||
children:[
|
||||
{
|
||||
path: 'home',
|
||||
name: 'Home',
|
||||
component: () => import( '@/views/pages/home.vue'),
|
||||
meta: {
|
||||
title: '首页',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'introduce',
|
||||
name: 'Introduce',
|
||||
component: () => import( '@/views/pages/introduce.vue'),
|
||||
meta: {
|
||||
title: '纪念馆概况',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'dynamic',
|
||||
name: 'Dynamic',
|
||||
component: () => import( '@/views/pages/dynamic.vue'),
|
||||
meta: {
|
||||
title: '工作动态',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'relic',
|
||||
name: 'Relic',
|
||||
component: () => import( '@/views/pages/relic.vue'),
|
||||
meta: {
|
||||
title: '文物',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'search',
|
||||
name: 'Search',
|
||||
component: () => import( '@/views/pages/search.vue'),
|
||||
meta: {
|
||||
title: '寻红·红巡',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'guide',
|
||||
name: 'Guide',
|
||||
component: () => import( '@/views/pages/guide.vue'),
|
||||
meta: {
|
||||
title: '参观指南',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'notice',
|
||||
name: 'Notice',
|
||||
component: () => import( '@/views/pages/notice.vue'),
|
||||
meta: {
|
||||
title: '公告栏',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'service',
|
||||
name: 'Service',
|
||||
component: () => import( '@/views/pages/service.vue'),
|
||||
meta: {
|
||||
title: '旅游服务',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'education',
|
||||
name: 'Education',
|
||||
component: () => import( '@/views/pages/education.vue'),
|
||||
meta: {
|
||||
title: '主题教育栏目',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'result',
|
||||
name: 'Result',
|
||||
component: () => import( '@/views/pages/result.vue'),
|
||||
meta: {
|
||||
title: '搜索结果',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'article',
|
||||
name: 'Article',
|
||||
component: () => import( '@/views/pages/article.vue'),
|
||||
meta: {
|
||||
title: '文章',
|
||||
keepAlive: true
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<div class="index">
|
||||
<headerComp></headerComp>
|
||||
<router-view/>
|
||||
<footerComp></footerComp>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,7 +12,8 @@
|
|||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
headerComp,footerComp
|
||||
headerComp,
|
||||
footerComp
|
||||
|
||||
},
|
||||
data(){
|
||||
|
|
@ -20,7 +22,7 @@
|
|||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
this.$router.push('/home')
|
||||
},
|
||||
methods:{
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,384 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img class="title-icon" v-if="navName" :src="require(`@/assets/imgs/${imgNavName}.jpg`)" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>{{navName}}</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div :class="{item:true,active: item.name==(datObj.category&&datObj.category.categoryName)}" v-for="(item,index) in menu" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">{{$t('main.home')}}</span>
|
||||
<span>></span>
|
||||
<span>{{navName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>{{navName}}</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
{{datObj.title}}
|
||||
</div>
|
||||
<div class="line">
|
||||
<div class="time">时间：{{datObj.createTime&&datObj.createTime.split(' ')[0]}}</div>
|
||||
<div class="creator">作者：连云港市革命纪念馆</div>
|
||||
<div class="onclick">浏览次数：{{ datObj.onclick }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ql-editor content-style" v-html="datObj.content"></div>
|
||||
<div class="bottom">
|
||||
<div class="next" @click="nextDatObj&&getData(nextDatObj.id)">下一篇：{{nextDatObj&&nextDatObj.title||'没有更多'}}</div>
|
||||
<div class="back-list" @click="goPage">返回列表</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
datObj:{},
|
||||
nextDatObj:{},
|
||||
menu:[],
|
||||
navName:'',
|
||||
imgNavName:'',
|
||||
searchMenu:[
|
||||
{ name:'宣讲' },
|
||||
{ name:'陈展' },
|
||||
{ name:'小推车公益' }
|
||||
],
|
||||
serviceMenu:[
|
||||
{ name:'吃' },
|
||||
{ name:'住' },
|
||||
{ name:'行' },
|
||||
{ name:'游' },
|
||||
{ name:'购' },
|
||||
{ name:'娱' }
|
||||
],
|
||||
}
|
||||
},
|
||||
created(){
|
||||
let id = this.$route.query.id
|
||||
this.getData(id)
|
||||
},
|
||||
methods:{
|
||||
getData(id){
|
||||
this.$http.post(`/door/getArt/${id}`).then(res=>{
|
||||
this.datObj = res.data.data
|
||||
this.datObj.content = this.datObj.content.replace(/<img/g,'<img style="width:95%; height: auto;margin:0 auto"')
|
||||
if(this.datObj.category.parentName=="寻红·红巡"){
|
||||
this.menu = this.searchMenu
|
||||
}else if(this.datObj.category.parentName=="旅游服务"){
|
||||
this.menu = this.serviceMenu
|
||||
}
|
||||
if(this.$i18n.locale=='zh'){
|
||||
this.navName = this.datObj.category.parentName||this.datObj.category.categoryName
|
||||
this.imgNavName = this.navName
|
||||
}else{
|
||||
|
||||
this.navName = this.datObj.category.categoryName
|
||||
if(['文物','Cultural Relics','문물 순례','文物巡礼'].includes(this.navName)){
|
||||
this.imgNavName = "文物"
|
||||
}
|
||||
}
|
||||
// 增加阅读次数
|
||||
this.$http.post(`/door/increaseQuantity?id=${id}`)
|
||||
// 下一篇
|
||||
this.$http.get(`/door/getNext?id=${id}&categoryId=${this.datObj.categoryId}`).then(res=>{
|
||||
this.nextDatObj = res.data.data
|
||||
})
|
||||
})
|
||||
},
|
||||
goPage(){
|
||||
|
||||
if(this.menu.length!=0){
|
||||
let typeIndex = this.menu.findIndex(ele=>{
|
||||
return ele.name==this.datObj.category.categoryName
|
||||
})
|
||||
if(this.navName=='寻红·红巡'){
|
||||
this.$router.push({path:'/search',query:{type:typeIndex}})
|
||||
}else if(this.navName=='旅游服务'){
|
||||
console.log(typeIndex)
|
||||
this.$router.push({path:'/service',query:{type:typeIndex}})
|
||||
|
||||
}
|
||||
}else{
|
||||
if(this.navName=='公告栏'){
|
||||
this.$router.push({path:'/notice'})
|
||||
}else if(this.navName=='工作动态'){
|
||||
this.$router.push({path:'/dynamic'})
|
||||
}else if(['文物','Cultural Relics','문물 순례','文物巡礼'].includes(this.navName)){
|
||||
this.$router.push({path:'/relic'})
|
||||
}else if(this.navName=='主题教育栏目'){
|
||||
this.$router.push({path:'/education'})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .5rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
.circle{
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: .2rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header{
|
||||
background-color: #fff;
|
||||
padding: .4rem .8rem;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
|
||||
.title{
|
||||
font-size: .32rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.line{
|
||||
display: flex;
|
||||
font-size: .23rem;
|
||||
color: #727272;
|
||||
margin-top: .25rem;
|
||||
justify-content: center;
|
||||
.creator{
|
||||
margin: 0 .375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
padding: .6rem .8rem;
|
||||
font-size: .23rem;
|
||||
color: #727272;
|
||||
line-height: .4rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
p{
|
||||
img{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
font-size: .3rem;
|
||||
.item{
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.header{
|
||||
background-color: #fff;
|
||||
padding: .4rem .8rem;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
|
||||
.title{
|
||||
font-size: .35rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.line{
|
||||
font-size: .28rem;
|
||||
.time{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.creator{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
padding: .6rem .8rem;
|
||||
font-size: .35rem;
|
||||
color: #727272;
|
||||
line-height: .4rem;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img class="title-icon" src="@/assets/imgs/工作动态.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>工作动态</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">首页</span>
|
||||
<span>></span>
|
||||
<span>工作动态</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>工作动态</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="content-style">
|
||||
<div class="item" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<span class="circle"></span>
|
||||
<div class="title">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
background
|
||||
layout="prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="small-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:pager-count="3"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
total:0,
|
||||
pageNum:1,
|
||||
pageSize:10
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData()
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
this.$http.post(`/door/gwArticleList?categoryId=2&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
|
||||
this.dataList = res.data.rows
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
jumpToPage(url,id){
|
||||
this.$router.push({path:url,query:{id: id}})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .3rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
.circle{
|
||||
width: 10%;
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: block;
|
||||
}
|
||||
.small-page{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
.item{
|
||||
font-size: .35rem;
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: none;
|
||||
}
|
||||
.small-page{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img class="title-icon" src="@/assets/imgs/工作动态.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>主题教育栏目</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">首页</span>
|
||||
<span>></span>
|
||||
<span>主题教育栏目</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>主题教育栏目</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="content-style">
|
||||
<div class="item" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<span class="circle"></span>
|
||||
<div class="title">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
background
|
||||
layout="prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="small-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:pager-count="3"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
total:0,
|
||||
pageNum:1,
|
||||
pageSize:10
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData()
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
this.$http.post(`/door/gwArticleList?categoryId=122&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
|
||||
this.dataList = res.data.rows
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
jumpToPage(url,id){
|
||||
this.$router.push({path:url,query:{id: id}})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .3rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
.circle{
|
||||
width: 10%;
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: block;
|
||||
}
|
||||
.small-page{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
.item{
|
||||
font-size: .35rem;
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: none;
|
||||
}
|
||||
.small-page{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img src="@/assets/imgs/参观指南.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>{{$t('main.guide')}}</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">{{$t('main.home')}}</span>
|
||||
<span>></span>
|
||||
<span>{{$t('main.guide')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>{{$t('main.guide')}}</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="ql-editor content-style" v-html="introduce.content"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
introduce:{}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData()
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
let categoryId = ''
|
||||
if(this.$i18n.locale=='zh'){
|
||||
categoryId=9333
|
||||
}else if(this.$i18n.locale=='en'){
|
||||
categoryId=9336
|
||||
}else if(this.$i18n.locale=='ko'){
|
||||
categoryId=9335
|
||||
}else{
|
||||
categoryId=9334
|
||||
}
|
||||
this.$http.post(`/door/getArt/${categoryId}`).then(res=>{
|
||||
this.introduce = res.data.data
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .8rem 1.2rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
text-indent: 2em;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
margin-top: -.1rem;
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
font-size: .325rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,268 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img class="title-icon" src="@/assets/imgs/纪念馆概况.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>{{$t('main.introduce')}}</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
<div class="menu" v-if="$i18n.locale=='zh'">
|
||||
<div @click="toggleMenu(item,index)" :class="{item:true,active: currentMenu==index}" v-for="(item,index) in menu" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">{{$t('main.home')}}</span>
|
||||
<span>></span>
|
||||
<span>{{$t('main.introduce')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>{{$t('main.introduce')}}</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
<div class="menu" v-if="$i18n.locale=='zh'">
|
||||
<div @click="toggleMenu(item,index)" :class="{item:true,active: currentMenu==index}" v-for="(item,index) in menu" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="content" v-if="$i18n.locale=='zh'">
|
||||
<div v-if="currentMenu==0" class="ql-editor content-style" v-html="introduce.content"></div>
|
||||
<div v-if="currentMenu==1" class="ql-editor content-style" v-html="organization.content"></div>
|
||||
<div v-if="currentMenu==2" class="ql-editor content-style" v-html="leaders.content"></div>
|
||||
<div v-if="currentMenu==3" class="ql-editor content-style" v-html="contact.content"></div>
|
||||
</div>
|
||||
<div class="content" v-else>
|
||||
<div class="ql-editor content-style" v-html="contentForeign.content"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
data(){
|
||||
return{
|
||||
currentMenu:0,
|
||||
menu:[
|
||||
{ name:'场馆简介' },
|
||||
{ name:'组织结构' },
|
||||
{ name:'领导成员' },
|
||||
{ name:'联系我们' },
|
||||
],
|
||||
introduce:{},
|
||||
organization: {},
|
||||
leaders:{},
|
||||
contact:{},
|
||||
contentForeign:{}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData()
|
||||
},
|
||||
watch:{
|
||||
"$route.query.type":{
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.currentMenu = this.$route.query.type||0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
if(this.$i18n.locale=='zh'){
|
||||
// 场馆简介
|
||||
this.$http.post(`/door/getArt/9303`).then(res=>{
|
||||
this.introduce = res.data.data
|
||||
})
|
||||
// 组织结构
|
||||
this.$http.post(`/door/getArt/9399`).then(res=>{
|
||||
this.organization = res.data.data
|
||||
this.organization.content = this.organization.content.replace(/<img/g,'<img style="width:95%; height: auto;margin:0 auto"')
|
||||
})
|
||||
// 领导成员
|
||||
this.$http.post(`/door/getArt/9302`).then(res=>{
|
||||
this.leaders = res.data.data
|
||||
this.leaders.content = this.leaders.content.replace(/<img/g,'<img style="width:95%; height: auto;margin:0 auto"')
|
||||
})
|
||||
// 联系我们
|
||||
this.$http.post(`/door/getArt/9305`).then(res=>{
|
||||
this.contact = res.data.data
|
||||
this.contact.content = this.contact.content.replace(/<img/g,'<img style="width:95%; height: auto;margin:0 auto"')
|
||||
})
|
||||
}else{
|
||||
let categoryId = ''
|
||||
if(this.$i18n.locale=='en'){
|
||||
categoryId=9296
|
||||
}else if(this.$i18n.locale=='ko'){
|
||||
categoryId=9295
|
||||
}else{
|
||||
categoryId=9294
|
||||
}
|
||||
this.$http.post(`/door/getArt/${categoryId}`).then(res=>{
|
||||
this.contentForeign = res.data.data
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
toggleMenu(item,i){
|
||||
this.currentMenu = i
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .8rem 1.2rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .5rem;
|
||||
text-indent: 2em;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
background-color: #fff;
|
||||
padding: .4rem;
|
||||
.content-style{
|
||||
padding: .4rem;
|
||||
background-color: #fff;
|
||||
font-size: .34rem;
|
||||
line-height: .6rem;
|
||||
text-indent: 2em;
|
||||
p{
|
||||
font-size: .625rem;
|
||||
/* span{
|
||||
width: 100%;
|
||||
img{
|
||||
width: 65%;
|
||||
height: 100%;
|
||||
}
|
||||
} */
|
||||
img{
|
||||
width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img src="@/assets/imgs/公告栏.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>公告栏</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">首页</span>
|
||||
<span>></span>
|
||||
<span>公告栏</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>公告栏</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="content-style">
|
||||
<div class="item" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<span class="circle"></span>
|
||||
<div class="title">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="big-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
background
|
||||
layout="prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="small-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:pager-count="3"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
total:0,
|
||||
pageNum:1,
|
||||
pageSize:10
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData()
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
this.$http.post(`/door/gwArticleList?categoryId=25&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
|
||||
this.dataList = res.data.rows
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
jumpToPage(url,id){
|
||||
this.$router.push({path:url,query:{id: id}})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .3rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
.circle{
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: .2rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
margin-top: -.1rem;
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
.item{
|
||||
font-size: .35rem;
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: none;
|
||||
}
|
||||
.small-page{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img src="@/assets/imgs/文物.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>{{$t('main.culture')}}</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">{{$t('main.home')}}</span>
|
||||
<span>></span>
|
||||
<span>{{$t('main.culture')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>{{$t('main.culture')}}</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="content-style">
|
||||
<div v-if="$i18n.locale=='zh'">
|
||||
<div class="itemZh" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<img :src="$baseUrl+item.coverImage" alt="">
|
||||
<div class="info">
|
||||
<div class="title">{{item.title}}</div>
|
||||
<div class="desc">{{item.description}}</div>
|
||||
<div class="small-time"> {{item.createTime.split(' ')[0]}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="itemForeign" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<span class="circle"></span>
|
||||
<div class="title">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="big-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
background
|
||||
layout="prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="small-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:pager-count="3"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Relic',
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
total:0,
|
||||
pageNum:1,
|
||||
pageSize:10
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getData()
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
let categoryId = ''
|
||||
if(this.$i18n.locale=='zh'){
|
||||
categoryId=4
|
||||
}else if(this.$i18n.locale=='en'){
|
||||
categoryId=44
|
||||
}else if(this.$i18n.locale=='jp'){
|
||||
categoryId=104
|
||||
}else{
|
||||
categoryId=114
|
||||
}
|
||||
this.$http.post(`/door/gwArticleList?categoryId=${categoryId}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
|
||||
this.dataList = res.data.rows
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
jumpToPage(url,id){
|
||||
this.$router.push({path:url,query:{id: id}})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .3rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.itemZh{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
padding: .3rem .3rem;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
/* align-items: center; */
|
||||
width: 80%;
|
||||
img{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-right: .3rem;
|
||||
}
|
||||
.info{
|
||||
width: calc(100% - 2rem);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.title{
|
||||
font-size: .25rem;
|
||||
color: #2b2929;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
.desc{
|
||||
margin-top: .125rem;
|
||||
font-size: .22rem;
|
||||
color: #888989;
|
||||
height: .8rem;
|
||||
line-height: .45rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.time{
|
||||
font-size: .2rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.itemForeign{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
.circle{
|
||||
width: 10%;
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: block;
|
||||
}
|
||||
.small-page{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
margin-top: -.1rem;
|
||||
.page-title{
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
font-size: .3rem;
|
||||
line-height: .45rem;
|
||||
.content-style{
|
||||
padding: 0.3rem 0.8rem 0.6rem 0.8rem;
|
||||
.itemZh{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
/* padding: .3rem .3rem; */
|
||||
cursor: pointer;
|
||||
.left{
|
||||
width: 100%;
|
||||
img{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-right: .3rem;
|
||||
}
|
||||
.info{
|
||||
padding: .1rem 0;
|
||||
width: calc(100% - 3rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.title{
|
||||
font-size: .35rem;
|
||||
white-space: normal;
|
||||
}
|
||||
.desc{
|
||||
display: none;
|
||||
}
|
||||
.small-time{
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.time{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.itemForeign{
|
||||
font-size: .3rem;
|
||||
}
|
||||
.big-page{
|
||||
display: none;
|
||||
}
|
||||
.small-page{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img class="title-icon" src="@/assets/imgs/工作动态.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>搜索结果</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">首页</span>
|
||||
<span>></span>
|
||||
<span>搜索结果</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>搜索结果</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="content-style" v-if="dataList.length!=0">
|
||||
<div class="item" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<span class="circle"></span>
|
||||
<div class="title">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
background
|
||||
layout="prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="small-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:pager-count="3"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
components: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
dataList:[],
|
||||
total:0,
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
title:''
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.title = this.$route.query.title||''
|
||||
this.getData()
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
this.$http.post(`/door/FuzzySearch?title=${this.title}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
|
||||
this.dataList = res.data.rows
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
jumpToPage(url,id){
|
||||
this.$router.push({path:url,query:{id: id}})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .3rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 75%;
|
||||
.circle{
|
||||
width: 10%;
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: block;
|
||||
}
|
||||
.small-page{
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
.item{
|
||||
font-size: .35rem;
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: none;
|
||||
}
|
||||
.small-page{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,344 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img src="@/assets/imgs/寻红·红巡.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>{{$t('main.search')}}</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
<div class="menu" v-if="$i18n.locale=='zh'">
|
||||
<div @click="toggleMenu(item,index)" :class="{item:true,active: currentMenu==index}" v-for="(item,index) in menu" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">{{$t('main.home')}}</span>
|
||||
<span>></span>
|
||||
<span>{{$t('main.search')}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>{{$t('main.search')}}</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
<div class="menu" v-if="$i18n.locale=='zh'">
|
||||
<div @click="toggleMenu(item,index)" :class="{item:true,active: currentMenu==index}" v-for="(item,index) in menu" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="content-style" v-if="$i18n.locale=='zh'">
|
||||
<div class="item" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<span class="circle"></span>
|
||||
<div class="title">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="big-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
background
|
||||
layout="prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="small-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:pager-count="3"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-style" v-else>
|
||||
<div class="ql-editor content-style" v-html="contentForeign.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
data(){
|
||||
return{
|
||||
currentMenu:0,
|
||||
menu:[
|
||||
{ name:'宣讲' },
|
||||
{ name:'陈展' },
|
||||
{ name:'小推车公益' }
|
||||
],
|
||||
typeQuery:[6,5,30],
|
||||
total:0,
|
||||
dataList:[],
|
||||
pageNum:1,
|
||||
pageSize:10,
|
||||
contentForeign:{}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
let type = this.$route.query.type
|
||||
this.currentMenu = type||0
|
||||
this.getData()
|
||||
},
|
||||
watch:{
|
||||
"$route.query.type":{
|
||||
immediate: true,
|
||||
handler() {
|
||||
this.currentMenu = this.$route.query.type
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
|
||||
if(this.$i18n.locale=='zh'){
|
||||
this.$http.post(`/door/gwArticleList?categoryId=${this.typeQuery[this.currentMenu]}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
|
||||
this.total = res.data.total
|
||||
this.dataList = res.data.rows
|
||||
})
|
||||
}else{
|
||||
let categoryId = ''
|
||||
if(this.$i18n.locale=='en'){
|
||||
categoryId=9299
|
||||
}else if(this.$i18n.locale=='ko'){
|
||||
categoryId=9298
|
||||
}else{
|
||||
categoryId=9297
|
||||
}
|
||||
this.$http.post(`/door/getArt/${categoryId}`).then(res=>{
|
||||
this.contentForeign = res.data.data
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
jumpToPage(url,id){
|
||||
this.$router.push({path:url,query:{id: id}})
|
||||
},
|
||||
toggleMenu(item,i){
|
||||
this.pageNum = 1
|
||||
this.pageSize = 10
|
||||
this.currentMenu = i
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .3rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
.circle{
|
||||
width: 10%;
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: .2rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: block;
|
||||
}
|
||||
.small-page{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
margin-top: -.1rem;
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
font-size: .34rem;
|
||||
line-height: .6rem;
|
||||
.item{
|
||||
font-size: .35rem;
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: none;
|
||||
}
|
||||
.small-page{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<img src="@/assets/imgs/旅游服务.jpg" alt="">
|
||||
<div class="page-name">
|
||||
<div class="left">
|
||||
<div class="page-title">
|
||||
<span>旅游服务</span>
|
||||
<img src="@/assets/imgs/single star.png" alt="">
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div @click="toggleMenu(item,index)" :class="{item:true,active: currentMenu==index}" v-for="(item,index) in menu" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span style="cursor: pointer;" @click="$router.push('/home')">首页</span>
|
||||
<span>></span>
|
||||
<span>旅游服务</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小屏 -->
|
||||
<div class="small-menu">
|
||||
<div class="page-title" @click="$router.push('/home')">
|
||||
<span>旅游服务</span>
|
||||
<img class="back-icon" src="@/assets/imgs/图层 54@2x.png" alt="">
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div @click="toggleMenu(item,index)" :class="{item:true,active: currentMenu==index}" v-for="(item,index) in menu" :key="index">
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" >
|
||||
<div class="content-style">
|
||||
<div class="item" v-for="(item,index) in dataList" :key="index" @click="jumpToPage('/article',item.id)">
|
||||
<div class="left">
|
||||
<span class="circle"></span>
|
||||
<div class="title">{{item.title}}</div>
|
||||
</div>
|
||||
<div class="time">
|
||||
{{item.createTime.split(' ')[0]}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="big-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
background
|
||||
layout="prev, pager, next,jumper"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
<div class="small-page">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:pager-count="3"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
@current-change="getData()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Introduce',
|
||||
data(){
|
||||
return{
|
||||
currentMenu:0,
|
||||
menu:[
|
||||
{ name:'吃' },
|
||||
{ name:'住' },
|
||||
{ name:'行' },
|
||||
{ name:'游' },
|
||||
{ name:'购' },
|
||||
{ name:'娱' }
|
||||
],
|
||||
typeQuery:[20,21,22,23,24,26],
|
||||
total:0,
|
||||
dataList:[],
|
||||
pageNum:1,
|
||||
pageSize:10
|
||||
}
|
||||
},
|
||||
created(){
|
||||
let type = this.$route.query.type||0
|
||||
console.log(this.$route.query.type)
|
||||
this.currentMenu = type
|
||||
this.getData()
|
||||
},
|
||||
methods:{
|
||||
getData(){
|
||||
this.$http.post(`/door/gwArticleList?categoryId=${this.typeQuery[this.currentMenu]}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`).then(res=>{
|
||||
this.total = res.data.total
|
||||
this.dataList = res.data.rows
|
||||
})
|
||||
},
|
||||
jumpToPage(url,id){
|
||||
this.$router.push({path:url,query:{id: id}})
|
||||
},
|
||||
toggleMenu(item,i){
|
||||
this.pageNum = 1
|
||||
this.pageSize = 10
|
||||
this.currentMenu = i
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-pagination{
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
button{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
.el-pager li{
|
||||
border-radius: 50%;
|
||||
&:hover{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
||||
background-color: #961824;
|
||||
&:hover{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.index{
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.page-name{
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
height: 1.1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
.page-title{
|
||||
width: 2.4rem;
|
||||
height: 100%;
|
||||
line-height: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: .35rem;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
z-index: 999;
|
||||
img{
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
display: flex;
|
||||
margin-left: .3125rem;
|
||||
.item{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
margin-left: .25rem;
|
||||
height: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active{
|
||||
color: #961824;
|
||||
border-bottom: 3px solid #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span{
|
||||
font-size: .25rem;
|
||||
color: #888989;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.small-menu{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
background-color: #eaeaea;
|
||||
padding: .8rem 1.2rem;
|
||||
.content-style{
|
||||
padding: .3rem .8rem .6rem .8rem;
|
||||
background-color: #fff;
|
||||
font-size: .23rem;
|
||||
line-height: .45rem;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 1rem;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
cursor: pointer;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
.circle{
|
||||
display: inline-block;
|
||||
width: .15rem;
|
||||
height: .15rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #961824;
|
||||
margin-right: .1rem;
|
||||
}
|
||||
.title{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-size: .2rem;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: block;
|
||||
}
|
||||
.small-page{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 0) and (max-width: 1000px) {
|
||||
.index{
|
||||
.title-icon{
|
||||
display: none;
|
||||
}
|
||||
.page-name{
|
||||
display: none;
|
||||
}
|
||||
.small-menu{
|
||||
display: block;
|
||||
.page-title{
|
||||
margin-top: -.1rem;
|
||||
height: 1.3rem;
|
||||
background-color: #961824;
|
||||
font-size: .4rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.3rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.back-icon{
|
||||
position: absolute;
|
||||
width: .2rem;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: .5rem;
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
height: 1.3rem;
|
||||
background-color: #dcdada;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: .35rem;
|
||||
align-items: center;
|
||||
color: #888989;
|
||||
.active{
|
||||
color: #961824;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: 0;
|
||||
.content-style{
|
||||
.item{
|
||||
font-size: .35rem;
|
||||
.time{
|
||||
font-size: .3rem;
|
||||
}
|
||||
}
|
||||
.big-page{
|
||||
display: none;
|
||||
}
|
||||
.small-page{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue