Vue实现京东登陆页面（仅实现部分功能）

一、由四个vue组件组成：

1.头部Head 代码如下：

<template>
  <div id="head">
    <img src="../assets/logo-201305-b.png" :class="logClass">
    <img src="../assets/l-icon.png" :class="liconClass">
    <a href=""><img src="../assets/q-icon.png" :class="qiconClass">登录页面，调查问卷</a>
  </div>
</template>

<script>
  export default {
    name: "Head",
    data() {
      return {
        logClass: 'myLog',
        liconClass: 'myLicon',
        qiconClass: 'myQicon'
      }
    }
  }
</script>

<style scoped>
  #head {
    width: 300px;
    height: 60px;
    margin: 10px 0px;
    display: inline;
  }

  .myLog {
    width: 170px;
    height: 60px;
    margin: 0px 0px 0px 260px;
  }

  .myLicon {
    width: 110px;
    height: 40px;
  }

  .myQicon {
    width: 18px;
    height: 14px;
    margin: 0px 5px;
    vertical-align: text-bottom;
  }

  a {
    width: 136px;
    height: 18px;
    font-family: Arial, Verdana, 宋体;
    font-size: 12px;
    text-decoration: none;
    color: #999999;
    float: right;
    margin-top: 47px;
    margin-right: 260px;
  }
</style>

2.颈部Neck 代码如下：

<template>
  <div id="neck">
    <p><img src="../assets/icon-tips.png" :class="imgClass">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《<a
      href="">京东隐私政策</a> 》已上线，将更有利于保护您的个人隐私。</p>
  </div>
</template>

<script>
  export default {
    name: "Neck",
    data() {
      return {
        imgClass: 'myImg'
      }
    }
  }
</script>

<style scoped>
  #neck {
    height: 18px;
    background-color: #FFF8F0;
    padding: 10px 0px;
    margin-top: 5px;
  }

  p {
    height: 18px;
    margin: 0px 0px;
    font-family: Arial, Verdana, 宋体;
    font-size: 12px;
    color: #999999;
    text-align: center;
  }

  .myImg {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
  }

  a {
    color: #333333;
    text-decoration: none;
  }
</style>

3.躯干Body 代码如下：

<template>
  <div id="body">
    <div :class="daClass">&nbsp;</div>
    <div :class="dbClass">
      <div :class="dbaClass">
        <div :class="dbaaClass"><p :class="p1Class"><img src="../assets/icon-tips.png" :class="iconClass">京东不会以任何理由要求您转账汇款，谨防诈骗。
        </p></div>
        <div :class="dbabClass">
          <input type="button" :class="{on: loginWay}" @click="loginWay = true" :style="myDbaba" value="扫码登录">
          <div :class="lineClass"></div>
          <input type="button" :class="{on: loginWay}" @click="loginWay = false" :style="myDbabb" value="账户登录">
        </div>
        <div :class="rowClass"></div>
        <div v-show="loginWay">
          <div :class="scaClass"><img src="../assets/erweima.png"></div>
          <p :class="scapClass">打开 <a href="" :class="scapaClass">手机京东</a> 扫描二维码</p>
          <ul :class="ulaClass">
            <li><b :class="baClass"></b><em>免输入</em></li>
            <li><b :class="bbClass"></b><em>更快</em></li>
            <li><b :class="bcClass"></b><em>更安全</em></li>
          </ul>
        </div>
        <div v-show="!loginWay">
          <div :class="alaClass">
            <div><b :class="bdClass"></b><input type="text" name="user" value="" placeholder="邮箱/账号名/登录手机"
                                                :style="myAa"></div>
            <div><b :class="beClass"></b><input type="text" name="pswd" value="" placeholder="密码" :style="myAb"></div>
            <div style="width: 48px; height: 13.6px;float: right"><a href=""
                                                                     style="color: #666666;text-decoration: none">忘记密码</a>
            </div>
            <button>登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
          </div>
        </div>
        <div>
          <div :class="rowClass"></div>
          <ul :class="ulbClass">
            <li><b :class="bfClass"></b><a href="" :style="myAc">QQ</a></li>
            <div :class="lineClass"></div>
            <li><b :class="bgClass"></b><a href="" :style="myAc">微信</a></li>
            <li style="float: right"><b :class="bhClass"></b><a href="" :style="myAd">立即注册</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div :class="dcClass"></div>
  </div>
