新增 智能交易中心模块

src/components/IntelligentModule.vue

@@ -0,0 +1,131 @@
+// 智能交易中心 右侧组件
+<template>
+  <div class="info-box">
+    <ShipInfoCard></ShipInfoCard>
+    <Swiper style="height: 110px; margin: 10px 0"></Swiper>
+    <Radar class="mt10 mb10"></Radar>
+    <TitleLine
+      style="margin-top: 20px"
+      icon="capacity"
+      title="船东&运力价值评级"
+      :type="3"
+      endText="交易建议书"
+    ></TitleLine>
+    <div class="level bar mt10 mb10">
+      <div class="df aic jcsb mb8" v-for="item in levelData" :key="item.bane">
+        <div>{{ item.name }}</div>
+        <div>{{ item.score }}</div>
+        <div>{{ item.level }}</div>
+      </div>
+    </div>
+    <TitleLine
+      style="margin-top: 20px"
+      icon="capacity"
+      title="历史航次"
+    ></TitleLine>
+    <div class="level bar mt10">
+      <div class="df aic jcc" v-for="item in historyData" :key="item.bane">
+        <div>{{ item.loadPort }}</div>
+        <div
+          class="voyage-line"
+          style="
+            box-sizing: border-box;
+            height: 2px;
+            width: 100px;
+            margin: 13px;
+            border: 1px solid #10ffb9;
+          "
+        ></div>
+        <div>{{ item.discPort }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+
+export default {
+  setup() {
+    let levelData = ref([
+      { name: "项目1", score: 80, level: "高" },
+      { name: "项目2", score: 80, level: "高" },
+      { name: "项目3", score: 80, level: "高" },
+      { name: "项目4", score: 80, level: "高" },
+      { name: "项目5", score: 80, level: "高" },
+      { name: "项目6", score: 80, level: "高" },
+      { name: "项目7", score: 80, level: "高" },
+      { name: "项目8", score: 80, level: "高" },
+      { name: "项目9", score: 80, level: "高" },
+      { name: "项目10", score: 80, level: "高" },
+      { name: "项目1", score: 80, level: "高" },
+      { name: "项目2", score: 80, level: "高" },
+      { name: "项目3", score: 80, level: "高" },
+      { name: "项目4", score: 80, level: "高" },
+      { name: "项目5", score: 80, level: "高" },
+      { name: "项目6", score: 80, level: "高" },
+      { name: "项目7", score: 80, level: "高" },
+      { name: "项目8", score: 80, level: "高" },
+      { name: "项目9", score: 80, level: "高" },
+      { name: "项目10", score: 80, level: "高" },
+    ]);
+    let historyData = ref([
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+      { loadPort: "上海", discPort: "青岛" },
+    ]);
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+      levelData,
+      historyData,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.level {
+  height: 100px;
+  padding: 0 30px 0 20px;
+  overflow: scroll;
+  overflow-x: hidden;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #e6f7ff;
+}
+
+.bar::-webkit-scrollbar-track {
+  background: #2f4966;
+  border-radius: 5px;
+}
+
+.bar::-webkit-scrollbar {
+  width: 5px;
+  background: blue;
+  border-radius: 5px;
+}
+
+.bar::-webkit-scrollbar-thumb {
+  background: #10ffb9;
+  border-radius: 5px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+</style>