This commit is contained in:
wangting 2024-08-20 17:14:24 +08:00
parent ae5b3b7bcd
commit 7fc75735b5
44 changed files with 6539 additions and 95 deletions

View File

@ -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'
}
}

971
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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

View File

@ -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>

View File

@ -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 {

View File

@ -0,0 +1 @@
/* 分页 */

179
src/assets/css/reset.css Normal file
View File

@ -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;
}

View File

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

View File

@ -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>
<div class="modelBtm">
<span class="msg">
<p>版权所有连云港市革命纪念馆</p>
<p>苏ICP备2023013855号</p>
</span>
</div>
</footer>
<div class="modelBtm">
<span class="msg">
<p>{{$t('main.copyright')}}</p>
<p>{{$t('main.ba')}}</p>
</span>
</div>
</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>

View File

@ -4,14 +4,56 @@
<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>
</div>
</template>
@ -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>

View File

@ -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>

15
src/lang/en.js Normal file
View File

@ -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'
}
}

15
src/lang/jp.js Normal file
View File

@ -0,0 +1,15 @@
module.exports={
language: '日语',
main:{
home: 'トップページ',
introduce:'記念館概要',
digitHall:'デジタル記念館',
culture:'文物巡礼',
search: '公益基金',
guide:'お問い合わせ',
introduceDesc:'連雲港市革命記念館は中国中央、省委員に高度に重視され、全力に製造された大型愛国主義の教育基地であり;宣伝、収集、研究、旅行などの様々の機能を集めた総合的な赤革命聖地の景勝地であり、ここも現在全国の相当な大きな規模の地級・市級の総合類革命記念館である',
more:'詳細',
copyright:'著作権所有:連雲港市革命記念館',
ba:'蘇ICP備2023013855号-1',
}
}

15
src/lang/ko.js Normal file
View File

@ -0,0 +1,15 @@
module.exports={
language: '韩语',
main:{
home: '메인 화면',
introduce:'기념관 개황',
digitHall:'디지털 기념관',
culture:'문물 순례',
search: '공익기금',
guide:'연락처',
introduceDesc:'연운항시 혁명기념관은 중앙, 성위원회가 고도로 중시하고 힘을 기울여 만든 대형 애국주의 교육기지이다. 선교, 수장, 연구, 관광 등 많은 기능을 일체화한 종합적인 홍색관광 경전 관광지이며 현재 전국 규모가 비교적 큰 지시급 종합류 혁명기념관이기도 하다',
more:'이상',
copyright:'Copyright:연운항혁명기념관',
ba:'소ICP비2023013855호-1',
}
}

13
src/lang/zh.js Normal file
View File

@ -0,0 +1,13 @@
module.exports={
language: '中文',
main:{
home: '首页',
introduce:'纪念馆概况',
digitHall:'数字纪念馆',
culture:'文物',
search: '寻红·红巡',
guide:'参观指南',
copyright:'版权所有:连云港市革命纪念馆',
ba:'苏ICP备2023013855号'
}
}

View File

@ -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'] = {}));

View File

@ -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"
}

View File

@ -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')

View File

@ -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
}
},
]
},
]

View File

@ -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:{

384
src/views/pages/article.vue Normal file
View File

@ -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>

290
src/views/pages/dynamic.vue Normal file
View File

@ -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>

View File

@ -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>

215
src/views/pages/guide.vue Normal file
View File

@ -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>

1514
src/views/pages/home.vue Normal file

File diff suppressed because it is too large Load Diff

View File

@ -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>

283
src/views/pages/notice.vue Normal file
View File

@ -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>

400
src/views/pages/relic.vue Normal file
View File

@ -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>

292
src/views/pages/result.vue Normal file
View File

@ -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>

344
src/views/pages/search.vue Normal file
View File

@ -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>

315
src/views/pages/service.vue Normal file
View File

@ -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>