Browse Source

Merge branch 'master' of http://47.92.161.104:10080/zkx/jp-xxd-12355

# Conflicts:
#	src/views/Home.vue
zhengkaixin 4 năm trước cách đây
mục cha
commit
fe862e3934

BIN
public/images/banner2.jpg


BIN
src/assets/img/avator1.png


BIN
src/assets/img/banner2.jpg


BIN
src/assets/img/banner3.jpg


BIN
src/assets/img/banner4.jpg


+ 74 - 102
src/views/Home.vue

@@ -121,14 +121,14 @@
 		},
 	}
 </script>
-
 <style>
 	.container {
 		background: #FFFFFF;
 		font-size: 15px;
 		padding-bottom: 20px;
 	}
-
+</style>
+<style scoped lang="scss">
 	nav {
 		height: 44px;
 		line-height: 44px;
@@ -138,49 +138,40 @@
 		position: relative;
 		box-shadow: 0 1px 3px #e9e7df;
 		margin-bottom: 6px;
-	}
-
-	nav .mui-icon {
+		 .mui-icon {
 		position: absolute;
 		left: 12px;
 		top: 50%;
 		margin-top: -12px;
 	}
-
+	}
 	.banner {
 		padding: 0 20px 0 20px;
 		width: 100%;
 		overflow: hidden;
-	}
-
-	.banner img {
+		img {
 		width: 100%;
 		height: auto;
 	}
-
+	}
 	.jigou {
 		display: flex;
 		margin-bottom: 20px;
-	}
-
-	.jigou li {
+		li {
 		width: 50%;
-	}
-
-	.jigou li div:first-child {
+		div:first-child {
 		text-align: center;
 		padding-top: 14px;
 		font-size: 16px;
-	}
-
-	.jigou li .secondtit {
+	   }
+	   .secondtit {
 		font-size: 12px;
 		text-align: center;
 		padding: 4px 0 4px 0;
 		text-align: center;
 	}
-
-	.jigou .zhuban-img1 {
+	}
+	.zhuban-img1 {
 		width: 50%;
 		margin: 0 auto;
 		display: flex;
@@ -188,77 +179,66 @@
 		align-items: center;
 		padding-top: 13%;
 	}
-
-	.jigou .zhuban-img1 img {
+	
+	.zhuban-img1 img {
 		width: 100%;
 	}
-
-	.jigou .zhuban-img2 {
+	.zhuban-img2 {
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
 	}
-
-	.jigou span:first-child {
+	span:first-child {
 		width: 30%;
 	}
-
-	.jigou span:last-child {
+	span:last-child {
 		width: 60%;
 
 
 	}
-
-	.jigou span img {
+	span img {
 		width: 100%;
 		height: auto;
 	}
-
+	
+	}
 	.con1 {
 		margin: 20px 20px 16px 20px;
-	}
-
-	.con1 p {
+		p {
 		line-height: 32px;
 		justify-content: center;
 		text-align: justify;
 		color: #363636;
 		font-size: 16px;
 	}
-
+	}
 	.con2 {
 		margin-bottom: 16px;
 		font-size: 12px;
 		text-align: center;
 		color: #838383;
 	}
-
 	.zhixun-dl {
 		margin: 0 20px 20px 20px;
 		width: 100%;
 		display: flex;
+
 		font-size: 12px;
 	}
 
 	.zhixun-dl dt {
-		width: 30%;
-	}
 
-	.zhixun-dl dt button {
-		width: 100%;
-		height: 45px;
-		border-radius: 8px;
-		background: #dc214c;
-		color: #ffffff;
-		font-size: 18px;
-
-	}
-
-	.zhixun-dl:nth-child(even) dt button {
-		background: #edbe00;
-	}
-
-	.zhixun-dl dd {
+		width: 30%;
+		button {
+			width: 100%;
+			height: 45px;
+			border-radius: 8px;
+			background: #dc214c;
+			color: #ffffff;
+			font-size: 18px;
+		}
+	}
+	dd {
 		display: flex;
 		width: 60%;
 		padding-left: 10px;
@@ -266,19 +246,23 @@
 		 align-items: space-between;
 		 text-align: justify;
 		 flex-direction: right;
+		 span{
+	     display:flex;
+    }
 }
-.zhixun-dl dd span{
-	display:flex;
-}
+	}
+
+	.zhixun-dl:nth-child(even) dt button {
+		background: #edbe00;
+	}
+
+
 .zhixun-dl dd:last-child{
 	padding-left: 13px;
 }
-
 	.checkbtn {
 		margin: 8px 0 16px 0;
-	}
-
-	.checkbtn button {
+		button {
 		display: block;
 		width: 50%;
 		height: 42px;
@@ -288,7 +272,7 @@
 		margin: 0 auto;
 		background: #781d26;
 	}
-
+	}
 	.tit {
 		font-size: 20px;
 		font-weight: bold;
@@ -299,67 +283,57 @@
 
 	.hot {
 		margin: 0 12px 20px 12px;
-	}
-
-	.hot li {
+		li {
 		padding: 6px 0 6px 28px;
 		position: relative;
 		color: #4a4647;
 	}
-
-	.hot li::before {
-		display: block;
-		content: '';
-		position: absolute;
-		left: 6px;
-		top: 50%;
-		margin-top: -4px;
-		width: 8px;
-		height: 8px;
-		border-radius: 4px;
-		background: #4a4647;
+li::before {
+	display: block;
+	content: '';
+	position: absolute;
+	left: 6px;
+	top: 50%;
+	margin-top: -4px;
+	width: 8px;
+	height: 8px;
+	border-radius: 4px;
+	background: #4a4647;
+}
 	}
-
 	.zhixuns {
 		display: flex;
 		margin: 4px 20px 28px 20px;
 		justify-content: space-between;
-	}
-
-	.zhixuns a {
+		a {
 		width: 32%;
-	}
-
-	.zhixuns a button {
+		button {
 		width: 100%;
 		height: 38px;
 		border-radius: 19px;
 		color: #FFFFFF;
 		font-size: 16px;
 	}
-
-	.zhixuns a .btnred {
+	.btnred {
 		background: #dc214c;
 	}
-
-	.zhixuns a .btnnormal {
+	.btnnormal {
 		background: #969593;
 	}
-
+	}
+	}
 	.caseul {
 		margin: 0 20px;
-	}
-
-	.caseul li {
+		li {
 		margin-bottom: 14px;
 	}
-
-	.caselist a {
+	}
+	.caselist {
+		a {
 		display: flex;
 		justify-content: space-between;
 	}
-
-	.caselist p {
+	p {
 		width: 70%;
 		color: #31302e;
 		margin-bottom: 0;
@@ -367,17 +341,15 @@
 		justify-content: center;
 		text-align: justify;
 	}
-
-	.caselist span {
+	span {
 
 		width: 26%;
-	}
-
-	.caselist span img {
+		img {
 		width: 100%;
 		height: auto;
 	}
-
+	}
+	}
 	.casedetail {
 		color: #737373;
 		padding: 6px 0 6px 0;

+ 97 - 1
src/views/quiz/Info.vue

@@ -1,8 +1,104 @@
 <template>
+	<div class="container">
+		<u-navbar :is-back="false" title="个人中心" :background="{backgroundColor: '#187aff',}" title-color="#fff" :border-bottom="false"></u-navbar>
+		<nav>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>案例详情</nav>
+			<div class="banner">
+				<img src="@/assets/img/banner3.jpg" alt="">
+			</div>
+			<div class="box">
+				<h4>如何化解高考焦虑?</h4>
+				<p>青少年心理咨询案例一:女, 18岁,高三学生</p>
+				<p>咨询原因:高考前焦虑,影响学习效率。</p>
+				<p>首次来访主诉:精神无法振作,不能完成作业,说不出原因地烦躁,不愿上学。有时愿与人谈天论地有时只想一人呆着。对家里的人反感,饭后呕吐已两个月,常常失眠,多梦,经常无缘无故想哭。</p>
+				
+					<div class="banner">
+						<img src="@/assets/img/banner4.jpg" alt="">
+					</div>
+		
+				<p>既往史:就诊前两个月,开始饭后呕吐,经内科、精神科诊查,无异常所见。无精神病家族史,无脑外伤史和其他躯体疾病。</p>
+				<p>来访者母亲介绍:两个月前开始饭后岖吐,不敢吃东西。不进食时做呕吐状。夜间说梦话,内容多和考试有关。近来面临考大学,学习特别紧张。一个月前感冒,结果有两门功课没考好,经受不住就想哭,老师建议休息,但她怕考不上大学,面子不好看。家长和老师都理解她,劝解,但她自己给自己施加压力。最近她后悔自己读高中,觉得不如读中专,省去考大学的事就好了。上初中时,就常常自卑,对考试特别害怕,认为自己记忆力不好。</p>
+				<div class="bottom">
+					<div class="bot1">喜欢此内容的人还喜欢</div>
+					<p>关于中学生抑郁症,父母必须要了解的2个真相!</p>
+					<div class="bot2">320人浏览过</div>
+				</div>
+			
+			</div>
+	</div>
 </template>
 
 <script>
 </script>
-
 <style>
+	.container {
+		background: #FFFFFF;
+		font-size: 15px;
+		padding-bottom: 20px;
+	}
+</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;
+	}
+	}
+	.banner {
+		padding: 0 20px 0 20px;
+		width: 100%;
+		overflow: hidden;
+		img {
+		width: 100%;
+		height: auto;
+	}
+	}
+	.box{
+		padding: 0 20px;
+		h4{
+		text-align: center;
+		font-size: 28px;
+		font-family:"微软雅黑" ;
+		margin-bottom: 20px;
+		margin-top: 16px;
+	}
+	p{
+		font-size: 18px;
+		line-height:36px;
+		justify-content: center;
+		text-align: justify;
+		color: #4b494a;
+		margin-bottom: 20px;
+		margin-top: 16px;
+	}
+	}
+
+	.bottom{
+		background-color: #dededc;
+		border-radius: 10px;
+		padding: 24px 20px 30px 20px;
+		p{
+		color: #4b494a;
+	}
+	.bot1{
+		color: #62615f;
+		font-size: 16px;
+	}
+	.bot2{
+		color: #878785;
+		font-size: 14px;
+	}
+	}
+
+	
 </style>

+ 181 - 2
src/views/quiz/Submit.vue

@@ -1,9 +1,188 @@
 <template>
-		<div>ww2ww</div>
+		<div class="container">
+			<nav><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>心理咨询</nav>
+			<div class="con">
+				<div class="box">
+				<div class="avator"><img src="@/assets/img/avator1.png" alt=""></div>
+				<ul>
+					<li><b>华智冰</b> <span class="fontmin">老师</span></li>
+					<li>国家二级心理咨询师</li>
+					<li>萨提亚模式资深督导师与实践者</li>
+					<li>北师大心理学硕士</li>
+					<li><b>--擅长领域--</b></li>
+					<li>学习心理调适|人格发展| 危机应对|社交恐惧</li>
+					<li><span class="organ">★★★★★&nbsp;4.8</span>&nbsp;&nbsp;&nbsp;<span class="fontmin">已帮助420人</span></li>
+				</ul>
+			</div>
+			</div>
+			
+			<div class="box2">
+				<div class="tit">问题描述</div>
+				<p>您好,我是华智冰老师,请将您的困惑描述给我,我会尽快帮助您!</p>
+				 <input class="login-input" type="text"  v-model="username" placeholder="请输入...">
+			</div>
+			<div class="box3">
+				<div class="tit">联系方式</div>
+				<ul>
+					<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><span>您的电话:</span><input class="login-input" type="text"  v-model="username" placeholder="请输入..."></li>
+				</ul>
+				<div class="submitbtn"> <button>提交</button></div>
+			</div>
+		</div>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				username:'',
+				countries: [{
+				      'key': 'men',
+				      'value': 'men',
+				      'text': '男'
+				    }, {
+				      'key': 'women',
+				      'value': 'women',
+				      'text': '女'
+				    }],
+				    country: ''
+			}
+		},
+		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: 20px;
+	}
+</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;
+	}
+	}
+	.con{
+		margin: 0 12px;
+	}
+	.box{
+		width: 100%;
+		background-image: linear-gradient(#e2e0e0, #ededed);
+		border-radius: 10px;
+		padding-bottom: 10px;
+		.avator{
+		padding: 40px 0 20px 0;
+		width: 60%;
+		margin: 0 auto;
+		img{
+		width: 100%;
+		border-radius: 50%;
+		height: auto;
+	}
+	}
+	li{
+		text-align: center;
+		font-size: 18px;
+		padding-bottom: 14px;
+		b{
+		font-size: 20px;
+	}
+	.fontmin{
+		font-size: 16px;
+	}
+	
+	}
+	}
+
+
+	.organ{
+		color: #e75429;
+	}
+	.box2, .box3{
+		margin: 0 12px;
+	}
+	.box2 .tit , .box3 .tit{
+		font-size: 20px;
+		font-weight: bold;
+		padding-top: 30px;
+		padding-bottom: 16px;
+	}
+	.box2 p{
+		font-size: 18px;
+		line-height: 30px;
+		color: #514f50;
+		justify-content: center;
+		text-align: justify;
+	}
+	.box2 input,
+	.box3 select,
+	.box3 input{
+		border: 1px solid #514f50;
+		border-radius: 0;
+		color: #514f50;
+		font-size: 18px;
+	}
+	.box3 select{
+		outline:1px solid #514f50;
+	}
+	.box3 {
+		padding-bottom: 20px;
+		li{
+		display: flex;
+		justify-content: space-between;
+		span{
+		width: 30%;
+		font-size: 18px;
+		align-items: center;
+		display: flex;
+	}
+	input{
+		display: flex;
+		align-items: center;
+	}
+	}
+	.submitbtn{
+		width: 35%;
+		margin: 0 auto;
+		button{
+		width: 100%;
+		background: #d64623;
+		color: #FFFFFF;
+		font-size: 20px;
+		height: 42px;
+		border-radius: 21px;
+	}
+	}
+	}
+
 </style>

+ 203 - 1
src/views/quiz/SubmitReport.vue

@@ -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>