Pārlūkot izejas kodu

fixed:初步推进融资需求发布

nahida 1 gadu atpakaļ
vecāks
revīzija
4416d1564a

+ 28 - 0
src/api/xyrz/rzsq.js

@@ -0,0 +1,28 @@
+import request from "@/utils/request";
+
+export const addOrUpdateLoanApplication = (data) => {
+    return request.post("/faFinancingApplication/saveOrUpdate", data)
+}
+
+export const listByPage = (pageNum,pageSize,conditionJsonArr)=>{
+    let s = encodeURIComponent(JSON.stringify(conditionJsonArr));
+    return request.get("/faFinancingApplication/findByPage",{
+        params:{
+            pageNum,
+            pageSize,
+            conditionJson:s
+        }
+    }
+    )
+}
+export const getLoanById = (id)=>{
+    return request.get("/faFinancingApplication/getById/"+id);
+}
+export const releaseApplicationById = (id)=>{
+    return request.get("/faFinancingApplication/releaseApplicationById",{
+        params:{
+            id
+        }
+    }
+    );
+}

+ 234 - 122
src/views/CFMonitoring/rzsq/index.vue

@@ -4,39 +4,67 @@
     <el-row :gutter="20">
       <el-col style="display:flex" :span="20" :xs="24">
         <el-form :model="searchCondition" :inline="true">
-          <el-form-item label="放款机构名称" prop="tableName">
+          <el-form-item label="联系人" prop="contactPerson">
             <el-input
+                v-model="searchCondition.contactPerson"
                 style="max-width: 600px"
-                placeholder="请输入业务名称"
+                placeholder="请输入联系人"
                 class="input-with-select"
                 :clearable="true"
+                @change="handleSearch"
             >
             </el-input>
           </el-form-item>
-          <el-form-item label="状态" prop="tableName">
+          <el-form-item label="描述" prop="demandDescription">
             <el-input
+                v-model="searchCondition.demandDescription"
                 style="max-width: 600px"
-                placeholder="请输入业务名称"
+                placeholder="请输入描述"
                 class="input-with-select"
                 :clearable="true"
+                @change="handleSearch"
             >
             </el-input>
           </el-form-item>
-<!--          <el-form-item>-->
-<!--            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>-->
-<!--            <el-button icon="Refresh" @click="handleReset">重置</el-button>-->
-<!--          </el-form-item>-->
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
+            <el-button icon="Refresh" @click="handleReset">重置</el-button>
+          </el-form-item>
         </el-form>
       </el-col>
     </el-row>
-    <el-row :gutter="20">
-      <el-col :span="8" v-for="(application, index) in applications" :key="index">
+    <el-button
+        type="primary"
+        icon="Plus"
+        @click="showApplicationLoanDialog"
+        plain
+        style="margin-bottom: 20px"
+    >
+      申&nbsp;&nbsp;请
+    </el-button>
+    <div style="margin: auto">
+      <el-empty v-if="!applications.length" description="暂无数据" :image-size="100"/>
+    </div>
+    <el-row :gutter="20" v-loading="loading">
+      <el-col :span="8" v-for="(application, index) in applications" :key="index" >
         <el-card class="financing-card" shadow="hover">
           <div class="card-header">
             <h3>{{ application.enterpriseName }}</h3>
             <div class="actions">
-              <el-button size="small" type="primary" @click="handleEdit(application)">编辑</el-button>
-              <el-button size="small" type="danger" @click="handleDelete(application)">删除</el-button>
+              <el-button size="small" type="primary" @click="handleEdit(application.id)">编辑</el-button>
+
+              <el-popconfirm
+                  confirm-button-text="发布"
+                  cancel-button-text="再改改"
+                  :icon="InfoFilled"
+                  icon-color="#626AEF"
+                  title="确定发布?发布后将不可修改"
+                  @confirm="handleRelease(application.id)"
+              >
+                <template #reference>
+                  <el-button size="small" type="danger">发布</el-button>
+                </template>
+              </el-popconfirm>
             </div>
           </div>
           <div class="card-content">
