fix: 优化样式！完美！
This commit is contained in:
tianyongbao
@@ -1,31 +1,54 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<u-sticky offsetTop="8rpx" customNavHeight="8rpx">
|
||||
<view class="search-view">
|
||||
<u--input v-model="calendarTitle" border="false" readonly class="search-input"
|
||||
suffixIcon="calendar" suffixIconStyle="color: #909399">
|
||||
</u--input>
|
||||
<u-icon name="arrow-left" color="#666666" size="25" label="上个月"
|
||||
labelPos="right" labelSize="25rpx" labelColor="#666666" @click="getPrev()"></u-icon>
|
||||
<u-icon name="arrow-right" color="#666666" size="25" style="margin-left:15px" label="下个月"
|
||||
labelPos="left" labelSize="25rpx" labelColor="#666666" @click="getNext()"></u-icon>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<!-- 月视图和周视图显示，列视图显示表格形式 -->
|
||||
<div v-show="type !== '3'" ref="fullcalendar" class="card" />
|
||||
<u-list height="auto">
|
||||
<u-list-item v-for="(item, index) in currentInfoList" :key="index">
|
||||
<view class="list-item">
|
||||
<view class="item-header" @click="enterDetails(item)">
|
||||
<u--text suffixIcon="arrow-right" lines="2" iconStyle="font-size: 18px; color: #333333; font-weight:bold"
|
||||
:text="item.start+' '+item.title" size="25rpx" color="#333333" :bold="true"></u--text>
|
||||
</view>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view>
|
||||
<div class="calendar-container">
|
||||
<u-sticky offsetTop="0">
|
||||
<view class="calendar-header">
|
||||
<view class="header-content">
|
||||
<view class="title-section">
|
||||
<text class="calendar-title">{{ calendarTitle }}</text>
|
||||
</view>
|
||||
</u-list>
|
||||
<view class="nav-buttons">
|
||||
<view class="nav-btn" @click="getPrev()">
|
||||
<uni-icons type="arrow-left" size="20" color="#ffffff"></uni-icons>
|
||||
<text class="nav-text">上月</text>
|
||||
</view>
|
||||
<view class="nav-btn" @click="getNext()">
|
||||
<text class="nav-text">下月</text>
|
||||
<uni-icons type="arrow-right" size="20" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-sticky>
|
||||
<!-- 月视图和周视图显示，列视图显示表格形式 -->
|
||||
<div class="calendar-wrapper">
|
||||
<div v-show="type !== '3'" ref="fullcalendar" class="calendar-view" />
|
||||
</div>
|
||||
|
||||
<view class="events-section">
|
||||
<view class="section-title">
|
||||
<view class="title-bar"></view>
|
||||
<text class="title-text">当日事项</text>
|
||||
</view>
|
||||
<u-list height="auto">
|
||||
<u-list-item v-for="(item, index) in currentInfoList" :key="index">
|
||||
<view class="event-card" @click="enterDetails(item)">
|
||||
<view class="event-icon" :style="{ background: getEventColor(item.type) }">
|
||||
<uni-icons :type="getEventIcon(item.type)" size="16" color="#fff"></uni-icons>
|
||||
</view>
|
||||
<view class="event-content">
|
||||
<text class="event-title">{{ item.title }}</text>
|
||||
<text class="event-time">{{ item.start }}</text>
|
||||
</view>
|
||||
<uni-icons type="arrow-right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
</u-list-item>
|
||||
<view v-if="currentInfoList.length === 0" class="empty-state">
|
||||
<uni-icons type="calendar" size="60" color="#ddd"></uni-icons>
|
||||
<text class="empty-text">暂无事项</text>
|
||||
</view>
|
||||
</u-list>
|
||||
</view>
|
||||
</div>
|
||||
<!-- 悬停按钮刷新-->
|
||||
<refresh></refresh>
|
||||
</template>
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.app-container {
|
||||
.header-con {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.item {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
margin: 5px;
|
||||
.title {
|
||||
margin-left: 5px;
|
||||
color: rgb(133, 133, 148);
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.num {
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
.header-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 3px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 8rpx;
|
||||
display:float;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.search-input {
|
||||
background: #F5F5F5;
|
||||
color: #333333;
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 96rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.filter-panel-content {
|
||||
background-color: #ffff;
|
||||
padding: 0 30rpx 30rpx;
|
||||
|
||||
.filter-title {
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.state-item {
|
||||
width: 210rpx;
|
||||
height: 72rpx;
|
||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(222, 241, 255, 1);
|
||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 30rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
margin: 5rpx;
|
||||
padding: 5rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 5rpx;
|
||||
|
||||
}
|
||||
|
||||
.item-row {
|
||||
padding: 0rpx;
|
||||
|
||||
.row-label {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.row-value {
|
||||
color: rgba(0, 0, 0, 0.85)
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-left: 5rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.circulation {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
margin-right: 24rpx;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.filling {
|
||||
background: #2681FF;
|
||||
border-radius: 8rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.calendarHeader {
|
||||
margin: 0px 0px 0px 0px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.header_select {
|
||||
margin: 0 0 0 10px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin: 0 0 0 0;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
color: #303133;
|
||||
.calendar-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.btnAdd {
|
||||
width: 146rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 8rpx;
|
||||
display:float;
|
||||
text-align: center;
|
||||
}
|
||||
.calendar-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 24rpx 32rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.search-view {
|
||||
padding: 12rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
|
||||
.search-input {
|
||||
background: #F5F5F5;
|
||||
color: #333333;
|
||||
margin-right: 36rpx;
|
||||
}
|
||||
|
||||
.filter-panel {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 96rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.filter-panel-content {
|
||||
background-color: #ffff;
|
||||
padding: 0 30rpx 30rpx;
|
||||
|
||||
.filter-title {
|
||||
color: #000000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.state-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.state-item {
|
||||
width: 210rpx;
|
||||
height: 72rpx;
|
||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 72rpx;
|
||||
text-align: center;
|
||||
line-height: 72rpx;
|
||||
margin: 0 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: rgba(222, 241, 255, 1);
|
||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
padding: 24rpx 30rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.calendar-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 10rpx 16rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 20rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.nav-btn:active {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.calendar-wrapper {
|
||||
padding: 12rpx;
|
||||
background: #ffffff;
|
||||
margin: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.calendar-view {
|
||||
min-height: 400rpx;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.events-section {
|
||||
margin: 16rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 24rpx;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 3rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx 16rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.event-card:active {
|
||||
background: #e9ecef;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.event-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.event-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50rpx 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* FullCalendar 样式优化 */
|
||||
:deep(.fc) {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
:deep(.fc-theme-standard td),
|
||||
:deep(.fc-theme-standard th) {
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
:deep(.fc-col-header-cell) {
|
||||
background: #f8f9fa;
|
||||
padding: 6rpx 0;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-day) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-day:hover) {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-day-frame) {
|
||||
min-height: 45px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.fc-scrollgrid) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
:deep(.fc-scrollgrid-section) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
:deep(.fc-day-today) {
|
||||
background: rgba(102, 126, 234, 0.1) !important;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-day-number) {
|
||||
padding: 2rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-day-top) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-day-events) {
|
||||
margin: 0;
|
||||
padding: 2rpx;
|
||||
}
|
||||
|
||||
:deep(.fc-event) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-more-link) {
|
||||
color: #ff4757;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0 2rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
box-shadow: none;
|
||||
line-height: 1;
|
||||
pointer-events: none; /* 禁用点击事件 */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-more-link:hover) {
|
||||
color: #ff4757;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* 隐藏FullCalendar的弹出框 */
|
||||
:deep(.fc-popover) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.plan_title) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.fc-daygrid-event-dot) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.fc-more-link) {
|
||||
color: #667eea;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,54 +1,64 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<!-- <uni-section title="常用功能" v-show="auth.hasPermi('invest:accountsBalance:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" >
|
||||
<uni-grid-item v-for="(item, index) in commonGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
<!-- 账单统计分析 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:creditAnalysis:list')">
|
||||
<text class="section-title">账单统计分析</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:creditAnalysis:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in billGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view> -->
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="账单统计分析" v-show="auth.hasPermi('invest:creditAnalysis:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" >
|
||||
<uni-grid-item v-for="(item, index) in billGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<!-- 记账统计分析 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:accountsBalance:list')">
|
||||
<text class="section-title">记账统计分析</text>
|
||||
</view>
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="记账统计分析" v-show="auth.hasPermi('invest:accountsBalance:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" >
|
||||
<uni-grid-item v-for="(item, index) in accountGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:accountsBalance:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in accountGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="投资统计分析" v-show="auth.hasPermi('invest:accountsBalance:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" >
|
||||
<uni-grid-item v-for="(item, index) in investGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
|
||||
<!-- 投资统计分析 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:accountsBalance:list')">
|
||||
<text class="section-title">投资统计分析</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:accountsBalance:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in investGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,71 +1,86 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="常用功能" v-show="auth.hasPermi('invest:accountDealRecord:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item v-for="(item, index) in commonGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
<!-- 常用功能 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:accountDealRecord:list')">
|
||||
<text class="section-title">常用功能</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:accountDealRecord:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in commonGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="账单管理" v-show="auth.hasPermi('invest:installmentHistory:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item v-for="(item, index) in billGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<!-- 账单管理 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:installmentHistory:list')">
|
||||
<text class="section-title">账单管理</text>
|
||||
</view>
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="记账管理" v-show="auth.hasPermi('invest:accounts:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item v-for="(item, index) in accountGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:installmentHistory:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in billGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="基础信息" v-show="auth.hasPermi('invest:bankcard:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item v-for="(item, index) in baseGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
|
||||
<!-- 记账管理 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:accounts:list')">
|
||||
<text class="section-title">记账管理</text>
|
||||
</view>
|
||||
<!-- 宫格组件
|
||||
<uni-section title="心路历程" v-show="auth.hasPermi('invest:heartJourney:list')" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false">
|
||||
<uni-grid-item v-for="(item, index) in heartJourneyGridList" :key="index" v-show="auth.hasPermi(item.permission)" @click="navigateTo(item.path)">
|
||||
<view class="grid-item-box">
|
||||
<uni-icons :type="item.icon" size="30"></uni-icons>
|
||||
<text class="text">{{ item.text }}</text>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:accounts:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in accountGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view> -->
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 基础信息 -->
|
||||
<view class="section-header" v-show="auth.hasPermi('invest:bankcard:list')">
|
||||
<text class="section-title">基础信息</text>
|
||||
</view>
|
||||
<view class="grid-body" v-show="auth.hasPermi('invest:bankcard:list')">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in baseGridList"
|
||||
:key="index"
|
||||
v-show="auth.hasPermi(item.permission)"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -74,49 +89,38 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
|
||||
// 也可以使用下面的方式
|
||||
import { ref } from "vue";
|
||||
const commonGridList=ref([
|
||||
{ path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list' },
|
||||
{ path: '/pages/work/accounts/accountDealRecord/list', text: '账户交易记录', icon: 'paperclip', permission: 'invest:accountDealRecord:list' },
|
||||
{ path: '/pages/work/accounts/posadvice/list', text: 'POS刷卡推荐', icon: 'paperplane', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/accounts/posTransferRecord/list', text: 'POS机刷卡记账', icon: 'reload', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/accounts/creditTransferRecord/list', text: '信用卡还款', icon: 'arrow-left', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/accounts/investAccountDeal/list', text: '投资交易记录', icon: 'chatboxes', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/accounts/investTransferRecord/list', text: '投资账户记账', icon: 'auth-filled', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/accounts/debitTransferRecord/list', text: '储蓄账户转账', icon: 'tune', permission: 'invest:debitCard' },
|
||||
// { path: '/pages/work/accounts/accounts/commonList', text: '记账账户', icon: 'staff', permission: 'invest:accounts:list' },
|
||||
{ path: '/pages/work/bill/creditCardBill/list', text: '信用卡账单', icon: 'list', permission: 'invest:creditCardBill:list' },
|
||||
{ path: '/pages/work/bill/onlineLendHistory/list', text: '贷款账单', icon: 'settings', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/bill/creditInstallmentHistory/list', text: '信用卡分期账单', icon: 'bars', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/bill/creditQueryRecord/list', text: '征信查询记录', icon: 'search', permission: 'invest:creditQueryRecord:list' }
|
||||
{ path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart-filled', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'invest:heartJourney:list' },
|
||||
{ path: '/pages/work/accounts/accountDealRecord/list', text: '账户交易记录', icon: 'list', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:accountDealRecord:list' },
|
||||
{ path: '/pages/work/accounts/posadvice/list', text: 'POS刷卡推荐', icon: 'star-filled', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/accounts/posTransferRecord/list', text: 'POS机刷卡记账', icon: 'reload', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/accounts/creditTransferRecord/list', text: '信用卡还款', icon: 'redo', color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/accounts/investAccountDeal/list', text: '投资交易记录', icon: 'chatboxes', color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/accounts/investTransferRecord/list', text: '投资账户记账', icon: 'checkbox-filled', color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/accounts/debitTransferRecord/list', text: '储蓄账户转账', icon: 'loop', color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/work/bill/creditCardBill/list', text: '信用卡账单', icon: 'wallet-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:creditCardBill:list' },
|
||||
{ path: '/pages/work/bill/onlineLendHistory/list', text: '贷款账单', icon: 'fire-filled', color: 'linear-gradient(135deg, #f857a6 0%, #ff5858 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/bill/creditInstallmentHistory/list', text: '信用卡分期账单', icon: 'calendar-filled', color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/bill/creditQueryRecord/list', text: '征信查询记录', icon: 'search', color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)', permission: 'invest:creditQueryRecord:list' }
|
||||
])
|
||||
const baseGridList=ref([
|
||||
{ path: '/pages/work/base/debitCard/list', text: '储蓄账户管理', icon: 'wallet-filled', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/work/base/creditCard/list', text: '信用卡管理', icon: 'wallet', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/base/lend/list', text: '借贷账户管理', icon: 'upload', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/base/posmachine/list', text: 'pos机管理', icon: 'shop-filled', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/base/financials/list', text: '理财账户管理', icon: 'calendar', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/base/stocks/list', text: '股票账户管理', icon: 'auth-filled', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/base/futures/list', text: '期货账户管理', icon: 'paperplane-filled', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/product/productInfor/list', text: '商品信息', icon: 'list', permission: 'invest:productInfor:list' }
|
||||
{ path: '/pages/work/base/debitCard/list', text: '储蓄账户管理', icon: 'wallet-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/work/base/creditCard/list', text: '信用卡管理', icon: 'wallet', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'invest:creditCard' },
|
||||
{ path: '/pages/work/base/lend/list', text: '借贷账户管理', icon: 'upload-filled', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/base/posmachine/list', text: 'pos机管理', icon: 'shop-filled', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', permission: 'invest:posmachine:list' },
|
||||
{ path: '/pages/work/base/financials/list', text: '理财账户管理', icon: 'star', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/base/stocks/list', text: '股票账户管理', icon: 'bars', color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/base/futures/list', text: '期货账户管理', icon: 'navigate', color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)', permission: 'invest:futureStocks:list' },
|
||||
{ path: '/pages/work/product/productInfor/list', text: '商品信息', icon: 'gift-filled', color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)', permission: 'invest:productInfor:list' }
|
||||
])
|
||||
const billGridList=ref([
|
||||
// { path: '/pages/work/bill/creditCardBill/list', text: '信用卡账单', icon: 'list', permission: 'invest:creditCardBill:list' },
|
||||
// { path: '/pages/work/bill/creditInstallmentHistory/list', text: '信用卡分期账单', icon: 'bars', permission: 'invest:creditCard' },
|
||||
// { path: '/pages/work/bill/onlineLendHistory/list', text: '贷款账单', icon: 'settings', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/bill/peopleLendHistory/list', text: '人情账单', icon: 'staff-filled', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/bill/futuresBill/list', text: '期货账单', icon: 'map', permission: 'invest:futureStocksBill:list' },
|
||||
{ path: '/pages/work/bill/stocksBill/list', text: '股票账单', icon: 'paperplane', permission: 'invest:futureStocksBill:list' }
|
||||
{ path: '/pages/work/bill/peopleLendHistory/list', text: '人情账单', icon: 'person-filled', color: 'linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/bill/futuresBill/list', text: '期货账单', icon: 'navigate-filled', color: 'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)', permission: 'invest:futureStocksBill:list' },
|
||||
{ path: '/pages/work/bill/stocksBill/list', text: '股票账单', icon: 'flag-filled', color: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)', permission: 'invest:futureStocksBill:list' }
|
||||
])
|
||||
const accountGridList=ref([
|
||||
{ path: '/pages/work/accounts/accounts/list', text: '记账账户', icon: 'staff', permission: 'invest:accounts:list' },
|
||||
// { path: '/pages/work/accounts/posadvice/list', text: 'POS刷卡推荐', icon: 'paperplane', permission: 'invest:posmachine:list' },
|
||||
// { path: '/pages/work/accounts/posTransferRecord/list', text: 'POS机刷卡记账', icon: 'reload', permission: 'invest:posmachine:list' },
|
||||
// { path: '/pages/work/accounts/creditTransferRecord/list', text: '信用卡还款', icon: 'arrow-left', permission: 'invest:creditCard' },
|
||||
// { path: '/pages/work/accounts/investTransferRecord/list', text: '投资账户记账', icon: 'auth-filled', permission: 'invest:futureStocks:list' },
|
||||
// { path: '/pages/work/accounts/investAccountDeal/list', text: '投资交易记录', icon: 'chatboxes', permission: 'invest:futureStocks:list' },
|
||||
// { path: '/pages/work/accounts/debitTransferRecord/list', text: '储蓄账户记账', icon: 'tune', permission: 'invest:debitCard' },
|
||||
{ path: '/pages/work/accounts/lendTransferRecord/list', text: '借贷账户记账', icon: 'link', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/product/productPriceRecord/list', text: '物价记录', icon: 'map', permission: 'invest:productPriceRecord:list' }
|
||||
// { path: '/pages/work/accounts/accountDealRecord/list', text: '账户交易记录', icon: 'paperclip', permission: 'invest:accountDealRecord:list' }
|
||||
{ path: '/pages/work/accounts/accounts/list', text: '记账账户', icon: 'home-filled', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', permission: 'invest:accounts:list' },
|
||||
{ path: '/pages/work/accounts/lendTransferRecord/list', text: '借贷账户记账', icon: 'link', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', permission: 'invest:onlineLend' },
|
||||
{ path: '/pages/work/product/productPriceRecord/list', text: '物价记录', icon: 'cart-filled', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', permission: 'invest:productPriceRecord:list' }
|
||||
])
|
||||
const heartJourneyGridList=ref([
|
||||
{ path: '/pages/work/heartJourney/list', text: '心路历程', icon: 'heart', permission: 'invest:heartJourney:list' }
|
||||
@@ -134,72 +138,82 @@ import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user