From 8f24fea6ef79a68bbda4991bd9bd7a60402ad033 Mon Sep 17 00:00:00 2001
From: haoyahui <2032914783@qq.com>
Date: 星期四, 09 十一月 2023 18:16:03 +0800
Subject: [PATCH] 采购单,物品分类

---
 admin-web/src/views/stock/procure/purchaseOrder/index.vue |  691 ++++++++++++++++++++++++++++-----------------------------
 1 files changed, 338 insertions(+), 353 deletions(-)

diff --git a/admin-web/src/views/stock/procure/purchaseOrder/index.vue b/admin-web/src/views/stock/procure/purchaseOrder/index.vue
index e5f7a65..826f06f 100644
--- a/admin-web/src/views/stock/procure/purchaseOrder/index.vue
+++ b/admin-web/src/views/stock/procure/purchaseOrder/index.vue
@@ -1,126 +1,92 @@
 <template>
   <div class="app-container">
     <el-container>
-      <el-container>
-        <el-card class="box-card" style="width: 100%" shadow="never">
-          <!--鎼滅储鏉′欢-->
-          <div class="filter-container">
-            <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
-          </div>
-          <el-row style="margin-top: 15px">
-            <el-col>
-              <!--鍒楄〃-->
-              <my-button name="鏂板" @click="addtable" site="form" />
-              <div :style="{'overflow-y': 'auto', height:`${clientHeight - 320}px`}">
-                    <el-row class="card"
-                            :gutter="5">
-                        <el-col v-for="(item, index) in proData" :key="index" class="cm-item">
-                          <el-card class="card-data">
-                            <div class="card-container">
-                              <div class="hed-one"> <span>鍏ュ簱鍗曞彿锛歿{ item.order_no }}</span><span style="margin-left: 20px;"><el-button type="warning" plain size="mini">寰呭叆搴�</el-button></span></div>
-                              <div class="one-hed">
-                                <div class="box"><span class="span-two">鏈烘瀯锛�</span>{{ item.customer_name }}</div>
-                                <div class="box"><span class="span-two">鎿嶄綔浜猴細</span>{{ item.customer_name }}</div>
-                                <div class="box"><span class="span-two">鍑哄簱鏃堕棿锛�</span>{{ item.customer_name }}</div>
-                                <div class="box"><span class="span-two">鍏ュ簱鏃堕棿锛�</span>{{ item.customer_name }}</div>
-                              </div>
-                              <div class="card-end">
-                                <div v-for="(just, index) in item.data" class="two-end">
-                                  <div class="item"><span>{{ just.order_no }}锛�</span>{{ just.customer_name }}</div>
-                                </div>
-                              </div>
+      <el-card class="box-card" style="width: 100%" shadow="never">
+        <!--鎼滅储鏉′欢-->
+        <div class="filter-container">
+          <my-search ref="searchBar" :items="items" @search="fifterForm"></my-search>
+        </div>
+        <el-row style="margin-top: 15px">
+          <el-col>
+            <!--鍒楄〃-->
+            <my-button name="鏂板" @click="addtable" site="tools" size="medium" />
+            <my-button name="瀵煎叆" @click="importSetting.dialogShow = true" site="tools" size="medium" />
+            <div :style="{ 'overflow-y': 'auto', height: `${clientHeight - 320}px` }" v-loading="loading">
+              <el-row class="card" :gutter="5">
+                <el-col v-for="(item, index) in list" :key="index" class="cm-item">
+                  <el-card class="card-data">
+                    <div class="card-container">
+                      <div class="card-header">
+                        <div class="card-header-left">
+                          <span>鍏ュ簱鍗曞彿锛�</span>
+                          <span class="value">{{ item.businessFormCode }}</span>
+                          <div class="states" :class="item.states==1?'':'states-income'">{{ item.states == 1 ? '寰呭叆搴�' : '宸插叆搴�' }}</div>
+                        </div>
+                        <div class="card-header-right">
+                          <template v-if="item.states == 1">
+                            <el-button name="缂栬緫" site="form" type="success" size="mini" @click="handleEdit(item)"
+                              >缂栬緫</el-button
+                            >
+                            <el-button name="鍏ュ簱" site="form" type="primary" size="mini" @click="handleIncome(item)"
+                              >鍏ュ簱</el-button
+                            >
+                            <el-button name="鍒犻櫎" site="form" type="danger" size="mini" @click="del(item)"
+                              >鍒犻櫎</el-button
+                            >
+                          </template>
+                          <template v-if="item.states != 1">
+                            <el-button site="form" type="success" size="mini" @click="handleExport(item)"
+                              >瀵煎嚭鍏ュ簱鍗�</el-button
+                            >
+                          </template>
+                          <el-button name="鏌ョ湅璇︽儏" site="form" type="info" size="mini" @click="handleDetail(item)"
+                            >鏌ョ湅璇︽儏</el-button
+                          >
+                        </div>
+                      </div>
+                      <div class="one-hed">
+                        <div class="box"><span class="span-two">鏈烘瀯锛�</span>{{ item.agencyId }}</div>
+                        <div class="box"><span class="span-two">鎿嶄綔浜猴細</span>{{ item.buyerName }}</div>
+                        <div class="box"><span class="span-two">鍑哄簱鏃堕棿锛�</span>{{ item.procureTime }}</div>
+                        <div class="box"><span class="span-two">鍏ュ簱鏃堕棿锛�</span>{{ item.procureTime }}</div>
+                      </div>
+                      <div class="card-end">
+                        <div v-for="(just, index) in item.models" :key="index" class="item">
+                          <div class="name">{{ just.baseGoodsModelsId }}</div>
+                          <div class="value-box">
+                            <div class="value-box-item">
+                              <span class="label">鏁伴噺锛�</span>
+                              <span class="value">{{ just.counts }}</span>
                             </div>
