小屏手机样式调整

questionnair/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --host 0.0.0.0",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

questionnair/src/app/ask/ask.component.ts

@@ -49,34 +49,37 @@ export class AskComponent implements OnInit {
     // console.log('start', this.curPage)
     if (this.curPage > 0) {
       const page2Answer = this.allAnswers[1]
-      const optionId = page2Answer.questions[0].options[0].optionId
-      if (this.curPage == 5 || this.curPage == 6) {
-        if (optionId == 1 || optionId == 3) {
-          this.curPage = this.curPage - 2
-          this.setCurPageData()
-          return
-        }
-      }
-
-      if (this.curPage == 13) {
-        if (optionId == 1) {
-          this.curPage = this.curPage - 3
-          this.setCurPageData()
-          return
+      if(page2Answer){
+        const optionId = page2Answer.questions[0].options[0].optionId
+        if (this.curPage == 5 || this.curPage == 6) {
+          if (optionId == 1 || optionId == 3) {
+            this.curPage = this.curPage - 2
+            this.setCurPageData()
+            return
+          }
         }
-        if (optionId == 2) {
-          this.curPage = this.curPage - 2
-          this.setCurPageData()
-          return
+  
+        if (this.curPage == 13) {
+          if (optionId == 1) {
+            this.curPage = this.curPage - 3
+            this.setCurPageData()
+            return
+          }
+          if (optionId == 2) {
+            this.curPage = this.curPage - 2
+            this.setCurPageData()
+            return
+          }
         }
-      }
-      if (this.curPage == 12) {
-        if (optionId == 3) {
-          this.curPage = this.curPage - 2
-          this.setCurPageData()
-          return
+        if (this.curPage == 12) {
+          if (optionId == 3) {
+            this.curPage = this.curPage - 2
+            this.setCurPageData()
+            return
+          }
         }
       }
+      
       this.curPage--;
       this.setCurPageData()
     } else {

questionnair/src/app/page17/page17.component.html

@@ -2,7 +2,7 @@
   <div class="title">
     <img src="assets/images/bg_17.png" />
   </div>
-  <div class="footer" style="margin-top: 20%;" (click)="getHref()">
+  <div class="footer" style="margin-top: 10%;" (click)="getHref()">
     <div>我知道了</div>
   </div>
 </div>

questionnair/src/app/page7/page7.component.html

 <div class="container">
   <div class="layout">
     <div class="content">
-      <div class="questionTitle">
-        {{ this.curPageData['questions'][0]['questionName'] }}
+      <div class="twoContent">
+          <div class="questionTitle">
+              {{ this.curPageData['questions'][0]['questionName'] }}
+            </div>
+            <ul class="income">
+              <li
+                [ngClass]="{ selected: options['selected'] == true }" 
+                *ngFor="let options of this.curPageData['questions'][0].options"
+                (click)="getAnswer(this.curPageData['questions'][0], options)"
+              >
+                {{ options.optionName }}
+              </li>
+            </ul>
+            <div class="questionTitle" *ngIf="hasMate">
+              {{ this.curPageData['questions'][1]['questionName']}}
+            </div>
+            <ul class="income" *ngIf="hasMate">
+              <li
+                [ngClass]="{ selected: options['selected'] == true }" 
+                *ngFor="let options of this.curPageData['questions'][1]['options']"
+                (click)="getAnswer(this.curPageData['questions'][1], options)"
+              >
+                {{ options.optionName }}
+              </li>
+            </ul>
       </div>
-      <ul class="income">
-        <li
-          [ngClass]="{ selected: options['selected'] == true }" 
-          *ngFor="let options of this.curPageData['questions'][0].options"
-          (click)="getAnswer(this.curPageData['questions'][0], options)"
-        >
-          {{ options.optionName }}
-        </li>
-      </ul>
-      <div class="questionTitle" *ngIf="hasMate">
-        {{ this.curPageData['questions'][1]['questionName']}}
-      </div>
-      <ul class="income" *ngIf="hasMate">
-        <li
-          [ngClass]="{ selected: options['selected'] == true }" 
-          *ngFor="let options of this.curPageData['questions'][1]['options']"
-          (click)="getAnswer(this.curPageData['questions'][1], options)"
-        >
-          {{ options.optionName }}
-        </li>
-      </ul>
     </div>
   </div>
 </div>

questionnair/src/styles.css

@@ -18,7 +18,8 @@ ul li,ol li{
     list-style: none;
 }
 .container{
-    padding:0;
+    padding: 0;
+    height: 100%;
 }
 .wrapper{
     display: flex;
@@ -27,7 +28,6 @@ ul li,ol li{
 .layout{
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     padding:0 10px;
     height:100%;
 }
@@ -37,8 +37,8 @@ ul li,ol li{
 .tips{
     display: flex;
     justify-content: center;
-    height: 5.5em;
     align-items: center;
+    margin: 5%;
 }
 .footer{
     display: flex;
@@ -57,8 +57,9 @@ ul li,ol li{
     padding:10px 0;
 } */
 .content{
-    max-height: 580px;
+    max-height: 510px;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }
 /* .layout.cityLayout .questionTitle{
     margin:0 10px;
@@ -86,7 +87,8 @@ ul li,ol li{
     display: flex;
     width: 100%;
     position: absolute;
-    bottom: 5%;
+    bottom: 10px;
+    background-color: #fff;
     
 }
 .content_footer div{
@@ -108,6 +110,9 @@ ul li,ol li{
     flex: 0 0 60%;
     font-weight: 500;
 }
+.twoContent{
+    height: 100%;
+}
 .jobContent,.income,.cityContent{
     width: 100%;
 }