|
|
@@ -0,0 +1,486 @@
|
|
|
+<template>
|
|
|
+ <div class="index com-width-1400 com-margin-auto">
|
|
|
+ <div class="btn-article-menu-switch">
|
|
|
+ <div
|
|
|
+ class="btn flex column center"
|
|
|
+ @click="navMenuVisible = !navMenuVisible">
|
|
|
+ <div class="icon el-icon-notebook-2"></div>
|
|
|
+ <div>Article Menu</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <section
|
|
|
+ class="nav"
|
|
|
+ v-show="navMenuVisible">
|
|
|
+ <ul class="nav-l">
|
|
|
+ <li
|
|
|
+ v-for="(opt, i) in articleLists"
|
|
|
+ :key="i"
|
|
|
+ @click="getList(i)"
|
|
|
+ :class="{ active: type == i }">
|
|
|
+ <img :src="opt.src" />
|
|
|
+ <p>{{ opt.n }}</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <ul class="nav-r">
|
|
|
+ <!-- 大标题，二级目录 -->
|
|
|
+ <li
|
|
|
+ v-for="items in articleLists[type]?.data"
|
|
|
+ :key="items.id">
|
|
|
+ <a
|
|
|
+ class="nav-r-title com-singe-line"
|
|
|
+ :class="{ active: items.hyphensTitle == articleLists[type]?.nav }"
|
|
|
+ :href="`#${items.hyphensTitle}`"
|
|
|
+ @click="smoothScroll($event, items.hyphensTitle)">
|
|
|
+ <i
|
|
|
+ :class="
|
|
|
+ items.show ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
|
|
|
+ "
|
|
|
+ @click.stop="toggle(items)"></i>
|
|
|
+ {{ items.title }}
|
|
|
+ </a>
|
|
|
+ <a
|
|
|
+ v-show="items.show"
|
|
|
+ class="nav-r-anchor com-singe-line"
|
|
|
+ :class="{ active: item == articleLists[type]?.nav }"
|
|
|
+ v-for="(item, i) in items.label_ids"
|
|
|
+ :key="i"
|
|
|
+ :href="`#${item}`"
|
|
|
+ @click="smoothScroll($event, item)"
|
|
|
+ >{{ replaceHyphensWithSpaces(item) }}</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </section>
|
|
|
+ <article v-loading="listLoading">
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="items in articleLists[type]?.data"
|
|
|
+ :key="items.id">
|
|
|
+ <div class="root">
|
|
|
+ <img
|
|
|
+ v-if="items.logo"
|
|
|
+ :src="items.logo" />
|
|
|
+ <div>
|
|
|
+ <a
|
|
|
+ class="root-title"
|
|
|
+ :id="replaceSpacesWithHyphens(items.title)"
|
|
|
+ >{{ items.title }}</a
|
|
|
+ >
|
|
|
+ <p class="root-des">{{ items.description }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="content"
|
|
|
+ v-html="items.content"></div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div v-if="!articleLists.length">
|
|
|
+ <el-empty description="No Data"></el-empty>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import throttle from 'lodash.throttle'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ articleLists: [
|
|
|
+ {
|
|
|
+ src: require('@/assets/img/article/About.png'),
|
|
|
+ n: 'About Us',
|
|
|
+ nav: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('@/assets/img/article/Advantage.png'),
|
|
|
+ n: 'Our Advantage',
|
|
|
+ nav: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('@/assets/img/article/Capability.png'),
|
|
|
+ n: 'Capability',
|
|
|
+ nav: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: require('@/assets/img/article/Compliance.png'),
|
|
|
+ n: 'Compliance',
|
|
|
+ nav: '',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ type: 1,
|
|
|
+ listLoading: true,
|
|
|
+ navMenuVisible: true,
|
|
|
+ isScrollingToTarget: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ type(newValue, oldValue) {
|
|
|
+ if (process.client && newValue !== oldValue) {
|
|
|
+ window.scrollTo({
|
|
|
+ top: 0,
|
|
|
+ behavior: 'smooth',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let a
|
|
|
+ switch (this.$route.params.type) {
|
|
|
+ case 'About-Us':
|
|
|
+ a = 0
|
|
|
+ break
|
|
|
+
|
|
|
+ case 'Our-Advantage':
|
|
|
+ a = 1
|
|
|
+ break
|
|
|
+
|
|
|
+ case 'Capability':
|
|
|
+ a = 2
|
|
|
+ break
|
|
|
+
|
|
|
+ case 'Compliance':
|
|
|
+ a = 3
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ a = 0
|
|
|
+ }
|
|
|
+ this.getList(a)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ window.addEventListener('resize', this.$_resizeHandler)
|
|
|
+ window.addEventListener('scroll', this.$_handleScroll) // 监听滚动事件
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ window.removeEventListener('resize', this.$_resizeHandler)
|
|
|
+ window.removeEventListener('scroll', this.$_handleScroll) // 解绑滚动事件
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList(type) {
|
|
|
+ this.type = type
|
|
|
+ if (this.articleLists[type].data) {
|
|
|
+ this.articleLists[type].nav =
|
|
|
+ this.articleLists[type].data[0].hyphensTitle
|
|
|
+ window.scrollTo({
|
|
|
+ top: 0,
|
|
|
+ behavior: 'smooth',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.listLoading = true
|
|
|
+
|
|
|
+ this.$axios
|
|
|
+ .post('/uk-api/home/articleList', {
|
|
|
+ type: this.type + 1,
|
|
|
+ page: 1,
|
|
|
+ limit: 1000, // 旧接口迭代，后端不去掉分页
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.$set(this.articleLists[type], 'data', [])
|
|
|
+ this.articleLists[type].data = res.result.data?.map(item => {
|
|
|
+ this.$set(item, 'show', true)
|
|
|
+ item.hyphensTitle = this.replaceSpacesWithHyphens(item.title)
|
|
|
+ item.content = item.content.replace(
|
|
|
+ /<img([^>]*)>/g,
|
|
|
+ (match, attributes) => {
|
|
|
+ let newAttributes = attributes
|
|
|
+ // 如果已有 style 属性
|
|
|
+ if (attributes.includes('style=')) {
|
|
|
+ // 提取原有的 style 属性值
|
|
|
+ const style =
|
|
|
+ (attributes.match(/style="([^"]*)"/) || [])[1] || ''
|
|
|
+ // 检查是否已经包含 max-width
|
|
|
+ if (!style.includes('max-width')) {
|
|
|
+ // 如果没有 max-width,则添加 max-width: 100%;
|
|
|
+ newAttributes = attributes.replace(
|
|
|
+ /style="([^"]*)"/,
|
|
|
+ `style="$1;max-width:100%;"`
|
|
|
+ )
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果没有 style 属性,则添加 style="max-width:100%;"
|
|
|
+ newAttributes = `${attributes} style="max-width:100%;"`
|
|
|
+ }
|
|
|
+ return `<img${newAttributes}>`
|
|
|
+ }
|
|
|
+ )
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.articleLists[type].nav =
|
|
|
+ this.articleLists[type].data[0].hyphensTitle
|
|
|
+ this.listLoading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.listLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ smoothScroll(event, target) {
|
|
|
+ if (process.client) {
|
|
|
+ event && event.preventDefault()
|
|
|
+ const escapedSelector = CSS.escape(target)
|
|
|
+ const element = document.querySelector(`#${escapedSelector}`)
|
|
|
+
|
|
|
+ if (element) {
|
|
|
+ this.isScrollingToTarget = true // 设置标志
|
|
|
+ this.selNav(target) // 立即更新选中状态
|
|
|
+
|
|
|
+ const elementPosition =
|
|
|
+ element.getBoundingClientRect().top + window.scrollY
|
|
|
+ const offsetPosition = elementPosition - 230
|
|
|
+
|
|
|
+ window.scrollTo({
|
|
|
+ top: offsetPosition,
|
|
|
+ behavior: 'smooth',
|
|
|
+ })
|
|
|
+
|
|
|
+ // 等待滚动动画完成后重置标志
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isScrollingToTarget = false
|
|
|
+ }, 1000) // 设置稍长于滚动动画的时间
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selNav(str) {
|
|
|
+ this.articleLists[this.type].nav = str
|
|
|
+ },
|
|
|
+ toggle(items) {
|
|
|
+ this.$set(items, 'show', !items.show)
|
|
|
+ },
|
|
|
+ replaceSpacesWithHyphens(str) {
|
|
|
+ return str.replace(/\s+/g, '-')
|
|
|
+ },
|
|
|
+ replaceHyphensWithSpaces(str) {
|
|
|
+ return str.replace(/-/g, ' ')
|
|
|
+ },
|
|
|
+ $_resizeHandler: throttle(function () {
|
|
|
+ const width = window.document.body.clientWidth
|
|
|
+ this.navMenuVisible = width >= 1200
|
|
|
+ }, 500),
|
|
|
+
|
|
|
+ $_handleScroll: throttle(function () {
|
|
|
+ // 如果是点击导航触发的滚动，不处理滚动监听
|
|
|
+ if (this.isScrollingToTarget) return
|
|
|
+
|
|
|
+ const anchors = document.querySelectorAll('article a[id]')
|
|
|
+ const scrollTop = window.scrollY
|
|
|
+ const buffer = 230
|
|
|
+
|
|
|
+ let currentAnchor = null
|
|
|
+
|
|
|
+ for (const anchor of anchors) {
|
|
|
+ const rect = anchor.getBoundingClientRect()
|
|
|
+ const elementTop = rect.top + window.scrollY
|
|
|
+
|
|
|
+ if (elementTop <= scrollTop + buffer) {
|
|
|
+ currentAnchor = anchor
|
|
|
+ } else {
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentAnchor) {
|
|
|
+ const anchorId = currentAnchor.getAttribute('id')
|
|
|
+ this.selNav(anchorId)
|
|
|
+ }
|
|
|
+ }, 200),
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.index {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ position: sticky;
|
|
|
+ top: 148px;
|
|
|
+ height: fit-content;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-l {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ li {
|
|
|
+ padding: 10px 0;
|
|
|
+ transition: background-color 0.7s;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ color: #007ad8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ color: #c806ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ color: #df0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ color: #ffc300;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ &:nth-child(1) {
|
|
|
+ background-color: rgba(0, 122, 216, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ background-color: rgba(200, 6, 255, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3) {
|
|
|
+ background-color: rgba(223, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(4) {
|
|
|
+ background-color: rgba(255, 195, 0, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-r {
|
|
|
+ width: 180px;
|
|
|
+ background-color: #00213b;
|
|
|
+ vertical-align: top;
|
|
|
+ padding: 10px;
|
|
|
+ min-height: 463px;
|
|
|
+ max-height: calc(100vh - 168px);
|
|
|
+ overflow-y: scroll;
|
|
|
+
|
|
|
+ li {
|
|
|
+ a {
|
|
|
+ color: #fff;
|
|
|
+ display: block;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-r-title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-r-anchor {
|
|
|
+ color: #ddd;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background-color: #4da9f2;
|
|
|
+ border-top-right-radius: 20px;
|
|
|
+ border-bottom-right-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ article {
|
|
|
+ flex: 1;
|
|
|
+ padding: 80px 20px 20px;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ .root {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .root-title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .root-des {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #434649;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-article-menu-switch {
|
|
|
+ position: absolute;
|
|
|
+ left: 2px;
|
|
|
+ top: 12px;
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ @media screen and (max-width: 1200px) {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 1px 1px 3px 2px rgba(#eee, 0.5);
|
|
|
+ background-color: rgba(#fff, 0.7);
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 100px;
|
|
|
+ height: 52px;
|
|
|
+ color: #777;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(#fff, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.index section.nav {
|
|
|
+ @media screen and (max-width: 1200px) {
|
|
|
+ box-shadow: 1px 1px 3px 2px rgba(#777, 0.5);
|
|
|
+ z-index: 2;
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ top: 72px;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .content {
|
|
|
+ * {
|
|
|
+ word-break: break-word !important;
|
|
|
+ white-space: pre-wrap !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
