新增访客登记

app.json

@@ -28,7 +28,8 @@
             "root": "package_A",
             "pages": [
                 "page/alltask/index",
-                "page/upload/index"
+                "page/upload/index",
+                "page/register/index"
             ]
         },
         {

components/ImageInfo/index.js

@@ -15,6 +15,9 @@ Component({
                 this.setData({dataSource: this.properties.data})
                 let list = this.properties.data.registerFlowmanVoList || []
                 let arr = []
+                if(this.properties.data.carUrl) {
+                    arr.push(this.properties.data.carUrl)
+                }
                 if(list.length > 0) {
                     list.forEach(item=> {
                         if(item.imageUrl) {

components/ImageInfo/index.wxml

@@ -1,6 +1,4 @@
 <!--components/ImageInfo/index.wxml-->
 <view class="info_contanier">
-    <image class="info_item" src="{{dataSource.carUrl}}"></image>
+    <image wx:for="{{imageList}}" wx:key="index" class="info_item" src="{{item}}"></image>
-    <image wx:if="{{imageList[0]}}" class="info_item" src="{{imageList[0]}}"></image>
-    <image wx:if="{{imageList[1]}}" class="info_item" src="{{imageList[1]}}"></image>
 </view>

components/Tab/index.js

@@ -1,10 +1,18 @@
-// components/Tab/index.js
+// components/tab/tab.js
 Component({
     /**
      * 组件的属性列表
      */
+    options:{
+        styleIsolation:"isolated"
+    },
     properties: {
-
+        data:{
+            type:Array,
+        },
+        current:{
+            type:[Number,String]
+        }
     },
 
     /**
@@ -18,6 +26,11 @@ Component({
      * 组件的方法列表
      */
     methods: {
+        updateCurrent(e){
+            this.triggerEvent('updatedata',{current:e.currentTarget.dataset.current})
+        }
+    },
+    lifetimes:{
         
-    }
+    },
 })

components/Tab/index.wxml

@@ -1,2 +1,8 @@
-<!--components/Tab/index.wxml-->
+<view class="tab-container">
-<text>components/Tab/index.wxml</text>
+    <view wx:for="{{data}}" class="tab-item {{item.value==current?'active':''}}" bindtap="updateCurrent" wx:key="value" data-current="{{item.value}}">
+        <view>{{item.label}}</view>
+        <view class="badge" wx:if="{{item.num}}">
+            {{item.num}}
+        </view>
+    </view>
+</view>

components/Tab/index.wxss

@@ -1 +1,50 @@
-/* components/Tab/index.wxss */
+/* components/tab/tab.wxss */
+
+.tab-container {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 20rpx 0 0 0;
+}
+
+.tab-item {
+    color: #222;
+    font-size: 32rpx;
+    padding-bottom: 20rpx;
+    position: relative;
+    /* font-weight:bold; */
+}
+
+.badge {
+    position: absolute;
+    background: red;
+    padding: 2rpx 8rpx;
+    top: 0;
+    right: 0;
+    border-radius: 50%;
+    font-size: 22rpx;
+    font-family: "PingFangSC-Medium", "PingFang SC";
+    font-weight: bold;
+    color: #FFFFFF;
+    transform: translate(100%,-40%);
+    line-height: 22rpx;
+}
+
+.tab-item.active {
+    color: #477DF3;
+    font-weight: bold;
+}
+
+.tab-item.active:after {
+    content: "";
+    display: block;
+    height: 6rpx;
+    width: 65rpx;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #477DF3;
+    border-radius: 2rpx;
+}

package_A/page/alltask/index.js

@@ -11,7 +11,8 @@ Page({
         startTime: '',
         startCurrent: -1,
         endTime: '',
-        endCurrent: -1
+        endCurrent: -1,
+        uploadType: ['车辆登记', '访客人员']
     },
 
     onLoad(e) {
@@ -52,7 +53,6 @@ Page({
                 this.setData({params})
             }
         }
-        console.log(this.data.params);
     },
 
     /**
@@ -61,8 +61,14 @@ Page({
      */
     showDetail(e) {
         let data = e.currentTarget.dataset.item
-        wx.navigateTo({
+        if(data.registerType === 0) {
-          url: '/package_A/page/upload/index?data=' + JSON.stringify(data),
+            wx.navigateTo({
-        })
+              url: '/package_A/page/upload/index?id=' + data.id,
+            })
+        } else {
+            wx.navigateTo({
+                url: '/package_A/page/register/index?id=' + data.id,
+            })
+        }
     }
 })

package_A/page/alltask/index.json

@@ -1,7 +1,8 @@
 {
     "usingComponents": {
         "List": "../../../components/List/index",
-        "image-info": "../../../components/ImageInfo/index"
+        "image-info": "../../../components/ImageInfo/index",
+        "tab": "../../../components/Tab/index"
     },
     "navigationBarTitleText": "上报记录"
 }

package_A/page/alltask/index.wxml

@@ -22,7 +22,10 @@
     <List id="list" class="task_list" url="{{current}}" bind:update-list="updateList" list="{{list}}" bind:reset-list="resetList" params="{{params}}">
         <view class="task_item" data-current="{{index}}" wx:for="{{list}}" wx:key="index">
             <view class="task_main" data-item="{{item}}" bindtap="showDetail">
-                <text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);margin-bottom: 15rpx;">登记时间：{{item.createTime || ''}}</text>
+                <view class="card_head">
+                    <text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);">登记时间：{{item.createTime || ''}}</text>
+                    <text style="font-size: 30rpx;">{{uploadType[item.registerType]}}</text>
+                </view>
                 <image-info data="{{item}}" type="list"></image-info>
             </view>
         </view>  

package_A/page/alltask/index.wxss

@@ -57,6 +57,12 @@
     justify-content: flex-start;
     align-items: flex-start;
   }
+  .card_head {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+  }
   .task_main {
     box-sizing: border-box;
     flex: 1;

package_A/page/register/index.js

@@ -0,0 +1,252 @@
+// package_A/page/register/index.js
+const crypto = require('crypto-js')
+import {Base64} from 'js-base64'
+import {getOssAuth} from '../../../api/upload.js'
+import {confirmOrder, getAllTask} from '../../../api/task.js'
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        type: 'upload',
+        form: {},
+        dataSource: {},
+        healthCodeList: [],
+        formRules: {
+            healthCodeList: {
+                validator: function (value) {
+                  return value.length!=0;
+                },
+                warning: false
+            }
+        }
+    },
+
+    onLoad(e) {
+        if(e.id) {
+            let id = parseInt(e.id)
+            let params = {
+                registerId: id,
+                limit: 1,
+                page: 1
+            }
+            getAllTask(params).then(res=> {
+                if(res.code === 0) {
+                    let dataSource = res.data.records[0]
+                    let list = dataSource.registerFlowmanVoList || []
+                    let arr = []
+                    if(list.length > 0) {
+                        list.forEach(item=> {
+                            if(item.imageUrl) {
+                                arr.push(item.imageUrl)
+                            }
+                        })
+                    }
+                    let healthCodeList = arr
+                    this.setData({dataSource, type: 'detail', healthCodeList})
+                }
+            })
+        }
+        if(this.data.type === 'upload') {
+            this.getOssAuthForm()
+        }
+    },
+   
+    // 图片预览
+    previewImage(e) {
+        let type = e.currentTarget.dataset.type
+        let item = e.currentTarget.dataset.item
+        let str = type + 'List'
+        wx.previewImage({
+          urls: this.data[str],
+          current: item
+        })
+    },
+    validate(name) {
+        let formRules = this.data.formRules;
+        let validator = formRules[name].validator
+        let result
+        result = validator ? !validator(this.data[name]) : false
+        formRules[name].warning = result
+        this.setData({formRules})
+        return result
+    },
+    // 表单验证
+    validateForm() {
+        return new Promise((resolve, reject) => {
+            try {
+            let formRules = this.data.formRules;
+            let result = false;
+            for (let key in formRules) {
+                let temp = this.validate(key)
+                if (temp) {
+                result = temp
+                }
+            }
+            resolve(!result)
+            } catch (e) {
+            reject(e)
+            }
+        })
+    },
+    /* 获取图片上传鉴权 */
+    getOssAuthForm() {
+        let that = this
+        getOssAuth().then((res)=> {
+            let client = {
+                region: 'oss-cn-shanghai',
+                secure: true,
+                accessKeyId: res.accessKeyId,
+                accessKeySecret: res.accessKeySecret,
+                securityToken: res.securityToken,
+                bucket: 'ta-tech-image'
+            }
+            // 计算签名
+            function computeSignature(accessKeySecret, canonicalString) {
+                return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
+            }
+            const date = new Date();
+            date.setHours(date.getHours() + 1);
+            const policyText = {
+                expiration: date.toISOString(), // 设置policy过期时间。
+                conditions: [
+                    // 限制上传大小。
+                    ["content-length-range", 0, 1024 * 1024 * 1024],
+                ],
+            };
+            // 获取签名
+            const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
+            const signature = computeSignature(client.accessKeySecret, policy)
+            let ossForm = that.data.ossForm
+            ossForm = {
+                OSSAccessKeyId: client.accessKeyId,
+                signature,
+                policy,
+                SecurityToken: client.securityToken 
+            }
+            that.setData({ossForm})
+        }).catch(e=> {
+            console.log(e);
+        })
+    
+    },
+    /* 上传图片 */
+    uploadImages(e){
+        let type = e.currentTarget.dataset.type
+        let limit = e.currentTarget.dataset.limit
+        // wx.chooseImage({
+        wx.chooseMedia({
+          count: limit - this.data[type + 'List'].length, // 最多可以选择的图片张数，默认9
+          mediaType: ['image'], // 图片
+          sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
+          sourceType: ['camera'], // album 从相册选图，camera 使用相机，默认二者都有
+          success:(res) =>{
+              // success
+              let str = type+'List'
+            //   let imageList = this.data[str].concat(res.tempFilePaths);
+            //   console.log(imageList)
+              let imageList = this.data[str].concat(res.tempFiles[0].tempFilePath);
+            this.setData({healthCodeList: imageList})
+              this.validate(type+'List')
+          },
+          fail: (e) => {
+              console.log('取消选择');
+          }
+        })
+    },
+    // 删除图片
+    deleteImage(e) {
+        let type = e.currentTarget.dataset.type
+        let index = this.getCurrentData(e);
+        let list = this.data[type+"List"]
+        list.splice(index, 1)
+        let str = type + 'List'
+        this.setData({healthCodeList: list})
+        this.validate(str)
+    },
+    getCurrentData(e) {
+        return e.currentTarget.dataset.current;
+    },
+    /* 取消 */
+    returnLastPage() {
+        this.setData({
+            form: {}
+        })
+        wx.navigateBack({
+          delta: 1,
+        })
+    },
+    /* 表单上传 */
+    submit(){
+        this.validateForm().then(res => {
+            if(res) {
+                let healthCodeList = this.data.healthCodeList
+                let imageList = healthCodeList
+                let ossForm = this.data.ossForm
+                let temp = []
+                console.log('图片列表数据：', imageList);
+                if (imageList.length > 0) {
+                    wx.showLoading({title:"上传中",mask:true})
+                    temp = imageList.map(item => {
+                        // 设置文件上传路径
+                        const randomString = Math.random().toString(36).slice(2)
+                        const timestamp = new Date().getTime()
+                        const key = `imagedir/${randomString}_${timestamp}.png`
+                        // 上传图片
+                        return new Promise((resolve, reject)=> {
+                            wx.uploadFile({
+                                url: 'https://ta-tech-image.oss-cn-shanghai.aliyuncs.com',
+                                filePath: item,
+                                name: 'file',
+                                formData: {
+                                    key,
+                                    OSSAccessKeyId: ossForm.OSSAccessKeyId,
+                                    signature: ossForm.signature,
+                                    policy: ossForm.policy,
+                                    'x-oss-security-token': ossForm.SecurityToken 
+                                },
+                                success: (res)=> {
+                                    if(res.statusCode === 204) {
+                                        // 上传成功，将图片路径resolve出去
+                                        resolve(key)
+                                    } 
+                                },
+                                fail: (e)=> {
+                                    wx.showToast({
+                                        title: '图片上传失败',
+                                    })
+                                }
+                            })
+                        })
+                    })
+                    Promise.all(temp).then((res)=> {
+                        let form = this.data.form;
+                        form.flowManUrlList = res
+                        form.registerType = 1
+                        // 登记
+                        confirmOrder(form).then(res => {
+                            if (res?.code === 0) {
+                                wx.reLaunch({
+                                    url: '/pages/task/task',
+                                })
+                            }
+                        }).catch(e=> {
+                            console.log(e);
+                        }).finally(()=>{
+                            wx.hideLoading();
+                        })
+                          
+        
+                    }).catch((e)=> {
+                        wx.hideLoading()
+                    })
+                }
+            }
+        })
+    
+        
+    }
+    
+
+})

