first commit

src/components/Remark.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class=" m-4">
+        <div class="flex items-center">
+            <img src="@/assets/images/report/wxts_icon.png" alt="温馨提示" class="tips-icon" />
+            <span class="tips-title">温馨提示!</span>
+        </div>
+        <div class="mt-1 ml-4">
+            <van-text-ellipsis rows="2" :content="content" expand-text="展开" collapse-text="收起" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue';
+
+const props = defineProps({
+    content: {
+        type: String,
+        required: true
+    }
+});
+
+const isExpanded = ref(false);
+</script>
+
+<style scoped>
+.tips-card {
+    background: var(--van-theme-primary-light);
+    border-radius: 8px;
+    padding: 12px;
+}
+
+.tips-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    object-fit: contain;
+}
+
+.tips-title {
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.tips-content {
+    font-size: 14px;
+    color: #333;
+}
+
+/* 连接链条样式 */
+.connection-line {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    right: 0;
+    height: 60px;
+    z-index: 20;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+}
+
+.connection-chain {
+    height: 60px;
+    object-fit: contain;
+}
+
+.connection-chain.left {
+    width: 80px;
+    margin-left: -10px;
+}
+
+.connection-chain.right {
+    width: 80px;
+    margin-right: -10px;
+}
+
+:deep(.van-text-ellipsis) {
+    font-size: 12px;
+    color: #999999;
+}
+</style>
+