mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-06 19:44:38 +08:00
更新组件演示页面，方便用户直接使用组件，去除tn-button的默认背景色，tn-avatar修改参数默认值，修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug，tn-badge修改参数默认值，tn-collapse-item修复背景颜色失效问题，滚动通知移除默认背景颜色和字体大小，tn-count-down修复时间单位不正确问题，列表组件修复背景颜色问题，tn-nav-bar返回按钮修改为可进行修改的图标，tn-step添加点击步骤进行跳转，tn-loading修复默认激活颜色出错问题，tn-tag移除默认背景颜色，优化阴影大小css
This commit is contained in:
JaylenTech
+106
-233
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-avatar">
|
||||
<view class="basic-avatar tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>头像</tn-nav-bar>
|
||||
@@ -8,38 +8,104 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<block v-if="singleAvatarShow">
|
||||
<tn-avatar
|
||||
:backgroundColor="backgroundColor"
|
||||
:src="src"
|
||||
:text="text"
|
||||
:icon="icon"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
:shadow="shadow"
|
||||
:border="border"
|
||||
:borderColor="borderColor"
|
||||
:imgMode="imgMode"
|
||||
:badge="badge"
|
||||
:badgeSize="badgeSize"
|
||||
:badgeBgColor="badgeBgColor"
|
||||
:badgeColor="badgeColor"
|
||||
:badgeIcon="badgeIcon"
|
||||
:badgeText="badgeText"
|
||||
:badgePosition="badgePosition"
|
||||
>
|
||||
</tn-avatar>
|
||||
</block>
|
||||
<block v-else>
|
||||
<tn-avatar-group
|
||||
:lists="groupList"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
:gap="0.4"
|
||||
></tn-avatar-group>
|
||||
</block>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="基础">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar backgroundColor="#FFFFFF"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar icon="link" backgroundColor="#FFFFFF"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar text="TN" backgroundColor="#FFFFFF"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :shadow="true" :src="src"></tn-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="大小">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar size="sm" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar size="lg" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar size="xl" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar size="160rpx" :src="src"></tn-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="形状">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar shape="circle" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar shape="square" :src="src"></tn-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="边框">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :border="true" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :border="true" borderColor="#01BEFF" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :border="true" borderColor="#01BEFF" :borderSize="4" :src="src"></tn-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="角标">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :badge="true" badgeText="99+" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="头像组">
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar-group :lists="groupList"></tn-avatar-group>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar-group :lists="groupList" shape="shape"></tn-avatar-group>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar-group :lists="groupList" size="lg"></tn-avatar-group>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<tn-avatar-group :lists="groupList" size="lg" :gap="0.5"></tn-avatar-group>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -48,30 +114,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'basicAvatar',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
backgroundColor: '',
|
||||
src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg',
|
||||
text: '',
|
||||
icon: '',
|
||||
shape: 'circle',
|
||||
size: '',
|
||||
shadow: false,
|
||||
border: false,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
imgMode: 'aspectFill',
|
||||
badge: false,
|
||||
badgeSize: 28,
|
||||
badgeBgColor: '#AAAAAA',
|
||||
badgeColor: '#FFFFFF',
|
||||
badgeIcon: 'sex-male',
|
||||
badgeText: '',
|
||||
badgePosition: [0, 0],
|
||||
|
||||
groupList: [
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
||||
@@ -79,194 +128,18 @@
|
||||
{icon: 'logo-tuniao'},
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
||||
],
|
||||
|
||||
// 头像显示方式切换
|
||||
singleAvatarShow: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-avatar组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '形状',
|
||||
optional: ['圆形','方形'],
|
||||
methods: 'shapeChange'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
optional: ['图片','文字','图标'],
|
||||
methods: 'typeChange'
|
||||
},
|
||||
{
|
||||
title: '大小',
|
||||
optional: ['默认','sm','lg','xl','120rpx'],
|
||||
methods: 'sizeChange'
|
||||
},
|
||||
{
|
||||
title: '阴影',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'shadowChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '边框',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'borderChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '角标',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'badgeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '角标大小',
|
||||
optional: ['默认','20'],
|
||||
methods: 'badgeSizeChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '角标内容',
|
||||
optional: ['图标','文字'],
|
||||
methods: 'badgeContentChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '角标位置',
|
||||
optional: ['默认','[8,8]'],
|
||||
methods: 'badgePositionChange',
|
||||
show: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '样式切换',
|
||||
section: [
|
||||
{
|
||||
title: '方式',
|
||||
optional: ['单头像','头像组'],
|
||||
methods: 'singleAvatarChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换头像形状
|
||||
shapeChange(event) {
|
||||
this.shape = event.index === 0 ? 'circle' : 'square'
|
||||
},
|
||||
// 切换头像类型
|
||||
typeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.src = 'https://tnuiimage.tnkjapp.com/avatar/xiaomai4.jpg'
|
||||
this.text = ''
|
||||
this.icon = ''
|
||||
break
|
||||
case 1:
|
||||
this.src = ''
|
||||
this.text = 'TN'
|
||||
this.icon = ''
|
||||
break
|
||||
case 2:
|
||||
this.src = ''
|
||||
this.text = ''
|
||||
this.icon = 'logo-tuniao'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换头像大小
|
||||
sizeChange(event) {
|
||||
this.size = event.index === 0 ? '' : event.name
|
||||
},
|
||||
// 切换阴影状态
|
||||
shadowChange(event) {
|
||||
this.shadow = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换边框状态
|
||||
borderChange(event) {
|
||||
this.border = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.backgroundColor = ''
|
||||
this.borderColor = 'rgba(0, 0, 0, 0.1)'
|
||||
this.badgeBgColor = '#AAAAAA'
|
||||
this.badgeColor = '#FFFFFF'
|
||||
} else {
|
||||
this.backgroundColor = '#01BEFF'
|
||||
this.borderColor = '#E6E6E6'
|
||||
this.badgeBgColor = 'tn-bg-red'
|
||||
this.badgeColor = '#FFFFFF'
|
||||
}
|
||||
},
|
||||
// 切换角标状态
|
||||
badgeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.badge = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([7,8,9], true)
|
||||
} else {
|
||||
this.badge = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([7,8,9], false)
|
||||
}
|
||||
},
|
||||
// 切换角标大小
|
||||
badgeSizeChange(event) {
|
||||
this.badgeSize = event.index === 0 ? 28 : Number(event.name)
|
||||
},
|
||||
// 切换角标内容
|
||||
badgeContentChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.badgeIcon = 'sex-male'
|
||||
this.badgeText = ''
|
||||
this.badgeSizeChange({index: 0})
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 7, 0)
|
||||
break
|
||||
case 1:
|
||||
this.badgeIcon = ''
|
||||
this.badgeText = '99+'
|
||||
this.badgeSize = 0
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换角标位置
|
||||
badgePositionChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.badgePosition = [0, 0]
|
||||
break
|
||||
case 1:
|
||||
this.badgePosition = [8, 8]
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 单头像、头像组切换
|
||||
singleAvatarChange(event) {
|
||||
this.singleAvatarShow = event.index === 0
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.basic-avatar {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
+72
-167
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-badge">
|
||||
<view class="basic-badge tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>微标</tn-nav-bar>
|
||||
@@ -8,40 +8,66 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<block v-if="!absolute">
|
||||
<tn-badge
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:radius="radius"
|
||||
:dot="dot"
|
||||
:padding="padding"
|
||||
:margin="margin"
|
||||
>
|
||||
<text v-if="dot === false">{{ value }}</text>
|
||||
</tn-badge>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="badge-container">
|
||||
<tn-badge
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:radius="radius"
|
||||
:dot="dot"
|
||||
:padding="padding"
|
||||
:margin="margin"
|
||||
:absolute="true"
|
||||
:top="top"
|
||||
:right="right"
|
||||
:translateCenter="translateCenter"
|
||||
>
|
||||
<text v-if="dot === false">{{ value }}</text>
|
||||
<demo-title title="基础">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<tn-badge :dot="true" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge margin="10rpx 10rpx"><text>99</text></tn-badge>
|
||||
<tn-badge margin="10rpx 10rpx"><text>99+</text></tn-badge>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="大小">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<tn-badge :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge :radius="60" :fontSize="30" margin="10rpx 10rpx"><text>99</text></tn-badge>
|
||||
<tn-badge :fontSize="30" padding="10rpx 30rpx" margin="10rpx 10rpx"><text>99+</text></tn-badge>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="颜色">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<tn-badge backgroundColor="#01BEFF" :dot="true" :radius="30" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="#FFFFFF" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge backgroundColor="tn-bg-teal" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
<tn-badge backgroundColor="tn-main-gradient-indigo" :radius="40" margin="10rpx 10rpx"><text>0</text></tn-badge>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="微标使用">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap">
|
||||
<view class="badge-demo">
|
||||
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" >
|
||||
<text>99+</text>
|
||||
</tn-badge>
|
||||
</view>
|
||||
</block>
|
||||
</dynamic-demo-template>
|
||||
<view class="badge-demo">
|
||||
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" :translateCenter="false">
|
||||
<text>99+</text>
|
||||
</tn-badge>
|
||||
</view>
|
||||
<view class="badge-demo">
|
||||
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :absolute="true" top="-18rpx" right="20rpx">
|
||||
<text>99+</text>
|
||||
</tn-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
|
||||
<view class="badge-demo">
|
||||
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" ></tn-badge>
|
||||
</view>
|
||||
<view class="badge-demo">
|
||||
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" :translateCenter="false"></tn-badge>
|
||||
</view>
|
||||
<view class="badge-demo">
|
||||
<tn-badge backgroundColor="#01BEFF" fontColor="#FFFFFF" :dot="true" :radius="30" :absolute="true" top="-18rpx" right="20rpx"></tn-badge>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -50,151 +76,30 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'basicBadge',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
value: '0',
|
||||
backgroundColor: '',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
radius: 0,
|
||||
dot: false,
|
||||
padding: '',
|
||||
margin: '',
|
||||
absolute: false,
|
||||
top: '',
|
||||
right: '',
|
||||
translateCenter: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-badge组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '数值',
|
||||
optional: ['0','99','100','1024'],
|
||||
methods: 'valueChange'
|
||||
},
|
||||
{
|
||||
title: '点微标',
|
||||
optional: ['是','否'],
|
||||
methods: 'dotChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'sizeChange'
|
||||
},
|
||||
{
|
||||
title: '绝对定位',
|
||||
optional: ['是','否'],
|
||||
methods: 'absoluteChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义绝对定位位置',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'absolutePositionChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '居中绝对定位原点',
|
||||
optional: ['是','否'],
|
||||
methods: 'absoluteCenterChange',
|
||||
show: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换值
|
||||
valueChange(event) {
|
||||
this.value = this.$t.number.formatNumberString(event.name)
|
||||
},
|
||||
// 切换点显示状态
|
||||
dotChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.dot = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(0, false)
|
||||
} else {
|
||||
this.dot = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(0, true)
|
||||
}
|
||||
},
|
||||
// 切换自定义颜色
|
||||
colorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
} else {
|
||||
this.backgroundColor = 'tn-bg-red'
|
||||
this.fontColor = '#FFFFFF'
|
||||
}
|
||||
},
|
||||
// 切换自定义大小
|
||||
sizeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.radius = 0
|
||||
this.fontSize = 0
|
||||
this.padding = ''
|
||||
this.margin = ''
|
||||
} else {
|
||||
this.radius = 48
|
||||
this.fontSize = 30
|
||||
this.padding = '10rpx 25rpx'
|
||||
this.margin = '30rpx'
|
||||
}
|
||||
},
|
||||
// 切换绝对定位状态
|
||||
absoluteChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.absolute = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([5,6], true)
|
||||
} else {
|
||||
this.absolute = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([5,6], false)
|
||||
}
|
||||
},
|
||||
// 切换绝对定位的位置
|
||||
absolutePositionChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.top = ''
|
||||
this.right = ''
|
||||
} else {
|
||||
this.top = '20rpx'
|
||||
this.right = '100%'
|
||||
}
|
||||
},
|
||||
// 切换绝对定位居中原点
|
||||
absoluteCenterChange(event) {
|
||||
this.translateCenter = event.index === 0
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.badge-container {
|
||||
// 防止越过父级
|
||||
.basic-badge {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.badge-demo {
|
||||
position: relative;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: $tn-font-sub-color;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 18rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
+106
-104
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-border">
|
||||
<view class="basic-border tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>边框</tn-nav-bar>
|
||||
@@ -8,13 +8,100 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<view
|
||||
class="border-content"
|
||||
:class="[borderClass]"
|
||||
></view>
|
||||
<view style="visibility: hidden;height: 1px;">tuniao</view>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="普通边框">
|
||||
<view class="border-content tn-border-solid">
|
||||
<view>四周边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solid-top">
|
||||
<view>顶部边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solid-right">
|
||||
<view>右边边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solid-bottom">
|
||||
<view>下面边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solid-left">
|
||||
<view>左边边框</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="加粗边框">
|
||||
<view class="border-content tn-border-solids">
|
||||
<view>四周边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solids-top">
|
||||
<view>顶部边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solids-right">
|
||||
<view>右边边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solids-bottom">
|
||||
<view>下面边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solids-left">
|
||||
<view>左边边框</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="虚线边框">
|
||||
<view class="border-content tn-border-dashed">
|
||||
<view>四周边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed-top">
|
||||
<view>顶部边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed-right">
|
||||
<view>右边边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed-bottom">
|
||||
<view>下面边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed-left">
|
||||
<view>左边边框</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="隐藏某一边框">
|
||||
<view class="border-content tn-border-solid tn-none-border-top">
|
||||
<view>隐藏上边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solid tn-none-border-right">
|
||||
<view>隐藏右边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solid tn-none-border-bottom">
|
||||
<view>隐藏下边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-solid tn-none-border-left">
|
||||
<view>隐藏左边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed tn-none-border-top">
|
||||
<view>隐藏上边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed tn-none-border-right">
|
||||
<view>隐藏右边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed tn-none-border-bottom">
|
||||
<view>隐藏下边框</view>
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed tn-none-border-left">
|
||||
<view>隐藏左边框</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="颜色">
|
||||
<view class="border-content tn-border-solid tn-border-indigo">
|
||||
|
||||
</view>
|
||||
<view class="border-content tn-border-solids tn-border-green">
|
||||
|
||||
</view>
|
||||
<view class="border-content tn-border-dashed tn-border-purplered">
|
||||
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -23,117 +110,32 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'basicBorder',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
borderType: 'solid',
|
||||
borderPosition: '',
|
||||
borderColor: '',
|
||||
borderBold: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','不使用任何组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '样式',
|
||||
optional: ['实线','虚线'],
|
||||
methods: 'typeChange'
|
||||
},
|
||||
{
|
||||
title: '位置',
|
||||
optional: ['全部','上','下','左','右'],
|
||||
methods: 'positionChange'
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '加粗',
|
||||
optional: ['默认','加粗'],
|
||||
methods: 'boldChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderClass() {
|
||||
let clazz = ''
|
||||
if (this.borderPosition === '') {
|
||||
clazz += ` tn-border-${this.borderType}`
|
||||
} else {
|
||||
clazz += ` tn-border-${this.borderType}-${this.borderPosition}`
|
||||
}
|
||||
|
||||
if (this.borderColor) {
|
||||
clazz += ` ${this.borderColor}`
|
||||
}
|
||||
|
||||
if (this.borderBold) {
|
||||
clazz += ' tn-bold-border'
|
||||
}
|
||||
|
||||
return clazz
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换边框样式
|
||||
typeChange(event) {
|
||||
this.borderType = event.index === 0 ? 'solid' : 'dashed'
|
||||
},
|
||||
// 切换边框位置
|
||||
positionChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.borderPosition = ''
|
||||
break
|
||||
case 1:
|
||||
this.borderPosition = 'top'
|
||||
break
|
||||
case 2:
|
||||
this.borderPosition = 'bottom'
|
||||
break
|
||||
case 3:
|
||||
this.borderPosition = 'left'
|
||||
break
|
||||
case 4:
|
||||
this.borderPosition = 'right'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换边框颜色
|
||||
colorChange(event) {
|
||||
this.borderColor = event.index === 0 ? '' : 'tn-border-red'
|
||||
},
|
||||
// 切换边框加粗状态
|
||||
boldChange(event) {
|
||||
this.borderBold = event.index === 0 ? false : true
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.basic-border {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
.border-content {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
margin: 30rpx 0rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
+79
-200
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-button">
|
||||
<view class="basic-button tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>按钮</tn-nav-bar>
|
||||
@@ -8,31 +8,77 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:shape="shape"
|
||||
:shadow="shadow"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:size="size"
|
||||
:fontBold="fontBold"
|
||||
:padding="padding"
|
||||
:margin="margin"
|
||||
:plain="plain"
|
||||
:border="border"
|
||||
:borderBold="borderBold"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
>
|
||||
<block v-if="shape !== 'icon'">演示按钮</block>
|
||||
<block v-else>
|
||||
<text class="tn-icon-discover-planet-fill"></text>
|
||||
</block>
|
||||
</tn-button>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="基础">
|
||||
<tn-button>按钮</tn-button>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="大小">
|
||||
<view>
|
||||
<tn-button size="sm" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button size="lg" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button width="150rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">按钮</tn-button>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-button padding="20rpx 40rpx" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button margin="10rpx 10rpx" :fontBold="true">按钮</tn-button>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-button width="100%">按钮</tn-button>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="形状">
|
||||
<tn-button margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button shape="round" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
|
||||
<tn-button width="150rpx" height="100rpx" :fontSize="40" shape="icon" margin="10rpx 10rpx"><text class="tn-icon-link"></text></tn-button>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="颜色">
|
||||
<view>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">按钮</tn-button>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-button backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="边框">
|
||||
<view>
|
||||
<tn-button :plain="true" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button :plain="true" :borderBold="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">按钮</tn-button>
|
||||
<tn-button :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">按钮</tn-button>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="阴影">
|
||||
<tn-button :shadow="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
|
||||
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
|
||||
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-bg-teal" fontColor="#FFFFFF" margin="10rpx 0">按钮</tn-button>
|
||||
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-main-gradient-indigo" margin="10rpx 0">按钮</tn-button>
|
||||
<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="tn-cool-bg-color-7" margin="10rpx 0">按钮</tn-button>
|
||||
<tn-button :shadow="true" :plain="true" height="100rpx" width="100%" :border="false" margin="10rpx 0">镂空无边框</tn-button>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="加载中">
|
||||
<tn-button :loading="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="禁止点击">
|
||||
<tn-button :disabled="true" width="100%" height="100rpx" margin="10rpx 0">按钮</tn-button>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -41,190 +87,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'basicButton',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
backgroundColor: '',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
shape: '',
|
||||
shadow: false,
|
||||
width: '',
|
||||
height: '',
|
||||
size: '',
|
||||
fontBold: false,
|
||||
padding: '',
|
||||
margin: '',
|
||||
plain: false,
|
||||
border: true,
|
||||
borderBold: false,
|
||||
disabled: false,
|
||||
loading: false,
|
||||
tips: ['无需依赖额外的样式文件','使用tn-button组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'sizeChange'
|
||||
},
|
||||
{
|
||||
title: '内置大小',
|
||||
optional: ['默认','sm','lg'],
|
||||
methods: 'insertSizeChange'
|
||||
},
|
||||
{
|
||||
title: '形状',
|
||||
optional: ['默认','圆角','图标'],
|
||||
methods: 'shapeChange'
|
||||
},
|
||||
{
|
||||
title: '显示阴影',
|
||||
optional: ['不显示','显示'],
|
||||
methods: 'shadowChange'
|
||||
},
|
||||
{
|
||||
title: '字体加粗控制',
|
||||
optional: ['默认','加粗'],
|
||||
methods: 'fontBoldChange'
|
||||
},
|
||||
{
|
||||
title: '镂空控制',
|
||||
optional: ['默认','镂空'],
|
||||
methods: 'plainChange'
|
||||
},
|
||||
{
|
||||
title: '镂空边框控制',
|
||||
optional: ['显示','不显示'],
|
||||
methods: 'borderChange'
|
||||
},
|
||||
{
|
||||
title: '镂空边框加粗控制',
|
||||
optional: ['默认','加粗'],
|
||||
methods: 'borderBoldChange'
|
||||
},
|
||||
{
|
||||
title: '禁用控制',
|
||||
optional: ['关闭','开启'],
|
||||
methods: 'disabledChange'
|
||||
},
|
||||
{
|
||||
title: '加载控制',
|
||||
optional: ['关闭','开启'],
|
||||
methods: 'loadingChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换自定义颜色
|
||||
colorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = 'tn-bg-indigo'
|
||||
this.fontColor = '#4030E8'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义大小
|
||||
sizeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.width = 'auto'
|
||||
this.height = ''
|
||||
this.fontSize = 0
|
||||
this.padding = ''
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, true)
|
||||
break
|
||||
case 1:
|
||||
this.width = '200rpx'
|
||||
this.height = '80rpx'
|
||||
this.fontSize = 36
|
||||
this.padding = '10rpx 20rpx'
|
||||
this.size = ''
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, false)
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换按钮形状
|
||||
shapeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.shape = ''
|
||||
break
|
||||
case 1:
|
||||
this.shape = 'round'
|
||||
break
|
||||
case 2:
|
||||
this.shape = 'icon'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换阴影状态
|
||||
shadowChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.shadow = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(10, true)
|
||||
} else {
|
||||
this.shadow = true
|
||||
this.loading = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(10, false)
|
||||
}
|
||||
},
|
||||
// 切换内置尺寸状态
|
||||
insertSizeChange(event) {
|
||||
this.size = event.index === 0 ? '' : event.name
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换字体加粗状态
|
||||
fontBoldChange(event) {
|
||||
this.fontBold = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换镂空状态
|
||||
plainChange(event) {
|
||||
this.plain = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换镂空边框状态
|
||||
borderChange(event) {
|
||||
this.border = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换镂空边框加粗状态
|
||||
borderBoldChange(event) {
|
||||
this.borderBold = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换加载状态
|
||||
loadingChange(event) {
|
||||
this.loading = event.index === 0 ? false : true
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.basic-button {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
+71
-22
@@ -28,12 +28,10 @@
|
||||
<view class="background__left__picker__item__select-wrapper" :style="[colorSelectItemStyle]">
|
||||
<view class="circle-wrapper right">
|
||||
<view class="circle-progress right-circle"
|
||||
:class="{'circle-progress--active': colorSelectFlag}"
|
||||
:style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
|
||||
</view>
|
||||
<view class="circle-wrapper left">
|
||||
<view class="circle-progress left-circle"
|
||||
:class="{'circle-progress--active': colorSelectFlag}"
|
||||
:style="{borderColor: currentColorIndex === 0 ? '#01BEFF' : colorList[currentColorIndex - 1]['value']['dark']}"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -41,8 +39,18 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="background__right-container">
|
||||
<scroll-view :style="[scrollViewStyle]" scroll-y>
|
||||
<view class="background__right__show" :class="{'background__right__show--visible': colorSelectFlag}">
|
||||
<scroll-view
|
||||
v-if="!isUpdateColorInfo"
|
||||
:style="[scrollViewStyle]"
|
||||
scroll-y
|
||||
:refresher-enabled="true"
|
||||
lower-threshold="20"
|
||||
:refresher-triggered="containerRefreshFlag"
|
||||
@scroll="containerScroll"
|
||||
@scrolltolower="containerScrollLower"
|
||||
@refresherrefresh="containerRefresh"
|
||||
>
|
||||
<view class="background__right__show">
|
||||
<block v-if="currentColorIndex === 0">
|
||||
<view class="background__right__show--title">图鸟基础配色</view>
|
||||
<!-- 色盘 start-->
|
||||
@@ -342,18 +350,23 @@
|
||||
},
|
||||
// 当前选中的颜色序号
|
||||
currentColorIndex: 0,
|
||||
colorSelectFlag: false,
|
||||
// 内容容器滚动容器滚动的位置
|
||||
containerScrollTop: 0,
|
||||
// 标记是否正在更新数据
|
||||
isUpdateColorInfo: false,
|
||||
// 内容区域刷新标志
|
||||
containerRefreshFlag: false,
|
||||
// 当前选中颜色的色值信息
|
||||
selectColorInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.initScrollViewHeight()
|
||||
|
||||
},
|
||||
onReady() {
|
||||
// 等待加载组件完成
|
||||
setTimeout(() => {
|
||||
this.getPickerColorItemInfo()
|
||||
this.initScrollViewHeight()
|
||||
}, 10)
|
||||
},
|
||||
methods: {
|
||||
@@ -362,11 +375,39 @@
|
||||
// 获取当前屏幕的安全高度
|
||||
uni.getSystemInfo({
|
||||
success: (systemInfo) => {
|
||||
this.scrollViewStyle.height = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo
|
||||
.statusBarHeight + 'px'
|
||||
this.scrollViewStyle.height = (systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight) + 'px'
|
||||
this.getPickerColorItemInfo()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 内容容器滚动事件
|
||||
containerScroll(e) {
|
||||
// console.log(e);
|
||||
// this.containerScrollTop = e.detail.scrollTop
|
||||
},
|
||||
// 内容scroll-view下拉刷新事件
|
||||
containerRefresh(e) {
|
||||
// console.log(e);
|
||||
if (this.containerRefreshFlag) return
|
||||
this.containerRefreshFlag = true
|
||||
setTimeout(() => {
|
||||
this.containerRefreshFlag = false
|
||||
}, 10)
|
||||
if (this.currentColorIndex - 1 < 0 || this.isUpdateColorInfo) return
|
||||
this.pickerColorClick(this.currentColorIndex - 1)
|
||||
|
||||
},
|
||||
// 内容scroll-view滚动到底部触发事件
|
||||
containerScrollLower(e) {
|
||||
// console.log(e);
|
||||
if (e.detail.direction === 'bottom') {
|
||||
// console.log(e.detail.direction);
|
||||
// 触发底部
|
||||
// if (this.currentColorIndex + 1 > this.colorList.length || this.isUpdateColorInfo) return
|
||||
// console.log('update');
|
||||
// this.pickerColorClick(this.currentColorIndex + 1)
|
||||
}
|
||||
},
|
||||
// 获取色值列表的位置信息
|
||||
getPickerColorItemInfo() {
|
||||
// 获取picker容器的信息
|
||||
@@ -399,7 +440,7 @@
|
||||
},
|
||||
// 色值选择
|
||||
pickerColorClick(index) {
|
||||
if (this.colorSelectFlag === false || index === this.currentColorIndex) {
|
||||
if (index === this.currentColorIndex) {
|
||||
return
|
||||
}
|
||||
this.currentColorIndex = index
|
||||
@@ -408,23 +449,27 @@
|
||||
},
|
||||
// 设置选中圆环信息
|
||||
updatePickerColorSelectItem() {
|
||||
// 先设置已选中状态为false，然后再设置选中圆环的位置信息，等待动画执行完毕后在设置已选中状态为true
|
||||
this.colorSelectFlag = false
|
||||
|
||||
const colorInfos = this.pickerColorInfos[this.currentColorIndex]
|
||||
this.colorSelectItemStyle.top = colorInfos.x - uni.upx2px(40) + 'px'
|
||||
this.colorSelectItemStyle.left = colorInfos.y - uni.upx2px(40) + 'px'
|
||||
|
||||
setTimeout(() => {
|
||||
this.colorSelectFlag = true
|
||||
}, 10)
|
||||
},
|
||||
// 设置选中颜色的信息
|
||||
updateSelectColorInfo() {
|
||||
if (this.currentColorIndex === 0) {
|
||||
return
|
||||
}
|
||||
this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
|
||||
this.isUpdateColorInfo = true
|
||||
this.$t.messageUtils.loading('加载中...')
|
||||
// this.containerScrollTop = Math.random()
|
||||
setTimeout(() => {
|
||||
// this.containerScrollTop = 0
|
||||
this.selectColorInfo = this.colorList[this.currentColorIndex - 1]
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.isUpdateColorInfo = false
|
||||
}, 10)
|
||||
// setTimeout(() => {
|
||||
|
||||
// }, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -580,7 +625,8 @@
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: rotate(225deg);
|
||||
// transform: rotate(225deg);
|
||||
transform: rotate(45deg);
|
||||
|
||||
&.right-circle {
|
||||
right: 0;
|
||||
@@ -596,9 +642,9 @@
|
||||
// transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
|
||||
}
|
||||
|
||||
&--active {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
// &--active {
|
||||
// transform: rotate(45deg);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -619,6 +665,8 @@
|
||||
padding: 30rpx;
|
||||
overflow: hidden;
|
||||
transform-origin: 0 50%;
|
||||
// opacity: 0;
|
||||
// transition: opacity 0.2s ease;
|
||||
// transform: scaleX(0) rotate(-90deg);
|
||||
// transform: rotateY(-90deg);
|
||||
// transform: scaleX(0);
|
||||
@@ -628,6 +676,7 @@
|
||||
// transform: scaleX(1) rotate(0deg);
|
||||
// transform: rotateY(0deg);
|
||||
// transform: scaleX(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&--title {
|
||||
|
||||
@@ -1,22 +1,14 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-flex">
|
||||
<view class="basic-flex tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Flex布局</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="tn-margin-bottom-xl" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-xl">
|
||||
固定尺寸 & 元素
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<demo-title title="固定尺寸 & 元素">
|
||||
<view class="tn-flex tn-flex-wrap">
|
||||
<view class="tn-flex-basic-xs tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xs(20%)</view>
|
||||
<view class="tn-flex-basic-md"></view>
|
||||
@@ -27,14 +19,9 @@
|
||||
<view class="tn-flex-basic-xl tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">xl(80%)</view>
|
||||
<view class="tn-flex-basic-full tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">full(100%)</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例1
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<demo-title title="应用示例1">
|
||||
<view class="tn-flex tn-flex-wrap">
|
||||
<view class="tn-flex-basic-md">
|
||||
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
@@ -65,27 +52,9 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<!-- <view class="tn-margin">
|
||||
<view class="tn-flex tn-flex-wrap">
|
||||
<view class="tn-flex-basic-xs tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-basic-md"></view>
|
||||
<view class="tn-flex-basic-sm tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-basic-md"></view>
|
||||
<view class="tn-flex-basic-md tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-basic-lg tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-basic-xl tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-basic-full tn-padding-lg tn-margin-top-sm tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-xl">
|
||||
比例布局 & 元素
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<demo-title title="比例布局 & 元素">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
|
||||
<view class="tn-flex-1 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">1</view>
|
||||
@@ -99,277 +68,225 @@
|
||||
<view class="tn-flex-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
|
||||
<view class="tn-flex-3 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">3</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例1
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例1">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例2
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例2">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例3
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例3">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例4
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-3">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例4">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-3">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例5
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例5">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例6
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例6">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="应用示例7">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例7
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例8">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-3">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例8
|
||||
<demo-title title="应用示例9">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-3">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例9
|
||||
<demo-title title="应用示例10">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例10
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例11">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-2">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例11
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例12">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-3">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例12
|
||||
<demo-title title="应用示例13">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-3">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
<demo-title title="应用示例14">
|
||||
<view class="tn-flex">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例13
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例14
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-xl">
|
||||
水平对齐 & justify
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<demo-title title="水平对齐 & justify">
|
||||
<view class="tn-flex tn-flex-row-left">
|
||||
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
|
||||
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">start</view>
|
||||
@@ -390,29 +307,17 @@
|
||||
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
|
||||
<view class="justify-content-item tn-padding tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">between</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例1
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<demo-title title="应用示例1">
|
||||
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例2
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin">
|
||||
<demo-title title="应用示例2">
|
||||
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
@@ -433,27 +338,17 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例3
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<demo-title title="应用示例3">
|
||||
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例4
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<demo-title title="应用示例4">
|
||||
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
@@ -474,27 +369,17 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例5
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<demo-title title="应用示例5">
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="justify-content-item tn-padding-xl tn-text-center tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例6
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<demo-title title="应用示例6">
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
@@ -515,16 +400,9 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-xl">
|
||||
垂直对齐 & align
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-sm">
|
||||
<demo-title title="垂直对齐 & align">
|
||||
<view class="tn-flex tn-flex-col-top">
|
||||
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
|
||||
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">top</view>
|
||||
@@ -537,8 +415,9 @@
|
||||
<view class="align-content-item tn-padding-xl tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">left</view>
|
||||
<view class="align-content-item tn-padding-sm tn-text-center tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">bottom</view>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -547,8 +426,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'BasicFlexLayout',
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -562,8 +443,6 @@
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import '@/static/css/components/demo_page_common.scss';
|
||||
|
||||
/* 内容容器 start */
|
||||
.bg-flex-shadow{
|
||||
background-color: #00C3FF;
|
||||
|
||||
+44
-83
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-shadow">
|
||||
<view class="basic-shadow tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>阴影</tn-nav-bar>
|
||||
@@ -8,20 +8,27 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<block v-if="shadowType === 'bg'">
|
||||
<view
|
||||
class="shadow-content"
|
||||
:class="[shadowClass]"
|
||||
></view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view
|
||||
class="shadow-image tn-shadow-blur"
|
||||
></view>
|
||||
</block>
|
||||
<view style="visibility: hidden;height: 1px;">tuniao</view>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="普通阴影">
|
||||
<view class="shadow-content tn-shadow"></view>
|
||||
<view class="shadow-content tn-shadow-warp"></view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="有色阴影">
|
||||
<view class="shadow-content tn-bg-teal tn-shadow-teal"></view>
|
||||
<view class="shadow-content tn-bg-indigo tn-shadow-indigo"></view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="背景图片阴影">
|
||||
<view class="shadow-content shadow-content__image tn-shadow-blur"></view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="文字阴影">
|
||||
<view class="shadow-content__text tn-color-indigo tn-text-shadow-indigo">
|
||||
图鸟UI，专注UI开发
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -30,89 +37,43 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'basicShadow',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
shadowType: 'bg',
|
||||
shadowColor: '',
|
||||
shadowWarp: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','不使用任何组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '样式',
|
||||
optional: ['背景阴影','图片阴影'],
|
||||
methods: 'typeChange'
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
shadowClass() {
|
||||
let clazz = ''
|
||||
if (this.shadowType === 'bg') {
|
||||
if (this.shadowWarp) {
|
||||
clazz += ` tn-shadow-warp`
|
||||
} else {
|
||||
if (this.shadowColor === '') {
|
||||
clazz += ` tn-shadow`
|
||||
} else {
|
||||
clazz += ` ${this.shadowColor}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return clazz
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换阴影样式
|
||||
typeChange(event) {
|
||||
this.shadowType = event.index === 0 ? 'bg' : 'image'
|
||||
},
|
||||
// 切换阴影颜色
|
||||
colorChange(event) {
|
||||
this.shadowColor = event.index === 0 ? '' : 'tn-shadow-red'
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.shadow-content {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
background-color: $tn-font-holder-color;
|
||||
margin: 0 auto;
|
||||
.basic-shadow {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.shadow-image {
|
||||
width: 80%;
|
||||
.shadow-content {
|
||||
height: 80rpx;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #FFFFFF;
|
||||
margin: 30rpx 0;
|
||||
|
||||
&__image {
|
||||
z-index: 1;
|
||||
background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7207d16b-b9c3-4105-8d0d-e9e0c7785f66/605563a1-a210-42f3-99e4-8de3c655c59e.jpg);
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+82
-209
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-tag">
|
||||
<view class="basic-tag tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>标签</tn-nav-bar>
|
||||
@@ -8,37 +8,85 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click" @modeClick="modeClick">
|
||||
<block v-if="singleTagFlag">
|
||||
<tn-tag :backgroundColor="backgroundColor" :fontColor="fontColor" :fontSize="fontSize" :shape="shape"
|
||||
:width="width" :height="height" :size="size" :padding="padding" :margin="margin" :plain="plain"
|
||||
:originLeft="originLeft" :originRight="originRight" :class="{'origin-demo':showOriginDemo}">
|
||||
演示标签
|
||||
</tn-tag>
|
||||
</block>
|
||||
<block v-else>
|
||||
<demo-title title="基础">
|
||||
<tn-tag>标签</tn-tag>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="大小">
|
||||
<view>
|
||||
<tn-tag size="sm" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag size="lg" margin="10rpx 10rpx">标签</tn-tag>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-tag width="200rpx" height="100rpx" :fontSize="40" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag padding="40rpx 80rpx" margin="10rpx 10rpx">标签</tn-tag>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="形状">
|
||||
<view>
|
||||
<tn-tag margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag shape="radius" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag shape="circle" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag shape="circleLeft" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag shape="circleRight" margin="10rpx 10rpx">标签</tn-tag>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="颜色">
|
||||
<view>
|
||||
<tn-tag backgroundColor="#01BEFF" fontColor="#FFFFFF" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag backgroundColor="rgba(1, 190, 255, 0.8)" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag backgroundColor="tn-bg-teal" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white" margin="10rpx 10rpx">标签</tn-tag>
|
||||
</view>
|
||||
<view>
|
||||
<tn-tag backgroundColor="tn-main-gradient-indigo" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag backgroundColor="tn-main-gradient-indigo--reverse" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag backgroundColor="tn-main-gradient-indigo--light" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag backgroundColor="tn-main-gradient-indigo--single" fontColor="rgba(255, 255, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="镂空">
|
||||
<view>
|
||||
<tn-tag :plain="true" backgroundColor="#01BEFF" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag :plain="true" backgroundColor="rgba(1, 190, 255, 0.8)" margin="10rpx 10rpx">标签</tn-tag>
|
||||
<tn-tag :plain="true" backgroundColor="tn-bg-teal" margin="10rpx 10rpx">标签</tn-tag>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="标签使用">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="origin-demo">
|
||||
<tn-tag class="origin-demo__tag" backgroundColor="#01BEFF" fontColor="#FFFFFF" width="auto" height="30rpx" shape="circle">99+</tn-tag>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="capsule">
|
||||
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" :plain="false">
|
||||
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
|
||||
<text class="tn-icon-add"></text>
|
||||
</tn-tag>
|
||||
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" fontColor="#080808" :plain="true">
|
||||
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
|
||||
2
|
||||
</tn-tag>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="capsule">
|
||||
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" :plain="false">
|
||||
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleLeft" backgroundColor="#01BEFF" fontColor="#FFFFFF" :plain="false">
|
||||
<text class="tn-icon-add"></text>
|
||||
</tn-tag>
|
||||
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" fontColor="#080808" :plain="true">
|
||||
<tn-tag class="capsule-tag" width="100%" height="100%" padding="0" shape="circleRight" backgroundColor="#01BEFF" fontColor="#080808" :plain="true">
|
||||
2
|
||||
</tn-tag>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</dynamic-demo-template>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -47,213 +95,38 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'basicTag',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
backgroundColor: '',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
shape: '',
|
||||
width: '',
|
||||
height: '',
|
||||
size: '',
|
||||
padding: '',
|
||||
margin: '',
|
||||
plain: false,
|
||||
originLeft: false,
|
||||
originRight: false,
|
||||
|
||||
// 演示基准点控制
|
||||
showOriginDemo: false,
|
||||
|
||||
// 单双标签切换
|
||||
singleTagFlag: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-tag组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'sizeChange'
|
||||
},
|
||||
{
|
||||
title: '内置大小',
|
||||
optional: ['默认','sm','lg'],
|
||||
methods: 'innerSizeChange'
|
||||
},
|
||||
{
|
||||
title: '形状',
|
||||
optional: ['默认','圆角','椭圆','左半圆','右半圆'],
|
||||
methods: 'shapeChange'
|
||||
},
|
||||
{
|
||||
title: '镂空',
|
||||
optional: ['默认','镂空'],
|
||||
methods: 'plainChange'
|
||||
},
|
||||
{
|
||||
title: '基准点',
|
||||
optional: ['不设置','左基准','右基准'],
|
||||
methods: 'originChange'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '样式切换',
|
||||
section: [
|
||||
{
|
||||
title: '单双标签',
|
||||
optional: ['单标签','双标签'],
|
||||
methods: 'singleTagChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
modeClick(event) {
|
||||
if (event.index === 0) {
|
||||
this.singleTagFlag = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(1, 0, 0)
|
||||
}
|
||||
},
|
||||
// 切换自定义颜色
|
||||
colorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
} else {
|
||||
this.backgroundColor = 'tn-bg-red'
|
||||
this.fontColor = '#FFFFFF'
|
||||
}
|
||||
},
|
||||
// 切换自定义大小
|
||||
sizeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.width = ''
|
||||
this.height = ''
|
||||
this.padding = ''
|
||||
this.margin = ''
|
||||
this.fontSize = 0
|
||||
this.size = ''
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, true)
|
||||
} else {
|
||||
this.width = '240rpx'
|
||||
this.height = '80rpx'
|
||||
this.padding = '10rpx 20rpx'
|
||||
this.margin = '10rpx'
|
||||
this.fontSize = 36
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, false)
|
||||
}
|
||||
},
|
||||
// 切换按钮形状
|
||||
shapeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.shape = ''
|
||||
break
|
||||
case 1:
|
||||
this.shape = 'radius'
|
||||
break
|
||||
case 2:
|
||||
this.shape = 'circle'
|
||||
break
|
||||
case 3:
|
||||
this.shape = 'circleLeft'
|
||||
break
|
||||
case 4:
|
||||
this.shape = 'circleRight'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换内置大小状态
|
||||
innerSizeChange(event) {
|
||||
this.size = event.index === 0 ? '' : event.name
|
||||
},
|
||||
// 切换镂空状态
|
||||
plainChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.plain = false
|
||||
this.fontColor = '#FFFFFF'
|
||||
break
|
||||
case 1:
|
||||
this.plain = true
|
||||
this.fontColor = 'tn-color-black'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换基准点状态
|
||||
originChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.showOriginDemo = false
|
||||
this.originLeft = false
|
||||
this.originRight = false
|
||||
break
|
||||
case 1:
|
||||
this.showOriginDemo = true
|
||||
this.originLeft = true
|
||||
this.originRight = false
|
||||
break
|
||||
case 2:
|
||||
this.showOriginDemo = true
|
||||
this.originLeft = false
|
||||
this.originRight = true
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 切换单双标签
|
||||
singleTagChange(event) {
|
||||
this.singleTagFlag = event.index === 0
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* #ifdef H5 */
|
||||
.basic-tag {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.origin-demo {
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
tn-tag {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
margin-right: 70rpx;
|
||||
position: relative;
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef MP-WEIXIN */
|
||||
.origin-demo {
|
||||
.tn-tag-class {
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(0.7);
|
||||
&__tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
@@ -1,245 +0,0 @@
|
||||
<template>
|
||||
<view class="tn-bg-red" style="height: 100vh;">
|
||||
<view class="tabbar">
|
||||
<view class="tabbar__bg" :style="wrapStyle"></view>
|
||||
<view class="tabbar__list">
|
||||
<block v-for="(item, index) in tabbar" :key="index">
|
||||
<view :id="`tabbar_item_${index}`" class="tabbar__item" :class="[{'tabbar__item--active': index === currentTabbarIndex}]" @click="changeTabbar(index)">
|
||||
<view class="tabbar__item__icon" :class="[item.icon]"></view>
|
||||
<view class="tabbar__item__text">{{ item.name }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="tabbar__select-active-bg" :class="[showActiceBg ? 'tabbar__select-active-bg--show' : 'tabbar__select-active-bg--hide']" :style="activeBgStyle"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TestPage',
|
||||
data() {
|
||||
return {
|
||||
wrapMaskPositionLeft: 0,
|
||||
activeBgPositionLeft: 0,
|
||||
showActiceBg: false,
|
||||
currentTabbarIndex: 0,
|
||||
tabbarItemInfo: [],
|
||||
tabbar: [
|
||||
{ name: 'home', icon: 'tn-icon-baby' },
|
||||
{ name: 'home', icon: 'tn-icon-baby' },
|
||||
{ name: 'home', icon: 'tn-icon-baby' },
|
||||
{ name: 'home', icon: 'tn-icon-baby' },
|
||||
{ name: 'home', icon: 'tn-icon-baby' }
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapStyle() {
|
||||
return {
|
||||
'-webkit-mask-position': `${this.wrapMaskPositionLeft}px -1px, 100%`
|
||||
}
|
||||
},
|
||||
activeBgStyle() {
|
||||
return {
|
||||
'left': `${this.activeBgPositionLeft}px`
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$nextTick(() => {
|
||||
this.getTabbarItemInfo()
|
||||
this.updateHollowsPosition()
|
||||
this.updateActiveBgPosition(true)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 获取底部元素的位置
|
||||
getTabbarItemInfo() {
|
||||
const view = uni.createSelectorQuery().in(this)
|
||||
for(let i = 0; i < this.tabbar.length; i++) {
|
||||
view.select('#tabbar_item_' + i).boundingClientRect()
|
||||
}
|
||||
view.exec(res => {
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getTabbarItemInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
|
||||
// 将信息存入数组中
|
||||
res.map((item) => {
|
||||
this.tabbarItemInfo.push({
|
||||
left: item.left,
|
||||
width: item.width
|
||||
})
|
||||
})
|
||||
console.log(this.tabbarItemInfo)
|
||||
})
|
||||
},
|
||||
// 更新凹陷位置
|
||||
updateHollowsPosition() {
|
||||
const { width, left } = this.tabbarItemInfo[this.currentTabbarIndex]
|
||||
// 计算掩模图片的宽高比
|
||||
// const imageRatio = 200 / 92
|
||||
// 计算定高的宽比
|
||||
const imageFixedHeightWidthRatioValue = 300 * (uni.upx2px(64) / 92)
|
||||
this.wrapMaskPositionLeft = left - ((imageFixedHeightWidthRatioValue - width) / 2)
|
||||
console.log(imageFixedHeightWidthRatioValue, this.wrapMaskPositionLeft);
|
||||
},
|
||||
// 更新激活时背景的位置
|
||||
updateActiveBgPosition(init = false) {
|
||||
const { width, left } = this.tabbarItemInfo[this.currentTabbarIndex]
|
||||
this.activeBgPositionLeft = left + ((width - uni.upx2px(100)) / 2)
|
||||
if (!init) {
|
||||
this.showActiceBg = false
|
||||
setTimeout(() => {
|
||||
this.showActiceBg = true
|
||||
}, 150)
|
||||
} else {
|
||||
this.showActiceBg = true
|
||||
}
|
||||
},
|
||||
// 修改当前选中的tabbar
|
||||
changeTabbar(index) {
|
||||
this.currentTabbarIndex = index
|
||||
this.updateHollowsPosition()
|
||||
this.updateActiveBgPosition()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tabbar {
|
||||
height: 100%;
|
||||
height: 110rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
|
||||
&__bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
// background-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: #FFFFFF;
|
||||
// , linear-gradient(#000, #000)
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 61.5'%3E%3Cpath d='M100 0H0c32.9 0 49.3 61.5 100 61.5S167.1 0 200 0H100z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
|
||||
// -webkit-mask-size: auto 50px, auto, cover;
|
||||
-webkit-mask-size: auto 64rpx, cover;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
// -webkit-mask-position: 93.75px -1px, 100%;
|
||||
-webkit-mask-composite: xor; /*只显示不重合的地方， chorem 、safari 支持*/
|
||||
// backdrop-filter: blur(5px);
|
||||
z-index: 1;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
&__list {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
|
||||
&--active {
|
||||
.tabbar__item__icon {
|
||||
top: -28rpx;
|
||||
}
|
||||
|
||||
.tabbar__item__text {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 56rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
&__text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 10rpx;
|
||||
transition: 0.5s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__select-active-bg {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #FFFFFF;
|
||||
transition: 0.5s;
|
||||
z-index: -1;
|
||||
|
||||
&--hide {
|
||||
top: calc(110rpx + 50rpx);
|
||||
}
|
||||
|
||||
&--show {
|
||||
top: -48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .wrap {
|
||||
// width: 100%;
|
||||
// height: 100rpx;
|
||||
|
||||
// position: fixed;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// // background-color: rgba(255, 255, 255, 0.3);
|
||||
// background-color: #FFFFFF;
|
||||
// // -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 28'%3E%3Cpath d='M13.37 9.37C17.23 20.36 27.7 28.23 40 28.23s22.77-7.87 26.63-18.85C68.62 3.73 74.01 0 80 0H0c5.99 0 11.38 3.73 13.37 9.37z'/%3E%3C/svg%3E"), linear-gradient(red, red);
|
||||
// // -webkit-mask-size: 140rpx, 100%;
|
||||
// // -webkit-mask-repeat: no-repeat;
|
||||
// // -webkit-mask-position: 0 0, 0;
|
||||
// // -webkit-mask-composite: xor; /*只显示不重合的地方， chorem 、safari 支持*/
|
||||
// // mask-composite: exclude; /* 排除，只显示不重合的地方， firefox 支持 */
|
||||
// // backdrop-filter: blur(5px)
|
||||
|
||||
// &::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// box-shadow: 0 -3rpx 8rpx rgba(0, 0, 0, 0.08);
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
@@ -9,7 +9,7 @@
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="demoTips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showActionSheet">弹出ActionSheet</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<view class="tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-center">
|
||||
<tn-button style="width: 100%;" width="100%" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button>
|
||||
<tn-button style="width: 100%;" width="100%" backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showCalendar">弹出日历</tn-button>
|
||||
<view v-if="result !== ''" class="calendar-result tn-border-dashed">
|
||||
{{ result }}
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-collapse">
|
||||
<view class="components-collapse tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Collapse折叠面板</tn-nav-bar>
|
||||
@@ -8,28 +8,65 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-collapse v-if="!customCollapse" :accordion="accordion" :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle" :arrow="arrow" :arrowColor="arrowColor" :hoverClass="hoverClass" @change="change">
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="item.disabled" :align="align">
|
||||
<view class="collapse-item-content">
|
||||
<demo-title title="手风琴模式">
|
||||
<tn-collapse>
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
|
||||
<view class="tn-text-break-word">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
<tn-collapse v-else :accordion="accordion" :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle" :arrow="arrow" :arrowColor="arrowColor" :hoverClass="hoverClass" @change="change">
|
||||
<tn-collapse-item title="足迹" :align="align">
|
||||
<tn-list-cell>广州</tn-list-cell>
|
||||
<tn-list-cell>深圳</tn-list-cell>
|
||||
<tn-list-cell>佛山</tn-list-cell>
|
||||
</tn-collapse-item>
|
||||
<tn-collapse-item title="时间">
|
||||
<tn-list-cell>12月</tn-list-cell>
|
||||
<tn-list-cell>11月</tn-list-cell>
|
||||
<tn-list-cell>10月</tn-list-cell>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="允许全部展开">
|
||||
<tn-collapse :accordion="false">
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
|
||||
<view class="tn-text-break-word">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
</dynamic-demo-template>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="禁止第二项展开">
|
||||
<tn-collapse>
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="index === 1">
|
||||
<view class="tn-text-break-word">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="关闭点击效果">
|
||||
<tn-collapse hoverClass="">
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
|
||||
<view class="tn-text-break-word">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="隐藏箭头">
|
||||
<tn-collapse :arrow="false">
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title">
|
||||
<view class="tn-text-break-word">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义样式">
|
||||
<tn-collapse :headStyle="headStyle" :bodyStyle="bodyStyle" :itemStyle="itemStyle">
|
||||
<tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" align="center">
|
||||
<view class="tn-text-break-word">
|
||||
{{ item.content }}
|
||||
</view>
|
||||
</tn-collapse-item>
|
||||
</tn-collapse>
|
||||
</demo-title>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@@ -37,158 +74,46 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsCollapse',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
title: '关雎',
|
||||
content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。',
|
||||
disabled: false
|
||||
content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。'
|
||||
},
|
||||
{
|
||||
title: '长歌行',
|
||||
content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！',
|
||||
disabled: false
|
||||
content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！'
|
||||
},
|
||||
{
|
||||
title: '秋风辞',
|
||||
content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！',
|
||||
disabled: false
|
||||
content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！'
|
||||
}
|
||||
],
|
||||
accordion: true,
|
||||
headStyle: {},
|
||||
bodyStyle: {},
|
||||
itemStyle: {},
|
||||
arrow: true,
|
||||
arrowColor: '#AAAAAA',
|
||||
hoverClass: 'tn-hover',
|
||||
align: 'left',
|
||||
|
||||
customCollapse: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-collapse、tn-collapse-item组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '手风琴模式',
|
||||
optional: ['开启','关闭'],
|
||||
methods: 'accoraionChange'
|
||||
},
|
||||
{
|
||||
title: '禁用打开',
|
||||
optional: ['无','禁止第二项打开'],
|
||||
methods: 'disabledChange'
|
||||
},
|
||||
{
|
||||
title: '点击效果',
|
||||
optional: ['默认','无'],
|
||||
methods: 'hoverClassChange'
|
||||
},
|
||||
{
|
||||
title: '箭头显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'arrowChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'styleChange'
|
||||
},
|
||||
{
|
||||
title: '自定义Item内容',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customItemChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
headStyle: {
|
||||
backgroundColor: '#EFEFEF'
|
||||
},
|
||||
bodyStyle: {
|
||||
backgroundColor: '#EFEFEF'
|
||||
},
|
||||
itemStyle: {
|
||||
backgroundColor: '#EFEFEF',
|
||||
borderRadius: '20rpx',
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换手风琴模式
|
||||
accoraionChange(event) {
|
||||
this.accordion = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换Item禁止打开
|
||||
disabledChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.list[1].disabled = false
|
||||
} else {
|
||||
this.list[1].disabled = true
|
||||
}
|
||||
|
||||
},
|
||||
// 切换点击效果
|
||||
hoverClassChange(event) {
|
||||
this.hoverClass = event.index === 0 ? 'tn-hover' : ''
|
||||
},
|
||||
// 切换箭头显示
|
||||
arrowChange(event) {
|
||||
this.arrow = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义样式
|
||||
styleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.headStyle = {}
|
||||
this.bodyStyle = {}
|
||||
this.itemStyle = {}
|
||||
this.arrowColor = '#AAAAAA'
|
||||
this.align = 'left'
|
||||
break
|
||||
case 1:
|
||||
this.headStyle = {
|
||||
borderBottom: '1rpx solid #AAAAAA'
|
||||
}
|
||||
this.bodyStyle = {
|
||||
margin: '10rpx'
|
||||
}
|
||||
this.itemStyle = {
|
||||
'text-indent': '2em'
|
||||
}
|
||||
this.arrowColor = '#E6E6E6'
|
||||
this.align = 'center'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义item内容
|
||||
customItemChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.customCollapse = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, true)
|
||||
break
|
||||
case 1:
|
||||
this.customCollapse = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 面板发生了改变
|
||||
change() {
|
||||
setTimeout(() => {
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}, 300)
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collapse-item-content {
|
||||
word-wrap: break-word;
|
||||
.components-collapse {
|
||||
background-color: $tn-bg-gray-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-count_down">
|
||||
<view class="components-count_down tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>countdown倒计时</tn-nav-bar>
|
||||
@@ -8,25 +8,47 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-count-down
|
||||
:timestamp="timestamp"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:separator="separator"
|
||||
:separatorColor="separatorColor"
|
||||
:separatorSize="separatorSize"
|
||||
:showBorder="showBorder"
|
||||
:borderColor="borderColor"
|
||||
:showDays="showDays"
|
||||
:showHours="showHours"
|
||||
:showMinutes="showMinutes"
|
||||
:showSeconds="showSeconds"
|
||||
:hideZeroDay="hideZeroDay"
|
||||
@end="countDownEnd"
|
||||
></tn-count-down>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="基本使用">
|
||||
<tn-count-down :timestamp="3600"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示边框">
|
||||
<tn-count-down :timestamp="3600" :showBorder="true"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="中文分割时间">
|
||||
<tn-count-down :timestamp="3600" separator="cn"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="天数为零时不隐藏">
|
||||
<tn-count-down :timestamp="3600" :hideZeroDay="true"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示天">
|
||||
<tn-count-down :timestamp="360000" :showDays="true" :showHours="false" :showMinutes="false" :showSeconds="false"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示天时">
|
||||
<tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="false" :showSeconds="false"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示天时分">
|
||||
<tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="false"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示天时分秒">
|
||||
<tn-count-down :timestamp="360000" :showDays="true" :showHours="true" :showMinutes="true" :showSeconds="true"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义尺寸">
|
||||
<tn-count-down :timestamp="3600" :fontSize="60" :separatorSize="60"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-count-down :timestamp="3600" backgroundColor="tn-main-gradient-indigo" fontColor="#FFFFFF"></tn-count-down>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -35,134 +57,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsCountDown',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
timestamp: 3600,
|
||||
backgroundColor: '#FFFFFF',
|
||||
fontSize: 30,
|
||||
fontColor: '#080808',
|
||||
separator: 'en',
|
||||
separatorSize: 30,
|
||||
separatorColor: '#080808',
|
||||
showBorder: true,
|
||||
borderColor: '#080808',
|
||||
showDays: true,
|
||||
showHours: true,
|
||||
showMinutes: true,
|
||||
showSeconds: true,
|
||||
hideZeroDay: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-count-down组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '时间',
|
||||
optional: ['360', '3600', '543000'],
|
||||
methods: 'timestampChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '大小',
|
||||
optional: ['24', '30', '45'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '边框显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'borderChange'
|
||||
},
|
||||
{
|
||||
title: '分隔符',
|
||||
optional: ['冒号','中文'],
|
||||
methods: 'separatorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义格式',
|
||||
optional: ['日时分秒','时分秒'],
|
||||
methods: 'customFormatChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换时间
|
||||
timestampChange(event) {
|
||||
this.timestamp = Number(event.name)
|
||||
},
|
||||
// 切换边框显示
|
||||
borderChange(event) {
|
||||
this.showBorder = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换分隔符
|
||||
separatorChange(event) {
|
||||
this.separator = event.index === 0 ? 'en' : 'cn'
|
||||
},
|
||||
// 切换大小
|
||||
sizeChange(event) {
|
||||
this.fontSize = Number(event.name)
|
||||
this.separatorSize = Number(event.name)
|
||||
},
|
||||
// 切换自定义颜色
|
||||
customColorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = '#FFFFFF'
|
||||
this.separatorColor = '#080808'
|
||||
this.fontColor = '#080808'
|
||||
this.borderColor = '#080808'
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = '#E6E6E6'
|
||||
this.separatorColor = '#01BEFF'
|
||||
this.fontColor = '#3D7EFF'
|
||||
this.borderColor = '#31C9E8'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义格式
|
||||
customFormatChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.showDays = true
|
||||
this.showHours = true
|
||||
this.showMinutes = true
|
||||
this.showSeconds = true
|
||||
break
|
||||
case 1:
|
||||
this.showDays = false
|
||||
this.showHours = true
|
||||
this.showMinutes = true
|
||||
this.showSeconds = true
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
// 倒计时结束
|
||||
countDownEnd() {
|
||||
this.$t.messageUtils.toast('倒计时结束')
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.components-count_down {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-count_scroll">
|
||||
<view class="components-count_scroll tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>countScroll数字滚动</tn-nav-bar>
|
||||
@@ -8,16 +8,37 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-count-scroll
|
||||
:value="value"
|
||||
:height="height"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:bold="bold"
|
||||
:duration="duration"
|
||||
></tn-count-scroll>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="基本使用">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-count-scroll :value="888.88"></tn-count-scroll>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-count-scroll :value="9999"></tn-count-scroll>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="加长持续时间">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-count-scroll :value="888.88" :duration="0.5"></tn-count-scroll>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-count-scroll :value="9999" :duration="3"></tn-count-scroll>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="字体加大加粗">
|
||||
<tn-count-scroll :value="888.88" :height="100" :fontSize="100" :bold="true"></tn-count-scroll>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-count-scroll :value="888.88" fontColor="#E88C30"></tn-count-scroll>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -26,85 +47,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsCountTo',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
value: 888.88,
|
||||
height: 32,
|
||||
fontColor: '#080808',
|
||||
fontSize: 32,
|
||||
bold: false,
|
||||
duration: 1.2,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-count-scroll组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '值',
|
||||
optional: ['90','1234','888.88'],
|
||||
methods: 'valueChange',
|
||||
current: 2
|
||||
},
|
||||
{
|
||||
title: '持续时间',
|
||||
optional: ['默认','0.5', '3'],
|
||||
methods: 'durationChange'
|
||||
},
|
||||
{
|
||||
title: '加粗',
|
||||
optional: ['默认','加粗'],
|
||||
methods: 'boldChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customStyleChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换值
|
||||
valueChange(event) {
|
||||
this.value = Number(event.name)
|
||||
},
|
||||
// 切换持续时间
|
||||
durationChange(event) {
|
||||
this.duration = event.index === 0 ? 1.2 : Number(event.name)
|
||||
},
|
||||
// 切换加粗
|
||||
boldChange(event) {
|
||||
this.bold = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换自定义样式
|
||||
customStyleChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.height = 32
|
||||
this.fontColor = '#080808'
|
||||
this.fontSize = 32
|
||||
break
|
||||
case 1:
|
||||
this.height = 80
|
||||
this.fontColor = '#E88C30'
|
||||
this.fontSize = 80
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.components-count_scroll {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-count_to">
|
||||
<view class="components-count_to tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>countTo数字跳转</tn-nav-bar>
|
||||
@@ -8,16 +8,37 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-count-to
|
||||
:startVal="startVal"
|
||||
:endVal="endVal"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:decimals="decimals"
|
||||
:bold="bold"
|
||||
></tn-count-to>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="基本使用">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-count-to :startVal="0" :endVal="1000"></tn-count-to>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-count-to :startVal="100" :endVal="2000"></tn-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示小数">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-count-to :startVal="0" :endVal="1000.9" :decimals="1"></tn-count-to>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-count-to :startVal="0" :endVal="1000.99" :decimals="2"></tn-count-to>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="字体加大加粗显示">
|
||||
<tn-count-to :startVal="0" :endVal="1000" :bold="true" :fontSize="100"></tn-count-to>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义字体颜色">
|
||||
<tn-count-to :startVal="0" :endVal="1000" fontColor="#A4E82F"></tn-count-to>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -26,85 +47,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsCountTo',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
fontColor: '#080808',
|
||||
fontSize: 50,
|
||||
startVal: 0,
|
||||
endVal: 1000,
|
||||
duration: 2000,
|
||||
decimals: 0,
|
||||
bold: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-count-to组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '滚动范围',
|
||||
optional: ['0-1000','100-2500'],
|
||||
methods: 'valChange'
|
||||
},
|
||||
{
|
||||
title: '小数显示位数',
|
||||
optional: ['不显示','1','2'],
|
||||
methods: 'decimalsChange'
|
||||
},
|
||||
{
|
||||
title: '加粗',
|
||||
optional: ['默认','加粗'],
|
||||
methods: 'boldChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customStyleChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换开始结束值
|
||||
valChange(event) {
|
||||
const value = event.name.split('-')
|
||||
this.startVal = Number(value[0])
|
||||
this.endVal = Number(value[1])
|
||||
},
|
||||
// 切换小数显示
|
||||
decimalsChange(event) {
|
||||
this.decimals = event.index === 0 ? 0 : Number(event.name)
|
||||
},
|
||||
// 切换加粗
|
||||
boldChange(event) {
|
||||
this.bold = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换自定义样式
|
||||
customStyleChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.fontColor = '#080808'
|
||||
this.fontSize = 50
|
||||
break
|
||||
case 1:
|
||||
this.fontColor = '#A4E82F'
|
||||
this.fontSize = 100
|
||||
break
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.components-count_to {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
|
||||
<view class="components-fab">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>fab悬浮按钮</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<view>请点击下边悬浮按钮</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
<tn-fab
|
||||
:btnList="btnList"
|
||||
:left="left"
|
||||
:right="right"
|
||||
:bottom="bottom"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:iconSize="iconSize"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:icon="icon"
|
||||
:animationType="animationType"
|
||||
:showMask="showMask"
|
||||
@click="clickFabItem"
|
||||
>
|
||||
</tn-fab>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'componentsFab',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
|
||||
left: 'auto',
|
||||
right: 40,
|
||||
bottom: 100,
|
||||
width: 88,
|
||||
height: 88,
|
||||
iconSize: 64,
|
||||
backgroundColor: '#01BEFF',
|
||||
fontColor: '#FFFFFF',
|
||||
icon: 'open',
|
||||
animationType: 'up',
|
||||
showMask: true,
|
||||
btnList: [
|
||||
{
|
||||
icon: 'logo-tuniao',
|
||||
text: '图鸟科技',
|
||||
bgColor: '#E72F8C'
|
||||
},
|
||||
{
|
||||
text: 'UI',
|
||||
textSize: 32,
|
||||
bgColor: '#FF7043'
|
||||
},
|
||||
{
|
||||
icon: 'share-triangle',
|
||||
iconSize: 32,
|
||||
iconColor: '#AAAAAA',
|
||||
bgColor: '#24F083',
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-fab组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '悬浮按钮位置',
|
||||
optional: ['左侧','右侧'],
|
||||
methods: 'positionChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义悬浮按钮信息',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customFabChange'
|
||||
},
|
||||
{
|
||||
title: '自定义尺寸',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'sizeChange'
|
||||
},
|
||||
{
|
||||
title: '动画类型',
|
||||
optional: ['向上弹出','圆环弹出'],
|
||||
methods: 'animationChange'
|
||||
},
|
||||
{
|
||||
title: '遮罩显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'maskChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换按钮位置
|
||||
positionChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.left = 40
|
||||
this.right = 'auto'
|
||||
this.bottom = 100
|
||||
break
|
||||
case 1:
|
||||
this.left = 'auto'
|
||||
this.right = 40
|
||||
this.bottom = 100
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换悬浮按钮信息
|
||||
customFabChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = '#01BEFF'
|
||||
this.fontColor = '#FFFFFF'
|
||||
this.icon = 'open'
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = 'tn-cool-bg-color-1'
|
||||
this.fontColor = '#FFFFFF'
|
||||
this.icon = 'up'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换尺寸信息
|
||||
sizeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.width = 88
|
||||
this.height = 88
|
||||
this.iconSize = 64
|
||||
break
|
||||
case 1:
|
||||
this.width = 64
|
||||
this.height = 64
|
||||
this.iconSize = 48
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换遮罩信息
|
||||
maskChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.showMask = true
|
||||
break
|
||||
case 1:
|
||||
this.showMask = false
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换动画
|
||||
animationChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.animationType = 'up'
|
||||
break
|
||||
case 1:
|
||||
this.animationType = 'around'
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 点击悬浮按钮的内容
|
||||
clickFabItem(e) {
|
||||
this.$t.messageUtils.toast(`点击了第 ${e.index} 个选项`)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -58,7 +58,7 @@
|
||||
<tn-checkbox v-model="model.agreement" @change="agreementCheckChange"></tn-checkbox>
|
||||
<view class="agreement-text">勾选同意当前协议</view>
|
||||
</view>
|
||||
<tn-button width="100%" @click="submit">提交</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
<!-- 性别选项 -->
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
</view>
|
||||
</tn-image-upload>
|
||||
<view class="tn-flex tn-margin-top-xs tn-flex-row-center">
|
||||
<tn-button fontColor="tn-color-white" @tap="upload">上传</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="upload">上传</tn-button>
|
||||
<tn-button fontColor="tn-color-white" backgroundColor="tn-bg-red" margin="0rpx 0rpx 0rpx 20rpx" @tap="clear">清空列表</tn-button>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
|
||||
<view class="components-index-list">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<tn-index-anchor :index="item.letter"></tn-index-anchor>
|
||||
<view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
|
||||
<image class="index-list-item__image" src="/static/favicon.ico"></image>
|
||||
<view class="index-list-item__name">{{ data_item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-index-list>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexList from '../../mock/index.list.js'
|
||||
const letterArr = indexList.list.map(val => {
|
||||
return val.letter
|
||||
})
|
||||
export default {
|
||||
name: 'componentsIndexListAvatar',
|
||||
data() {
|
||||
return {
|
||||
// 滚动的距离
|
||||
scrollTop: 0,
|
||||
// 索引列表
|
||||
indexList: letterArr,
|
||||
list: indexList.list
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
color: $tn-font-color;
|
||||
font-size: 28rpx;
|
||||
|
||||
&__image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 8rpx 8rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
|
||||
<view class="components-index-list">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<tn-index-anchor :index="item.letter"></tn-index-anchor>
|
||||
<view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
|
||||
{{ data_item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</tn-index-list>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexList from '../../mock/index.list.js'
|
||||
const letterArr = indexList.list.map(val => {
|
||||
return val.letter
|
||||
})
|
||||
export default {
|
||||
name: 'componentsIndexListBase',
|
||||
data() {
|
||||
return {
|
||||
// 滚动的距离
|
||||
scrollTop: 0,
|
||||
// 索引列表
|
||||
indexList: letterArr,
|
||||
list: indexList.list
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-list-item {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 20rpx 24rpx;
|
||||
overflow: hidden;
|
||||
color: $tn-font-color;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
@@ -7,15 +7,9 @@
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<tn-index-anchor :index="item.letter"></tn-index-anchor>
|
||||
<view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
|
||||
{{ data_item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</tn-index-list>
|
||||
<multiple-options-demo
|
||||
:list="optionsList"
|
||||
></multiple-options-demo>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -24,68 +18,23 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import indexList from '../mock/index.list.js'
|
||||
const letterArr = indexList.list.map(val => {
|
||||
return val.letter
|
||||
})
|
||||
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
|
||||
|
||||
export default {
|
||||
name: 'componentsIndexList',
|
||||
components: { multipleOptionsDemo },
|
||||
data() {
|
||||
return {
|
||||
// 滚动的距离
|
||||
scrollTop: 0,
|
||||
scrollTopArr: [0, 0],
|
||||
selectIndexScrollTop: [0 ,0],
|
||||
// 索引列表
|
||||
indexList: letterArr,
|
||||
list: indexList.list
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
onScroll(e, index) {
|
||||
// this.scrollTop = e.detail.scrollTop
|
||||
this.$set(this.scrollTopArr, index - 1, e.detail.scrollTop)
|
||||
},
|
||||
|
||||
// 侧边栏索引选中事件
|
||||
indexListSelect(e, index) {
|
||||
this.$set(this.selectIndexScrollTop, index - 1, e.scrollTop)
|
||||
// 选项列表数据
|
||||
optionsList: [
|
||||
{ title: '普通列表', desc: '传入列表数据即可使用', url: '/componentsPage/index-list/base/index-list' },
|
||||
{ title: '带头像列表', desc: '通过自定义列表来实现', url: '/componentsPage/index-list/avatar/index-list' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-list-item {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 20rpx 24rpx;
|
||||
overflow: hidden;
|
||||
color: $tn-font-color;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.index-list-image-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
color: $tn-font-color;
|
||||
font-size: 28rpx;
|
||||
|
||||
&__image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin: 8rpx 8rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+314
-255
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-list">
|
||||
<view class="components-list tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>列表</tn-nav-bar>
|
||||
@@ -8,37 +8,197 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-list-view
|
||||
:backgroundColor="viewBackgroundColor"
|
||||
:fontColor="viewFontColor"
|
||||
:fontSize="viewFontSize"
|
||||
:title="viewTitle"
|
||||
:unlined="viewUnlined"
|
||||
:card="viewCard"
|
||||
:marginTop="viewMarginTop"
|
||||
>
|
||||
<block v-if="viewCustomTitle">
|
||||
<view slot="title" class="list-title-container">
|
||||
<tn-button class="list-title-button">设置</tn-button>
|
||||
<demo-title title="基础">
|
||||
<view>
|
||||
<tn-list-view
|
||||
unlined="bottom"
|
||||
:customTitle="true"
|
||||
>
|
||||
<template slot="title">
|
||||
<view class="custom-title">
|
||||
<tn-button shape="" backgroundColor="tn-main-gradient-indigo" @click="openOptions">设置</tn-button>
|
||||
</view>
|
||||
</template>
|
||||
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
|
||||
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
|
||||
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
|
||||
</tn-list-view>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-list-view
|
||||
:card="true"
|
||||
title="卡片式列表"
|
||||
backgroundColor="#EFEFEF"
|
||||
>
|
||||
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单一</tn-list-cell>
|
||||
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单二</tn-list-cell>
|
||||
<tn-list-cell :arrow="cellArrow" :arrowRight="cellArrowRight" :unlined="cellUnlined" :lineLeft="cellLineLeft" :lineRight="cellLineRight">菜单三</tn-list-cell>
|
||||
</tn-list-view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="列表项单独使用">
|
||||
<view>
|
||||
<tn-list-cell>
|
||||
普通列表
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-list-cell :radius="true">
|
||||
圆角列表
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-list-cell>
|
||||
<view class="list-icon-text">
|
||||
<view class="list__left">
|
||||
<view class="list__left__icon tn-icon-discover tn-color-gray"></view>
|
||||
<view class="list__left__text">图标 + 文字</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-for="(item, index) in 3" :key="index">
|
||||
<tn-list-cell
|
||||
:backgroundColor="cellBackgroundColor"
|
||||
:fontColor="cellFontColor"
|
||||
:fontSize="cellFontSize"
|
||||
:arrow="cellArrow"
|
||||
:arrowRight="cellArrowRight"
|
||||
:hover="cellHover"
|
||||
:radius="cellRadius"
|
||||
:unlined="cellUnlined"
|
||||
:lineLeft="cellLineLeft"
|
||||
:lineRight="cellLineRight"
|
||||
>选项 {{ index }}</tn-list-cell>
|
||||
</block>
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-list-cell>
|
||||
<view class="list-image-text">
|
||||
<view class="list__left">
|
||||
<image src="/static/favicon.ico" class="list__left__image"></image>
|
||||
<view class="list__left__text">图片 + 文字</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-list-cell>
|
||||
<view class="list-icon-text">
|
||||
<view class="list__left">
|
||||
<view class="list__left__icon tn-icon-order tn-color-indigo"></view>
|
||||
<view class="list__left__text">文本</view>
|
||||
</view>
|
||||
<view class="list__right">
|
||||
<view class="tn-text-sm tn-color-gray">定一个小目标吧</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-list-cell>
|
||||
<view class="list-icon-text">
|
||||
<view class="list__left">
|
||||
<view class="list__left__icon tn-icon-upload tn-color-cyan"></view>
|
||||
<view class="list__left__text">按钮</view>
|
||||
</view>
|
||||
<view class="list__right">
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" shape="round" size="sm">
|
||||
<text class="tn-icon-upload tn-margin-right-xs"></text>上传
|
||||
</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-list-cell>
|
||||
<view class="list-icon-text">
|
||||
<view class="list__left">
|
||||
<view class="list__left__icon tn-icon-tag tn-text-clip tn-main-gradient-orangeyellow"></view>
|
||||
<view class="list__left__text">标签</view>
|
||||
</view>
|
||||
<view class="list__right">
|
||||
<tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">篮球</tn-tag>
|
||||
<tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">足球</tn-tag>
|
||||
<tn-tag backgroundColor="tn-main-gradient-indigo" shape="circle" margin="0rpx 5rpx">小球</tn-tag>
|
||||
</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
<view class="tn-margin-top-sm">
|
||||
<tn-list-cell>
|
||||
<view class="list-icon-text">
|
||||
<view class="list__left">
|
||||
<view class="list__left__icon tn-icon-emoji-good tn-text-clip tn-main-gradient-orangered"></view>
|
||||
<view class="list__left__text">头像组</view>
|
||||
</view>
|
||||
<view class="list__right">
|
||||
<tn-avatar-group :lists="avatarGroupList" size="sm"></tn-avatar-group>
|
||||
</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="聊天示例">
|
||||
<tn-list-view title="消息列表" unlined="bottom">
|
||||
<tn-list-cell :unlined="true">
|
||||
<view class="message">
|
||||
<view class="message__left">
|
||||
<tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg"></tn-avatar>
|
||||
</view>
|
||||
<view class="message__middle">
|
||||
<view class="message__name">小图鸟</view>
|
||||
<view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
|
||||
</view>
|
||||
<view class="message__right">
|
||||
<view class="message__time">13:14</view>
|
||||
<view class="message__tips">
|
||||
<tn-tag backgroundColor="tn-bg-red" fontColor="tn-color-white" shape="circle" width="auto" size="sm">99</tn-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell :unlined="true">
|
||||
<view class="message">
|
||||
<view class="message__left">
|
||||
<tn-avatar src="https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg" :badge="true" badgeText="99" badgeBgColor="tn-bg-red" badgeColor="tn-color-white"></tn-avatar>
|
||||
</view>
|
||||
<view class="message__middle">
|
||||
<view class="message__name">小图鸟</view>
|
||||
<view class="message__content tn-text-ellipsis">欢迎使用图鸟UI，图鸟UI专做UI界面100年</view>
|
||||
</view>
|
||||
<view class="message__right">
|
||||
<view class="message__time">13:14</view>
|
||||
<view class="message__tips">
|
||||
<text class="message__tips__icon tn-icon-sound-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</tn-list-view>
|
||||
</dynamic-demo-template>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
<tn-modal
|
||||
v-model="showListOptions"
|
||||
:custom="true"
|
||||
padding="0"
|
||||
>
|
||||
<tn-list-view>
|
||||
<tn-list-cell>
|
||||
<view class="list__options">
|
||||
<view class="list__options__title">下划线</view>
|
||||
<view class="list__options__switch"><tn-switch v-model="cellShowBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell v-if="!cellUnlined">
|
||||
<view class="list__options">
|
||||
<view class="list__options__title">长下划线</view>
|
||||
<view class="list__options__switch"><tn-switch v-model="cellLongBorderLine" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell>
|
||||
<view class="list__options">
|
||||
<view class="list__options__title">箭头</view>
|
||||
<view class="list__options__switch"><tn-switch v-model="cellArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell v-if="cellArrow">
|
||||
<view class="list__options">
|
||||
<view class="list__options__title">无边距箭头</view>
|
||||
<view class="list__options__switch"><tn-switch v-model="cellNoPaddingArrow" leftIcon="close" rightIcon="success" @change="closeOptions"></tn-switch></view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
</tn-list-view>
|
||||
</tn-modal>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -47,260 +207,159 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsList',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
viewBackgroundColor: '',
|
||||
viewFontColor: '',
|
||||
viewFontSize: 0,
|
||||
viewTitle: '',
|
||||
viewCustomTitle: false,
|
||||
viewCard: false,
|
||||
viewMarginTop: '',
|
||||
viewUnlined: 'all',
|
||||
showListOptions: false,
|
||||
cellShowBorderLine: true,
|
||||
cellLongBorderLine: false,
|
||||
cellNoPaddingArrow: false,
|
||||
|
||||
cellBackgroundColor: '',
|
||||
cellFontColor: '',
|
||||
cellFontSize: 0,
|
||||
cellArrow: true,
|
||||
cellArrow: false,
|
||||
cellArrowRight: true,
|
||||
cellRadius: false,
|
||||
cellUnlined: false,
|
||||
cellLineLeft: true,
|
||||
cellLineRight: true,
|
||||
cellHover: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-list-view、tn-list-cell组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '容器参数',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'viewColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'viewSizeChange'
|
||||
},
|
||||
{
|
||||
title: '标题类型',
|
||||
optional: ['空白','文字标题','自定义标题'],
|
||||
methods: 'viewTitleChange'
|
||||
},
|
||||
{
|
||||
title: '容器类型',
|
||||
optional: ['默认','卡片'],
|
||||
methods: 'viewContainerChange'
|
||||
},
|
||||
{
|
||||
title: '边框类型',
|
||||
optional: ['全部显示','上边框','下边框','不显示'],
|
||||
methods: 'viewBoardChange',
|
||||
current: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '列表参数',
|
||||
section: [
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'cellColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义大小',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'cellSizeChange'
|
||||
},
|
||||
{
|
||||
title: '显示类型',
|
||||
optional: ['默认','圆角'],
|
||||
methods: 'cellRadiusChange'
|
||||
},
|
||||
{
|
||||
title: '箭头',
|
||||
optional: ['隐藏','显示'],
|
||||
methods: 'cellArrowChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '箭头边距',
|
||||
optional: ['默认','无边距'],
|
||||
methods: 'cellArrowRightChange'
|
||||
},
|
||||
{
|
||||
title: '显示底边',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'cellUnlinedChange',
|
||||
},
|
||||
{
|
||||
title: '底边边距',
|
||||
optional: ['默认','无边距'],
|
||||
methods: 'cellLineChange',
|
||||
},
|
||||
{
|
||||
title: '点击效果',
|
||||
optional: ['无','有'],
|
||||
methods: 'cellHoverChange',
|
||||
}
|
||||
]
|
||||
}
|
||||
avatarGroupList: [
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'},
|
||||
{src: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai2.jpg'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换容器颜色
|
||||
viewColorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.viewBackgroundColor = ''
|
||||
this.viewFontColor = ''
|
||||
} else {
|
||||
this.viewBackgroundColor = '#F8F7F8'
|
||||
this.viewFontColor = 'tn-color-grey'
|
||||
}
|
||||
},
|
||||
// 切换容器大小
|
||||
viewSizeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.viewFontSize = 0
|
||||
this.viewMarginTop = ''
|
||||
} else {
|
||||
this.viewFontSize = 32
|
||||
this.viewMarginTop = '48rpx'
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换容器标题
|
||||
viewTitleChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.viewTitle = ''
|
||||
this.viewCustomTitle = false
|
||||
break
|
||||
case 1:
|
||||
this.viewTitle = '请选择对应的选项'
|
||||
this.viewCustomTitle = false
|
||||
break
|
||||
case 2:
|
||||
this.viewTitle = ''
|
||||
this.viewCustomTitle = true
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换容器类型
|
||||
viewContainerChange(event) {
|
||||
this.viewCard = event.index === 0 ? false : true
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换容器边框类型
|
||||
viewBoardChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.viewUnlined = ''
|
||||
break
|
||||
case 1:
|
||||
this.viewUnlined = 'bottom'
|
||||
break
|
||||
case 2:
|
||||
this.viewUnlined = 'top'
|
||||
break
|
||||
case 3:
|
||||
this.viewUnlined = 'all'
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 切换列表颜色
|
||||
cellColorChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellBackgroundColor = ''
|
||||
this.cellFontColor = ''
|
||||
} else {
|
||||
this.cellBackgroundColor = '#D6F4FA'
|
||||
this.cellFontColor = 'tn-color-grey'
|
||||
}
|
||||
},
|
||||
// 切换列表大小
|
||||
cellSizeChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellFontSize = 0
|
||||
} else {
|
||||
this.cellFontSize = 36
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换列表圆角
|
||||
cellRadiusChange(event) {
|
||||
this.cellRadius = event.index === 0 ? false : true
|
||||
},
|
||||
// 切换列表箭头显示
|
||||
cellArrowChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellArrow = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(4, false)
|
||||
} else {
|
||||
this.cellArrow = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(4, true)
|
||||
}
|
||||
},
|
||||
// 切换列表箭头贴边
|
||||
cellArrowRightChange(event) {
|
||||
this.cellArrowRight = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换列表底边显示
|
||||
cellUnlinedChange(event) {
|
||||
if (event.index === 0) {
|
||||
watch: {
|
||||
cellShowBorderLine(val) {
|
||||
if (val) {
|
||||
this.cellUnlined = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(6, true)
|
||||
} else {
|
||||
this.cellUnlined = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(6, false)
|
||||
}
|
||||
},
|
||||
// 切换列表底边的边距
|
||||
cellLineChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.cellLineLeft = true
|
||||
this.cellLineRight = true
|
||||
} else if (event.index === 1) {
|
||||
cellLongBorderLine(val) {
|
||||
if (val) {
|
||||
this.cellLineLeft = false
|
||||
this.cellLineRight = false
|
||||
} else {
|
||||
this.cellLineLeft = true
|
||||
this.cellLineRight = true
|
||||
}
|
||||
},
|
||||
// 切换列表点击效果
|
||||
cellHoverChange(event) {
|
||||
this.cellHover = event.index === 0 ? false : true
|
||||
},
|
||||
|
||||
cellNoPaddingArrow(val) {
|
||||
if (val) {
|
||||
this.cellArrowRight = false
|
||||
} else {
|
||||
this.cellArrowRight = true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 弹出设置弹框
|
||||
openOptions() {
|
||||
this.showListOptions = true
|
||||
},
|
||||
// 关闭设置弹框
|
||||
closeOptions() {
|
||||
this.showListOptions = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.list-title-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10rpx;
|
||||
.components-list {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.list-title-button {
|
||||
width: 160rpx !important;
|
||||
height: 46rpx !important;
|
||||
color: #FFFFFF;
|
||||
margin: 10rpx !important;
|
||||
.custom-title {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
|
||||
.list__options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list {
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
&__icon, &__image {
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.list-icon-text, .list-image-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list-image-text {
|
||||
.list {
|
||||
&__left {
|
||||
&__image {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
&__left {
|
||||
width: 10%;
|
||||
}
|
||||
&__middle {
|
||||
width: 80%;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 40rpx;
|
||||
}
|
||||
&__right {
|
||||
width: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
&__content {
|
||||
font-size: 26rpx;
|
||||
color: #838383;
|
||||
}
|
||||
&__tips {
|
||||
&__icon {
|
||||
font-size: 36rpx;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-loading">
|
||||
<view class="components-loading tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Loading加载动画</tn-nav-bar>
|
||||
@@ -8,14 +8,57 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-loading
|
||||
:show="show"
|
||||
:mode="mode"
|
||||
:color="color"
|
||||
:size="size"
|
||||
></tn-loading>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="样式">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show"></tn-loading>
|
||||
</view>
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" mode="flower"></tn-loading>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="大小">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show"></tn-loading>
|
||||
</view>
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" :size="50"></tn-loading>
|
||||
</view>
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" :size="80"></tn-loading>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-margin-top">
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" mode="flower"></tn-loading>
|
||||
</view>
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" mode="flower" :size="50"></tn-loading>
|
||||
</view>
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" mode="flower" :size="80"></tn-loading>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="颜色">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show"></tn-loading>
|
||||
</view>
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" color="#01BEFF"></tn-loading>
|
||||
</view>
|
||||
<view class="tn-margin-right">
|
||||
<tn-loading show="show" color="#E83A30"></tn-loading>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -24,79 +67,17 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsLoading',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
mode: 'circle',
|
||||
color: '',
|
||||
size: 34,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-loading组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '显示',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showChange'
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['圆圈','花朵'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','#31E749','#31C9E8'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '尺寸',
|
||||
optional: ['28','34','54'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换是否显示
|
||||
showChange(event) {
|
||||
this.show = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'circle'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, true)
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'flower'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(2, false)
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
this.color = event.index === 0 ? '' : event.name
|
||||
},
|
||||
// 切换尺寸
|
||||
sizeChange(event) {
|
||||
this.size = Number(event.name)
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showModal">弹出模态框</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
@@ -41,7 +41,7 @@
|
||||
<tn-form-item label="验证码" :borderBottom="false">
|
||||
<tn-input placeholder="请输入验证码"></tn-input>
|
||||
<view slot="right" class="tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<tn-button :fontSize="20" padding="10rpx" height="46rpx" fontColor="tn-color-white">获取验证码</tn-button>
|
||||
<tn-button :fontSize="20" padding="10rpx" height="46rpx" backgroundColor="#01BEFF" fontColor="tn-color-white">获取验证码</tn-button>
|
||||
</view>
|
||||
</tn-form-item>
|
||||
</tn-form>
|
||||
@@ -77,7 +77,7 @@
|
||||
},
|
||||
{
|
||||
text: '确定',
|
||||
backgroundColor: 'tn-bg-red',
|
||||
backgroundColor: 'tn-bg-indigo',
|
||||
fontColor: '#FFFFFF'
|
||||
}
|
||||
],
|
||||
|
||||
@@ -3,34 +3,58 @@
|
||||
<view class="components-nav_bar">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>navBar导航栏</tn-nav-bar>
|
||||
<tn-nav-bar
|
||||
v-if="mode === 'normal'"
|
||||
fixed
|
||||
:height="height"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:alpha="alpha"
|
||||
:bottomShadow="bottomShadow"
|
||||
>navBar导航栏</tn-nav-bar>
|
||||
|
||||
<tn-nav-bar
|
||||
v-if="mode === 'customBack'"
|
||||
fixed
|
||||
:height="height"
|
||||
:customBack="true"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:alpha="alpha"
|
||||
:bottomShadow="bottomShadow"
|
||||
>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'>
|
||||
<view><text class='tn-icon-left'></text></view>
|
||||
<view><text class='tn-icon-home-capsule-fill'></text></view>
|
||||
</view>
|
||||
<view class="custom-nav-content">
|
||||
<view class="search-content">
|
||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<tn-nav-bar
|
||||
v-if="mode === 'customNav'"
|
||||
fixed
|
||||
:height="height"
|
||||
:isBack="false"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:alpha="alpha"
|
||||
:bottomShadow="bottomShadow"
|
||||
>
|
||||
<view class="custom-nav-content">
|
||||
<view class="search-content">
|
||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<!-- 普通导航栏 -->
|
||||
<tn-nav-bar v-if="mode === 'normal'" :fixed="false" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">图鸟科技</tn-nav-bar>
|
||||
<!-- 自定义内容导航栏，隐藏返回按钮 -->
|
||||
<tn-nav-bar v-if="mode === 'customNav'" :fixed="false" :isBack="false" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">
|
||||
<view class="custom-nav-content">
|
||||
<view class="search-content">
|
||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<!-- 自定义放回按钮 -->
|
||||
<tn-nav-bar v-if="mode === 'customBack'" :fixed="false" :customBack="true" :height="height" :backgroundColor="backgroundColor" :alpha="alpha">
|
||||
<view slot="back" class='tn-custom-nav-bar__back'>
|
||||
<view><text class='tn-icon-left'></text></view>
|
||||
<view><text class='tn-icon-home-capsule-fill'></text></view>
|
||||
</view>
|
||||
<view class="custom-nav-content">
|
||||
<view class="search-content">
|
||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
||||
</view>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click" :noDemo="true">
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
@@ -48,9 +72,11 @@
|
||||
return {
|
||||
searchValue: '',
|
||||
mode: 'normal',
|
||||
height: 46,
|
||||
height: 0,
|
||||
backgroundColor: '#FFFFFF',
|
||||
fontColor: '',
|
||||
alpha: false,
|
||||
bottomShadow: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-toast组件'],
|
||||
sectionList: [
|
||||
@@ -59,9 +85,8 @@
|
||||
section: [
|
||||
{
|
||||
title: '高度',
|
||||
optional: ['默认','46','80'],
|
||||
methods: 'heightChange',
|
||||
current: 1
|
||||
optional: ['默认','38','80'],
|
||||
methods: 'heightChange'
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
@@ -70,8 +95,13 @@
|
||||
},
|
||||
{
|
||||
title: '背景颜色',
|
||||
optional: ['默认','#01BEFF','透明'],
|
||||
optional: ['默认','#01BEFF','tn-bg-grey','tn-main-gradient-indigo','透明'],
|
||||
methods: 'backgroundColorChange'
|
||||
},
|
||||
{
|
||||
title: '底部阴影',
|
||||
optional: ['默认','隐藏'],
|
||||
methods: 'bottomShadowChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -105,17 +135,27 @@
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = '#FFFFFF'
|
||||
this.fontColor = ''
|
||||
this.alpha = false
|
||||
break
|
||||
case 1:
|
||||
case 2:
|
||||
case 3:
|
||||
this.fontColor = '#FFFFFF'
|
||||
this.backgroundColor = event.name
|
||||
this.alpha = false
|
||||
break
|
||||
case 2:
|
||||
case 4:
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
this.alpha = true
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换底部阴影
|
||||
bottomShadowChange(event) {
|
||||
this.bottomShadow = event.index === 0 ? true : false
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-notice-bar">
|
||||
<view class="components-notice-bar tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>noticeBar通知栏</tn-nav-bar>
|
||||
@@ -8,36 +8,57 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-notice-bar
|
||||
:show="show"
|
||||
:list="list"
|
||||
:mode="mode"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:playStatus="playStatus"
|
||||
:leftIcon="leftIcon"
|
||||
:leftIconName="leftIconName"
|
||||
:leftIconSize="leftIconSize"
|
||||
:rightIcon="rightIcon"
|
||||
:rightIconName="rightIconName"
|
||||
:rightIconSize="rightIconSize"
|
||||
:closeBtn="closeBtn"
|
||||
:radius="radius"
|
||||
:padding="padding"
|
||||
:autoplay="autoplay"
|
||||
:duration="duration"
|
||||
:speed="speed"
|
||||
:circular="circular"
|
||||
:autoHidden="autoHidden"
|
||||
@click="onClick"
|
||||
@close="close"
|
||||
@clickLeft="onLeftClick"
|
||||
@clickRight="onRightClick"
|
||||
@end="end"
|
||||
></tn-notice-bar>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="水平连续滚动">
|
||||
<tn-notice-bar :list="list"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="水平不连续滚动">
|
||||
<tn-notice-bar :list="list" :circular="false"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="垂直滚动">
|
||||
<tn-notice-bar :list="list" mode="vertical"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="手动滚动">
|
||||
<tn-notice-bar :list="list" mode="vertical" :autoplay="false"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="停止滚动">
|
||||
<tn-notice-bar :list="list" mode="vertical" playStatus="paused"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="慢速滚动">
|
||||
<tn-notice-bar :list="list" :speed="100"></tn-notice-bar>
|
||||
<view class="tn-margin-top">
|
||||
<tn-notice-bar :list="list" mode="vertical" :duration="5000"></tn-notice-bar>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示关闭按钮">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :closeBtn="true" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="隐藏左右两侧图标">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="false" :leftIcon="false" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义左右两侧图标">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :leftIcon="true" rightIconName="set" leftIconName="all" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义大小">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" :fontSize="34" :leftIconSize="40" :rightIconSize="40" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="#EFEFEF" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
<view class="tn-margin-top">
|
||||
<tn-notice-bar :show="closeNoticeShow" :list="list" :rightIcon="true" backgroundColor="tn-main-gradient-indigo" @close="closeNoticeShow = false"></tn-notice-bar>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -46,10 +67,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsNoticeBar',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
@@ -58,231 +79,11 @@
|
||||
'TuniaoUIV2.0.0即将发布',
|
||||
'今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
|
||||
],
|
||||
|
||||
show: true,
|
||||
mode: 'horizontal',
|
||||
backgroundColor: '',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
playStatus: 'play',
|
||||
leftIcon: true,
|
||||
leftIconName: 'sound',
|
||||
leftIconSize: 34,
|
||||
rightIcon: false,
|
||||
rightIconName: 'right',
|
||||
rightIconSize: 26,
|
||||
closeBtn: false,
|
||||
radius: 0,
|
||||
padding: '18rpx 24rpx',
|
||||
autoplay: true,
|
||||
duration: 2000,
|
||||
speed: 160,
|
||||
circular: true,
|
||||
autoHidden: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-notice-bar组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '滚动模式',
|
||||
optional: ['水平连续','水平不连续','垂直'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '显示状态',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showChange'
|
||||
},
|
||||
{
|
||||
title: '播放状态',
|
||||
optional: ['播放','暂停'],
|
||||
methods: 'playStatusChange'
|
||||
},
|
||||
{
|
||||
title: '速度控制',
|
||||
optional: ['减速','加速'],
|
||||
methods: 'speedChange'
|
||||
},
|
||||
{
|
||||
title: '图标显示',
|
||||
optional: ['默认','显示右边图标','显示关闭按钮','全部不显示'],
|
||||
methods: 'iconChange'
|
||||
},
|
||||
{
|
||||
title: '自定义图标',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'iconNameChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'styleChange'
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
closeNoticeShow: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换滚动模式
|
||||
modeChange(event) {
|
||||
this.speed = 160
|
||||
this.duration = 2000
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'horizontal'
|
||||
this.circular = true
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'horizontal'
|
||||
this.circular = false
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'vertical'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换显示状态
|
||||
showChange(event) {
|
||||
this.show = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换播放状态
|
||||
playStatusChange(event) {
|
||||
this.playStatus = event.index === 0 ? 'play' : 'paused'
|
||||
},
|
||||
// 切换滚动速度
|
||||
speedChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
if (this.mode === 'horizontal' && this.circular) {
|
||||
const speed = this.speed - 10
|
||||
this.speed = speed > 0 ? speed : 0
|
||||
} else {
|
||||
const duration = this.duration + 100
|
||||
if (duration > 3000) {
|
||||
this.$t.messageUtils.toast('达到速度最小值')
|
||||
this.duration = 3000
|
||||
} else {
|
||||
this.duration = duration
|
||||
}
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
if (this.mode === 'horizontal' && this.circular) {
|
||||
const speed = this.speed + 10
|
||||
if (speed > 300) {
|
||||
this.$t.messageUtils.toast('达到速度最大值')
|
||||
this.speed = 300
|
||||
} else {
|
||||
this.speed = speed
|
||||
}
|
||||
} else {
|
||||
const duration = this.duration - 100
|
||||
this.duration = this.duration > 0 ? duration : 0
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换图标显示
|
||||
iconChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.leftIcon = true
|
||||
this.rightIcon = false
|
||||
this.closeBtn = false
|
||||
break
|
||||
case 1:
|
||||
this.rightIcon = true
|
||||
break
|
||||
case 2:
|
||||
this.closeBtn = true
|
||||
break
|
||||
case 3:
|
||||
this.leftIcon = false
|
||||
this.rightIcon = false
|
||||
this.closeBtn = false
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义图标
|
||||
iconNameChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.leftIconName = 'sound'
|
||||
this.rightIconName = 'right'
|
||||
break
|
||||
case 1:
|
||||
this.leftIconName = 'tag'
|
||||
this.rightIconName = 'trophy'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义颜色
|
||||
colorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = ''
|
||||
this.fontColor = ''
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = 'tn-bg-red'
|
||||
this.fontColor = '#FFFFFF'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义样式
|
||||
styleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.fontSize = 0
|
||||
this.radius = 0
|
||||
this.leftIconSize = 34
|
||||
this.rightIconSize = 26
|
||||
break
|
||||
case 1:
|
||||
this.fontSize = 40
|
||||
this.radius = 10
|
||||
this.leftIconSize = 50
|
||||
this.rightIconSize = 30
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 点击消息
|
||||
onClick(index) {
|
||||
this.$t.messageUtils.toast('点击了消息')
|
||||
},
|
||||
// 点击关闭按钮
|
||||
close() {
|
||||
this.$t.messageUtils.toast('点击关闭按钮')
|
||||
},
|
||||
// 点击左边图标
|
||||
onLeftClick() {
|
||||
this.$t.messageUtils.toast('点击左边图标')
|
||||
},
|
||||
// 点击右边图标
|
||||
onRightClick() {
|
||||
this.$t.messageUtils.toast('点击右边图标')
|
||||
},
|
||||
// 一个周期滚动结束
|
||||
end() {
|
||||
console.log('滚动结束');
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-number_box">
|
||||
<view class="components-number_box tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>numberBox步进输入</tn-nav-bar>
|
||||
@@ -8,22 +8,42 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-number-box
|
||||
v-model="value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:disabled="disabled"
|
||||
:disabledInput="disabledInput"
|
||||
:inputWidth="inputWidth"
|
||||
:inputHeight="inputHeight"
|
||||
:positiveInteger="positiveInteger"
|
||||
:backgroundColor="backgroundColor"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
></tn-number-box>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="基本使用">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-number-box v-model="value1"></tn-number-box>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-number-box v-model="value1" :disabled="true"></tn-number-box>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置步进值">
|
||||
<tn-number-box v-model="value2" :step="2"></tn-number-box>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置最小最大值">
|
||||
<tn-number-box v-model="value3" :min="50" :max="1000"></tn-number-box>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置允许输入小数">
|
||||
<tn-number-box v-model="value4" :positiveInteger="false" :step="0.5"></tn-number-box>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="禁止输入">
|
||||
<tn-number-box v-model="value5" :disabledInput="true"></tn-number-box>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义尺寸">
|
||||
<tn-number-box v-model="value6" :inputWidth="140" :inputHeight="60" :fontSize="40"></tn-number-box>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-number-box v-model="value7" backgroundColor="#AAAAAA" fontColor="#838383"></tn-number-box>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -32,140 +52,29 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsNumberBox',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
disabledInput: false,
|
||||
inputWidth: 88,
|
||||
inputHeight: 50,
|
||||
positiveInteger: true,
|
||||
backgroundColor: '#E6E6E6',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-number-box组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '初始值',
|
||||
optional: ['0','1','2.5','3','4','5'],
|
||||
methods: 'valueChange'
|
||||
},
|
||||
{
|
||||
title: '最小最大值',
|
||||
optional: ['0-100','50-1000'],
|
||||
methods: 'minMaxChange'
|
||||
},
|
||||
{
|
||||
title: '步进值',
|
||||
optional: ['1','5','0.5'],
|
||||
methods: 'stepChange'
|
||||
},
|
||||
{
|
||||
title: '只允许输入正整数',
|
||||
optional: ['是','否'],
|
||||
methods: 'positiveIntegerChange'
|
||||
},
|
||||
{
|
||||
title: '禁用状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '禁用输入状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledInputChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义尺寸',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customSizeChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
value1: 0,
|
||||
value2: 0,
|
||||
value3: 0,
|
||||
value4: 0,
|
||||
value5: 0,
|
||||
value6: 0,
|
||||
value7: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换初始值
|
||||
valueChange(event) {
|
||||
this.value = Number(event.name)
|
||||
},
|
||||
// 切换最小最大值
|
||||
minMaxChange(event) {
|
||||
const value = event.name.split('-')
|
||||
this.min = Number(value[0])
|
||||
this.max = Number(value[1])
|
||||
},
|
||||
// 切换步进值
|
||||
stepChange(event) {
|
||||
this.step = Number(event.name)
|
||||
},
|
||||
// 切换允许正整数状态
|
||||
positiveIntegerChange(event) {
|
||||
this.positiveInteger = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换禁用输入状态
|
||||
disabledInputChange(event) {
|
||||
this.disabledInput = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义尺寸
|
||||
customSizeChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.inputWidth = 88
|
||||
this.inputHeight = 50
|
||||
this.fontSize = 0
|
||||
break
|
||||
case 1:
|
||||
this.inputWidth = 120
|
||||
this.inputHeight = 60
|
||||
this.fontSize = 40
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换自定义颜色
|
||||
customColorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.backgroundColor = '#E6E6E6'
|
||||
this.fontColor = ''
|
||||
break
|
||||
case 1:
|
||||
this.backgroundColor = '#AAAAAA'
|
||||
this.fontColor = 'tn-color-grey'
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.components-number_box {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<view class="tn-flex tn-flex-row-center"><tn-button fontColor="tn-color-white" @click="showPicker">弹出Picker</tn-button></view>
|
||||
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showPicker">弹出Picker</tn-button></view>
|
||||
<view class="picker-result tn-border-dashed">
|
||||
{{ result }}
|
||||
</view>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" :disabled="show" @click="showPopup">弹出弹框</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-progress">
|
||||
<view class="components-progress tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Progress进度条</tn-nav-bar>
|
||||
@@ -8,31 +8,61 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<block v-if="customPercent">
|
||||
<tn-line-progress v-if="mode === 'line'" :percent="percent" :height="height" :activeColor="activeColor"
|
||||
:striped="striped" :stripedAnimation="stripedAnimation" :showPercent="showPercent">
|
||||
<block v-if="customPercent">
|
||||
<view class="tn-color-white">加载中</view>
|
||||
</block>
|
||||
<demo-title title="基本进度条">
|
||||
<tn-line-progress :percent="30"></tn-line-progress>
|
||||
<view class="tn-margin-top">
|
||||
<tn-line-progress :percent="50"></tn-line-progress>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-line-progress :percent="80"></tn-line-progress>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
|
||||
<view>
|
||||
<tn-circle-progress :percent="30"></tn-circle-progress>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-circle-progress :percent="50"></tn-circle-progress>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-circle-progress :percent="80"></tn-circle-progress>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="修改进度条颜色">
|
||||
<tn-line-progress :percent="50" activeColor="#2DE88D"></tn-line-progress>
|
||||
<view class="tn-margin-top">
|
||||
<tn-line-progress :percent="50" activeColor="#31E749" inactiveColor="#FAD8D6"></tn-line-progress>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示条纹">
|
||||
<tn-line-progress :percent="50" :striped="true"></tn-line-progress>
|
||||
<view class="tn-margin-top">
|
||||
<tn-line-progress :percent="50" :striped="true" :stripedAnimation="false"></tn-line-progress>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="显示进度信息">
|
||||
<tn-line-progress :percent="50" :showPercent="true"></tn-line-progress>
|
||||
<view class="tn-margin-top">
|
||||
<tn-line-progress :percent="50">
|
||||
<view class="tn-color-white">加载中</view>
|
||||
</tn-line-progress>
|
||||
<view class="tn-flex tn-flex-row-center">
|
||||
<tn-circle-progress v-if="mode === 'circle'" :percent="percent" :showPercent="showPercent">
|
||||
<block v-if="customPercent">
|
||||
<view class="tn-color-red">加载中</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left tn-flex-wrap tn-margin-top">
|
||||
<view>
|
||||
<tn-circle-progress :percent="50" :showPercent="true"></tn-circle-progress>
|
||||
</view>
|
||||
<view class="tn-margin-left">
|
||||
<tn-circle-progress :percent="50">
|
||||
<view class="tn-color-red">加载中</view>
|
||||
</tn-circle-progress>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<tn-line-progress v-if="mode === 'line'" :percent="percent" :height="height" :activeColor="activeColor"
|
||||
:striped="striped" :stripedAnimation="stripedAnimation" :showPercent="showPercent"></tn-line-progress>
|
||||
<view class="tn-flex tn-flex-row-center">
|
||||
<tn-circle-progress v-if="mode === 'circle'" :percent="percent" :showPercent="showPercent">
|
||||
</tn-circle-progress>
|
||||
</view>
|
||||
</block>
|
||||
</dynamic-demo-template>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -41,163 +71,26 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
|
||||
export default {
|
||||
name: 'componentsStriped',
|
||||
components: {
|
||||
dynamicDemoTemplate
|
||||
},
|
||||
name: 'componentsProgress',
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
mode: 'line',
|
||||
percent: 50,
|
||||
height: 28,
|
||||
activeColor: '#01BEFF',
|
||||
showPercent: false,
|
||||
striped: false,
|
||||
stripedAnimation: true,
|
||||
customPercent: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件', '使用tn-line-progress、tn-circle-progress组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['线条','圆环'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '进度',
|
||||
optional: ['减少10%','增加10%'],
|
||||
methods: 'percentChange'
|
||||
},
|
||||
{
|
||||
title: '高度',
|
||||
optional: ['18','28','38'],
|
||||
methods: 'heightChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '激活时颜色',
|
||||
optional: ['#01BEFF','#2DE88D'],
|
||||
methods: 'activeColorChange'
|
||||
},
|
||||
{
|
||||
title: '显示条纹',
|
||||
optional: ['是','否'],
|
||||
methods: 'stripedChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '动态条纹',
|
||||
optional: ['是','否'],
|
||||
methods: 'stripedAnimationChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '显示进度信息',
|
||||
optional: ['是','否'],
|
||||
methods: 'showPercentChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义进度信息',
|
||||
optional: ['是','否'],
|
||||
methods: 'customPercentChange',
|
||||
current: 1
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'line'
|
||||
if (this.striped) {
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([2,3,4,5], true)
|
||||
} else {
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([2,3,4], true)
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'circle'
|
||||
this.$refs.demoTemplate.updateSectionBtnsState([2,3,4,5], false)
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换进度
|
||||
percentChange(event) {
|
||||
let percent = 0
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
percent = this.percent - 10
|
||||
this.percent = percent > 0 ? percent : 0
|
||||
break
|
||||
case 1:
|
||||
percent = this.percent + 10
|
||||
this.percent = percent > 100 ? 100 : percent
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换高度
|
||||
heightChange(event) {
|
||||
this.height = Number(event.name)
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换激活时颜色
|
||||
activeColorChange(event) {
|
||||
this.activeColor = event.name
|
||||
},
|
||||
// 切换进度信息显示
|
||||
showPercentChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.showPercent = true
|
||||
this.customPercent = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(7, false)
|
||||
} else {
|
||||
this.showPercent = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(7, true)
|
||||
}
|
||||
},
|
||||
// 切换条纹
|
||||
stripedChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.striped = true
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, true)
|
||||
} else {
|
||||
this.striped = false
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
||||
}
|
||||
},
|
||||
// 切换条纹动画
|
||||
stripedAnimationChange(event) {
|
||||
this.stripedAnimation = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义进度信息
|
||||
customPercentChange(event) {
|
||||
this.customPercent = event.index === 0 ? true : false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.components-progress {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
tn-line-progress, .tn-line-progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
+55
-148
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-rate">
|
||||
<view class="components-rate tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>rate评分</tn-nav-bar>
|
||||
@@ -8,21 +8,43 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-rate
|
||||
v-model="value"
|
||||
:count="count"
|
||||
:disabled="disabled"
|
||||
:allowHalf="allowHalf"
|
||||
:size="size"
|
||||
:activeIcon="activeIcon"
|
||||
:inactiveIcon="inactiveIcon"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
:colors="colors"
|
||||
:icons="icons"
|
||||
></tn-rate>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="基本使用">
|
||||
<tn-rate v-model="value1"></tn-rate>
|
||||
<view class="tn-margin-top">
|
||||
<tn-rate v-model="value2" :count="8"></tn-rate>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-rate v-model="value2" :count="8" :disabled="true"></tn-rate>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置尺寸">
|
||||
<tn-rate v-model="value3" :size="24"></tn-rate>
|
||||
<view class="tn-margin-top">
|
||||
<tn-rate v-model="value4"></tn-rate>
|
||||
</view>
|
||||
<view class="tn-margin-top">
|
||||
<tn-rate v-model="value5" :size="68"></tn-rate>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="可以选择半星">
|
||||
<tn-rate v-model="value6" :size="80" :allowHalf="true"></tn-rate>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-rate v-model="value7" inactiveColor="#E83A30" activeColor="#31E749"></tn-rate>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义图标">
|
||||
<tn-rate v-model="value8" inactiveIcon="emoji-sad" activeIcon="emoji-good-fill"></tn-rate>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="根据选择数量显示不同信息">
|
||||
<tn-rate v-model="value9" :colors="colors" :icons="icons"></tn-rate>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -31,147 +53,32 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsRate',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
count: 5,
|
||||
disabled: false,
|
||||
allowHalf: false,
|
||||
size: 32,
|
||||
activeIcon: 'star-fill',
|
||||
inactiveIcon: 'star',
|
||||
activeColor: '#01BEFF',
|
||||
inactiveColor: '#AAAAAA',
|
||||
colors: [],
|
||||
icons: [],
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-rate组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '初始值',
|
||||
optional: ['0','1','2.5','3','4','5'],
|
||||
methods: 'valueChange'
|
||||
},
|
||||
{
|
||||
title: '半星状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'allowHalfChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '禁用状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '尺寸',
|
||||
optional: ['24','32','68'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '图标数量',
|
||||
optional: ['3','4','5','6'],
|
||||
methods: 'countChange',
|
||||
current: 2
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'iconChange'
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '根据选择数显示图标信息',
|
||||
optional: ['是','否'],
|
||||
methods: 'showDiffChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
value1: 0,
|
||||
value2: 0,
|
||||
value3: 0,
|
||||
value4: 0,
|
||||
value5: 0,
|
||||
value6: 0,
|
||||
value7: 0,
|
||||
value8: 0,
|
||||
value9: 0,
|
||||
colors: ['#01BEFF','#3D7EFF','#31C9E8'],
|
||||
icons: ['star-fill','praise-fill','flower-fill']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换初始值
|
||||
valueChange(event) {
|
||||
this.value = Number(event.name)
|
||||
},
|
||||
// 切换半星状态
|
||||
allowHalfChange(event) {
|
||||
this.allowHalf = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换尺寸
|
||||
sizeChange(event) {
|
||||
this.size = Number(event.name)
|
||||
},
|
||||
// 切换图标数量
|
||||
countChange(event) {
|
||||
this.count = Number(event.name)
|
||||
},
|
||||
// 切换图标
|
||||
iconChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.activeIcon = 'star-fill'
|
||||
this.inactiveIcon = 'star'
|
||||
break
|
||||
case 1:
|
||||
this.activeIcon = 'emoji-good-fill'
|
||||
this.inactiveIcon = 'emoji-good'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inactiveColor = '#AAAAAA'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#31E749'
|
||||
this.inactiveColor = '#E7D5FA'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换不同状态显示不同的图标信息
|
||||
showDiffChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.colors = ['#01BEFF','#3D7EFF','#31C9E8']
|
||||
this.icons = ['star-fill','praise-fill','flower-fill']
|
||||
break
|
||||
case 1:
|
||||
this.colors = []
|
||||
this.icons = []
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.components-rate {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-read-more">
|
||||
<view class="components-read-more tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>ReadMore查看更多</tn-nav-bar>
|
||||
@@ -8,22 +8,31 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="fullWindowsScroll" @click="click">
|
||||
<tn-read-more
|
||||
:showHeight="showHeight"
|
||||
:closeBtn="closeBtn"
|
||||
:openText="openText"
|
||||
:closeText="closeText"
|
||||
:openIcon="openIcon"
|
||||
:closeIcon="closeIcon"
|
||||
:fontColor="fontColor"
|
||||
:fontSize="fontSize"
|
||||
:shadowStyle="shadowStyle"
|
||||
@open="open"
|
||||
@closed="closed">
|
||||
<demo-title title="基本使用">
|
||||
<tn-read-more>
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</tn-read-more>
|
||||
</dynamic-demo-template>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="允许展开后收起">
|
||||
<tn-read-more :closeBtn="true">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</tn-read-more>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="修改显示内容的高度">
|
||||
<tn-read-more :closeBtn="true" :showHeight="200">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</tn-read-more>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义展开收起文本和图标">
|
||||
<tn-read-more :closeBtn="true" openText="付费查看剩余内容" openIcon="lucky-money" closeText="下次再看" closeIcon="close">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</tn-read-more>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -32,10 +41,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsReadMore',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
content: `噫吁嚱，危乎高哉！
|
||||
@@ -62,114 +71,10 @@
|
||||
朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。
|
||||
锦城虽云乐，不如早还家。
|
||||
蜀道之难，难于上青天，侧身西望长咨嗟！`,
|
||||
showHeight: 400,
|
||||
closeBtn: false,
|
||||
openText: '展开阅读全文',
|
||||
closeText: '收起',
|
||||
openIcon: 'down',
|
||||
closeIcon: 'up',
|
||||
fontColor: '',
|
||||
fontSize: 0,
|
||||
shadowStyle: {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
},
|
||||
|
||||
fullWindowsScroll: false,
|
||||
tips: ['无需依赖额外的样式文件','使用tn-read-more组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '默认高度',
|
||||
optional: ['200','400', '600'],
|
||||
methods: 'showHeightChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '显示收起按钮',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'closeBtnChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换默认高度
|
||||
showHeightChange(event) {
|
||||
this.showHeight = Number(event.name)
|
||||
},
|
||||
// 切换收起按钮模式
|
||||
closeBtnChange(event) {
|
||||
this.closeBtn = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义样式
|
||||
customChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.openText = '展开阅读全文'
|
||||
this.closeText = '收起'
|
||||
this.openIcon = 'down'
|
||||
this.closeIcon = 'up'
|
||||
this.fontColor = ''
|
||||
this.fontSize = 0
|
||||
this.shadowStyle = {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
this.openText = '付费解锁剩余内容'
|
||||
this.closeText = '折起来'
|
||||
this.openIcon = 'money'
|
||||
this.closeIcon = 'close-circle'
|
||||
this.fontSize = 30
|
||||
this.shadowStyle = {
|
||||
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #AAA 100%)",
|
||||
paddingTop: "300rpx",
|
||||
marginTop: "-300rpx"
|
||||
}
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 展开
|
||||
open() {
|
||||
// setTimeout(() => {
|
||||
// this.$refs.demoTemplate.updateSectionScrollView()
|
||||
// }, 350)
|
||||
this.fullWindowsScroll = true
|
||||
},
|
||||
// 收起
|
||||
closed() {
|
||||
setTimeout(() => {
|
||||
this.fullWindowsScroll = false
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}, 350)
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-toast">
|
||||
<view class="components-scroll-list tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>ScrollList横向滚动</tn-nav-bar>
|
||||
@@ -8,14 +8,8 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-scroll-list
|
||||
:indicator="indicator"
|
||||
:indicatorWidth="indicatorWidth"
|
||||
:indicatorBarWidth="indicatorBarWidth"
|
||||
:indicatorColor="indicatorColor"
|
||||
:indicatorActiveColor="indicatorActiveColor"
|
||||
>
|
||||
<demo-title title="基本使用">
|
||||
<tn-scroll-list>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<block v-for="(item, index) in 14" :key="index">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
@@ -31,7 +25,47 @@
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-list>
|
||||
</dynamic-demo-template>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="隐藏指示器">
|
||||
<tn-scroll-list :indicator="false">
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<block v-for="(item, index) in 14" :key="index">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.colorUtils.getRandomCoolBgClass(index)]">
|
||||
<view class="tn-icon-gloves-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">傻北</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-list>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义指示器样式">
|
||||
<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#D6F4FA" indicatorActiveColor="#27A1BA">
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<block v-for="(item, index) in 14" :key="index">
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
|
||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||
<view class="icon3__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[$t.colorUtils.getRandomCoolBgClass(index)]">
|
||||
<view class="tn-icon-gloves-fill"></view>
|
||||
</view>
|
||||
<view class="tn-color-black tn-text-lg tn-text-center">
|
||||
<text class="tn-text-ellipsis">傻北</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</tn-scroll-list>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -40,73 +74,26 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsScrollList',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
indicator: true,
|
||||
indicatorWidth: 50,
|
||||
indicatorBarWidth: 20,
|
||||
indicatorColor: '#E6E6E6',
|
||||
indicatorActiveColor: '#01BEFF',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-scroll-list组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '指示条',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'indicatorChange'
|
||||
},
|
||||
{
|
||||
title: '指示条样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换指示条状态
|
||||
indicatorChange(event) {
|
||||
this.indicator = event.index === 0 ? true : false
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换自定义指示条
|
||||
customChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.indicatorWidth = 50
|
||||
this.indicatorBarWidth = 20
|
||||
this.indicatorColor = '#E6E6E6'
|
||||
this.indicatorActiveColor = '#01BEFF'
|
||||
break
|
||||
case 1:
|
||||
this.indicatorWidth = 100
|
||||
this.indicatorBarWidth = 30
|
||||
this.indicatorColor = '#D6F4FA'
|
||||
this.indicatorActiveColor = '#27A1BA'
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.components-scroll-list {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.icon3 {
|
||||
&__item {
|
||||
width: 30%;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<view class="tn-flex tn-flex-row-center"><tn-button fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view>
|
||||
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showSelect">弹出Select</tn-button></view>
|
||||
<view class="select-result tn-border-dashed">
|
||||
{{ result }}
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-slider">
|
||||
<view class="components-slider tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>slider滑动条</tn-nav-bar>
|
||||
@@ -8,42 +8,38 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-slider
|
||||
v-if="useSlot"
|
||||
v-model="value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:disabled="disabled"
|
||||
:blockWidth="blockWidth"
|
||||
:blockColor="blockColor"
|
||||
:lineHeight="lineHeight"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
>
|
||||
<demo-title title="基本使用">
|
||||
<tn-slider v-model="value1"></tn-slider>
|
||||
<view class="tn-margin-top">
|
||||
<tn-slider v-model="value1" :disabled="true"></tn-slider>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置最小最大值">
|
||||
<tn-slider v-model="value2" :min="20" :max="80"></tn-slider>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="设置步进值">
|
||||
<tn-slider v-model="value3" :step="10"></tn-slider>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义滑块滑轨信息">
|
||||
<tn-slider v-model="value5" :blockWidth="40" :lineHeight="10"></tn-slider>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色信息">
|
||||
<tn-slider v-model="value6" blockColor="#838383" inactiveColor="#FAD8D6" activeColor="#31E749"></tn-slider>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义滑块">
|
||||
<tn-slider v-model="value7">
|
||||
<view class="tn-slider__custom-block">
|
||||
{{ value }}
|
||||
{{ value7 }}
|
||||
</view>
|
||||
</tn-slider>
|
||||
<tn-slider
|
||||
v-else
|
||||
v-model="value"
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:disabled="disabled"
|
||||
:blockWidth="blockWidth"
|
||||
:blockColor="blockColor"
|
||||
:lineHeight="lineHeight"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
></tn-slider>
|
||||
</demo-title>
|
||||
|
||||
<view class="slider-value">
|
||||
<view class="slider-value__text">当前选值为：{{ value }}</view>
|
||||
</view>
|
||||
</dynamic-demo-template>
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -52,137 +48,31 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsSlider',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
blockWidth: 30,
|
||||
blockColor: '#FFFFFF',
|
||||
lineHeight: 8,
|
||||
activeColor: '#01BEFF',
|
||||
inactiveColor: '#E6E6E6',
|
||||
useSlot: false,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-slider组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '最小最大值',
|
||||
optional: ['0-100','20-80'],
|
||||
methods: 'minMaxChange'
|
||||
},
|
||||
{
|
||||
title: '步进值',
|
||||
optional: ['1','10','30'],
|
||||
methods: 'stepChange'
|
||||
},
|
||||
{
|
||||
title: '禁用状态',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义尺寸',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customSizeChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义滑块',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customSliderBlockChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
value1: 0,
|
||||
value2: 0,
|
||||
value3: 0,
|
||||
value4: 0,
|
||||
value5: 0,
|
||||
value6: 0,
|
||||
value7: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换最大最小值
|
||||
minMaxChange(event) {
|
||||
const value = event.name.split('-')
|
||||
this.min = Number(value[0])
|
||||
this.max = Number(value[1])
|
||||
},
|
||||
// 切换步进值
|
||||
stepChange(event) {
|
||||
this.step = Number(event.name)
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换尺寸
|
||||
customSizeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.blockWidth = 30
|
||||
this.lineHeight = 8
|
||||
break
|
||||
case 1:
|
||||
this.blockWidth = 50
|
||||
this.lineHeight = 12
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换颜色
|
||||
customColorChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inactiveColor = '#E6E6E6'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#2DE88D'
|
||||
this.inactiveColor = '#AAAAAA'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换滑块
|
||||
customSliderBlockChange(event) {
|
||||
this.useSlot = event.index === 0 ? false : true
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.slider-value {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30rpx;
|
||||
|
||||
&__text {
|
||||
width: 260rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
background-color: $tn-font-holder-color;
|
||||
}
|
||||
.components-slider {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tn-slider__custom-block {
|
||||
@@ -190,7 +80,7 @@
|
||||
width: auto;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0 5rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
|
||||
+64
-101
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-steps">
|
||||
<view class="components-steps tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Steps步骤条</tn-nav-bar>
|
||||
@@ -8,9 +8,46 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-steps :list="list" :current="current" :mode="mode" :direction="direction" :showTitle="showTitle" :activeColor="activeColor" :inActiveColor="inActiveColor"></tn-steps>
|
||||
</dynamic-demo-template>
|
||||
<view class="operate_btn">
|
||||
<view>
|
||||
<tn-button backgroundColor="tn-bg-indigo" fontColor="tn-color-white" @click="prevStep">上一步</tn-button>
|
||||
</view>
|
||||
<view>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="nextStep">下一步</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top-lg"></view>
|
||||
|
||||
<demo-title title="点模式">
|
||||
<tn-steps :list="list" :current="current" @click="stepItemClick"></tn-steps>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="数值模式">
|
||||
<tn-steps :list="list" :current="current" mode="number" @click="stepItemClick"></tn-steps>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="图标模式">
|
||||
<tn-steps :list="list" :current="current" mode="icon" @click="stepItemClick"></tn-steps>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="点图标模式">
|
||||
<tn-steps :list="list" :current="current" mode="dotIcon" @click="stepItemClick"></tn-steps>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="隐藏标题">
|
||||
<tn-steps :list="list" :current="current" mode="icon" :showTitle="false" @click="stepItemClick"></tn-steps>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义颜色">
|
||||
<tn-steps :list="list" :current="current" mode="icon" activeColor="#24F083" inActiveColor="#E6E6E6" @click="stepItemClick"></tn-steps>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="垂直显示">
|
||||
<tn-steps :list="list" :current="current" direction="column" @click="stepItemClick"></tn-steps>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -19,10 +56,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsSteps',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
@@ -31,112 +68,38 @@
|
||||
{name: '第三步', icon: 'safe', selectIcon: 'safe-fill'},
|
||||
{name: '第四步', icon: 'vip', selectIcon: 'vip-fill'}
|
||||
],
|
||||
current: 0,
|
||||
mode: 'dot',
|
||||
direction: 'row',
|
||||
showTitle: true,
|
||||
activeColor: '#01BEFF',
|
||||
inActiveColor: '#AAAAAA',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-steps组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '步骤',
|
||||
optional: ['上一步','下一步'],
|
||||
methods: 'currentChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '模式',
|
||||
optional: ['点模式','数值模式','图标模式','点图标模式'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '方向',
|
||||
optional: ['横向','竖直'],
|
||||
methods: 'directionChange'
|
||||
},
|
||||
{
|
||||
title: '显示标题',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showTitleChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'colorChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换步骤
|
||||
currentChange(event) {
|
||||
prevStep() {
|
||||
let current = this.current
|
||||
if (event.index === 0) {
|
||||
current--
|
||||
this.current = current < 0 ? 0 : current
|
||||
} else {
|
||||
current++
|
||||
this.current = current > this.list.length ? this.list.length : current
|
||||
}
|
||||
current--
|
||||
this.current = current < 0 ? 0 : current
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'dot'
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'number'
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'icon'
|
||||
break
|
||||
case 3:
|
||||
this.mode = 'dotIcon'
|
||||
break
|
||||
}
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
nextStep() {
|
||||
let current = this.current
|
||||
current++
|
||||
this.current = current > this.list.length ? this.list.length : current
|
||||
},
|
||||
// 切换方向
|
||||
directionChange(event) {
|
||||
this.direction = event.index === 0 ? 'row' : 'column'
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换标题情况
|
||||
showTitleChange(event) {
|
||||
this.showTitle = event.index === 0 ? true : false
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
// 切换颜色样式
|
||||
colorChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inActiveColor = '#AAAAAA'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#24F083'
|
||||
this.inActiveColor = '#E6E6E6'
|
||||
break
|
||||
}
|
||||
stepItemClick(e) {
|
||||
this.current = e.index
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.operate_btn {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
padding: 0 30rpx;
|
||||
margin: 30rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-sticky" style="height: 200vh;">
|
||||
<view class="components-sticky tn-safe-area-inset-bottom" style="height: 200vh;">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>sticky吸顶</tn-nav-bar>
|
||||
@@ -8,11 +8,24 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="true" @click="click">
|
||||
<tn-sticky :offsetTop="offsetTop" :enabled="enabled" :customNavHeight="vuex_custom_bar_height" @fixed="fixed" @unfixed="unfixed">
|
||||
<view class="sticky-content">图鸟科技</view>
|
||||
<demo-title title="吸顶">
|
||||
<tn-sticky :offsetTop="0" :customNavHeight="vuex_custom_bar_height">
|
||||
<view class="sticky-content tn-bg-orangered tn-color-white">普通吸顶</view>
|
||||
</tn-sticky>
|
||||
</dynamic-demo-template>
|
||||
<view style="margin-top: 200rpx;">
|
||||
<tn-sticky :offsetTop="100" :customNavHeight="vuex_custom_bar_height">
|
||||
<view class="sticky-content tn-bg-indigo tn-color-white">有距离吸顶</view>
|
||||
</tn-sticky>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="取消吸顶">
|
||||
<tn-sticky :offsetTop="0" :enabled="false" :customNavHeight="vuex_custom_bar_height">
|
||||
<view class="sticky-content tn-bg-red tn-color-white">不允许吸顶</view>
|
||||
</tn-sticky>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -21,69 +34,34 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsSticky',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
offsetTop: 0,
|
||||
enabled: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-sticky组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '吸顶距离',
|
||||
optional: ['0','20','100'],
|
||||
methods: 'offsetTopChange'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
optional: ['允许吸顶', '不吸顶'],
|
||||
methods: 'enabledChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换吸顶距离
|
||||
offsetTopChange(event) {
|
||||
this.offsetTop = Number(event.name)
|
||||
},
|
||||
// 切换吸顶状态
|
||||
enabledChange(event) {
|
||||
this.enabled = event.index === 0 ? true: false
|
||||
},
|
||||
|
||||
// 监听是否吸顶
|
||||
fixed() {
|
||||
this.$t.messageUtils.toast('触发吸顶')
|
||||
},
|
||||
unfixed() {
|
||||
this.$t.messageUtils.toast('取消吸顶')
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.components-sticky {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sticky-content {
|
||||
height: 80rpx;
|
||||
padding: 0 80rpx;
|
||||
margin: 0 10rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background-color: $tn-main-color;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-index-list">
|
||||
<view class="components-swipe-action tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>swipeAction滑动菜单</tn-nav-bar>
|
||||
@@ -8,119 +8,127 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options1">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
基本使用
|
||||
<demo-title title="基本使用">
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options1">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
基本使用
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
多菜单
|
||||
<demo-title title="多菜单">
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
多菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options3">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
带图标菜单
|
||||
<demo-title title="带图标菜单">
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options3">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
带图标菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options4">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
单图标菜单
|
||||
<demo-title title="单图标菜单">
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item :options="options4">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
单图标菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
关联打开滑动菜单
|
||||
<demo-title title="关联打开滑动菜单">
|
||||
<tn-swipe-action>
|
||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到，同时只能打开一个菜单
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
关联打开滑动菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到，同时只能打开一个菜单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
<tn-swipe-action :autoClose="false">
|
||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
非关联打开滑动菜单
|
||||
<demo-title title="非关联打开滑动菜单">
|
||||
<tn-swipe-action :autoClose="false">
|
||||
<tn-swipe-action-item v-for="(item,index) in 2" :key="index" :name="index" :options="options2">
|
||||
<view class="swipe-action__item tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-left">
|
||||
<view class="swipe-action__item__image">
|
||||
<image src="https://tnuiimage.tnkjapp.com/shop/card.jpg" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到，允许同时打开多个菜单
|
||||
<view class="swipe-action__item__info tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-right">
|
||||
<view class="swipe-action__item__info__title">
|
||||
非关联打开滑动菜单
|
||||
</view>
|
||||
<view class="swipe-action__item__info__desc">
|
||||
向左滑动即可看到，允许同时打开多个菜单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</tn-swipe-action-item>
|
||||
</tn-swipe-action>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@@ -128,8 +136,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsSwipeAction',
|
||||
components: { demoTitle },
|
||||
data() {
|
||||
return {
|
||||
// 滑动菜单
|
||||
@@ -192,7 +202,6 @@
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-swiper">
|
||||
<view class="components-swiper tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Swiper轮播图</tn-nav-bar>
|
||||
@@ -8,214 +8,63 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-swiper
|
||||
:list="list"
|
||||
:height="height"
|
||||
:backgroundColor="backgroundColor"
|
||||
:title="title"
|
||||
:titleStyle="titleStyle"
|
||||
:radius="radius"
|
||||
:mode="mode"
|
||||
:indicatorPosition="indicatorPosition"
|
||||
:effect3d="effect3d"
|
||||
:effect3dPreviousSpacing="effect3dPreviousSpacing"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
:circular="circular"
|
||||
></tn-swiper>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="圆角方形">
|
||||
<tn-swiper :list="list"></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="方形">
|
||||
<tn-swiper :list="list" mode="rect"></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="点">
|
||||
<tn-swiper :list="list" mode="dot"></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="数值">
|
||||
<tn-swiper :list="list" mode="number"></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="隐藏指示器">
|
||||
<tn-swiper :list="list" mode=""></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="轮播标题">
|
||||
<tn-swiper :list="list" :title="true" mode=""></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="指示器设置在右上角">
|
||||
<tn-swiper :list="list" indicatorPosition="topRight"></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="3D切换效果">
|
||||
<tn-swiper :list="list" :effect3d="true"></tn-swiper>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- Toast -->
|
||||
<tn-toast
|
||||
ref="toast"
|
||||
@closed="closedToast"
|
||||
></tn-toast>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsSwiper',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/spring.jpg', title: '春天'},
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/summer.jpg', title: '夏天'},
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'}
|
||||
],
|
||||
height: 250,
|
||||
backgroundColor: '',
|
||||
title: false,
|
||||
titleStyle: {},
|
||||
radius: 8,
|
||||
mode: 'round',
|
||||
indicatorPosition: 'bottomCenter',
|
||||
effect3d: false,
|
||||
effect3dPreviousSpacing: 50,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
circular: true,
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-swiper组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '指示器模式',
|
||||
optional: ['方形','圆角方形','点','数值','隐藏'],
|
||||
methods: 'modeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '指示器位置',
|
||||
optional: ['左上','中上','右上','左下','中下','右下'],
|
||||
methods: 'indicatorPositionChange',
|
||||
current: 4
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'titleChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'styleChange'
|
||||
},
|
||||
{
|
||||
title: '3d切换效果',
|
||||
optional: ['开启','关闭'],
|
||||
methods: 'effect3dChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '切换时间',
|
||||
optional: ['默认','5000'],
|
||||
methods: 'intervalChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/autumn.jpg', title: '秋天'},
|
||||
{image: 'https://tnuiimage.tnkjapp.com/swiper/winter.jpg', title: '冬天'},
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换指示器模式
|
||||
modeChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.mode = 'rect'
|
||||
break
|
||||
case 1:
|
||||
this.mode = 'round'
|
||||
break
|
||||
case 2:
|
||||
this.mode = 'dot'
|
||||
break
|
||||
case 3:
|
||||
this.mode = 'number'
|
||||
break
|
||||
case 4:
|
||||
this.mode = ''
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换指示器位置
|
||||
indicatorPositionChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.indicatorPosition = 'topLeft'
|
||||
break
|
||||
case 1:
|
||||
this.indicatorPosition = 'topCenter'
|
||||
break
|
||||
case 2:
|
||||
this.indicatorPosition = 'topRight'
|
||||
break
|
||||
case 3:
|
||||
this.indicatorPosition = 'bottomLeft'
|
||||
break
|
||||
case 4:
|
||||
this.indicatorPosition = 'bottomCenter'
|
||||
break
|
||||
case 5:
|
||||
this.indicatorPosition = 'bottomRight'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换标题
|
||||
titleChange(event) {
|
||||
this.title = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换自定义样式
|
||||
styleChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.height = 250
|
||||
this.backgroundColor = ''
|
||||
this.titleStyle = {}
|
||||
this.radius = 8
|
||||
this.effect3dPreviousSpacing = 50
|
||||
break
|
||||
case 1:
|
||||
this.height = 300
|
||||
this.backgroundColor = '#E6E6E6'
|
||||
this.titleStyle = {
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
this.radius = 12
|
||||
this.effect3dPreviousSpacing = 100
|
||||
break
|
||||
}
|
||||
},
|
||||
// 切换3d效果
|
||||
effect3dChange(event) {
|
||||
this.effect3d = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换切换时间
|
||||
intervalChange(event) {
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.interval = 3000
|
||||
this.duration = 500
|
||||
break
|
||||
case 1:
|
||||
this.interval = 5000
|
||||
this.duration = 800
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 打开Toast
|
||||
openToast() {
|
||||
this.$refs.toast.show({
|
||||
title: this.title,
|
||||
content: this.content,
|
||||
icon: this.icon,
|
||||
image: this.image,
|
||||
duration: this.duration
|
||||
})
|
||||
},
|
||||
// 关闭Toast
|
||||
closedToast() {
|
||||
this.$t.messageUtils.toast('Toast关闭')
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-switch">
|
||||
<view class="components-switch tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Switch开光</tn-nav-bar>
|
||||
@@ -8,18 +8,57 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-switch
|
||||
v-model="value"
|
||||
:shape="shape"
|
||||
:size="size"
|
||||
:activeColor="color"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
:leftIcon="leftIcon"
|
||||
:rightIcon="rightIcon"
|
||||
></tn-switch>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="普通切换按钮">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-switch v-model="value1"></tn-switch>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<tn-switch v-model="value2" shape="square"></tn-switch>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<tn-switch v-model="value2" shape="square" :disabled="true"></tn-switch>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<tn-switch v-model="value2" shape="square" :loading="value2"></tn-switch>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="按钮颜色">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-switch v-model="value3" activeColor="#A4E82F"></tn-switch>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<tn-switch v-model="value4" activeColor="#FFA4A4"></tn-switch>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="按钮尺寸">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-switch v-model="value5" :size="30"></tn-switch>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<tn-switch v-model="value6"></tn-switch>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<tn-switch v-model="value7" :size="60"></tn-switch>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="按钮内嵌图标">
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||
<view>
|
||||
<tn-switch v-model="value8" leftIcon="sex-female" rightIcon="sex-male"></tn-switch>
|
||||
</view>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -28,104 +67,30 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsSwitch',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
shape: 'circle',
|
||||
color: '',
|
||||
size: 50,
|
||||
disabled: false,
|
||||
loading: false,
|
||||
leftIcon: '',
|
||||
rightIcon: '',
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-switch组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '形状',
|
||||
optional: ['圆角','方角'],
|
||||
methods: 'shapeChange'
|
||||
},
|
||||
{
|
||||
title: '禁用',
|
||||
optional: ['是','否'],
|
||||
methods: 'disabledChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '颜色',
|
||||
optional: ['默认','#A4E82F','#FFA4A4'],
|
||||
methods: 'colorChange'
|
||||
},
|
||||
{
|
||||
title: '尺寸',
|
||||
optional: ['40','50','80'],
|
||||
methods: 'sizeChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '加载中',
|
||||
optional: ['是','否'],
|
||||
methods: 'loadingChange',
|
||||
current: 1
|
||||
},
|
||||
{
|
||||
title: '显示图标',
|
||||
optional: ['是','否'],
|
||||
methods: 'iconChange',
|
||||
current: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
value1: false,
|
||||
value2: false,
|
||||
value3: false,
|
||||
value4: false,
|
||||
value5: false,
|
||||
value6: false,
|
||||
value7: false,
|
||||
value8: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换形状
|
||||
shapeChange(event) {
|
||||
this.shape = event.index === 0 ? 'circle' : 'square'
|
||||
},
|
||||
// 切换禁用状态
|
||||
disabledChange(event) {
|
||||
this.disabled = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换颜色
|
||||
colorChange(event) {
|
||||
this.color = event.index === 0 ? '' : event.name
|
||||
},
|
||||
// 切换尺寸
|
||||
sizeChange(event) {
|
||||
this.size = Number(event.name)
|
||||
},
|
||||
// 切换加载状态
|
||||
loadingChange(event) {
|
||||
this.loading = event.index === 0 ? true : false
|
||||
},
|
||||
// 切换图标状态
|
||||
iconChange(event) {
|
||||
if (event.index === 0) {
|
||||
this.leftIcon = 'sex-female'
|
||||
this.rightIcon = 'sex-male'
|
||||
} else if (event.index === 1) {
|
||||
this.leftIcon = ''
|
||||
this.rightIcon = ''
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.components-switch {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
+49
-206
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<view class="components-tabs">
|
||||
<view class="components-tabs tn-safe-area-inset-bottom">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>tabs标签</tn-nav-bar>
|
||||
@@ -8,26 +8,34 @@
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-tabs
|
||||
v-if="show"
|
||||
:list="list"
|
||||
:current="current"
|
||||
:isScroll="isScroll"
|
||||
:height="height"
|
||||
:itemWidth="itemWidth"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
:activeItemStyle="activeItemStyle"
|
||||
:showBar="showBar"
|
||||
:barWidth="barWidth"
|
||||
:barHeight="barHeight"
|
||||
:barStyle="barStyle"
|
||||
:gutter="gutter"
|
||||
:badgeOffset="badgeOffset"
|
||||
@change="tabChange"
|
||||
></tn-tabs>
|
||||
</dynamic-demo-template>
|
||||
<demo-title title="默认" :contentPadding="false">
|
||||
<tn-tabs :list="scrollList" :current="current" @change="tabChange"></tn-tabs>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="隐藏底部滑块" :contentPadding="false">
|
||||
<tn-tabs :list="scrollList" :current="current" :showBar="false" @change="tabChange"></tn-tabs>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="修改背景颜色" :contentPadding="false">
|
||||
<tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" @change="tabChange"></tn-tabs>
|
||||
<view class="tn-margin-top">
|
||||
<tn-tabs :list="scrollList" :current="current" backgroundColor="tn-main-gradient-indigo" activeColor="#FFFFFF" @change="tabChange"></tn-tabs>
|
||||
</view>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义标签宽高" :contentPadding="false">
|
||||
<tn-tabs :list="scrollList" :current="current" :height="120" :itemWidth="200" :barWidth="140" @change="tabChange"></tn-tabs>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="自定义标签、滑块" :contentPadding="false">
|
||||
<tn-tabs :list="scrollList" :current="current" backgroundColor="#FFFFFF" :activeItemStyle="activeItemStyle" :barStyle="barStyle" @change="tabChange"></tn-tabs>
|
||||
</demo-title>
|
||||
|
||||
<demo-title title="固定选项标签" :contentPadding="false">
|
||||
<tn-tabs :list="fixedList" :current="current" :isScroll="false" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-bottom-lg"></view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -36,14 +44,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
import demoTitle from '@/libs/components/demo-title.vue'
|
||||
export default {
|
||||
name: 'componentsTabs',
|
||||
components: {dynamicDemoTemplate},
|
||||
components: {demoTitle},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
data: [
|
||||
current: 0,
|
||||
activeItemStyle: {
|
||||
borderTop: '1rpx solid #E6E6E6'
|
||||
},
|
||||
barStyle: {
|
||||
boxShadow: `12rpx 12rpx 16rpx #01BEFF`
|
||||
},
|
||||
scrollList: [
|
||||
{name: '关注', count: 10},
|
||||
{name: '推荐'},
|
||||
{name: '热榜', count: '99+'},
|
||||
@@ -54,198 +68,27 @@
|
||||
{name: '电影'},
|
||||
{name: '游戏'}
|
||||
],
|
||||
list: [],
|
||||
current: 0,
|
||||
isScroll: true,
|
||||
height: 80,
|
||||
itemWidth: 'auto',
|
||||
activeColor: '#01BEFF',
|
||||
inactiveColor: '#080808',
|
||||
activeItemStyle: {},
|
||||
showBar: true,
|
||||
barWidth: 40,
|
||||
barHeight: 6,
|
||||
barStyle: {},
|
||||
gutter: 30,
|
||||
badgeOffset: [20, 22],
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-tabs组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '模式选择',
|
||||
optional: ['滑动','非滑动'],
|
||||
methods: 'modeChange'
|
||||
},
|
||||
{
|
||||
title: '标签数量',
|
||||
optional: ['2','3','4','5'],
|
||||
methods: 'countChange',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
title: '显示底部滑块',
|
||||
optional: ['显示','隐藏'],
|
||||
methods: 'showBarChange'
|
||||
},
|
||||
{
|
||||
title: '自定义宽高',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customWidthHeightChange'
|
||||
},
|
||||
{
|
||||
title: '自定义颜色',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customColorChange'
|
||||
},
|
||||
{
|
||||
title: '自定义样式',
|
||||
optional: ['默认','自定义'],
|
||||
methods: 'customStyleChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
fixedList: [
|
||||
{name: '关注', count: 10},
|
||||
{name: '推荐'},
|
||||
{name: '热榜', count: '99+'},
|
||||
{name: '搞笑'}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.list = this.data
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 切换模式
|
||||
modeChange(event) {
|
||||
this.show = false
|
||||
this.current = 0
|
||||
this.isScroll = event.index === 0 ? true : false
|
||||
|
||||
if (event.index === 0) {
|
||||
this.list = this.data
|
||||
this.badgeOffset = [20, 22]
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, false)
|
||||
} else if (event.index === 1) {
|
||||
this.$refs.demoTemplate.updateSectionBtnsState(1, true)
|
||||
this.$refs.demoTemplate.updateSectionBtnsValue(0, 1, 0)
|
||||
this.countChange({index: 0, name: 2})
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换标签数量
|
||||
countChange(event) {
|
||||
this.show = false
|
||||
this.list = this.data.slice(0, Number(event.name))
|
||||
switch (event.index) {
|
||||
case 0:
|
||||
this.badgeOffset = [20, 120]
|
||||
break
|
||||
case 1:
|
||||
this.badgeOffset = [20, 70]
|
||||
break
|
||||
case 2:
|
||||
this.badgeOffset = [20, 50]
|
||||
break
|
||||
case 3:
|
||||
this.badgeOffset = [20, 22]
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换底部滑块显示
|
||||
showBarChange(event) {
|
||||
this.show = false
|
||||
this.showBar = event.index === 0 ? true : false
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换自定义宽高
|
||||
customWidthHeightChange(event) {
|
||||
this.show = false
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.height = 80
|
||||
this.itemWidth = 'auto'
|
||||
this.barWidth = 40
|
||||
this.barHeight = 6
|
||||
this.gutter = 30
|
||||
break
|
||||
case 1:
|
||||
this.height = 100
|
||||
this.itemWidth = '40%'
|
||||
this.barWidth = 130
|
||||
this.barHeight = 4
|
||||
this.gutter = 10
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
})
|
||||
},
|
||||
// 切换颜色
|
||||
customColorChange(event) {
|
||||
this.show = false
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.activeColor = '#01BEFF'
|
||||
this.inactiveColor = '#080808'
|
||||
break
|
||||
case 1:
|
||||
this.activeColor = '#31E749'
|
||||
this.inactiveColor = '#AAAAAA'
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
// 切换自定义样式
|
||||
customStyleChange(event) {
|
||||
this.show = false
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.activeItemStyle = {}
|
||||
this.barStyle = {}
|
||||
break
|
||||
case 1:
|
||||
this.activeItemStyle = {
|
||||
borderTop: '1rpx solid #E6E6E6'
|
||||
}
|
||||
this.barStyle = {
|
||||
boxShadow: `6rpx 6rpx 8rpx ${this.activeColor}`
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// tab选项卡切换
|
||||
tabChange(index) {
|
||||
this.current = index
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.components-tabs {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showTips">弹出Tips</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
||||
<tn-button fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @click="showToast">弹出Toast</tn-button>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
@@ -102,7 +102,7 @@
|
||||
break
|
||||
case 2:
|
||||
this.icon = ''
|
||||
this.image = '/static/logo1.png'
|
||||
this.image = '/static/favicon.ico'
|
||||
break
|
||||
}
|
||||
this.openToast()
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<tn-form-item label="验证码">
|
||||
<tn-input></tn-input>
|
||||
<view slot="right">
|
||||
<tn-button fontColor="tn-color-white" @click="getCode">{{ tips }}</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" size="sm" @click="getCode">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</tn-form-item>
|
||||
</tn-form>
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="demo-title">
|
||||
<view>
|
||||
<view v-if="type === 'first'" class="main_title">
|
||||
<view v-if="leftIcon" class="main_title__icon main_title__icon--left" :class="[`tn-icon-${leftIcon}`]"></view>
|
||||
<view class="main_title__content">{{ title }}</view>
|
||||
<view v-if="rightIcon" class="main_title__icon main_title__icon--right" :class="[`tn-icon-${rightIcon}`]"></view>
|
||||
</view>
|
||||
<view v-if="type === 'second'" class="second_title">
|
||||
<view class="second_title__content">{{ title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content" :class="[{
|
||||
'content--padding': contentPadding
|
||||
}]">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'demo-title',
|
||||
props: {
|
||||
// 标题类型
|
||||
type: {
|
||||
type: String,
|
||||
default: 'first'
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 左图标
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: 'star'
|
||||
},
|
||||
// 右图标
|
||||
rightIcon: {
|
||||
type: String,
|
||||
default: 'star'
|
||||
},
|
||||
// 内容容器是否有两边边距
|
||||
contentPadding: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 50rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
|
||||
&__content {
|
||||
padding: 0 18rpx;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.second_title {
|
||||
margin: 24rpx 0;
|
||||
margin-left: 30rpx;
|
||||
|
||||
&__content {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 30rpx;
|
||||
|
||||
&--padding {
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="dynamic-demo">
|
||||
|
||||
<!-- 效果预览窗口 -->
|
||||
<view class="demo-container" :class="{'demo-container--full': full}">
|
||||
<view v-if="!noDemo" class="demo-container" :class="{'demo-container--full': full}">
|
||||
<view class="demo">
|
||||
<slot></slot>
|
||||
</view>
|
||||
@@ -91,6 +91,11 @@
|
||||
fullWindowsScroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 没有演示内容
|
||||
noDemo: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -217,15 +222,19 @@
|
||||
}
|
||||
}).exec()
|
||||
} else {
|
||||
uni.createSelectorQuery().in(this).select('.demo-container').boundingClientRect(data => {
|
||||
if (data.bottom >= systemInfo.safeArea.height) {
|
||||
this.sectionScrollFlag = false
|
||||
} else {
|
||||
this.sectionScrollFlag = true
|
||||
const containerBaseHeight = systemInfo.safeArea.height - data.bottom
|
||||
this.sectionScrollViewStyle.height = (containerBaseHeight - navBarHeight) + systemInfo.statusBarHeight - uni.upx2px(75) + 'px'
|
||||
}
|
||||
}).exec()
|
||||
if (!this.noDemo) {
|
||||
uni.createSelectorQuery().in(this).select('.demo-container').boundingClientRect(data => {
|
||||
if (data.bottom >= systemInfo.safeArea.height) {
|
||||
this.sectionScrollFlag = false
|
||||
} else {
|
||||
this.sectionScrollFlag = true
|
||||
const containerBaseHeight = systemInfo.safeArea.height - data.bottom
|
||||
this.sectionScrollViewStyle.height = (containerBaseHeight - navBarHeight) + systemInfo.statusBarHeight - uni.upx2px(75) + 'px'
|
||||
}
|
||||
}).exec()
|
||||
} else {
|
||||
this.sectionScrollFlag = false
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -544,7 +553,7 @@
|
||||
display: block;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||||
padding-bottom: calc(70rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="multiple-options">
|
||||
<view class="list">
|
||||
<block v-for="(item, index) in listData" :key="index">
|
||||
<view
|
||||
class="list__item"
|
||||
:class="[`tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}--light`]"
|
||||
@tap="navOptionsPage(item.url)"
|
||||
>
|
||||
<view class="list__content">
|
||||
<view class="list__content__title">{{ item.title }}</view>
|
||||
<view class="list__content__desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
<view class="list__icon">
|
||||
<view class="list__icon__main" :class="[`tn-icon-${item.mainIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
|
||||
<view class="list__icon__sub" :class="[`tn-icon-${item.subIcon}`, `tn-main-gradient-${tuniaoColorList[item.bgColorIndex]}`]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'multiple-options-demo',
|
||||
props: {
|
||||
// 显示的列表数据
|
||||
list: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 图鸟颜色列表
|
||||
tuniaoColorList: [
|
||||
'red',
|
||||
'purplered',
|
||||
'purple',
|
||||
'bluepurple',
|
||||
'aquablue',
|
||||
'blue',
|
||||
'indigo',
|
||||
'cyan',
|
||||
'teal',
|
||||
'green',
|
||||
'orange',
|
||||
'orangered'
|
||||
],
|
||||
listData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list(val) {
|
||||
this.initList()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化列表数据
|
||||
initList() {
|
||||
// 给列表添加背景颜色数据
|
||||
this.listData = this.list.map((item, index) => {
|
||||
item.bgColorIndex = this.getBgNum()
|
||||
item.mainIcon = item?.mainIcon || 'computer-fill'
|
||||
item.subIcon = item?.subIcon || 'share'
|
||||
return item
|
||||
})
|
||||
},
|
||||
// 跳转到对应的选项页面
|
||||
navOptionsPage(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
},
|
||||
// 获取酷炫背景随机数
|
||||
getBgNum() {
|
||||
return Math.floor((Math.random() * this.tuniaoColorList.length))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.list {
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 60rpx);
|
||||
margin: 108rpx 30rpx 0rpx 30rpx;
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1;
|
||||
// color: $tn-font-color;
|
||||
margin: 34rpx 0rpx 27rpx 37rpx;
|
||||
|
||||
&__title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
&__desc {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 1;
|
||||
margin-right: 26rpx;
|
||||
position: relative;
|
||||
|
||||
&__main, &__sub {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
&__main {
|
||||
font-size: 200rpx;
|
||||
width: 190rpx;
|
||||
line-height: 200rpx;
|
||||
top: 0;
|
||||
right: 0rpx;
|
||||
transform: translateY(-60%);
|
||||
}
|
||||
&__sub {
|
||||
font-size: 70rpx;
|
||||
top: 0;
|
||||
right: 175rpx;
|
||||
transform: translateY(-5rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -44,7 +44,7 @@
|
||||
if (pages && pages.length > 0) {
|
||||
const indexPath = this.indexPath || '/pages/index/index'
|
||||
const firstPage = pages[0]
|
||||
if (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length)) {
|
||||
if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) {
|
||||
uni.reLaunch({
|
||||
url: indexPath
|
||||
})
|
||||
|
||||
@@ -76,6 +76,11 @@ export default {
|
||||
icon: 'star',
|
||||
title: 'swipeAction滑动菜单',
|
||||
url: '/componentsPage/swipe-action/swipe-action'
|
||||
},
|
||||
{
|
||||
icon: 'star',
|
||||
title: 'fab悬浮按钮',
|
||||
url: '/componentsPage/fab/fab'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
+76
-19
@@ -8,14 +8,28 @@ export default {
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '火箭登录',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/login/demo1/demo1'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '粒子登录',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/login/demo2/demo2'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '背景登录',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/login/demo3/demo3'
|
||||
},
|
||||
{
|
||||
icon: 'send',
|
||||
title: '简约登录',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/login/demo4/demo4'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -24,56 +38,65 @@ export default {
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '音乐首页',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/home/music/music'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '课程首页',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/home/course/course'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '设计首页',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/home/design/design'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '招聘首页',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/home/job/job'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '投屏首页',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/home/screen/screen'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '壁纸首页',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/home/wallpaper/wallpaper'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '其他页面',
|
||||
title: '骚气页面',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '健康码',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/health/qrcode/qrcode'
|
||||
},
|
||||
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '全屏轮播',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/life/fullpage/fullpage'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
title: '浏览器',
|
||||
url: '/templatePage/life/browser/browser'
|
||||
icon: 'like-break',
|
||||
title: '时钟',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/time/clock/clock'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -82,26 +105,60 @@ export default {
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '加载动画',
|
||||
author: '可我会像',
|
||||
url: '/templatePage/animate/loading/loading'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '随机粒子',
|
||||
author: 'Jaylen',
|
||||
url: '/templatePage/animate/particle/particle'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '相册图集',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/animate/photo/photo'
|
||||
},
|
||||
{
|
||||
icon: 'order',
|
||||
icon: 'send',
|
||||
title: '镂空效果',
|
||||
author: '你的小可爱',
|
||||
url: '/templatePage/animate/hollow/hollow'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '群友力献',
|
||||
backgroundColor: 'tn-cool-bg-color-1',
|
||||
list: [
|
||||
{
|
||||
icon: 'send',
|
||||
title: '3D全景',
|
||||
author: '可我会像 & 芊云全景',
|
||||
url: '/templatePage/life/pano/pano'
|
||||
},
|
||||
{
|
||||
icon: 'like-break',
|
||||
title: '隔壁的小生',
|
||||
author: '隔壁的小生',
|
||||
url: '/templatePage/life/candle/candle'
|
||||
},
|
||||
{
|
||||
icon: 'like-break',
|
||||
title: '阿凡提·污克西西',
|
||||
author: '阿凡提·污克西西',
|
||||
url: '/templatePage/life/candle/candle'
|
||||
},
|
||||
{
|
||||
icon: 'like-break',
|
||||
title: '期待你的加入',
|
||||
author: '期待你的加入',
|
||||
url: '/templatePage/life/candle/candle'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
+34
-11
@@ -14,14 +14,6 @@
|
||||
"subPackages": [{
|
||||
"root": "basicPage",
|
||||
"pages": [
|
||||
{
|
||||
"path": "test/test",
|
||||
"style": {
|
||||
"navigationStyle":"default",
|
||||
"navigationBarTitleText": "测试页面",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "flex-layout/flex-layout",
|
||||
"style": {
|
||||
@@ -298,6 +290,13 @@
|
||||
"enablePullDownRefresh": false
|
||||
// "pageOrientation": "landscape"
|
||||
}
|
||||
}, {
|
||||
"path": "fab/fab",
|
||||
"style": {
|
||||
"navigationBarTitleText": "fab悬浮按钮",
|
||||
"enablePullDownRefresh": false
|
||||
// "pageOrientation": "landscape"
|
||||
}
|
||||
}
|
||||
]
|
||||
},{
|
||||
@@ -315,7 +314,19 @@
|
||||
"navigationBarTitleText": "粒子登录",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}, {
|
||||
},{
|
||||
"path": "login/demo3/demo3",
|
||||
"style": {
|
||||
"navigationBarTitleText": "背景登录",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "login/demo4/demo4",
|
||||
"style": {
|
||||
"navigationBarTitleText": "简约登录",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "health/qrcode/qrcode",
|
||||
"style": {
|
||||
"navigationBarTitleText": "健康码",
|
||||
@@ -363,6 +374,12 @@
|
||||
"navigationBarTitleText": "全屏轮播",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "life/pano/pano",
|
||||
"style": {
|
||||
"navigationBarTitleText": "3D全景",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "life/plus/plus",
|
||||
"style": {
|
||||
@@ -370,9 +387,15 @@
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "life/browser/browser",
|
||||
"path": "life/candle/candle",
|
||||
"style": {
|
||||
"navigationBarTitleText": "浏览器",
|
||||
"navigationBarTitleText": "敬请期待",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
"path": "time/clock/clock",
|
||||
"style": {
|
||||
"navigationBarTitleText": "时钟",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},{
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="template">
|
||||
<view class="vip">
|
||||
|
||||
<view class="top-backgroup">
|
||||
<image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||
</view>
|
||||
@@ -20,11 +21,19 @@
|
||||
getRandomCoolBg(content_index)
|
||||
]"
|
||||
>
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ content_item.title }}</view>
|
||||
<view class="tn-flex tn-flex-col-center tn-flex-row-between">
|
||||
<view class="nav-link">
|
||||
<view class='title'>{{ content_item.title }}</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + content_item.icon]"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon">
|
||||
<view :class="['tn-icon-' + content_item.icon]"></view>
|
||||
<view class="author">
|
||||
<view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
|
||||
<text class="tn-icon-code tn-padding-right-xs"></text>
|
||||
<text class=""> {{ content_item.author }} </text>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</block>
|
||||
@@ -109,19 +118,40 @@
|
||||
padding: 0rpx 12rpx 0rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
|
||||
/* 列表元素 start */
|
||||
.nav-list-item {
|
||||
padding: 50rpx 30rpx 36rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 100%;
|
||||
margin: 0 18rpx 40rpx;
|
||||
margin: 0 18rpx 90rpx;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
|
||||
|
||||
.author-title{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: #FFFFFF;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: -100%;
|
||||
border-radius: 10upx;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
||||
.title {
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* 元素标题 start */
|
||||
.nav-link {
|
||||
@@ -160,6 +190,22 @@
|
||||
border-radius: 5000rpx;
|
||||
}
|
||||
/* 元素图标 end */
|
||||
|
||||
/* 作者信息 start*/
|
||||
.author {
|
||||
// background-color: red;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0 0 15rpx 15rpx;
|
||||
position: absolute;
|
||||
width: 85%;
|
||||
line-height: 50rpx;
|
||||
left: 50%;
|
||||
bottom: -50rpx;
|
||||
transform: translateX(-50%);
|
||||
z-index: -1;
|
||||
text-align: center;
|
||||
}
|
||||
/* 作者信息 end*/
|
||||
}
|
||||
/* 列表元素 end */
|
||||
}
|
||||
|
||||
@@ -57,15 +57,6 @@
|
||||
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="navTuniaoUI">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
|
||||
<view class="tn-icon-vip-fill"></view>
|
||||
</view>
|
||||
<view class="tn-margin-left-sm tn-flex-1">图鸟UI</view>
|
||||
<view class="tn-margin-left-sm tn-color-orangeyellow">会员版</view>
|
||||
</view>
|
||||
</tn-list-cell>
|
||||
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="copyGitee">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
|
||||
@@ -160,12 +151,6 @@
|
||||
appId: 'wxa698b1eee960632f'
|
||||
})
|
||||
},
|
||||
// 跳转到图鸟UI会员版
|
||||
navTuniaoUI() {
|
||||
uni.navigateToMiniProgram({
|
||||
appId: 'wxf3d81a452b88ff4b'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到会员协议
|
||||
navPlus() {
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding: 0 0 60rpx 0;">
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 170rpx;">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
@@ -144,7 +144,7 @@
|
||||
<!-- 方式二 -->
|
||||
<image
|
||||
class="tn-blogger-content__main-image tn-blogger-content__main-image--1 tn-margin-bottom"
|
||||
:src="item.mainImage"
|
||||
:src="item.mainImage[0]"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
@@ -177,6 +177,36 @@
|
||||
</block>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tnnew.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-qr-code tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">粤码通城</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-emoji-good tn-color-gray--dark">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tn.png'></image> -->
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@@ -516,4 +546,76 @@
|
||||
}
|
||||
}
|
||||
/* 移动背景部分 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -60rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #01BEFF;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 190, 255, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 比例 start-->
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl">
|
||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl" style="padding-bottom: 170rpx;">
|
||||
<block v-for="(item, index) in content" :key="index">
|
||||
<view class="" style="width: 50%;">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
@@ -160,6 +160,41 @@
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-home-smile">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-course.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">课程</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-fire-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">精选</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-play-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">播放</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-my tn-color-gray">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/course-my-no.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
@@ -644,4 +679,53 @@
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
/* 文章内容 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -134,7 +134,7 @@
|
||||
<!-- 方式7 end-->
|
||||
|
||||
<!-- 图文 -->
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom">
|
||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 170rpx;">
|
||||
|
||||
<block v-for="(item,index) in content" :key="index">
|
||||
<view class="tn-blogger-content__wrap">
|
||||
@@ -182,6 +182,34 @@
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-level">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/home_cur.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-circle tn-shadow-blur">
|
||||
<view class="tn-icon-discover-planet tn-color-white">
|
||||
</view>
|
||||
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
|
||||
</view>
|
||||
<!-- <view class="tn-color-gray">发布</view> -->
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
|
||||
</view> -->
|
||||
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/yellow/me.png'></image>
|
||||
</view>
|
||||
<view class="tn-color-gray">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
@@ -601,4 +629,76 @@
|
||||
}
|
||||
}
|
||||
/* 移动背景部分 end*/
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
// line-height: 50rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: -30rpx auto 20rpx;
|
||||
text-align: center;
|
||||
font-size: 52rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: #FFCA28;
|
||||
width: 90rpx !important;
|
||||
height: 90rpx !important;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(255, 202, 40, 0.5);
|
||||
}
|
||||
|
||||
.tabbar .action .bar-circle image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
margin: 15rpx auto 15rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,238 +0,0 @@
|
||||
<template>
|
||||
<view class="template-browser">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<swiper class="card-swiper" :indicator-dots="true" :circular="true" :autoplay="false" interval="10000"
|
||||
duration="500" @change="cardSwiper" indicator-color="#666" indicator-active-color="#000"
|
||||
|
||||
style="margin-top: 300rpx;">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur swiper-item1--active':'swiper-item1'">
|
||||
<view class="swiper-item image-banner" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
|
||||
<image class="" :src="item.url" v-if="item.type=='image'" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="tn-text-center tn-color-black">
|
||||
测试，未写完
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 底部tabbar start-->
|
||||
<view class="tabbar footerfixed">
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-home-smile tn-color-black">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-black">首页</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-discover tn-color-gray--dark">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark">圈子</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-image-text tn-color-gray--dark">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark">案例</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="bar-icon">
|
||||
<view class="tn-icon-my tn-color-gray--dark">
|
||||
<tn-badge :absolute="true">99+</tn-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-color-gray--dark">我的</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateBrowser',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {
|
||||
cardCur: 0,
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
name: '总有你想不到的创意',
|
||||
text: '海量分享',
|
||||
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d1.png'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
name: '寻找一起成长的小伙伴',
|
||||
text: '愉快玩耍',
|
||||
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg5.jpg',
|
||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d4.png'
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
name: '更多彩蛋等你探索',
|
||||
text: '酷炫多彩',
|
||||
url: 'https://tnuiimage.tnkjapp.com/swiper/fullbg4.jpg',
|
||||
pngurl: 'https://tnuiimage.tnkjapp.com/swiper/c4d5.png'
|
||||
}],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// cardSwiper
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-browser{
|
||||
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
|
||||
}
|
||||
/* 轮播视觉差 start */
|
||||
.card-swiper {
|
||||
height: 500rpx !important;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item {
|
||||
width: 250rpx !important;
|
||||
left: 250rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 100rpx 0rpx 100rpx 0rpx;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item .swiper-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 200rpx;
|
||||
border-radius: 0rpx;
|
||||
transform: translate(0rpx, 0rpx) scale(1.5);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
overflow: hidden;
|
||||
border: 5rpx solid red;
|
||||
}
|
||||
|
||||
.card-swiper swiper-item.cur .swiper-item {
|
||||
transform: translate(0rpx, 0rpx) scale(2);
|
||||
transition: all 0.2s ease-in 0s;
|
||||
border: 5rpx solid pink;
|
||||
}
|
||||
|
||||
.image-banner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.image-banner image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* 轮播指示点 start*/
|
||||
.indication{
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 36rpx;
|
||||
position: absolute;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.spot{
|
||||
background-color: #FFF;
|
||||
opacity: 0.4;
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: 0 8rpx !important;
|
||||
left: -270rpx;
|
||||
top: -180rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spot.active{
|
||||
opacity: 1;
|
||||
width: 30rpx;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.swiper-item1 {
|
||||
z-index: -1;
|
||||
|
||||
&--active {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部tabbar start*/
|
||||
.footerfixed{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 110rpx;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||
}
|
||||
|
||||
.tabbar .action {
|
||||
font-size: 22rpx;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
display: block;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon {
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
margin: 0 auto 10rpx;
|
||||
text-align: center;
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.tabbar .action .bar-icon image {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<view class="template-candle">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
|
||||
<view class="wrapper">
|
||||
<view class="candles">
|
||||
<view class="light__wave"></view>
|
||||
<view class="candle1">
|
||||
<view class="candle1__body">
|
||||
<view class="candle1__eyes">
|
||||
<view class="candle1__eyes-one"></view>
|
||||
<view class="candle1__eyes-two"></view>
|
||||
</view>
|
||||
<view class="candle1__mouth"></view>
|
||||
</view>
|
||||
<view class="candle1__stick"></view>
|
||||
</view>
|
||||
<view class="candle2">
|
||||
<view class="candle2__body">
|
||||
<view class="candle2__eyes">
|
||||
<view class="candle2__eyes-one"></view>
|
||||
<view class="candle2__eyes-two"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="candle2__stick"></view>
|
||||
</view>
|
||||
<view class="candle2__fire"></view>
|
||||
<view class="sparkles-one"></view>
|
||||
<view class="sparkles-two"></view>
|
||||
<view class="candle__smoke-one">
|
||||
</view>
|
||||
<view class="candle__smoke-two">
|
||||
</view>
|
||||
</view>
|
||||
<view class="floor">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="text-shine tn-flex tn-flex-row-center tn-text-xxl tn-text-bold" style="margin-top: 60vh;">
|
||||
敬请期待
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 回到首页悬浮按钮-->
|
||||
<nav-index-button></nav-index-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||
export default {
|
||||
name: 'TemplateCandle',
|
||||
mixins: [template_page_mixin],
|
||||
components: { NavIndexButton },
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 蜡烛 start*/
|
||||
.template-candle{
|
||||
}
|
||||
.wrapper {
|
||||
background: red;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: scale(1.5, 1.5) translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.floor {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 350px;
|
||||
height: 5px;
|
||||
background: #673C63;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0px 2px 5px #111;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.candles {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
transform: translate(-50%, -100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.candle1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 35px;
|
||||
height: 100px;
|
||||
background: #fff;
|
||||
border: 3px solid #673C63;
|
||||
border-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
transform-origin: center right;
|
||||
transform: translate(60%, -25%);
|
||||
box-shadow: -2px 0px 0px #95c6f2 inset;
|
||||
animation: expand-body 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__stick, .candle2__stick {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
width: 3px;
|
||||
height: 15px;
|
||||
background: #673C63;
|
||||
border-radius: 8px;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.candle2__stick {
|
||||
height: 12px;
|
||||
transform-origin: bottom center;
|
||||
animation: stick-animation 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__eyes, .candle2__eyes {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
width: 35px;
|
||||
height: 30px;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
|
||||
.candle1__eyes-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
transform: translate(-70%, 0%);
|
||||
animation: blink-eyes 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__eyes-two {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
top: 20%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
transform: translate(-70%, 0%);
|
||||
animation: blink-eyes 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle1__mouth {
|
||||
position: absolute;
|
||||
left: 40%;
|
||||
top: 20%;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-radius: 20px;
|
||||
background: #673C63;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: uff 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle__smoke-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background: grey;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: move-left 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle__smoke-two {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 40%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 10px;
|
||||
background: grey;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: move-top 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2 {
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
top: 65%;
|
||||
width: 47px;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border: 3px solid #673C63;
|
||||
border-bottom: 0px;
|
||||
border-radius: 3px;
|
||||
transform: translate(60%, -15%);
|
||||
transform-origin: center right;
|
||||
box-shadow: -2px 0px 0px #95c6f2 inset;
|
||||
animation: shake-left 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__eyes-one {
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border: 0px solid #673C63;
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
background: #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
animation: changeto-lower 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__eyes-two {
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
border: 0px solid #673C63;
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
background: #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
animation: changeto-greater 3s infinite linear;
|
||||
}
|
||||
|
||||
.light__wave {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 35%;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 100%;
|
||||
z-index: 0;
|
||||
transform: translate(-25%, -50%) scale(2.5, 2.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
animation: expand-light 3s infinite linear;
|
||||
}
|
||||
|
||||
.candle2__fire {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
background: #FF9800;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: dance-fire 3s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes blink-eyes {
|
||||
0%,35% {
|
||||
opacity: 1;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
36%,39% {
|
||||
opacity: 0;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
50%,65% {
|
||||
transform: translate(-140%, 0%);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-70%, 0%);
|
||||
}
|
||||
}
|
||||
@keyframes expand-body {
|
||||
0%,40% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
45%,55% {
|
||||
transform: scale(1.1, 1.1) translate(60%, -28%);
|
||||
}
|
||||
60% {
|
||||
transform: scale(0.89, 0.89) translate(60%, -25%);
|
||||
}
|
||||
65% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.95, 0.95) translate(60%, -25%);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1, 1) translate(60%, -25%);
|
||||
}
|
||||
}
|
||||
@keyframes uff {
|
||||
0%,40% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
50%,54% {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: 30%;
|
||||
}
|
||||
59% {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
left: 20%;
|
||||
}
|
||||
62% {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
left: 20%;
|
||||
}
|
||||
67% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
left: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move-left {
|
||||
0%,59%,100% {
|
||||
width: 0px;
|
||||
left: 40%;
|
||||
}
|
||||
60% {
|
||||
width: 30px;
|
||||
left: 30%;
|
||||
}
|
||||
68% {
|
||||
width: 0px;
|
||||
left: 20%;
|
||||
}
|
||||
}
|
||||
@keyframes move-top {
|
||||
0%,64%,100% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: 0%;
|
||||
}
|
||||
65% {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
}
|
||||
80% {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: 20%;
|
||||
}
|
||||
}
|
||||
@keyframes shake-left {
|
||||
0%,40% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
50%,54% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
59% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
62% {
|
||||
left: 18%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
65% {
|
||||
left: 21%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
67% {
|
||||
left: 20%;
|
||||
transform: translate(60%, -15%);
|
||||
}
|
||||
75% {
|
||||
left: 20%;
|
||||
transform: scale(1.15, 0.85) translate(60%, -15%);
|
||||
background: #fff;
|
||||
border-color: #673C63;
|
||||
}
|
||||
91% {
|
||||
left: 20%;
|
||||
transform: scale(1.18, 0.82) translate(60%, -10%);
|
||||
background: #F44336;
|
||||
border-color: #F44336;
|
||||
box-shadow: -2px 0px 0px #F44336 inset;
|
||||
}
|
||||
92% {
|
||||
left: 20%;
|
||||
transform: scale(0.85, 1.15) translate(60%, -15%);
|
||||
}
|
||||
95% {
|
||||
left: 20%;
|
||||
transform: scale(1.05, 0.95) translate(60%, -15%);
|
||||
}
|
||||
97% {
|
||||
left: 20%;
|
||||
transform: scale(1, 1) translate(60%, -15%);
|
||||
}
|
||||
}
|
||||
@keyframes stick-animation {
|
||||
0%,40% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
50%,54% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
59% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
62% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(-15deg) translate(-50%, -100%);
|
||||
}
|
||||
65% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(15deg) translate(-50%, -100%);
|
||||
}
|
||||
70% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(-5deg) translate(-50%, -100%);
|
||||
}
|
||||
72% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(5deg) translate(-50%, -100%);
|
||||
}
|
||||
74%,84% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: rotateZ(0deg) translate(-50%, -100%);
|
||||
}
|
||||
85% {
|
||||
transform: rotateZ(180deg) translate(0%, 120%);
|
||||
}
|
||||
92% {
|
||||
left: 50%;
|
||||
top: 0%;
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
}
|
||||
@keyframes expand-light {
|
||||
10%,29%,59%,89% {
|
||||
transform: translate(-25%, -50%) scale(0, 0);
|
||||
border: 2px solid rgba(255, 255, 255, 0);
|
||||
}
|
||||
90%,20%,50% {
|
||||
transform: translate(-25%, -50%) scale(1, 1);
|
||||
}
|
||||
95%,96%,26%,27%,56%,57% {
|
||||
transform: translate(-25%, -50%) scale(2, 2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
0%,28%,58%,100% {
|
||||
transform: translate(-25%, -50%) scale(2.5, 2.5);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
@keyframes dance-fire {
|
||||
59%,89% {
|
||||
left: 40%;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
90%,0%,7%,15%,23%,31%,39%,47%,55% {
|
||||
left: 40.8%;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
background: #FFC107;
|
||||
}
|
||||
94%,3%,11%,19%,27%,35%,43%,51%,58% {
|
||||
left: 41.2%;
|
||||
width: 16px;
|
||||
height: 20px;
|
||||
background: #FF9800;
|
||||
}
|
||||
}
|
||||
@keyframes changeto-lower {
|
||||
0%,70%,90% {
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
border-width: 0 0 0 0;
|
||||
border: 0px solid #673C63;
|
||||
transform: translate(-90%, 0%);
|
||||
}
|
||||
71%,89% {
|
||||
background: none;
|
||||
border: solid #673C63;
|
||||
border-radius: 0px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(-45deg) translate(-50%, -65%);
|
||||
-webkit-transform: rotate(-45deg) translate(-50%, -65%);
|
||||
}
|
||||
}
|
||||
@keyframes changeto-greater {
|
||||
0%,70%,90% {
|
||||
top: 50%;
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
background: #673C63;
|
||||
border-width: 0 0 0 0;
|
||||
border: 0px solid #673C63;
|
||||
transform: translate(-80%, 0%);
|
||||
}
|
||||
71%,89% {
|
||||
top: 30%;
|
||||
background: none;
|
||||
border: solid #673C63;
|
||||
border-radius: 0px;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(135deg) translate(-80%, 20%);
|
||||
-webkit-transform: rotate(135deg) translate(-80%, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
/*敬请期待 start*/
|
||||
.text-shine {
|
||||
background: linear-gradient(to right, #080808 0, #fff 10%, #080808 20%);
|
||||
background-position: 0;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shine 4s infinite linear;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-text-size-adjust: none;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@-moz-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@-o-keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
60% {
|
||||
background-position: 280px;
|
||||
}
|
||||
100% {
|
||||
background-position: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<view class="components-pano">
|
||||
<!-- <web-view src="https://j4zgq9xbby.720yun.com/t/98vkswdwr8y"></web-view> -->
|
||||
<web-view src="https://vr.he29.com/v3/tour/index?id=3095"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -18,10 +18,14 @@
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">图鸟UI Plus会员，初步定价</view>
|
||||
<view class="tn-text-bold">
|
||||
<text class="tn-text-xl-xxl">699￥ / </text>
|
||||
<text class="tn-text-xl-xxl">399￥</text>
|
||||
<text class="tn-text-xl" style="">699￥</text>
|
||||
<!-- 为什么不用text-decoration 因为这里面加了骚操作，不生效，你试试就知道了吖-->
|
||||
<text class="" style="margin: -10rpx 10rpx 0 -115rpx;">————</text>
|
||||
<text class="tn-text-xl-xxl"> / </text>
|
||||
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
|
||||
</view>
|
||||
<view class="tn-margin-bottom-xl">（大约等于两个前端页面价格）</view>
|
||||
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
@@ -53,7 +57,7 @@
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">也希望大家能喜欢这个项目</view>
|
||||
<view class="tn-margin-bottom-xl">（不喜勿喷，东东还在努力成长）</view>
|
||||
<view class="tn-margin-bottom-xl">（不喜勿喷，北北还在努力成长）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
@@ -70,32 +74,34 @@
|
||||
<view class="tn-text-bold">项目正式开始于2021年10月，于12月30上线</view>
|
||||
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">灵感来源于我的上一个原创项目</view>
|
||||
<view class="tn-margin-bottom-xl">（项目初衷是拓展业务，寻求商务合作）</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">感恩你的支持</view>
|
||||
<view class="tn-text-bold">会员特权</view>
|
||||
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
|
||||
<view class="">②优先响应会员页面模板需求，icon需求</view>
|
||||
<view class="">③会员版本更新，在会员群进行代码发送</view>
|
||||
<view class="tn-margin-bottom-xl">④有什么好的建议，可以提出来，多沟通</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">关于作者</view>
|
||||
<view class="">蔡北北，95年，广州</view>
|
||||
<view class="">浮夸UI设计</view>
|
||||
<view class="">菜鸡软件开发</view>
|
||||
<view class="">祭天产品经理</view>
|
||||
<view class="">背锅项目经理</view>
|
||||
<view class="tn-margin-bottom-xl">努力往CTO去发展</view>
|
||||
</view>
|
||||
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">北北感恩你的支持</view>
|
||||
<view class="tn-margin-bottom-xl"></view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
<view class="plus-text">
|
||||
<view class="tn-text-bold">待补充....</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
@@ -162,5 +168,4 @@
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
<!-- 验证码倒计时 -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
uniqueKey="login-demo-1"
|
||||
uniqueKey="login-demo-2"
|
||||
:seconds="60"
|
||||
@change="codeChange">
|
||||
</tn-verification-code>
|
||||
|
||||
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<view class="template-login">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="login">
|
||||
<!-- 顶部背景图片-->
|
||||
<view class="login__bg login__bg--top">
|
||||
<image class="bg" src="https://tnuiimage.tnkjapp.com/swiper/banner-animate2.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
|
||||
<view class="login__wrapper">
|
||||
<!-- 登录/注册切换 -->
|
||||
<view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
|
||||
登录
|
||||
</view>
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
|
||||
注册
|
||||
</view>
|
||||
|
||||
<!-- 滑块-->
|
||||
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
|
||||
</view>
|
||||
|
||||
<!-- 输入框内容-->
|
||||
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<!-- 登录 -->
|
||||
<block v-if="currentModeIndex === 0">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入登录手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-lock"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
|
||||
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 注册 -->
|
||||
<block v-if="currentModeIndex === 1">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-code"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-lock"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
|
||||
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
|
||||
|
||||
<view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他登录方式 -->
|
||||
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
|
||||
<view class="tn-icon-wechat-fill"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
|
||||
<view class="tn-icon-sina"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
|
||||
<view class="tn-icon-qq"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 验证码倒计时 -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
uniqueKey="login-demo-3"
|
||||
:seconds="60"
|
||||
@change="codeChange">
|
||||
</tn-verification-code>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'login-demo-3',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
// 当前选中的模式
|
||||
currentModeIndex: 0,
|
||||
// 模式选中滑块
|
||||
modeSliderStyle: {
|
||||
left: 0
|
||||
},
|
||||
// 是否显示密码
|
||||
showPassword: false,
|
||||
// 倒计时提示文字
|
||||
tips: '获取验证码'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentModeIndex(value) {
|
||||
const sliderWidth = uni.upx2px(476 / 2)
|
||||
this.modeSliderStyle.left = `${sliderWidth * value}px`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换模式
|
||||
modeSwitch(index) {
|
||||
this.currentModeIndex = index
|
||||
this.showPassword = false
|
||||
},
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.$refs.code.canGetCode) {
|
||||
this.$t.messageUtils.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.$t.messageUtils.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
|
||||
}
|
||||
},
|
||||
// 获取验证码倒计时被修改
|
||||
codeChange(event) {
|
||||
this.tips = event
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 悬浮 */
|
||||
.login-sussuspension{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translate(0 , 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(0rem , 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
/* 背景图片 start */
|
||||
&__bg {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
/* &--bottom {
|
||||
bottom: -10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
} */
|
||||
}
|
||||
/* 背景图片 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__wrapper {
|
||||
margin-top: 403rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 切换 start */
|
||||
&__mode {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 476rpx;
|
||||
height: 77rpx;
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__item {
|
||||
height: 77rpx;
|
||||
width: 100%;
|
||||
line-height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
z-index: 2;
|
||||
transition: all 0.4s;
|
||||
|
||||
&--active {
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
&__slider {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: calc(476rpx / 2);
|
||||
border-radius: inherit;
|
||||
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
|
||||
z-index: 1;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
/* 切换 end */
|
||||
|
||||
/* 登录注册信息 start */
|
||||
&__info {
|
||||
margin: 0 30rpx;
|
||||
margin-top: 105rpx;
|
||||
padding: 30rpx 51rpx;
|
||||
padding-bottom: 0;
|
||||
border-radius: 20rpx;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
|
||||
&__item {
|
||||
|
||||
&__input {
|
||||
margin-top: 59rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
border: 1rpx solid #E6E6E6;
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__left-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 80%;
|
||||
padding-left: 10rpx;
|
||||
|
||||
&--verify-code {
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 24rpx;
|
||||
// letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
&__right-verify-code {
|
||||
width: 34%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 75rpx;
|
||||
margin-bottom: 39rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
font-weight: bold;
|
||||
line-height: 77rpx;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
border-radius: 39rpx;
|
||||
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
|
||||
}
|
||||
|
||||
&__tips {
|
||||
margin: 30rpx 0;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录注册信息 end */
|
||||
|
||||
/* 登录方式切换 start */
|
||||
&__way {
|
||||
margin: 0 auto;
|
||||
margin-top: 110rpx;
|
||||
|
||||
&__item {
|
||||
&--icon {
|
||||
width: 77rpx;
|
||||
height: 77rpx;
|
||||
font-size: 50rpx;
|
||||
border-radius: 100rpx;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录方式切换 end */
|
||||
/* 内容 end */
|
||||
|
||||
}
|
||||
|
||||
/deep/.input-placeholder {
|
||||
font-size: 24rpx;
|
||||
color: #E6E6E6;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<view class="template-login">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="login">
|
||||
<!-- 顶部背景图片-->
|
||||
<view class="login__bg login__bg--top">
|
||||
<image class="bg" src="https://tnuiimage.tnkjapp.com/login/2/login-top2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<view class="login__wrapper">
|
||||
<view class="tn-margin-left tn-margin-right tn-text-bold" style="font-size: 60rpx;">
|
||||
欢迎回来
|
||||
</view>
|
||||
<view class="tn-margin tn-color-gray--disabled tn-text-lg">
|
||||
你是不是傻，菜的一撇的北北
|
||||
</view>
|
||||
|
||||
<!-- 登录/注册切换 -->
|
||||
<!-- <view class="login-sussuspension login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
|
||||
登录
|
||||
</view>
|
||||
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
|
||||
注册
|
||||
</view>
|
||||
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
|
||||
</view> -->
|
||||
|
||||
<!-- 输入框内容-->
|
||||
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||
<!-- 登录 -->
|
||||
<block v-if="currentModeIndex === 0">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-safe"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 注册 -->
|
||||
<block v-if="currentModeIndex === 1">
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-phone"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-safe"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content login__info__item__input__content--verify-code">
|
||||
<input placeholder-class="input-placeholder" placeholder="请输入验证码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
|
||||
<tn-button size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
||||
<view class="login__info__item__input__left-icon">
|
||||
<view class="tn-icon-lock"></view>
|
||||
</view>
|
||||
<view class="login__info__item__input__content">
|
||||
<input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
|
||||
</view>
|
||||
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
|
||||
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
|
||||
|
||||
|
||||
<view v-if="currentModeIndex === 1" :class="[{'login__info__item__tips': currentModeIndex === 0}]">
|
||||
<view class="tn-flex tn-flex-row-between tn-padding">
|
||||
<view class="" @tap.stop="modeSwitch(0)">前往登录</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="currentModeIndex === 0" :class="[{'login__info__item__tips': currentModeIndex === 1}]">
|
||||
<view class="tn-flex tn-flex-row-between tn-padding">
|
||||
<view class="tn-padding-right" @tap.stop="modeSwitch(1)">账号注册</view>
|
||||
<view class="tn-padding-left tn-color-gray">忘记密码</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 其他登录方式 -->
|
||||
<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-teal--dark">
|
||||
<view class="tn-icon-wechat-fill"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-red">
|
||||
<view class="tn-icon-sina"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-padding-sm tn-margin-xs">
|
||||
<view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-color-blue">
|
||||
<view class="tn-icon-qq"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部背景图片-->
|
||||
<view class="login__bg login__bg--bottom">
|
||||
<image src="https://tnuiimage.tnkjapp.com/login/2/login-bottom2.png" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 验证码倒计时 -->
|
||||
<tn-verification-code
|
||||
ref="code"
|
||||
uniqueKey="login-demo-4"
|
||||
:seconds="60"
|
||||
@change="codeChange">
|
||||
</tn-verification-code>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'login-demo-4',
|
||||
mixins: [template_page_mixin],
|
||||
data() {
|
||||
return {
|
||||
// 当前选中的模式
|
||||
currentModeIndex: 0,
|
||||
// 模式选中滑块
|
||||
modeSliderStyle: {
|
||||
left: 0
|
||||
},
|
||||
// 是否显示密码
|
||||
showPassword: false,
|
||||
// 倒计时提示文字
|
||||
tips: '获取验证码'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentModeIndex(value) {
|
||||
const sliderWidth = uni.upx2px(476 / 2)
|
||||
this.modeSliderStyle.left = `${sliderWidth * value}px`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换模式
|
||||
modeSwitch(index) {
|
||||
this.currentModeIndex = index
|
||||
this.showPassword = false
|
||||
},
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.$refs.code.canGetCode) {
|
||||
this.$t.messageUtils.loading('正在获取验证码')
|
||||
setTimeout(() => {
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.$t.messageUtils.toast('验证码已经发送')
|
||||
// 通知组件开始计时
|
||||
this.$refs.code.start()
|
||||
}, 2000)
|
||||
} else {
|
||||
this.$t.messageUtils.toast(this.$refs.code.secNum + '秒后再重试')
|
||||
}
|
||||
},
|
||||
// 获取验证码倒计时被修改
|
||||
codeChange(event) {
|
||||
this.tips = event
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
/* 悬浮 */
|
||||
/* .login-sussuspension{
|
||||
animation: suspension 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes suspension {
|
||||
0%, 100% {
|
||||
transform: translate(0 , 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(0rem , 1rem);
|
||||
}
|
||||
} */
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
|
||||
/* 背景图片 start */
|
||||
&__bg {
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
|
||||
&--top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
|
||||
.bg {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
bottom: -10rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
// height: 144px;
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
image {
|
||||
width: 750rpx;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 背景图片 end */
|
||||
|
||||
/* 内容 start */
|
||||
&__wrapper {
|
||||
margin-top: 300rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 切换 start */
|
||||
&__mode {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 476rpx;
|
||||
height: 77rpx;
|
||||
margin-top: 100rpx;
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__item {
|
||||
height: 77rpx;
|
||||
width: 100%;
|
||||
line-height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
color: #080808;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
z-index: 2;
|
||||
transition: all 0.4s;
|
||||
|
||||
&--active {
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
&__slider {
|
||||
position: absolute;
|
||||
height: inherit;
|
||||
width: calc(476rpx / 2);
|
||||
border-radius: inherit;
|
||||
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
|
||||
z-index: 1;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
}
|
||||
/* 切换 end */
|
||||
|
||||
/* 登录注册信息 start */
|
||||
&__info {
|
||||
margin: 80rpx 30rpx 10rpx 30rpx;
|
||||
padding-bottom: 0;
|
||||
border-radius: 20rpx;
|
||||
|
||||
&__item {
|
||||
|
||||
&__input {
|
||||
margin-top: 59rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
border: 1rpx solid #E6E6E6;
|
||||
border-radius: 39rpx;
|
||||
|
||||
&__left-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-left: 20rpx;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 80%;
|
||||
padding-left: 10rpx;
|
||||
|
||||
&--verify-code {
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 24rpx;
|
||||
// letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
width: 10%;
|
||||
font-size: 44rpx;
|
||||
margin-right: 20rpx;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
&__right-verify-code {
|
||||
width: 34%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 75rpx;
|
||||
margin-bottom: 39rpx;
|
||||
width: 100%;
|
||||
height: 77rpx;
|
||||
text-align: center;
|
||||
font-size: 31rpx;
|
||||
font-weight: bold;
|
||||
line-height: 77rpx;
|
||||
letter-spacing: 1em;
|
||||
text-indent: 1em;
|
||||
border-radius: 39rpx;
|
||||
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
|
||||
}
|
||||
|
||||
&__tips {
|
||||
margin: 30rpx 0;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录注册信息 end */
|
||||
|
||||
/* 登录方式切换 start */
|
||||
&__way {
|
||||
margin: 0 auto;
|
||||
margin-top: 110rpx;
|
||||
|
||||
&__item {
|
||||
&--icon {
|
||||
width: 85rpx;
|
||||
height: 85rpx;
|
||||
font-size: 80rpx;
|
||||
// border-radius: 100rpx;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// &::after {
|
||||
// content: " ";
|
||||
// position: absolute;
|
||||
// z-index: -1;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// left: 0;
|
||||
// bottom: 0;
|
||||
// border-radius: inherit;
|
||||
// opacity: 1;
|
||||
// transform: scale(1, 1);
|
||||
// background-size: 100% 100%;
|
||||
// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 登录方式切换 end */
|
||||
/* 内容 end */
|
||||
|
||||
}
|
||||
|
||||
/deep/.input-placeholder {
|
||||
font-size: 24rpx;
|
||||
color: #838383;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,874 @@
|
||||
<template>
|
||||
<view class="template-clock">
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed alpha customBack>
|
||||
<view slot="back" class='tn-custom-nav-bar__back'
|
||||
@click="goBack">
|
||||
<text class='icon tn-icon-left'></text>
|
||||
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||
</view>
|
||||
</tn-nav-bar>
|
||||
<view class="clock">
|
||||
<view class="clock__hand clock__hand--hr"></view>
|
||||
<view class="clock__hand clock__hand--min"></view>
|
||||
<view class="clock__hand clock__hand--sec"></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||
export default {
|
||||
name: 'TemplateClock',
|
||||
mixins: [template_page_mixin],
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||
.template-clock{
|
||||
// background: linear-gradient(#e3e4e8, #abafba);
|
||||
}
|
||||
/* 时钟 start*/
|
||||
|
||||
/* * {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*/
|
||||
/* :root {
|
||||
--bg: linear-gradient(#e3e4e8, #abafba);
|
||||
|
||||
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
|
||||
} */
|
||||
|
||||
/* body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font: 1em/1.5 sans-serif;
|
||||
height: 100vh;
|
||||
min-height: 480px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
} */
|
||||
|
||||
.clock {
|
||||
margin: 20% auto;
|
||||
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
width: 16em;
|
||||
height: 16em;
|
||||
}
|
||||
.clock, .clock:before, .clock:after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.clock:before, .clock:after, .clock__hand {
|
||||
position: absolute;
|
||||
}
|
||||
.clock:before, .clock:after {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.clock:before {
|
||||
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1);
|
||||
top: 2.5em;
|
||||
left: 2.5em;
|
||||
width: 11em;
|
||||
height: 11em;
|
||||
}
|
||||
.clock:after {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
|
||||
top: calc(50% - 0.5em);
|
||||
left: calc(50% - 0.5em);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
.clock__hand {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
bottom: 50%;
|
||||
transform-origin: 50% 100%;
|
||||
transform: rotate(0) translateY(-1.25em);
|
||||
}
|
||||
.clock__hand--hr {
|
||||
animation: shortHand 86400s linear infinite;
|
||||
background: #255ff4;;
|
||||
border-radius: 0.5em;
|
||||
left: calc(50% - 0.5em);
|
||||
width: 1em;
|
||||
height: 3.2em;
|
||||
}
|
||||
.clock__hand--min {
|
||||
animation: longHand 3600s linear infinite;
|
||||
background: #5583f6;
|
||||
border-radius: 0.4em;
|
||||
left: calc(50% - 0.4em);
|
||||
width: 0.8em;
|
||||
height: 3.6em;
|
||||
}
|
||||
.clock__hand--sec {
|
||||
animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
|
||||
background: #17181c;
|
||||
border-radius: 0.3em;
|
||||
left: calc(50% - 0.3em);
|
||||
width: 0.6em;
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
|
||||
.clock {
|
||||
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.clock:before {
|
||||
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.clock:after {
|
||||
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
/* Animations */
|
||||
@keyframes shortHand {
|
||||
0% {
|
||||
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(0deg) translateY(-1.25em);
|
||||
}
|
||||
0.83% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(6deg) translateY(-1.25em);
|
||||
}
|
||||
1.67% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(12deg) translateY(-1.25em);
|
||||
}
|
||||
2.5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(18deg) translateY(-1.25em);
|
||||
}
|
||||
3.33% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(24deg) translateY(-1.25em);
|
||||
}
|
||||
4.17% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(30deg) translateY(-1.25em);
|
||||
}
|
||||
5% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(36deg) translateY(-1.25em);
|
||||
}
|
||||
5.83% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(42deg) translateY(-1.25em);
|
||||
}
|
||||
6.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(48deg) translateY(-1.25em);
|
||||
}
|
||||
7.5% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(54deg) translateY(-1.25em);
|
||||
}
|
||||
8.33% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(60deg) translateY(-1.25em);
|
||||
}
|
||||
9.17% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(66deg) translateY(-1.25em);
|
||||
}
|
||||
10% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(72deg) translateY(-1.25em);
|
||||
}
|
||||
10.83% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(78deg) translateY(-1.25em);
|
||||
}
|
||||
11.67% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(84deg) translateY(-1.25em);
|
||||
}
|
||||
12.5% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(90deg) translateY(-1.25em);
|
||||
}
|
||||
13.33% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(96deg) translateY(-1.25em);
|
||||
}
|
||||
14.17% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(102deg) translateY(-1.25em);
|
||||
}
|
||||
15% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(108deg) translateY(-1.25em);
|
||||
}
|
||||
15.83% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(114deg) translateY(-1.25em);
|
||||
}
|
||||
16.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(120deg) translateY(-1.25em);
|
||||
}
|
||||
17.5% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(126deg) translateY(-1.25em);
|
||||
}
|
||||
18.33% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(132deg) translateY(-1.25em);
|
||||
}
|
||||
19.17% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(138deg) translateY(-1.25em);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(144deg) translateY(-1.25em);
|
||||
}
|
||||
20.83% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(150deg) translateY(-1.25em);
|
||||
}
|
||||
21.67% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(156deg) translateY(-1.25em);
|
||||
}
|
||||
22.5% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(162deg) translateY(-1.25em);
|
||||
}
|
||||
23.33% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(168deg) translateY(-1.25em);
|
||||
}
|
||||
24.17% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(174deg) translateY(-1.25em);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(180deg) translateY(-1.25em);
|
||||
}
|
||||
25.83% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(186deg) translateY(-1.25em);
|
||||
}
|
||||
26.67% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(192deg) translateY(-1.25em);
|
||||
}
|
||||
27.5% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(198deg) translateY(-1.25em);
|
||||
}
|
||||
28.33% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(204deg) translateY(-1.25em);
|
||||
}
|
||||
29.17% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(210deg) translateY(-1.25em);
|
||||
}
|
||||
30% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(216deg) translateY(-1.25em);
|
||||
}
|
||||
30.83% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(222deg) translateY(-1.25em);
|
||||
}
|
||||
31.67% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(228deg) translateY(-1.25em);
|
||||
}
|
||||
32.5% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(234deg) translateY(-1.25em);
|
||||
}
|
||||
33.33% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(240deg) translateY(-1.25em);
|
||||
}
|
||||
34.17% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(246deg) translateY(-1.25em);
|
||||
}
|
||||
35% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(252deg) translateY(-1.25em);
|
||||
}
|
||||
35.83% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(258deg) translateY(-1.25em);
|
||||
}
|
||||
36.67% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(264deg) translateY(-1.25em);
|
||||
}
|
||||
37.5% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(270deg) translateY(-1.25em);
|
||||
}
|
||||
38.33% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(276deg) translateY(-1.25em);
|
||||
}
|
||||
39.17% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(282deg) translateY(-1.25em);
|
||||
}
|
||||
40% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(288deg) translateY(-1.25em);
|
||||
}
|
||||
40.83% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(294deg) translateY(-1.25em);
|
||||
}
|
||||
41.67% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(300deg) translateY(-1.25em);
|
||||
}
|
||||
42.5% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(306deg) translateY(-1.25em);
|
||||
}
|
||||
43.33% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(312deg) translateY(-1.25em);
|
||||
}
|
||||
44.17% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(318deg) translateY(-1.25em);
|
||||
}
|
||||
45% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(324deg) translateY(-1.25em);
|
||||
}
|
||||
45.83% {
|
||||
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(330deg) translateY(-1.25em);
|
||||
}
|
||||
46.67% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(336deg) translateY(-1.25em);
|
||||
}
|
||||
47.5% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(342deg) translateY(-1.25em);
|
||||
}
|
||||
48.33% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(348deg) translateY(-1.25em);
|
||||
}
|
||||
49.17% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(354deg) translateY(-1.25em);
|
||||
}
|
||||
50% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(360deg) translateY(-1.25em);
|
||||
}
|
||||
50.83% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(366deg) translateY(-1.25em);
|
||||
}
|
||||
51.67% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(372deg) translateY(-1.25em);
|
||||
}
|
||||
52.5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(378deg) translateY(-1.25em);
|
||||
}
|
||||
53.33% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(384deg) translateY(-1.25em);
|
||||
}
|
||||
54.17% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(390deg) translateY(-1.25em);
|
||||
}
|
||||
55% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(396deg) translateY(-1.25em);
|
||||
}
|
||||
55.83% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(402deg) translateY(-1.25em);
|
||||
}
|
||||
56.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(408deg) translateY(-1.25em);
|
||||
}
|
||||
57.5% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(414deg) translateY(-1.25em);
|
||||
}
|
||||
58.33% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(420deg) translateY(-1.25em);
|
||||
}
|
||||
59.17% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(426deg) translateY(-1.25em);
|
||||
}
|
||||
60% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(432deg) translateY(-1.25em);
|
||||
}
|
||||
60.83% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(438deg) translateY(-1.25em);
|
||||
}
|
||||
61.67% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(444deg) translateY(-1.25em);
|
||||
}
|
||||
62.5% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(450deg) translateY(-1.25em);
|
||||
}
|
||||
63.33% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(456deg) translateY(-1.25em);
|
||||
}
|
||||
64.17% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(462deg) translateY(-1.25em);
|
||||
}
|
||||
65% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(468deg) translateY(-1.25em);
|
||||
}
|
||||
65.83% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(474deg) translateY(-1.25em);
|
||||
}
|
||||
66.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(480deg) translateY(-1.25em);
|
||||
}
|
||||
67.5% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(486deg) translateY(-1.25em);
|
||||
}
|
||||
68.33% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(492deg) translateY(-1.25em);
|
||||
}
|
||||
69.17% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(498deg) translateY(-1.25em);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(504deg) translateY(-1.25em);
|
||||
}
|
||||
70.83% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(510deg) translateY(-1.25em);
|
||||
}
|
||||
71.67% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(516deg) translateY(-1.25em);
|
||||
}
|
||||
72.5% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(522deg) translateY(-1.25em);
|
||||
}
|
||||
73.33% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(528deg) translateY(-1.25em);
|
||||
}
|
||||
74.17% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(534deg) translateY(-1.25em);
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(540deg) translateY(-1.25em);
|
||||
}
|
||||
75.83% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(546deg) translateY(-1.25em);
|
||||
}
|
||||
76.67% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(552deg) translateY(-1.25em);
|
||||
}
|
||||
77.5% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(558deg) translateY(-1.25em);
|
||||
}
|
||||
78.33% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(564deg) translateY(-1.25em);
|
||||
}
|
||||
79.17% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(570deg) translateY(-1.25em);
|
||||
}
|
||||
80% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(576deg) translateY(-1.25em);
|
||||
}
|
||||
80.83% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(582deg) translateY(-1.25em);
|
||||
}
|
||||
81.67% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(588deg) translateY(-1.25em);
|
||||
}
|
||||
82.5% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(594deg) translateY(-1.25em);
|
||||
}
|
||||
83.33% {
|
||||
box-shadow: -0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(600deg) translateY(-1.25em);
|
||||
}
|
||||
84.17% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(606deg) translateY(-1.25em);
|
||||
}
|
||||
85% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(612deg) translateY(-1.25em);
|
||||
}
|
||||
85.83% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(618deg) translateY(-1.25em);
|
||||
}
|
||||
86.67% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(624deg) translateY(-1.25em);
|
||||
}
|
||||
87.5% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(630deg) translateY(-1.25em);
|
||||
}
|
||||
88.33% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(636deg) translateY(-1.25em);
|
||||
}
|
||||
89.17% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(642deg) translateY(-1.25em);
|
||||
}
|
||||
90% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(648deg) translateY(-1.25em);
|
||||
}
|
||||
90.83% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(654deg) translateY(-1.25em);
|
||||
}
|
||||
91.67% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(660deg) translateY(-1.25em);
|
||||
}
|
||||
92.5% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(666deg) translateY(-1.25em);
|
||||
}
|
||||
93.33% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(672deg) translateY(-1.25em);
|
||||
}
|
||||
94.17% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(678deg) translateY(-1.25em);
|
||||
}
|
||||
95% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(684deg) translateY(-1.25em);
|
||||
}
|
||||
95.83% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(690deg) translateY(-1.25em);
|
||||
}
|
||||
96.67% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(696deg) translateY(-1.25em);
|
||||
}
|
||||
97.5% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(702deg) translateY(-1.25em);
|
||||
}
|
||||
98.33% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(708deg) translateY(-1.25em);
|
||||
}
|
||||
99.17% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(714deg) translateY(-1.25em);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(720deg) translateY(-1.25em);
|
||||
}
|
||||
}
|
||||
@keyframes longHand {
|
||||
0% {
|
||||
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(0deg) translateY(-1.25em);
|
||||
}
|
||||
1.67% {
|
||||
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(6deg) translateY(-1.25em);
|
||||
}
|
||||
3.33% {
|
||||
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(12deg) translateY(-1.25em);
|
||||
}
|
||||
5% {
|
||||
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(18deg) translateY(-1.25em);
|
||||
}
|
||||
6.67% {
|
||||
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(24deg) translateY(-1.25em);
|
||||
}
|
||||
8.33% {
|
||||
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(30deg) translateY(-1.25em);
|
||||
}
|
||||
10% {
|
||||
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(36deg) translateY(-1.25em);
|
||||
}
|
||||
11.67% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(42deg) translateY(-1.25em);
|
||||
}
|
||||
13.33% {
|
||||
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(48deg) translateY(-1.25em);
|
||||
}
|
||||
15% {
|
||||
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(54deg) translateY(-1.25em);
|
||||
}
|
||||
16.67% {
|
||||
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(60deg) translateY(-1.25em);
|
||||
}
|
||||
18.33% {
|
||||
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(66deg) translateY(-1.25em);
|
||||
}
|
||||
20% {
|
||||
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(72deg) translateY(-1.25em);
|
||||
}
|
||||
21.67% {
|
||||
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(78deg) translateY(-1.25em);
|
||||
}
|
||||
23.33% {
|
||||
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(84deg) translateY(-1.25em);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(90deg) translateY(-1.25em);
|
||||
}
|
||||
26.67% {
|
||||
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(96deg) translateY(-1.25em);
|
||||
}
|
||||
28.33% {
|
||||
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(102deg) translateY(-1.25em);
|
||||
}
|
||||
30% {
|
||||
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(108deg) translateY(-1.25em);
|
||||
}
|
||||
31.67% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(114deg) translateY(-1.25em);
|
||||
}
|
||||
33.33% {
|
||||
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(120deg) translateY(-1.25em);
|
||||
}
|
||||
35% {
|
||||
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(126deg) translateY(-1.25em);
|
||||
}
|
||||
36.67% {
|
||||
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(132deg) translateY(-1.25em);
|
||||
}
|
||||
38.33% {
|
||||
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(138deg) translateY(-1.25em);
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(144deg) translateY(-1.25em);
|
||||
}
|
||||
41.67% {
|
||||
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(150deg) translateY(-1.25em);
|
||||
}
|
||||
43.33% {
|
||||
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(156deg) translateY(-1.25em);
|
||||
}
|
||||
45% {
|
||||
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(162deg) translateY(-1.25em);
|
||||
}
|
||||
46.67% {
|
||||
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(168deg) translateY(-1.25em);
|
||||
}
|
||||
48.33% {
|
||||
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(174deg) translateY(-1.25em);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(180deg) translateY(-1.25em);
|
||||
}
|
||||
51.67% {
|
||||
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(186deg) translateY(-1.25em);
|
||||
}
|
||||
53.33% {
|
||||
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(192deg) translateY(-1.25em);
|
||||
}
|
||||
55% {
|
||||
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(198deg) translateY(-1.25em);
|
||||
}
|
||||
56.67% {
|
||||
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(204deg) translateY(-1.25em);
|
||||
}
|
||||
58.33% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(210deg) translateY(-1.25em);
|
||||
}
|
||||
60% {
|
||||
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(216deg) translateY(-1.25em);
|
||||
}
|
||||
61.67% {
|
||||
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(222deg) translateY(-1.25em);
|
||||
}
|
||||
63.33% {
|
||||
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(228deg) translateY(-1.25em);
|
||||
}
|
||||
65% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(234deg) translateY(-1.25em);
|
||||
}
|
||||
66.67% {
|
||||
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(240deg) translateY(-1.25em);
|
||||
}
|
||||
68.33% {
|
||||
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(246deg) translateY(-1.25em);
|
||||
}
|
||||
70% {
|
||||
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(252deg) translateY(-1.25em);
|
||||
}
|
||||
71.67% {
|
||||
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(258deg) translateY(-1.25em);
|
||||
}
|
||||
73.33% {
|
||||
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(264deg) translateY(-1.25em);
|
||||
}
|
||||
75% {
|
||||
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(270deg) translateY(-1.25em);
|
||||
}
|
||||
76.67% {
|
||||
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(276deg) translateY(-1.25em);
|
||||
}
|
||||
78.33% {
|
||||
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(282deg) translateY(-1.25em);
|
||||
}
|
||||
80% {
|
||||
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(288deg) translateY(-1.25em);
|
||||
}
|
||||
81.67% {
|
||||
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(294deg) translateY(-1.25em);
|
||||
}
|
||||
83.33% {
|
||||
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(300deg) translateY(-1.25em);
|
||||
}
|
||||
85% {
|
||||
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(306deg) translateY(-1.25em);
|
||||
}
|
||||
86.67% {
|
||||
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(312deg) translateY(-1.25em);
|
||||
}
|
||||
88.33% {
|
||||
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(318deg) translateY(-1.25em);
|
||||
}
|
||||
90% {
|
||||
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(324deg) translateY(-1.25em);
|
||||
}
|
||||
91.67% {
|
||||
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(330deg) translateY(-1.25em);
|
||||
}
|
||||
93.33% {
|
||||
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(336deg) translateY(-1.25em);
|
||||
}
|
||||
95% {
|
||||
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(342deg) translateY(-1.25em);
|
||||
}
|
||||
96.67% {
|
||||
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(348deg) translateY(-1.25em);
|
||||
}
|
||||
98.33% {
|
||||
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(354deg) translateY(-1.25em);
|
||||
}
|
||||
100% {
|
||||
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
|
||||
transform: rotate(360deg) translateY(-1.25em);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view class="tn-avatar-group-class tn-avatar-group">
|
||||
<view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle]">
|
||||
<view v-for="(item, index) in lists" :key="index" class="tn-avatar-group__item" :style="[itemStyle(index)]">
|
||||
<tn-avatar
|
||||
:src="item.src || ''"
|
||||
:text="item.text || ''"
|
||||
@@ -54,24 +54,26 @@
|
||||
},
|
||||
computed: {
|
||||
itemStyle() {
|
||||
let style = {}
|
||||
if (this._checkSizeIsInline()) {
|
||||
switch(this.size) {
|
||||
case 'sm':
|
||||
style.marginLeft = `${-48 * this.gap}rpx`
|
||||
break
|
||||
case 'lg':
|
||||
style.marginLeft = `${-96 * this.gap}rpx`
|
||||
break
|
||||
case 'xl':
|
||||
style.marginLeft = `${-128 * this.gap}rpx`
|
||||
break
|
||||
return (index) => {
|
||||
let style = {}
|
||||
if (this._checkSizeIsInline()) {
|
||||
switch(this.size) {
|
||||
case 'sm':
|
||||
style.marginLeft = index != 0 ? `${-48 * this.gap}rpx` : ''
|
||||
break
|
||||
case 'lg':
|
||||
style.marginLeft = index != 0 ? `${-96 * this.gap}rpx` : ''
|
||||
break
|
||||
case 'xl':
|
||||
style.marginLeft = index != 0 ? `${-128 * this.gap}rpx` : ''
|
||||
break
|
||||
}
|
||||
} else {
|
||||
const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
|
||||
style.marginLeft = index != 0 ? `-${size * this.gap}rpx` : ''
|
||||
}
|
||||
} else {
|
||||
const size = Number(this.size.replace(/(px|rpx)/g, '')) || 64
|
||||
style.marginLeft = `-${size * this.gap}rpx`
|
||||
return style
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
// 设置显示角标后，角标大小
|
||||
badgeSize: {
|
||||
type: Number,
|
||||
default: 28
|
||||
default: 0
|
||||
},
|
||||
// 角标背景颜色
|
||||
badgeBgColor: {
|
||||
@@ -226,7 +226,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $tn-font-holder-color;
|
||||
color: #FFFFFF;
|
||||
// color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
width: 64rpx;
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
// 外边距
|
||||
margin: {
|
||||
type: String,
|
||||
default: '0'
|
||||
default: ''
|
||||
},
|
||||
// 是否为一个点
|
||||
dot: {
|
||||
@@ -52,12 +52,12 @@
|
||||
// top
|
||||
top: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
default: ''
|
||||
},
|
||||
// right
|
||||
right: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
default: ''
|
||||
},
|
||||
// 居中 对齐右上角
|
||||
translateCenter: {
|
||||
@@ -87,6 +87,7 @@
|
||||
if (this.radius !== 0) {
|
||||
style.width = this.radius + 'rpx'
|
||||
style.height = this.radius + 'rpx'
|
||||
style.lineHeight = this.radius + 'rpx'
|
||||
|
||||
// style.borderRadius = (this.radius * 8) + 'rpx'
|
||||
}
|
||||
@@ -142,17 +143,17 @@
|
||||
.tn-badge {
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
font-size: 18rpx;
|
||||
background-color: $tn-main-color;
|
||||
color: #FFFFFF;
|
||||
font-size: 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
// color: #FFFFFF;
|
||||
border-radius: 100rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
line-height: initial;
|
||||
|
||||
&--dot {
|
||||
width: 8rpx;
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
|
||||
// 阴影
|
||||
if (this.shadow) {
|
||||
if (this.backgroundColorClass !== '') {
|
||||
if (this.backgroundColorClass !== '' && this.backgroundColorClass.indexOf('tn-bg') != -1) {
|
||||
const color = this.backgroundColor.slice(this.backgroundColor.lastIndexOf('-') + 1)
|
||||
clazz += ` tn-shadow-${color}`
|
||||
} else {
|
||||
@@ -202,15 +202,20 @@
|
||||
|
||||
if (!this.backgroundColorClass) {
|
||||
if (this.plain) {
|
||||
style.borderColor = this.backgroundColorStyle || '#01BEFF'
|
||||
style.borderColor = this.backgroundColorStyle || '#080808'
|
||||
} else {
|
||||
style.backgroundColor = this.backgroundColorStyle || '#01BEFF'
|
||||
style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
|
||||
}
|
||||
}
|
||||
|
||||
// 设置阴影
|
||||
if (this.shadow && !this.backgroundColorClass) {
|
||||
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#01BEFF')}10`
|
||||
if (this.backgroundColorStyle.indexOf('#') != -1) {
|
||||
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || '#000000')}10`
|
||||
} else if (this.backgroundColorStyle.indexOf('rgb') != -1 || this.backgroundColorStyle.indexOf('rgba') != -1 || !this.backgroundColorStyle) {
|
||||
style.boxShadow = `6rpx 6rpx 8rpx ${(this.backgroundColorStyle || 'rgba(0, 0, 0, 0.1)')}`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return style
|
||||
@@ -278,12 +283,11 @@
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
overflow: visible;
|
||||
margin-left: inherit;
|
||||
transform: translate(0rpx, 0rpx);
|
||||
margin-right: inherit;
|
||||
// background-color: $tn-mai
|
||||
border-radius: 12rpx;
|
||||
color: #FFFFFF;
|
||||
// color: $tn-font-color;
|
||||
margin: 0;
|
||||
|
||||
&--plain {
|
||||
background-color: transparent !important;
|
||||
|
||||
@@ -195,7 +195,9 @@
|
||||
font-size: 30rpx;
|
||||
line-height: 1;
|
||||
padding: 24rpx 0;
|
||||
padding-left: 24rpx;
|
||||
text-align: left;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
@@ -226,6 +228,8 @@
|
||||
font-size: 28rpx;
|
||||
color: $tn-font-color;
|
||||
text-align: left;
|
||||
background-color: #FFFFFF;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -134,8 +134,8 @@
|
||||
fontStyle() {
|
||||
return (type) => {
|
||||
let style = {}
|
||||
style.color = this.fontColorStyle ? this.fontColorStyle : '#080808'
|
||||
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '26rpx'
|
||||
style.color = this.fontColorStyle ? this.fontColorStyle : ''
|
||||
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
|
||||
if (type === 'leftIcon' && this.leftIconSize) {
|
||||
style.fontSize = this.leftIconSize + 'rpx'
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
|
||||
v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
|
||||
class="tn-countdown__separator"
|
||||
:style="{
|
||||
fontSize: separatorSize + 'rpx',
|
||||
@@ -33,7 +33,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="showHours"
|
||||
v-if="showMinutes"
|
||||
class="tn-countdown__separator"
|
||||
:style="{
|
||||
fontSize: separatorSize + 'rpx',
|
||||
@@ -55,7 +55,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="showMinutes"
|
||||
v-if="showSeconds"
|
||||
class="tn-countdown__separator"
|
||||
:style="{
|
||||
fontSize: separatorSize + 'rpx',
|
||||
|
||||
@@ -0,0 +1,523 @@
|
||||
<template>
|
||||
<view class="tn-fab-class tn-fab" @touchmove.stop.prevent>
|
||||
<view
|
||||
class="tn-fab__box"
|
||||
:class="{'tn-fab--right': left === 'auto'}"
|
||||
:style="{
|
||||
left: $t.string.getLengthUnitValue(fabLeft || left),
|
||||
right: $t.string.getLengthUnitValue(fabRight || right),
|
||||
bottom: $t.string.getLengthUnitValue(fabBottom || bottom),
|
||||
zIndex: elZIndex
|
||||
}"
|
||||
>
|
||||
<view
|
||||
v-if="visibleSync"
|
||||
class="tn-fab__btns"
|
||||
:class="[`tn-fab__btns__animation--${animationType}`,
|
||||
showFab ? `tn-fab__btns--visible--${animationType}` : ''
|
||||
]"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in btnList"
|
||||
:key="index"
|
||||
class="tn-fab__item"
|
||||
:class="[
|
||||
`tn-fab__item__animation--${animationType}`,
|
||||
{'tn-fab__item--left': right === 'auto'}
|
||||
]"
|
||||
:style="[fabItemStyle(index)]"
|
||||
@tap.stop="handleClick(index)"
|
||||
>
|
||||
<!-- 带图标或者图片时显示的文字信息 -->
|
||||
<view
|
||||
v-if="animationType !== 'around' && (item.imgUrl || item.icon)"
|
||||
:class="[left === 'auto' ? 'tn-fab__item__text--right' : 'tn-fab__item__text--left']"
|
||||
:style="{
|
||||
color: item.textColor || '#FFF',
|
||||
fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
|
||||
}"
|
||||
>{{ item.text || '' }}</view>
|
||||
|
||||
<!-- 带图片或者图标时的图片、图标信息 -->
|
||||
<view
|
||||
class="tn-fab__item__btn"
|
||||
:class="[!item.bgColor ? backgroundColorClass : '']"
|
||||
:style="{
|
||||
width: $t.string.getLengthUnitValue(width),
|
||||
height: $t.string.getLengthUnitValue(height),
|
||||
lineHeight: $t.string.getLengthUnitValue(height),
|
||||
backgroundColor: item.bgColor || backgroundColorStyle || '#01BEFF',
|
||||
borderRadius: $t.string.getLengthUnitValue(radius)
|
||||
}"
|
||||
>
|
||||
<!-- 无图片和无图标时只显示文字 -->
|
||||
<view
|
||||
v-if="!item.imgUrl && !item.icon"
|
||||
class="tn-fab__item__btn__title"
|
||||
:style="{
|
||||
color: item.textColor || '#fff',
|
||||
fontSize: $t.string.getLengthUnitValue(item.textSize || 28)
|
||||
}"
|
||||
>{{ item.text || '' }}</view>
|
||||
<!-- 图标 -->
|
||||
<view
|
||||
v-if="item.icon"
|
||||
class="tn-fab__item__btn__icon"
|
||||
:class="[`tn-icon-${item.icon}`]"
|
||||
:style="{
|
||||
color: item.iconColor || '#fff',
|
||||
fontSize: $t.string.getLengthUnitValue(item.iconSize || iconSize || 64)
|
||||
}"
|
||||
></view>
|
||||
<!-- 图片 -->
|
||||
<image
|
||||
v-else-if="!item.icon && item.imgUrl"
|
||||
class="tn-fab__item__btn__image"
|
||||
:style="{
|
||||
width: $t.string.getLengthUnitValue(item.imgWidth || 64),
|
||||
height: $t.string.getLengthUnitValue(item.imgHeight || 64),
|
||||
}"
|
||||
:src="item.imgUrl"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="tn-fab__item__btn tn-fab__item__btn--fab"
|
||||
:class="[backgroundColorClass, fontColorClass, {'tn-fab__item__btn--active': showFab}]"
|
||||
:style="{
|
||||
width: $t.string.getLengthUnitValue(width),
|
||||
height: $t.string.getLengthUnitValue(height),
|
||||
backgroundColor: backgroundColorStyle || !backgroundColorClass ? '#01BEFF' : '',
|
||||
color: fontColorStyle || '#fff',
|
||||
borderRadius: $t.string.getLengthUnitValue(radius),
|
||||
zIndex: elZIndex - 1
|
||||
}"
|
||||
@tap.stop="fabClick"
|
||||
>
|
||||
<slot>
|
||||
<view class="tn-fab__item__btn__icon" :class="[`tn-icon-${icon}`]" :style="{fontSize: $t.string.getLengthUnitValue(iconSize || 64)}"></view>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="visibleSync && showMask" class="tn-fab__mask" :class="{'tn-fab__mask--visible': showFab}" :style="{zIndex: elZIndex - 3}" @tap="clickMask()"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||
export default {
|
||||
name: 'tn-fab',
|
||||
mixins: [componentsColorMixin],
|
||||
props: {
|
||||
// 按钮列表
|
||||
// {
|
||||
// // 背景颜色
|
||||
// bgColor: '#fff',
|
||||
// // 图片地址
|
||||
// imgUrl: '',
|
||||
// // 图片宽度
|
||||
// imgWidth: 60,
|
||||
// // 图片高度
|
||||
// imgHeight: 60,
|
||||
// // 图标名称
|
||||
// icon: '',
|
||||
// // 图标尺寸
|
||||
// iconSize: 60,
|
||||
// // 图标颜色
|
||||
// iconColor: '#fff',
|
||||
// // 提示文字
|
||||
// text: '',
|
||||
// // 文字大小
|
||||
// textSize: 30,
|
||||
// // 字体颜色
|
||||
// textColor: '#fff'
|
||||
// }
|
||||
btnList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 自定义悬浮按钮内容
|
||||
customBtn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 悬浮按钮的宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: 88
|
||||
},
|
||||
// 悬浮按钮的高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 88
|
||||
},
|
||||
// 图标大小
|
||||
iconSize: {
|
||||
type: [String, Number],
|
||||
default: 64
|
||||
},
|
||||
// 图标名称
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'open'
|
||||
},
|
||||
// 按钮圆角
|
||||
radius: {
|
||||
type: [String, Number],
|
||||
default: '50%'
|
||||
},
|
||||
// 按钮距离左边的位置
|
||||
left: {
|
||||
type: [String, Number],
|
||||
default: 'auto'
|
||||
},
|
||||
// 按钮距离右边的位置
|
||||
right: {
|
||||
type: [String, Number],
|
||||
default: 'auto'
|
||||
},
|
||||
// 按钮距离底部的位置
|
||||
bottom: {
|
||||
type: [String, Number],
|
||||
default: 100
|
||||
},
|
||||
// 展示动画类型 up 往上展示 around 环绕
|
||||
animationType: {
|
||||
type: String,
|
||||
default: 'up'
|
||||
},
|
||||
// 当动画为圆环时，每个弹出按钮之间的距离, 单位px
|
||||
aroundBtnDistance: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 显示遮罩
|
||||
showMask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 点击遮罩是否可以关闭
|
||||
maskCloseable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFab: false,
|
||||
visibleSync: false,
|
||||
timer: null,
|
||||
fabLeft: 0,
|
||||
fabRight: 0,
|
||||
fabBottom: 0,
|
||||
fabBtnInfo: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0
|
||||
},
|
||||
systemInfo: {
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
updateProps: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
elZIndex() {
|
||||
return this.zIndex || this.$t.zIndex.fab
|
||||
},
|
||||
propsData() {
|
||||
return [this.width, this.height, this.left, this.right, this.bottom]
|
||||
},
|
||||
fabItemStyle() {
|
||||
return (index) => {
|
||||
let style = {
|
||||
zIndex: this.elZIndex - 2
|
||||
}
|
||||
if (this.animationType === 'up' || !this.showFab) {
|
||||
return style
|
||||
}
|
||||
let base = 1
|
||||
if (this.left === 'auto') {
|
||||
base = 1
|
||||
} else if (this.right === 'auto') {
|
||||
base = -1
|
||||
}
|
||||
style.transform = `rotate(${base * index * 60}deg) translateX(${(this.aroundBtnDistance + this.fabBtnInfo.width) * (-(base))}px)`
|
||||
return style
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
propsData() {
|
||||
// 更新按钮信息
|
||||
this.updateProps = true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getFabBtnRectInfo()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 按钮点击事件
|
||||
handleClick(index) {
|
||||
this.close()
|
||||
this.$emit('click', {index: index})
|
||||
},
|
||||
// 点击悬浮按钮
|
||||
fabClick() {
|
||||
if (this.showFab) {
|
||||
this.close()
|
||||
} else {
|
||||
// console.log(this.visibleSync);
|
||||
if (this.visibleSync) {
|
||||
this.visibleSync = false
|
||||
return
|
||||
}
|
||||
this.open()
|
||||
}
|
||||
},
|
||||
// 点击遮罩
|
||||
clickMask() {
|
||||
if (!this.showMask || !this.maskCloseable) return
|
||||
this.close()
|
||||
},
|
||||
|
||||
open() {
|
||||
this.change('visibleSync', 'showFab', true)
|
||||
this.translateFabPosition()
|
||||
},
|
||||
close() {
|
||||
this.change('showFab', 'visibleSync', false)
|
||||
this.fabLeft = 0
|
||||
this.fabRight = 0
|
||||
this.fabBottom = 0
|
||||
},
|
||||
// 关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
|
||||
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
|
||||
change(param1, param2, status) {
|
||||
this[param1] = status
|
||||
if (status) {
|
||||
// #ifdef H5 || MP
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
clearTimeout(this.timer)
|
||||
}, 10)
|
||||
// #endif
|
||||
// #ifndef H5 || MP
|
||||
this.$nextTick(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
})
|
||||
// #endif
|
||||
} else {
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
clearTimeout(this.timer)
|
||||
}, 250)
|
||||
}
|
||||
},
|
||||
|
||||
/******************** 旋转动画相关函数 ********************/
|
||||
// 获取按钮的信息
|
||||
async getFabBtnRectInfo() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
const btnRectInfo = await this._tGetRect('.tn-fab__item__btn--fab')
|
||||
if (!btnRectInfo) {
|
||||
setTimeout(() => {
|
||||
this.getFabBtnRectInfo()
|
||||
}, 10)
|
||||
return
|
||||
}
|
||||
console.log(btnRectInfo);
|
||||
this.systemInfo = {
|
||||
width: systemInfo.windowWidth,
|
||||
height: systemInfo.windowHeight
|
||||
}
|
||||
this.fabBtnInfo.width = btnRectInfo.width
|
||||
this.fabBtnInfo.height = btnRectInfo.height
|
||||
this.fabBtnInfo.left = btnRectInfo.left
|
||||
this.fabBtnInfo.right = btnRectInfo.right
|
||||
this.fabBtnInfo.bottom = btnRectInfo.bottom
|
||||
},
|
||||
// 更新悬浮按钮的位置
|
||||
translateFabPosition() {
|
||||
if (this.updateProps) {
|
||||
this.getFabBtnRectInfo()
|
||||
this.updateProps = false
|
||||
}
|
||||
if (this.animationType === 'up') return
|
||||
// 按钮组的宽度
|
||||
const btnGroupWidth = this.fabBtnInfo.width + this.aroundBtnDistance + 10
|
||||
// 判断当前按钮是在左边还是右边
|
||||
if (this.left === 'auto' && btnGroupWidth > this.systemInfo.width - this.fabBtnInfo.right) {
|
||||
// 距离不够需要移动
|
||||
this.fabRight = btnGroupWidth + 'px'
|
||||
} else if (this.right === 'auto' && btnGroupWidth > this.fabBtnInfo.left) {
|
||||
this.fabLeft = btnGroupWidth + 'px'
|
||||
}
|
||||
|
||||
if (btnGroupWidth > this.systemInfo.height - this.fabBtnInfo.bottom) {
|
||||
this.fabBottom = btnGroupWidth + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-fab {
|
||||
&__box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
&--right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&__btns {
|
||||
transition: all 0.25s cubic-bezier(0,.13,0,1.43);
|
||||
transform-origin: 80% bottom;
|
||||
|
||||
&__animation--up {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
&__animation--around {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--visible--up {
|
||||
// visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
&--visible--around {
|
||||
// visibility: visible;
|
||||
// opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
&__animation--around {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 0.25s ease-in-out;
|
||||
transform-origin: 50% 50%;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&--left {
|
||||
flex-flow: row-reverse;
|
||||
}
|
||||
|
||||
&__text {
|
||||
&--left {
|
||||
padding-left: 14rpx;
|
||||
}
|
||||
&--right {
|
||||
padding-right: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 5rpx 2rpx rgba(0, 0, 0, 0.07);
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&--active {
|
||||
animation-name: fab-button-animation;
|
||||
animation-duration: 0.2s;
|
||||
animation-timing-function: cubic-bezier(0,.13,0,1.43);
|
||||
}
|
||||
|
||||
&__title {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
text-align: center;
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $tn-mask-bg-color;
|
||||
transition: all 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
|
||||
&--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fab-button-animation {
|
||||
0% {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
// 20% {
|
||||
// transform: scale(1.8);
|
||||
// }
|
||||
// 40% {
|
||||
// transform: scale(0.4);
|
||||
// }
|
||||
// 50% {
|
||||
// transform: scale(1.4);
|
||||
// }
|
||||
// 80% {
|
||||
// transform: scale(0.8);
|
||||
// }
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -332,7 +332,7 @@
|
||||
validation(trigger, callback = ()=>{}) {
|
||||
// 校验之前先获取需要校验的值
|
||||
this.fieldValue = this.parent.model[this.prop]
|
||||
// blur和唱歌是否有当前方式的校验规则
|
||||
// blur和change是否有当前方式的校验规则
|
||||
let rules = this.getFilterRule(trigger)
|
||||
// 判断是否有验证规则，如果没有规则，也调用回调方法，否则父组件tn-form会因为
|
||||
// 对count变量的统计错误而无法进入上一层的回调
|
||||
|
||||
@@ -1,51 +1,52 @@
|
||||
<template>
|
||||
<view v-if="!disabled" class="tn-image-upload-class tn-image-upload">
|
||||
<view
|
||||
v-if="showUploadList"
|
||||
v-for="(item, index) in lists"
|
||||
:key="index"
|
||||
class="tn-image-upload__item tn-image-upload__item-preview"
|
||||
:style="{
|
||||
width: $t.string.getLengthUnitValue(width),
|
||||
height: $t.string.getLengthUnitValue(height)
|
||||
}"
|
||||
>
|
||||
<!-- 删除按钮 -->
|
||||
<block v-if="showUploadList">
|
||||
<view
|
||||
v-if="deleteable"
|
||||
class="tn-image-upload__item-preview__delete"
|
||||
@tap.stop="deleteItem(index)"
|
||||
v-for="(item, index) in lists"
|
||||
:key="index"
|
||||
class="tn-image-upload__item tn-image-upload__item-preview"
|
||||
:style="{
|
||||
borderTopColor: deleteBackgroundColor
|
||||
width: $t.string.getLengthUnitValue(width),
|
||||
height: $t.string.getLengthUnitValue(height)
|
||||
}"
|
||||
>
|
||||
<!-- 删除按钮 -->
|
||||
<view
|
||||
class="tn-image-upload__item-preview__delete--icon"
|
||||
:class="[`tn-icon-${deleteIcon}`]"
|
||||
v-if="deleteable"
|
||||
class="tn-image-upload__item-preview__delete"
|
||||
@tap.stop="deleteItem(index)"
|
||||
:style="{
|
||||
color: deleteColor
|
||||
borderTopColor: deleteBackgroundColor
|
||||
}"
|
||||
></view>
|
||||
>
|
||||
<view
|
||||
class="tn-image-upload__item-preview__delete--icon"
|
||||
:class="[`tn-icon-${deleteIcon}`]"
|
||||
:style="{
|
||||
color: deleteColor
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
<!-- 进度条 -->
|
||||
<tn-line-progress
|
||||
v-if="showProgress && item.progress > 0 && !item.error"
|
||||
class="tn-image-upload__item-preview__progress"
|
||||
:percent="item.progress"
|
||||
:showPercent="false"
|
||||
:round="false"
|
||||
:height="8"
|
||||
></tn-line-progress>
|
||||
<!-- 重试按钮 -->
|
||||
<view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">点击重试</view>
|
||||
<!-- 图片信息 -->
|
||||
<image
|
||||
class="tn-image-upload__item-preview__image"
|
||||
:src="item.url || item.path"
|
||||
:mode="imageMode"
|
||||
@tap.stop="doPreviewImage(item.url || item.path, index)"
|
||||
></image>
|
||||
</view>
|
||||
<!-- 进度条 -->
|
||||
<tn-line-progress
|
||||
v-if="showProgress && item.progress > 0 && !item.error"
|
||||
class="tn-image-upload__item-preview__progress"
|
||||
:percent="item.progress"
|
||||
:showPercent="false"
|
||||
:round="false"
|
||||
:height="8"
|
||||
></tn-line-progress>
|
||||
<!-- 重试按钮 -->
|
||||
<view v-if="item.error" class="tn-image-upload__item-preview__error-btn" @tap.stop="retry(index)">点击重试</view>
|
||||
<!-- 图片信息 -->
|
||||
<image
|
||||
class="tn-image-upload__item-preview__image"
|
||||
:src="item.url || item.path"
|
||||
:mode="imageMode"
|
||||
@tap.stop="doPreviewImage(item.url || item.path, index)"
|
||||
></image>
|
||||
</view>
|
||||
</block>
|
||||
<!-- <view v-if="$slots.file || $slots.$file" style="width: 100%;">
|
||||
|
||||
</view> -->
|
||||
@@ -320,7 +321,7 @@
|
||||
this.showToast('超出可允许文件大小')
|
||||
} else {
|
||||
if (maxCount <= lists.length) {
|
||||
this.$emit('on-exceed', val, list, this.index)
|
||||
this.$emit('on-exceed', val, lists, this.index)
|
||||
this.showToast('超出最大允许的文件数')
|
||||
return
|
||||
}
|
||||
@@ -426,7 +427,7 @@
|
||||
this.$t.messageUtils.closeLoading()
|
||||
this.uploading = false
|
||||
this.uploadFile(index + 1)
|
||||
this.$emit('on-change', res, index, this.list, this.index)
|
||||
this.$emit('on-change', res, index, this.lists, this.index)
|
||||
}
|
||||
})
|
||||
this.lists[index].uploadTask = task
|
||||
|
||||
@@ -145,7 +145,7 @@
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.tn-list-view {
|
||||
background-color: transparent;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&__title {
|
||||
width: 100%;
|
||||
@@ -155,25 +155,28 @@
|
||||
box-sizing: border-box;
|
||||
|
||||
&--card {
|
||||
margin: 0rpx 30rpx;
|
||||
// margin: 0rpx 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
|
||||
&--card {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
margin-right: 30rpx;
|
||||
margin-left: 30rpx;
|
||||
border-radius: 20rpx
|
||||
// width: auto;
|
||||
// overflow: hidden;
|
||||
// margin-right: 30rpx;
|
||||
// margin-left: 30rpx;
|
||||
// border-radius: 20rpx
|
||||
}
|
||||
}
|
||||
|
||||
&--card {
|
||||
padding-bottom: 30rpx;
|
||||
// padding-bottom: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
:style="[boxStyle]"
|
||||
>
|
||||
<!-- 不是自定义弹框内容 -->
|
||||
<view v-if="!custom">
|
||||
<!-- <view v-if="!custom">
|
||||
<view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
|
||||
<view
|
||||
class="tn-modal__box__content"
|
||||
@@ -57,7 +57,42 @@
|
||||
</view>
|
||||
<view v-else>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view> -->
|
||||
<slot>
|
||||
<view v-if="!custom">
|
||||
<view class="tn-modal__box__title" v-if="title && title !== ''">{{ title }}</view>
|
||||
<view
|
||||
class="tn-modal__box__content"
|
||||
:class="[
|
||||
fontColorClass,
|
||||
contentClass
|
||||
]"
|
||||
:style="contentStyle"
|
||||
>{{ content }}</view>
|
||||
<view v-if="button && button.length" class="tn-modal__box__btn-box" :class="[button.length != 2 ? 'tn-flex-direction-column' : '']">
|
||||
<block v-for="(item, index) in button" :key="index">
|
||||
<tn-button
|
||||
width="100%"
|
||||
height="68rpx"
|
||||
:fontSize="26"
|
||||
:backgroundColor="item.backgroundColor || ''"
|
||||
:fontColor="item.fontColor || ''"
|
||||
:plain="item.plain || false"
|
||||
:shape="item.shape || 'round'"
|
||||
:class="[
|
||||
button.length > 2 ? 'tn-margin-bottom' : ''
|
||||
]"
|
||||
@click="handleClick(index)"
|
||||
:style="{
|
||||
width: button.length != 2 ? '80%' : '46%'
|
||||
}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</tn-button>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
</tn-popup>
|
||||
</view>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="tn-custom-nav-bar__bar__action" @tap="handlerBack">
|
||||
<text class="tn-custom-nav-bar__bar__action--nav-back"></text>
|
||||
<text class="tn-custom-nav-bar__bar__action--nav-back" :class="[`tn-icon-${backIcon}`]"></text>
|
||||
<text class="tn-custom-nav-bar__bar__action--nav-back-text" v-if="backTitle">{{ backTitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -61,6 +61,11 @@
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 返回按钮的图标
|
||||
backIcon: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 返回按钮旁显示的文字
|
||||
backTitle: {
|
||||
type: String,
|
||||
@@ -108,6 +113,9 @@
|
||||
if (this.backgroundColorClass) {
|
||||
clazz += ` ${this.backgroundColorClass}`
|
||||
}
|
||||
if (this.fontColorClass) {
|
||||
clazz += `${this.fontColorClass}`
|
||||
}
|
||||
if (this.fixed) {
|
||||
clazz += ' tn-custom-nav-bar__bar--fixed'
|
||||
}
|
||||
@@ -131,6 +139,9 @@
|
||||
if(!this.backgroundColorClass) {
|
||||
style.backgroundColor = this.backgroundColor !== '' ? this.backgroundColor : '#FFFFFF'
|
||||
}
|
||||
if (!this.fontColorClass && this.fontColor) {
|
||||
style.color= this.fontColor
|
||||
}
|
||||
|
||||
style.zIndex = this.elZIndex
|
||||
|
||||
@@ -240,7 +251,7 @@
|
||||
const pages = getCurrentPages()
|
||||
if (pages && pages.length > 0) {
|
||||
const firstPage = pages[0]
|
||||
if (!firstPage.route || firstPage.route != 'pages/index/index') {
|
||||
if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
@@ -308,13 +319,15 @@
|
||||
/* top: 50%; */
|
||||
/* left: 20rpx; */
|
||||
/* margin-top: -15rpx; */
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
margin-left: 25rpx;
|
||||
border-width: 0 0 4rpx 4rpx;
|
||||
border-color: #000000;
|
||||
border-style: solid;
|
||||
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
// width: 25rpx;
|
||||
// height: 25rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 38rpx;
|
||||
line-height: 100%;
|
||||
// border-width: 0 0 4rpx 4rpx;
|
||||
// border-color: #000000;
|
||||
// border-style: solid;
|
||||
// transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
||||
}
|
||||
|
||||
&--nav-back-text {
|
||||
|
||||
@@ -281,6 +281,11 @@
|
||||
watch: {
|
||||
value(val) {
|
||||
if (val) {
|
||||
// console.log(this.visibleSync);
|
||||
if (this.visibleSync) {
|
||||
this.visibleSync = false
|
||||
return
|
||||
}
|
||||
this.open()
|
||||
} else if (!this.closeFromInner) {
|
||||
this.close()
|
||||
@@ -327,7 +332,8 @@
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
}, 50)
|
||||
clearTimeout(this.timer)
|
||||
}, 10)
|
||||
// #endif
|
||||
// #ifndef H5 || MP
|
||||
this.$nextTick(() => {
|
||||
@@ -339,6 +345,7 @@
|
||||
this.timer = setTimeout(() => {
|
||||
this[param2] = status
|
||||
this.$emit(status ? 'open' : 'close')
|
||||
clearTimeout(this.timer)
|
||||
}, 250)
|
||||
}
|
||||
}
|
||||
@@ -472,7 +479,7 @@
|
||||
right: 0;
|
||||
border: 0;
|
||||
background-color: $tn-mask-bg-color;
|
||||
transition: 0.25s ease-in-out;
|
||||
transition: 0.25s linear;
|
||||
transition-property: opacity;
|
||||
opacity: 0;
|
||||
|
||||
|
||||
@@ -138,8 +138,8 @@
|
||||
fontStyle() {
|
||||
return (type) => {
|
||||
let style = {}
|
||||
style.color = this.fontColorStyle ? this.fontColorStyle : '#080808'
|
||||
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : '26rpx'
|
||||
style.color = this.fontColorStyle ? this.fontColorStyle : ''
|
||||
style.fontSize = this.fontSizeStyle ? this.fontSizeStyle : ''
|
||||
if (type === 'leftIcon' && this.leftIconSize) {
|
||||
style.fontSize = this.leftIconSize + 'rpx'
|
||||
}
|
||||
|
||||
@@ -10,26 +10,27 @@
|
||||
:key="index"
|
||||
class="tn-steps__item"
|
||||
:class="[`tn-steps__item--${direction}`]"
|
||||
@tap="clickStepItem(index)"
|
||||
>
|
||||
<!-- 数值模式 -->
|
||||
<view
|
||||
v-if="mode === 'number'"
|
||||
class="tn-steps__item__number"
|
||||
:style="{
|
||||
backgroundColor: current <= index ? 'transparent' : activeColor,
|
||||
borderColor: current <= index ? inActiveColor : activeColor
|
||||
backgroundColor: currentIndex <= index ? 'transparent' : activeColor,
|
||||
borderColor: currentIndex <= index ? inActiveColor : activeColor
|
||||
}"
|
||||
>
|
||||
<text
|
||||
class="tn-steps__item__number__text"
|
||||
:class="[{'tn-steps__item__number__text--visible': current <= index}]"
|
||||
:class="[{'tn-steps__item__number__text--visible': currentIndex <= index}]"
|
||||
:style="{
|
||||
color: current <= index ? inActiveColor : activeColor
|
||||
color: currentIndex <= index ? inActiveColor : activeColor
|
||||
}"
|
||||
>
|
||||
{{ index + 1}}
|
||||
</text>
|
||||
<view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': current > index}]"></view>
|
||||
<view class="tn-steps__item__number__icon" :class="[`tn-icon-${item.icon || icon}`,{'tn-steps__item__number__icon--visible': currentIndex > index}]"></view>
|
||||
</view>
|
||||
|
||||
<!-- 点模式 -->
|
||||
@@ -37,7 +38,7 @@
|
||||
v-if="mode === 'dot'"
|
||||
class="tn-steps__item__dot"
|
||||
:style="{
|
||||
backgroundColor: current <= index ? inActiveColor : activeColor
|
||||
backgroundColor: currentIndex <= index ? inActiveColor : activeColor
|
||||
}"
|
||||
></view>
|
||||
|
||||
@@ -47,13 +48,13 @@
|
||||
class="tn-steps__item__icon"
|
||||
:class="[iconModeClass(index)]"
|
||||
:style="{
|
||||
color: current <= index ? inActiveColor : activeColor
|
||||
color: currentIndex <= index ? inActiveColor : activeColor
|
||||
}"
|
||||
></view>
|
||||
|
||||
<!-- 点图标模式 -->
|
||||
<view v-if="mode === 'dotIcon'" class="tn-steps__item__dot-icon">
|
||||
<view v-if="current <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
|
||||
<view v-if="currentIndex <= index" class="tn-steps__item__dot-icon--dot" :style="{backgroundColor: inActiveColor}"></view>
|
||||
<view v-else class="tn-steps__item__dot-icon--icon" :class="[iconModeClass(index)]" :style="{color: activeColor}"></view>
|
||||
</view>
|
||||
|
||||
@@ -63,7 +64,7 @@
|
||||
class="tn-steps__item__text tn-text-ellipsis"
|
||||
:class="[`tn-steps__item__text--${direction}`]"
|
||||
:style="{
|
||||
color: current <= index ? inActiveColor : activeColor
|
||||
color: currentIndex <= index ? inActiveColor : activeColor
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
@@ -75,7 +76,7 @@
|
||||
class="tn-steps__item__line"
|
||||
:class="[`tn-steps__item__line--${mode}`]"
|
||||
:style="{
|
||||
borderColor: current <= index + 1 ? inActiveColor : activeColor
|
||||
borderColor: currentIndex <= index + 1 ? inActiveColor : activeColor
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
@@ -87,7 +88,7 @@
|
||||
name: 'tn-steps',
|
||||
props: {
|
||||
// 模式类型
|
||||
// dot -> 点 number -> 数字 icon -> 图标 dot_icon -> 点图标
|
||||
// dot -> 点 number -> 数字 icon -> 图标 dotIcon -> 点图标
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dot'
|
||||
@@ -137,7 +138,7 @@
|
||||
return (index) => {
|
||||
const item = this.list[index]
|
||||
// 状态被选中并且对应数据下存在selectIcon属性
|
||||
if (this.current > index && item.hasOwnProperty('selectIcon')) {
|
||||
if (this.currentIndex > index && item.hasOwnProperty('selectIcon')) {
|
||||
return `tn-icon-${item.selectIcon}`
|
||||
} else {
|
||||
// 未选中
|
||||
@@ -147,10 +148,25 @@
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
currentIndex: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
current: {
|
||||
handler(val) {
|
||||
this.currentIndex = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 点击了某一个选项
|
||||
clickStepItem(index) {
|
||||
const chooseIndex = index + 1
|
||||
this.currentIndex = chooseIndex
|
||||
this.$emit('click', { index: chooseIndex })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -121,6 +121,9 @@
|
||||
} else {
|
||||
this.initObserver()
|
||||
}
|
||||
},
|
||||
customNavHeight(val) {
|
||||
this.initObserver()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
return style
|
||||
},
|
||||
loadingColor() {
|
||||
return this.value ? this.activeColor : null
|
||||
return this.value ? this.activeColor : ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -54,6 +54,7 @@
|
||||
v-if="!item.out && (item.count || item.dot)"
|
||||
:dot="item.dot || false"
|
||||
backgroundColor="tn-bg-red"
|
||||
fontColor="#FFFFFF"
|
||||
:radius="item.dot ? 14 : 0"
|
||||
:fontSize="14"
|
||||
padding="2rpx 4rpx"
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
:style="[tabItemStyle(index)]"
|
||||
@tap="emit(index)"
|
||||
>
|
||||
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
|
||||
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
|
||||
{{ item[name] || item['name'] }}
|
||||
</view>
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
:style="[tabItemStyle(index)]"
|
||||
@tap="clickTab(index)"
|
||||
>
|
||||
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
|
||||
<tn-badge v-if="item[count] || item['count']" backgroundColor="tn-bg-red" fontColor="#FFFFFF" :absolute="true" :top="badgeOffset[0] || 0" :right="badgeOffset[1] || 0">{{ item[count] || item['count']}}</tn-badge>
|
||||
{{ item[name] || item['name'] }}
|
||||
</view>
|
||||
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
break
|
||||
}
|
||||
|
||||
style.width = this.width || '100%'
|
||||
style.width = this.width || '120rpx'
|
||||
style.height = this.height || style.height
|
||||
|
||||
style.padding = this.padding || style.padding
|
||||
@@ -144,9 +144,14 @@
|
||||
}
|
||||
|
||||
if (!this.backgroundColorClass) {
|
||||
style.backgroundColor = !this.plain ? (this.backgroundColorStyle || '#01BEFF') : ''
|
||||
style.backgroundColor = !this.plain ? (this.backgroundColorStyle || '#FFFFFF') : ''
|
||||
if (this.plain) {
|
||||
style.borderColor = (this.backgroundColorStyle || '#080808')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return style
|
||||
},
|
||||
},
|
||||
@@ -179,7 +184,7 @@
|
||||
box-sizing: border-box;
|
||||
font-family: Helvetica Neue, Helvetica, sans-serif;
|
||||
white-space: nowrap;
|
||||
color: #FFFFFF;
|
||||
// color: #FFFFFF;
|
||||
|
||||
&--fillet-left {
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
|
||||
@@ -8,5 +8,6 @@ export default {
|
||||
tips: 19080,
|
||||
sticky: 19075,
|
||||
indexListSticky: 19070,
|
||||
fab: 19060,
|
||||
mask: 9999,
|
||||
}
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
@mixin getShadowColor($type: box, $color: #FFFFFF) {
|
||||
@if $type == box {
|
||||
box-shadow: 6rpx 6rpx 8rpx #{$color};
|
||||
box-shadow: 12rpx 12rpx 16rpx #{$color};
|
||||
} @else if $type == text {
|
||||
text-shadow: 6rpx 6rpx 8rpx #{$color};
|
||||
}
|
||||
|
||||
@@ -653,6 +653,15 @@ button::after {
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.tn-text-clip {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
.tn-text-break-word {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 文本 end */
|
||||
|
||||
/* hover 点击效果 start */
|
||||
|
||||
@@ -21,14 +21,11 @@
|
||||
&:first-child {
|
||||
border-top-right-radius: 0rpx;
|
||||
border-bottom-right-radius: 0rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: $tn-main-color !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
&::after {
|
||||
border-color: $tn-main-color !important;
|
||||
border-top-left-radius: 0rpx;
|
||||
border-bottom-left-radius: 0rpx;
|
||||
}
|
||||
|
||||
@@ -25,15 +25,12 @@
|
||||
.tn-tag {
|
||||
border-top-right-radius: 0rpx;
|
||||
border-bottom-right-radius: 0rpx;
|
||||
color: #FFFFFF !important;
|
||||
background-color: $tn-main-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.tn-tag {
|
||||
&::after {
|
||||
border-color: $tn-main-color !important;
|
||||
border-top-left-radius: 0rpx;
|
||||
border-bottom-left-radius: 0rpx;
|
||||
}
|
||||
|
||||
@@ -20,6 +20,9 @@ let color = [
|
||||
'gray'
|
||||
]
|
||||
|
||||
// 酷炫颜色的数量
|
||||
const COOL_BG_COLOR_COUNT = 16
|
||||
|
||||
/**
|
||||
* 获取图鸟配色颜色列表
|
||||
*/
|
||||
@@ -42,7 +45,7 @@ function getRandomColorClass(type = 'bg') {
|
||||
* 随机获取酷炫背景对应的类
|
||||
*/
|
||||
function getRandomCoolBgClass() {
|
||||
const index = (Math.random() * 16) + 1
|
||||
const index = (Math.random() * COOL_BG_COLOR_COUNT) + 1
|
||||
return 'tn-cool-bg-color-' + Math.floor(index)
|
||||
}
|
||||
|
||||
@@ -54,7 +57,7 @@ function getRandomCoolBgClass() {
|
||||
function getBackgroundColorInternalClass(backgroundColor = '') {
|
||||
if (!backgroundColor) return ''
|
||||
|
||||
if (['tn-bg', 'tn-dynamic-bg'].some(item => {
|
||||
if (['tn-bg', 'tn-dynamic-bg', 'tn-main-gradient', 'tn-cool-bg'].some(item => {
|
||||
return backgroundColor.includes(item)
|
||||
})) {
|
||||
return backgroundColor
|
||||
@@ -252,6 +255,7 @@ function colorToRGBA(color, alpha = 0.3) {
|
||||
}
|
||||
|
||||
export default {
|
||||
COOL_BG_COLOR_COUNT: COOL_BG_COLOR_COUNT,
|
||||
getTuniaoColorList,
|
||||
getRandomColorClass,
|
||||
getRandomCoolBgClass,
|
||||
|
||||
@@ -14,6 +14,7 @@ $tn-embellished-yellow: #FFF00D;
|
||||
$tn-auxiliary-powder: #FF71D2;
|
||||
$tn-auxiliary-blue: #82B2FF;
|
||||
$tn-bg-color: #FFFFFF;
|
||||
$tn-bg-gray-color: #F4F4F4;
|
||||
$tn-space-color: #F8F7F8;
|
||||
|
||||
// 边框颜色
|
||||
|
||||
Reference in New Issue
Block a user