文章目录

1 底部列表
- 1.1 思路
- 1.2 代码
- 1.3 效果图
- - 1.3.1 搜索框
  - 1.3.2 商标
2 公司信息
- 2.1 思路
- 2.2 代码
- 2.3 效果图
3 上升按钮
- 3.1 思路
- 3.2 代码
- 3.3 效果图
4 图标完善
- 4.1 思路
- 4.2 安利图标库

1 底部列表

1.1 思路

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

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

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

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

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

1.2 代码

 <div class="div_footer"><div class="footer_div1"><span class="div1_span1">首页</span><div class="div1_input" id="div1_input"><input type="text" placeholder="搜索huawei.com" class="div1_input_input" @focus="changeInputStyle()"@blur="cancelInputStyle()"><span class="div1_span2"><svg t="1666947938417" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="5102" width="32" height="32"><pathd="M888.6 851.9L669.1 632.5c44.9-53.3 72-122.1 72-197 0-169-137.5-306.6-306.5-306.6S128 266.4 128 435.4 265.5 742 434.5 742c75.9 0 145.3-27.8 198.9-73.6l219.3 219.3c4.9 4.9 11.4 7.4 17.9 7.4 6.5 0 13-2.5 17.9-7.4 10-9.9 10-25.9 0.1-35.8z m-710-416.5c0-141.1 114.8-255.9 255.9-255.9s255.9 114.8 255.9 255.9c0 141.1-114.8 255.9-255.9 255.9S178.6 576.6 178.6 435.4z"p-id="5103" fill="#cdcdcd"></path></svg></span></div></div><div class="footer_div2"><div class="div2_div1"><h2>关于华为</h2><ul class="div2_ul"><li class="ul_li" v-for="(i, index) in firstInfo" :key="index">{{ i }}</li></ul></div><div class="div2_div2"><h2>新闻与活动</h2><ul class="div2_ul"><li class="ul_li" v-for="(i, index) in secondInfo" :key="index">{{ i }}</li></ul></div><div class="div2_div3"><h2>发现华为</h2><ul class="div2_ul"><li class="ul_li" v-for="(i, index) in thirdInfo" :key="index">{{ i }}</li></ul></div><div class="div2_div4"><h2>我们的产品</h2><ul class="div2_ul"><li class="ul_li" v-for="(i, index) in forthInfo" :key="index">{{ i }}</li></ul></div><div class="div2_div5"><h2>技术支持</h2><ul class="div2_ul"><li class="ul_li" v-for="(i, index) in fifthInfo" :key="index">{{ i }}</li></ul></div></div><div class="footer_div3"><div class="div3_left"><ul class="left_ul"><li class="left_li" v-for="(i, index) in leftInfo" :key="index">{{ i }}</li></ul></div><div class="div3_right"><div class="right_f1" @mouseenter="f1 = !f1" @mouseleave="f1 = !f1" style="width:18%;"><svg t="1666964932098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="3480" width="32" height="32" v-if="f1"><pathd="M54.272 314.368h197.632v656.896H54.272zM153.6 51.2a102.4 102.4 0 0 0-102.4 102.4 102.4 102.4 0 0 0 102.4 96.768A102.4 102.4 0 0 0 256 153.6a102.4 102.4 0 0 0-102.4-102.4zM908.8 401.408a196.096 196.096 0 0 0-162.816-67.072 217.6 217.6 0 0 0-194.56 110.592h-3.072V314.368H382.464c3.072 67.072 0 656.896 0 656.896h197.632V563.2a94.72 94.72 0 0 1 98.816-75.776c64 0 95.744 46.592 95.744 136.704V972.8H972.8v-373.76a288.256 288.256 0 0 0-64-197.632z"fill="#707070" p-id="3481"></path></svg><svg t="1666964932098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="3480" width="32" height="32" v-else><pathd="M54.272 314.368h197.632v656.896H54.272zM153.6 51.2a102.4 102.4 0 0 0-102.4 102.4 102.4 102.4 0 0 0 102.4 96.768A102.4 102.4 0 0 0 256 153.6a102.4 102.4 0 0 0-102.4-102.4zM908.8 401.408a196.096 196.096 0 0 0-162.816-67.072 217.6 217.6 0 0 0-194.56 110.592h-3.072V314.368H382.464c3.072 67.072 0 656.896 0 656.896h197.632V563.2a94.72 94.72 0 0 1 98.816-75.776c64 0 95.744 46.592 95.744 136.704V972.8H972.8v-373.76a288.256 288.256 0 0 0-64-197.632z"fill="#2c2c2c" p-id="3481"></path></svg></div><div class="right_f1" @mouseenter="f2 = !f2" @mouseleave="f2 = !f2"><svg t="1666965382576" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="4475" width="36" height="36" v-if="f2"><pathd="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"p-id="4476" fill="#707070"></path></svg><svg t="1666965382576" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="4475" width="36" height="36" v-else><pathd="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"p-id="4476" fill="#2c2c2c"></path></svg></div><div class="right_f1" @mouseenter="f3 = !f3" style="padding-top:4px;margin-left:2px;width:18%;"@mouseleave="f3 = !f3"><svg t="1666965512562" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="6023" width="26" height="28" v-if="f3"><pathd="M1023.6801 177.544517A185.222118 185.222118 0 0 0 839.097782 0H184.902218A184.902218 184.902218 0 0 0 0 184.902218v54.383005zM0 853.813183A184.582318 184.582318 0 0 0 184.902218 1023.6801h653.875664A184.902218 184.902218 0 0 0 1023.6801 839.097782v-47.345205zM566.862855 499.044049c-5.758201 2.5592-17.914402 0-23.352702 2.5592a69.098407 69.098407 0 0 0-16.954702 0 199.297719 199.297719 0 0 0 1.599501 52.143705l54.702905-2.5592a171.466417 171.466417 0 0 0 16.954702-8.957201c24.312402-10.556701 46.385505-22.393002 69.098406-33.909403a319.900031 319.900031 0 0 0 58.541706-28.791003 174.025617 174.025617 0 0 1 47.025305 16.954701c19.833802 7.677601 38.707904 11.196501 58.541705 19.513902a447.860044 447.860044 0 0 0 44.466105 18.234302l57.262105-3.8388v-1.5995a187.781318 187.781318 0 0 0 0-52.143705L895.720087 479.850047a469.613246 469.613246 0 0 1-45.745704-18.234302 206.65542 206.65542 0 0 1-46.705405-16.634802l127.960013-63.980006a479.850047 479.850047 0 0 0 0-91.491409c-63.980006 5.1184-124.761012 7.677601-191.940019 11.836301a270.635426 270.635426 0 0 1-71.657607 2.559201l-61.100906-30.070603c-17.274602 28.791003-37.108404 56.622306-54.702905 84.773508a178.824117 178.824117 0 0 1-26.231803 41.906904c2.8791 7.997501 12.796001 7.357701 20.793502 10.236801a212.733521 212.733521 0 0 1 43.186505 16.954702c8.957201-1.5995 10.236801-11.516401 14.395501-18.234302 10.556701-16.634802 23.352702-33.909403 33.909403-50.864105a349.010934 349.010934 0 0 0 71.657607-3.8388h25.911903c12.796001-1.9194 30.390503 0 43.186504-3.838801 22.712902-5.1184 50.864105 2.8791 71.657607-4.1587v1.5995a17.594502 17.594502 0 0 1 0 8.957201c-4.4786 8.637301-21.433302 11.196501-30.070603 15.675101l-62.380506 31.990004a112.284911 112.284911 0 0 0-24.952202 11.836301 223.930022 223.930022 0 0 1-57.262106-21.113402A118.043112 118.043112 0 0 1 639.800062 383.880037c-10.236801 2.5592-25.592002 37.108404-33.909403 45.745705 1.9194 8.317401 42.226804 20.153702 52.143705 23.352702v1.5995c-30.390503 14.395501-59.501406 31.990003-90.211809 44.466105zM457.457045 598.213058a81.894408 81.894408 0 0 0 22.393002-1.5995A199.617619 199.617619 0 0 0 479.850047 543.830053l-95.97001 5.118401V393.477038a311.90253 311.90253 0 0 0 0-71.657607l-35.189003 2.559201c-7.037801 0-17.274602-1.9194-22.073102 0a95.970009 95.970009 0 0 0-22.393002 0v156.431115a311.90253 311.90253 0 0 1 0 71.657607l-230.967823 13.115901v52.143705a531.673852 531.673852 0 0 0 91.491409-5.1184c14.395501-2.8791 31.990003 3.5189 42.866604-2.5592h26.231803a80.614808 80.614808 0 0 0-14.395502 18.234301c-10.236801 14.395501-21.753202 28.471103-31.990003 43.186505-6.398001 8.637301-17.274602 16.634802-21.113402 27.511402-12.796001 3.199-63.980006 0-72.937207 6.398001a69.098407 69.098407 0 0 0-16.954702 0v52.143705a359.247735 359.247735 0 0 0 70.378007-5.118401c8.957201-1.9194 21.753202 0 28.791003 0 13.435801-2.8791 37.428304 3.199 47.025305-2.5592s26.871603-31.990003 33.909403-43.186504c24.952202-34.549203 57.901906-68.458607 80.934708-104.28741a466.734146 466.734146 0 0 0 76.776007-5.118401c13.115901-3.199 37.108404 2.8791 46.705405-2.8791z"fill="#707070" p-id="6024"></path><pathd="M167.947516 432.504842a35.189003 35.189003 0 0 0 20.793502 0l67.179007-2.5592c0-12.476101-12.156201-17.914402-18.234302-25.911903C223.930022 383.880037 206.01562 367.885036 194.179319 348.051234l-63.980006 3.8388h-24.952203c3.8388 10.556701 14.715401 17.594502 21.113402 25.911903a398.275539 398.275539 0 0 0 41.587004 53.423305zM170.826617 534.233052a80.614808 80.614808 0 0 0 25.911902 0L255.920025 530.074352c-2.2393-9.277101-10.876601-14.075601-15.675102-20.793502-10.236801-13.755701-20.153702-26.551703-30.070602-40.307404-4.7985-6.398001-12.796001-11.516401-15.675102-19.833802a199.297719 199.297719 0 0 0-54.702905 2.8791c-7.677601 0-18.234302-2.2393-23.672603 0a39.347704 39.347704 0 0 0-11.516401 0c12.476101 19.833802 31.990003 36.148704 44.146205 54.702905 5.758201 7.677601 11.516401 21.433302 21.113402 24.952203z"fill="#707070" p-id="6025"></path><pathd="M934.747891 598.213058v-51.184005c-59.501406 0-106.84661 8.317401-164.108716 7.997501v-24.952202a257.839425 257.839425 0 0 0-50.864105 2.5592c-7.997501 1.9194-20.153702-2.2393-26.231802 0h-2.559201a86.373008 86.373008 0 0 1 0 26.231803l-162.829115 8.9572v52.143706a275.433927 275.433927 0 0 0 54.702905-3.838801c16.314902-3.5189 33.909403 0 48.304905-2.5592s38.068104 3.5189 47.985004-2.5592a50.544205 50.544205 0 0 1 13.115902 0v77.095907a150.353015 150.353015 0 0 0 0 36.468604c20.473602-1.9194 52.783505-3.8388 77.095907-5.118401V641.079663a134.677913 134.677913 0 0 1 4.158701-33.269604c54.383005 0 107.48641-5.758201 159.950015-8.957201zM427.706342 614.84786l-87.332709 4.1587a121.562012 121.562012 0 0 0 18.234302 37.748204c14.715401 28.791003 29.750703 56.622306 42.866604 86.053109l54.702906-2.559201a81.574508 81.574508 0 0 0 31.990003-2.5592c2.8791-7.677601-11.836301-25.272102-15.675102-31.990003-15.675102-30.390503-29.110903-61.420806-45.425804-90.211809z"fill="#707070" p-id="6026"></path><pathd="M892.840987 614.84786h-5.1184c-3.8388 2.5592-13.435801 0-19.513902 1.5995a184.902218 184.902218 0 0 0-53.423305 5.118401 168.267416 168.267416 0 0 1 21.113402 35.189003c11.836301 19.513902 25.272102 38.388004 36.468603 58.861606a370.764136 370.764136 0 0 0 63.980006-4.158701h18.234302a1129.56701 1129.56701 0 0 0-58.541705-97.889409zM657.074664 627.963761c-4.7985 3.199-14.075601 0-20.793502 1.5995-15.355201 3.199-45.105904 0-55.022805 5.118401s-8.637301 16.314902-12.796001 23.352702c-9.597001 15.675102-18.874102 31.990003-27.511403 49.584505-4.4786 7.997501-6.398001 18.874102-13.115901 24.952203a17.914402 17.914402 0 0 1 0 3.8388l79.975007-3.8388c12.476101-24.312402 26.231803-49.264605 39.027804-73.257108a140.116214 140.116214 0 0 1 13.115901-25.911902c0-4.1587 0-3.199-2.5592-5.438301z"fill="#707070" p-id="6027"></path></svg><svg t="1666965512562" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="6023" width="26" height="28" v-else><pathd="M1023.6801 177.544517A185.222118 185.222118 0 0 0 839.097782 0H184.902218A184.902218 184.902218 0 0 0 0 184.902218v54.383005zM0 853.813183A184.582318 184.582318 0 0 0 184.902218 1023.6801h653.875664A184.902218 184.902218 0 0 0 1023.6801 839.097782v-47.345205zM566.862855 499.044049c-5.758201 2.5592-17.914402 0-23.352702 2.5592a69.098407 69.098407 0 0 0-16.954702 0 199.297719 199.297719 0 0 0 1.599501 52.143705l54.702905-2.5592a171.466417 171.466417 0 0 0 16.954702-8.957201c24.312402-10.556701 46.385505-22.393002 69.098406-33.909403a319.900031 319.900031 0 0 0 58.541706-28.791003 174.025617 174.025617 0 0 1 47.025305 16.954701c19.833802 7.677601 38.707904 11.196501 58.541705 19.513902a447.860044 447.860044 0 0 0 44.466105 18.234302l57.262105-3.8388v-1.5995a187.781318 187.781318 0 0 0 0-52.143705L895.720087 479.850047a469.613246 469.613246 0 0 1-45.745704-18.234302 206.65542 206.65542 0 0 1-46.705405-16.634802l127.960013-63.980006a479.850047 479.850047 0 0 0 0-91.491409c-63.980006 5.1184-124.761012 7.677601-191.940019 11.836301a270.635426 270.635426 0 0 1-71.657607 2.559201l-61.100906-30.070603c-17.274602 28.791003-37.108404 56.622306-54.702905 84.773508a178.824117 178.824117 0 0 1-26.231803 41.906904c2.8791 7.997501 12.796001 7.357701 20.793502 10.236801a212.733521 212.733521 0 0 1 43.186505 16.954702c8.957201-1.5995 10.236801-11.516401 14.395501-18.234302 10.556701-16.634802 23.352702-33.909403 33.909403-50.864105a349.010934 349.010934 0 0 0 71.657607-3.8388h25.911903c12.796001-1.9194 30.390503 0 43.186504-3.838801 22.712902-5.1184 50.864105 2.8791 71.657607-4.1587v1.5995a17.594502 17.594502 0 0 1 0 8.957201c-4.4786 8.637301-21.433302 11.196501-30.070603 15.675101l-62.380506 31.990004a112.284911 112.284911 0 0 0-24.952202 11.836301 223.930022 223.930022 0 0 1-57.262106-21.113402A118.043112 118.043112 0 0 1 639.800062 383.880037c-10.236801 2.5592-25.592002 37.108404-33.909403 45.745705 1.9194 8.317401 42.226804 20.153702 52.143705 23.352702v1.5995c-30.390503 14.395501-59.501406 31.990003-90.211809 44.466105zM457.457045 598.213058a81.894408 81.894408 0 0 0 22.393002-1.5995A199.617619 199.617619 0 0 0 479.850047 543.830053l-95.97001 5.118401V393.477038a311.90253 311.90253 0 0 0 0-71.657607l-35.189003 2.559201c-7.037801 0-17.274602-1.9194-22.073102 0a95.970009 95.970009 0 0 0-22.393002 0v156.431115a311.90253 311.90253 0 0 1 0 71.657607l-230.967823 13.115901v52.143705a531.673852 531.673852 0 0 0 91.491409-5.1184c14.395501-2.8791 31.990003 3.5189 42.866604-2.5592h26.231803a80.614808 80.614808 0 0 0-14.395502 18.234301c-10.236801 14.395501-21.753202 28.471103-31.990003 43.186505-6.398001 8.637301-17.274602 16.634802-21.113402 27.511402-12.796001 3.199-63.980006 0-72.937207 6.398001a69.098407 69.098407 0 0 0-16.954702 0v52.143705a359.247735 359.247735 0 0 0 70.378007-5.118401c8.957201-1.9194 21.753202 0 28.791003 0 13.435801-2.8791 37.428304 3.199 47.025305-2.5592s26.871603-31.990003 33.909403-43.186504c24.952202-34.549203 57.901906-68.458607 80.934708-104.28741a466.734146 466.734146 0 0 0 76.776007-5.118401c13.115901-3.199 37.108404 2.8791 46.705405-2.8791z"fill="#2c2c2c" p-id="6024"></path><pathd="M167.947516 432.504842a35.189003 35.189003 0 0 0 20.793502 0l67.179007-2.5592c0-12.476101-12.156201-17.914402-18.234302-25.911903C223.930022 383.880037 206.01562 367.885036 194.179319 348.051234l-63.980006 3.8388h-24.952203c3.8388 10.556701 14.715401 17.594502 21.113402 25.911903a398.275539 398.275539 0 0 0 41.587004 53.423305zM170.826617 534.233052a80.614808 80.614808 0 0 0 25.911902 0L255.920025 530.074352c-2.2393-9.277101-10.876601-14.075601-15.675102-20.793502-10.236801-13.755701-20.153702-26.551703-30.070602-40.307404-4.7985-6.398001-12.796001-11.516401-15.675102-19.833802a199.297719 199.297719 0 0 0-54.702905 2.8791c-7.677601 0-18.234302-2.2393-23.672603 0a39.347704 39.347704 0 0 0-11.516401 0c12.476101 19.833802 31.990003 36.148704 44.146205 54.702905 5.758201 7.677601 11.516401 21.433302 21.113402 24.952203z"fill="#2c2c2c" p-id="6025"></path><pathd="M934.747891 598.213058v-51.184005c-59.501406 0-106.84661 8.317401-164.108716 7.997501v-24.952202a257.839425 257.839425 0 0 0-50.864105 2.5592c-7.997501 1.9194-20.153702-2.2393-26.231802 0h-2.559201a86.373008 86.373008 0 0 1 0 26.231803l-162.829115 8.9572v52.143706a275.433927 275.433927 0 0 0 54.702905-3.838801c16.314902-3.5189 33.909403 0 48.304905-2.5592s38.068104 3.5189 47.985004-2.5592a50.544205 50.544205 0 0 1 13.115902 0v77.095907a150.353015 150.353015 0 0 0 0 36.468604c20.473602-1.9194 52.783505-3.8388 77.095907-5.118401V641.079663a134.677913 134.677913 0 0 1 4.158701-33.269604c54.383005 0 107.48641-5.758201 159.950015-8.957201zM427.706342 614.84786l-87.332709 4.1587a121.562012 121.562012 0 0 0 18.234302 37.748204c14.715401 28.791003 29.750703 56.622306 42.866604 86.053109l54.702906-2.559201a81.574508 81.574508 0 0 0 31.990003-2.5592c2.8791-7.677601-11.836301-25.272102-15.675102-31.990003-15.675102-30.390503-29.110903-61.420806-45.425804-90.211809z"fill="#2c2c2c" p-id="6026"></path><pathd="M892.840987 614.84786h-5.1184c-3.8388 2.5592-13.435801 0-19.513902 1.5995a184.902218 184.902218 0 0 0-53.423305 5.118401 168.267416 168.267416 0 0 1 21.113402 35.189003c11.836301 19.513902 25.272102 38.388004 36.468603 58.861606a370.764136 370.764136 0 0 0 63.980006-4.158701h18.234302a1129.56701 1129.56701 0 0 0-58.541705-97.889409zM657.074664 627.963761c-4.7985 3.199-14.075601 0-20.793502 1.5995-15.355201 3.199-45.105904 0-55.022805 5.118401s-8.637301 16.314902-12.796001 23.352702c-9.597001 15.675102-18.874102 31.990003-27.511403 49.584505-4.4786 7.997501-6.398001 18.874102-13.115901 24.952203a17.914402 17.914402 0 0 1 0 3.8388l79.975007-3.8388c12.476101-24.312402 26.231803-49.264605 39.027804-73.257108a140.116214 140.116214 0 0 1 13.115901-25.911902c0-4.1587 0-3.199-2.5592-5.438301z"fill="#2c2c2c" p-id="6027"></path></svg></div><div class="right_f1" @mouseenter="f4 = !f4" @mouseleave="f4 = !f4"><svg t="1666965587546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="6576" width="36" height="36" v-if="f4"><pathd="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM432.3 592.8l71 80.7c9.2 33-3.3 63.1-3.3 63.1l-95.7-111.9v-0.1c-8.9 29-20.1 57.3-33.3 84.7-22.6 45.7-55.2 54.7-89.5 57.7-34.4 3-23.3-5.3-23.3-5.3 68-55.5 78-87.8 96.8-123.1 11.9-22.3 20.4-64.3 25.3-96.8H264.1s4.8-31.2 19.2-41.7h101.6c0.6-15.3-1.3-102.8-2-131.4h-49.4c-9.2 45-41 56.7-48.1 60.1-7 3.4-23.6 7.1-21.1 0 2.6-7.1 27-46.2 43.2-110.7 16.3-64.6 63.9-62 63.9-62-12.8 22.5-22.4 73.6-22.4 73.6h159.7c10.1 0 10.6 39 10.6 39h-90.8c-0.7 22.7-2.8 83.8-5 131.4H519s12.2 15.4 12.2 41.7h-110l-0.1 1.5c-1.5 20.4-6.3 43.9-12.9 67.6l24.1-18.1z m335.5 116h-87.6l-69.5 46.6-16.4-46.6h-40.1V321.5h213.6v387.3zM408.2 611s0-0.1 0 0z m216 94.3l56.8-38.1h45.6-0.1V364.7H596.7v302.5h14.1z"p-id="6577" fill="#707070"></path></svg><svg t="1666965587546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="6576" width="36" height="36" v-else><pathd="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM432.3 592.8l71 80.7c9.2 33-3.3 63.1-3.3 63.1l-95.7-111.9v-0.1c-8.9 29-20.1 57.3-33.3 84.7-22.6 45.7-55.2 54.7-89.5 57.7-34.4 3-23.3-5.3-23.3-5.3 68-55.5 78-87.8 96.8-123.1 11.9-22.3 20.4-64.3 25.3-96.8H264.1s4.8-31.2 19.2-41.7h101.6c0.6-15.3-1.3-102.8-2-131.4h-49.4c-9.2 45-41 56.7-48.1 60.1-7 3.4-23.6 7.1-21.1 0 2.6-7.1 27-46.2 43.2-110.7 16.3-64.6 63.9-62 63.9-62-12.8 22.5-22.4 73.6-22.4 73.6h159.7c10.1 0 10.6 39 10.6 39h-90.8c-0.7 22.7-2.8 83.8-5 131.4H519s12.2 15.4 12.2 41.7h-110l-0.1 1.5c-1.5 20.4-6.3 43.9-12.9 67.6l24.1-18.1z m335.5 116h-87.6l-69.5 46.6-16.4-46.6h-40.1V321.5h213.6v387.3zM408.2 611s0-0.1 0 0z m216 94.3l56.8-38.1h45.6-0.1V364.7H596.7v302.5h14.1z"p-id="6577" fill="#2c2c2c"></path></svg></div></div></div><div class="footer_div4"><div class="div4_main"><span>©2022 华为技术有限公司</span><span>粤A2-20044005号</span><span>粤公网安备44030702002388号</span><span style="color:rgb(194, 195, 195);"> | </span><span>联系我们</span><span>法律声明</span><span>隐私政策</span><span>除名查询</span></div></div></div>

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 代码

 <div class="footer_div4"><div class="div4_main"><span>©2022 华为技术有限公司</span><span>粤A2-20044005号</span><span>粤公网安备44030702002388号</span><span style="color:rgb(194, 195, 195);"> | </span><span>联系我们</span><span>法律声明</span><span>隐私政策</span><span>除名查询</span></div></div>