@@ -56,149 +84,188 @@
               <span class="label">联系方式:</span>
               <span class="value">{{ application.contactMethod }}</span>
             </div>
-            <div class="card-item">
-              <span class="label">放款机构代码:</span>
-              <span class="value">{{ application.lendingInstitutionCode }}</span>
-            </div>
-            <div class="card-item">
-              <span class="label">放款机构名称:</span>
-              <span class="value">{{ application.lendingInstitutionName }}</span>
-            </div>
-            <div class="card-item">
-              <span class="label">融资需求编码:</span>
-              <span class="value">{{ application.financingDemandCode }}</span>
-            </div>
             <div class="card-item">
               <span class="label">需求金额:</span>
               <span class="value">{{ application.requiredAmount }}</span>
             </div>
-            <div class="card-item">
-              <span class="label">实际放款金额:</span>
-              <span class="value">{{ application.actualLendingAmount }}</span>
-            </div>
             <div class="card-item">
               <span class="label">状态:</span>
               <el-tag :type="getStatusType(application.status)">
                 {{ formatStatus(application.status) }}
               </el-tag>
             </div>
-            <div class="card-item">
-              <span class="label">放款时间:</span>
-              <span class="value">{{ application.lendingTime ? application.lendingTime.toLocaleString() : '-' }}</span>
-            </div>
             <div class="card-item">
               <span class="label">需求描述:</span>
-              <span class="value">{{ application.demandDescription }}</span>
-            </div>
-            <div class="card-item">
-              <span class="label">备注(未放款原因):</span>
-              <span class="value">{{ application.remarkUnlendingReason }}</span>
+              <span class="value" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ application.demandDescription }}</span>
             </div>
             <div class="card-item">
               <span class="label">创建时间:</span>
-              <span class="value">{{ application.createTime ? application.createTime.toLocaleString() : '-' }}</span>
-            </div>
-            <div class="card-item">
-              <span class="label">更新时间:</span>
-              <span class="value">{{ application.updateTime ? application.updateTime.toLocaleString() : '-' }}</span>
+              <span class="value">{{ application.createTime ? formatDateTime(application.createTime) : '-' }}</span>
             </div>
           </div>
         </el-card>
       </el-col>
     </el-row>
 
-    <el-pagination
-        background
-        layout="prev, pager, next"
-        :total="total"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        @current-change="handlePageChange"
-    ></el-pagination>
+    <el-dialog
+        v-model="loanDialogVisible"
+        :title="loanTitle"
+        align-center
+    >
+      <template #default>
+        <el-form ref="loanFormRef" :model="loanForm" label-width="150px" :rules="loanRules">
+          <el-form-item label="企业统一社会信用编码" prop="unifiedSocialCreditCode">
+            <el-input v-model="loanForm.unifiedSocialCreditCode" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="企业名称" prop="enterpriseName">
+            <el-input v-model="loanForm.enterpriseName" disabled></el-input>
+          </el-form-item>
+          <el-form-item label="联系人" prop="contactPerson">
+            <el-input v-model="loanForm.contactPerson"></el-input>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="contactMethod">
+            <el-input v-model="loanForm.contactMethod"></el-input>
+          </el-form-item>
+          <el-form-item label="需求金额" prop="requiredAmount">
+            <el-input-number v-model.number="loanForm.requiredAmount" :step="10000" :min="10000" :max="5000000"></el-input-number>
+          </el-form-item>
+          <el-form-item label="需求描述" prop="demandDescription">
+            <el-input type="textarea" v-model="loanForm.demandDescription"></el-input>
+          </el-form-item>
+        </el-form>
+      </template>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="loanDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitLoanForm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <div>
+      <el-pagination
+          background
+          layout="prev, pager, next, ->,total"
+          :total="total"
+          v-model:page-size="pageSize"
+          v-model:current-page="currentPage"
+          @current-change="list"
+      ></el-pagination>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import {reactive, ref} from 'vue';
 import { ElMessage } from 'element-plus';
