Vue学习笔记7.4 icon区域的图标样式笔记（前端渣，咳~只能靠烂笔头了）

怼烎@ 2022-03-08 13:48 1428阅读 1赞

图标区域的组件写出来大概是这个样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

首先， 新建Icons.vue在pages/home/components/中

然后在Home.vue中添加组件即可

<template>
      <div>
        <home-icons></home-icons>
              <div>test</div>
      </div>
    </template>
    
    <script>
    import HomeIcons from './components/Icons'
    export default {
      name: 'Home',
      components: {
        HomeIcons
      }
    }
    </script>
    
    <style>
    </style>

然后剩下的就是写组件的样式了：

<template>
      <div class="icons">
        <div class="icon">
          <div class="icon-img">
            <img class='icon-img-content' 
                 src='http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
            >
          </div>
          <p class="icon-desc">
            热门景点
          </p>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HomeIcons'
    }
    </script>
    // icons类用来划定高宽区域1:2
    // icon类用来定义每个图标div（包括描述）的高宽，页面位置和样式
    // icon-img类用来定义每个图标div的位置，大小和样式
    // icon-img-content类用来定义图片本身的大小位置
    <style lang="stylus" scoped>
    //导入全局样式
      @import '~styles/varibles.styl'
      .icons
        overflow: hidden
        height: 0
        padding-bottom: 50%
        .icon
          position: relative
          overflow: hidden
          width: 25%
          height: 0
          float: left
          padding-bottom: 25%
          .icon-img
            position: absolute
            top: 0
            left: 0
            right: 0
            bottom: .44rem
            box-sizing: border-box
            padding: .01rem
            .icon-img-content
              display: block
              margin: 0 auto
              height: 100%
          .icon-desc
            position: absolute
            left: 0
            right: 0
            bottom: 0
            height: .44rem
            line-height: .44rem
            text-align: center
    //使用全局样式$darkTextColor
            color: $darkTextColor
    </style>

然后在src/assets/style/varibles.styl中定义$darkTextColor的值：

$bgColor = #00bcd4
    $darkTextColor = #333

这样就可以了，剩余七个图标直接复制就可以了（下一篇会改成迭代出来的）

嗯...关于一些CSS样式的笔记：

overflow: hidden ： 超出隐藏

height: 0  
    padding-bottom: 50% ： 划定高度为宽度的1/2的区域

position: relative： 将元素定位在正常的位置（为了给子元素定位用的）

position: absolute

top: 0  
        left: 0  
        right: 0  
        bottom: .44rem

： 相对于包裹它的元素的位置定位。这个依赖于上一层目录的定位位置

好像主要渣在定位这方面。 改天再去复习复习

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220308/455b7cf03ab24e11aae63208745852f5.png