视频弹幕设计网站04--------header样式-阿里云开发者社区

视频弹幕设计网站04--------header样式

2024-06-28 7

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 视频弹幕设计网站04--------header样式

1、header里面的样式

2、数据就放到data里面

3、导航栏的组件

4、利用ELEMENT-UI设计一个导航菜单

5、把这个隐藏代码展开

6、找到对应代码复制下来

7、不用，将他删掉

8、打开默认的选择地址

9、设计的字符串为1

10、引入CSS的样式库，没有出现样式是因为在main.js中没有引入样式库

11、就说明他很经常接触到样式库了

12、header里面有一个背景颜色

13、header的背景颜色就是这样

14、header的颜色得到了统一

15、现在的默认样式是这个

16、默认打开就是1的选项

17、打开样式是2-1

18、第二个样式

19、router-view，这里的样式放到这里

20、配置子组件样式

21、新建vue这个页面

22、创建home这个组件

23、配置home的子路径

24、删掉他

25、默认的也改为home

26、这里点了之后，并没有home

27、这里el的是没有true，这里允许路由就可以出现了

28、这里可以添加一个搜索框的样式

29、这里设置一个搜索框

30、这里设置一个搜索框的视频

31、searchInput，这里设置一个类的样式

32、这里设置一个搜索宽度，36%

33、这里有一个需要一个点击按钮，你可以给他加上

34、这样输入框的样式就呈现出这样了

35、这里给他定义一个函数search

36、你点击了

37、点击了控制台，您已经点击了

38、点击回车相当于点击文字

39、给他拿过来

40、点击了

41、效果

videoMain.vue源码

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width: 100%;padding-left: 40px;"
    :router="true"
    >
    <el-menu-item index="/home">首页</el-menu-item>
    <el-sub-menu index="2">
      <template #title>分类</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>选项4</template>
        <el-menu-item index="2-4-1">选项1</el-menu-item>
        <el-menu-item index="2-4-2">选项2</el-menu-item>
        <el-menu-item index="2-4-3">选项3</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="" style="width: 36%">
            <el-input @keydown.enter="mySearch()" placeholder="请输入您想看的视频">
            <template #append>  
                <el-button @click="mySearch()">搜索</el-button>
            </template>
        </el-input>
        
    </el-menu-item>
  </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
    data(){
        return{
            activeIndex: '/home'
        }
    },
    methods: {
        mySearch(){
            console.log("您已经点击了")
        }
    }
};
</script>
 
<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>

Main页面的内容

<template>
  <div>主体部分</div>
</template>
 
<script>
export default {
 
}
</script>
 
<style>
 
</style>