</template>

<script>
  export default {
    name: "Body",
    data() {
      return {
        daClass: 'myDa',
        dbClass: 'myDb',
        dcClass: 'myDc',
        dbaClass: 'myDba',
        iconClass: 'myIcon',
        p1Class: 'myP1',
        dbaaClass: 'myDbaa',
        dbabClass: 'myDbab',
        myDbaba: {
          'text-align': 'center',
          width: '172px',
          height: '55px',
          color: '#666666',
          backgroundColor: 'white',
          'font-size': '18px',
          'border-width': '0'
        },
        lineClass: 'myLine',
        myDbabb: {
          'text-align': 'center',
          width: '172px',
          height: '55px',
          color: '#666666',
          backgroundColor: 'white',
          'font-size': '18px',
          'border-width': '0'
        },
        rowClass: 'myRow',
        loginWay: true,
        scaClass: 'mySca',
        scapClass: 'myScap',
        scapaClass: 'myScapa',
        alaClass: 'myAla',
        myAa: {width: '256px', height: '32px', margin: '0px 0px 20px'},
        myAb: {width: '256px', height: '32px', margin: '0px 0px 20px'},
        myAc: {'font-family': 'Arial,Verdana,宋体', 'font-size': '12px', color: '#666666', 'text-decoration': 'none'},
        myAd: {'font-family': 'Arial,Verdana,宋体', 'font-size': '14px', color: '#B61D1D', 'text-decoration': 'none'},
        baClass: 'myBa',
        bbClass: 'myBb',
        bcClass: 'myBc',
        bdClass: 'myBd',
        beClass: 'myBe',
        bfClass: 'myBf',
        bgClass: 'myBg',
        bhClass: 'myBh',
        ulaClass: 'myUla',
        ulbClass: 'myUlb'
      }
    }
  }
</script>

