ElementUi视频背景

不多说,copy即可

rc.mp4:

链接:https://pan.baidu.com/s/1ku_-GbDkVYZCrAlhsY1obg 
提取码:shgp 

<template>
    <div style="text-align: center">
        <div class="homepage-hero-module">
            <div class="video-container">
                <div :style="fixStyle" class="filter" >
                    <div class="box" >
                        <!--此处填写代码-->
                        <el-form style="margin-top: 25%">
                            <el-form-item >
                                <el-input class="in1"  v-model="user.username" prefix-icon="el-icon-user-solid" placeholder="请输入姓名" size="large"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-input class="in2"  v-model="user.password" prefix-icon="el-icon-hot-water" placeholder="请输入密码" size="large"  show-password></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary"  v-on:click="login" round>登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!--此处为视频,注意修改路径,也可放到video目录下-->
                <video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
                    <source src="../../video/rc.mp4" type="video/mp4"/>
                    <source src="../../video/rc.mp4" type="video/webm"/>
                </video>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                vedioCanPlay: false,
                fixStyle: '',
                user:{
                    username:"",
                    password:""
                }
            }
        },
        methods: {
            login(){
                //此处做登录处理
            },
            canplay() {
                this.vedioCanPlay = true
            }
        },
        mounted: function() {   //屏幕自适应
            window.onresize = () => {
                const windowWidth = document.body.clientWidth
                const windowHeight = document.body.clientHeight
                const windowAspectRatio = windowHeight / windowWidth
                let videoWidth
                let videoHeight
                if (windowAspectRatio < 0.5625) {
                    videoWidth = windowWidth
                    videoHeight = videoWidth * 0.5625
                    this.fixStyle = {
                        height: windowWidth * 0.5625 + 'px',
                        width: windowWidth + 'px',
                        'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                        'margin-left': 'initial'
                    }
                } else {
                    videoHeight = windowHeight
                    videoWidth = videoHeight / 0.5625
                    this.fixStyle = {
                        height: windowHeight + 'px',
                        width: windowHeight / 0.5625 + 'px',
                        'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                        'margin-bottom': 'initial'
                    }
                }
            }
            window.onresize()
        }
    }
</script>


<style scoped>
    .homepage-hero-module,
    .video-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    .video-container .poster img{
        z-index: 0;
        position: absolute;
    }

    .video-container .filter {
        z-index: 1;
        position: absolute;
        background: rgba(0, 0, 0, 0);
        text-align: center;
        width: 100%;
    }

    .fillWidth {
        width: 200%;
    }
    .box{
        position: absolute;
        text-align: center;
        z-index: 100;
        width: 100%;
        height: 100%;
    }

    .in1{    /*s2是我的输入框class*/
        margin-top: 30px;    /*调整边距*/
        width: 380px;    /*调整整个组件的宽度*/

    }
    .in1>>>.el-input__inner{   /*或者 .s2>>>.el-input__inner  */
        background:rgba(0,0,0,0.2);    /*调整inner的背景色,透明*/
        height: 44px;    /*调整inner的高度*/
        border-radius: 22px;    /*输入框圆角值*/
        border-color: azure;

    }
    .in2{    /*s2是我的输入框class*/
        margin-top:10px;    /*调整边距*/
        width: 380px;    /*调整整个组件的宽度*/

    }
    .in2>>>.el-input__inner{   /*或者 .s2>>>.el-input__inner  */
        background:rgba(0,0,0,0.2);    /*调整inner的背景色,透明*/
        height: 44px;    /*调整inner的高度*/
        border-radius: 22px;    /*输入框圆角值*/
        border-color: azure;
    }
    .el-button{
        width: 200px;
    }
</style>

 

原文地址:https://blog.csdn.net/weixin_52364578/article/details/117856088

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


