Initial commit

wechat-mini-program/pages/profile/profile.wxss

@@ -0,0 +1,206 @@
+.container {
+    min-height: 100vh;
+    background-color: var(--background-color);
+}
+.profile-header {
+    background-color: var(--surface-color);
+    padding: 40rpx 40rpx 100rpx 40rpx;
+    position: relative;
+    margin-bottom: 60rpx;
+}
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 30rpx;
+    justify-content: flex-start; /* Ensure items start from left */
+}
+.avatar-btn {
+    padding: 0;
+    border: none;
+    background: transparent;
+    margin: 0; /* Ensure no auto margin */
+    width: 128rpx !important;
+    height: 128rpx !important;
+    line-height: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0; /* Prevent shrinking */
+}
+.avatar-btn::after {
+    border: none;
+}
+.avatar {
+    width: 128rpx;
+    height: 128rpx;
+    border-radius: 50%;
+    border: 4rpx solid var(--surface-color);
+    box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
+    background-color: #eee;
+    display: block;
+}
+.user-details {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* Ensure text aligns left */
+    flex: 1; /* Take remaining space */
+    text-align: left; /* Force text align left */
+}
+.username {
+    font-size: 40rpx;
+    font-weight: bold;
+    color: var(--text-main);
+}
+.userid {
+    font-size: 28rpx;
+    color: var(--text-secondary);
+}
+.stats-card {
+    position: absolute;
+    bottom: -40rpx;
+    left: 40rpx;
+    right: 40rpx;
+    background-color: var(--surface-color);
+    border-radius: 20rpx;
+    box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
+    padding: 30rpx;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+}
+.stat-val {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: var(--text-main);
+}
+.stat-label {
+    font-size: 24rpx;
+    color: var(--text-light);
+}
+
+/* Menu List */
+.menu-list {
+    margin: 0 30rpx 30rpx 30rpx;
+    background-color: var(--surface-color);
+    border-radius: 20rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+}
+.menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 40rpx;
+    transition: background-color 0.2s;
+}
+.menu-item:active {
+    background-color: var(--surface-hover);
+}
+.menu-left {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+}
+.menu-icon {
+    width: 40rpx;
+    height: 40rpx;
+}
+.menu-text {
+    font-size: 30rpx;
+    color: var(--text-main);
+    font-weight: 500;
+}
+.menu-arrow {
+    color: var(--text-light);
+    font-size: 28rpx;
+}
+
+.form-section {
+    padding: 40rpx;
+    background-color: var(--surface-color);
+    margin: 0 30rpx 40rpx 30rpx;
+    border-radius: 30rpx;
+    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+}
+.form-title-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
+}
+.title-left {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+}
+.toggle-icon {
+    font-size: 24rpx;
+    color: var(--text-light);
+    padding: 10rpx;
+}
+.form-content {
+    margin-top: 20rpx;
+}
+.blue-line {
+    width: 8rpx;
+    height: 32rpx;
+    background-color: var(--primary-color);
+    border-radius: 4rpx;
+}
+.form-title {
+    font-size: 30rpx;
+    font-weight: 500;
+    color: var(--text-main);
+}
+.form-group {
+    margin-bottom: 30rpx;
+}
+.label {
+    font-size: 24rpx;
+    color: var(--text-secondary);
+    margin-bottom: 10rpx;
+    display: block;
+}
+.input-wrap {
+    background-color: var(--background-color);
+    padding: 24rpx;
+    border-radius: 20rpx;
+    border: 2rpx solid var(--border-color);
+}
+.form-row {
+    display: flex;
+    gap: 30rpx;
+}
+.half {
+    flex: 1;
+}
+.submit-btn {
+    background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
+    color: var(--text-white);
+    border-radius: 20rpx;
+    margin-top: 40rpx;
+    font-weight: bold;
+    font-size: 32rpx;
+}
+
+/* Avatar Upload */
+.avatar-wrapper {
+  padding: 0;
+  width: 120rpx !important;
+  height: 120rpx !important;
+  border-radius: 20rpx;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+}
+
+.avatar-wrapper::after {
+  border: none;
+}
+
+.avatar-upload {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 20rpx;
+  background-color: #eee;
+}