Vue复刻华为官网(三)

1 底部列表

1.1 思路

如上图,这整个的大盒子,又可以被分为上中下三个小盒子,上、下盒子都被分为左右两个小盒子。这部分的难点主要体现在搜索栏上,特别是搜索栏聚焦的时候,会有一个阴影的效果,失去聚焦之后阴影效果会消失。如下

这部分可以使用两个鼠标事件搞定,@focus (组件获取焦点的时候触发)、@blur (组件失去焦点的时候触发)。当事件被触发的时候,操作Dom,更改组件的样式,从而达到想要的效果。

另外一个难点就是下盒子右侧图标,在悬浮的时候会更改颜色,如下。

这部分我直接是写了两个svg,通过一个字段的T/F,来控制这两个显隐。在写博客的时候,我突然想到可不可以直接用:hover解决,尝试了一下,发现是不可以的,更改background-color也会更改其背景的颜色,如下。

所以没有其他好方法前,还是使用两个svg解决吧。

1.2 代码


      
        首页
        
          

          
            
              
            
          

        
      
      
        
          关于华为
          
            {{ i }}
          
        
        
          新闻与活动
          
            {{ i }}
          
        
        
          发现华为
          
            {{ i }}
          
        
        
          我们的产品
          
            {{ i }}
          
        
        
          技术支持
          
            {{ i }}
          
        
      
      
        
          
            {{ i }}
          
        
        
          
            
              
            
            
              
            
          
          
            
              
            
            
              
            
          
          
            
              
              
              
              
            
            
              
              
              
              
            
          
          
            
              
            
            
              
            
          
        
      
      
        
          ©2022 华为技术有限公司
          粤A2-20044005号
          粤公网安备44030702002388号
           | 
          联系我们
          法律声明
          隐私政策
          除名查询

        
      
    
data() {
    return {
      // 第一列
      firstInfo: [
        "公司简介",
        "可持续发展",
        "信任中心",
        "管理层信息",
        "招贤纳士",
        "供应商",
        "查看更多",
      ],
      // 第二列
      secondInfo: [
        "新闻",
        "展会活动",
        "多媒体"
      ],
      // 第三列
      thirdInfo: [
        "华为技术专享",
        "智能世界2030报告",
        "出版物"
      ],
      // 第四列
      forthInfo: [
        "个人及家庭用品",
        "企业业务产品",
        "运营商网络产品",
        "华为云服务"
      ],
      // 第五列
      fifthInfo: [
        "消费者技术支持",
        "华为云技术支持",
        "企业技术支持",
        "运营商技术支持",
        "产品安全通告"
      ],
      // 左侧列
      leftInfo: [
        "华为商城",
        "华为云",
        "华为智能光伏",
        "产品定义社区",
        "华为心声社区"

      ],
      // 切换图片状态
      f1: true,
      f2: true,
      f3: true,
      f4: true,
      // 上升
      f5: true,
      // 在线购买上下箭头切换
      f6: true,
    }
  },
  methods:{
      changeInputStyle() {
      let d1 = document.getElementById("div1_input");
      d1.style = "border:1px solid rgb(190, 189, 189); box-shadow: 1px 1px 4px 4px rgba(190, 189, 189,0.5);"
    },
    cancelInputStyle() {
      let d1 = document.getElementById("div1_input");
      d1.style = "border:1px solid rgb(212, 212, 212) "
    }
  }
/* 底部 */
/* 目测10 70 15 5 */
.div_footer {
  width: 100%;
  height: 90vh;
  background-color: rgb(242, 242, 242);
}

.footer_div1 {
  width: 85.652%;
  margin: 0 auto;
  height: 12vh;
  border-bottom: 1px solid rgb(226, 226, 226);
}

.div1_span1 {
  height: 100%;
  margin: 0 0;
  font-size: 16px;
  line-height: 85px;
  cursor: pointer;
  color: rgb(89, 87, 87);
}

.div1_input {

  width: 38%;
  height: 50%;
  margin-top: 2%;
  float: right;
  margin-left: 1%;
  border: 1px solid rgb(212, 212, 212);
  background-color: white;


}

.div1_input_input {
  width: 75%;
  margin-left: 5%;
  float: left;
  height: 97%;
  outline: none;
  font-size: 16px;
  border: 0px;

}

/* 被选中的样式 */

.div1_span2 {
  float: right;
  display: block;
  height: 70%;
  padding-left: 2%;
  margin-top: 1vh;
  border-left: 1px solid rgb(224, 224, 224);
  width: 9%;
  cursor: pointer;

}

.footer_div2 {
  width: 85.652%;
  margin: 0 auto;
  height: 50vh;
  display: flex;
  margin-top: 6vh;
  border-bottom: 1px solid rgb(226, 226, 226);
}