el-menu 有个属性 :default-active="curActive"  el-menu-item有个属性:index=“home”这2个属性值对上号就自动定位了data(){ return{ curActive:"home" }; },
基础用法1<el-inputv-model="input1"palcehoder="请输入"></el-input>23varMain={4data(){5return{6input1:''7}8}9}10varCtor=Vue.extend(Main)11newCtor().$mount('#app&#03
 1.安装element-uinpminstallelement-ui-S 2.在main.js中importElementUIfrom'element-ui'import'element-ui/libheme-chalk/index.css'Vue.use(ElementUI)注意index.css的路径不要出错:在node_modules文件夹里node_modules\element-ui\lib\theme-c
layout布局通过基础的24分栏,可进行快速布局基础布局使用单一分栏创建基础的栅格布局,通过span属性指定每栏的大小<el-col:span="8"></el-col>1<el-row>2<el-col:span="8"><divclass="grid-contentbg-purple"></div>&
 今天做一个选择年份的功能,直接调用了ElementUI里面的DatePicker组件,官网上有该组件的用法介绍,讲得很清楚。 我的代码: 官网说明: 奇怪的事情发生了,我明明按照例子写了  value-format="yyyy" 可是获得的值却一直还是Date对象 仔细检查后,我突然发现我的v-model
  that.end 即为结束日期
vueelementUitree懒加载使用详情2018年11月21日11:17:04开心大表哥阅读数:3513 https://blog.csdn.net/a419419/article/details/84315751 背景:vue下使用elementUI文档:http://element-cn.eleme.io/#/zh-CN/componentree#tree-shu-xing-kong-jian需求:只保存二
环境搭建说明:1、全局安装angluar脚手架npminstall-g@angular/cli2、初始化项目(支持scss)ngnew项目名称--style=scss//进入项目cd项目名称运行代码可以是:serve或者npminstall(安装依赖)npmstart(运行)3、安装elementnpm
1、在写埋点监控项目的时候,需求是表格里面的数据后台传递过来为0,但是要求显示的时候为—,在elementUI判断,将prop去掉在下面加上<templateslot-scope="scope"><emplate>里面在写vue的判断,因为通过Scopedslot可以获取到row,column,$index和store(table内容的状态管理)的数据。2、
<el-table-columnprop="pubArea"//表格data中对应的字段column-key="pubArea"//过滤条件变化时根据此key判断是哪个表头的过滤label="报修类型"align="center"width=
1.npminstallbabel-plugin-component-D   然后.babelrc替换plugins 文件就在根目录下  2.组件中英文及自定义中英文importVueI18nfrom'vue-i18n'importenLocalefrom'element-ui/lib/locale/lang/en'importzhLocalefrom'element-ui/lib/locale/lang/zh-C
 <el-treeref="tree":data="menu.treeData":props="menu.defaultProps":filter-node-method="filterNode":expand-on-click-node=&quot
2019独角兽企业重金招聘Python工程师标准>>>使用vue+elementui的tree组件,elementui官网elementui的tree组件问题描述:tree层级过多时左右不可滚动问题解决:修改overflow属性值.el-tree-node>.el-tree-node_children{overflow:visible;} 其他相关链接:css--ov
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色.el-menu-item.is-active{background-color:#00b4aa!important;} 在使用elementUI构建vue项目的时候会遇到页面刷新的时候子路由会保
1.首先创建Vue项目(使用vue-cli进行创建)创建项目文章指导地址: https://blog.csdn.net/assiduous_me/article/details/892086492.ElementUI:一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库 链接地址:http://element.eleme.io/#/zh-CN3.正式开
使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多)第一种方法:使用命令行主题工具使用vue-cli安装完项目并引
每页显示的序号都是一样的:<el-table:data="tableData"highlight-current-row@current-change="handleCurrentChange"><el-table-columntype="index"width="50"></el-table-column><el-table>根据
  记录一下自己踩的坑,控制element内的table的某列显示隐藏不能用v-show,而是要用v-if具体网上百度了,看一下v-show和v-if的区别吧猜测:由于el-table-column会生成多行标签元素,根据v-show是不支持template语法的,推断v-show不能显示隐藏多个元素 
样式重置单vue文件中重置全局重置多写一个style不加scrop,可能会影响全局样式待补充table单价数量小计3252?在ElementUI中,我需要获取row内的数据并进行计算,需要用到v-slot<el-table-columnlabel="小计"><templatev-slot="scope">{{scop
工作需要做一个带滑块效果的导航栏,初步想法是用element的导航组件去做,后面摸坑结合各位大佬的博客初步实现效果,话不多说,直接上代码,记录一下爬坑之旅1<template>2<divclass="y-nav">3<el-rowclass="nav">4<el-menu5:default-active="$route.