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 个评论

要回复文章请先登录注册