<link rel="stylesheet" href="http://at.alicdn.com/t/font_bo8heq56fci60f6r.css">
<p class="checkbox"><input id="agree_check" type="checkbox"><label for="agree_check">我已阅读并同意<a href="user_agreement.html" target="_blank"><span class="blue">《软件使用协议》</span></a></label></p>
<p class="tc mt10"><button class="btn_submit" @click="_submit()">立即分享</button></p>
<div class="radiobox"><input type="radio" id="nan" name="sex" value="1" v-model="sex" /><label for="nan">男</label>
</div>
<div class="radiobox">
    <input type="radio" id="nv" name="sex" value="2" v-model="sex" /><label for="nv">女</label>
</div>

/*复选框样式*/
.checkbox{position:relative;}
.checkbox label{padding-left:18px;}
.checkbox label::before {content: "";display: inline-block;position: absolute;width: 17px;height: 17px;left: 0;top:1px;margin-left: 12px;border: 1px solid #cccccc;border-radius: 3px;background-color: #fff;}.checkbox label::after {content: "";display: inline-block;position: absolute;width: 16px;height: 16px;left: -2px;top: 0px;margin-left: 12px;padding-left: 3px;padding-top: 1px;font-size: 16px;color: #555555;}.checkbox input[type="checkbox"]:checked + label::before {background-color: #337ab7;border-color: #337ab7;background-image:;}.checkbox input[type="checkbox"]:checked + label:after{

}/*单选框样式*/
.radiobox {padding-left: 40px; display:inline-block;}
.radiobox label {display: inline-block;vertical-align: middle;position: relative;padding-left: 5px;line-height:19px; }
.radiobox label::before {content: "";display: inline-block;position: absolute;width: 17px;height: 17px;left: 0;margin-left: -15px;border: 1px solid #cccccc;border-radius: 50%;background-color: #fff;-webkit-transition: border 0.15s ease-in-out;-o-transition: border 0.15s ease-in-out;transition: border 0.15s ease-in-out; }
.radiobox label::after {display: inline-block;position: absolute;content: " ";width: 11px;height: 11px;left: 3px;top: 3px;margin-left: -15px;border-radius: 50%;background-color: #555555;-webkit-transform: scale(0, 0);-ms-transform: scale(0, 0);-o-transform: scale(0, 0);transform: scale(0, 0);-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radiobox input[type="radio"] {opacity: 0;z-index: 1; }.radiobox input[type="radio"]:checked + label::after {-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);-o-transform: scale(1, 1);transform: scale(1, 1); }
.radiobox input[type="radio"]:disabled + label {opacity: 0.65; }
.radiobox input[type="radio"]:disabled + label::before {cursor: not-allowed; }
.radiobox.radio-inline {margin-top: 0; }.radiobox input[type="radio"] + label::after {background-color: #337ab7; }