-                            <div class="card-but">
-                              <div>
-                                <my-button style="width: 120px;" name="缂栬緫"   site="form" />
-                                <my-button style="width: 120px;" name="鍏ュ簱"   site="form" />
-                              </div>
-                              <div  style="margin-top: 10px;">
-                                <my-button style="width: 120px;" name="鍒犻櫎"   site="form" />
-                                <my-button style="width: 120px;" name="鏌ョ湅璇︽儏" site="form" />
-                              </div>
+                            <div class="value-box-item">
+                              <span class="label">閲戦锛�</span>
+                              <span class="value">{{ just.price }}</span>
                             </div>
-                            
-                          </el-card>
-                        </el-col>
-                    </el-row>
-              </div>
-              <el-pagination
-                :small="false"
-                :current-page="1"
-                :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
-                :page-size="10"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="0"
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-              />
-            </el-col>
-          </el-row>
-          <!--娣诲姞/缂栬緫寮圭獥-->
-          <el-dialog title="鏂板鍑哄簱"  :close-on-click-modal="false" :visible.sync="adddialog" width="60%" >
-            <el-form ref="ruleForm" :model="formData" class="demo-ruleForm" label-width="100px">
-              <el-row :gutter="24" class="headerHeight">
-                  <el-col :span="12">
-                    <el-form-item label="浠撳簱鍚嶇О" prop="name">
-                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="浠撳簱鍚嶇О" prop="name">
-                      <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="24" class="headerHeight">
-                  <el-col :span="24">
-                    <el-form-item label="鍑哄簱鎵嬬画" prop="name">                      
-                      浠呭厑璁稿鍏ls銆亁lsx鏍煎紡鏂囦欢
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <div style="position: relative;">
-                  <div style="background-color: #F9F9F9;width: 90%;">
-                  <el-row :gutter="24" class="">
-                    <el-col :span="12">
-                      <el-form-item label="浠撳簱鍚嶇О" prop="name">
-                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                      <el-form-item label="浠撳簱鍚嶇О" prop="name">
-                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-row :gutter="24" class="">
-                    <el-col :span="12">
-                      <el-form-item label="浠撳簱鍚嶇О" prop="name">
-                        <el-input v-model="formData.name" clearable maxlength="20" show-word-limit style="width: 100%"/>
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-table :data="formData.tableData" height="100%"  :stripe="true">
-                    <el-table-column prop="projectName" label="瑙勬牸鍨嬪彿" align="center"> </el-table-column>
-                    <el-table-column prop="time1" label="鍗曚綅"  align="center"> </el-table-column>
-                    <el-table-column prop="unit" label="鐜版湁搴撳瓨" align="center"> </el-table-column>
-                    <el-table-column prop="time2" label="鍑哄簱鏁伴噺"  align="center"> </el-table-column>
-                  </el-table>
-                  </div>
-                  <div style="position: absolute;right: 0;top: 152px;">
-                    <my-button style="display: block;margin-left: 10px;margin-bottom: 5px;" name="绉婚櫎" site="form"/>
-                    <my-button name="鏂板鐗╁搧" site="form"/>
-                  </div>
-                </div>
-            </el-form>
-            <div slot="footer" align="center" class="dialog-footer">
-              <my-button name="纭畾" site="form" />
-              <my-button name="鍙栨秷" site="form" @click="adddialog = false"/>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
             </div>
