mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 16:24:01 +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
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
<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">
|
||||
</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="应用示例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">
|
||||
应用示例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="应用示例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">
|
||||
应用示例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="应用示例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">
|
||||
应用示例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="应用示例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">
|
||||
应用示例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="应用示例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 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="应用示例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>
|
||||
</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="应用示例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-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>
|
||||
</demo-title>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例8
|
||||
</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">
|
||||
<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-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="应用示例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-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
|
||||
<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-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="应用示例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-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
|
||||
</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-3">
|
||||
<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>
|
||||
</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">
|
||||
<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-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-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-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>
|
||||
</demo-title>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</demo-title>
|
||||
|
||||
|
||||
|
||||
|
||||
<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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 */
|
||||
.origin-demo {
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(0.7);
|
||||
.basic-tag {
|
||||
background-color: $tn-bg-gray-color;
|
||||
min-height: 100vh;
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
tn-tag {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifdef MP-WEIXIN */
|
||||
.origin-demo {
|
||||
.tn-tag-class {
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(0.7);
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
margin-right: 70rpx;
|
||||
position: relative;
|
||||
|
||||
&__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>
|
||||
Reference in New Issue
Block a user