diff --git a/src/pages/calendar/index.vue b/src/pages/calendar/index.vue index 51882bd..9090424 100644 --- a/src/pages/calendar/index.vue +++ b/src/pages/calendar/index.vue @@ -1,31 +1,54 @@ @@ -67,40 +90,32 @@ export default { state.Tcalendar = new Calendar(state.fullcalendar, { plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin], initialView: 'dayGridMonth', - aspectRatio: 1, + height: 'auto', + contentHeight: 'auto', locale: 'zh-cn', handleWindowResize: true, - editable: false, // 允许编辑表格 + editable: false, droppable: false, - eventDisplay: 'block', - // height: 'auto', - // 限制事件最大数量 - dayMaxEvents: 0, - eventLimit: false, - // 事件数量超出时更多显示链接汉化 - moreLinkContent: morLinkFunction, - // 显示事件开始时间 + dayMaxEventRows: 1, + moreLinkText: function(num) { + return '+' + num; + }, displayEventTime: false, - // 显示事件结束时间 displayEventEnd: false, - // 关闭全天区域显示 allDaySlot: true, longPressDelay: 0, selectLongPressDelay: 0, - // 开始时间段 slotMinTime: '00:00:00', - - // 结束时间段 slotMaxTime: '00:00:00', eventOrder: 'type,color,start', eventDurationEditable: false, eventResizableFromStart: false, - selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段 - firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。 - unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态 + selectable: true, + firstDay: 1, // 从周一开始，让大部分月份的1号更靠前 + showNonCurrentDates: false, // 不显示非当月日期 + fixedWeekCount: false, // 不固定显示6周 + unselectAuto: true, unselectCancel: '.el-drawer', - // dayMaxEvents: true, - // eventLimit: true, headerToolbar: false, buttonText: { today: '回到今天', @@ -111,33 +126,56 @@ export default { }, allDayText: '全天', events: state.infoList, - eventClassNames: function (arg) { - // 添加自定义class - return [arg.event.extendedProps.class] + eventContent: function () { + // 返回空内容，只显示数量 + return { html: '' }; }, - eventContent: function (arg) { - const italicEl = document.createElement('div') - if (arg.event.extendedProps.startDateMinute && state.type === '1') { - const childEl = document.createElement('span') - childEl.innerHTML = arg.event.extendedProps.startDateMinute - italicEl.append(childEl) - } - italicEl.append(arg.event.title) - italicEl.setAttribute('class', `plan_title ${arg.event.extendedProps.class}`) - return { domNodes: [italicEl] } + moreLinkClick: function() { + // 禁用+N的点击，不做任何操作 + return false; }, - eventClick: function (info) { - // 点击查看时触发 - handleClick(info) - }, - select: function (info) { - // 视图选择日期触发 - handleSelectDate(info) - } + dateClick: function(info) { + // 点击日期时显示该日事项 + const date = dayjs(info.dateStr).format('YYYY-MM-DD'); + state.currentInfoList = []; + state.infoList.forEach(item => { + if(date === item.start){ + state.currentInfoList.push(item); + } + }); + }, + select: function (info) { + // 视图选择日期触发 + handleSelectDate(info) + } // select: function (info) {} - }) - state.Tcalendar.render() - } + }); + state.Tcalendar.render(); + }; + + const getEventColor = (type) => { + const colors = { + 1: 'linear-gradient(135deg, #667eea, #764ba2)', + 4: 'linear-gradient(135deg, #f093fb, #f5576c)', + 5: 'linear-gradient(135deg, #4facfe, #00f2fe)', + 6: 'linear-gradient(135deg, #43e97b, #38f9d7)', + 7: 'linear-gradient(135deg, #fa709a, #fee140)', + 8: 'linear-gradient(135deg, #30cfd0, #330867)' + }; + return colors[type] || 'linear-gradient(135deg, #a8edea, #fed6e3)'; + }; + + const getEventIcon = (type) => { + const icons = { + 1: 'wallet', + 4: 'checkmarkempty', + 5: 'cart', + 6: 'trending-up-filled', + 7: 'shop-filled', + 8: 'gift-filled' + }; + return icons[type] || 'calendar'; + }; // 上一月、周、日 const getPrev = () => { state.Tcalendar.prev() @@ -170,13 +208,26 @@ export default { state.loading = false if (res) { state.infoList = res.data - const today= dayjs(new Date()).format('YYYY-MM-DD') - state.infoList.forEach(item => { - if(today===item.start){ - state.currentInfoList.push(item) - } - }) state.Tcalendar.addEventSource(state.infoList) + // 数据加载完成后更新1号的事项 + updateFirstDayEvents() + } + }) + } + + // 更新为当月1号的事项 + const updateFirstDayEvents = () => { + // 获取当前视图的年月 + const currentStart = state.Tcalendar.view.currentStart + const year = currentStart.getFullYear() + const month = String(currentStart.getMonth() + 1).padStart(2, '0') + const firstDay = `${year}-${month}-01` + + // 筛选1号的事项 + state.currentInfoList = [] + state.infoList.forEach(item => { + if(firstDay === item.start){ + state.currentInfoList.push(item) } }) } @@ -281,281 +332,277 @@ const handleSelectDate = (info) => { handleClick, getNext, morLinkFunction, - getCalendarList + getCalendarList, + getEventColor, + getEventIcon, + updateFirstDayEvents } } } - diff --git a/src/pages/index.vue b/src/pages/index.vue index a090ab2..904cf0c 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -3,18 +3,25 @@ -
-
    资产总览
+
+
+ + 资产总览 +
- + + +
净资产
{{ (parseFloat(debitTotalBalance)+parseFloat(investBalance)-parseFloat(unClearedOnlineDebt)-parseFloat(creditBalance)- parseFloat(peopleLendHistory)).toFixed(2) }}元
- + + +
总负债
{{ (parseFloat(unClearedOnlineDebt)+ parseFloat(creditBalance)+ parseFloat(peopleLendHistory)).toFixed(2)}}元
@@ -22,103 +29,120 @@
-
- +
+ + +
人情欠款
{{ peopleLendHistory }}元
- + + +
未结清贷款本息
{{ unClearedOnlineDebt }}元
- -
+
- + + +
信用卡已用额度
{{ creditBalance}}元
- + + +
未结清分期本息
{{ unclearedCreditInstallment }}元
-
- -
- - -
-
储蓄卡余额
-
{{ debitBalance }}元
-
-
-
- -
-
储蓄账户余额
-
{{ debitTotalBalance }}元
-
-
- +
+ + + +
+
储蓄卡余额
+
{{ debitBalance }}元
+
+
+ + + +
+
储蓄账户余额
+
{{ debitTotalBalance }}元
+
+
+
- + + +
信用卡可用额度
{{ creditAvailableLimit }}元
- + + +
近6月硬查询
{{ lastSixMonths }}次
-
-
- -
-
投资账户余额
-
{{ investBalance }}元
-
-
-
- -
-
本月投资收益
-
{{ currentMonthInvest }}元
-
-
+
+ + + +
+
投资账户余额
+
{{ investBalance }}元
+
+
+ + + +
+
本月投资收益
+
{{ currentMonthInvest }}元
+
+
+
-
- + + +
当月应还款
{{ dueOnlineDebt }}元
- + + +
当月待还款
{{ leftOnlineDebt }}元
@@ -126,17 +150,24 @@
-
    储蓄账户信息
+
+ + 储蓄账户信息 +
-
- +
+ + +
I类储蓄卡
{{ debitICount }}张
-
- +
+ + +
II类储蓄卡
{{ debitIICount }}张
@@ -144,16 +175,19 @@
-
- + + +
储蓄账户余额
{{ debitTotalBalance }}元
- + + +
储蓄卡余额
{{ debitBalance }}元
@@ -162,39 +196,38 @@
- + + +
网络账户
{{ debitOnlineCount }}个
- + + +
网络账户余额
{{ debitOnlineBalance }}元
- - -
- + + +
储值卡
{{ storedValueCardCount }}张
- + + +
储值卡余额
{{ storedValueCardBalance }}元
@@ -204,16 +237,19 @@
-
- + + +
住房公积金余额
{{ housingFundBalance }}元
- + + +
职工医保余额
{{ medicalBalance }}元
@@ -221,10 +257,10 @@
- -
- + + +
个人养老金余额
{{ personalPensionBalance }}元
@@ -232,17 +268,24 @@
-
    信用卡信息
+
+ + 信用卡信息 +
- + + +
信用卡总数
{{ creditCount }}张
- + + +
总额度
{{ creditLimit }}元
@@ -250,16 +293,19 @@
-
- + + +
已使用额度
{{ creditBalance }}元
- + + +
可用额度
{{ creditAvailableLimit }}元
@@ -268,31 +314,38 @@
- + + +
信用卡使用率
{{ creditBillRate }}%
- + + +
当月账单
{{ currentCreditBill }}元
-
- + + +
当月分期本息
{{ creditInstallment }}元
- + + +
未结清分期
{{ unclearedCreditInstallmentCount }}笔
@@ -300,16 +353,19 @@
-
- + + +
未结清分期本息
{{ unclearedCreditInstallment }}元
- + + +
未结清分期本金
{{ unclearedCreditInstallmentPrinciple }}元
@@ -318,14 +374,18 @@
- + + +
未结清分期利息
{{ unclearedCreditInstallmentInterest }}元
- + + +
已结清分期
{{ clearedCreditInstallmentCount }}笔
@@ -333,16 +393,19 @@
-
- + + +
已结清分期本息
{{ clearedCreditInstallmentDebt }}元
- + + +
已结清分期本金
{{ clearedCreditInstallmentPrinciple }}元
@@ -350,31 +413,39 @@
-
- -
-
已结清分期利息
-
{{ clearedCreditInstallmentInterest }}元
-
-
-
- +
+ + + +
+
已结清分期利息
+
{{ clearedCreditInstallmentInterest }}元
+
+
+
+ + +
上月账单使用率
{{ lastMonthUsedRate }}%
-
+
- + + +
上月账单
{{ lastMonthUsedLimit }}元
- + + +
近6月使用率
{{ lastSixMonthUsedRate }}%
@@ -383,7 +454,9 @@
- + + +
近6月平均使用额度
{{ lastSixMonthUsedLimit }}元
@@ -391,17 +464,24 @@
-
    借贷账户信息
+
+ + 借贷账户信息 +
-
- +
+ + +
贷款账户
{{ onlineLendCount }}个
- + + +
未结清贷款本息
{{ unClearedOnlineDebt }}元
@@ -409,15 +489,19 @@
-
- +
+ + +
人情账户
{{ peopleLendCount }}人
-
- +
+ + +
人情欠款
{{ peopleLendHistory }}元
@@ -426,14 +510,18 @@
- + + +
当月应还款
{{ dueOnlineDebt }}元
- + + +
当月已还款
{{ repaidOnlineDebt }}元
@@ -442,14 +530,18 @@
- + + +
当月待还款
{{ leftOnlineDebt }}元
- + + +
未结清贷款
{{ unclearedOnlineDebtCount }}笔
@@ -457,16 +549,19 @@
-
- + + +
未结清贷款本金
{{ unClearedOnlineDebtPrinciple }}元
- + + +
未结清贷款利息
{{ unClearedOnlineDebtInterest }}元
@@ -475,14 +570,18 @@
- + + +
已结清贷款
{{ clearedOnlineDebtCount }}笔
- + + +
已结清贷款本金
{{ clearedOnlineDebtPrinciple }}元
@@ -491,7 +590,9 @@
- + + +
已结清贷款利息
{{ clearedOnlineDebtInterest }}元
@@ -499,18 +600,23 @@
-     POS机信息 + + POS机信息
-
- +
+ + +
POS机
{{ posCount }}台
-
- +
+ + +
当月刷卡次数
{{ currentMonthCount }}次
@@ -518,16 +624,19 @@
- -
- +
+ + +
当月刷卡金额
{{ currentMonthAmount }}元
-
- +
+ + +
当月刷卡手续费
{{ currentMonthCommission }}元
@@ -535,33 +644,39 @@
-
- +
+ + +
当年刷卡次数
{{ currentYearCount }}次
-
- +
+ + +
当年刷卡金额
{{ currentYearAmount }}元
-
- -
- +
+ + +
当年刷卡手续费
{{ currentYearCommission }}元
-
- +
+ + +
累计刷卡次数
{{ accumulateCount }}次
@@ -569,50 +684,63 @@
- -
- +
+ + +
累计刷卡金额
{{ accumulateAmount }}元
-
- +
+ + +
累计刷卡手续费
{{ accumulateCommission }}元
-
    投资账户信息
+
+ + 投资账户信息 +
- + + +
股票账户
{{ stocksCount }}个
- + + +
期货账户
{{ futuresCount }}个
-
- + + +
投资账户余额
{{ investBalance }}元
- + + +
本月投资收益
{{ currentMonthInvest }}元
@@ -620,16 +748,19 @@
-
- + + +
本月投资盈利
{{ currentMonthIncome }}元
- + + +
本月投资亏损
{{ currentMonthExpenses }}元
@@ -638,14 +769,18 @@
- + + +
总收益
{{ totalIncome }}元
- + + +
期货收益
{{ futuresIncome }}元
@@ -654,24 +789,33 @@
- + + +
股票收益
{{ stocksIncome }}元
-
    征信信息
+
+ + 征信信息 +
- + + +
近1月硬查询
{{ lastOneMonths }}次
- + + +
近2月硬查询
{{ lastTwoMonths }}次
@@ -680,14 +824,18 @@
- + + +
近3月硬查询
{{ lastThreeMonths }}次
- + + +
近6月硬查询
{{ lastSixMonths }}次
@@ -696,14 +844,18 @@
- + + +
近1年硬查询
{{ lastOneYears }}次
- + + +
近2年硬查询
{{ lastTwoYears }}次
@@ -711,16 +863,19 @@
-
- + + +
总硬查询
{{ lastAllYears }}次
- + + +
近6月个人查询
{{ lastSixMonthQueryCount }}次
@@ -728,16 +883,19 @@
-
- + + +
近6月贷后管理
{{ lastSixMonthsAfterLoan }}次
- + + +
近2年贷后管理
{{ lastTwoYearsAfterLoan }}次
@@ -745,14 +903,16 @@
-
- -
-
贷后管理总数
-
{{ totalAfterLoan }}次
-
-
-
+
+ + + +
+
贷后管理总数
+
{{ totalAfterLoan }}次
+
+
+
@@ -971,47 +1131,100 @@ onMounted(() => { diff --git a/src/pages/statistic/index.vue b/src/pages/statistic/index.vue index 107fe14..fee4308 100644 --- a/src/pages/statistic/index.vue +++ b/src/pages/statistic/index.vue @@ -1,54 +1,64 @@ @@ -57,31 +67,30 @@ import { ref } from "vue"; import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作 const billGridList=ref([ - // { path: '/pages/page1/page1', text: '账户总览', icon: 'person-filled', permission: 'invest:accountAnalysis:list' }, - { path: '/pages/statistic/bill/creditBillAnalysis/index', text: '信用卡账单统计', icon: 'map', permission: 'invest:creditAnalysis:list' }, - { path: '/pages/statistic/bill/creditInstallmentAnalysis/index', text: '信用卡分期待还', icon: 'map-filled', permission: 'invest:creditInstallment:list' }, - { path: '/pages/statistic/bill/creditInstallmentSettledAnalysis/index', text: '信用卡分期已还', icon: 'map-pin-ellipse', permission: 'invest:creditInstallmentSettledAnalysis:list' }, - { path: '/pages/statistic/bill/onlineLendAnalysis/index', text: '贷款待还统计', icon: 'cloud-upload', permission: 'invest:onlineLendAnalysis:list' }, - { path: '/pages/statistic/bill/onlineLendSettledAnalysis/index', text: '贷款已还统计', icon: 'download', permission: 'invest:onlineLendSettledAnalysis:list' }, - { path: '/pages/statistic/bill/creditRecordAnalysis/index', text: '征信查询统计', icon: 'search', permission: 'invest:creditRecordAnalysis:list' } + { path: '/pages/statistic/bill/creditBillAnalysis/index', text: '信用卡账单统计', icon: 'wallet-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:creditAnalysis:list' }, + { path: '/pages/statistic/bill/creditInstallmentAnalysis/index', text: '信用卡分期待还', icon: 'calendar-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'invest:creditInstallment:list' }, + { path: '/pages/statistic/bill/creditInstallmentSettledAnalysis/index', text: '信用卡分期已还', icon: 'checkbox-filled', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:creditInstallmentSettledAnalysis:list' }, + { path: '/pages/statistic/bill/onlineLendAnalysis/index', text: '贷款待还统计', icon: 'upload-filled', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', permission: 'invest:onlineLendAnalysis:list' }, + { path: '/pages/statistic/bill/onlineLendSettledAnalysis/index', text: '贷款已还统计', icon: 'download-filled', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:onlineLendSettledAnalysis:list' }, + { path: '/pages/statistic/bill/creditRecordAnalysis/index', text: '征信查询统计', icon: 'search', color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', permission: 'invest:creditRecordAnalysis:list' } ]) const accountGridList=ref([ - { path: '/pages/statistic/accounts/accountsBalance/index', text: '记账账户统计', icon: 'staff-filled' , permission: 'invest:accountsBalance:list' }, - { path: '/pages/statistic/accounts/accountDealAnalysis/index', text: '账户收支统计', icon: 'person', permission: 'invest:accountDealAnalysis:list' }, - { path: '/pages/statistic/accounts/dailyExpensesAnalysis/index', text: '日常支出统计', icon: 'wallet' , permission: 'invest:dailyExpensesAnalysis:list' }, - { path: '/pages/statistic/accounts/creditCardDealAnalysis/index', text: '信用卡收支统计', icon: 'wallet' , permission: 'invest:creditCard' }, - { path: '/pages/statistic/accounts/debitDealAnalysis/index', text: '储蓄账户统计', icon: 'wallet-filled', permission: 'invest:debitCard' }, - { path: '/pages/statistic/accounts/debitCardAnalysis/index', text: '结算卡统计', icon: 'shop-filled' , permission: 'invest:debitCardAnalysis:list' }, - { path: '/pages/statistic/accounts/posStatics/index', text: 'POS机统计', icon: 'shop-filled' , permission: 'invest:posStatics:list' }, - { path: '/pages/statistic/accounts/sleepAccounts/index', text: '睡眠账户统计', icon: 'cloud-upload' , permission: 'invest:debitCard' }, - { path: '/pages/statistic/accounts/openCardStatics/index', text: '储蓄卡开卡统计', icon: 'map' , permission: 'invest:debitCard' }, - { path: '/pages/statistic/accounts/dailyLiabilities/index', text: '每日净资产统计', icon: 'calendar' , permission: 'invest:dailyLiabilities:list' }, + { path: '/pages/statistic/accounts/accountsBalance/index', text: '记账账户统计', icon: 'home-filled', color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)', permission: 'invest:accountsBalance:list' }, + { path: '/pages/statistic/accounts/accountDealAnalysis/index', text: '账户收支统计', icon: 'list', color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)', permission: 'invest:accountDealAnalysis:list' }, + { path: '/pages/statistic/accounts/dailyExpensesAnalysis/index', text: '日常支出统计', icon: 'wallet', color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', permission: 'invest:dailyExpensesAnalysis:list' }, + { path: '/pages/statistic/accounts/creditCardDealAnalysis/index', text: '信用卡收支统计', icon: 'wallet-filled', color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)', permission: 'invest:creditCard' }, + { path: '/pages/statistic/accounts/debitDealAnalysis/index', text: '储蓄账户统计', icon: 'paperplane', color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)', permission: 'invest:debitCard' }, + { path: '/pages/statistic/accounts/debitCardAnalysis/index', text: '结算卡统计', icon: 'star', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:debitCardAnalysis:list' }, + { path: '/pages/statistic/accounts/posStatics/index', text: 'POS机统计', icon: 'shop-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'invest:posStatics:list' }, + { path: '/pages/statistic/accounts/sleepAccounts/index', text: '睡眠账户统计', icon: 'eye-slash-filled', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:debitCard' }, + { path: '/pages/statistic/accounts/openCardStatics/index', text: '储蓄卡开卡统计', icon: 'gift-filled', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', permission: 'invest:debitCard' }, + { path: '/pages/statistic/accounts/dailyLiabilities/index', text: '每日净资产统计', icon: 'bars', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:dailyLiabilities:list' }, ]) const investGridList=ref([ - { path: '/pages/statistic/accounts/investDealAnalysis/index', text: '投资收益统计', icon: 'arrow-down', permission: 'invest:investDealAnalysis:list' }, - { path: '/pages/statistic/bill/investAnalysis/index', text: '收益统计分析', icon: 'arrow-down', permission: 'invest:investAnalysis:list'}, - { path: '/pages/statistic/bill/futuresAnalysis/index', text: '期货统计分析', icon: 'settings', permission: 'invest:futuresAnalysis:list'}, - { path: '/pages/statistic/bill/stocksAnalysis/index', text: '股票统计分析', icon: 'left', permission: 'invest:stocksAnalysis:list' } + { path: '/pages/statistic/accounts/investDealAnalysis/index', text: '投资收益统计', icon: 'arrow-up', color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', permission: 'invest:investDealAnalysis:list' }, + { path: '/pages/statistic/bill/investAnalysis/index', text: '收益统计分析', icon: 'settings', color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)', permission: 'invest:investAnalysis:list'}, + { path: '/pages/statistic/bill/futuresAnalysis/index', text: '期货统计分析', icon: 'navigate', color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)', permission: 'invest:futuresAnalysis:list'}, + { path: '/pages/statistic/bill/stocksAnalysis/index', text: '股票统计分析', icon: 'flag', color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', permission: 'invest:stocksAnalysis:list' } ]) function navigateTo(path) { uni.navigateTo({ @@ -97,72 +106,82 @@ display: flex; flex-direction: column; box-sizing: border-box; - background-color: #fff; + background-color: #f5f7fa; min-height: 100%; height: auto; } - view { - font-size: 20px; - line-height: inherit; - } - /* #endif */ - .text { + .work-container { + padding: 12rpx 0; + } + + .section-header { + padding: 12rpx 24rpx 8rpx; + } + + .section-title { + font-size: 28rpx; + font-weight: 700; + color: #333; + position: relative; + padding-left: 16rpx; + } + + .section-title::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 6rpx; + height: 28rpx; + background: linear-gradient(135deg, #667eea, #764ba2); + border-radius: 3rpx; + } + + .grid-body { + padding: 0 16rpx; + } + + .grid-wrapper { + display: flex; + flex-wrap: wrap; + } + + .grid-item { + width: 25%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 16rpx 8rpx; + box-sizing: border-box; + } + + .item-icon { + width: 80rpx; + height: 80rpx; + border-radius: 20rpx; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 12rpx; + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); + transition: all 0.3s; + } + + .grid-item:active .item-icon { + transform: scale(0.95); + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15); + } + + .item-text { text-align: center; font-size: 22rpx; - margin-top: 10rpx; - } - - .grid-item-box { - flex: 1; - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - align-items: center; - justify-content: center; - padding: 15px 0; - } - - .uni-margin-wrap { - width: 690rpx; - width: 100%; - ; - } - - .swiper { - height: 300rpx; - } - - .swiper-box { - height: 150px; - } - - .swiper-item { - /* #ifndef APP-NVUE */ - display: flex; - /* #endif */ - flex-direction: column; - justify-content: center; - align-items: center; - color: #fff; - height: 300rpx; - line-height: 300rpx; - } - - @media screen and (min-width: 500px) { - .uni-swiper-dot-box { - width: 400px; - /* #ifndef APP-NVUE */ - margin: 0 auto; - /* #endif */ - margin-top: 8px; - } - - .image { - width: 100%; - } + color: #333; + font-weight: 500; + line-height: 1.3; } diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue index 4a22f25..7e45d0c 100644 --- a/src/pages/work/index.vue +++ b/src/pages/work/index.vue @@ -1,71 +1,86 @@