小程序开发定制Vue复刻华为官网(三)

文章目录

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">              <path                d="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">              <path                d="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>              <path                d="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">              <path                d="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>              <path                d="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">              <path                d="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>              <path                d="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>              <path                d="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>              <path                d="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>              <path                d="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>              <path                d="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>              <path                d="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>              <path                d="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">              <path                d="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>              <path                d="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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
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) "    }  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
/* 底部 *//* 目测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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
.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);}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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;">        <path          d="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;">        <path          d="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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
/* 上升 */.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;}/* ~上升 */
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

3.3 效果图

4 图标完善

4.1 思路

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

4.2 安利图标库

，打开的时候，来到的是这样一个地方

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

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

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发