Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website

杨磊

昨天 76731b6946ff627bd349c66933198e5d2954675d

Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website

 src/assets/images/about/adress.png

 src/assets/images/about/chuanzhen.png

 src/assets/images/about/email.png

 src/assets/images/about/map-marker.png

 src/assets/images/about/phone.png

 src/assets/images/about/webpeizhi.png

 src/layout/components/footerPage.vue

@@ -40,6 +40,9 @@
        </div>
      </div>
    </div>
    <el-divider
      style="border-color: rgba(255, 255, 255, 0.25); width: 1369px; margin: auto"
    ></el-divider>
    <div class="copyrightBox">
      <span
        >中国协和医科大学出版社有限公司 丨 备案序号：<span class="beian" @click="toLink"
@@ -310,7 +313,7 @@
    height: 80px;
    line-height: 40px;
    font-size: 14px;
    border-top: 1px solid #ccc;
    // border-top: 1px solid #ccc;
    .beian {
      cursor: pointer;
    }

 src/views/aboutUs/components/map.vue

New file
@@ -0,0 +1,145 @@
<script setup>
import { onMounted, onUnmounted, defineProps, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import posImg from '@/assets/images/about/adress.png'

const props = defineProps({
  contactUsData: {
    type: Object,
  },
})

let dataStr = props.contactUsData
let map = null
let showDailog = ref(true)

const clearMarker = (e) => {
  showDailog.value = true
}

const close = (e) => {
  showDailog.value = false
}

onMounted(() => {
  AMapLoader.load({
    key: '328ca554937f0d1c9f79ea3621136eed', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 15.5, // 初始化地图级别
        center: [116.413823, 39.912052], // 初始化地图中心点位置
      })
      const position = new AMap.LngLat(116.413823, 39.912052) //Marker 经纬度
      const markerContent = `<div class="custom-content-marker" onclick="clearMarker()"><img style="width:40px" src="${posImg}"></div>`
      const marker = new AMap.Marker({
        position: position,
        content: markerContent, //将 html 传给 content
        offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
      })
      map.add(marker)
      document.querySelector('.custom-content-marker').onclick = clearMarker
    })
    .catch((e) => {
      console.log(e)
    })
})

onUnmounted(() => {
  map?.destroy()
})
</script>

<template>
  <div id="container">
    <div class="content" id="con" v-show="showDailog">
      <div class="title">
        <span class="text">联系我们</span>
        <el-icon class="icon" @click="close"><Close /></el-icon>
      </div>
      <div class="tips">
        <img src="@/assets/images/about/map-marker.png" alt="" />
        <span>地址：{{ dataStr?.address ?? '-' }}</span>
      </div>
      <div class="tips">
        <img src="@/assets/images/about/email.png" alt="" />
        <span>邮编：{{ dataStr?.postalCode ?? '-' }}</span>
      </div>
      <div class="tips">
        <img src="@/assets/images/about/phone.png" alt="" />
        <span>总机：{{ dataStr?.telphone ?? '-' }}</span>
      </div>
      <div class="tips">
        <img src="@/assets/images/about/chuanzhen.png" alt="" />
        <span>邮箱：{{ dataStr?.mailbox ?? '-' }}</span>
      </div>
      <div class="tips">
        <img src="@/assets/images/about/webpeizhi.png" alt="" />
        <span>网站：{{ dataStr?.website ?? '-' }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 557px;
  position: relative;

  .content {
    width: 260px;
    height: 230px;
    background: #525252;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    z-index: 99;
    top: 35%;
    left: 55%;
    color: #fff;
    padding: 20px;
    font-family: Microsoft YaHei UI;

    .title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .text {
        font-weight: 600;
        font-size: 20px;
        color: #ffffff;
      }

      .icon {
        font-size: 18px;
        cursor: pointer;
      }
    }

    .tips {
      font-size: 14px;
      line-height: 18px;
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      span{
        line-height: 24px;
      }

      img {
        width: 20px;
        margin-right: 8px;
      }
    }
  }
}
</style>

 src/views/aboutUs/index.vue

@@ -31,7 +31,9 @@
            <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">
@@ -60,7 +62,9 @@
        <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">
@@ -128,7 +132,7 @@
      </div>
    </div>
    <div class="page-container">
      <MapContainer />
      <Map v-if="contactUsData" :contactUsData="contactUsData" />
    </div>
  </div>
</template>
@@ -137,6 +141,7 @@
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')
@@ -146,6 +151,7 @@
let publisherData = ref('')
let ideaBrandCulture = ref([])
let loading = ref(false)
let contactUsData = ref(null)

const getBanner = () => {
  MG.resource
@@ -204,11 +210,44 @@
    })
}

// 获取联系我们
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>

@@ -230,7 +269,7 @@
  .enText {
    font-size: 28px;
    opacity: 0.45;
    margin-top: 20px;
    margin-top: 10px;
  }
}
.homePage {
@@ -312,6 +351,7 @@
    }
    .statisticsTitle {
      margin-top: 10px;
      font-size: 14px;
    }
    .circleBox {
      width: 26px;
@@ -327,38 +367,43 @@
}
.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 {
@@ -376,7 +421,7 @@
  padding-bottom: 16px;
}
.titleTextInfo {
  margin-left: 20px;
  margin-left: 10px;
  text-align: left;
}
.itemTitle {
@@ -387,6 +432,7 @@
}
.itemSubTitle {
  color: #000;
  font-size: 12px;
  opacity: 0.5;
}
.itemText {