|
|
@@ -28,4 +28,80 @@
|
|
|
ion-button {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 100%;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 80px; /* 使用 px 替代 rpx */
|
|
|
+ width: 100%;
|
|
|
+ height: 400px; /* 使用 px 替代 rpx */
|
|
|
+ }
|
|
|
+
|
|
|
+ .top:after {
|
|
|
+ width: 140%;
|
|
|
+ height:300px;
|
|
|
+ position: absolute;
|
|
|
+ left: -20%;
|
|
|
+ top: 0;
|
|
|
+ z-index: -1;
|
|
|
+ content: '';
|
|
|
+ border-radius: 0 0 60% 60%;
|
|
|
+ background-color: #426db5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .region {
|
|
|
+ margin:auto;
|
|
|
+ width: 450px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upper {
|
|
|
+
|
|
|
+ display: flex; /* 使用弹性盒布局，使子元素能够灵活排列 */
|
|
|
+ justify-content: center; /* 在主轴上居中对齐子元素 */
|
|
|
+ align-items: center; /* 在交叉轴上居中对齐子元素 */
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ border-radius: 50%; /* 设置边框半径为 50%，使盒子变为圆形 */
|
|
|
+ overflow: hidden; /* 确保任何超出部分都被隐藏 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ padding-left: 30px; /* 设置左侧内边距为 30 像素 */
|
|
|
+ line-height: 55px; /* 设置行高为 55 像素，增加文本行之间的垂直间距 */
|
|
|
+ flex-direction: column; /* 将子元素排列为纵向（列）方向 */
|
|
|
+}
|
|
|
+
|
|
|
+.name {
|
|
|
+ font-size: 20px; /* 设置字体大小为 40 像素 */
|
|
|
+ letter-spacing: 5px; /* 设置字母间距为 5 像素 */
|
|
|
+ color: #FFFFFF; /* 设置字体颜色为白色 */
|
|
|
+}
|
|
|
+
|
|
|
+.no {
|
|
|
+ font-size: 18px; /* 设置字体大小为 24 像素 */
|
|
|
+ letter-spacing: 2px; /* 设置字母间距为 2 像素 */
|
|
|
+ color: #b3dffe; /* 设置字体颜色为淡蓝色 */
|
|
|
+}
|
|
|
+.lower {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 100px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #b3dffe;
|
|
|
+}
|