<style scoped>
  #body {
    height: 475px;
    background-color: #1E48D0;
  }

  .myDa {
    width: 17.71%;
    float: left;
  }

  .myDb {
    width: 64.58%;
    height: 475px;
    float: left;
    background-image: url("../assets/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .myDba {
    width: 346px;
    height: 398px;
    float: right;
    background-color: white;
    margin-top: 10px;
  }

  .myIcon {
    width: 16px;
    height: 16px;
    vertical-align: middle;

  }

  .myP1 {
    height: 18px;
    font-family: Arial, Verdana, 宋体;
    font-size: 12px;
    color: #999999;
    text-align: center;
    padding: 10px 0px;
    margin: 0px;
  }

  .myDbaa {
    background-color: #FFF8F0;
  }

  .myDbab {
    width: 346px;
    height: 55px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666666;
    font-family: "Microsoft YaHei UI";
    font-size: 18px;
  }

  .myLine {
    display: inline-block;
    height: 20px;
    width: 1px;
    background: #dcd9d9;
    vertical-align: text-bottom;

  }

  .myRow {
    width: 100%;
    height: 1px;
    border-top: solid #dcd9d9 1px;
  }

  .mySca {
    margin: 25px 99px 0px;
  }

  .myScap {
    height: 18px;
    font-family: Arial, Verdana, 宋体;
    font-size: 12px;
    color: #666666;
    text-align: center;
  }

  .myScapa {
    color: red;
    text-decoration: none;
  }

  .myUla {
    height: 25px;
    font-family: "Microsoft YaHei UI";
    font-size: 12px;
    color: #999999;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  em {
    padding: 0px 0px 0px 10px;

  }

  .myAla {
    width: 306px;
    height: 192px;
    text-align: center;
    margin: 23px 20px 30px;
    font-family: Arial, Verdana, 宋体;
    font-size: 12px;
    color: #666666;
  }

  .myBa {
    width: 25px;
    height: 25px;
    float: left;
    background: url("../assets/qr-coagent.png") no-repeat;

  }

  .myBb {
    width: 25px;
    height: 25px;
    float: left;
    background: url("../assets/qr-coagent.png") 53px;
  }

  .myBc {
    width: 25px;
    height: 25px;
    float: left;
    background: url("../assets/qr-coagent.png") 106px;
  }

  .myBd {
    width: 39px;
    height: 38px;
    float: left;
    background: url("../assets/pwd-icons-new.png");
  }

  .myBe {
    width: 39px;
    height: 38px;
    float: left;
    background: url("../assets/pwd-icons-new.png") 71.5px 0px;
  }

  .myBf {
    width: 19px;
    height: 18px;
    float: left;
    background: url("../assets/QQ-weixin.png");
    margin: 0px 5px 0px 0px;
  }

  .myBg {
    width: 19px;
    height: 18px;
    float: left;
    background: url("../assets/QQ-weixin.png") 20px;
    margin: 0px 5px 0px 0px;
  }

  .myBh {
    width: 16px;
    height: 16px;
    float: left;
    background: url("../assets/pwd-icons-new.png") 15.8px 99px;
    margin: 0px 5px 0px 0px;
  }

  button {
    width: 304px;
    height: 33px;
    color: #FFFFFF;
    background-color: #E4393C;
    border: none;
    font-size: 20px;
    font-family: "Microsoft YaHei UI";
    margin-top: 20px;
  }

  .myUlb {
    width: 346px;
    height: 50px;
    padding: 0;
  }

  .myDc {
    width: 17.71%;
    float: left;
  }
</style>

4.尾部Leg 代码如下：

<template>
  <div id="leg">
    <a href="#">关于我们</a>
    <div :class="lineClass"></div>
    <a href="#">联系我们</a>
    <div :class="lineClass"></div>
    <a href="#">人才招聘</a>
    <div :class="lineClass"></div>
    <a href="#">商家入驻</a>
    <div :class="lineClass"></div>
    <a href="#">广告服务</a>
    <div :class="lineClass"></div>
    <a href="#">手机京东</a>
    <div :class="lineClass"></div>
    <a href="#">友情链接</a>
    <div :class="lineClass"></div>
    <a href="#">销售联盟</a>
    <div :class="lineClass"></div>
    <a href="#">京东社区</a>
    <div :class="lineClass"></div>
    <a href="#">京东公益</a>
    <div :class="lineClass"></div>
    <a href="#">English Site</a>
    <p>Copyright © 2004-2022 京东JD.com 版权所有</p>
  </div>
</template>

<script>
  export default {
    name: "Leg",
    data() {
      return {
        lineClass: 'myLine'
      }
    }
  }
</script>

<style scoped>
  #leg {
    height: 86px;
    text-align: center;
    padding: 10px 0px;
  }

  a {
    font-family: Arial, Verdana, 宋体;
    font-size: 12px;
    text-decoration: none;
    color: #999999;
    margin: 0px 15px;
  }

  .myLine {
    display: inline-block;
    height: 12px;
    width: 1px;
    background: #999999;
    vertical-align: text-bottom;

  }

  p {
    font-family: Arial, Verdana, 宋体;
    font-size: 12px;
    color: #999999;
  }
</style>

二、路由router index.js代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Head from "@/components/Head";
import Neck from "@/components/Neck";
import Body from "@/components/Body";
import Leg from "@/components/Leg";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Head',
      name: 'Head',
      component: Head
    },
    {
      path: '/Neck',
      name: 'Neck',
      component: Neck
    },
    {
      path: '/Body',
      name: 'Body',
      component: Body
    },
    {
      path: '/Leg',
      name: 'Leg',
      component: Leg
    }
  ]
})

三、App.vue 代码如下：

<template>
  <div id="app">
    <Head></Head>
    <Neck></Neck>
    <Body></Body>
    <leg></leg>
  </div>
</template>

<script>
  import Head from "./components/Head";
  import Neck from "./components/Neck";
  import Body from "./components/Body";
  import Leg from "./components/Leg";

  export default {
    name: 'App',
    components: {Leg, Body, Neck, Head}
  }
</script>

<style>

</style>

四、页面展示