登录 人工申诉

public/normalize.css

@@ -12,6 +12,9 @@ html {
   line-height: 1; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
+p{
+  margin: 0;
+}
 
 /* Sections
    ========================================================================== */

src/ManualAppeal.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="top">
+      <p class="title">人工申诉</p>
+    </div>
+    <div class="shuru">
+      <input type="text" class="shuru1" placeholder="请填写帐号绑定的手机号或邮箱" style="outline:none"/>
+    </div>
+    <button class="btn">举报</button>
+    <div class="ale">
+      <p class="aletitle">人工申诉不适用于以下情况：</p>
+      <div class="alecontent">
+        <p class>1、需要解绑手机或合并帐号</p>
+        <p class>2、帐号被限制使用</p>
+        <p class>3、收不到验证码</p>
+        <p class>4、其他可能的问题</p>
+      </div>
+    </div>
+    <p class="serve">您可以登录后联系「知乎小管家」寻求帮助。如无法登录，请联系 i@zhihu.com。</p>
+    <div class="agreement">
+      点击「下一步」按钮，即代表你同意
+      <p>《知乎帐号申诉服务协议》</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.top {
+  width: 100%;
+  height: 0.88rem;
+  box-shadow: 0rem 0.01rem 0.01rem 0rem rgba(237, 237, 237, 0.4);
+  .title {
+    color: #333333;
+    font-size: 0.34rem;
+    text-indent: 0.155rem;
+    line-height: 0.88rem;
+  }
+}
+.shuru {
+  height: 0.85rem;
+  width: 6.9rem;
+  line-height: 0.85rem;
+  color: #999999;
+  font-size: 0.26rem;
+  margin: 0 auto;
+  margin-top: 0.29rem;
+  margin-bottom: 1.2rem;
+
+  }
+
+  .shuru1 {
+    width: 100%;
+    height: 100%;
+    outline-color: invert ;
+	outline-style: none ;
+	outline-width: 0px ;
+	border: none ;
+	border-style: none ;
+	text-shadow: none ;
+	-webkit-appearance: none ;
+	-webkit-user-select: text ;
+	outline-color: transparent ;
+	box-shadow: none;
+  border-bottom: 0.01rem solid #DFDFDF;
+    }
+.btn {
+  width: 6.9rem;
+  height: 0.88rem;
+  background-color: #6b9147;
+  line-height: 0.44rem;
+  text-align: center;
+  color: white;
+  font-size: 0.18rem;
+  margin-left: 0.3rem;
+    border: none;
+                outline: none;
+                -webkit-appearance: none;
+                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.ale {
+  margin-left: 0.31rem;
+  font-weight: 400;
+  color: #666666;
+  font-size: 0.13rem;
+  margin-top: 0.49rem;
+  // font-weight: bold;
+  .aletitle {
+    color: #666666;
+    font-size: 0.28rem;
+  }
+  .alecontent {
+    color: #666666;
+    font-size: 0.26rem;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+    line-height: 0.42rem;
+    margin-top: 0.37rem;
+  }
+}
+.serve{
+    width: 6.57rem;
+    color: #666666;
+    font-size: 0.26rem;
+    margin-top: 0.57rem;
+    line-height:0.42rem;
+    margin-left: 0.3rem;
+    // margin: 0 auto;
+}
+.agreement{
+  color: #666666;
+  font-size: 0.26rem;
+  width: 4.5rem;
+  margin: 0 auto;
+  // text-align: center;
+  margin-top: 3.77rem;
+  line-height:0.42rem;
+  // margin-bottom: 0.9rem;
+  >p{
+    text-align: center
+  }
+}
+</style>

src/router.js

@@ -3,13 +3,15 @@ import Vue from 'vue'
 import Router from 'vue-router'
 //2.调用vue-router
 Vue.use(Router)
-import PersonalHomepage from "./PersonalHomepage"
+// import PersonalHomepage from "./PersonalHomepage"
+import ManualAppeal from "./ManualAppeal"
 const router=new Router({
   routes: [
     {
       path: '/',
-      component: PersonalHomepage
+      component: ManualAppeal
     }
+    
   ]
 });
 export default router;