Просмотр исходного кода

💄 style(supply-chain): 优化图片展示区箭头按钮样式与定位

- 修改MultipleImageDisplay中箭头容器定位: 将absolute改为fixed并调整top值至288.72px,优化视觉布局
- 重构RightArrow组件结构: 简化SVG代码,合并多个三角形元素为单个SVG,移除冗余的defs和linearGradient定义
- 移除RightArrow中relative定位属性,简化按钮样式类定义
yourname 2 месяцев назад
Родитель
Сommit
4b0b63542e

+ 1 - 1
src/client/home/pages/SupplyChainDashboards/components/MultipleImageDisplay.tsx

@@ -36,7 +36,7 @@ const MultipleImageDisplay: React.FC<MultipleImageDisplayProps> = ({ imageUrls,
       {/* 左右箭头按钮 */}
       <div
         data-layer="按钮"
-        className="absolute w-[1510px] left-1/2 top-[545.72px] transform -translate-x-1/2 inline-flex justify-between items-center"
+        className="fixed w-[1510px] left-1/2 top-[288.72px] transform -translate-x-1/2 inline-flex justify-between items-center"
       >
         {/* 左箭头 */}
         <LeftArrow

+ 6 - 74
src/client/home/pages/SupplyChainDashboards/components/RightArrow.tsx

@@ -9,82 +9,14 @@ interface RightArrowProps {
 const RightArrow: React.FC<RightArrowProps> = ({ themeColor, onClick, className = '' }) => {
   return (
     <button
-      className={`size-20 relative cursor-pointer hover:opacity-80 transition-opacity ${className}`}
+      className={`size-20 cursor-pointer hover:opacity-80 transition-opacity ${className}`}
       onClick={onClick}
     >
-      {/* 背景矩形 */}
-      <div className="left-0 top-0 absolute">
-        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M80 0V80H0V0H80Z"
-            fill="black"
-            fillOpacity="0.0117647"
-          />
-        </svg>
-      </div>
-
-      {/* 第一个三角形 */}
-      <div className="left-[40.62px] top-[16.70px] absolute">
-        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z"
-            fill={`url(#paint0_linear_right_arrow)`}
-            stroke={`url(#paint1_linear_right_arrow)`}
-            strokeWidth="1.14286"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_right_arrow"
-              x1="23.9121"
-              y1="47.8244"
-              x2="-0.000147684"
-              y2="47.8244"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor={themeColor} />
-              <stop offset="1" stopColor="#7C5101" />
-            </linearGradient>
-            <linearGradient
-              id="paint1_linear_right_arrow"
-              x1="23.9121"
-              y1="47.8244"
-              x2="-0.000147684"
-              y2="47.8244"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor={themeColor} />
-              <stop offset="1" stopColor="#7C5101" />
-            </linearGradient>
-          </defs>
-        </svg>
-      </div>
-
-      {/* 第二个三角形 */}
-      <div className="left-[16.70px] top-[16.70px] absolute">
-        <svg width="24" height="48" viewBox="0 0 24 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M1.10742 1.91602L3.9375 12.4355C5.95979 19.9527 5.95979 27.8715 3.9375 35.3887L1.10742 45.9092L23.1035 23.9121L1.10742 1.91602Z"
-            fill={themeColor}
-            stroke={`url(#paint0_linear_right_arrow2)`}
-            strokeWidth="1.14286"
-          />
-          <defs>
-            <linearGradient
-              id="paint0_linear_right_arrow2"
-              x1="23.9121"
-              y1="47.8244"
-              x2="-0.000145777"
-              y2="47.8244"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stopColor={themeColor} />
-              <stop offset="1" stopColor="#7C5101" />
-            </linearGradient>
-          </defs>
-        </svg>
-      </div>
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M80 0V80H0V0H80Z" fill="black" fill-opacity="0.0117647"/>
+        <path d="M41.7227 18.6196L44.5527 29.1392C46.575 36.6563 46.575 44.5751 44.5527 52.0923L41.7227 62.6128L63.7187 40.6157L41.7227 18.6196Z" fill={themeColor} stroke={themeColor} stroke-width="1.14286"/>
+        <path d="M17.8105 18.6196L20.6406 29.1392C22.6629 36.6563 22.6629 44.5751 20.6406 52.0923L17.8105 62.6128L39.8066 40.6157L17.8105 18.6196Z" fill={themeColor} stroke={themeColor} stroke-width="1.14286"/>
+      </svg>
     </button>
   );
 };