<template>
|
<div class="homePage">
|
<el-carousel :height="screenheight + 'px'">
|
<el-carousel-item v-for="(item, index) in banner" :key="index">
|
<div class="bannerBox imgBox">
|
<img id="autoHeight" class="bannerImg" :src="item.icon" @click="bannerLink(item)" />
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
|
<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 }}+ 位</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">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">
|
<MapContainer />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import moment from 'moment'
|
import MapContainer from '@/components/MapContainer.vue'
|
import { ref, onBeforeMount, inject, reactive, onMounted } from '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)
|
|
const getBanner = () => {
|
MG.resource
|
.getItem({
|
path: 'banner\\homeBanner',
|
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]
|
})
|
}
|
|
onMounted(() => {
|
getBanner()
|
getPublisherIntroduction()
|
getPublisherData()
|
getIdeaBrandCulture()
|
})
|
</script>
|
|
<style lang="less" scoped>
|
.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;
|
}
|
.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);
|
width: 100%;
|
height: 500px;
|
padding-top: 55px;
|
}
|
.brandCultureTitle {
|
font-size: 36px;
|
color: #fff;
|
font-weight: 700;
|
text-align: center;
|
}
|
|
.cultureList {
|
display: flex;
|
justify-content: space-between;
|
width: 100%;
|
margin-top: 60px;
|
}
|
|
.cultureItem {
|
width: 320px;
|
height: 320px;
|
background-color: #fff;
|
margin-left: 30px;
|
padding: 20px;
|
box-sizing: border-box;
|
}
|
.firstItem {
|
background-color: #144941;
|
color: #fff;
|
width: 320px;
|
height: 320px;
|
text-align: center;
|
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: 20px;
|
text-align: left;
|
}
|
.itemTitle {
|
font-size: 18px;
|
font-weight: 700;
|
line-height: 36px;
|
color: #333;
|
}
|
.itemSubTitle {
|
color: #000;
|
opacity: 0.5;
|
}
|
.itemText {
|
font-size: 16px;
|
line-height: 28px;
|
color: #000;
|
padding-top: 20px;
|
}
|
</style>
|
