element 排版

转载

mob64ca140e0490 2025-02-05 12:06:28

文章标签 element 排版 html5 vue.js 前端 elementui 文章分类 机器学习人工智能

1.本案例灵感来源于小米官网 https://www.mi.com/

官方截图

element 排版_element 排版

element 排版_element 排版_02

产品效果图：

element 排版_elementui_03

二级菜单、产品详情

element 排版_element 排版_04

element 排版_elementui_05

element 排版_vue.js_06

商品分类

element 排版_elementui_07

购物车

element 排版_前端_08

element 排版_html5_09

登录页

element 排版_elementui_10

订单提交

element 排版_elementui_11

添加收货地址

element 排版_elementui_12

订单列表、个人中心

element 排版_前端_13

2.首先创建vue项目，采用开发工具Hbuilder。vue创建项目教程可参考：（一）Vue——如何创建一个Vue项目(完整步骤) - 㭌（mou）七

3.创建项目后安装elementui，按照官方教程即可，elementui官方地址：Element - The world's most popular Vue UI framework

创建好的项目目录结构大概这样子：

element 排版_前端_14

element 排版_element 排版_15

4.整个框架布局分为头部 src/page/top、内容src/page/index和底部src/page/foot。

内容src/page/index为一个共用容器，就像iframe标签一样，所有的路径访问将会显示在容器中，页面跳转的路径定义在src/router/index.js中

element 排版_element 排版_16

5.src/page/top/index.vue

<template>
  <div style="background-color: #3e3e3e;font-size: 14px;">
    <div style="width: 60%;height: 40px;margin: 0 auto;display: flex;">
      <div style="display: flex;flex: 1;">
        <div class="active">小米商城</div>
        <div class="active">MUI</div>
        <div class="active">LOT</div>
        <div class="active">云服务</div>
        <div class="active">金融</div>
        <div class="active">有品</div>
        <div class="active">小爱开发平台</div>
        <div class="active">政企服务</div>
        <div class="active">下载app</div>
        <div class="active">Select Region</div>
      </div>
      <div style="width: 258px;text-align: right;display: flex;">
        <div class="active" @click="loginModal">登录</div>
        <div class="active">注册</div>
        <div class="active">消息通知</div>
        <div class="shop-car">购物车（0）</div>
      </div>
    </div>

    <!-- 登录弹窗 -->
    <el-dialog
      title="User Login"
      :visible.sync="box"
      width="400px"
      center>
      <div>
        <el-form class="login-form"
                 status-icon
                 :rules="loginRules"
                 ref="loginForm"
                 :model="loginForm"
                 label-width="0">
          <el-form-item prop="username">
            <el-input size="small"
                      @blur="handleLogin"
                      v-model="loginForm.username"
                      auto-complete="off"
                      placeholder="用户名">
              <i slot="prefix" class="el-icon-user el-icon--right"/>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input size="small"
                      @blur="handleLogin"
                      :type="passwordType"
                      v-model="loginForm.password"
                      auto-complete="off"
                      placeholder="密码">
              <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
              <i slot="prefix" class="el-icon-lock el-icon--right"/>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-row :span="24">
              <el-col :span="12">
                <el-checkbox v-model="loginForm.autoLogin">下次自动登录</el-checkbox>
              </el-col>
              <el-col :span="12" style="text-align: right;">
                <el-button type="primary"
                           style="width: 100px;"
                           @click.native.prevent="handleLogin"
                           class="login-submit">
                           登录
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>

        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
      data() {
        return {
           activeIndex: '1',
          activeIndex2: '1',
          box: false,
          loginForm: {
            username: "",
            //密码
            password: "",
            autoLogin: false
          },
          loginRules: {
            username: [
              {required: true, message: "请输入用户名", trigger: "blur"}
            ],
            password: [
              {required: true, message: "请输入密码", trigger: "blur"},
              {min: 1, message: "密码长度最少为6位", trigger: "blur"}
            ]
          },
          passwordType: "password"
        };
      },
      mounted() {
      },
      methods: {
         homePage(){
           this.$router.push({path: '/home/index'});
         },
         handleSelect(key, keyPath) {
           console.log(key);
           if(key == '1'){
             this.$router.push({path: '/home/index'});
           }else{
             this.$router.push({path: '/test/index'});
           }

        },
        loginModal(){
          this.box = true;
        },
        showPassword() {
          this.passwordType === ""
            ? (this.passwordType = "password")
            : (this.passwordType = "");
        },
        handleLogin() {//登录
          this.$refs.loginForm.validate(valid => {
            if (valid) {
              const loading = this.$loading({
                lock: true,
                text: '登录中,请稍后。。。',
                spinner: "el-icon-loading"
              });
              setTimeout(function(){
                loading.close();
              },1000)

            }
          });
        },
      }
    };
</script>

<style>
  .active{
    line-height: 40px;
    color: #cfcfcf;
    margin-right: 20px;
    font-size: 12px;
  }
  .active:hover{
    cursor: pointer;
    color: #FFFFFF;
  }
  .shop-car{
    text-align: center;
    cursor: pointer;
    width: 100px;
    line-height: 40px;
    height: 40px;
    display: inline-block;
    background-color: #8f8f8f;
  }
  .shop-car:hover{
    background-color: #00FFFF;
  }
</style>

6.src/page/index/index.vue

<template>
  <div style="width: 100%;height: 100%;overflow: auto;">
    <top></top>
    <router-view></router-view>
    <foot></foot>
  </div>
</template>

<script>
  import top from "../top/index.vue";
  import foot from "../foot/index";

  export default {
      components: {
        top,
        foot
      },
      name: "index",
      data() {
        return {
        };
      },
      mounted() {
      },
      methods: {
      }
    };
</script>

<style>
</style>

7.src/page/foot/index.vue

<template>
  <div style="font-size: 14px;">
    <div style="width: 60%;margin: 0 auto;margin-bottom: 30px;">
      <div style="display: flex;">
        <div style="flex: 1;">
          <div class="foot-title">帮助中心</div>
          <div class="foot-item">账户管理</div>
          <div class="foot-item">购物指南</div>
          <div class="foot-item">订单操作</div>
        </div>
        <div style="flex: 1;">
          <div class="foot-title">服务支持</div>
          <div class="foot-item">账户管理</div>
          <div class="foot-item">购物指南</div>
          <div class="foot-item">订单操作</div>
        </div>
        <div style="flex: 1;">
          <div class="foot-title">线下门店</div>
          <div class="foot-item">账户管理</div>
          <div class="foot-item">购物指南</div>
          <div class="foot-item">订单操作</div>
        </div>
        <div style="flex: 1;">
          <div class="foot-title">关于小米</div>
          <div class="foot-item">账户管理</div>
          <div class="foot-item">购物指南</div>
          <div class="foot-item">订单操作</div>
        </div>
        <div style="flex: 1;">
          <div class="foot-title">关于我们</div>
          <div class="foot-item">账户管理</div>
          <div class="foot-item">购物指南</div>
          <div class="foot-item">订单操作</div>
        </div>

      </div>
    </div>
    <div style="background-color: #3e3e3e;height: 40px;text-align: center;line-height: 40px;color: #afafaf;">
      申明：本网页仅供学习参考 @XXX XXX XXX
    </div>
  </div>

</template>

<script>
</script>

<style>
  .foot-title{
    height: 40px;
    line-height: 40px;
  }
  .foot-item{
    height: 25px;
    line-height: 25px;
    color: gray;
  }
  .foot-item:hover{
    cursor: pointer;
    color: #e37a2f;
  }
</style>