wui-components-v2 1.1.70 → 1.1.71

package/components/wui-menus1/wui-menus-top1.vue

@@ -1,398 +1,398 @@
-<template>
-  <view class="banner-container">
-    <view class="banner-wrapper">
-      <!-- 热门标签 -->
-      <view class="banner-badge">
-        <text class="i-carbon:fire text-xs" />
-        <text class="badge-text">
-          热门
-        </text>
-      </view>
-
-      <!-- 图片区域 -->
-      <view class="banner-image-wrapper">
-        <image
-          src="../../imgs/homeLog.png"
-          class="banner-image"
-          mode="aspectFill"
-        />
-        <view class="banner-gradient-overlay" />
-      </view>
-
-      <!-- 内容区域 -->
-      <view class="banner-content">
-        <view class="content-header">
-          <text class="banner-title">
-            数字化办公平台
-          </text>
-          <view class="banner-tags">
-            <text class="tag">
-              高效
-            </text>
-            <text class="tag">
-              智能
-            </text>
-            <text class="tag">
-              协同
-            </text>
-          </view>
-        </view>
-        <text class="banner-describe">
-          一站式企业数字化解决方案，助力团队高效协作
-        </text>
-
-        <!-- 快捷入口 -->
-        <view class="banner-actions">
-          <view class="primary action-btn">
-            <text class="i-carbon:arrow-right text-sm" />
-            <text class="btn-text">
-              立即体验
-            </text>
-          </view>
-          <view class="action-btn secondary">
-            <text class="i-carbon:information text-sm" />
-            <text class="btn-text">
-              了解更多
-            </text>
-          </view>
-        </view>
-      </view>
-
-      <!-- 装饰元素 -->
-      <view class="banner-decoration">
-        <view class="deco-circle c1" />
-        <view class="deco-circle c2" />
-        <view class="deco-line" />
-      </view>
-    </view>
-
-    <!-- 指示器 -->
-    <view class="banner-indicators">
-      <view class="indicator active" />
-      <view class="indicator" />
-      <view class="indicator" />
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.banner-container {
-  padding: 24rpx 0 24rpx 0;
-  animation: fadeInUp 0.7s ease-out;
-}
-
-.banner-wrapper {
-  position: relative;
-  border-radius: 28rpx;
-  overflow: hidden;
-  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
-  box-shadow:
-    0 12rpx 40rpx rgba(0, 0, 0, 0.08),
-    0 4rpx 12rpx rgba(0, 0, 0, 0.04),
-    inset 0 1rpx 0 rgba(255, 255, 255, 1);
-  border: 1rpx solid rgba(0, 0, 0, 0.04);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.banner-wrapper:active {
-  transform: translateY(-2rpx) scale(0.995);
-  box-shadow:
-    0 16rpx 48rpx rgba(0, 0, 0, 0.1),
-    0 6rpx 16rpx rgba(0, 0, 0, 0.06);
-}
-
-// 热门标签
-.banner-badge {
-  position: absolute;
-  top: 20rpx;
-  left: 20rpx;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-  padding: 8rpx 16rpx;
-  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-  border-radius: 20rpx;
-  color: #fff;
-  font-size: 20rpx;
-  font-weight: 600;
-  box-shadow:
-    0 4rpx 12rpx rgba(239, 68, 68, 0.35),
-    inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
-  animation: pulseBadge 2s ease-in-out infinite;
-}
-
-.badge-text {
-  font-size: 20rpx;
-}
-
-// 图片区域
-.banner-image-wrapper {
-  position: relative;
-  height: 200rpx;
-  overflow: hidden;
-}
-
-.banner-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.5s ease;
-}
-
-.banner-wrapper:active .banner-image {
-  transform: scale(1.02);
-}
-
-.banner-gradient-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.1) 0%,
-    rgba(0, 0, 0, 0) 40%,
-    rgba(0, 0, 0, 0.02) 100%
-  );
-  pointer-events: none;
-}
-
-// 内容区域
-.banner-content {
-  padding: 24rpx;
-}
-
-.content-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12rpx;
-}
-
-.banner-title {
-  font-size: 32rpx;
-  font-weight: 700;
-  color: #1f2937;
-  letter-spacing: 0.02em;
-}
-
-.banner-tags {
-  display: flex;
-  gap: 8rpx;
-}
-
-.tag {
-  padding: 4rpx 12rpx;
-  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
-  color: #3b82f6;
-  font-size: 18rpx;
-  font-weight: 600;
-  border-radius: 12rpx;
-  border: 1rpx solid rgba(59, 130, 246, 0.2);
-}
-
-.banner-describe {
-  font-size: 24rpx;
-  color: #6b7280;
-  line-height: 1.5;
-  margin-bottom: 20rpx;
-  display: block;
-}
-
-// 快捷入口
-.banner-actions {
-  display: flex;
-  gap: 16rpx;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 8rpx;
-  padding: 12rpx 20rpx;
-  border-radius: 24rpx;
-  font-size: 24rpx;
-  font-weight: 500;
-  transition: all 0.2s ease;
-
-  &.primary {
-    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-    color: #fff;
-    box-shadow:
-      0 4rpx 16rpx rgba(59, 130, 246, 0.35),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
-
-    &:active {
-      transform: scale(0.96);
-      box-shadow:
-        0 2rpx 8rpx rgba(59, 130, 246, 0.25);
-    }
-  }
-
-  &.secondary {
-    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-    color: #4b5563;
-    border: 1rpx solid rgba(0, 0, 0, 0.06);
-
-    &:active {
-      transform: scale(0.96);
-      background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
-    }
-  }
-}
-
-.btn-text {
-  font-size: 24rpx;
-}
-
-// 装饰元素
-.banner-decoration {
-  position: absolute;
-  top: 20rpx;
-  right: 20rpx;
-  width: 80rpx;
-  height: 80rpx;
-  pointer-events: none;
-}
-
-.deco-circle {
-  position: absolute;
-  border-radius: 50%;
-  border: 2rpx solid rgba(59, 130, 246, 0.2);
-
-  &.c1 {
-    width: 60rpx;
-    height: 60rpx;
-    top: 0;
-    right: 0;
-    animation: rotate 10s linear infinite;
-  }
-
-  &.c2 {
-    width: 36rpx;
-    height: 36rpx;
-    top: 20rpx;
-    right: 20rpx;
-    animation: rotate 8s linear infinite reverse;
-  }
-}
-
-.deco-line {
-  position: absolute;
-  width: 2rpx;
-  height: 40rpx;
-  background: linear-gradient(180deg, rgba(59, 130, 246, 0.3), transparent);
-  top: 30rpx;
-  right: 30rpx;
-  transform: rotate(45deg);
-}
-
-// 指示器
-.banner-indicators {
-  display: flex;
-  justify-content: center;
-  gap: 12rpx;
-  margin-top: 20rpx;
-}
-
-.indicator {
-  width: 8rpx;
-  height: 8rpx;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-
-  &.active {
-    width: 24rpx;
-    border-radius: 4rpx;
-    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-    box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.4);
-  }
-}
-
-// 动画
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(24rpx);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes pulseBadge {
-  0%, 100% {
-    box-shadow:
-      0 4rpx 12rpx rgba(239, 68, 68, 0.35),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
-  }
-  50% {
-    box-shadow:
-      0 6rpx 20rpx rgba(239, 68, 68, 0.5),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// 暗黑模式适配
-:global(.wot-theme-dark) {
-  .banner-wrapper {
-    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
-    border-color: rgba(255, 255, 255, 0.06);
-    box-shadow:
-      0 12rpx 40rpx rgba(0, 0, 0, 0.3),
-      0 4rpx 12rpx rgba(0, 0, 0, 0.2),
-      inset 0 1rpx 0 rgba(255, 255, 255, 0.05);
-  }
-
-  .banner-title {
-    color: #f9fafb;
-  }
-
-  .banner-describe {
-    color: #9ca3af;
-  }
-
-  .tag {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
-    border-color: rgba(59, 130, 246, 0.3);
-    color: #60a5fa;
-  }
-
-  .action-btn {
-    &.secondary {
-      background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
-      color: #d1d5db;
-      border-color: rgba(255, 255, 255, 0.08);
-
-      &:active {
-        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
-      }
-    }
-  }
-
-  .indicator {
-    background: rgba(255, 255, 255, 0.15);
-  }
-
-  .deco-circle {
-    border-color: rgba(96, 165, 250, 0.3);
-  }
-
-  .deco-line {
-    background: linear-gradient(180deg, rgba(96, 165, 250, 0.4), transparent);
-  }
-}
-</style>
+<template>
+  <view class="banner-container">
+    <view class="banner-wrapper">
+      <!-- 热门标签 -->
+      <view class="banner-badge">
+        <text class="i-carbon:fire text-xs" />
+        <text class="badge-text">
+          热门
+        </text>
+      </view>
+
+      <!-- 图片区域 -->
+      <view class="banner-image-wrapper">
+        <image
+          src="../../imgs/homeLog.png"
+          class="banner-image"
+          mode="aspectFill"
+        />
+        <view class="banner-gradient-overlay" />
+      </view>
+
+      <!-- 内容区域 -->
+      <view class="banner-content">
+        <view class="content-header">
+          <text class="banner-title">
+            数字化办公平台
+          </text>
+          <view class="banner-tags">
+            <text class="tag">
+              高效
+            </text>
+            <text class="tag">
+              智能
+            </text>
+            <text class="tag">
+              协同
+            </text>
+          </view>
+        </view>
+        <text class="banner-describe">
+          一站式企业数字化解决方案，助力团队高效协作
+        </text>
+
+        <!-- 快捷入口 -->
+        <view class="banner-actions">
+          <view class="primary action-btn">
+            <text class="i-carbon:arrow-right text-sm" />
+            <text class="btn-text">
+              立即体验
+            </text>
+          </view>
+          <view class="action-btn secondary">
+            <text class="i-carbon:information text-sm" />
+            <text class="btn-text">
+              了解更多
+            </text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 装饰元素 -->
+      <view class="banner-decoration">
+        <view class="deco-circle c1" />
+        <view class="deco-circle c2" />
+        <view class="deco-line" />
+      </view>
+    </view>
+
+    <!-- 指示器 -->
+    <view class="banner-indicators">
+      <view class="indicator active" />
+      <view class="indicator" />
+      <view class="indicator" />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.banner-container {
+  padding: 24rpx 0 24rpx 0;
+  animation: fadeInUp 0.7s ease-out;
+}
+
+.banner-wrapper {
+  position: relative;
+  border-radius: 28rpx;
+  overflow: hidden;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  box-shadow:
+    0 12rpx 40rpx rgba(0, 0, 0, 0.08),
+    0 4rpx 12rpx rgba(0, 0, 0, 0.04),
+    inset 0 1rpx 0 rgba(255, 255, 255, 1);
+  border: 1rpx solid rgba(0, 0, 0, 0.04);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.banner-wrapper:active {
+  transform: translateY(-2rpx) scale(0.995);
+  box-shadow:
+    0 16rpx 48rpx rgba(0, 0, 0, 0.1),
+    0 6rpx 16rpx rgba(0, 0, 0, 0.06);
+}
+
+// 热门标签
+.banner-badge {
+  position: absolute;
+  top: 20rpx;
+  left: 20rpx;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 16rpx;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border-radius: 20rpx;
+  color: #fff;
+  font-size: 20rpx;
+  font-weight: 600;
+  box-shadow:
+    0 4rpx 12rpx rgba(239, 68, 68, 0.35),
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
+  animation: pulseBadge 2s ease-in-out infinite;
+}
+
+.badge-text {
+  font-size: 20rpx;
+}
+
+// 图片区域
+.banner-image-wrapper {
+  position: relative;
+  height: 200rpx;
+  overflow: hidden;
+}
+
+.banner-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.banner-wrapper:active .banner-image {
+  transform: scale(1.02);
+}
+
+.banner-gradient-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.1) 0%,
+    rgba(0, 0, 0, 0) 40%,
+    rgba(0, 0, 0, 0.02) 100%
+  );
+  pointer-events: none;
+}
+
+// 内容区域
+.banner-content {
+  padding: 24rpx;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12rpx;
+}
+
+.banner-title {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: #1f2937;
+  letter-spacing: 0.02em;
+}
+
+.banner-tags {
+  display: flex;
+  gap: 8rpx;
+}
+
+.tag {
+  padding: 4rpx 12rpx;
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+  color: #3b82f6;
+  font-size: 18rpx;
+  font-weight: 600;
+  border-radius: 12rpx;
+  border: 1rpx solid rgba(59, 130, 246, 0.2);
+}
+
+.banner-describe {
+  font-size: 24rpx;
+  color: #6b7280;
+  line-height: 1.5;
+  margin-bottom: 20rpx;
+  display: block;
+}
+
+// 快捷入口
+.banner-actions {
+  display: flex;
+  gap: 16rpx;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 12rpx 20rpx;
+  border-radius: 24rpx;
+  font-size: 24rpx;
+  font-weight: 500;
+  transition: all 0.2s ease;
+
+  &.primary {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    color: #fff;
+    box-shadow:
+      0 4rpx 16rpx rgba(59, 130, 246, 0.35),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
+
+    &:active {
+      transform: scale(0.96);
+      box-shadow:
+        0 2rpx 8rpx rgba(59, 130, 246, 0.25);
+    }
+  }
+
+  &.secondary {
+    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+    color: #4b5563;
+    border: 1rpx solid rgba(0, 0, 0, 0.06);
+
+    &:active {
+      transform: scale(0.96);
+      background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
+    }
+  }
+}
+
+.btn-text {
+  font-size: 24rpx;
+}
+
+// 装饰元素
+.banner-decoration {
+  position: absolute;
+  top: 20rpx;
+  right: 20rpx;
+  width: 80rpx;
+  height: 80rpx;
+  pointer-events: none;
+}
+
+.deco-circle {
+  position: absolute;
+  border-radius: 50%;
+  border: 2rpx solid rgba(59, 130, 246, 0.2);
+
+  &.c1 {
+    width: 60rpx;
+    height: 60rpx;
+    top: 0;
+    right: 0;
+    animation: rotate 10s linear infinite;
+  }
+
+  &.c2 {
+    width: 36rpx;
+    height: 36rpx;
+    top: 20rpx;
+    right: 20rpx;
+    animation: rotate 8s linear infinite reverse;
+  }
+}
+
+.deco-line {
+  position: absolute;
+  width: 2rpx;
+  height: 40rpx;
+  background: linear-gradient(180deg, rgba(59, 130, 246, 0.3), transparent);
+  top: 30rpx;
+  right: 30rpx;
+  transform: rotate(45deg);
+}
+
+// 指示器
+.banner-indicators {
+  display: flex;
+  justify-content: center;
+  gap: 12rpx;
+  margin-top: 20rpx;
+}
+
+.indicator {
+  width: 8rpx;
+  height: 8rpx;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+
+  &.active {
+    width: 24rpx;
+    border-radius: 4rpx;
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.4);
+  }
+}
+
+// 动画
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseBadge {
+  0%, 100% {
+    box-shadow:
+      0 4rpx 12rpx rgba(239, 68, 68, 0.35),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
+  }
+  50% {
+    box-shadow:
+      0 6rpx 20rpx rgba(239, 68, 68, 0.5),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// 暗黑模式适配
+:global(.wot-theme-dark) {
+  .banner-wrapper {
+    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
+    border-color: rgba(255, 255, 255, 0.06);
+    box-shadow:
+      0 12rpx 40rpx rgba(0, 0, 0, 0.3),
+      0 4rpx 12rpx rgba(0, 0, 0, 0.2),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .banner-title {
+    color: #f9fafb;
+  }
+
+  .banner-describe {
+    color: #9ca3af;
+  }
+
+  .tag {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
+    border-color: rgba(59, 130, 246, 0.3);
+    color: #60a5fa;
+  }
+
+  .action-btn {
+    &.secondary {
+      background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
+      color: #d1d5db;
+      border-color: rgba(255, 255, 255, 0.08);
+
+      &:active {
+        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
+      }
+    }
+  }
+
+  .indicator {
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .deco-circle {
+    border-color: rgba(96, 165, 250, 0.3);
+  }
+
+  .deco-line {
+    background: linear-gradient(180deg, rgba(96, 165, 250, 0.4), transparent);
+  }
+}
+</style>