前言
今天给主题升级了一下版本,记录Joe2.0样式常用到的一些样式的写法,能够丰富写作的形式,不错,用这篇文章记录一下
跑马灯
<span class="joe_lamp"></span>
彩色虚线
<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>
时间线
{timeline-item 2020}10元{/timeline-item}
{timeline-item 2021}20元{/timeline-item}
{timeline-item 2022}100元{/timeline-item}
<joe-timeline>
<div class="_tpl">
{timeline-item 2020}10元{/timeline-item}
{timeline-item 2021}20元{/timeline-item}
{timeline-item 2022}100元{/timeline-item}
</div>
</joe-timeline>
Tabs标签
{tabs-pane 第一个}故事1{/tabs-pane}
{tabs-pane 第二个}故事2{/tabs-pane}
<joe-tabs>
<div class="_tpl">
{tabs-pane 第一个}故事1{/tabs-pane}
{tabs-pane 第二个}故事2{/tabs-pane}
</div>
</joe-tabs>
按钮
<joe-abtn color="#409eff" content="多彩按钮"></joe-abtn>
带图标的按钮
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>
便条按钮
<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>
视频播放器
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
```html
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
```html
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
Bilibili 视频
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>
pdf的展示方式
<joe-pdf
src="https://bbchin.com/upload/2022/03/Node%E7%9A%84%E8%AE%BE%E8%AE%A1%E4%B8%8E%E5%AE%9E%E7%8E%B0-0a7b571b1a5b4a0d8f810a253afe7077.pdf"
></joe-pdf>
网易云歌单
<joe-mlist id="6800335663"></joe-mlist>
网易云单曲
<joe-music id="1303046498"></joe-music>
音乐播放器
<joe-mp3
name="天生狂野-柴古唐斯主题曲"
url="https://bbchin.com/upload/2022/04/%E5%A4%A9%E7%94%9F%E7%8B%82%E9%87%8E-%E6%9F%B4%E5%8F%A4%E5%94%90%E6%96%AF%E4%B8%BB%E9%A2%98%E6%9B%B2.mp3"
theme="red"
cover="https://bbchin.com/upload/2022/04/cgts.png"
autoplay
></joe-mp3>
消息提示
评论区