flex商城布局案例

<template>
    <div>
        <div class="row1">
            <div class="company"></div>
            <div class="pic"></div>
            <div class="pic"></div>
            <div class="pic"></div>
        </div>
        <div class="row2">
            <div class="title">
                <div>手机</div>
                <div>查看更多</div>
            </div>
            <div class="pic-list">
                <div class="big"></div>
                <div class="right-list">
                    <div class="group">
                        <div class="phone"></div>
                        <div class="phone"></div>
                        <div class="phone"></div>
                        <div class="phone"></div>
                    </div>
                    <div class="group">
                        <div class="phone"></div>
                        <div class="phone"></div>
                        <div class="phone"></div>
                        <div class="phone"></div>
                    </div>

                </div>
            </div>
        </div>

        <div class="course-list">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Mi"
    }
</script>

<style scoped>
    .row1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .row1 .company {
        width: 210px;
        height: 180px;
        background-color: saddlebrown;
    }

    .row1 .pic {
        width: 266px;
        height: 180px;
        background-color: cadetblue;
    }

    .row2 .title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .row2 .pic-list {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .row2 .pic-list .big {
        background-color: aquamarine;
        height: 610px;
        width: 210px;
        margin-right: 20px;
    }

    .row2 .pic-list .right-list {
        /*background-color: antiquewhite;*/
        flex-grow: 1;
    }

    .row2 .pic-list .right-list .group {


        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .row2 .pic-list .right-list .phone {
        margin-bottom: 10px;
        border: 1px solid red;
        width: 200px;
        height: 300px;
    }

    .course-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .course-list .item {
        width: 24%;
        height: 100px;
        background-color: skyblue;
        margin-top: 15px;
    }
	
	// 如果最后一个元素，是第3个，右边距=一个位置 + 所有空白位置/3（有三个空白位置）
    .course-list .item:last-child:nth-child(4n - 1) {
        margin-right: calc(24% + 4% / 3);
    }

	// 如果最后一个元素，是第2个，右边距=两个位置 + 所有空白位置/3*2（有三个空白位置）
    .course-list .item:last-child:nth-child(4n - 2) {
        margin-right: calc(48% + 8% / 3);
    }
</style>

至此，结合以上的知识点，我们就可以来开发一个项目，但很多的页面按钮、标签、提示框等都需要自己手动，太费劲。

所以，接下来就要给大家的来聊一个UI框架 - ElementUI，他的内部提供了很多方便的样式和组件，可以加速我们开发。

8.ElementUI

Element，是有 饿了吗 团队开发一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库（也支持vue3.x）。

在他的基础上来开发，可以大大提升开发进度。

想要在项目中进行使用element-ui需要提前安装并引入。

8.1 引入

方式1：完整引入

• 安装

  cd 项目目录
  npm install element-ui
  

• 引入

  import Vue from 'vue';
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import App from './App.vue';
  
  Vue.use(ElementUI);
  
  new Vue({
      render: h => h(App),
  }).$mount('#app')
  
  

• 在组件中使用

  <el-button type="success">哈哈哈</el-button>
  

方式2：局部引入

• 安装

  cd 项目目录
  npm install element-ui
  

• 引入

  import Vue from 'vue';
  import { Button, Select } from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import App from './App.vue';
  
  
  Vue.use(Button)
  Vue.use(Select)
  
  new Vue({
      render: h => h(App),
  }).$mount('#app')
  
  

• 在组件中使用

  <el-button type="success">哈哈哈</el-button>
  

  完整组件名称：https://element.eleme.cn/#/zh-CN/component/quickstart

8.2 组件的使用

参见官方文档，在后续的项目开发中来应用并使用。