vue2-client 1.22.21 → 1.22.22

package/src/base-client/components/common/XInspectionDetailDrawer/components/ImageAnnotationShow.vue

@@ -0,0 +1,1371 @@
+<template>
+  <div class="image-annotation-show" ref="wrapperRef">
+    <template v-show="!fullScreenMode">
+      <!-- 画布区域 -->
+      <div
+        class="canvas-container"
+        ref="imageWrapper"
+        @wheel="handleWheelZoom"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+        @mouseup="handleMouseUp"
+        @mouseleave="handleMouseUp"
+      >
+        <div
+          class="canvas-zoom-wrapper"
+          :style="{ width: canvasWrapperWidth + 'px', height: canvasWrapperHeight + 'px' }"
+        >
+            <div
+              class="canvas-inner"
+              :style="{ transform: `translate(${panOffsetX}px, ${panOffsetY}px) scale(${zoomLevel})` }"
+              :class="{ 'is-panning': isPanning }"
+            >
+            <img
+              ref="annotationImage"
+              :src="imageUrl"
+              @load="handleImageLoad"
+              @error="handleImageError"
+              class="annotation-image"
+              :class="{ 'image-loading': !imageLoaded }"
+              draggable="false"
+              :alt="imageAlt"
+            />
+            <canvas
+              ref="annotationCanvas"
+              class="annotation-canvas-layer"
+              :class="{ 'canvas-hidden': !imageLoaded }"
+              @click="handleCanvasClick"
+            ></canvas>
+          </div>
+        </div>
+      </div>
+      <!-- 全屏按钮 -->
+      <a-tooltip title="全屏预览">
+        <a-button
+          type="primary"
+          icon="fullscreen"
+          class="fullscreen-btn"
+          @click="openFullscreen"
+        />
+      </a-tooltip>
+
+      <!-- 空状态 -->
+      <div v-if="showEmpty && !imageLoaded && !loading" class="canvas-empty">
+        <slot name="empty">
+          <span>暂无图片</span>
+        </slot>
+      </div>
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="canvas-loading">
+        <a-spin size="large" />
+      </div>
+    </template>
+    <!-- 全屏预览 -->
+    <div v-if="isFullscreen" class="fullscreen-preview-wrapper" @wheel.prevent.stop>
+      <!-- 图片预览区域 -->
+      <div
+        class="image-preview-container"
+        ref="fullscreenContainer"
+        @wheel="handleFullscreenWheel"
+        @mousedown="startFullscreenDrag"
+        :class="{ dragging: isFullscreenDragging }"
+        tabindex="0"
+        @keydown="handleFullscreenKeydown"
+      >
+        <div class="image-wrapper" :style="fullscreenWrapperStyle">
+          <div class="image-inner" ref="fullscreenImageWrapper" :style="{ transform: `scale(${fullscreenScale})`, transformOrigin: 'center center' }">
+            <div class="preview-image-wrapper">
+              <img
+                :src="imageUrl"
+                alt="全屏预览图片"
+                class="preview-image"
+                ref="fullscreenImage"
+                @load="handleFullscreenImageLoad"
+              />
+              <canvas
+                ref="fullscreenCanvas"
+                class="fullscreen-canvas"
+                :class="{ 'canvas-hidden': !showAnnotations }"
+              ></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部工具栏 -->
+      <div class="preview-toolbar bottom-toolbar" @wheel.prevent.stop>
+        <div class="toolbar-content">
+          <a-tooltip :title="showAnnotations ? '隐藏标注' : '显示标注'">
+            <a-button
+              type="primary"
+              :icon="showAnnotations ? 'eye-invisible' : 'eye'"
+              @click="toggleAnnotations"
+              size="small"
+              class="toolbar-btn"
+            />
+          </a-tooltip>
+          <div class="toolbar-divider"></div>
+          <a-tooltip title="关闭">
+            <a-button
+              type="primary"
+              icon="close"
+              @click="closeFullscreen"
+              size="small"
+              class="toolbar-btn close-btn"
+            />
+          </a-tooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ImageAnnotationShow',
+  props: {
+    imageUrl: {
+      type: String,
+      default: ''
+    },
+    imageAlt: {
+      type: String,
+      default: '标注图片'
+    },
+    selectedIndex: {
+      type: Number,
+      default: -1
+    },
+    annotations: {
+      type: Array,
+      default: () => []
+    },
+    showEmpty: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 全屏模式
+    fullScreenMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      imageLoaded: false,
+      imageInfo: {},
+      canvas: null,
+      ctx: null,
+      zoomLevel: 1,
+      canvasWrapperWidth: 0,
+      canvasWrapperHeight: 0,
+      localSelectedIndex: -1,
+      panOffsetX: 0,
+      panOffsetY: 0,
+      isPanning: false,
+      panStartX: 0,
+      panStartY: 0,
+      panOriginX: 0,
+      panOriginY: 0,
+      hasJustPanned: false,
+      // 全屏相关
+      isFullscreen: false,
+      showAnnotations: true,
+      fullscreenScale: 1,
+      fullscreenTranslateX: 0,
+      fullscreenTranslateY: 0,
+      isFullscreenDragging: false,
+      fullscreenDragStartX: 0,
+      fullscreenDragStartY: 0
+    }
+  },
+  computed: {
+    fullscreenWrapperStyle() {
+      return {
+        transform: `translate(${this.fullscreenTranslateX}px, ${this.fullscreenTranslateY}px)`,
+        cursor: this.isFullscreenDragging ? 'grabbing' : 'grab'
+      }
+    }
+  },
+  watch: {
+    annotations: {
+      handler() {
+        this.$nextTick(() => this.draw())
+      },
+      deep: true
+    },
+    selectedIndex(val) {
+      this.localSelectedIndex = val
+    },
+    localSelectedIndex() {
+      this.draw()
+    },
+    imageUrl() {
+      this.imageLoaded = false
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleWindowResize)
+    document.addEventListener('keydown', this.handleGlobalKeydown)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleWindowResize)
+    document.removeEventListener('keydown', this.handleGlobalKeydown)
+    document.removeEventListener('mousemove', this.onFullscreenDrag)
+    document.removeEventListener('mouseup', this.endFullscreenDrag)
+  },
+  methods: {
+    handleImageLoad() {
+      this.imageLoaded = true
+      this.$nextTick(() => {
+        this.alignCanvasToImage()
+        const img = this.$refs.annotationImage
+        this.imageInfo = {
+          width: img.naturalWidth,
+          height: img.naturalHeight
+        }
+        this.fitToScreen()
+        this.draw()
+      })
+    },
+
+    handleImageError() {
+      this.imageLoaded = false
+    },
+
+    alignCanvasToImage() {
+      const img = this.$refs.annotationImage
+      const wrapper = this.$refs.imageWrapper
+      const canvas = this.$refs.annotationCanvas
+      if (!img || !wrapper || !canvas) return
+
+      const canvasContainer = canvas.parentElement
+      if (!canvasContainer) return
+
+      const w = img.naturalWidth
+      const h = img.naturalHeight
+
+      canvasContainer.style.width = w + 'px'
+      canvasContainer.style.height = h + 'px'
+      img.style.width = w + 'px'
+      img.style.height = h + 'px'
+
+      canvas.width = w
+      canvas.height = h
+      canvas.style.width = w + 'px'
+      canvas.style.height = h + 'px'
+      canvas.style.position = 'absolute'
+      canvas.style.left = '0'
+      canvas.style.top = '0'
+
+      this.canvas = canvas
+      this.ctx = canvas.getContext('2d')
+      this.updateZoomWrapperSize()
+    },
+
+    updateZoomWrapperSize() {
+      if (!this.canvas) return
+      this.canvasWrapperWidth = this.canvas.width * this.zoomLevel
+      this.canvasWrapperHeight = this.canvas.height * this.zoomLevel
+    },
+
+    handleWindowResize() {
+      if (!this.imageLoaded) return
+      this.alignCanvasToImage()
+      this.draw()
+    },
+
+    fitToScreen() {
+      if (!this.imageLoaded) return
+      const wrapper = this.$refs.imageWrapper
+      const img = this.$refs.annotationImage
+      if (!wrapper || !img) return
+
+      const viewWidth = wrapper.clientWidth
+      const viewHeight = wrapper.clientHeight
+      const imgWidth = img.naturalWidth || img.width
+      const imgHeight = img.naturalHeight || img.height
+
+      const scaleX = (viewWidth / imgWidth) - 0.01
+      const scaleY = (viewHeight / imgHeight) - 0.01
+      this.zoomLevel = Math.min(scaleX, scaleY, 1)
+      this.panOffsetX = 0
+      this.panOffsetY = 0
+      this.updateZoomWrapperSize()
+    },
+
+    handleWheelZoom(e) {
+      if (e.ctrlKey && this.imageLoaded) {
+        e.preventDefault()
+        this.zoomLevel = e.deltaY < 0
+          ? Math.min(3, this.zoomLevel + 0.1)
+          : Math.max(0.3, this.zoomLevel - 0.1)
+        this.updateZoomWrapperSize()
+      }
+    },
+
+    handleMouseDown(e) {
+      if (e.button !== 0) return
+      this.isPanning = true
+      this.panStartX = e.clientX
+      this.panStartY = e.clientY
+      this.panOriginX = this.panOffsetX
+      this.panOriginY = this.panOffsetY
+      this.hasJustPanned = false
+    },
+
+    handleMouseMove(e) {
+      if (!this.isPanning) return
+      const dx = e.clientX - this.panStartX
+      const dy = e.clientY - this.panStartY
+      if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
+        this.hasJustPanned = true
+      }
+      this.panOffsetX = this.panOriginX + dx
+      this.panOffsetY = this.panOriginY + dy
+    },
+
+    handleMouseUp() {
+      this.isPanning = false
+    },
+
+    handleCanvasClick(e) {
+      if (this.hasJustPanned) return
+
+      const pos = this.getMousePosition(e)
+      let hitIndex = -1
+
+      for (let i = this.annotations.length - 1; i >= 0; i--) {
+        const ann = this.annotations[i]
+        const type = this.getAnnotationType(ann)
+        let hit = false
+
+        if (type === 'rect') {
+          hit = this.isPointInRect(pos, ann.box)
+        } else if (type === 'polygon') {
+          hit = this.isPointInPolygon(pos, ann.mask)
+        } else if (type === 'line') {
+          const line = ann.line || { start: ann.points[0], end: ann.points[1] }
+          hit = this.isPointNearLine(pos, line.start, line.end)
+        } else if (type === 'point') {
+          for (const point of this.getPointAnnotations(ann)) {
+            if (this.isPointNearPoint(pos, point)) {
+              hit = true
+              break
+            }
+          }
+        } else if (type === 'hrnet') {
+          hit = this.isPointNearHrnetAnnotation(pos, ann)
+        }
+
+        if (hit) {
+          hitIndex = i
+          break
+        }
+      }
+
+      // 更新选中索引并同步触发重绘
+      this.localSelectedIndex = hitIndex
+      this.draw()
+      this.$emit('update:selectedIndex', hitIndex)
+      this.$emit('select-change', { index: hitIndex, annotation: hitIndex >= 0 ? this.annotations[hitIndex] : null })
+    },
+
+    getMousePosition(e) {
+      const canvasEl = this.$refs.annotationCanvas
+      if (!canvasEl) return { x: 0, y: 0 }
+      const rect = canvasEl.getBoundingClientRect()
+      const scaleX = canvasEl.width / rect.width
+      const scaleY = canvasEl.height / rect.height
+      return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY
+      }
+    },
+
+    isPointInRect(p, box) {
+      return p.x >= box.x && p.x <= box.x + box.width &&
+             p.y >= box.y && p.y <= box.y + box.height
+    },
+
+    isPointInPolygon(p, vertices) {
+      let inside = false
+      for (let i = 0, j = vertices.length - 1; i < vertices.length; j = i++) {
+        const xi = vertices[i].x; const yi = vertices[i].y
+        const xj = vertices[j].x; const yj = vertices[j].y
+        const intersect = ((yi > p.y) !== (yj > p.y)) &&
+          (p.x < (xj - xi) * (p.y - yi) / (yj - yi) + xi)
+        if (intersect) inside = !inside
+      }
+      return inside
+    },
+
+    isPointNearLine(p, start, end, threshold = 8) {
+      const A = p.x - start.x
+      const B = p.y - start.y
+      const C = end.x - start.x
+      const D = end.y - start.y
+      const dot = A * C + B * D
+      const lenSq = C * C + D * D
+      const param = lenSq !== 0 ? dot / lenSq : -1
+      let xx, yy
+      if (param < 0) { xx = start.x; yy = start.y }
+      else if (param > 1) { xx = end.x; yy = end.y }
+      else { xx = start.x + param * C; yy = start.y + param * D }
+      return Math.sqrt((p.x - xx) ** 2 + (p.y - yy) ** 2) <= threshold
+    },
+
+    isPointNearPoint(p, point, threshold = 10) {
+      return Math.sqrt((p.x - point.x) ** 2 + (p.y - point.y) ** 2) <= threshold
+    },
+
+    // ========== 绘制总入口 ==========
+    draw() {
+      if (!this.ctx || !this.canvas || !this.imageLoaded) return
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+      this.annotations.forEach((ann, index) => {
+        const type = this.getAnnotationType(ann)
+        const isSelected = index === this.localSelectedIndex
+        switch (type) {
+          case 'rect':
+            this.drawRect(ann, index, isSelected)
+            break
+          case 'polygon':
+            this.drawPolygon(ann, index, isSelected)
+            break
+          case 'line':
+            this.drawLine(ann, index, isSelected)
+            break
+          case 'point':
+            this.drawPoint(ann, index, isSelected)
+            break
+          case 'hrnet':
+            this.drawHrnet(ann, index, isSelected)
+            break
+        }
+      })
+      // 调用全屏方法
+      if (this.fullScreenMode) {
+        this.openFullscreen()
+      }
+    },
+
+    getAnnotationType(ann) {
+      if (this.isHrnetAnnotation(ann)) return 'hrnet'
+      if (ann.mask && Array.isArray(ann.mask) && ann.mask.length > 0) return 'polygon'
+      if (ann.points && Array.isArray(ann.points) && ann.points.length >= 2) return 'line'
+      if (ann.line) return 'line'
+      if (ann.type === 'point' || ann.point) return 'point'
+      if (ann.centerline_samples && Array.isArray(ann.centerline_samples) && ann.centerline_samples.length > 0) return 'point'
+      if (ann.box) return 'rect'
+      return 'rect'
+    },
+
+    isHrnetAnnotation(ann) {
+      if (!ann || typeof ann !== 'object') return false
+      if (Array.isArray(ann.centerline) && ann.centerline.length > 0) return true
+      if (Array.isArray(ann.keypoints) && ann.keypoints.length > 0) return true
+      return String(ann.model_type || ann.modelType || '').toLowerCase().includes('hrnet')
+    },
+
+    getPointXY(point) {
+      if (Array.isArray(point)) {
+        return {
+          x: Number(point[0]),
+          y: Number(point[1]),
+          score: Number(point[2] !== undefined && point[2] !== null ? point[2] : 0)
+        }
+      }
+      if (point && typeof point === 'object') {
+        const score = point.score !== undefined && point.score !== null
+          ? point.score
+          : point.s !== undefined && point.s !== null
+            ? point.s
+            : point.confidence !== undefined && point.confidence !== null
+              ? point.confidence
+              : point.value !== undefined && point.value !== null
+                ? point.value
+                : 0
+        return {
+          x: Number(point.x),
+          y: Number(point.y),
+          score: Number(score)
+        }
+      }
+      return { x: NaN, y: NaN, score: 0 }
+    },
+
+    getHrnetCenterlineGroups(ann) {
+      const groups = []
+
+      if (Array.isArray(ann.centerline)) {
+        ann.centerline.forEach(item => {
+          const points = item && Array.isArray(item.points) ? item.points : item
+          if (Array.isArray(points) && points.length > 0) {
+            groups.push(points.map(this.getPointXY).filter(p => Number.isFinite(p.x) && Number.isFinite(p.y)))
+          }
+        })
+      }
+
+      if (Array.isArray(ann.centerline_samples) && ann.centerline_samples.length > 0) {
+        groups.push(ann.centerline_samples.map(this.getPointXY).filter(p => Number.isFinite(p.x) && Number.isFinite(p.y)))
+      }
+
+      return groups.filter(points => points.length > 0)
+    },
+
+    getHrnetKeypoints(ann) {
+      return Array.isArray(ann.keypoints)
+        ? ann.keypoints.map(this.getPointXY).filter(p => Number.isFinite(p.x) && Number.isFinite(p.y))
+        : []
+    },
+
+    isPointNearHrnetAnnotation(pos, ann) {
+      const keypointHit = this.getHrnetKeypoints(ann).some(point => this.isPointNearPoint(pos, point, 14))
+      if (keypointHit) return true
+
+      return this.getHrnetCenterlineGroups(ann).some(points => {
+        return points.some(point => this.isPointNearPoint(pos, point, 10))
+      })
+    },
+
+    getPointAnnotations(ann) {
+      if (ann.point && typeof ann.point === 'object') {
+        return [{ x: Number(ann.point.x), y: Number(ann.point.y) }]
+      }
+      if (Array.isArray(ann.centerline_samples)) {
+        return ann.centerline_samples.map(p => {
+          if (Array.isArray(p)) {
+            return { x: Number(p[0]), y: Number(p[1]) }
+          }
+          return { x: Number(p.x), y: Number(p.y) }
+        }).filter(p => Number.isFinite(p.x) && Number.isFinite(p.y))
+      }
+      return []
+    },
+
+    // ========== 矩形绘制 ==========
+    drawRect(ann, index, isSelected) {
+      const box = ann.box
+      if (!box) return
+
+      if (isSelected) {
+        this.ctx.strokeStyle = '#fa8c16'
+        this.ctx.fillStyle = 'rgba(250, 140, 22, 0.15)'
+        this.ctx.lineWidth = 2.5
+      } else {
+        this.ctx.strokeStyle = '#1890ff'
+        this.ctx.fillStyle = 'rgba(24, 144, 255, 0.08)'
+        this.ctx.lineWidth = 2
+      }
+
+      this.ctx.fillRect(box.x, box.y, box.width, box.height)
+      this.ctx.strokeRect(box.x, box.y, box.width, box.height)
+
+      this.drawLabel(
+        box.x,
+        box.y,
+        `${index + 1}. ${ann.objectName || '未命名'}`,
+        ann.confidence,
+        isSelected
+      )
+    },
+
+    // ========== 多边形绘制 ==========
+    drawPolygon(ann, index, isSelected) {
+      const mask = ann.mask
+      if (!mask || mask.length < 3) return
+
+      if (isSelected) {
+        this.ctx.strokeStyle = '#fa8c16'
+        this.ctx.fillStyle = 'rgba(250, 140, 22, 0.15)'
+        this.ctx.lineWidth = 2.5
+      } else {
+        this.ctx.strokeStyle = '#1890ff'
+        this.ctx.fillStyle = 'rgba(24, 144, 255, 0.08)'
+        this.ctx.lineWidth = 2
+      }
+      this.ctx.lineCap = 'round'
+      this.ctx.lineJoin = 'round'
+
+      this.ctx.beginPath()
+      this.ctx.moveTo(mask[0].x, mask[0].y)
+      for (let i = 1; i < mask.length; i++) {
+        this.ctx.lineTo(mask[i].x, mask[i].y)
+      }
+      this.ctx.closePath()
+      this.ctx.fill()
+      this.ctx.stroke()
+
+      const minX = Math.min(...mask.map(p => p.x))
+      const minY = Math.min(...mask.map(p => p.y))
+      this.drawLabel(
+        minX,
+        minY,
+        `${index + 1}. ${ann.objectName || '未命名'}`,
+        ann.confidence,
+        isSelected
+      )
+    },
+
+    // ========== 线段绘制 ==========
+    drawLine(ann, index, isSelected) {
+      const line = ann.line || (ann.points && ann.points.length >= 2 ? { start: ann.points[0], end: ann.points[1] } : null)
+      if (!line || !line.start || !line.end) return
+
+      const color = isSelected ? '#fa8c16' : '#1890ff'
+      this.ctx.strokeStyle = color
+      this.ctx.fillStyle = color
+      this.ctx.lineWidth = isSelected ? 2.5 : 2
+      this.ctx.lineCap = 'round'
+
+      this.ctx.beginPath()
+      this.ctx.moveTo(line.start.x, line.start.y)
+      this.ctx.lineTo(line.end.x, line.end.y)
+      this.ctx.stroke()
+
+      // 端点
+      ;[line.start, line.end].forEach(p => {
+        this.ctx.beginPath()
+        this.ctx.arc(p.x, p.y, 4, 0, Math.PI * 2)
+        this.ctx.fillStyle = '#ffffff'
+        this.ctx.fill()
+        this.ctx.stroke()
+      })
+
+      const midX = (line.start.x + line.end.x) / 2
+      const midY = (line.start.y + line.end.y) / 2
+      this.drawLabel(
+        midX,
+        midY - 8,
+        `${index + 1}. ${ann.objectName || '线段'}`,
+        ann.confidence,
+        isSelected
+      )
+    },
+
+    // ========== 点绘制 ==========
+    drawPoint(ann, index, isSelected) {
+      const points = this.getPointAnnotations(ann)
+      if (points.length === 0) return
+
+      const radius = isSelected ? 11 : 10        // 热力图点一般稍大
+      const centerAlpha = isSelected ? 0.9 : 0.5 // 中心不透明度
+      const edgeAlpha = 0                         // 边缘完全透明
+
+      points.forEach(p => {
+        const px = p.x
+        const py = p.y
+        if (px === undefined || py === undefined) return
+
+        // 创建径向渐变：内圈到外圈
+        const gradient = this.ctx.createRadialGradient(px, py, 0, px, py, radius)
+        gradient.addColorStop(0, `rgba(255, 60, 60, ${centerAlpha})`)   // 中心红色
+        gradient.addColorStop(1, `rgba(255, 60, 60, ${edgeAlpha})`)      // 边缘透明
+        this.ctx.beginPath()
+        this.ctx.arc(px, py, radius, 0, Math.PI * 2)
+        this.ctx.fillStyle = gradient
+        this.ctx.fill()
+      })
+
+      if (points.length > 0) {
+        const first = points[0]
+        const fx = first.x
+        const fy = first.y
+        if (fx !== undefined && fy !== undefined) {
+          this.drawLabel(
+            fx + 10,
+            fy - 10,
+            `${index + 1}. ${ann.objectName || '点'}`,
+            ann.confidence,
+            isSelected,
+            'red'
+          )
+        }
+      }
+    },
+
+    // ========== HRNet 中心线/关键点绘制 ==========
+    drawHrnet(ann, index, isSelected) {
+      const centerlineGroups = this.getHrnetCenterlineGroups(ann)
+      const keypoints = this.getHrnetKeypoints(ann)
+
+      centerlineGroups.forEach(points => {
+        this.drawHrnetCenterline(points, isSelected)
+      })
+
+      keypoints.forEach((point, pointIndex) => {
+        this.drawHrnetKeypoint(point, pointIndex, isSelected)
+      })
+
+      const firstCenterlineGroup = centerlineGroups.find(points => points.length > 0)
+      const labelPoint = keypoints[0] || (firstCenterlineGroup ? firstCenterlineGroup[0] : null)
+      if (labelPoint) {
+        this.drawLabel(
+          labelPoint.x + 12,
+          labelPoint.y - 12,
+          `${index + 1}. ${ann.objectName || ann.class_name || 'HRNet'}`,
+          ann.confidence,
+          isSelected,
+          'green'
+        )
+      }
+    },
+
+    drawHrnetCenterline(points, isSelected) {
+      const sampledPoints = points.slice(0, 1800)
+
+      if (points.length >= 2) {
+        this.ctx.beginPath()
+        this.ctx.moveTo(points[0].x, points[0].y)
+        for (let i = 1; i < points.length; i++) {
+          this.ctx.lineTo(points[i].x, points[i].y)
+        }
+        this.ctx.strokeStyle = isSelected ? 'rgba(250, 140, 22, 0.65)' : 'rgba(255, 190, 11, 0.32)'
+        this.ctx.lineWidth = isSelected ? 3 : 2
+        this.ctx.lineCap = 'round'
+        this.ctx.lineJoin = 'round'
+        this.ctx.stroke()
+      }
+
+      sampledPoints.forEach(point => {
+        const score = Math.max(0, Math.min(1, Number(point.score || 0)))
+        const radius = Math.max(1.8, 2.4 + score * 5.5) + (isSelected ? 1.2 : 0)
+
+        this.ctx.beginPath()
+        this.ctx.arc(point.x, point.y, radius, 0, Math.PI * 2)
+        this.ctx.fillStyle = score > 0.55
+          ? `rgba(255, 45, 26, ${Math.max(0.18, Math.min(0.58, 0.18 + score * 0.34))})`
+          : `rgba(255, 190, 11, ${Math.max(0.12, Math.min(0.46, 0.12 + score * 0.34))})`
+        this.ctx.fill()
+      })
+    },
+
+    drawHrnetKeypoint(point, index, isSelected) {
+      const score = Math.max(0, Math.min(1, Number(point.score || 0)))
+      const haloRadius = isSelected ? 15 : 13
+      const dotRadius = isSelected ? 7 : 6
+
+      this.ctx.beginPath()
+      this.ctx.arc(point.x, point.y, haloRadius, 0, Math.PI * 2)
+      this.ctx.fillStyle = 'rgba(0, 230, 118, 0.22)'
+      this.ctx.fill()
+
+      this.ctx.beginPath()
+      this.ctx.arc(point.x, point.y, dotRadius, 0, Math.PI * 2)
+      this.ctx.fillStyle = '#00e676'
+      this.ctx.fill()
+      this.ctx.strokeStyle = isSelected ? '#ffffff' : '#06351b'
+      this.ctx.lineWidth = 2
+      this.ctx.stroke()
+
+      const labelText = `#${index + 1} ${(score * 100).toFixed(1)}%`
+      this.ctx.font = 'bold 12px Arial'
+      this.ctx.lineWidth = 3
+      this.ctx.strokeStyle = '#06351b'
+      this.ctx.fillStyle = '#ffffff'
+      this.ctx.strokeText(labelText, point.x + 10, Math.max(14, point.y - 8))
+      this.ctx.fillText(labelText, point.x + 10, Math.max(14, point.y - 8))
+    },
+
+    // ========== 标签绘制 ==========
+    drawLabel(x, y, text, confidence, isSelected, accent) {
+      let labelText = text
+      if (confidence !== undefined && confidence !== null) {
+        labelText += ` (${(confidence * 100).toFixed(1)}%)`
+      }
+
+      const labelPadding = 6
+      const labelHeight = 22
+      this.ctx.font = 'bold 16px Arial'
+      const labelWidth = this.ctx.measureText(labelText).width + labelPadding * 2
+
+      const labelY = y >= labelHeight ? y - labelHeight : y
+      const textY = y >= labelHeight ? y - 7 : y + 15
+
+      if (accent === 'red') {
+        this.ctx.fillStyle = isSelected
+          ? 'rgba(220, 50, 50, 0.6)'
+          : 'rgba(200, 60, 60, 0.5)'
+        this.ctx.strokeStyle = isSelected ? '#ff3333' : '#cc4444'
+      } else if (accent === 'green') {
+        this.ctx.fillStyle = isSelected
+          ? 'rgba(0, 170, 92, 0.65)'
+          : 'rgba(0, 170, 92, 0.5)'
+        this.ctx.strokeStyle = isSelected ? '#00e676' : '#00aa5c'
+      } else {
+        this.ctx.fillStyle = isSelected ? 'rgba(250, 140, 22, 0.5)' : 'rgba(24, 144, 255, 0.5)'
+        this.ctx.strokeStyle = isSelected ? '#fa8c16' : '#1890ff'
+      }
+      this.ctx.lineWidth = 1
+      this.ctx.fillRect(x, labelY, labelWidth, labelHeight)
+      this.ctx.strokeRect(x, labelY, labelWidth, labelHeight)
+      this.ctx.fillStyle = '#ffffff'
+      this.ctx.fillText(labelText, x + labelPadding, textY)
+    },
+
+    // ========== 全屏相关方法 ==========
+    openFullscreen() {
+      this.isFullscreen = true
+      this.showAnnotations = true
+      this.fullscreenScale = 1
+      this.fullscreenTranslateX = 0
+      this.fullscreenTranslateY = 0
+      this.$nextTick(() => {
+        this.initFullscreenSize()
+        this.focusFullscreenContainer()
+      })
+    },
+    initFullscreenSize() {
+      const container = this.$refs.fullscreenContainer
+      if (!container) return
+
+      const containerWidth = container.clientWidth
+      const containerHeight = container.clientHeight
+      const img = this.$refs.fullscreenImage
+
+      if (!img || !img.naturalWidth) return
+
+      const maxW = containerWidth * 0.9
+      const maxH = containerHeight * 0.9
+      const scaleX = maxW / img.naturalWidth
+      const scaleY = maxH / img.naturalHeight
+      const fitScale = Math.min(scaleX, scaleY, 1)
+
+      this.fullscreenScale = fitScale
+    },
+    handleFullscreenImageLoad() {
+      this.$nextTick(() => {
+        this.initFullscreenSize()
+        this.updateFullscreenCanvasSize()
+      })
+    },
+    closeFullscreen() {
+      this.isFullscreen = false
+      this.fullscreenScale = 1
+      this.fullscreenTranslateX = 0
+      this.fullscreenTranslateY = 0
+      this.$emit('closeFullscreen')
+    },
+    updateFullscreenCanvasSize() {
+      const img = this.$refs.fullscreenImage
+      const canvas = this.$refs.fullscreenCanvas
+      if (!img || !canvas) return
+
+      const w = img.naturalWidth || img.width
+      const h = img.naturalHeight || img.height
+
+      if (w === 0 || h === 0) return
+
+      canvas.width = w
+      canvas.height = h
+      canvas.style.width = w + 'px'
+      canvas.style.height = h + 'px'
+
+      this.fullscreenCtx = canvas.getContext('2d')
+      this.drawFullscreenAnnotations()
+    },
+    drawFullscreenAnnotations() {
+      if (!this.fullscreenCtx || !this.$refs.fullscreenCanvas) return
+      const ctx = this.fullscreenCtx
+      const canvas = this.$refs.fullscreenCanvas
+
+      if (!this.showAnnotations) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+        return
+      }
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+      this.annotations.forEach((ann, index) => {
+        const type = this.getAnnotationType(ann)
+        const isSelected = index === this.localSelectedIndex
+        switch (type) {
+          case 'rect':
+            this.drawFullscreenRect(ctx, ann, index, isSelected)
+            break
+          case 'polygon':
+            this.drawFullscreenPolygon(ctx, ann, index, isSelected)
+            break
+          case 'line':
+            this.drawFullscreenLine(ctx, ann, index, isSelected)
+            break
+          case 'point':
+            this.drawFullscreenPoint(ctx, ann, index, isSelected)
+            break
+          case 'hrnet':
+            this.drawFullscreenHrnet(ctx, ann, index, isSelected)
+            break
+        }
+      })
+    },
+    drawFullscreenRect(ctx, ann, index, isSelected) {
+      const box = ann.box
+      if (!box) return
+      if (isSelected) {
+        ctx.strokeStyle = '#fa8c16'
+        ctx.fillStyle = 'rgba(250, 140, 22, 0.15)'
+        ctx.lineWidth = 2.5
+      } else {
+        ctx.strokeStyle = '#1890ff'
+        ctx.fillStyle = 'rgba(24, 144, 255, 0.08)'
+        ctx.lineWidth = 2
+      }
+      ctx.fillRect(box.x, box.y, box.width, box.height)
+      ctx.strokeRect(box.x, box.y, box.width, box.height)
+      this.drawFullscreenLabel(ctx, box.x, box.y, `${index + 1}. ${ann.objectName || '未命名'}`, ann.confidence, isSelected)
+    },
+    drawFullscreenPolygon(ctx, ann, index, isSelected) {
+      const mask = ann.mask
+      if (!mask || mask.length < 3) return
+      if (isSelected) {
+        ctx.strokeStyle = '#fa8c16'
+        ctx.fillStyle = 'rgba(250, 140, 22, 0.15)'
+        ctx.lineWidth = 2.5
+      } else {
+        ctx.strokeStyle = '#1890ff'
+        ctx.fillStyle = 'rgba(24, 144, 255, 0.08)'
+        ctx.lineWidth = 2
+      }
+      ctx.lineCap = 'round'
+      ctx.lineJoin = 'round'
+      ctx.beginPath()
+      ctx.moveTo(mask[0].x, mask[0].y)
+      for (let i = 1; i < mask.length; i++) {
+        ctx.lineTo(mask[i].x, mask[i].y)
+      }
+      ctx.closePath()
+      ctx.fill()
+      ctx.stroke()
+      const minX = Math.min(...mask.map(p => p.x))
+      const minY = Math.min(...mask.map(p => p.y))
+      this.drawFullscreenLabel(ctx, minX, minY, `${index + 1}. ${ann.objectName || '未命名'}`, ann.confidence, isSelected)
+    },
+    drawFullscreenLine(ctx, ann, index, isSelected) {
+      const line = ann.line || (ann.points && ann.points.length >= 2 ? { start: ann.points[0], end: ann.points[1] } : null)
+      if (!line || !line.start || !line.end) return
+      const color = isSelected ? '#fa8c16' : '#1890ff'
+      ctx.strokeStyle = color
+      ctx.fillStyle = color
+      ctx.lineWidth = isSelected ? 2.5 : 2
+      ctx.lineCap = 'round'
+      ctx.beginPath()
+      ctx.moveTo(line.start.x, line.start.y)
+      ctx.lineTo(line.end.x, line.end.y)
+      ctx.stroke()
+      ;[line.start, line.end].forEach(p => {
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, 4, 0, Math.PI * 2)
+        ctx.fillStyle = '#ffffff'
+        ctx.fill()
+        ctx.stroke()
+      })
+      const midX = (line.start.x + line.end.x) / 2
+      const midY = (line.start.y + line.end.y) / 2
+      this.drawFullscreenLabel(ctx, midX, midY - 8, `${index + 1}. ${ann.objectName || '线段'}`, ann.confidence, isSelected)
+    },
+    drawFullscreenPoint(ctx, ann, index, isSelected) {
+      const points = this.getPointAnnotations(ann)
+      if (points.length === 0) return
+      const radius = isSelected ? 11 : 10
+      const centerAlpha = isSelected ? 0.9 : 0.5
+      const edgeAlpha = 0
+      points.forEach(p => {
+        const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, radius)
+        gradient.addColorStop(0, `rgba(255, 60, 60, ${centerAlpha})`)
+        gradient.addColorStop(1, `rgba(255, 60, 60, ${edgeAlpha})`)
+        ctx.beginPath()
+        ctx.arc(p.x, p.y, radius, 0, Math.PI * 2)
+        ctx.fillStyle = gradient
+        ctx.fill()
+      })
+      if (points.length > 0) {
+        const first = points[0]
+        this.drawFullscreenLabel(ctx, first.x + 10, first.y - 10, `${index + 1}. ${ann.objectName || '点'}`, ann.confidence, isSelected, 'red')
+      }
+    },
+    drawFullscreenHrnet(ctx, ann, index, isSelected) {
+      const centerlineGroups = this.getHrnetCenterlineGroups(ann)
+      const keypoints = this.getHrnetKeypoints(ann)
+
+      centerlineGroups.forEach(points => {
+        this.drawFullscreenHrnetCenterline(ctx, points, isSelected)
+      })
+
+      keypoints.forEach((point, pointIndex) => {
+        this.drawFullscreenHrnetKeypoint(ctx, point, pointIndex, isSelected)
+      })
+
+      const firstCenterlineGroup = centerlineGroups.find(points => points.length > 0)
+      const labelPoint = keypoints[0] || (firstCenterlineGroup ? firstCenterlineGroup[0] : null)
+      if (labelPoint) {
+        this.drawFullscreenLabel(ctx, labelPoint.x + 12, labelPoint.y - 12, `${index + 1}. ${ann.objectName || ann.class_name || 'HRNet'}`, ann.confidence, isSelected, 'green')
+      }
+    },
+    drawFullscreenHrnetCenterline(ctx, points, isSelected) {
+      const sampledPoints = points.slice(0, 1800)
+      if (points.length >= 2) {
+        ctx.beginPath()
+        ctx.moveTo(points[0].x, points[0].y)
+        for (let i = 1; i < points.length; i++) {
+          ctx.lineTo(points[i].x, points[i].y)
+        }
+        ctx.strokeStyle = isSelected ? 'rgba(250, 140, 22, 0.65)' : 'rgba(255, 190, 11, 0.32)'
+        ctx.lineWidth = isSelected ? 3 : 2
+        ctx.lineCap = 'round'
+        ctx.lineJoin = 'round'
+        ctx.stroke()
+      }
+      sampledPoints.forEach(point => {
+        const score = Math.max(0, Math.min(1, Number(point.score || 0)))
+        const radius = Math.max(1.8, 2.4 + score * 5.5) + (isSelected ? 1.2 : 0)
+        ctx.beginPath()
+        ctx.arc(point.x, point.y, radius, 0, Math.PI * 2)
+        ctx.fillStyle = score > 0.55
+          ? `rgba(255, 45, 26, ${Math.max(0.18, Math.min(0.58, 0.18 + score * 0.34))})`
+          : `rgba(255, 190, 11, ${Math.max(0.12, Math.min(0.46, 0.12 + score * 0.34))})`
+        ctx.fill()
+      })
+    },
+    drawFullscreenHrnetKeypoint(ctx, point, index, isSelected) {
+      const score = Math.max(0, Math.min(1, Number(point.score || 0)))
+      const haloRadius = isSelected ? 15 : 13
+      const dotRadius = isSelected ? 7 : 6
+      ctx.beginPath()
+      ctx.arc(point.x, point.y, haloRadius, 0, Math.PI * 2)
+      ctx.fillStyle = 'rgba(0, 230, 118, 0.22)'
+      ctx.fill()
+      ctx.beginPath()
+      ctx.arc(point.x, point.y, dotRadius, 0, Math.PI * 2)
+      ctx.fillStyle = '#00e676'
+      ctx.fill()
+      ctx.strokeStyle = isSelected ? '#ffffff' : '#06351b'
+      ctx.lineWidth = 2
+      ctx.stroke()
+      const labelText = `#${index + 1} ${(score * 100).toFixed(1)}%`
+      ctx.font = 'bold 12px Arial'
+      ctx.lineWidth = 3
+      ctx.strokeStyle = '#06351b'
+      ctx.fillStyle = '#ffffff'
+      ctx.strokeText(labelText, point.x + 10, Math.max(14, point.y - 8))
+      ctx.fillText(labelText, point.x + 10, Math.max(14, point.y - 8))
+    },
+    drawFullscreenLabel(ctx, x, y, text, confidence, isSelected, accent) {
+      let labelText = text
+      if (confidence !== undefined && confidence !== null) {
+        labelText += ` (${(confidence * 100).toFixed(1)}%)`
+      }
+      const labelPadding = 6
+      const labelHeight = 22
+      ctx.font = 'bold 16px Arial'
+      const labelWidth = ctx.measureText(labelText).width + labelPadding * 2
+      const labelY = y >= labelHeight ? y - labelHeight : y
+      const textY = y >= labelHeight ? y - 7 : y + 15
+      if (accent === 'red') {
+        ctx.fillStyle = isSelected ? 'rgba(220, 50, 50, 0.6)' : 'rgba(200, 60, 60, 0.5)'
+        ctx.strokeStyle = isSelected ? '#ff3333' : '#cc4444'
+      } else if (accent === 'green') {
+        ctx.fillStyle = isSelected ? 'rgba(0, 170, 92, 0.65)' : 'rgba(0, 170, 92, 0.5)'
+        ctx.strokeStyle = isSelected ? '#00e676' : '#00aa5c'
+      } else {
+        ctx.fillStyle = isSelected ? 'rgba(250, 140, 22, 0.5)' : 'rgba(24, 144, 255, 0.5)'
+        ctx.strokeStyle = isSelected ? '#fa8c16' : '#1890ff'
+      }
+      ctx.lineWidth = 1
+      ctx.fillRect(x, labelY, labelWidth, labelHeight)
+      ctx.strokeRect(x, labelY, labelWidth, labelHeight)
+      ctx.fillStyle = '#ffffff'
+      ctx.fillText(labelText, x + labelPadding, textY)
+    },
+    toggleAnnotations() {
+      this.showAnnotations = !this.showAnnotations
+      if (this.showAnnotations) {
+        this.drawFullscreenAnnotations()
+      } else {
+        const canvas = this.$refs.fullscreenCanvas
+        if (canvas && this.fullscreenCtx) {
+          this.fullscreenCtx.clearRect(0, 0, canvas.width, canvas.height)
+        }
+      }
+    },
+    handleFullscreenWheel(e) {
+      e.preventDefault()
+      const delta = e.deltaY > 0 ? -0.1 : 0.1
+      this.fullscreenScale = Math.min(Math.max(0.3, this.fullscreenScale + delta), 3)
+      requestAnimationFrame(() => {
+        this.updateFullscreenCanvasSize()
+      })
+    },
+    startFullscreenDrag(e) {
+      if (e.button !== 0) return
+      e.preventDefault()
+      this.isFullscreenDragging = true
+      this.fullscreenDragStartX = e.clientX - this.fullscreenTranslateX
+      this.fullscreenDragStartY = e.clientY - this.fullscreenTranslateY
+      document.addEventListener('mousemove', this.onFullscreenDrag)
+      document.addEventListener('mouseup', this.endFullscreenDrag)
+    },
+    onFullscreenDrag(e) {
+      if (!this.isFullscreenDragging) return
+      this.fullscreenTranslateX = e.clientX - this.fullscreenDragStartX
+      this.fullscreenTranslateY = e.clientY - this.fullscreenDragStartY
+    },
+    endFullscreenDrag() {
+      if (!this.isFullscreenDragging) return
+      this.isFullscreenDragging = false
+      document.removeEventListener('mousemove', this.onFullscreenDrag)
+      document.removeEventListener('mouseup', this.endFullscreenDrag)
+    },
+    focusFullscreenContainer() {
+      if (this.$refs.fullscreenContainer) {
+        this.$refs.fullscreenContainer.focus()
+      }
+    },
+    handleFullscreenKeydown(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        this.closeFullscreen()
+      }
+    },
+    handleGlobalKeydown(e) {
+      if (e.key === 'Escape' && this.isFullscreen) {
+        e.preventDefault()
+        e.stopPropagation()
+        this.closeFullscreen()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-annotation-show {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  background: #1a1d24;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 画布容器 */
+.canvas-container {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 5px 0;
+  background: #1a1d24;
+}
+
+.canvas-zoom-wrapper {
+  transition: width 0.15s ease, height 0.15s ease;
+  transform-origin: top left;
+}
+
+.canvas-inner {
+  position: relative;
+  transform-origin: top left;
+  transition: none;
+}
+
+.canvas-inner.is-panning {
+  cursor: grabbing !important;
+}
+
+.annotation-image {
+  display: block;
+  user-select: none;
+  transition: opacity 0.3s ease;
+}
+
+.annotation-image.image-loading {
+  opacity: 0.5;
+}
+
+.annotation-canvas-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+}
+
+.annotation-canvas-layer.canvas-hidden {
+  opacity: 0;
+}
+
+/* 空状态 */
+.canvas-empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #6b7280;
+  font-size: 14px;
+  text-align: center;
+}
+
+/* 加载中 */
+.canvas-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 全屏按钮 */
+.fullscreen-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.4) !important;
+  border-color: rgba(255, 255, 255, 0.2) !important;
+  color: #fff !important;
+  transition: all 0.3s ease;
+}
+
+.fullscreen-btn:hover {
+  background: rgba(0, 0, 0, 0.6) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
+  color: #40a9ff !important;
+}
+
+/* 全屏预览容器 */
+.fullscreen-preview-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  flex-direction: column;
+}
+
+/* 全屏图片预览区域 */
+.fullscreen-preview-wrapper .image-preview-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+  outline: none;
+}
+
+.fullscreen-preview-wrapper .image-preview-container.dragging {
+  cursor: grabbing;
+}
+
+.fullscreen-preview-wrapper .image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.1s ease;
+  will-change: transform;
+}
+
+.fullscreen-preview-wrapper .image-inner {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+  font-size: 0;
+}
+
+.fullscreen-preview-wrapper .preview-image-wrapper {
+  position: relative;
+  display: inline-block;
+  line-height: 0;
+}
+
+.fullscreen-preview-wrapper .preview-image {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.fullscreen-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.fullscreen-canvas.canvas-hidden {
+  opacity: 0;
+}
+
+/* 底部工具栏 */
+.fullscreen-preview-wrapper .bottom-toolbar {
+  position: fixed;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+  z-index: 1011;
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.fullscreen-preview-wrapper .toolbar-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  border-radius: 24px;
+  padding: 10px 20px;
+  pointer-events: auto;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+}
+
+.fullscreen-preview-wrapper .toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0 4px;
+}
+
+.fullscreen-preview-wrapper .toolbar-btn {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  transition: all 0.3s ease;
+}
+
+.fullscreen-preview-wrapper .toolbar-btn:hover {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #40a9ff;
+  transform: translateY(-2px);
+}
+
+.fullscreen-preview-wrapper .toolbar-btn.close-btn:hover {
+  color: #ff4d4f;
+}
+</style>