资源
正文
主要是搬运了人家的示例代码，这样的写法好处不言而喻
- 运行前需要装一下相应的编译的包
yarn add pug pug-plain-loader stylus stylus-loader --dev
- 主要的源码部分
<template lang="pug">
.container
.row
.col-sm-3(v-for="item in items" v-bind:key="item.id")
.artist
img.artist__image(v-bind:src="item.image")
h4.text-center {{ item.title }}
</template>
<script>
export default {
name: 'item-list',
data() {
return {
items: [
{
id: 1,
title: 'Miles Davis',
image: 'https://img.discogs.com/saz25T9xJgOthJLeH0-lQg7jk34=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/A-23755-1394387343-4500.jpeg.jpg'
},
{
id: 2,
title: 'Kenny Burrell',
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNpBV6iV60h2HRfy-ai6FB_MWqxFpxGWxO6Km0UO4UAklKytRpig'
},
{
id: 3,
title: 'Buddy Rich',
image: 'https://lastfm-img2.akamaized.net/i/u/avatar300s/5ba3d9e8b5cf492886a088974ae727a2.jpg'
},
{
id: 4,
title: 'Chet baker',
image: 'http://cdn.musicjazzfree.com/artists/c/chet-baker/chet-baker-5.jpg'
},
],
}
},
}
</script>
<style lang="stylus">
.artist
&__image
width 100%
</style>
- 这个还可以和
element-ui结合使用的哦，示例代码
.mytable
el-table
el-table-column(label="日期")
el-table-column(label="姓名")
el-table-column(label="地址")
更新一些 pug 的使用语法
- 在标签中嵌入标签的写法示例
span.title-tooltip 本月即将到期专线 #[span.data-number 5] 条
生成的代码截图
更新一些 stylus 的使用语法
- 使用
for in循环设置样式
- 部分源码示例
position relative
for index in (1..10)
&:nth-child({index})
&:before
content '' + index
position absolute
left 5px
width 30px
height 30px
line-height 30px
background-color rgba(247,191,71,0.31);
border-radius 50%
text-align center
color #D0021B
font-size 16px
- 效果图
页面展示效果
- 使用
for in循环设置背景图片
- 部分源码
.pillar-filter
for index in (0..3)
&>div:nth-child({index + 2})
.item-title
&:before
background url('../../../assets/image/marketingSupport/industryView/pillar-dragon-icon-'+ index +'.png') center center no-repeat;
.dragon-filter
for index in 4 5 6 7 8
&>div:nth-child({index - 2})
.item-title
&:before
background url('../../../assets/image/marketingSupport/industryView/pillar-dragon-icon-' + index + '.png') 0 center no-repeat;
- 效果图
.pillar-filter
.dragon-filter
- 使用
for in循环使用不同的名称
nameList = success fail
for name, index in nameList
.yun-icon-{name}
background url('~@/assets/common/icon-' + name + '.png') center center no-repeat
- 带有入参的
mixin变量
// app 相关的公用 css 变量
// 带描边和背景的常用 label 标签
app-layout-label($text-color = $app-main-color, $bg-color = $app-main-bg-color)
color $text-color
font-size 20px
min-width 92px
text-align center
height 40px
line-height @height
padding 0 20px
border 1px solid $text-color
background-color $bg-color
border-radius 8px
flex 0 0 auto
// 右上角定位标签，父级标签需要设置相对定位
app-position-right-label($text-color = $app-main-color, $bg-color = rgba(79, 172, 254, 0.12))
position absolute
right 0
top 0
min-width 98px
height 40px
line-height @height
text-align center
font-size 24px
color $text-color
background $bg-color
border-radius 0px 0 0px 8px
// 32 和 24 是根据 van-cell--large 的 padding 算出来的
transform translate(32px, -24px)
// 页面底部固定的悬浮操作按钮，页面容器要设置 padding: 0 0 180px 0
app-fixed-bottom-button-group($bg-color = #f9f9fb, $justify-content = center)
position fixed
z-index 2
bottom 0
left 0
right 0
height 180px
background $bg-color
border-radius 8px
font-size 36px
font-weight 500
text-align center
display flex
justify-content $justify-content
padding 20px 40px 0
app-fixed-bottom-button($text-color = $app-button-color, $bg-color = rgba(246, 251, 255, 1), $border-color = rgba(140, 199, 255, 1), $flex-style = 0 1 100%)
flex $flex-style
height 100px
line-height @height
color $text-color
background $bg-color
border 2px solid $border-color
border-radius 8px
// 页面右侧固定的悬浮操作按钮
app-fixed-right-button-group($bg-color = linear-gradient(225deg, rgba(0, 200, 254, 1) 0%, rgba(79, 172, 254, 1) 100%), $justify-content = center)
position fixed
z-index 2
bottom 0
right 48px
min-width 96px
height 96px
transform translateY((-(@height / 2)))
border-radius 96px
padding 0 20px
background $bg-color
font-size 24px
color #fff
text-align center
display flex
justify-content $justify-content
flex-direction column
// 内容禁用置灰函数
app-disable-grayscale()
filter grayscale(100%)
-webkit-filter grayscale(100%)
-moz-filter grayscale(100%)
-ms-filter grayscale(100%)
-o-filter grayscale(100%)
-webkit-filter grayscale(1)
// 自定义关闭按钮
css-close-btn($width = 20px, $height = 20px, $bgcolor = $main-red-light, $linewidth = 2px, $lineheight = 12px, $linebgcolor = #fff)
background-color $bgcolor
width $width
height $height
border-radius 50%
position relative
cursor pointer
&:before
content ''
position absolute
width $linewidth
height $lineheight
background-color $linebgcolor
top 50%
left 50%
transform translate(-50%, -50%) rotate(45deg)
&:after
content ''
position absolute
width $linewidth
height $lineheight
background-color $linebgcolor
top 50%
left 50%
transform translate(-50%, -50%) rotate(-45deg)
// 清除浮动
clearfix()
// IE6/7
zoom 1
&:after
content ' '
display block
height 0
clear both
// 文本单行溢出隐藏
textoneline()
overflow hidden
white-space nowrap
text-overflow ellipsis
// 文本多行溢出隐藏 -webkit-line-clamp: 2; 溢出行数
textmoreline($-webkit-line-clamp = 2)
display -webkit-box
-webkit-box-orient vertical
overflow hidden
text-overflow ellipsis
-webkit-line-clamp $-webkit-line-clamp
网友评论