.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 class="div_up"><svg t="1666967078486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="8406" width="26" height="26" style="margin-top:7px;margin-left:7px;"><pathd="M1005.9 691c11.2 11.2 16.7 25.8 16.7 40.5 0 14.6-5.5 29.3-16.7 40.5-22.3 22.3-58.5 22.3-80.8 0L511.4 358.1 97.6 771.7c-22.3 22.3-58.5 22.3-80.8 0-22.3-22.3-22.3-58.5 0-80.8L446.7 261c17.3-17.3 40.2-26.7 64.7-26.7s47.4 9.5 64.7 26.7l429.8 430z m0 0"fill="#ffffff" p-id="8407"></path></svg></div><div class="div_up2"><svg t="1666967108327" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="9579" width="32" height="32" style="margin-top:4px;margin-left:4px;"><pathd="M896 426.666667h-85.333333V341.333333a298.666667 298.666667 0 1 0-597.333334 0v85.333334H128A85.426667 85.426667 0 0 0 42.666667 512v170.666667a85.426667 85.426667 0 0 0 85.333333 85.333333h106.666667a21.333333 21.333333 0 0 0 21.333333-21.333333V341.333333c0-141.16 114.84-256 256-256s256 114.84 256 256v384c0 94.106667-76.56 170.666667-170.666667 170.666667h-3.66a64.106667 64.106667 0 0 0-60.34-42.666667h-42.666666a64 64 0 0 0 0 128h42.666666a64.106667 64.106667 0 0 0 60.34-42.666666H597.333333a213.506667 213.506667 0 0 0 209.086667-170.666667H896a85.426667 85.426667 0 0 0 85.333333-85.333333V512a85.426667 85.426667 0 0 0-85.333333-85.333333zM128 725.333333a42.713333 42.713333 0 0 1-42.666667-42.666666V512a42.713333 42.713333 0 0 1 42.666667-42.666667h85.333333v256z m405.333333 213.333334h-42.666666a21.333333 21.333333 0 0 1 0-42.666667h42.666666a21.333333 21.333333 0 0 1 0 42.666667z m405.333334-256a42.713333 42.713333 0 0 1-42.666667 42.666666h-85.333333V469.333333h85.333333a42.713333 42.713333 0 0 1 42.666667 42.666667z"fill="#ffffff" p-id="9580"></path></svg></div>


