youlegames/codes/minipro/calculation/miniprogram/pages/index/index.wxss

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #EBF4F8; /* Color 03 */
}
.scrollarea {
  flex: 1;
}

.container {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* 顶部背景区 */
.header-bg {
  width: 100%;
  height: 340rpx; /* Adjusted height */
  background: #11616B; /* Color 01 - Solid Color */
  border-bottom-left-radius: 0; /* Removed radius as requested */
  border-bottom-right-radius: 0; /* Removed radius as requested */
  padding: 40rpx;
  padding-top: 100rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-shadow: 0 4rpx 12rpx rgba(17, 97, 107, 0.15);
  position: relative;
  overflow: hidden;
}

/* Removed ::after pseudo-element to remove the large transparent circle */

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  height: auto;
  position: relative; 
  z-index: 2; 
}

.text-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8rpx;
}

.greeting {
  color: rgba(255, 255, 255, 0.9);
  font-size: 28rpx;
  font-weight: 500;
}

.nickname {
  color: #ffffff;
  font-size: 48rpx;
  font-weight: 700;
  letter-spacing: 2rpx;
}

.avatar-wrapper {
  padding: 6rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(4rpx);
  display: flex; /* Flex to center content */
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
  border: 4rpx solid #ffffff;
  display: block; /* Remove inline spacing */
}

/* 主要内容区 */
.main-content {
  flex: 1;
  width: 100%;
  padding: 0 28rpx;
  box-sizing: border-box;
  margin-top: 20rpx; /* Separated layout */
  z-index: 10;
  padding-bottom: 60rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #2d3436;
  margin-left: 10rpx;
  margin-bottom: 20rpx;
  display: none;
}

/* 卡片列表 */
.grid-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 单个卡片 */
.grid-item {
  background-color: #ffffff;
  border-radius: 28rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 12rpx 36rpx rgba(17, 97, 107, 0.20); /* Increased shadow opacity and size for better contrast */
}

.grid-item-hover {
  transform: scale(0.97);
  background-color: #EBF4F8; /* Color 03 hover */
}

.icon-box {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 28rpx;
  flex-shrink: 0;
}

.icon {
  font-size: 46rpx;
  color: #11616B; /* Icon color dark teal */
}

.bg-gradient-blue { 
  background: #EBF4F8; /* Color 03 */
}
.bg-gradient-pink { 
  background: #FED9CD; /* Color 04 */
}
.bg-gradient-green { 
  background: #7BBDB6; /* Color 02 */
}
.bg-gradient-orange { 
  background: #FED9CD; /* Color 04 */
}
.bg-gradient-purple { 
  background: #DC8B70; /* Color 05 */
}

.text-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.label {
  font-size: 32rpx;
  color: #2d3436;
  font-weight: 700;
  margin-bottom: 6rpx;
}

.sub-label {
  font-size: 23rpx;
  color: #b2bec3;
  font-weight: 500;
}

/* Banner */
.banner {
  margin-top: 30rpx;
  background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  border-radius: 28rpx;
  padding: 28rpx 36rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 12rpx 32rpx rgba(108, 92, 231, 0.3);
}

.banner-text {
  display: flex;
  flex-direction: column;
}

.banner-title {
  color: #fff;
  font-weight: 700;
  font-size: 30rpx;
  margin-bottom: 8rpx;
}

.banner-desc {
  color: rgba(255,255,255,0.8);
  font-size: 24rpx;
}

.banner-icon {
  font-size: 40rpx;
}

/* 箭头 */
.arrow-icon {
  margin-left: auto;
  font-size: 40rpx;
  color: #ddd;
  font-weight: 300;
  flex-shrink: 0;
  padding-left: 12rpx;
}

/* 功能亮点区 */
.feature-highlights {
  margin-top: 24rpx;
  background: #ffffff;
  border-radius: 28rpx;
  padding: 32rpx 36rpx;
  box-shadow: 0 8rpx 32rpx rgba(108, 92, 231, 0.08);
}

.highlight-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #2d3436;
  margin-bottom: 20rpx;
  letter-spacing: 1rpx;
}

.highlight-list {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 14rpx;
  font-size: 25rpx;
  color: #636e72;
  font-weight: 500;
}

.highlight-dot {
  font-size: 14rpx;
  color: #6c5ce7;
}

/* 列表容器 */
.list-container {
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(17, 97, 107, 0.08);
}

.list-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #ffffff;
  transition: background-color 0.1s;
}

.list-item-hover {
  background-color: #f9f9f9;
}

.list-icon-box {
  width: 56rpx;
  height: 56rpx;
  background-color: #EBF4F8;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.icon-small {
  font-size: 32rpx;
}

.list-label {
  flex: 1;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.section-title {
  display: block !important; /* Ensure visibility */
  font-size: 28rpx;
  color: #999;
  margin-bottom: 20rpx;
  margin-left: 10rpx;
  font-weight: 500;
}