先甩個成品效果圖：

幾個小筆記

整體思路：首先寫一個絕對定位的頁面，先隱藏起來，當點選登陸，註冊時，將其顯示出來。控制顯示隱藏用的是Vue的 v-if.

需要注意的是，要禁止頁面的滾動，否則底部在滾動時會漏出來。

//禁止滾動
document.getElementsByTagName("body")[0].style = "overflow: hidden;";

1. 全螢幕陰影

.pannel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1502;
  background-color: rgba(0, 0, 0, 0.7);
}
 

關鍵在於position設定為absolute，大小設定為100%，背景加上透明度，z-index設定足夠大，這裡設定成1502是因為我在網站裡面集成了mavon-editor，它的z-index是1500，然後我又把頂部選單欄設定成了1501，所以這裡設定成1502了。

2. 面板中的文字居中

text-align: center;

3. 滑鼠箭頭變小手

<!-- 在style里加上 -->
cursor:pointer;

4. 完整程式碼

PS: 在element-ui的基礎上

<!-- 登陸框 -->
    <div class="pannel" v-if="isIn">
      <div class="pannel-inner">
        <el-row>
          <el-col :span="1" :offset="24" style="color:rgba(0, 0, 0, 0.2);"><i class="el-icon-close" v-on:click="close_sign" style="cursor:pointer;"></i></el-col>
        </el-row>
        <div class="pannel-header"><span v-on:click="sign_in" style="cursor:pointer;color:#409eff;">登陸</span>·<span v-on:click="sign_up" style="cursor:pointer;">註冊 </span></div>
        <el-input v-model="userName" placeholder="使用者名稱" style="margin-bottom: 5px;"></el-input>
        <el-input type="password" v-model="password" placeholder="密碼"></el-input>
        <el-button type="primary" size="medium" style="width: 100%; margin-top: 17px;">登陸</el-button>
      </div>
    </div>
    <!-- 註冊框 -->
    <div class="pannel" v-if="isUp">
      <div class="pannel-inner">
        <el-row>
          <el-col :span="1" :offset="24" style="color:rgba(0, 0, 0, 0.2);"><i class="el-icon-close" v-on:click="close_sign" style="cursor:pointer;"></i></el-col>
        </el-row>
        <div class="pannel-header"><span v-on:click="sign_in" style="cursor:pointer;">登陸</span>·<span v-on:click="sign_up" style="cursor:pointer;color:#409eff;">註冊 </span></div>
        <el-input v-model="userName" placeholder="使用者名稱" style="margin-bottom: 5px;"></el-input>
        <el-input type="password" v-model="password" placeholder="密碼" style="margin-bottom: 5px;"></el-input>
        <el-input type="password" v-model="password" placeholder="請再次輸入密碼"></el-input>
        <el-button type="primary" size="medium" style="width: 100%; margin-top: 17px;">註冊</el-button>
      </div>
    </div>

<!-- css程式碼 -->
.pannel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1502;
  background-color: rgba(0, 0, 0, 0.7);
}
.pannel-inner {
  position: absolute;
  background-color: white;
  left: 40%;
  top: 30%;
  width: 20%;
  /* border: solid #409eff 1px; */
  padding: 0 17px 17px 17px;
  font-size: 18px;
}
.pannel-header {
  margin-bottom: 7px;
  text-align: center;
}
 

就醬,先記這幾點。