-          </el-dialog>
-        </el-card>
-      </el-container>
+            <el-pagination
+              :small="false"
+              :current-page="pageNum"
+              :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400, 500]"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            />
+          </el-col>
+        </el-row>
+      </el-card>
     </el-container>
+    <!--娣诲姞/缂栬緫寮圭獥-->
+    <edit ref="editRef"></edit>
+    <detail ref="detailRef"></detail>
     <my-import
       :import-setting="importSetting"
       :dialog-show="importSetting.dialogShow"
@@ -130,196 +96,96 @@
 </template>
 
 <script>
-import MyButton from "@/components/myButton/myButton";
+import { procureList, procureDel, procureIncome } from '@/api/stock/procure/purchaseOrder';
+import MyButton from '@/components/myButton/myButton';
 import SettingIplatform from '@/utils/settingIplatform';
-import myImport from '@/views/components/myImport'
-import {getBaseUrl} from '@/utils/base';
+import myImport from '@/views/components/myImport';
+import edit from './edit';
+import detail from './detail';
+import { getBaseUrl } from '@/utils/base';
 
 export default {
-  name: "index",
-  components: {MyButton, myImport},
+  name: 'index',
+  components: { MyButton, myImport, edit, detail },
   data() {
     return {
-      
+      loading: false,
       adddialog: false,
-      formData:{
-        tableData:[
+      list: [],
+      formData: {
+        tableData: [
           {
-            projectName:'555'
+            projectName: '555',
           },
           {
-            projectName:'444'
-          }
+            projectName: '444',
+          },
         ],
       },
       // 鎼滅储妗�
       items: [
         {
           type: 'text',
-          dataIndex: 'name',
-          label: '鍑哄簱鍗曞彿',
+          dataIndex: 'businessFormCode',
+          label: '鍏ュ簱鍗曞彿',
           placeholder: '璇疯緭鍏�',
-          defaultValue: ''
+          defaultValue: '',
         },
         {
           type: 'text',
-          dataIndex: 'name',
+          dataIndex: 'goodsTemplateName',
           label: '鐗╁搧鍚嶇О',
           placeholder: '鍙ā绯婃悳绱�',
-          defaultValue: ''
+          defaultValue: '',
+        },
+        {
+          type: 'select',
+          dataIndex: 'name',
+          label: '鏈烘瀯',
+          placeholder: '璇烽�夋嫨',
+          defaultValue: '',
+          options: [],
         },
         {
           type: 'text',
-          dataIndex: 'name',
+          dataIndex: 'buyerName',
           label: '鍒涘缓浜�',
           placeholder: '璇疯緭鍏�',
-          defaultValue: ''
+          defaultValue: '',
+        },
+        {
+          type: 'select',
+          dataIndex: 'states',
+          label: '鐘舵��',
+          placeholder: '璇烽�夋嫨',
+          defaultValue: '',
+          options: [
+            {
+              label: '鍏ㄩ儴',
+              value: '',
+            },
+            {
+              label: '寰呭叆搴�',
+              value: '1',
+            },
+            {
+              label: '宸插叆搴�',
+              value: '2',
+            },
+          ],
         },
         {
           type: 'date-picker',
           dataIndex: 'val1',
-          label: '鍑哄簱鏃堕棿',
-          defaultValue: ''
+          label: '鍏ュ簱鏃堕棿',
+          defaultValue: '',
         },
         {
           type: 'date-picker',
           dataIndex: 'val2',
           label: '鑷�',
-          defaultValue: ''
+          defaultValue: '',
         },
-        // {
-        //   type: 'select',
-        //   dataIndex: 'status',
-        //   label: '鐘舵��',
-        //   placeholder: '璇烽�夋嫨',
-        //   defaultValue: '1',
-        //   options: [
-        //     {
-        //       label: '鍚敤',
-        //       value: '1'
-        //     },
-        //     {
-        //       label: '绂佺敤',
-        //       value: '0'
-        //     }
-        //   ]
-        // }
-      ],
-      proData: [
-        {
-          order_no:'55555',
-          customer_name:'666',
-          data:[
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'20浠�'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-          ]
-        },
-        {
-          order_no:'55555',
-          customer_name:'666',
-          data:[
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-          ]
-        },
-        {
-          order_no:'55555',
-          customer_name:'666',
-          data:[
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'20浠�'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-          ]
-        },
-        {
-          order_no:'55555',
-          customer_name:'666',
-          data:[
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'20浠�'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-          ]
-          
-        },
-        {
-          order_no:'55555',
-          customer_name:'666',
-          data:[
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'20浠�'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-          ]
-          
-        },
-        {
-          order_no:'55555',
-          customer_name:'666',
-          data:[
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'20浠�'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-          ]
-          
-        },
-        {
-          order_no:'55555',
-          customer_name:'666',
-          data:[
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'20浠�'
-            },
-            {
-              order_no:'鐭冲嫆鑺鑹茬⒊绮�',
-              customer_name:'666'
-            },
-          ]
-          
-        }
       ],
       // 鏍戞暟鎹�
       treeDataList: [],
@@ -328,25 +194,25 @@
         tenantId: null,
         userName: null,
         userPhone: null,
-        status: 1
+        states: null,
       },
       // 瀵煎叆
       importSetting: {
-          dialogTitle: '瀵煎叆',
-          dialogShow: false,
-          fileSettings: {
-              data: {},
-              uploadUrl: getBaseUrl()+"/pc/fin/sys/tenant/import", // 涓婁紶鍦板潃
-              accept: '.xls', // 鏍煎紡
-              type: 'text', // 鍥炴樉褰㈠紡
-              loading: false // 瀵煎叆鏁堟灉
-          },
-          /* 妯℃澘涓嬭浇 */
-          templateSettings: {
-              templateName: '瀵煎叆妯℃澘.xls', // 鍚嶇О
-              templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate' // 涓嬭浇鍦板潃
-          },
-          onSuccess: null
+        dialogTitle: '瀵煎叆',
+        dialogShow: false,
+        fileSettings: {
+          data: {},
+          uploadUrl: getBaseUrl() + '/pc/fin/sys/tenant/import', // 涓婁紶鍦板潃
+          accept: '.xls', // 鏍煎紡
+          type: 'text', // 鍥炴樉褰㈠紡
+          loading: false, // 瀵煎叆鏁堟灉
+        },
+        /* 妯℃澘涓嬭浇 */
+        templateSettings: {
+          templateName: '瀵煎叆妯℃澘.xls', // 鍚嶇О
+          templateUrl: SettingIplatform.apiBaseURL + '/pc/fin/sys/tenant/getImportTemplate', // 涓嬭浇鍦板潃
+        },
+        onSuccess: null,
       },
       editSetting: {
         title: '',
@@ -354,104 +220,223 @@
         orgId: '',
         show: false,
       },
-    }
+      pageNum: 1,
+      pageSize: 10,
+      total: 0,
+    };
   },
   computed: {
-    clientHeight () {
-      return document.documentElement.clientHeight
+    clientHeight() {
+      return document.documentElement.clientHeight;
     },
   },
   created() {
+    this.fetchData();
   },
   methods: {
-    handleSizeChange(){},
-    handleCurrentChange(){},
+    fetchData() {
+      this.loading = true;
+      procureList({
+        pageNum: this.pageNum,
+        pageSize: this.pageSize,
+        ...this.filterFrom,
+      }).then((res) => {
+        this.list = res.datas;
+        this.total = res.totalRows;
+        this.loading = false;
+        console.log(this.list);
+      });
+    },
     //瀵煎叆
     importOrg() {
-        this.importSetting.dialogShow = true
-        this.importSetting.onSuccess = (response, callBack) => {
-            if (response.code===1){
-              this.$message.success(response.msg)
-              this.search(1)
-            }else{
-              this.$message.warning(response.msg)
-            }
-            callBack()
+      this.importSetting.dialogShow = true;
+      this.importSetting.onSuccess = (response, callBack) => {
+        if (response.code === 1) {
+          this.$message.success(response.msg);
+          this.search(1);
+        } else {
+          this.$message.warning(response.msg);
         }
+        callBack();
+      };
     },
-   
+    // 瀵煎嚭
+    handleExport() {
+
+    },
+    // 鏂板
     addtable() {
-      this.adddialog = true
+      this.$refs.editRef.open();
+    },
+    // 缂栬緫
+    handleEdit(row) {
+      this.$refs.editRef.open(row.id);
+    },
+    // 璇︽儏
+    handleDetail(row) {
+      this.$refs.detailRef.open(row.id);
+    },
+    // 鍏ュ簱
+    handleIncome(row) {
+      this.$confirm(`鎮ㄧ‘瀹� 鍗曞彿锛�${row.businessFormCode}  鍏ュ簱鍚�?`, '閲囪喘鍏ュ簱')
+        .then(function () {
+          procureIncome({ id: row.id }).then((res) => {
+            this.$message.success('鍏ュ簱鎴愬姛锛�');
+          });
+        })
+        .then((res) => {
+          this.search();
+        })
+        .catch(() => {});
+    },
+    del(row) {
+      this.$modal
+        .confirm('鏄惁纭鍒犻櫎鍏ュ簱鍗曞彿涓�"' + row.businessFormCode + '"鐨勬暟鎹悧锛�')
+        .then(function () {
+          procureDel({ id: row.id }).then((res) => {});
+        })
+        .then((res) => {
+          this.$message.success('鍒犻櫎鎴愬姛锛�');
+          this.search();
+        })
+        .catch(() => {});
+    },
+    // 鍒嗛〉
+    handleSizeChange(pageSize) {
+      this.pageSize = pageSize;
+      this.search({ pageNum: 1 });
+    },
+    handleCurrentChange(pageNum) {
+      this.myTable.paging.page.pageNum = pageNum;
+      this.search({ pageNum: pageNum });
     },
     // 鏌ヨtable鍒楄〃
     search(pageNum) {
-      if (pageNum != undefined) {
-        // this.$refs.myTable.search(pageNum)
-      } else {
-        // this.$refs.myTable.search()
-      }
+      this.fetchData();
     },
     fifterForm(params) {
-      console.log(params,'555');
-      this.filterFrom = Object.assign(this.filterFrom, params)
-      this.search(1)
-    }
-  }
-}
+      this.filterFrom = Object.assign(this.filterFrom, params);
+      this.search(1);
+    },
+  },
+};
 </script>
 
