feat: 优化导航页

src/pages/cal/index.vue

@@ -1,25 +1,77 @@
 <template>
     <t-row>
-        <t-col :span="3">
-            <t-card hoverShadow class="bigNav" @click="goDq">
-                双碳贷前计算器
+        <t-col :flex="3">
+            <t-card hoverShadow header-bordered>
+                <template #header>
+                    <div class="redTitle" @click="goDq">转型金融贷前计算器</div>
+                </template>
+                <xt-chart :option="option"></xt-chart>
+                <t-table
+                    row-key="key"
+                    :data="tableData"
+                    :columns="columns"
+                    lazy-load
+                    @active-change="onActiveChange"
+                    ></t-table>
             </t-card>
         </t-col>
-        <t-col :span="3">
-            <t-card hoverShadow class="bigNav" @click="goDh">
-                双碳贷后计算器
+        <t-col :flex="3">
+            <t-card hoverShadow header-bordered>
+                <template #header>
+                    <div class="redTitle" @click="goDq">转型金融贷后计算器</div>
+                </template>
+                <div class="bigNav">暂未开放</div>
             </t-card>
         </t-col>
     </t-row>
 </template>
 <script setup>
 import router from '@/router'
+import { ref, onMounted } from 'vue'
+import xtChart from "@/components/xtChart/index.vue";
+
 const goDq = () => {
     router.push('/dq')
 }
 const goDh = () => {
     router.push('/dh')
 }
+const option = {
+  title: {
+    text: '核算雷达图'
+  },
+  radar: {
+    center: ['50%', '55%'],
+    // shape: 'circle',
+    indicator: [
+      { name: '技术路径', max: 35 },
+      { name: '碳排放', max: 20 },
+      { name: '企业碳治理', max: 10 },
+      { name: '融资计划', max: 10 },
+      { name: '社会与治理协同效益', max: 10 },
+      { name: '数字化与智能化水平', max: 8 },
+      { name: '环境协同效益', max: 7 }
+    ],
+    axisName: {
+      formatter: function(value, indicator) {
+        return `${value}\n(${indicator.max})`;
+      }
+    }
+  },
+  series: []
+};
+
+const tableData = [
+    {"pf": "低于10%及以上", "score": "80~100", "level": "领先"},
+    {"pf": "低于5%（含）~0%", "score": "60~79", "level": "良好"},
+    {"pf": "低于0~5%", "score": "30~59", "level": "一般"},
+    {"pf": "高于", "score": "0~29", "level": "较差"}
+];
+const columns = [
+  { colKey: 'pf', title: '项目碳排放量', width: '300' },
+  { colKey: 'score', title: '企业分值区间' },
+  { colKey: 'level', title: '企业/项目等级', ellipsis: true }
+];
 </script>
 <style scoped>
 .bigNav {
@@ -31,4 +83,10 @@ const goDh = () => {
     align-items: center;
     justify-content: center;
 }
+.redTitle {
+    color: var(--td-brand-color);
+    font-size: 20px;
+    font-weight: 500;
+    cursor: pointer;
+}
 </style>