Skip to content

梁建民 / scm_app

Go to a project
Commit 1760090c by liangjianmin
Options

Refactor apply and approve pages to remove placeholder content and integrate… 

Refactor apply and approve pages to remove placeholder content and integrate SCSS stylesheets for improved styling management.
parent d8e180f0
Inline Side-by-side
Showing with 20 additions and 290 deletions
assets/css/home/index.scss
.home-index {
min-height: 100vh;
padding-bottom: 158rpx;
background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
.head {
padding: 24rpx 28rpx;
min-height: 140rpx;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-radius: 0 0 24rpx 24rpx;
box-shadow: 0 6rpx 20rpx rgba(37, 99, 235, 0.3);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -40%;
right: -15%;
width: 250rpx;
height: 250rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
pointer-events: none;
}
.info-bar {
position: relative;
z-index: 1;
.icon-juxing {
font-size: 90rpx;
color: #ffffff;
margin-right: 16rpx;
}
.t1 {
font-size: 32rpx;
color: #ffffff;
font-weight: 600;
letter-spacing: 0.5rpx;
}
.t2 {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.9);
margin-top: 6rpx;
}
}
.setting {
position: relative;
z-index: 1;
padding: 14rpx 18rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 20rpx;
transition: all 0.2s ease;
cursor: pointer;
&:active {
background: rgba(255, 255, 255, 0.35);
transform: scale(0.96);
}
.iconfont {
font-size: 26rpx;
color: #ffffff;
}
.tt {
font-size: 24rpx;
color: #ffffff;
margin-left: 6rpx;
font-weight: 500;
}
}
}
.fast-entry {
position: relative;
background: #ffffff;
padding-top: 24rpx;
&::after {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
width: 100%;
height: 1px;
background-color: #ffffff;
content: '';
}
.tit {
font-size: 24rpx;
color: #1e2021;
font-weight: bold;
margin-bottom: 36rpx;
padding-left: 24rpx;
}
.bar {
flex-wrap: wrap;
.box {
position: relative;
flex: 1;
height: 177rpx;
border-right: 1px solid #e6edf0;
border-bottom: 1px solid #e6edf0;
&:nth-of-type(3n) {
border-right: 1px solid transparent;
}
.num {
position: absolute;
right: 32rpx;
top: 5rpx;
width: 42rpx;
height: 32rpx;
background: #bb3434;
border-radius: 16rpx;
font-size: 20rpx;
color: #ffffff;
}
.iconfont {
font-size: 64rpx;
color: #197adb;
}
.text {
margin-top: 8rpx;
font-size: 22rpx;
color: #404547;
}
}
}
}
}
\ No newline at end of file
pages/apply/index.vue
<template>
<view class="page-box">
<view class="placeholder-box">
<text class="title">发起申请</text>
<text class="desc">页面已添加，等待后续指示</text>
</view>
<view class="apply-page">
</view>
</template>
<script>
export default {
data() {
return {};
return {
};
}
};
</script>
<style scoped>
.page-box {
min-height: 100vh;
padding: 32rpx;
background: #f5f6f8;
box-sizing: border-box;
}
.placeholder-box {
padding: 48rpx 32rpx;
background: #ffffff;
border-radius: 24rpx;
}
.title {
display: block;
color: #222222;
font-size: 36rpx;
font-weight: 600;
line-height: 1.4;
}
.desc {
display: block;
margin-top: 16rpx;
color: #666666;
font-size: 28rpx;
line-height: 1.6;
}
<style scoped lang="scss">
@import '@/assets/css/apply/index.scss';
</style>
pages/approve/index.vue
<template>
<view class="page-box">
<view class="placeholder-box">
<text class="title">审批列表</text>
<text class="desc">页面已添加，等待后续指示</text>
</view>
<view class="approve-page">
</view>
</template>
<script>
export default {
data() {
return {};
return {
};
},
methods: {
}
};
</script>
<style scoped>
.page-box {
min-height: 100vh;
padding: 32rpx;
background: #f5f6f8;
box-sizing: border-box;
}
.placeholder-box {
padding: 48rpx 32rpx;
background: #ffffff;
border-radius: 24rpx;
}
.title {
display: block;
color: #222222;
font-size: 36rpx;
font-weight: 600;
line-height: 1.4;
}
.desc {
display: block;
margin-top: 16rpx;
color: #666666;
font-size: 28rpx;
line-height: 1.6;
}
<style scoped lang="scss">
@import '@/assets/css/approve/index.scss';
</style>
pages/home/index.vue
<template>
<view class="home-index">
<!-- 骨架屏 -->
<view class="skeleton-head" v-if="loading">
<view class="skeleton-avatar"></view>
<view class="skeleton-info">
<view class="skeleton-line skeleton-name"></view>
<view class="skeleton-line skeleton-email"></view>
</view>
</view>
<view class="skeleton-list" v-if="loading">
<view class="skeleton-item" v-for="i in 12" :key="i">
<view class="skeleton-icon"></view>
<view class="skeleton-line skeleton-text"></view>
</view>
</view>
<!-- 实际内容 -->
<view class="head" v-if="!loading && info.user_info">
<view class=" row bothSide verCenter">
<view class="info-bar row verCenter">
<text class="iconfont icon-juxing"></text>
<view class="column">
<text class="t1">{{ info.user_info.name }}</text>
<text class="t2">{{ info.user_info.email }}</text>
</view>
</view>
<view class="setting row verCenter" @click="exit()">
<text class="iconfont icon-a-juxing13"></text>
<text class="tt">设置</text>
</view>
</view>
</view>
</view>
</template>
<script>
import { API } from '@/util/api.js';
export default {
data() {
return {
info: {},
loading: true
};
},
onShow() {
this.getData();
},
methods: {
/**
* 获取数据
*/
getData() {
this.request(API.getStatisticsInfo, 'POST', {}, false).then(res => {
if (res.code === 0) {
this.info = res.data;
uni.setStorageSync('email', res.data.user_info.email);
uni.setStorageSync('user_name', res.data.user_info.name);
}
this.loading = false;
});
},
/**
* 退出系统
*/
exit() {
uni.showModal({
title: '提示',
content: '确定要退出系统吗？',
showCancel: true,
success: res => {
if (res.confirm) {
// 批量清理用户相关存储
['oa_skey', 'oa_user_id', 'email', 'user_name'].map(key => uni.removeStorageSync(key));
uni.redirectTo({
url: '/pages/mine/login'
});
} else if (res.cancel) {
// 用户点击取消操作
console.log('用户点击取消');
}
}
});
}
return {};
}
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment