| | |
| | | <div class="titleBox1"> |
| | | <img class="autoImg" src="@/assets/images/xiehe/about/yinhao.png" alt="" /> |
| | | </div> |
| | | <div class="titleText">Publisher Introduction</div> |
| | | <div class="titleText">PUBLISHER INTRODUCTION</div> |
| | | </div> |
| | | <div class="textBox" v-html="publisherIntroduction"></div> |
| | | <div class="statisticsBox"> |
| | |
| | | <div class="statisticsTitle">专注医学出版</div> |
| | | </div> |
| | | <div class="statisticsItem"> |
| | | <div class="statisticsNum">{{ publisherData.topExpertDatabase }}+ 位</div> |
| | | <div class="statisticsNum"> |
| | | {{ publisherData.topExpertDatabase }}+ <span class="circleBox">位</span> |
| | | </div> |
| | | <div class="statisticsTitle">顶级专家库</div> |
| | | </div> |
| | | <div class="statisticsItem"> |
| | |
| | | <div class="CultureBox"> |
| | | <div class="brandCultureTitle"> |
| | | <div>理念与品牌文化</div> |
| | | <div class="enText">Philosophy & Brand Culture</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> |
| | | </div> |
| | | </div> |
| | | <div |
| | | class="itemText" |
| | | style="color: #d5d5d5" |
| | | v-html="ideaBrandCulture[0]?.content" |
| | | ></div> |
| | | <div class="itemText" style="color: #d5d5d5" v-html="ideaBrandCulture[0]?.content"></div> |
| | | </div> |
| | | <div class="cultureItem"> |
| | | <div class="cultureTitle"> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="page-container"> |
| | | <MapContainer /> |
| | | <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' |
| | | let screenheight = ref(document.documentElement.clientHeight / 2) |
| | | import { ref, inject, reactive, onMounted } from 'vue' |
| | | import Map from './components/map.vue' |
| | | 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 |
| | |
| | | paging: { start: 0, size: 9 }, |
| | | }) |
| | | .then((res) => { |
| | | console.log(res.datas, 'ideaBrandCulture') |
| | | ideaBrandCulture.value = res.datas |
| | | loading.value = false |
| | | }) |
| | |
| | | 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] |
| | | } |
| | | }) |
| | | } |
| | | |
| | |
| | | getPublisherIntroduction() |
| | | getPublisherData() |
| | | getIdeaBrandCulture() |
| | | getConectText() |
| | | }) |
| | | </script> |
| | | |
| | |
| | | .bannerBox { |
| | | height: 380px; |
| | | position: relative; |
| | | |
| | | .bannerText { |
| | | position: absolute; |
| | | top: 50%; |
| | |
| | | text-shadow: 0px 0px 10px #000000; |
| | | text-align: center; |
| | | } |
| | | |
| | | .enText { |
| | | font-size: 36px; |
| | | font-size: 28px; |
| | | opacity: 0.45; |
| | | margin-top: 20px; |
| | | 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; |
| | |
| | | vertical-align: middle; |
| | | background: #dadada; |
| | | } |
| | | |
| | | .selected { |
| | | background-color: #e7f9ef; |
| | | |
| | | .block { |
| | | background-color: #008e3f; |
| | | } |
| | | } |
| | | |
| | | .title { |
| | | padding: 0; |
| | | font-weight: 700; |
| | |
| | | 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; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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: 500px; |
| | | padding-top: 55px; |
| | | 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: 60px; |
| | | margin-top: 50px; |
| | | } |
| | | |
| | | .cultureItem { |
| | | width: 320px; |
| | | width: 324px; |
| | | height: 320px; |
| | | background-color: #fff; |
| | | margin-left: 30px; |
| | | margin-left: 10px; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .firstItem { |
| | | background-color: #144941; |
| | | color: #fff; |
| | | width: 320px; |
| | | width: 324px; |
| | | height: 320px; |
| | | text-align: center; |
| | | 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: 20px; |
| | | 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; |