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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

首先， 新建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

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

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

以上是 Vue学习笔记7.4 icon区域的图标样式笔记（前端渣，咳~只能靠烂笔头了） 的全部内容， 来源链接： utcz.com/z/377270.html

回到顶部