/* 上升 */
.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代码，即可使用。

Vue复刻华为官网(三)相关推荐

Vue复刻华为官网 (一)
1 分析根据华为网页的布局,我们大体上可以将其划分为7个盒子,如下,由于写一个这样的网页再加上部分动态效果,需要的时间很长,本篇博客只记录了div1.div2.div3的静态效果+轮播图的实现. 2 ...
HTML5+CSS3实现华为官网
一.前言对于华为官网是自学时做的一个作品,想要学习的小伙伴,可以借鉴的,一下我会展示效果图和部分代码. (注:此次做了华为的一系列网页,可以前往我的主页进行查看) 二.效果成品图三.代码展示(为部 ...
html+css复刻NIKE官网静态页面（一）
nike的官网比较简洁,是我喜欢的风格,那么,复刻nike官网要怎么入手呢? html部分对一个网页进行复刻,我们应该先从结构下手. 这是初步的结构的分析,在html中我们可以用div或者secti ...
html华为官网静态网页,Web静态页面：华为商城主页
华为商城主页(Web静态页面) 这是我的第一篇博客,主要分享一下期末大作业:华为商城主页,只涉及静态页面. 结构框架: 华为商城首页,根据每个部分的功能,可以将整个页面分为三部分: 头部header. ...
华为官网鸿蒙系统手机安装链接,华为鸿蒙系统手机版
华为鸿蒙系统手机版公测版下载确定时延引擎让系统更加流畅,具有非常优秀的Linux桌面操作系统,包括华为手机,不妨来下载试试看吧. 华为鸿蒙系统手机版软件介绍华为华为鸿蒙系统手机版是基于Linux内核 ...
试着使用SDL2复刻曹操传（三）
本篇分三部分,分别是地图移动.光标替换以及鼠标事件处理.最后达成的效果如下: (1)地图移动曹操传是上世纪90年代末的作品,那时候的显示设备是CRT显示器,屏幕大小和分辨率都比现在要小和低,窗口无法 ...
HTML5 小练习2—仿华为官网（实现随机雪花飘落效果）
文章目录一.界面展示二.突出显示效果(当鼠标指向时) 1.广告部分动画 2.商品价格突出显示 3.导航栏文字突出显示三.项目目录四.CSS样式代码 1.雪花部分实现五.页面代码 1.inde ...
收到华为官网鸿蒙的消息,IT之家用户反馈现已收到华为鸿蒙 HarmonyOS 2.0 推送
IT之家 4 月 28 日消息感谢IT之家网友热心线索投递,部门华为用户现已收到鸿蒙 OS 2.0 开发者 Beta 公测版推送. 此次更新并未透露太多更新内容,更新包体积约 5.88GB,我们后续 ...
学习写华为官网网页的心得
1.在写华为主页时我主要用到了无序列表li,div,a这几个 2.使用div将主页分成块,每一个区域在自己所需的区域工作,在div中添加类名class,引用类名对其进行相关修饰,比如该快的宽度,长度, ...
因为没有直接看华为官网的注释，一味地在尝试在华为畅享9 plus装google play
前后浪费了好几个小时,才想起来查一下这款手机支不支持google play,教训是:应该第一时间查是否可以安装,减少损失事件!! https://consumer.huawei.com/cn/supp ...

Vue复刻华为官网(三)