|
|
@@ -0,0 +1,218 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="container">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 头部 -->
|
|
|
+ <view class="header">
|
|
|
+ <view class="main">
|
|
|
+ <view class="title">
|
|
|
+ <view class="name">
|
|
|
+ <view class="text">
|
|
|
+ 你好，孙斌！
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name='arrow-down' color="#fff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 公告 -->
|
|
|
+ <view class="notice">
|
|
|
+
|
|
|
+ <u-icon name="volume-up-fill" size="40" color="#fff"></u-icon>
|
|
|
+ <text>库存PDA设备将于2023年4月1日升级维护</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 宫格 -->
|
|
|
+ <view class="gird-scoll">
|
|
|
+ <view class="gird">
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 出库申请
|
|
|
+ </view>
|
|
|
+ <view class="hint">
|
|
|
+ 提交出库申请单据
|
|
|
+ </view>
|
|
|
+ <view class="img">
|
|
|
+ <img src="../../../assets/img/projectGird1.png" alt="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 出库审核
|
|
|
+ </view>
|
|
|
+ <view class="hint">
|
|
|
+ 审批出库申请单据
|
|
|
+ </view>
|
|
|
+ <view class="img">
|
|
|
+ <img src="../../../assets/img/projectGird2.png" alt="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 设备归还
|
|
|
+ </view>
|
|
|
+ <view class="hint">
|
|
|
+ 提交设备归还单据
|
|
|
+ </view>
|
|
|
+ <view class="img">
|
|
|
+ <img src="../../../assets/img/projectGird3.png" alt="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 设备检索
|
|
|
+ </view>
|
|
|
+ <view class="hint">
|
|
|
+ 库存物品信息检索
|
|
|
+ </view>
|
|
|
+ <view class="img">
|
|
|
+ <img src="../../../assets/img/projectGird4.png" alt="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ background-color: rgba(1, 122, 255, 1);
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+ overflow-y: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ overflow-y: hidden;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ min-height: 600px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 头部
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ height: 219px;
|
|
|
+ background: linear-gradient(180deg, rgba(0, 45, 194, 1) 0%, rgba(0, 59, 254, 1) 49%, rgba(1, 122, 255, 1) 100%);
|
|
|
+ padding: 0 40rpx;
|
|
|
+
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url(../../../assets/img/projecIndexCover.png) no-repeat;
|
|
|
+ background-position: top -70rpx right -50rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ line-height: 88rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ font-size: 40rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 公告
|
|
|
+ .notice {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: rgba(255, 255, 255, 0.35);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 8px;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 542px;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 宫格
|
|
|
+ .gird-scoll {
|
|
|
+ height: 600px;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gird {
|
|
|
+ padding: 0 40rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ height: 700px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 320rpx;
|
|
|
+ height: 320rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ font-family: 'Alibaba-PuHuiTi-Regular';
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ color: rgba(106, 121, 142, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-bottom: 44rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ bottom: 24rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
