|
@@ -1,8 +1,210 @@
|
|
|
<template>
|
|
|
+ <div class="container">
|
|
|
+ <nav><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>心理咨询</nav>
|
|
|
+
|
|
|
+ <div><img src="@/assets/img/banner2.jpg" alt=""></div>
|
|
|
+ <ul class="center">
|
|
|
+ <li>9类未成年人遭受不法侵害情形,</li>
|
|
|
+ <li>有关单位和个人须立即报案。</li>
|
|
|
+ <li class="detailbtn"><button>了解详情>></button></li>
|
|
|
+ <li>我要报案</li>
|
|
|
+ </ul>
|
|
|
+ <div class="formbox">
|
|
|
+ <ul>
|
|
|
+ <li class="star"><span>时间:</span><input class="login-input" type="text" v-model="username" placeholder="请输入..."></li>
|
|
|
+ <li class="star"><span>儿童姓名:</span><input class="login-input" type="text" v-model="username" placeholder="请输入..."></li>
|
|
|
+ <li><span>性别:</span><input class="login-input" type="text" v-model="username" placeholder="请输入..."></li>
|
|
|
+ <li><span>监护人姓名:</span><input class="login-input" type="text" v-model="username" placeholder="请输入..."></li>
|
|
|
+ <li><span>性别:</span><input class="login-input" type="text" v-model="username" placeholder="请输入..."></li>
|
|
|
+ <li class="star"><span>联系方式:</span><input class="login-input" type="text" v-model="username" placeholder="请输入..."></li>
|
|
|
+ <li><span>报案地点:</span><input class="login-input" type="text" v-model="username" placeholder="请输入..."></li>
|
|
|
+ <li><span>报案类别:</span>
|
|
|
+ <select id="country" v-model="country" @change="changeCountry" >
|
|
|
+ <option value="">请选择...</option>
|
|
|
+ <option v-for="option in countries" v-bind:key="option.key" v-bind:value="option.value">
|
|
|
+ {{ option.text }}
|
|
|
+ </option>
|
|
|
+ </select></li>
|
|
|
+ <li class="noborder star"><span>报案内容:</span></li>
|
|
|
+ <li>
|
|
|
+ <textarea v-model="mytext" name="" id="" cols="30" rows="10" placeholder="请输入">{{mytext}}</textarea>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="btnsubmit"><button>提交</button></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ username:'',
|
|
|
+ countries: [{
|
|
|
+ 'key': 'men',
|
|
|
+ 'value': 'men',
|
|
|
+ 'text': '男'
|
|
|
+ }, {
|
|
|
+ 'key': 'women',
|
|
|
+ 'value': 'women',
|
|
|
+ 'text': '女'
|
|
|
+ }],
|
|
|
+ country: '',
|
|
|
+ mytext: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ login() {
|
|
|
+ console.log(this.username)
|
|
|
+ console.log(this.password)
|
|
|
+ },
|
|
|
+ changeCountry () {
|
|
|
+ console.log(this.country)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
-
|
|
|
<style>
|
|
|
+ .container {
|
|
|
+ background: #FFFFFF;
|
|
|
+ font-size: 15px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+ nav {
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0 1px 3px #e9e7df;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ .mui-icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 12px;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center{
|
|
|
+ background: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ li{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: "微软雅黑";
|
|
|
+ font-weight: bold;
|
|
|
+ color: #c63224;
|
|
|
+ height: 36px;
|
|
|
+ padding: 16px 0 16px 0s;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .detailbtn{
|
|
|
+ width: 40%;
|
|
|
+ margin: 2px auto 6px auto;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ button{
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 19px;
|
|
|
+ background: #205370;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li:last-child{
|
|
|
+ background:#c63224;
|
|
|
+ color: #FFFFFF;
|
|
|
+ width: 100%;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 36px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .formbox{
|
|
|
+ width: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ ul{
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ li{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid #aaaaaa;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ .noborder, li:last-child{
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ li:last-child{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ li{
|
|
|
+ position: relative;
|
|
|
+ span{
|
|
|
+ width: 40%;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ border: none;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ select{
|
|
|
+ font-size: 18px;
|
|
|
+ height: 100%;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ textarea{
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid #aaaaaa;
|
|
|
+ font-size: 18px;
|
|
|
+ height: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ li.star::before{
|
|
|
+ position: absolute;
|
|
|
+ content: '★';
|
|
|
+ color: #d57f28;
|
|
|
+ font-size: 10px;
|
|
|
+ left: -15px;
|
|
|
+ top:18px;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnsubmit{
|
|
|
+ width: 35%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 50px;
|
|
|
+ button{
|
|
|
+ font-size: 18px;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 25px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #d64623;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|