|
|
@@ -82,55 +82,62 @@
|
|
|
}
|
|
|
|
|
|
/* 个人信息卡片的个人数据部分 */
|
|
|
- .content-padding{
|
|
|
- padding:0 20px;
|
|
|
+ .content-padding {
|
|
|
+ padding: 0 20px;
|
|
|
}
|
|
|
+
|
|
|
.profile-data {
|
|
|
text-align: center;
|
|
|
border-top: 1px solid #e5e5e5;
|
|
|
border-bottom: 1px solid #e5e5e5;
|
|
|
- margin:20px 0;
|
|
|
- padding:20px 0;
|
|
|
+ margin: 20px 0;
|
|
|
+ padding: 20px 0;
|
|
|
}
|
|
|
|
|
|
.profile-data .data-item {
|
|
|
display: inline-block;
|
|
|
- margin:0 20px;
|
|
|
+ margin: 0 20px;
|
|
|
}
|
|
|
- .profile-data .data-item .data-item-num{
|
|
|
+
|
|
|
+ .profile-data .data-item .data-item-num {
|
|
|
font-size: 22px;
|
|
|
font-weight: 700;
|
|
|
- color:#2d3436;
|
|
|
+ color: #2d3436;
|
|
|
}
|
|
|
- .profile-data .data-item .data-item-text{
|
|
|
- font-size:12px;
|
|
|
- color:#b2bec3;
|
|
|
+
|
|
|
+ .profile-data .data-item .data-item-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #b2bec3;
|
|
|
}
|
|
|
+
|
|
|
/* 个人信息卡片的个人技能标签部分 */
|
|
|
- .area-title{
|
|
|
- font-size:14px;
|
|
|
- font-weight:700;
|
|
|
- color:#b2bec3;
|
|
|
+ .area-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #b2bec3;
|
|
|
margin-bottom: 16px;
|
|
|
text-align: left;
|
|
|
}
|
|
|
- .profile-skills li{
|
|
|
- display:inline-block;
|
|
|
- height:35px;
|
|
|
- padding:0 10px;
|
|
|
- background-color:#f8f9fa;
|
|
|
- color:#636e72;
|
|
|
- border:1px solid #e8e8e8;
|
|
|
+
|
|
|
+ .profile-skills li {
|
|
|
+ display: inline-block;
|
|
|
+ height: 35px;
|
|
|
+ padding: 0 10px;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ color: #636e72;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
line-height: 35px;
|
|
|
border-radius: 18px;
|
|
|
- margin:0 5px 10px 0;
|
|
|
+ margin: 0 5px 10px 0;
|
|
|
}
|
|
|
+
|
|
|
/* 个人信息卡片的个人社交主页部分 */
|
|
|
- .profile-social{
|
|
|
+ .profile-social {
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .profile-social li{
|
|
|
- display:inline-block;
|
|
|
+
|
|
|
+ .profile-social li {
|
|
|
+ display: inline-block;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
background-color: #f8f9fa;
|
|
|
@@ -139,12 +146,14 @@
|
|
|
border-radius: 50%;
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
- .profile-social li img{
|
|
|
+
|
|
|
+ .profile-social li img {
|
|
|
width: 50%;
|
|
|
height: 50%;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
- .profile-social button{
|
|
|
+
|
|
|
+ .profile-social button {
|
|
|
background-color: #667eea;
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
@@ -152,10 +161,36 @@
|
|
|
/* none 表示没有边框线 */
|
|
|
border: none;
|
|
|
width: 100%;
|
|
|
- margin:20px 0;
|
|
|
- padding:14px 0;
|
|
|
+ margin: 20px 0;
|
|
|
+ padding: 14px 0;
|
|
|
border-radius: 10px;
|
|
|
}
|
|
|
+ /* 其他信息部分 */
|
|
|
+ .other-info{
|
|
|
+ text-align: center;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ padding: 16px 0;
|
|
|
+ }
|
|
|
+ .other-info li{
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .other-info li .other-info-en{
|
|
|
+ font-size:14px;
|
|
|
+ color: #2d3436;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .other-info li .other-info-zh{
|
|
|
+ font-size:12px;
|
|
|
+ color:#636e72;
|
|
|
+ }
|
|
|
+ .other-info .line{
|
|
|
+ width: 1px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #b0b0b0;
|
|
|
+ margin:0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -222,7 +257,26 @@
|
|
|
</ul>
|
|
|
<button>+ 关注博主</button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <!-- 其他信息部分 -->
|
|
|
+ <div class="other-info">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <div class="other-info-en">Joined</div>
|
|
|
+ <div class="other-info-zh">2021年3月</div>
|
|
|
+ </li>
|
|
|
+ <li class="line"></li>
|
|
|
+ <li>
|
|
|
+ <div class="other-info-en">Location</div>
|
|
|
+ <div class="other-info-zh">北京</div>
|
|
|
+ </li>
|
|
|
+ <li class="line"></li>
|
|
|
+ <li>
|
|
|
+ <div class="other-info-en">Last Post</div>
|
|
|
+ <div class="other-info-zh">2天前</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
