Merge branch 'employeeScreen' of https://git.sundot.cn/chongqing/chongqing-web into employeeScreen

src/views/portraitManagement/components/PentagonGroup.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="pentagon-group">
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="pentagon-item"
+      :class="{ 'middle': item.isMiddle }"
+    >
+      <svg class="pentagon-svg" viewBox="0 0 300 200" preserveAspectRatio="none">
+        <defs>
+          <linearGradient :id="`bgGradient-${index}`" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" :stop-color="item.bgGradientStart || 'rgba(33,33,58,0.95)'" />
+            <stop offset="100%" :stop-color="item.bgGradientEnd || 'rgba(15,70,250,0.15)'" />
+          </linearGradient>
+          <linearGradient :id="`borderGradient-${index}`" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" :stop-color="item.edgeGradients?.top?.start || '#0f46fa'" />
+            <stop offset="50%" :stop-color="item.edgeGradients?.right?.start || '#bd03fb'" />
+            <stop offset="100%" :stop-color="item.edgeGradients?.bottom?.start || '#7eff7e'" />
+          </linearGradient>
+          <filter :id="`glow-${index}`">
+            <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+            <feMerge>
+              <feMergeNode in="coloredBlur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+        <path
+          :d="getQuadPath(item.vertices, item.isMiddle, index)"
+          :fill="`url(#bgGradient-${index})`"
+        />
+        <path
+          :d="getQuadPath(item.vertices, item.isMiddle, index)"
+          fill="none"
+          :stroke="`url(#borderGradient-${index})`"
+          stroke-width="3"
+          :filter="`url(#glow-${index})`"
+        />
+      </svg>
+      <div class="card-content">
+        <div class="icon-wrapper" :class="{ 'large': item.isMiddle }">
+          <span v-if="item.icon" class="icon-emoji">{{ item.icon }}</span>
+        </div>
+        <div class="text-wrapper">
+          <div class="value">{{ item.value }}</div>
+          <div class="label" v-if="item.label">{{ item.label }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const getVertices = (vertices, isMiddle, index) => {
+  if (vertices) {
+    return vertices
+  } else if (isMiddle) {
+    return {
+      topLeft: { x: 20, y: 0 },
+      topRight: { x: 280, y: 0 },
+      bottomRight: { x: 300, y: 200 },
+      bottomLeft: { x: 0, y: 200 }
+    }
+  } else {
+    if (index === 0) {
+      return {
+        topLeft: { x: 0, y: 0 },
+        topRight: { x: 300, y: 0 },
+        bottomRight: { x: 280, y: 200 },
+        bottomLeft: { x: 0, y: 200 }
+      }
+    } else if (index === 1) {
+      return {
+        topLeft: { x: 20, y: 0 },
+        topRight: { x: 320, y: 0 },
+        bottomRight: { x: 300, y: 200 },
+        bottomLeft: { x: 0, y: 200 }
+      }
+    } else if (index === 3) {
+      return {
+        topLeft: { x: -20, y: 0 },
+        topRight: { x: 300, y: 0 },
+        bottomRight: { x: 320, y: 200 },
+        bottomLeft: { x: 0, y: 200 }
+      }
+    } else {
+      return {
+        topLeft: { x: 20, y: 0 },
+        topRight: { x: 300, y: 0 },
+        bottomRight: { x: 300, y: 200 },
+        bottomLeft: { x: 40, y: 200 }
+      }
+    }
+  }
+}
+
+const getQuadPath = (vertices, isMiddle, index) => {
+  const v = getVertices(vertices, isMiddle, index)
+  return `M ${v.topLeft.x} ${v.topLeft.y} L ${v.topRight.x} ${v.topRight.y} L ${v.bottomRight.x} ${v.bottomRight.y} L ${v.bottomLeft.x} ${v.bottomLeft.y} Z`
+}
+</script>
+
+<style lang="scss" scoped>
+.pentagon-group {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  gap: 0;
+  padding: 20px;
+  position: relative;
+  z-index: 10;
+  width: 100%;
+}
+
+.pentagon-item {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.middle {
+    flex: 1.3;
+    height: 200px;
+    z-index: 5;
+    margin: 0 -5px;
+
+    .card-content {
+      flex-direction: column;
+
+      .icon-wrapper {
+        margin-right: 0;
+        margin-bottom: 15px;
+      }
+
+      .text-wrapper {
+        align-items: center;
+      }
+
+      .value {
+        font-size: 32px;
+      }
+
+      .label {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .pentagon-svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: block;
+    overflow: visible;
+  }
+
+  .card-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 15px 25px;
+    gap: 15px;
+
+    .icon-wrapper {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #0f46fa, #bd03fb);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 0 15px rgba(15, 70, 250, 0.5);
+      flex-shrink: 0;
+
+      &.large {
+        width: 80px;
+        height: 80px;
+      }
+
+      .icon-emoji {
+        font-size: 24px;
+        line-height: 1;
+
+        .large & {
+          font-size: 36px;
+        }
+      }
+    }
+
+    .text-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .value {
+      font-size: 40px;
+      font-weight: bold;
+      color: #fff;
+      text-shadow: 0 0 12px rgba(15, 70, 250, 0.8);
+      line-height: 1;
+    }
+
+    .label {
+      font-size: 14px;
+      color: #a0c4ff;
+      margin-top: 5px;
+    }
+  }
+}
+</style>

src/views/portraitManagement/components/page.vue

@@ -22,10 +22,13 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 .bg {
-  height: 100vh;
   width: 100%;
+  min-height: 100vh;
   position: relative;
   background-image: url('@/assets/dataBigScreen/bg.png');
+  background-repeat: repeat-y;
+  background-size: 100% auto;
+  background-position: top center;
   &::before {
     content: '';
     position: absolute;
@@ -35,12 +38,11 @@ const props = defineProps({
     z-index: 1;
   }
   .page {
-    content: '';
-    position: absolute;
-    inset: 0;
+    position: relative;
     z-index: 2;
     display: flex;
     flex-direction: column;
+    min-height: 100vh;
   }
   .title {
     height: 88px;