<template>
|
<div class="homePage">
|
<div class="bannerBox imgBox">
|
<img class="bannerImg" :src="banner[0]?.icon" @click="bannerLink(item)" />
|
<div class="bannerText">
|
<div>中国协和医科大学出版社</div>
|
<div class="enText">ABOUT US</div>
|
</div>
|
</div>
|
|
<div class="contentBox">
|
<div class="crumbs">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>关于我们</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="aboutUs">
|
<div class="aboutTitle">
|
<div class="titleBox1">
|
<img class="autoImg" src="@/assets/images/xiehe/about/yinhao.png" alt="" />
|
</div>
|
<div class="titleText">PUBLISHER INTRODUCTION</div>
|
</div>
|
<div class="textBox" v-html="publisherIntroduction"></div>
|
<div class="statisticsBox">
|
<div class="statisticsItem">
|
<div class="statisticsNum">
|
{{ publisherData.focusOnMedical }} <span class="circleBox">年</span>
|
</div>
|
<div class="statisticsTitle">专注医学出版</div>
|
</div>
|
<div class="statisticsItem">
|
<div class="statisticsNum">
|
{{ publisherData.topExpertDatabase }}+ <span class="circleBox">位</span>
|
</div>
|
<div class="statisticsTitle">顶级专家库</div>
|
</div>
|
<div class="statisticsItem">
|
<div class="statisticsNum">
|
{{ publisherData.accumulatedTextbooks }}+ <span class="circleBox">本</span>
|
</div>
|
<div class="statisticsTitle">累计出版教材教辅</div>
|
</div>
|
<div class="statisticsItem">
|
<div class="statisticsNum">
|
{{ publisherData.academicJournals }} <span class="circleBox">本</span>
|
</div>
|
<div class="statisticsTitle">学术期刊</div>
|
</div>
|
<div class="statisticsItem">
|
<div class="statisticsNum">
|
{{ publisherData.dualCoreJournal }} <span class="circleBox">本</span>
|
</div>
|
<div class="statisticsTitle">双核心期刊</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="brandCultureBox">
|
<div class="brandCultureTop">
|
<div class="CultureBox">
|
<div class="brandCultureTitle">
|
<div>理念与品牌文化</div>
|
<div class="enText" style="color: #348c6e; font-size: 48px">
|
PHILOSOPHY & BRAND CULTURE
|
</div>
|
</div>
|
<div class="cultureList" v-loading="loading">
|
<div class="cultureItem firstItem">
|
<div class="cultureTitle" style="border-bottom: 1px solid rgba(255, 255, 255, 0.1)">
|
<div class="leftIcon">
|
<img class="autoImg" src="@/assets/images/xiehe/about/zongzhi.png" alt="" />
|
</div>
|
<div class="titleTextInfo">
|
<div class="itemTitle" style="color: #fff">{{ ideaBrandCulture[0]?.name }}</div>
|
<div class="itemSubTitle" style="color: #fff">
|
{{ ideaBrandCulture[0]?.EnglishName }}
|
</div>
|
</div>
|
</div>
|
<div
|
class="itemText"
|
style="color: #d5d5d5"
|
v-html="ideaBrandCulture[0]?.content"
|
></div>
|
</div>
|
<div class="cultureItem">
|
<div class="cultureTitle">
|
<div class="leftIcon">
|
<img class="autoImg" src="@/assets/images/xiehe/about/beijing.png" alt="" />
|
</div>
|
<div class="titleTextInfo">
|
<div class="itemTitle">{{ ideaBrandCulture[1]?.name }}</div>
|
<div class="itemSubTitle">
|
{{ ideaBrandCulture[1]?.EnglishName }}
|
</div>
|
</div>
|
</div>
|
<div class="itemText" v-html="ideaBrandCulture[1]?.content"></div>
|
</div>
|
<div class="cultureItem">
|
<div class="cultureTitle">
|
<div class="leftIcon">
|
<img class="autoImg" src="@/assets/images/xiehe/about/zizhi.png" alt="" />
|
</div>
|
<div class="titleTextInfo">
|
<div class="itemTitle">{{ ideaBrandCulture[2]?.name }}</div>
|
<div class="itemSubTitle">
|
{{ ideaBrandCulture[2]?.EnglishName }}
|
</div>
|
</div>
|
</div>
|
<div class="itemText" v-html="ideaBrandCulture[2]?.content"></div>
|
</div>
|
<div class="cultureItem">
|
<div class="cultureTitle">
|
<div class="leftIcon">
|
<img class="autoImg" src="@/assets/images/xiehe/about/fazhan.png" alt="" />
|
</div>
|
<div class="titleTextInfo">
|
<div class="itemTitle">{{ ideaBrandCulture[3]?.name }}</div>
|
<div class="itemSubTitle">
|
{{ ideaBrandCulture[3]?.EnglishName }}
|
</div>
|
</div>
|
</div>
|
<div class="itemText" v-html="ideaBrandCulture[3]?.content"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-container">
|
<Map v-if="contactUsData" :contactUsData="contactUsData" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import moment from 'moment'
|
import MapContainer from '@/components/MapContainer.vue'
|
import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue'
|
import Map from './components/map.vue'
|
let screenheight = ref(document.documentElement.clientHeight / 2)
|
const MG = inject('MG')
|
const config = inject('config')
|
const tool = inject('tool')
|
const banner = reactive([])
|
let publisherIntroduction = ref('')
|
let publisherData = ref('')
|
let ideaBrandCulture = ref([])
|
let loading = ref(false)
|
let contactUsData = ref(null)
|
|
const getBanner = () => {
|
MG.resource
|
.getItem({
|
path: 'banner\\about',
|
fields: { link: [] },
|
paging: { start: 0, size: 9 },
|
})
|
.then((res) => {
|
banner.push(...res.datas)
|
console.log(res.datas)
|
})
|
}
|
const getPublisherIntroduction = () => {
|
MG.resource
|
.getItem({
|
path: 'aboutUs\\publisherIntroduction',
|
fields: { content: [] },
|
paging: { start: 0, size: 9 },
|
})
|
.then((res) => {
|
console.log(res.datas)
|
publisherIntroduction.value = res.datas[0].content
|
})
|
}
|
const getIdeaBrandCulture = () => {
|
loading.value = true
|
MG.resource
|
.getItem({
|
path: 'aboutUs\\ideaBrandCulture',
|
fields: { content: [], EnglishName: [] },
|
paging: { start: 0, size: 9 },
|
})
|
.then((res) => {
|
console.log(res.datas, 'ideaBrandCulture')
|
ideaBrandCulture.value = res.datas
|
loading.value = false
|
})
|
}
|
const getPublisherData = () => {
|
MG.resource
|
.getItem({
|
path: 'aboutUs\\publisherData',
|
fields: {
|
academicJournals: [],
|
accumulatedTextbooks: [],
|
dualCoreJournal: [],
|
focusOnMedical: [],
|
topExpertDatabase: [],
|
},
|
paging: { start: 0, size: 1 },
|
})
|
.then((res) => {
|
console.log(res.datas, 'publisherData')
|
publisherData.value = res.datas[0]
|
})
|
}
|
|
// 获取联系我们
|
const getConectText = () => {
|
MG.resource
|
.getItem({
|
path: 'aboutUs\\contactUs',
|
fields: {
|
postalCode: [],
|
address: [],
|
telphone: [],
|
faxNumber: [],
|
website: [],
|
mailbox: [],
|
},
|
sort: {
|
LinkOrder: 'Asc',
|
},
|
paging: {
|
start: 0,
|
size: 999,
|
},
|
coverSize: {
|
height: 430,
|
},
|
})
|
.then((res) => {
|
const { datas } = res
|
if (datas?.length > 0) {
|
contactUsData.value = datas[0]
|
}
|
})
|
}
|
|
onMounted(() => {
|
getBanner()
|
getPublisherIntroduction()
|
getPublisherData()
|
getIdeaBrandCulture()
|
getConectText()
|
})
|
</script>
|
|
<style lang="less" scoped>
|
.bannerBox {
|
height: 380px;
|
position: relative;
|
.bannerText {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
font-size: 36px;
|
font-weight: 700;
|
color: #fff;
|
text-shadow: 0px 0px 10px #000000;
|
text-align: center;
|
}
|
.enText {
|
font-size: 28px;
|
opacity: 0.45;
|
margin-top: 10px;
|
}
|
}
|
.homePage {
|
min-width: 1220px;
|
min-height: calc(100vh - 61.8%);
|
background-color: #fff;
|
}
|
.contentBox {
|
background-color: #fff;
|
|
padding-bottom: 100px;
|
margin-top: 35px;
|
.aboutUs {
|
width: 100%;
|
font-size: 16px;
|
border-top: 1px solid #ededed;
|
margin-top: 40px;
|
.aboutTitle {
|
display: flex;
|
width: 100%;
|
padding-top: 30px;
|
.titleBox1 {
|
position: relative;
|
width: 50px;
|
height: 50px;
|
margin-right: 20px;
|
}
|
.titleText {
|
font-size: 48px;
|
font-weight: 700;
|
opacity: 0.05;
|
}
|
}
|
.block {
|
display: inline-block;
|
width: 4px;
|
height: 4px;
|
margin-right: 10px;
|
vertical-align: middle;
|
background: #dadada;
|
}
|
.selected {
|
background-color: #e7f9ef;
|
.block {
|
background-color: #008e3f;
|
}
|
}
|
.title {
|
padding: 0;
|
font-weight: 700;
|
text-align: center;
|
background: #008e3f;
|
color: #fff;
|
line-height: 36px;
|
border-bottom: 0;
|
}
|
div {
|
cursor: pointer;
|
// border-bottom: 1px dashed #ededed;
|
}
|
.colorText {
|
color: #144941;
|
}
|
.textBox {
|
line-height: 20px;
|
margin-top: 30px;
|
p {
|
margin-top: 30px;
|
}
|
}
|
}
|
.statisticsBox {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 80px;
|
text-align: center;
|
.statisticsNum {
|
font-size: 48px;
|
}
|
.statisticsTitle {
|
margin-top: 10px;
|
font-size: 14px;
|
}
|
.circleBox {
|
width: 26px;
|
height: 26px;
|
display: inline-block;
|
font-size: 20px;
|
line-height: 26px;
|
color: #fff;
|
background-color: #144941;
|
border-radius: 50%;
|
}
|
}
|
}
|
.brandCultureTop {
|
background-image: url(@/assets/images/xiehe/about/wenhua_bg.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
background-position: center;
|
width: 100%;
|
height: 580px;
|
padding-top: 30px;
|
}
|
|
.brandCultureTitle {
|
font-size: 36px;
|
color: #fff;
|
font-weight: 700;
|
text-align: center;
|
line-height: 70px;
|
}
|
|
.cultureList {
|
display: flex;
|
justify-content: space-between;
|
width: 100%;
|
margin-top: 50px;
|
}
|
|
.cultureItem {
|
width: 324px;
|
height: 320px;
|
background-color: #fff;
|
margin-left: 10px;
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
.firstItem {
|
background-color: #144941;
|
color: #fff;
|
width: 324px;
|
height: 320px;
|
text-align: left;
|
margin-left: 0px;
|
}
|
.CultureBox {
|
width: 1200px;
|
margin: 0 auto;
|
}
|
.leftIcon {
|
width: 58px;
|
height: 58px;
|
position: relative;
|
}
|
.cultureTitle {
|
display: flex;
|
border-bottom: 1px solid #dedede;
|
padding-bottom: 16px;
|
}
|
.titleTextInfo {
|
margin-left: 10px;
|
text-align: left;
|
}
|
.itemTitle {
|
font-size: 18px;
|
font-weight: 700;
|
line-height: 36px;
|
color: #333;
|
}
|
.itemSubTitle {
|
color: #000;
|
font-size: 12px;
|
opacity: 0.5;
|
}
|
.itemText {
|
font-size: 16px;
|
line-height: 28px;
|
color: #000;
|
padding-top: 20px;
|
}
|
</style>
|