package_A/page/register/index.json

@@ -0,0 +1,4 @@
+{
+    "usingComponents": {},
+    "navigationBarTitleText": "访客登记"
+}

package_A/page/register/index.wxml

@@ -0,0 +1,25 @@
+<!--package_A/page/upload/index.wxml-->
+<view class="upload_container">
+    <view class="upload_images {{formRules.healthCodeList.warning? 'warning': ''}}">
+        <text><text style="color: red;">*</text>上传健康码、行程卡照片：</text>
+        <view class="image_list">
+            <view class="image_preview" wx:for="{{healthCodeList}}" wx:key="index">
+                <image class="image_item" src="{{item}}" mode="aspectFill" data-type="healthCode" data-item="{{item}}" bindtap="previewImage">
+                </image>
+                <div class="close" data-current="{{index}}" data-type="healthCode" wx:if="{{type === 'upload'}}" catchtap="deleteImage"></div>
+            </view>
+            <view class="upload_image" data-limit="{{10}}" data-type="healthCode" bindtap="uploadImages" wx:if="{{type === 'upload'}}">
+                <image style="height: 56rpx;width: 56rpx;" mode="widthFix" src="../../../assets/img/upload.png"></image>
+                <text>拍照上传</text>
+            </view>
+        </view>
+        <text class="tips">请上传健康码、行程卡图片</text>
+    </view>
+
+    <view class="btn_list">
+        <view wx:if="{{type === 'detail'}}" class="btn_item cancel_btn" bindtap="returnLastPage">返 回</view>
+        <view wx:if="{{type === 'upload'}}" class="btn_item submit_btn" bindtap="submit">确 认</view>
+    </view>
+
+</view>
+