+import {addOrUpdateLoanApplication, getLoanById, listByPage, releaseApplicationById} from "@/api/xyrz/rzsq";
+import {useStore} from "vuex";
+import {InfoFilled} from "@element-plus/icons-vue";
 
-// 假数据
-const applications = ref([
-  {
-    id: 1,
-    unifiedSocialCreditCode: '913101011234567890',
-    enterpriseName: '阿里巴巴集团',
-    contactPerson: '张三',
-    contactMethod: '13800138000',
-    lendingInstitutionCode: '001',
-    lendingInstitutionName: '工商银行',
-    financingDemandCode: 'FD001',
-    requiredAmount: 5000000.00,
-    actualLendingAmount: 4500000.00,
-    status: 2,
-    lendingTime: new Date(),
-    demandDescription: '扩大生产规模',
-    remarkUnlendingReason: '',
-    createTime: new Date(),
-    updateTime: new Date()
-  },
-  {
-    id: 2,
-    unifiedSocialCreditCode: '913101011234567891',
-    enterpriseName: '腾讯公司',
-    contactPerson: '李四',
-    contactMethod: '13900139000',
-    lendingInstitutionCode: '002',
-    lendingInstitutionName: '建设银行',
-    financingDemandCode: 'FD002',
-    requiredAmount: 3000000.00,
-    actualLendingAmount: 2500000.00,
-    status: 3,
-    lendingTime: null,
-    demandDescription: '研发投入',
-    remarkUnlendingReason: '资料不全',
-    createTime: new Date(),
-    updateTime: new Date()
-  },
-  {
-    id: 3,
-    unifiedSocialCreditCode: '913101011234567892',
-    enterpriseName: '百度公司',
-    contactPerson: '王五',
-    contactMethod: '13700137000',
-    lendingInstitutionCode: '003',
-    lendingInstitutionName: '农业银行',
-    financingDemandCode: 'FD003',
-    requiredAmount: 4000000.00,
-    actualLendingAmount: 3500000.00,
-    status: 2,
-    lendingTime: new Date(),
-    demandDescription: '市场拓展',
-    remarkUnlendingReason: '',
-    createTime: new Date(),
-    updateTime: new Date()
-  }
-]);
-
-const total = ref(applications.value.length);
-const pageSize = ref(10);
+const loading = ref(false);
+const store = useStore();
+const loanDialogVisible = ref(false);
+const loanFormRef = ref(null);
+const loanTitle = ref('');
+const applications = ref([]);
+const total = ref(0);
+const pageSize = ref(3);
 const currentPage = ref(1);
+const showApplicationLoanDialog = ()=>{
+  loanTitle.value = '提交贷款申请'
+  loanForm.contactMethod = ''
+  loanForm.contactPerson = ''
+  loanForm.demandDescription = ''
+  loanForm.requiredAmount = ''
+  loanForm.id = null;
+  loanForm.enterpriseName = store.getters.userInfo.nickName
+  loanForm.unifiedSocialCreditCode = store.getters.userInfo.userName
+  loanDialogVisible.value = true;
+  loanFormRef.resetFields();
+}
+const searchCondition = ref({
+  contactPerson: undefined,
+  demandDescription: undefined,
+})
+const handleSearch = () => {
+  list()
+}
+const handleReset = () => {
+  searchCondition.value = {}
+  list()
+}
+const initLoanForm = {
+  unifiedSocialCreditCode: '',
+  enterpriseName: '',
+  contactPerson: '',
+  contactMethod: '',
+  requiredAmount: '',
+  demandDescription: '',
+}
+const loanForm = reactive(initLoanForm);
 
