前端样式完成

master
Lee-1203 2022-05-13 11:09:43 +08:00
parent cb45f68e6d
commit a9ca7c8321
3 changed files with 47 additions and 25 deletions

View File

@ -895,10 +895,29 @@
font-size: 16px; font-size: 16px;
color: #6b6b6b; color: #6b6b6b;
} }
.information-list li>span{
display: block;
overflow: hidden;
line-height: 30px;
}
.information-list li>span em{ .information-list li>span em{
color: #ff0000; color: #ff0000;
margin-left: 5px; margin-left: 5px;
} }
.information-list li>span ins{
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
border: 1px solid #00ffff;
border-radius: 2px;
font-size: 24px;
color: #00ffff;
font-weight: bold;
float: right;
cursor: pointer;
}
.information-list li input{ .information-list li input{
width: 100%; width: 100%;
height: 52px; height: 52px;
@ -989,6 +1008,13 @@
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
.radio-section>span input{
width: 0;
height: 0;
padding: 0;
overflow: hidden;
}
.radio-section>span em>ins{ .radio-section>span em>ins{
width: 0; width: 0;
height: 0; height: 0;
@ -1009,8 +1035,9 @@
} }
.select-section select[name="birth-tiem"], .select-section select[name="birth-tiem"],
.select-section select[name="age"], .select-section input[name="age"],
.select-section select[name="diagnosis-time"]{ .select-section select[name="diagnosis-time"],
.select-section-half select{
width: calc(50% - 8px); width: calc(50% - 8px);
} }
@ -1673,14 +1700,20 @@
.radio-section{ .radio-section{
height: 36px; height: 36px;
} }
.radio-section>span input{
width: 0;
height: 0;
padding: 0;
}
.radio-section>span em.checked>ins{ .radio-section>span em.checked>ins{
width: 8px; width: 8px;
height: 8px; height: 8px;
margin: 5px; margin: 5px;
} }
.select-section select[name="birth-tiem"], .select-section select[name="birth-tiem"],
.select-section select[name="age"], .select-section input[name="age"],
.select-section select[name="diagnosis-time"]{ .select-section select[name="diagnosis-time"],
.select-section-half select{
width: calc(50% - 5px); width: calc(50% - 5px);
} }
.select-section select[name="diagnosis-time"]{ .select-section select[name="diagnosis-time"]{

View File

@ -19,7 +19,9 @@ jQuery(function($){
// 更改单选按钮选中状态 // 更改单选按钮选中状态
$('.radio-section>span').click(function() { $('.radio-section>span').click(function() {
$('.radio-section>span').find('em').removeClass('checked'); $('.radio-section>span').find('em').removeClass('checked');
$('.radio-section>span').find('input').attr('checked',false);
$(this).find('em').addClass('checked'); $(this).find('em').addClass('checked');
$(this).find('input').attr('checked',true);
}); });
// 提现跳转 // 提现跳转

View File

@ -112,8 +112,8 @@
<li class="wow fadeInUp"> <li class="wow fadeInUp">
<span>患者性别<em>*</em></span> <span>患者性别<em>*</em></span>
<section class="radio-section"> <section class="radio-section">
<span><em class="sex checked"><ins></ins></em>男士</span> <span><input type="radio" name="sex" checked="checked" value="男士" /><em class="sex checked"><ins></ins></em>男士</span>
<span><em class="sex"><ins></ins></em>女士</span> <span><input type="radio" name="sex" value="女士" /><em class="sex"><ins></ins></em>女士</span>
</section> </section>
</li> </li>
<li class="wow fadeInUp"> <li class="wow fadeInUp">
@ -124,16 +124,12 @@
<option value="">1985年</option> <option value="">1985年</option>
<option value="">1986年</option> <option value="">1986年</option>
</select> </select>
<select name="age"> <input type="text" name="age" placeholder="请输入年龄">
<option value="">请选择年龄</option>
<option value="">25</option>
<option value="">26</option>
</select>
</section> </section>
</li> </li>
<li class="wow fadeInUp"> <li class="wow fadeInUp">
<span>患者常驻地址<em>*</em></span> <span>患者常驻地址<em>*</em><ins class="add-btn">+</ins></span>
<section class="select-section"> <section class="select-section select-section-half">
<select name="province"> <select name="province">
<option value="">四川</option> <option value="">四川</option>
<option value="">上海</option> <option value="">上海</option>
@ -144,17 +140,12 @@
<option value="">南充</option> <option value="">南充</option>
<option value="">绵阳</option> <option value="">绵阳</option>
</select> </select>
<select name="area">
<option value="">金牛区</option>
<option value="">武侯区</option>
<option value="">锦江区</option>
</select>
<input type="text" placeholder="请填写详细信息" value=""> <input type="text" placeholder="请填写详细信息" value="">
</section> </section>
</li> </li>
<li class="wow fadeInUp"> <li class="wow fadeInUp">
<span>能接受就医城市<em>*</em></span> <span>能接受就医城市<em>*</em><ins class="add-btn">+</ins></span>
<section class="select-section"> <section class="select-section select-section-half">
<select name="province"> <select name="province">
<option value="">四川</option> <option value="">四川</option>
<option value="">上海</option> <option value="">上海</option>
@ -165,11 +156,7 @@
<option value="">南充</option> <option value="">南充</option>
<option value="">绵阳</option> <option value="">绵阳</option>
</select> </select>
<select name="area">
<option value="">金牛区</option>
<option value="">武侯区</option>
<option value="">锦江区</option>
</select>
</section> </section>
</li> </li>
</ul> </ul>