by2025/SmartParks_uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.合并前段时间写的页面

Browse Source
This commit is contained in:
liyuanchao
2025-07-24 16:00:29 +08:00
parent 33ef7f5cdb
commit 658d21399d
89 changed files with 7649 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

443
pages/sys/workbench/oa/oa.vue Normal file
View File

@@ -0,0 +1,443 @@
<template>
<view class="oa-container">
<!-- 顶部导航栏 -->
<view class="oa-navbar">
<image src="/static/ic_back.png" class="oa-back" @click="goBack" />
<text class="oa-title">申批中心</text>
</view>
<!-- 搜索框 -->
<view class="oa-search">
<view class="search-box">
<image src="/static/ic_search_gray.png" class="search-icon" />
<text class="search-placeholder">申批名称、内容、发起人、编号</text>
</view>
</view>
<!-- tab栏 -->
<view class="oa-tabs">
<view v-for="(tab, idx) in tabs" :key="idx" :class="['oa-tab', {active: idx === activeTab}]"
@click="changeTab(idx)">
{{ tab }}
<view v-if="idx === activeTab" class="tab-underline"></view>
</view>
</view>
<!-- 列表区 -->
<view class="oa-list">
<view v-for="(item, idx) in list" :key="idx" class="oa-card" :class="{'special-leave': item.status === '已通过'}" @click="goToDetail(item)">
<view class="card-row">
<view class="card-type">{{ item.type }}</view>
<view class="card-status-tag" :class="item.statusClass">{{ item.status }}</view>
</view>
<view class="card-info">
<view class="card-leave-type">请假类型：<text class="card-leave-type">{{ item.leaveType }}</text></view>
<view class="card-leave-type">
<text>开始时间：{{ item.startTime }}</text>
</view>
<view class="card-leave-type">
<text>结束时间：{{ item.endTime }}</text>
</view>
</view>
<view class="card-footer">
<view class="card-user">
<view class="user-avatar" :style="{backgroundColor: item.avatarColor}">{{ item.avatarText }}</view>
<text class="user-name">{{ item.userName }}</text>
</view>
<text class="card-datetime">{{ item.dateTime }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: ['待办', '已办', '已发起'],
activeTab: 2, // 默认选中已发起
tabData: [
[], // 待办
[], // 已办
[] // 已发起
],
tabLoaded: [false, false, false], // 每个tab是否已加载
loading: false
}
},
computed: {
list() {
return this.tabData[this.activeTab];
}
},
created() {
this.loadTabData(this.activeTab); // 初始化加载当前tab数据
},
methods: {
goBack() {
uni.navigateBack();
},
// 跳转到详情页
goToDetail(item) {
uni.navigateTo({
url: './oaDetail'
});
},
async changeTab(idx) {
this.activeTab = idx;
if (!this.tabLoaded[idx]) {
await this.loadTabData(idx);
}
},
async loadTabData(idx) {
this.loading = true;
// 模拟接口请求，不同tab返回不同mock数据
let data = [];
if (idx === 0) { // 待办
data = [
{
type: '请假',
leaveType: '病假',
status: '待办',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
}
];
} else if (idx === 1) { // 已办
data = [
{
type: '请假',
leaveType: '病假',
status: '已通过',
statusClass: 'green',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
}
];
} else { // 已发起
data = [
{
type: '请假',
leaveType: '病假',
status: '已通过',
statusClass: 'green',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
},
{
type: '请假',
leaveType: '病假',
status: '待审核',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
},
{
type: '请假',
leaveType: '病假',
status: '待审核',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
},
{
type: '请假',
leaveType: '病假',
status: '待审核',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
},
{
type: '请假',
leaveType: '病假',
status: '待审核',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
},
{
type: '请假',
leaveType: '病假',
status: '待审核',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
},
{
type: '请假',
leaveType: '病假',
status: '待审核',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
},
{
type: '请假',
leaveType: '病假',
status: '待审核',
statusClass: 'orange',
startTime: '2025-07-13',
endTime: '2025-07-15',
userName: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5',
dateTime: '07-12 18:28:22'
}
];
}
// 模拟网络延迟
await new Promise(res => setTimeout(res, 300));
this.$set(this.tabData, idx, data);
this.$set(this.tabLoaded, idx, true);
this.loading = false;
}
}
}
</script>
<style scoped>
.oa-container {
height: 100vh;
background: #f7f7f7;
display: flex;
flex-direction: column;
}
.oa-navbar {
width: 100%;
height: 120rpx;
padding-top: 40rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #fff;
flex-shrink: 0;
}
.oa-back {
position: absolute;
left: 37rpx;
width: 15rpx;
height: 33rpx;
}
.oa-title {
font-size: 36rpx;
color: #000;
}
.oa-search {
background: #fff;
padding: 20rpx 30rpx;
}
.search-box {
height: 70rpx;
background: #F7F7F7;
border-radius: 35rpx;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 30rpx;
}
.search-icon {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
.search-placeholder {
color: #9A9A9A;
font-size: 28rpx;
}
.oa-tabs {
display: flex;
align-items: center;
justify-content: space-around;
background: #fff;
height: 80rpx;
border-bottom: 1px solid #f0f0f0;
flex-shrink: 0;
}
.oa-tab {
flex: 1;
text-align: center;
font-size: 32rpx;
color: #737373;
position: relative;
padding: 0 0 10rpx 0;
cursor: pointer;
}
.oa-tab.active {
color: #007CFF;
font-weight: bold;
}
.tab-underline {
width: 60rpx;
height: 6rpx;
background: #2186FF;
border-radius: 3rpx;
margin: 0 auto;
margin-top: 8rpx;
}
.oa-list {
margin: 25rpx 0 0 0;
padding: 0 35rpx;
flex: 1;
overflow-y: auto;
padding-bottom: 50rpx;
}
.oa-card {
background: #fff;
border-radius: 10rpx;
margin-bottom: 26rpx;
padding: 20rpx 20rpx 20rpx 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.card-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 46rpx;
}
.card-type {
width: 126rpx;
height: 46rpx;
font-weight: 600;
font-size: 32rpx;
padding-left: 10rpx;
padding-top: 7rpx;
border-radius: 15rpx;
color: #fff;
background: linear-gradient(90deg, #007CFF 0%, #FFFFFF 100%);
}
.card-status-tag {
font-size: 28rpx;
}
.card-status-tag.orange {
color: #F27A0F;
}
.card-status-tag.green {
color: #0AC88F;
}
.card-status-tag.gray {
color: #8F8F8F;
background-color: rgba(143, 143, 143, 0.1);
border: 1px solid #8F8F8F;
}
.card-info {
font-size: 26rpx;
color: #333;
margin-bottom: 42rpx;
}
.card-leave-type {
color: #626262;
font-size: 28;
margin-bottom: 24rpx;
}
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-user {
display: flex;
align-items: center;
}
.user-avatar {
width: 54rpx;
height: 54rpx;
border-radius: 27rpx;
background-color: #688CFF;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
margin-right: 18rpx;
}
.user-name {
font-size: 24rpx;
color: #626262;
}
.card-datetime {
font-size: 24rpx;
color: #626262;
}
.special-leave {
position: relative;
overflow: hidden;
}
.special-leave::after {
content: '特批假';
position: absolute;
top: 10rpx;
right: -50rpx;
background-color: #F3831F;
color: #fff;
padding: 5rpx 60rpx;
transform: rotate(45deg);
font-size: 22rpx;
font-weight: bold;
}
</style>

493
pages/sys/workbench/oa/oaDetail.vue Normal file
View File

@@ -0,0 +1,493 @@
<template>
<view class="detail-container">
<!-- 顶部导航栏 -->
<view class="detail-navbar">
<image src="/static/ic_back_white.webp" class="detail-back" @click="goBack" />
<view class="detail-right">
<image src="/static/ic_share_w.png" class="detail-scan" />
</view>
</view>
<!-- 卡片容器 -->
<view class="card-wrapper">
<!-- 请假信息卡片 -->
<view class="detail-card">
<!-- 请假状态 -->
<view class="leave-header">
<view class="leave-type">请假</view>
<view class="leave-status">已通过</view>
</view>
<!-- 申请人信息 -->
<view class="applicant-info">
<view class="applicant-avatar" style="background-color: #4B7BF5;">余</view>
<view class="applicant-detail">
<text class="applicant-name">余永乐</text>
<text class="applicant-dept">数据开发及研发部</text>
</view>
</view>
<!-- 提交时间 -->
<view class="submit-time">提交时间：7月16日 18:36:44</view>
</view>
</view>
<!-- 其他卡片保持原结构 -->
<view class="detail-card">
<view class="detail-title">申批详情</view>
<view class="detail-item-vertical">
<text class="detail-label-vertical">假期类型</text>
<text class="detail-value-vertical">病假</text>
</view>
<view class="detail-item-vertical">
<text class="detail-label-vertical">开始时间</text>
<text class="detail-value-vertical">2025-07-15</text>
</view>
<view class="detail-item-vertical">
<text class="detail-label-vertical">结束时间</text>
<text class="detail-value-vertical">2025-07-17</text>
</view>
<view class="detail-item-vertical">
<text class="detail-label-vertical">时长</text>
<text class="detail-value-vertical">2天</text>
</view>
<view class="detail-item-vertical">
<text class="detail-label-vertical">请假事由</text>
<text class="detail-value-vertical">由于腿儿过大，需要到医院进行检查</text>
</view>
<view class="detail-item-vertical">
<text class="detail-label-vertical">附件</text>
<view class="attachment">
<view class="attachment-preview">
<image src="/static/ic_attachment_preview.png" class="attachment-img" />
</view>
<view class="attachment-info">
<text class="attachment-name">174568963.jpg</text>
<text class="attachment-size">289.14 KB</text>
</view>
</view>
</view>
</view>
<!-- 审批记录卡片保持原结构 -->
<view class="detail-card">
<view class="detail-title">申批记录</view>
<view class="approval-item">
<view class="approval-status">
<view class="status-dot selected"></view>
<view class="status-line" v-if="true"></view>
</view>
<view class="approval-content">
<view class="approval-type">提交</view>
<view class="approver-info">
<view class="approver-avatar" style="background-color: #4B7BF5;">余</view>
<text class="approver-name">余永乐</text>
<text class="approval-result">已提交</text>
</view>
<text class="approval-time">07-12 18:28:22</text>
</view>
</view>
<view class="approval-item">
<view class="approval-status">
<view class="status-dot selected"></view>
<view class="status-line" v-if="true"></view>
</view>
<view class="approval-content">
<view class="approval-type">审批</view>
<view class="approver-info">
<view class="approver-avatar" style="background-color: #F3831F;">张</view>
<text class="approver-name">张桂花</text>
<text class="approval-result">已同意</text>
</view>
<text class="approval-time">07-12 18:28:22</text>
</view>
</view>
<view class="approval-item">
<view class="approval-status">
<view class="status-dot selected"></view>
<view class="status-line" v-if="false"></view>
</view>
<view class="approval-content">
<view class="approval-type">审批</view>
<view class="approver-info">
<view class="approver-avatar" style="background-color: #F3831F;">张</view>
<text class="approver-name">张桂花</text>
<text class="approval-result">已批准</text>
</view>
<text class="approval-time">07-12 18:28:22</text>
</view>
</view>
<view class="approval-item">
<view class="approval-status">
<view class="status-dot"></view>
</view>
<view class="approval-content">
<view class="approval-type">结束</view>
<text class="approval-time">07-12 18:28:22</text>
</view>
</view>
</view>
</view>
</template>
<script>
/**
* OA申批详情页面
* @author lyc
*/
export default {
data() {
return {
// 详情数据
detailData: {
type: '请假',
status: '已通过',
leaveType: '病假',
applicant: {
name: '余永乐',
dept: '数据开发及研发部',
avatarText: '余',
avatarColor: '#4B7BF5'
},
submitTime: '7月16日 18:36:44',
startTime: '2025-07-15',
endTime: '2025-07-17',
duration: '2天',
reason: '由于腿儿过大，需要到医院进行检查',
attachment: {
name: '174568963.jpg',
size: '289.14 KB'
},
approvalRecords: [
{
type: '提交',
approver: {
name: '余永乐',
avatarText: '余',
avatarColor: '#4B7BF5'
},
result: '已提交',
time: '07-12 18:28:22'
},
{
type: '审批',
approver: {
name: '张桂花',
avatarText: '张',
avatarColor: '#F3831F'
},
result: '已同意',
time: '07-12 18:28:22'
},
{
type: '审批',
approver: {
name: '张桂花',
avatarText: '张',
avatarColor: '#F3831F'
},
result: '已批准',
time: '07-12 18:28:22'
},
{
type: '结束',
time: '07-12 18:28:22'
}
]
}
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack();
}
}
}
</script>
<style scoped>
.detail-container {
background-color: #f7f7f7;
min-height: 100vh;
padding-bottom: 30rpx;
}
/* 导航栏样式 */
.detail-navbar {
width: 100%;
height: 372rpx;
margin-bottom: -180rpx; /* 减少负边距避免过度覆盖 */
display: flex;
justify-content: space-between;
position: relative;
background: linear-gradient(180deg, #0A60ED 0%, #FFFFFF 100%);
}
.detail-back {
margin-left: 37rpx;
width: 15rpx;
height: 33rpx;
}
.detail-right {
margin-right: 37rpx;
}
.detail-scan {
width: 36rpx;
height: 35rpx;
}
/* 卡片通用样式 */
.detail-card {
z-index: 20; /* 提高层级确保显示在导航栏之上 */
background-color: #fff;
margin: 20rpx 30rpx;
border-radius: 16rpx;
padding: 30rpx;
border: 1px dashed #ddd;
}
/* 请假信息卡片 */
.leave-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.leave-type {
font-weight: 600;
font-size: 26rpx;
padding: 10rpx 20rpx;
border-radius: 8rpx;
color: #2186FF;
background: rgba(33, 134, 255, 0.1);
border: 1px solid #2186FF;
display: inline-block;
}
.leave-status {
font-size: 26rpx;
padding: 6rpx 20rpx;
border-radius: 8rpx;
color: #07C78E;
background-color: rgba(7, 199, 142, 0.1);
border: 1px solid #07C78E;
display: inline-block;
}
.applicant-info {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.applicant-avatar {
width: 60rpx;
height: 60rpx;
border-radius: 30rpx;
background-color: #4B7BF5;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
margin-right: 20rpx;
}
.applicant-detail {
display: flex;
flex-direction: column;
}
.applicant-name {
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 6rpx;
}
.applicant-dept {
font-size: 24rpx;
color: #666;
}
.submit-time {
font-size: 24rpx;
color: #999;
}
/* 申批详情 */
.detail-title {
font-size: 30rpx;
color: #333;
font-weight: bold;
margin-bottom: 30rpx;
}
.detail-item {
display: flex;
margin-bottom: 20rpx;
}
.detail-label {
width: 150rpx;
font-size: 26rpx;
color: #666;
}
.detail-value {
flex: 1;
font-size: 26rpx;
color: #333;
}
/* 垂直布局的申批详情 */
.detail-item-vertical {
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
}
.detail-label-vertical {
font-size: 26rpx;
color: #666;
margin-bottom: 10rpx;
}
.detail-value-vertical {
font-size: 26rpx;
color: #333;
margin-bottom: 10rpx;
}
/* 附件样式 */
.attachment {
display: flex;
align-items: center;
}
.attachment-preview {
width: 80rpx;
height: 80rpx;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
border-radius: 8rpx;
overflow: hidden;
}
.attachment-img {
width: 80rpx;
height: 80rpx;
}
.attachment-info {
display: flex;
flex-direction: column;
}
.attachment-name {
font-size: 26rpx;
color: #333;
margin-bottom: 6rpx;
}
.attachment-size {
font-size: 22rpx;
color: #999;
}
/* 审批记录 */
.approval-item {
display: flex;
margin-bottom: 30rpx;
}
.approval-status {
width: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20rpx;
}
.status-dot {
width: 20rpx;
height: 20rpx;
border-radius: 10rpx;
border: 1px solid #ddd;
background-color: #fff;
margin-bottom: 10rpx;
}
.status-dot.selected {
background-color: #2186FF;
border-color: #2186FF;
}
.status-line {
width: 2rpx;
flex: 1;
background-color: #ddd;
}
.approval-content {
flex: 1;
}
.approval-type {
font-size: 26rpx;
color: #333;
margin-bottom: 10rpx;
}
.approver-info {
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.approver-avatar {
width: 40rpx;
height: 40rpx;
border-radius: 20rpx;
background-color: #4B7BF5;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
margin-right: 10rpx;
}
.approver-name {
font-size: 26rpx;
color: #333;
margin-right: 20rpx;
}
.approval-result {
font-size: 24rpx;
color: #07C78E;
}
.approval-time {
font-size: 24rpx;
color: #999;
}
</style>

257
pages/sys/workbench/workbench.vue Normal file
View File

@@ -0,0 +1,257 @@
<template>
<view class="workbench-container">
<view class="workbench-header">
<view class="workbench-topbg"></view>
<!-- 顶部蓝色背景和搜索栏 -->
<view class="workbench-search-row">
<view class="search-bar">
<image class="search-icon" src="/static/ic_search_gray.png"/>
<input class="search-input" placeholder="搜索" />
</view>
<text class="search-btn">搜索</text>
</view>
<!-- banner 区域 -->
<view class="workbench-banner">
<image class="banner-img" src="/static/workbench_banner.png" mode="aspectFill" />
</view>
</view>
<!-- 常用应用九宫格 -->
<view class="workbench-grid">
<view class="grid-item" v-for="(item, idx) in commonApps" :key="idx">
<image :src="item.icon" class="grid-icon" />
<text class="grid-text">{{ item.text }}</text>
</view>
</view>
<!-- 全部应用 -->
<view >
<view class="all-apps-title">全部应用</view>
<view class="all-apps-tabs">
<text v-for="(tab, idx) in tabs" :key="idx" :class="['tab', {active: idx === activeTab}]"
@click="activeTab = idx">{{ tab }}</text>
</view>
<view class="line"></view>
<view class="workbench-grid">
<view class="grid-item" v-for="(item, idx) in allApps[activeTab]" :key="idx">
<image :src="item.icon" class="grid-icon" />
<text class="grid-text">{{ item.text }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'Workbench',
data() {
return {
commonApps: [
{ icon: 'https://picsum.photos/80/80?random=3', text: '审批' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '假勤' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '工单' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '停车' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '保洁' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '邀约' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '会议' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '添加常用' }
],
tabs: ['最近使用', 'OA 管理', '敏捷开发', '协同办公'],
activeTab: 0,
allApps: [
// 最近使用
[
{ icon: 'https://picsum.photos/80/80?random=3', text: '文档' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '表格' },
{ icon: 'https://picsum.photos/80/80?random=3', text: 'PPT' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '笔记' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '录音' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '云打印' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '智能门禁' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '易企秀H5' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '多维表格' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '问卷网' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '集客云' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '收票宝' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '图表' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '消息' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '沟通' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '' }
],
// OA 管理
[
{ icon: 'https://picsum.photos/80/80?random=3', text: '文档' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '表格' },
{ icon: 'https://picsum.photos/80/80?random=3', text: 'PPT' }
],
// 敏捷开发
[
{ icon: 'https://picsum.photos/80/80?random=3', text: '集客云' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '问卷网' }
],
// 协同办公
[
{ icon: 'https://picsum.photos/80/80?random=3', text: '笔记' },
{ icon: 'https://picsum.photos/80/80?random=3', text: '沟通' }
]
]
}
}
}
</script>
<style scoped>
.workbench-container {
min-height: 100vh;
background: #fff;
padding-bottom: 120rpx;
display: flex;
flex-direction: column;
}
.workbench-header {
position: relative;
height: 463rpx;
width: 100vw;
margin-bottom: -40rpx;
flex-shrink: 0;
}
.workbench-topbg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 463rpx;
background-image: linear-gradient(to bottom, #075EED, #FFFFFF);
z-index: 0;
}
.workbench-search-row {
position: relative;
z-index: 3;
display: flex;
align-items: center;
color: #fff;
padding: 80rpx 44rpx 0 34rpx;
}
.search-bar {
flex: 1;
display: flex;
align-items: center;
background: #fff;
border-radius: 30rpx;
padding: 0 20rpx;
height: 56rpx;
}
.search-icon {
width: 27rpx;
height: 27rpx;
margin-right: 8rpx;
}
.search-input {
border: none;
font-size: 26rpx;
flex: 1;
color: #000;
}
.search-btn {
color: #fff;
font-size: 30rpx;
margin-left: 10rpx;
}
.workbench-banner {
width: 92vw;
height: 140rpx;
margin: 0 auto 20rpx auto;
border-radius: 20rpx;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.banner-img {
width: 100%;
height: 140rpx;
border-radius: 20rpx;
}
.workbench-grid {
display: flex;
flex-wrap: wrap;
background: #fff;
border-radius: 20rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.grid-item {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 32rpx;
}
.grid-icon {
width: 98rpx;
height: 98rpx;
margin-bottom: 20rpx;
}
.grid-text {
font-size: 24rpx;
color: #1D1D1D;
font-weight: 500;
}
.all-apps-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
margin-bottom: 33rpx;
margin-left: 35rpx;
}
.all-apps-tabs {
display: flex;
align-items: center;
padding-left: 54rpx;
padding-right: 54rpx;
}
.tab {
font-size: 24rpx;
color: #999;
margin-right: 32rpx;
padding-bottom: 6rpx;
border-bottom: 4rpx solid transparent;
}
.tab.active {
color: #2e6cf6;
border-bottom: 4rpx solid #2e6cf6;
}
.all-apps-grid {
display: flex;
flex-wrap: wrap;
background: #fff;
border-radius: 20rpx;
padding: 0 54rpx 0 54rpx;
}
.line{
background: #DCDCDC;
height: 2rpx;
margin-bottom: 40rpx;
}
</style>