-const handleEdit = (application) => {
-  console.log('Editing application:', application);
-  // 这里可以添加编辑逻辑
+const loanRules = reactive({
+  unifiedSocialCreditCode: [{ required: true, message: '请输入企业统一社会信用编码', trigger: 'blur' }],
+  enterpriseName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+  contactPerson: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+  contactMethod: [
+      { required: true, message: '请输入联系方式', trigger: 'blur' },
+      {
+        pattern: /^1[3456789]\d{9}$/,
+        message: '请输入正确的手机号码',
+        trigger: 'blur'
+      }
+  ],
+  requiredAmount: [{ required: true, message: '请输入需求金额', trigger: 'blur' }],
+  demandDescription: [{ required: true, message: '请输入需求描述', trigger: 'blur' }],
+});
+
+const submitLoanForm = () => {
+  loanFormRef.value.validate(async (valid) => {
+    if (valid) {
+      // 提交表单逻辑
+      const res = await addOrUpdateLoanApplication(loanForm);
+      if(res.code != 200){
+        ElMessage.error(res.msg);
+        return false;
+      }
+      ElMessage.success(res.msg);
+      list()
+      loanDialogVisible.value = false;
+      loanFormRef.resetFields();
+    } else {
+      return false;
+    }
+    list();
+  });
 };
 
-const handleDelete = (application) => {
-  console.log('Deleting application:', application);
-  // 这里可以添加删除逻辑
+const handleEdit = async (id) => {
+  loanTitle.value = '编辑贷款申请'
+  const res = await getLoanById(id);
+  if(res.code == 200){
+    loanForm.unifiedSocialCreditCode = res.data.unifiedSocialCreditCode;
+    loanForm.enterpriseName = res.data.enterpriseName;
+    loanForm.contactPerson = res.data.contactPerson;
+    loanForm.contactMethod = res.data.contactMethod;
+    loanForm.requiredAmount = res.data.requiredAmount;
+    loanForm.demandDescription = res.data.demandDescription;
+    loanForm.id = res.data.id;
+    loanDialogVisible.value = true;
+  }
+  // 这里可以添加编辑逻辑
 };
 
-const handlePageChange = (newPage) => {
-  currentPage.value = newPage;
-  // 这里可以添加分页逻辑
+const handleRelease = async (id) => {
+  const res = await releaseApplicationById(id);
+  if(res.code != 200){
+    ElMessage.error(res.msg);
+  }
+  ElMessage.success(res.msg);
+  list()
 };
 
+
 const formatStatus = (status) => {
   switch (status) {
     case 0:
@@ -232,6 +299,51 @@ const getStatusType = (status) => {
       return 'default';
   }
 };
+// 格式化日期时间
+function formatDateTime(dateTime) {
+  if (!dateTime) return '';
+  const date = new Date(dateTime);
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
+}
+
+const list =async ()=>{
+  const conditionJsonArr = [];
+  conditionJsonArr.push(
+      {
+        column:"unified_social_credit_code",
+        type:'eq',
+        value:store.getters.userInfo.userName,
+      },
+      {
+        column:"create_time",
+        type:'orderByDesc'
+      },
+      {
+        column:"status",
+        type:'eq',
+        value:0
+      }
+  )
+  searchCondition.value.contactPerson && conditionJsonArr.push({
+    column: "contact_person",
+    type: 'like',
+    value: searchCondition.value.contactPerson
+  })
+  searchCondition.value.demandDescription && conditionJsonArr.push({
+    column: "demand_description",
+    type: 'like',
+    value: searchCondition.value.demandDescription
+  })
+  loading.value = true;
+  const res = await listByPage(currentPage.value,pageSize.value,conditionJsonArr);
+  if(res.code != 200){
+    ElMessage.error(res.msg);
+  }
+  applications.value = res.data.records;
+  total.value = res.data.total
+  loading.value = false;
+}
+list()
 </script>
 
 <style scoped>
@@ -257,10 +369,10 @@ const getStatusType = (status) => {
 
 .label {
   font-weight: bold;
-  width: 30%;
+  width: 40%;
 }
 
 .value {
-  width: 70%;
+  width: 60%;
 }
 </style>

+ 285 - 6
src/views/home/CompanyHome/index.vue

@@ -1,11 +1,290 @@
+<template>
+  <div class="financing-applications">
+    <!-- 搜索板块 -->
+    <el-row :gutter="20">
+      <el-col style="display:flex" :span="20" :xs="24">
+        <el-form :model="searchCondition" :inline="true">
+          <el-form-item label="联系人" prop="contactPerson">
+            <el-input
+                v-model="searchCondition.contactPerson"
+                style="max-width: 600px"
+                placeholder="请输入联系人"
+                class="input-with-select"
+                :clearable="true"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="searchCondition.status" placeholder="请选择状态" @change="handleSearch">
+              <el-option
+                  v-for="item in [
+                    { label: '待审核', value: 1 },
+                    { label: '已放款', value: 2 },
+                    { label: '未放款', value: 3 },
+                    { label: '已撤销', value: 4 },
+                  ]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="放款金额" prop="requiredAmount">
+            <el-input-number
+                v-model="searchCondition.requiredAmountMin"
+                @change="handleSearch"
+                style="max-width: 600px"
+                placeholder="最小金额"
+                :step="10000"
+                class="input-with-select"
+                :clearable="true"
+                :min="0"
+                :max="999999999999"
+            >
+            </el-input-number>
+            <el-input-number
+                v-model="searchCondition.requiredAmountMax"
+                @change="handleSearch"
+                style="max-width: 600px"
+                placeholder="最大金额"
+                :step="10000"
+                class="input-with-select"
+                :clearable="true"
+                :min="0"
+                :max="999999999999"
+            >
+            </el-input-number>
+          </el-form-item>
+          <el-form-item label="描述" prop="demandDescription">
+            <el-input
+                v-model="searchCondition.demandDescription"
+                style="max-width: 600px"
+                placeholder="请输入描述"
+                class="input-with-select"
+                :clearable="true"
+                @change="handleSearch"
+            >
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
+            <el-button icon="Refresh" @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" v-loading="loading">
+      <el-col :span="8" v-for="(application, index) in applications" :key="index">
+        <el-card class="financing-card" shadow="hover">
+          <div class="card-header">
+            <h3>{{ application.enterpriseName }}</h3>
+          </div>
+          <div class="card-content">
+            <div class="card-item">
+              <span class="label">企业统一社会信用编码:</span>
+              <span class="value">{{ application.unifiedSocialCreditCode }}</span>
+            </div>
+            <div class="card-item">
+              <span class="label">企业名称:</span>
+              <span class="value">{{ application.enterpriseName }}</span>
+            </div>
+            <div class="card-item">
+              <span class="label">联系人:</span>
+              <span class="value">{{ application.contactPerson }}</span>
+            </div>
+            <div class="card-item">
+              <span class="label">联系方式:</span>
+              <span class="value">{{ application.contactMethod }}</span>
+            </div>
+            <div class="card-item">
+              <span class="label">需求金额:</span>
+              <span class="value">{{ application.requiredAmount }}</span>
+            </div>
+            <div class="card-item">
+              <span class="label">状态:</span>
+              <el-tag :type="getStatusType(application.status)">
+                {{ formatStatus(application.status) }}
+              </el-tag>
+            </div>
+            <div class="card-item">
+              <span class="label">需求描述:</span>
+              <span class="value" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{
+                  application.demandDescription
+                }}</span>
+            </div>
+            <div class="card-item">
+              <span class="label">更新时间:</span>
+              <span class="value">{{ application.updateTime ? formatDateTime(application.updateTime) : '-' }}</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <div style="margin: auto">
+        <el-empty v-if="!applications.length" description="暂无数据" :image-size="100"/>
+      </div>
+    </el-row>
+    <div>
+      <el-pagination
+          background
+          layout="prev, pager, next, ->,total"
+          :total="total"
+          v-model:page-size="pageSize"
+          v-model:current-page="currentPage"
+          @current-change="list"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
 <script setup>
-console.log(5415345335)
+import {ref} from 'vue';
+import {ElMessage} from 'element-plus';
+import {listByPage} from "@/api/xyrz/rzsq";
+import {useStore} from "vuex";
+
+const loading = ref(false);
+const store = useStore();
+const applications = ref([]);
+const total = ref(0);
+const pageSize = ref(3);
+const currentPage = ref(1);
+const searchCondition = ref({
+  status: undefined,
+  contactPerson: undefined,
+  requiredAmountMax: undefined,
+  requiredAmountMin: 0,
+  demandDescription: undefined
+})
+const handleSearch = () => {
+  list()
+}
+const handleReset = () => {
+  searchCondition.value = {}
+  list()
+}
+const formatStatus = (status) => {
+  switch (status) {
+    case 0:
+      return '待发布';
+    case 1:
+      return '待审核';
+    case 2:
+      return '已放款';
+    case 3:
+      return '未放款';
+    case 4:
+      return '已撤销';
+    default:
+      return '未知状态';
+  }
+};
+
+const getStatusType = (status) => {
+  switch (status) {
+    case 0:
+      return 'warning';
+    case 1:
+      return 'default';
+    case 2:
+      return 'success';
+    case 3:
+      return 'danger';
+    case 4:
+      return 'info';
+    default:
+      return 'default';
+  }
+};
+
+// 格式化日期时间
+function formatDateTime(dateTime) {
+  if (!dateTime) return '';
+  const date = new Date(dateTime);
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
+}
+
+const list = async () => {
+  const conditionJsonArr = [];
+  conditionJsonArr.push(
+      {
+        column: "unified_social_credit_code",
+        type: 'eq',
+        value: store.getters.userInfo.userName,
+      },
+      {
+        column: "create_time",
+        type: 'orderByDesc'
+      },
+      {
+        column: "status",
+        type: 'ne',
+        value: 0
+      }
+  )
+  searchCondition.value.status && conditionJsonArr.push({
+    column: "status",
+    type: 'eq',
+    value: searchCondition.value.status
+  })
+  searchCondition.value.contactPerson && conditionJsonArr.push({
+    column: "contact_person",
+    type: 'like',
+    value: searchCondition.value.contactPerson
+  })
+  searchCondition.value.requiredAmountMax && conditionJsonArr.push({
+    column: "required_amount",
+    type: 'le',
+    value: searchCondition.value.requiredAmountMax
+  })
+  searchCondition.value.requiredAmountMin && conditionJsonArr.push({
+    column: "required_amount",
+    type: 'ge',
+    value: searchCondition.value.requiredAmountMin
+  })
+  searchCondition.value.demandDescription && conditionJsonArr.push({
+    column: "demand_description",
+    type: 'like',
+    value: searchCondition.value.demandDescription
+  })
+  loading.value = true;
+  const res = await listByPage(currentPage.value, pageSize.value, conditionJsonArr);
+  if (res.code != 200) {
+    ElMessage.error(res.msg);
+  }
+  applications.value = res.data.records;
+  total.value = res.data.total
+  loading.value = false;
+}
+list()
 </script>
 
-<template>
-  好想你
-</template>
+<style scoped>
+.financing-applications {
+  margin: 20px;
+}
+
+.financing-card {
+  margin-bottom: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-item {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
 
-<style scoped lang="scss">
+.label {
+  font-weight: bold;
+  width: 40%;
+}
 
-</style>
+.value {
+  width: 60%;
+}
+</style>