1

admin

2026-01-27 f66eee1d038afc05f1a727db256ba5c6818f6fb4

 src/assets/css/index.scss

@@ -6,7 +6,7 @@

/* overwite default */
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
@@ -107,19 +107,43 @@


.inputBackground {
  background: #1B233B;
  background: $input_background;
  border-radius: 12px;
  border: 1px solid rgba(118, 128, 143, 0.1);
  transition: all 0.2s ease;
  
  &:focus {
    border-color: rgba(146, 209, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(146, 209, 255, 0.1);
  }
}

.colorMain {
  color: #1194F7;
  color: #92D1FF;
}

.btnMain {
  background: #1194F7;
  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
    box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
    transform: translateY(-1px);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
  }
}

#cryptos .btnMain {
  background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%)
  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
  box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
}

.leftReturn {
@@ -135,6 +159,37 @@

.text-blue {
  color: $blue;
}

/* Crypto.com 风格辅助类 */
.shadow-card {
  box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
}

.shadow-card-hover {
  box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 6px 24px rgba(146, 209, 255, 0.16);
    transform: translateY(-2px);
  }
}

.gradient-primary {
  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
}

.gradient-text {
  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.border-crypto {
  border: 1px solid rgba(118, 128, 143, 0.1);
  border-radius: 12px;
}

/***************** global use framework *****************/
@@ -257,35 +312,75 @@
  outline: none;
}

/* border radius */
/* border radius - Crypto.com 风格 */
.rounded-sm {
  border-radius: 2px;
}

.rounded {
  border-radius: 4px;
}

.rounded-md {
  border-radius: 6px;
}

.rounded-lg {
.rounded {
  border-radius: 8px;
}

.rounded-xl {
.rounded-md {
  border-radius: 10px;
}

.rounded-lg {
  border-radius: 12px;
}

.rounded-2xl {
.rounded-xl {
  border-radius: 16px;
}

.rounded-2xl {
  border-radius: 20px;
}

.rounded-full {
  border-radius: 9999px;
}

/* 卡片样式 - Crypto.com 风格 */
.card {
  background: $main_background;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
  border: 1px solid rgba(118, 128, 143, 0.1);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
    transform: translateY(-2px);
  }
}

/* 渐变按钮 */
.btn-gradient {
  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
    box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
    transform: translateY(-1px);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
  }
}

/** box-sizing */
.box-border {
  box-sizing: border-box;