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代码,即可使用。