245 lines
6.3 KiB
Vue
245 lines
6.3 KiB
Vue
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 4 072 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||
<template>
|
||
<view class="fui-wrap">
|
||
<view class="fui-page__hd">
|
||
<view class="fui-page__title fui-align__center" @tap="vip">TimeAxis <image
|
||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||
</view>
|
||
<view class="fui-page__desc">TimeAxis 时间轴，用于展现时间流信息。</view>
|
||
</view>
|
||
<view class="fui-page__bd">
|
||
<view class="fui-section__title">右侧展示</view>
|
||
<fui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
|
||
<fui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
|
||
v-for="(item,index) in processData" :key="index">
|
||
<view class="fui-node" :style="{borderColor:item.activeColor}">
|
||
</view>
|
||
<template v-slot:right>
|
||
<view class="fui-process__node" :class="{'fui-node__pb':index!==processData.length-1}">
|
||
<view class="fui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
|
||
</view>
|
||
<view class="fui-descr" v-if="item.descr">{{item.descr}}</view>
|
||
<view class="fui-time">{{item.time}}</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
</fui-timeaxis>
|
||
<view class="fui-section__title">左右展示</view>
|
||
<fui-timeaxis leftWidth="200" background="#fff" :padding="['32rpx','16rpx']">
|
||
<fui-timeaxis-node :lineColor="index<3?item.activeColor:'#ccc'" :lined="index!==processData.length-1"
|
||
v-for="(item,index) in processData" :key="index">
|
||
<view class="fui-node" :style="{borderColor:item.activeColor}">
|
||
</view>
|
||
<template v-slot:left>
|
||
<view class="fui-time__left">{{item.time}}</view>
|
||
</template>
|
||
<template v-slot:right>
|
||
<view class="fui-process__node" :class="{'fui-node__pbtm':index!==processData.length-1}">
|
||
<view class="fui-title" :style="{color:index===3?item.activeColor:'#181818'}">{{item.title}}
|
||
</view>
|
||
<view class="fui-descr" v-if="item.descr">{{item.descr}}</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
</fui-timeaxis>
|
||
<view class="fui-section__title">节点设置icon</view>
|
||
<fui-timeaxis background="#fff" :padding="['32rpx','16rpx']">
|
||
<fui-timeaxis-node>
|
||
<view class="fui-node__box" style="background: #FF2B2B;">
|
||
<fui-icon name="check" :size="28" color="#fff"></fui-icon>
|
||
</view>
|
||
<template v-slot:right>
|
||
<view class="fui-custom__wrap">
|
||
<view class="fui-custom__innder">自定义内容</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
<fui-timeaxis-node>
|
||
<view class="fui-node__box" style="background: #09BE4F;">
|
||
<fui-icon name="face" :size="28" color="#fff"></fui-icon>
|
||
</view>
|
||
<template v-slot:right>
|
||
<view class="fui-custom__wrap">
|
||
<view class="fui-custom__innder">自定义内容</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
<fui-timeaxis-node>
|
||
<view class="fui-node__box" style="background: #465CFF;">
|
||
<fui-icon name="my-fill" :size="28" color="#fff"></fui-icon>
|
||
</view>
|
||
<template v-slot:right>
|
||
<view class="fui-custom__wrap">
|
||
<view class="fui-custom__innder">自定义内容</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
<fui-timeaxis-node>
|
||
<view class="fui-node__sm"></view>
|
||
<template v-slot:right>
|
||
<view class="fui-custom__wrap">
|
||
<view class="fui-custom__innder">自定义内容</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
<fui-timeaxis-node>
|
||
<view class="fui-node"></view>
|
||
<template v-slot:right>
|
||
<view class="fui-custom__wrap">
|
||
<view class="fui-custom__innder" style="height: 400rpx;">First UI</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
<fui-timeaxis-node :lined="false">
|
||
<view class="fui-node"></view>
|
||
<template v-slot:right>
|
||
<view class="fui-custom__wrap">
|
||
<view class="fui-custom__innder">
|
||
<image src="/static/images/common/logo.png" class="fui-logo"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</fui-timeaxis-node>
|
||
</fui-timeaxis>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
processData: [{
|
||
title: '入场',
|
||
time: '07:00',
|
||
activeColor: '#465CFF'
|
||
}, {
|
||
title: '主场演讲',
|
||
time: '08:00',
|
||
descr: '马云（阿里巴巴）',
|
||
activeColor: '#465CFF'
|
||
}, {
|
||
title: '世界互联经济',
|
||
time: '08:30',
|
||
descr: '马云（阿里巴巴）',
|
||
activeColor: '#465CFF'
|
||
}, {
|
||
title: '打造自己的互联帝国',
|
||
time: '09:30',
|
||
descr: '马化腾（腾讯）',
|
||
activeColor: '#FFB703'
|
||
}, {
|
||
title: '散场',
|
||
time: '11:00',
|
||
descr: '请带走垃圾，有序散场。'
|
||
}]
|
||
}
|
||
},
|
||
methods: {
|
||
vip() {
|
||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
font-weight: normal;
|
||
}
|
||
|
||
.fui-wrap {
|
||
padding-bottom: 64rpx;
|
||
}
|
||
|
||
.fui-section__title {
|
||
margin-left: 32rpx;
|
||
}
|
||
|
||
.fui-node {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 4px solid #ccc;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.fui-process__node {
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.fui-node__pb {
|
||
padding-bottom: 48rpx;
|
||
}
|
||
|
||
.fui-title {
|
||
font-size: 34rpx;
|
||
line-height: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.fui-descr {
|
||
font-size: 28rpx;
|
||
padding-top: 12rpx;
|
||
color: #7F7F7F;
|
||
}
|
||
|
||
.fui-time {
|
||
font-size: 24rpx;
|
||
color: #B2B2B2;
|
||
padding-top: 12rpx;
|
||
}
|
||
|
||
.fui-time__left {
|
||
font-size: 36rpx;
|
||
line-height: 36rpx;
|
||
text-align: right;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.fui-node__pbtm {
|
||
padding-bottom: 88rpx;
|
||
}
|
||
|
||
.fui-custom__wrap {
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.fui-custom__innder {
|
||
height: 200rpx;
|
||
border-radius: 0 16rpx 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #F1F4FA;
|
||
color: #FFB703;
|
||
}
|
||
|
||
.fui-logo {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.fui-node__box {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background: #ccc;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.fui-node__sm {
|
||
width: 9px;
|
||
height: 9px;
|
||
background: #ccc;
|
||
border-radius: 50%;
|
||
}
|
||
</style> |