.footer_div3 {
  width: 85.652%;
  margin: 0 auto;
  height: 16vh;
  /* border-bottom: 1px solid red; */
}

.footer_div4 {
  width: 100%;
  height: 6vh;
  background-color: rgb(230, 230, 230);
}

/* ~底部组件 */

/* 底部五栏 */
.div2_div1 {
  width: 20%;
  height: 100%;
}

.div2_div2 {
  width: 20%;
  height: 100%;
}

.div2_div3 {
  width: 20%;
  height: 100%;
}

.div2_div4 {
  width: 20%;
  height: 100%;
}

.div2_div5 {
  width: 20%;
  height: 100%;
}

.div2_div1 h2 {
  font-size: 16px;
}

.div2_div2 h2 {
  font-size: 16px;
}

.div2_div3 h2 {
  font-size: 16px;
}

.div2_div4 h2 {
  font-size: 16px;
}

.div2_div5 h2 {
  font-size: 16px;
}

.div2_ul {
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0px 0px;

}

.ul_li {
  width: 45%;
  height: 8%;
  margin-top: 3%;
  line-height: 40px;
  font-size: 14px;
  color: rgb(89, 87, 87);
  cursor: pointer;
}

.div3_left {
  width: 50%;
  height: 100%;
  float: left;

}

.left_ul {
  width: 100%;
  height: 100%;
  margin: 0 0;

  padding: 0 0;
  cursor: pointer;
  list-style: none;
}

.left_li {
  width: auto;
  height: 98%;
  margin-right: 4%;
  float: left;
  line-height: 112px;
  font-size: 14px;
  color: rgb(90, 88, 88);
  cursor: pointer;
  /* border: 1px solid red; */
}

.div3_right {
  float: right;
  width: 18%;
  height: 5vh;
  margin-top: 5vh;
  cursor: pointer;

}

.right_f1 {
  width: 20%;
  height: 100%;
  float: left;

}

/* ~底部五栏 */

1.3 效果图

1.3.1 搜索框

1.3.2 商标

2 公司信息

2.1 思路

这是属于非常基础的知识,很简单。我用了几个span解决。唯一可以记录的就是,各个小span的右边距是一样的,但是字数是不一样的,如果将span的宽度设置为一个定值,那么右边距"看起来"就会不一样,所以把span的width设置为auto,右边距设置为固定的值,就能实现图示的效果了。

2.2 代码


        
          ©2022 华为技术有限公司
          粤A2-20044005号
          粤公网安备44030702002388号
           | 
          联系我们
          法律声明
          隐私政策
          除名查询

        
      
.div4_main {
  width: 58%;
  margin-left: 22%;
  font-size: 13px;
  line-height: 44px;
  height: 100%;
  /* border: 1px solid red; */
}

.div4_main span {
  width: auto;
  color: rgb(102, 102, 123);
  margin-right: 2%;
  cursor: pointer;
}
.footer_div4 {
  width: 100%;
  height: 6vh;
  background-color: rgb(230, 230, 230);
}

2.3 效果图

3 上升按钮

3.1 思路

这个也是属于比较好实现的,使用一个fixed固定定位即可实现,同时有一个悬浮效果。这里和上面是不同的,svg的属性没有改变,改变的是盛放svg的容器,所以可以使用:hover实现,当鼠标移入到容器之中,即可通过改变背景颜色的方式,产生我们想要的效果。

3.2 代码


      
        
      

    
    
      
        
      
    
/* 上升 */
.div_up {
  position: fixed;
  width: 40px;
  height: 40px;
  background-color: rgb(160, 160, 160);
  bottom: 22px;
  right: 2px;
  cursor: pointer;

}

.div_up:hover {
  background-color: rgb(136, 136, 136);

}

.div_up2 {
  position: fixed;

  width: 40px;
  height: 40px;
  background-color: rgb(211, 85, 92);
  bottom: 66px;
  cursor: pointer;
  right: 2px;
}

/* ~上升 */

3.3 效果图

4 图标完善

4.1 思路

主要是刚开始的时候,没想写这么细,所以图标就没有写上,这些图标和华为的是有区别的,华为的图标可能是有自己的图标库,我的则是在阿里巴巴图标库中复制的,然后把他放在相应的位置就ok了

4.2 安利图标库

传送门,打开的时候,来到的是这样一个地方

可以搜索自己想使用的图标,如上箭头

选择一个自己喜欢的样式,鼠标悬浮上去,点击下载

可以选择自己的喜欢的颜色,也可以更改大小(都可以手动输入),然后可以下载成Png图片、AI,或者直接使用svg代码,即可使用。

作者:游坦之 原文地址:https://blog.csdn.net/m0_59792745/article/details/127594994

%s 个评论

要回复文章请先登录注册