-<style scoped>
-.card {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0px !important;
-    .cm-item {
-        width: 100%;
-    }
-    .cm-item /deep/ .el-card__body {
-        padding: 10px;
-    }
+<style scoped lang="scss">
+.ml-20 {
+  margin-left: 20px;
 }
-.card-data{
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0px !important;
+  .cm-item {
+    width: 100%;
+  }
+  .cm-item ::v-deep .el-card__body {
+    padding-bottom: 5px;
+  }
+}
+.card-data {
   position: relative;
   margin-top: 8px;
-  .card-container{
-    display: inline-block; 
-    width: 70%;
-    .hed-one{
-      color: #2298EE;
-      font-size: 18px;
+  .card-container {
+    .card-header {
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #f3f9fe;
+      padding: 0 32px 0 15px;
+      box-sizing: border-box;
     }
-    .one-hed{
-      margin-top: 15px;
-      .box{
-        display: inline-block;  
-        margin-right: 20px;  
+    .card-header-left {
+      display: flex;
+      align-items: center;
+      color: #999999;
+      font-family: 'Microsoft YaHei UI';
+      font-size: 18px;
+      font-weight: 700;
+      .value {
+        color: #3d3d3d;
+      }
+
+      .states {
+        width: 54px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        border-radius: 4px;
+        border: 1px solid #f9675b99;
+        background: #f9675b1a;
+        font-family: 'Microsoft YaHei';
+        color: #f9675b;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        margin-left: 8px;
+      }
+      .states-income {
+        border: 1px solid #39ad6199;
+        background: #39ad610f;
+        color: #39ad61;
       }
     }
-    .span-two{
-      color: #83919e;
-      font-size: 14px;
+    .one-hed {
+      margin-top: 15px;
+      padding: 0 32px 0 15px;
+      box-sizing: border-box;
+      .box {
+        display: inline-block;
+        margin-right: 20px;
+      }
+      .span-two {
+        color: #83919e;
+        font-size: 14px;
+      }
     }
-    .card-end{
+    .card-end {
       font-size: 14px;
       color: #3d3d3d;
       margin-top: 15px;
-      display: flex;  
-      flex-wrap: wrap; 
-      .two-end{
-        width: calc(33.33% - 20px); 
-        margin-bottom: 15px; 
+      display: flex;
+      flex-wrap: wrap;
+      font-family: 'Microsoft YaHei UI';
+      padding: 0 16px;
+      box-sizing: border-box;
+      .item {
+        width: 379px;
+        height: 60px;
+        padding: 8px 12px 9px 12px;
+        box-sizing: border-box;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+        background: #f9f9f9;
+        margin-right: 15px;
+        margin-bottom: 15px;
+        &:last-child {
+          margin-right: 0;
+        }
+        .name {
+          height: 22px;
+          line-height: 22px;
+        }
+        .value-box {
+          display: flex;
+          .value-box-item {
+            margin-right: 20px;
+            .label {
+              color: #99999999;
+              line-height: 22px;
+            }
+            .value {
+              color: #ff3131;
+            }
+          }
+        }
       }
     }
-    
   }
-  .card-but{
-    position: absolute;
-    right: 20px;
-    top: 40%;
-  }
-  
 }
-
 </style>

--
Gitblit v1.9.1