新增名片卡片

pages/about/about.wxss

@@ -38,7 +38,6 @@ page {
     margin-top: 30rpx;
     margin-left: 30rpx;
     margin-right: 30rpx;
-
 }
 .text {
     /* margin-top: 16px; */
@@ -52,6 +51,69 @@ page {
     line-height: 55rpx;
     color: #333;
 }
+.about{
+    /* border-top: 2rpx solid #e9e9e9; */
+    border-bottom: 2rpx solid #e9e9e9;
+    padding: 20rpx 30rpx 20rpx 30rpx;
+    /* padding-left: 30rpx;
+    padding-right: 30rpx; */
+}
+.about-title{
+    /* border-bottom: 2rpx solid #e9e9e9; */
+    /* padding-bottom: 30rpx; */
+    padding-left: 30rpx;
+    padding-right: 30rpx;
+    margin-top: 30rpx;
+    font-size: 36rpx;
+    text-align: center;
+    /* margin-bottom: 20rpx; */ 
+}
+
+.user-container {
+    display: flex;
+    flex-direction: column;
+    /* padding: 10px; */
+    /* background-color: #fff; */
+    /* border-radius: 8px; */
+    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
+}
+
+.user-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch; /* 使子元素的高度匹配容器高度 */
+}
+
+.user-info {
+    flex-grow: 1; /* 让左侧信息部分尽可能占满剩余空间 */
+}
+
+.user-name {
+    font-size: 36rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+}
+
+.user-intro, .user-phone {
+    font-size: 28rpx;
+    margin-bottom: 10rpx;
+}
+
+.user-block-button {
+    background-color: #3c8bf6;
+    color: #fff;
+    padding: 10rpx;
+    border: none;
+    border-radius: 10rpx;
+    /* cursor: pointer; */
+    align-self: center; /* 水平居中对齐 */
+    height: auto; /* 按钮的高度自适应 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    writing-mode: vertical-lr; /* 将文本垂直排列 */
+    /*transform: rotate(180deg);  旋转文本，使其从上到下 */
+}
 
 
 .btn-view {