fix

src/components/Panel/index.vue

@@ -1,14 +1,4 @@
 <template>
-  <!-- <Draggable
-      v-slot="{ x, y }"
-      p="x-4 y-2"
-      border="~ gray-400/30 rounded"
-      shadow="~ hover:lg"
-      class="fixed bg-$vp-c-bg select-none z-24"
-      :initial-value="{ x: innerWidth / 3.6, y: 240 }"
-      :prevent-default="true"
-      :handle="handle"
-    > -->
   <div v-if="!hidePanel"
        :class="['panel', { active: visible }]"
        id="panel"
@@ -227,7 +217,6 @@
            @click="visible = !visible"></div>
     </div>
   </div>
-  <!-- </Draggable> -->
   <div v-if="isSubmit && !isReport"
        class="z-[199] fixed top-[64px] right-0 bottom-0 left-0 bg-[rgba(0,0,0,.3)]"></div>
 </template>
@@ -283,7 +272,6 @@ const handle = ref<HTMLElement | null>(null);
 const { x, y, style } = useDraggable(container, {
   initialValue: { x: 0, y: 200 },
   stopPropagation: true,
-  // exact: true,
   handle: handle.value,
   onStart(position, e) {
     const { id } = e.target;

src/styles/form.scss

@@ -1,5 +1,5 @@
 .form {
-  @apply max-h-[calc(100vh-270px)] pr-2 overflow-auto;
+  @apply max-h-[calc(100vh-210px)] pr-2 overflow-auto;
   .step {
     @apply relative pl-[42px];
     &:before {

src/styles/index.scss

@@ -107,3 +107,17 @@ body {
     }
   }
 }
+.dia-btn {
+  padding: 11px 26px;
+  font-size: 14px;
+  line-height: 1;
+  color: #fff;
+  background: linear-gradient(-36deg, #006bff, #2ab1ff);
+  border-radius: 18px;
+  cursor: pointer;
+  &.cancel {
+    font-size: 600;
+    color: #333;
+    background: #f4f8fc;
+  }
+}

src/views/Role.vue

@@ -62,6 +62,10 @@
   <div class="relative min-h-[calc(100vh-64px)] bg-[url('@/assets/images/role/bg.png')] bg-[length:100%] bg-no-repeat">
     <div class="absolute top-5 left-[18px] w-[204px] h-[68px] bg-[url('@/assets/images/role/2.png')] bg-[length:100%_100%] bg-no-repeat"></div>
 
+    <div class="date absolute top-[70px] left-[54%] w-[198px] h-[46px] pt-[10px] pl-[56px] text-base text-white bg-[url('@/assets/images/role/date.png')] bg-no-repeat cursor-pointer transition hover:bg-[url('@/assets/images/role/date1.png')]"
+         @click="dateVisible = true">
+      2023-10-12
+    </div>
     <div class="role top-[310px] left-[340px] bg-[url('@/assets/images/role/product.png')] hover:bg-[url('@/assets/images/role/product1.png')]"
          @click="selecRole(41)"></div>
     <div class="role top-[220px] left-[490px] bg-[url('@/assets/images/role/committee.png')] hover:bg-[url('@/assets/images/role/committee1.png')]"
@@ -71,7 +75,7 @@
     <div class="role bottom-[50px] left-[100px] bg-[url('@/assets/images/role/insurance.png')] hover:bg-[url('@/assets/images/role/insurance1.png')]"
          @click="selecRole(275)"></div>
     <div class="role bottom-[50px] left-[550px] bg-[url('@/assets/images/role/fund.png')] hover:bg-[url('@/assets/images/role/fund1.png')]"
-         @click="selecRole(276)"></div>
+         @click="selecRole(1161)"></div>
   </div>
   <!-- <div class="fixed top-[80px] right-[80px]">
     <div class="flex items-center h-[60px] px-4 rounded-tl-[20px] rounded-tr-[20px]"
@@ -109,7 +113,26 @@
       </div>
     </div>
   </div> -->
+
   <Panel />
+
+  <el-dialog v-model="dateVisible"
+             title="选择交易日期"
+             width="400px"
+             center>
+    <div class="text-center">
+      <el-date-picker v-model="date"
+                      type="date" />
+    </div>
+    <template #footer>
+      <span class="flex justify-center">
+        <div class="dia-btn mr-3 cancel"
+             @click="dateVisible = false">取消</div>
+        <div class="dia-btn"
+             @click="dateVisible = false">确定</div>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -123,6 +146,8 @@ const router = useRouter();
 const route = useRoute();
 const collected = ref<boolean>(false);
 const curLevel = ref<number | string>('');
+const dateVisible = ref<boolean>(false);
+const date = ref<any>(new Date());
 const levels = ref<Record<string, any>[]>([]);
 const ranges = ref<Record<string, any>[]>([
   {
@@ -195,7 +220,7 @@ const getLevel = async () => {
 };
 // 点击角色回调
 const selecRole = (id: number) => {
-  router.push(id === 275 ? `/product/insurance` : id === 276 ? `/product/fund` : `/product/bank?type=0&i=1&role=${id}`);
+  router.push(id === 275 ? `/product/insurance` : id === 1161 ? `/product/fund` : `/product/bank?type=0&i=1&role=${id}`);
 };
 // 返回关卡
 const toLevel = () => {
@@ -249,6 +274,9 @@ onMounted(() => {
     }
   }
 }
+.date {
+  text-shadow: 0px 1px 1px #003c81;
+}
 .role {
   @apply absolute w-[172px] h-[48px] bg-[length:100%_100%] bg-no-repeat cursor-pointer transition;
 }

src/views/finance/Publish.vue

@@ -117,9 +117,9 @@
                      class="px-3 py-2 justify-end"></el-pagination>
       <template #footer>
         <span class="flex justify-center">
-          <div class="btn mr-3 cancel"
+          <div class="dia-btn mr-3 cancel"
                @click="productVisible = false">取消</div>
-          <div class="btn"
+          <div class="dia-btn"
                @click="productVisible = false">确定</div>
         </span>
       </template>
@@ -159,63 +159,32 @@ onMounted(() => {
 <style lang="scss" scoped>
 .forms {
   .line {
-    display: flex;
+    @apply flex mb-3;
-    margin-bottom: 12px;
   }
   .fields {
-    flex: 1;
+    @apply flex-1;
   }
   .label {
-    margin-right: 5px;
+    @apply mr-[5px] text-base leading-[32px] text-[#333];
-    font-size: 14px;
-    line-height: 32px;
-    color: #333;
   }
   .el-input {
-    width: 500px;
+    @apply w-[50px];
   }
   .tips {
-    margin-bottom: 12px;
+    @apply mr-[5px] text-base leading-[32px] text-[#333];
-    font-size: 14px;
-    line-height: 32px;
-    color: #333;
   }
   .upload {
-    display: flex;
+    @apply flex justify-center items-center w-[70px] h-[70px] rounded-lg cursor-pointer;
-    justify-content: center;
-    align-items: center;
-    width: 70px;
-    height: 70px;
     border: 1px solid #dfe9f8;
-    border-radius: 8px;
-    cursor: pointer;
   }
   .route {
-    display: flex;
+    @apply flex justify-between items-center mb-[6px];
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 6px;
     .text {
-      font-size: 14px;
+      @apply text-base text-[#333];
-      color: #333;
     }
     .el-input-number {
-      width: 100px;
+      @apply w-[100px];
-    }
     }
-}
-.btn {
-  padding: 11px 26px;
-  font-size: 14px;
-  line-height: 1;
-  color: #fff;
-  background: linear-gradient(-36deg, #006bff, #2ab1ff);
-  border-radius: 18px;
-  cursor: pointer;
-  &.cancel {
-    font-size: 600;
-    color: #333;
-    background: #f4f8fc;
   }
 }
 </style>

src/views/product/bank/List.vue

@@ -58,35 +58,43 @@
               :data="list"
               @sort-change="handleSort">
       <el-table-column prop="productName"
-                       label="产品名称"></el-table-column>
+                       label="产品名称"
+                       min-width="110"></el-table-column>
       <el-table-column prop="productNumber"
-                       label="产品编号"></el-table-column>
+                       label="产品编号"
+                       min-width="80"></el-table-column>
       <el-table-column v-if="params.roleId != 41"
                        prop="loanCeiling"
-                       :label="params.roleId == 42 ? '贷款对象' : '产品对象'">
+                       :label="params.roleId == 42 ? '贷款对象' : '产品对象'"
+                       min-width="80">
         <template #default="{ row }">
           {{ row.productType ? '企业' : '个人' }}
         </template>
       </el-table-column>
       <el-table-column prop="guarantyStyle"
-                       label="担保方式"></el-table-column>
+                       label="担保方式"
+                       min-width="80"></el-table-column>
       <el-table-column prop="loanCeiling"
-                       label="最高额度/年利率/期限">
+                       label="最高额度/年利率/期限"
+                       min-width="110">
         <template #default="{ row }">
           {{ row.loanCeiling + '万元/' + row.maximumAnnualInterestRate + '%/' + row.maximumTermOfLoan + '个月' }}
         </template>
       </el-table-column>
       <el-table-column prop="createTime"
                        label="创建日期"
-                       sortable="custom"></el-table-column>
+                       sortable="custom"
+                       min-width="80"></el-table-column>
       <el-table-column prop="status"
-                       label="产品进度">
+                       label="产品进度"
+                       min-width="80">
         <template #default="{ row }">
           {{ getStatus(row.status) }}
         </template>
       </el-table-column>
       <el-table-column prop="id"
-                       label="操作">
+                       label="操作"
+                       min-width="110">
         <template #default="{ row }">
           <el-button v-if="row.showElementsOrNot"
                      type="text"

src/views/product/fund/Add.vue

@@ -5,7 +5,7 @@
                    name="tab1">
         <el-form label-width="100px"
                  label-suffix="："
-                 class="form"
+                 class="max-w-[calc(100vw-540px)] overflow-auto form"
                  status-icon>
           <el-form-item label="基金名称"
                         prop="fundName">

src/views/product/insurance/Add.vue

@@ -5,7 +5,7 @@
                    name="tab1">
         <el-form label-width="100px"
                  label-suffix="："
-                 class="form"
+                 class="max-w-[calc(100vw-540px)] overflow-auto form"
                  status-icon>
           <el-form-item label="保险名称"
                         prop="insuranceName">

src/views/product/insurance/List.vue

@@ -64,7 +64,7 @@
       </el-table-column>
       <el-table-column prop="premiumAmount"
                        label="保费金额（元）"
-                       min-width="120">
+                       min-width="140">
         <template #default="{ row }">
           {{ row.premiumAmount?.toFixed(2) || '-' }}
         </template>