mirror of
http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web.git
synced 2025-12-06 09:26:50 +08:00
feat(layout): 添加平滑滚动功能- 注释了一段实现页面平滑滚动的代码- 滚动方向根据鼠标滚轮 deltaY 值判断- 平滑滚动效果持续800 毫秒- 设置了300 毫秒的延迟，等待用户停止滚动
This commit is contained in:
陈昱达
2
.env
2
.env
@@ -3,4 +3,4 @@ NODE_ENV = 'dev' // 如果是生产环境，请记得切换为production
|
||||
|
||||
# flag
|
||||
VUE_APP_FLAG='dev'
|
||||
VUE_APP_ADMIN='http://1.0.0.0'
|
||||
VUE_APP_ADMIN='http://192.168.1.42:7100'
|
||||
|
||||
2
.env.dev
2
.env.dev
@@ -3,4 +3,4 @@ NODE_ENV = 'dev' // 如果是生产环境，请记得切换为production
|
||||
|
||||
# flag
|
||||
VUE_APP_FLAG='dev'
|
||||
VUE_APP_ADMIN='http://1.0.0.0'
|
||||
VUE_APP_ADMIN='http://192.168.1.42:7100'
|
||||
|
||||
@@ -1,4 +1,30 @@
|
||||
import request from '@/assets/js/utils/request'
|
||||
import getUrl from '@/assets/js/utils/get-url'
|
||||
export default {
|
||||
|
||||
// 获取系统字典树形结构
|
||||
export function getSysDictTree(data) {
|
||||
return request({
|
||||
url: getUrl('/sysDictEx/getSysDictTree', 'admin'),
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新系统字典树形结构
|
||||
export function updateSysDictTree(data) {
|
||||
return request({
|
||||
url: getUrl('/sysDictEx/updateSysDictTree', 'admin'),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
export function uploadFile() {
|
||||
return getUrl('/fileInfoEx/uploadFile', 'admin')
|
||||
}
|
||||
|
||||
// 文件下载
|
||||
export function downloadFile(id) {
|
||||
return getUrl('/fileInfoEx/downloadFile', 'admin') + '?id=' + id
|
||||
}
|
||||
|
||||
43
src/assets/js/utils/dict-utils.js
Normal file
43
src/assets/js/utils/dict-utils.js
Normal file
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* 字典工具类
|
||||
*/
|
||||
|
||||
/**
|
||||
* 根据dictCode查找字典项
|
||||
* @param {Array} dictArray - 字典数组
|
||||
* @param {String} targetCode - 目标字典代码
|
||||
* @returns {Object|null} 找到的字典项或null
|
||||
*/
|
||||
export function findDictByCode(dictArray, targetCode) {
|
||||
if (!dictArray || dictArray.length === 0) return null
|
||||
|
||||
for (let dict of dictArray) {
|
||||
if (dict.dictCode === targetCode) {
|
||||
return dict
|
||||
}
|
||||
|
||||
// 递归查找子节点
|
||||
if (dict.children && dict.children.length > 0) {
|
||||
const found = findDictByCode(dict.children, targetCode)
|
||||
if (found) return found
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据dictCode获取节点ID
|
||||
* @param {Array} dictArray - 字典数组
|
||||
* @param {String} targetCode - 目标字典代码
|
||||
* @returns {String|null} 节点ID或null
|
||||
*/
|
||||
export function getDictIdByCode(dictArray, targetCode) {
|
||||
const dict = findDictByCode(dictArray, targetCode)
|
||||
return dict ? dict.id : null
|
||||
}
|
||||
|
||||
export default {
|
||||
findDictByCode,
|
||||
getDictIdByCode
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import axios from 'axios'
|
||||
import { MessageBox, Message, Loading } from 'element-ui'
|
||||
import store from '@/store'
|
||||
import { getToken } from '@/assets/js/utils/auth'
|
||||
|
||||
// create an axios instance
|
||||
@@ -24,11 +23,11 @@ function endLoading() {
|
||||
// request interceptor
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
if (store.getters.token) {
|
||||
// config.headers['sid'] = getToken()
|
||||
config.headers['sysType'] = '3'
|
||||
config.headers['auth'] = getToken()
|
||||
}
|
||||
// if (store.getters.token) {
|
||||
// // config.headers['sid'] = getToken()
|
||||
// config.headers['sysType'] = '3'
|
||||
// config.headers['auth'] = getToken()
|
||||
// }
|
||||
if (loading) {
|
||||
endLoading()
|
||||
}
|
||||
@@ -83,8 +82,8 @@ service.interceptors.response.use(
|
||||
return false
|
||||
} else {
|
||||
res.content.result = '0'
|
||||
res.result = String(res.result?res.result:0)
|
||||
res.code = String(res.code ? res.code: 0 )
|
||||
res.result = String(res.result ? res.result : 0)
|
||||
res.code = String(res.code ? res.code : 0)
|
||||
return res
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,24 @@
|
||||
<script>
|
||||
import { animateCounter } from '@/assets/js/publicJS'
|
||||
import AnimateCounter from '@/generatedComponents/animateCounter.vue'
|
||||
|
||||
export default {
|
||||
name: 'intro-business',
|
||||
components: { AnimateCounter },
|
||||
mounted() {
|
||||
// 页面加载后启动数字累加
|
||||
window.onload = () => {
|
||||
animateCounter('intro-bus-span1', 0, 232.76, 1000, 2) // 保留两位小数
|
||||
animateCounter('intro-bus-span2', 0, 61.7, 1000, 1) // 保留一位小数
|
||||
|
||||
props: {
|
||||
content: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
year: '截止到2024年底',
|
||||
scaleData: [{ name: '规模保费', value: '232.76' }],
|
||||
profitData: [{ name: '公司总资产', value: '1316.62' }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -18,7 +26,7 @@ export default {
|
||||
<div class="intro-business-container flex justify-content-c align-items-c">
|
||||
<div class="intro flex justify-content-c align-items-c">
|
||||
<p>业务规模 持续提升</p>
|
||||
<p>截止到2024年底</p>
|
||||
<p>{{ content.year }}</p>
|
||||
</div>
|
||||
<!-- 资产 -->
|
||||
<div class="asset">
|
||||
@@ -28,13 +36,17 @@ export default {
|
||||
<!-- <p class="mt10">截止到2024年底</p>-->
|
||||
|
||||
<img src="../../../assets/images/pages/wealth/icon-0.png" alt="" class="right-icon" />
|
||||
<div class="flex" style="gap: 40px">
|
||||
<p class="mt10" style="color:#000">
|
||||
规模保费 <i><animate-counter :end="232.76" :duration="500" class="counter"></animate-counter></i> 亿元
|
||||
</p>
|
||||
<!-- 一行两个左对齐-->
|
||||
|
||||
<p class="mt10" style="color:#000">
|
||||
新单保费 <i><animate-counter :end="61.7" :duration="500" class="counter"></animate-counter></i> 亿元
|
||||
<div class="flex">
|
||||
<p class="mt10 flex-item" style="color:#000" v-for="item in content.scaleData">
|
||||
{{ item.name }} <i><animate-counter :end="item.value" :duration="500" class="counter"></animate-counter></i>
|
||||
<span
|
||||
:class="{
|
||||
counter: item.unit.indexOf('%') !== -1
|
||||
}"
|
||||
>{{ item.unit }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,22 +58,15 @@ export default {
|
||||
|
||||
<img src="../../../assets/images/pages/wealth/icon-2.png" alt="" class="right-icon" />
|
||||
|
||||
<div class="flex " style="gap: 40px">
|
||||
<p class="mt10" style="color:#000">
|
||||
公司总资产 <i><animate-counter :end="1316.62" :duration="500" class="counter"></animate-counter></i> 亿元
|
||||
</p>
|
||||
|
||||
<p class="mt10" style="color:#000">
|
||||
公司净资产 <i><animate-counter :end="86.97" :duration="500" class="counter"></animate-counter></i> 亿元
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex mt10" style="gap: 60px">
|
||||
<p class="mt10" style="color:#000">
|
||||
年化财务收益率达 <i><animate-counter end="6.80" :duration="500" class="counter"></animate-counter></i> <span class="counter">%</span>
|
||||
</p>
|
||||
|
||||
<p class="mt10" style="color:#000">
|
||||
年化综合投资收益率 <i><animate-counter end="12.00" :duration="500" class="counter"></animate-counter></i> <span class="counter">%</span>
|
||||
<div class="flex ">
|
||||
<p class="mt10 flex-item" style="color:#000" v-for="item in content.profitData">
|
||||
{{ item.name }} <i><animate-counter :end="item.value" :duration="500" class="counter" :decimals="2"></animate-counter></i>
|
||||
<span
|
||||
:class="{
|
||||
counter: item.unit.indexOf('%') !== -1
|
||||
}"
|
||||
>{{ item.unit }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,5 +219,15 @@ export default {
|
||||
//}
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
// 一行两个
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
gap: 10px;
|
||||
.flex-item {
|
||||
flex: 1 1 calc(50% - 5px); /* 占据一半宽度，减去间距 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,6 +10,18 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
content: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
paragraph1:
|
||||
'成立于2007年，总部设在北京，公司注册资本金达101.3亿元人民币，位于寿险公司前列，资本实力雄厚。截至2024年末，公司总资产达1,316.62亿元人民币',
|
||||
paragraph2: ' 截至目前，公司已设立了22家分公司，200余家分支机构，为全国超过百万个人客户及近万家企业客户提供丰富、周到、快捷、优质的保险服务'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
@@ -27,10 +39,10 @@ export default {
|
||||
<h2>COMPANY PROFILE</h2>
|
||||
<h1>关于幸福</h1>
|
||||
<p>
|
||||
成立于2007年，总部设在北京，公司注册资本金达101.3亿元人民币，位于寿险公司前列，资本实力雄厚。截至2024年末，公司总资产达1,316.62亿元人民币
|
||||
{{ content.paragraph1 }}
|
||||
</p>
|
||||
<p>
|
||||
截至目前，公司已设立了22家分公司，200余家分支机构，为全国超过百万个人客户及近万家企业客户提供丰富、周到、快捷、优质的保险服务
|
||||
{{ content.paragraph2 }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
import introSunful from './components/intro-sunful.vue'
|
||||
import introBusiness from './components/intro-business.vue'
|
||||
import introLayout from './components/intro-layout.vue'
|
||||
import { getSysDictTree } from '@/api/generatedApi'
|
||||
import { findDictByCode, getDictIdByCode } from '@/assets/js/utils/dict-utils.js'
|
||||
|
||||
export default {
|
||||
name: 'introduction',
|
||||
@@ -9,6 +11,98 @@ export default {
|
||||
introSunful,
|
||||
introBusiness,
|
||||
introLayout
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aboutData: {
|
||||
paragraph1: '',
|
||||
paragraph2: ''
|
||||
},
|
||||
businessData: {
|
||||
year: '',
|
||||
scaleData: [{ name: '', value: '' }],
|
||||
profitData: [{ name: '', value: '' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 解析字典数据并填充到页面
|
||||
parseDictData(dictData) {
|
||||
// 查找"关于幸福"部分的数据
|
||||
const aboutSection = findDictByCode(dictData, 'GSJS-GYXF')
|
||||
if (aboutSection && aboutSection.children) {
|
||||
// 查找段落1数据
|
||||
const paragraph1Data = findDictByCode([aboutSection], 'GSJS-NDYWSJ-DL1')
|
||||
if (paragraph1Data && paragraph1Data.sysDictDetailDTOs && paragraph1Data.sysDictDetailDTOs.length > 0) {
|
||||
// 段落1数据处理逻辑
|
||||
this.aboutData.paragraph1 = paragraph1Data.sysDictDetailDTOs[0].detailContent || ''
|
||||
}
|
||||
|
||||
// 查找段落2数据（如果有）
|
||||
const paragraph2Data = findDictByCode([aboutSection], 'GSJS-NDYWSJ-DL2')
|
||||
if (paragraph2Data && paragraph2Data.sysDictDetailDTOs && paragraph2Data.sysDictDetailDTOs.length > 0) {
|
||||
this.aboutData.paragraph2 = paragraph2Data.sysDictDetailDTOs[0].detailContent || ''
|
||||
}
|
||||
}
|
||||
|
||||
// 查找"年度业务数据"部分
|
||||
const businessSection = findDictByCode(dictData, 'GSJS-NDYWSJ')
|
||||
if (businessSection && businessSection.children) {
|
||||
// 查找年份数据
|
||||
const yearSection = findDictByCode([businessSection], 'GSJS-NDYWSJ-TJNF')
|
||||
if (yearSection && yearSection.sysDictDetailDTOs && yearSection.sysDictDetailDTOs.length > 0) {
|
||||
this.businessData.year = yearSection.sysDictDetailDTOs[0].detailContent || ''
|
||||
}
|
||||
|
||||
// 查找业务规模数据
|
||||
const scaleSection = findDictByCode([businessSection], 'GSJS-NDYWSJ-YWGM')
|
||||
if (scaleSection && scaleSection.sysDictDetailDTOs) {
|
||||
this.businessData.scaleData = scaleSection.sysDictDetailDTOs.map(item => ({
|
||||
name: item.detailName || '',
|
||||
value: item.detailValue || '',
|
||||
unit: item.detailUnit || ''
|
||||
}))
|
||||
}
|
||||
|
||||
// 查找价值利润数据
|
||||
const profitSection = findDictByCode([businessSection], 'GSJS-NDYWSJ-JZLR')
|
||||
if (profitSection && profitSection.sysDictDetailDTOs) {
|
||||
this.businessData.profitData = profitSection.sysDictDetailDTOs.map(item => ({
|
||||
name: item.detailName || '',
|
||||
value: item.detailValue || '',
|
||||
unit: item.detailUnit || ''
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
// 更新原始数据副本
|
||||
this.originalAboutData = JSON.parse(JSON.stringify(this.aboutData))
|
||||
this.originalBusinessData = JSON.parse(JSON.stringify(this.businessData))
|
||||
},
|
||||
// 获取公司介绍数据
|
||||
fetchCompanyProfileData() {
|
||||
getSysDictTree({ dictCode: 'GSJS', getDetail: 1 })
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
if (response.success && response.content && response.content.content) {
|
||||
// 处理返回的字典数据
|
||||
// 保存原始字典数据
|
||||
this.originalDictData = response.content.content
|
||||
// 解析数据并填充到页面
|
||||
this.parseDictData(response.content.content)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('获取数据失败')
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchCompanyProfileData()
|
||||
|
||||
console.log(this.aboutData)
|
||||
console.log(this.businessData)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -16,14 +110,15 @@ export default {
|
||||
<template>
|
||||
<div class="intro-container">
|
||||
<!-- 介绍幸福人寿的部分 -->
|
||||
<intro-sunful />
|
||||
<intro-sunful :content="aboutData" />
|
||||
<!-- 介绍业务规模的部分 -->
|
||||
<intro-business class="mt90"/>
|
||||
<intro-business class="mt90" :content="businessData" />
|
||||
<!-- 全国机构布局的部分 -->
|
||||
<intro-layout class="mt90" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.intro-container {}
|
||||
.intro-container {
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user