package_A/page/register/index.wxss

@@ -0,0 +1,136 @@
+/* package_A/page/upload/index.wxss */
+.upload_container {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 30rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+ /* 上传图片 */
+ .upload_images {
+    width: 100%;
+    margin-bottom: 50rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    font-size: 34rpx;
+    color: #666666;
+    position: relative;
+}
+.image_list {
+    width: 100%;
+    margin-top: 20rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+}
+.image_preview {
+  height: 200rpx;
+  width: 200rpx;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+  position: relative;
+}
+.image_item {
+  height:100%;
+  width: 100%;
+  margin-bottom: 20rpx;
+}
+.close{
+  position: absolute;
+  top:0;
+  right:0;
+  transform: translate(40%,-40%);
+  height:50rpx;
+  width:50rpx;
+  background:rgba(179, 179, 179, 0.5);
+  border-radius: 50%;
+  z-index: 10;
+}
+.close::before{
+  content: "";
+  display: block;
+  position: absolute;
+  width: 60%;
+  height: 10rpx;
+  top:50%;
+  left:50%;
+  background:rgb(124, 124, 124);
+  transform-origin: center;
+  /* transform: ; */
+  transform: translate(-50%,-50%) rotate(45deg);
+}
+.close::after{
+  content: "";
+  display: block;
+  position: absolute;
+  width: 60%;
+  height: 10rpx;
+  top:50%;
+  left:50%;
+  background:rgb(124, 124, 124);
+  transform-origin: center;
+  /* transform: ; */
+  transform: translate(-50%,-50%) rotate(-45deg);
+}
+.upload_image {
+  width: 200rpx;
+  height: 200rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1rpx dashed #A6A6A6;
+  border-radius: 10rpx;
+}
+
+.upload_image text {
+  color: rgba(0, 0, 0, 0.5);
+  font-size: 30rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.note_mark {
+  margin-top: 20rpx;
+  font-size: 24rpx;
+  color: rgba(153, 153, 153, 1);
+}
+.tips{
+    position: absolute;
+    bottom: -40rpx;
+    left: -15rpx;
+    color: red;
+    font-size: 24rpx;
+    transform: translate(27rpx, -5rpx);
+    display: none;
+  }
+.upload_images.warning .tips{
+    display: block;
+  }
+/* 按钮区 */
+.btn_list {
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: 50rpx;
+    padding: 10rpx 20rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.btn_item {
+    width: 600rpx;
+    height: 80rpx;
+    border-radius: 40rpx;
+    line-height: 80rpx;
+    text-align: center;
+    font-size: 32rpx;
+    color: #ffffff;
+    background-color: #477DF3;
+}

package_A/page/upload/index.js

@@ -2,7 +2,7 @@
 const crypto = require('crypto-js')
 import {Base64} from 'js-base64'
 import {getOssAuth} from '../../../api/upload.js'
-import {confirmOrder} from '../../../api/task.js'
+import {confirmOrder, getAllTask} from '../../../api/task.js'
 Page({
 
     /**
@@ -30,20 +30,30 @@ Page({
     },
 
     onLoad(e) {
-        if(e.data) {
+        if(e.id) {
-            let data = JSON.parse(e.data)
+            let id = parseInt(e.id)
-            let carNumberList = [data.carUrl]
+            let params = {
-            let list = data.registerFlowmanVoList || []
+                registerId: id,
-            let arr = []
+                limit: 1,
-            if(list.length > 0) {
+                page: 1
-                list.forEach(item=> {
-                    if(item.imageUrl) {
-                        arr.push(item.imageUrl)
-                    }
-                })
             }
-            let healthCodeList = arr
+            getAllTask(params).then(res=> {
-            this.setData({type: 'detail', carNumberList, healthCodeList})
+                if(res.code === 0) {
+                    let dataSource = res.data.records[0]
+                    let carNumberList = [dataSource.carUrl]
+                    let list = dataSource.registerFlowmanVoList || []
+                    let arr = []
+                    if(list.length > 0) {
+                        list.forEach(item=> {
+                            if(item.imageUrl) {
+                                arr.push(item.imageUrl)
+                            }
+                        })
+                    }
+                    let healthCodeList = arr
+                    this.setData({dataSource, type: 'detail', carNumberList, healthCodeList})
+                }
+            })
         }
         if(this.data.type === 'upload') {
             this.getOssAuthForm()
@@ -132,15 +142,18 @@ Page({
     uploadImages(e){
         let type = e.currentTarget.dataset.type
         let limit = e.currentTarget.dataset.limit
-        wx.chooseImage({
+        // wx.chooseImage({
+        wx.chooseMedia({
           count: limit - this.data[type + 'List'].length, // 最多可以选择的图片张数，默认9
           mediaType: ['image'], // 图片
           sizeType: ['compressed'], // original 原图，compressed 压缩图，默认二者都有
-          sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
+          sourceType: ['camera'], // album 从相册选图，camera 使用相机，默认二者都有
           success:(res) =>{
               // success
               let str = type+'List'
-              let imageList = this.data[str].concat(res.tempFilePaths);
+            //   let imageList = this.data[str].concat(res.tempFilePaths);
+            //   console.log(imageList)
+              let imageList = this.data[str].concat(res.tempFiles[0].tempFilePath);
               if(type === 'carNumber') {
                   this.setData({carNumberList: imageList})
               } else {
@@ -227,6 +240,7 @@ Page({
                         form.carUrl = res[0]
                         res.shift()
                         form.flowManUrlList = res
+                        form.registerType = 0
                         // 登记
                         confirmOrder(form).then(res => {
                             if (res?.code === 0) {

pages/task/task.js

@@ -7,7 +7,8 @@ Page({
      */
     data: {
         userInfo: {},
-        dataList: []
+        dataList: [],
+        uploadType: ['车辆登记', '访客人员']
     },
 
     onLoad() {
@@ -38,19 +39,32 @@ Page({
           url: '/package_A/page/alltask/index',
         })
     },
+    // 车辆登记
     goUpload() {
         wx.navigateTo({
           url: '/package_A/page/upload/index',
         })
     },
+    // 访客登记
+    goRegister() {
+        wx.navigateTo({
+            url: '/package_A/page/register/index',
+        })
+    },
     /**
      * 进入详情页面
      */
     goTaskDetail(e) {
         let detail = e.currentTarget.dataset.detail
-        wx.navigateTo({
+        if(detail.registerType === 0) {
-            url: '/package_A/page/upload/index?data=' + JSON.stringify(detail),
+            wx.navigateTo({
-        })
+                url: '/package_A/page/upload/index?id=' + detail.id,
+            })
+        } else {
+            wx.navigateTo({
+                url: '/package_A/page/register/index?id=' + detail.id,
+            })
+        }
     }
 
 })

pages/task/task.wxml

@@ -5,9 +5,15 @@
         <view class="company_message">
             <text>{{userInfo.name}}</text>
         </view>
-        <view class="to_upload" bindtap="goUpload">
+        <view class="upload_container">
-            <image style="width: 80rpx;height: 60rpx;margin-right: 20rpx;" src="../../assets/img/photo.png"></image>
+            <view class="to_upload" bindtap="goUpload">
-            <text>拍照上传车辆信息</text>
+                <image style="width: 80rpx;height: 60rpx;margin-bottom: 20rpx;" src="../../assets/img/photo.png"></image>
+                <text>车辆登记</text>
+            </view>
+            <view class="to_upload" bindtap="goRegister">
+                <image style="width: 80rpx;height: 60rpx;margin-bottom: 20rpx;" src="../../assets/img/photo.png"></image>
+                <text>访客登记</text>
+            </view>
         </view>
     </view>
     <!-- 记录 -->
@@ -17,7 +23,10 @@
             <text style="font-size: 26rpx; color: rgba(42, 130, 228, 1);" data-status="all" bindtap="goTaskPage">查看更多</text>
         </view>
         <view class="task_item" wx:for="{{dataList}}" wx:key="index" bindtap="goTaskDetail" data-detail="{{item}}">
-            <text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);margin-bottom: 15rpx;">登记时间：{{item.createTime || ''}}</text>
+            <view class="card_head">
+                <text style="font-size: 30rpx;color: rgba(0, 0, 0, 0.84);">登记时间：{{item.createTime || ''}}</text>
+                <text style="font-size: 30rpx;">{{uploadType[item.registerType]}}</text>
+            </view>
             <image-info data="{{item}}"></image-info>
         </view>
     </view>

pages/task/task.wxss

@@ -20,6 +20,13 @@
     align-items: center;
     background: linear-gradient(90deg, rgba(115, 164, 255, 1) 0%, rgba(67, 160, 255, 1) 100%);
 }
+.upload_container {
+    width: 100%;
+    margin-top: 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
 .company_message {
     width: 100%;
@@ -32,12 +39,13 @@
     color: #ffffff;
 }
 .to_upload {
-    width: 600rpx;
+    width: 320rpx;
-    height: 240rpx;
+    height: 230rpx;
     border-radius: 12rpx;
     background-color: #ffffff;
     font-size: 28rpx;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
 }
@@ -66,6 +74,12 @@
     background-color: #ffffff;
     border-bottom: 1rpx solid rgba(166, 166, 166, 0.35);
 }
+.card_head {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 
 .empty_page {
     width: 100%;