mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 00:04:00 +08:00
图鸟UI V1.0.0 版本提交
This commit is contained in:
JaylenTech
272
basicPage/avatar/avatar.vue
Normal file
272
basicPage/avatar/avatar.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-avatar">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>头像</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<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>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'basicAvatar',
|
||||
components: {dynamicDemoTemplate},
|
||||
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'},
|
||||
{text: 'TN'},
|
||||
{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>
|
||||
|
||||
</style>
|
||||
200
basicPage/badge/badge.vue
Normal file
200
basicPage/badge/badge.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-badge">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>微标</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<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>
|
||||
</tn-badge>
|
||||
</view>
|
||||
</block>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'basicBadge',
|
||||
components: {dynamicDemoTemplate},
|
||||
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 {
|
||||
// 防止越过父级
|
||||
position: relative;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: $tn-font-sub-color;
|
||||
}
|
||||
</style>
|
||||
139
basicPage/border/border.vue
Normal file
139
basicPage/border/border.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-border">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>边框</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<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>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'basicBorder',
|
||||
components: {dynamicDemoTemplate},
|
||||
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>
|
||||
|
||||
.border-content {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
230
basicPage/button/button.vue
Normal file
230
basicPage/button/button.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-button">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>按钮</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<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>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'basicButton',
|
||||
components: {dynamicDemoTemplate},
|
||||
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>
|
||||
|
||||
</style>
|
||||
710
basicPage/color/color.vue
Normal file
710
basicPage/color/color.vue
Normal file
@@ -0,0 +1,710 @@
|
||||
<template>
|
||||
<view class="basic-background">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>背景</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<view class="tn-flex tn-flex-nowrap background-container">
|
||||
<view class="background__left-container">
|
||||
<scroll-view :style="[scrollViewStyle]" scroll-y>
|
||||
<view class="background__left__picker">
|
||||
<view class="background__left__picker__item-wrapper" @click="pickerColorClick(0)">
|
||||
<view
|
||||
class="background__left__picker__item background__left__picker__item--basic picker-color-item-0"
|
||||
:class="[{'tn-shadow-blur': currentColorIndex === 0}]" style="background-color: #01BEFF;">
|
||||
<text class="tn-icon-logo-tuniao"></text>
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, index) in colorList" :key="index">
|
||||
<view class="background__left__picker__item-wrapper" @click="pickerColorClick(index + 1)">
|
||||
<view class="background__left__picker__item" :class="[`picker-color-item-${index + 1} tn-bg-${item.color}`, {'tn-shadow-blur': currentColorIndex === index + 1}]"></view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 选中后的边框 -->
|
||||
<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>
|
||||
</view>
|
||||
</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}">
|
||||
<block v-if="currentColorIndex === 0">
|
||||
<view class="background__right__show--title">图鸟基础配色</view>
|
||||
<!-- 色盘 start-->
|
||||
<view class="box" >
|
||||
<view v-for="(item,index) in 16" :key="index" :class="'colorwheel-box colorwheel-' + (index+1)"></view>
|
||||
</view>
|
||||
<!-- 色盘 end-->
|
||||
<view class="background__right__show__content">
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #01BEFF;">
|
||||
<view class="background__right__show__content__item--title">主色蓝</view>
|
||||
<view class="background__right__show__content__item--value">#01BEFF</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FBBD12;">
|
||||
<view class="background__right__show__content__item--title">主色橙</view>
|
||||
<view class="background__right__show__content__item--value">#FBBD12</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #00FFC6;">
|
||||
<view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀青</view>
|
||||
<view class="background__right__show__content__item--value">#00FFC6</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FFF00D;">
|
||||
<view class="background__right__show__content__item--title background__right__show__content__item--title--light">点缀黄</view>
|
||||
<view class="background__right__show__content__item--value">#FFF00D</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #FF71D2;">
|
||||
<view class="background__right__show__content__item--title">辅助粉</view>
|
||||
<view class="background__right__show__content__item--value">#FF71D2</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #82B2FF;">
|
||||
<view class="background__right__show__content__item--title">辅助蓝</view>
|
||||
<view class="background__right__show__content__item--value background__right__show__content__item--value--light">#82B2FF</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #080808;">
|
||||
<view class="background__right__show__content__item--title">文字颜色</view>
|
||||
<view class="background__right__show__content__item--value background__right__show__content__item--value--light">#080808</view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" style="background-color: #F4F4F4;">
|
||||
<view class="background__right__show__content__item--title background__right__show__content__item--title--light">背景灰</view>
|
||||
<view class="background__right__show__content__item--value background__right__show__content__item--value--light">#F4F4F4</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="background__right__show--title">{{ selectColorInfo.name }}-{{ selectColorInfo.color }}</view>
|
||||
|
||||
<view class="background__right__show__content">
|
||||
<block v-for="(value, key, index) in selectColorInfo.value" :key="index">
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[key === 'normal' ? `tn-bg-${selectColorInfo.color}` : `tn-bg-${selectColorInfo.color}--${key}`]">
|
||||
<view class="background__right__show__content__item--title" :class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--title--light' : '']">{{ key }}</view>
|
||||
<view class="background__right__show__content__item--value"
|
||||
:class="[['disabled','light'].includes(key) ? 'background__right__show__content__item--value--light' : '',{'tn-color-white': selectColorInfo.color === 'gray' && key === 'normal'}]"
|
||||
>
|
||||
{{ value }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<block v-if="!['brown','grey','gray'].includes(selectColorInfo.color)">
|
||||
<view class="background__right__show--title background__right__show--title--gradient" :class="[`tn-cool-bg-color-${currentColorIndex % 16 + 1}`]">渐变色</view>
|
||||
|
||||
<view class="background__right__show__content">
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--reverse`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
<view class="background__right__show__content__item tn-shadow-blur" :class="[`tn-main-gradient-${selectColorInfo.color}--light--reverse`]">
|
||||
<view class="background__right__show__content__item--title"></view>
|
||||
<view class="background__right__show__content__item--value"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'basicBackground',
|
||||
data() {
|
||||
return {
|
||||
colorList: [{
|
||||
name: '红色',
|
||||
color: 'red',
|
||||
value: {
|
||||
normal: '#E83A30',
|
||||
dark: '#BA2E26',
|
||||
disabled: '#F39C97',
|
||||
light: '#FAD8D6'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '紫红色',
|
||||
color: 'purplered',
|
||||
value: {
|
||||
normal: '#E72F8C',
|
||||
dark: '#B9266F',
|
||||
disabled: '#F397C5',
|
||||
light: '#FAD5E8'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '紫色',
|
||||
color: 'purple',
|
||||
value: {
|
||||
normal: '#892FE8',
|
||||
dark: '#6E26BA',
|
||||
disabled: '#C497F3',
|
||||
light: '#E7D5FA'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '蓝紫色',
|
||||
color: 'bluepurple',
|
||||
value: {
|
||||
normal: '#5F4FD9',
|
||||
dark: '#4C3FAE',
|
||||
disabled: '#AFA7EC',
|
||||
light: '#DFDCF7'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '海蓝色',
|
||||
color: 'aquablue',
|
||||
value: {
|
||||
normal: '#3646FF',
|
||||
dark: '#2B38CC',
|
||||
disabled: '#9AA2FF',
|
||||
light: '#D7DAFF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '蓝色',
|
||||
color: 'blue',
|
||||
value: {
|
||||
normal: '#3D7EFF',
|
||||
dark: '#3165CC',
|
||||
disabled: '#9EBEFF',
|
||||
light: '#D8E5FF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '靛蓝色',
|
||||
color: 'indigo',
|
||||
value: {
|
||||
normal: '#31C9E8',
|
||||
dark: '#27A1BA',
|
||||
disabled: '#98E4F3',
|
||||
light: '#D6F4FA'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '青色',
|
||||
color: 'cyan',
|
||||
value: {
|
||||
normal: '#2DE8BD',
|
||||
dark: '#24BA97',
|
||||
disabled: '#96F3DE',
|
||||
light: '#D5FAF2'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '青绿色',
|
||||
color: 'teal',
|
||||
value: {
|
||||
normal: '#24F083',
|
||||
dark: '#1DC069',
|
||||
disabled: '#91F7C1',
|
||||
light: '#D3FCE6'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '绿色',
|
||||
color: 'green',
|
||||
value: {
|
||||
normal: '#31E749',
|
||||
dark: '#27B93A',
|
||||
disabled: '#98F3A4',
|
||||
light: '#D6FADB'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '黄绿色',
|
||||
color: 'yellowgreen',
|
||||
value: {
|
||||
normal: '#A4E82F',
|
||||
dark: '#82BA26',
|
||||
disabled: '#D1F397',
|
||||
light: '#EDFAD5'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '酸橙色',
|
||||
color: 'lime',
|
||||
value: {
|
||||
normal: '#D5EB00',
|
||||
dark: '#AABC00',
|
||||
disabled: '#E9F57F',
|
||||
light: '#F7FBCC'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '黄色',
|
||||
color: 'yellow',
|
||||
value: {
|
||||
normal: '#FFF420',
|
||||
dark: '#CCC21A',
|
||||
disabled: '#FFF88F',
|
||||
light: '#FFFDD2'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '橘黄色',
|
||||
color: 'orangeyellow',
|
||||
value: {
|
||||
normal: '#FFCA28',
|
||||
dark: '#CCA220',
|
||||
disabled: '#FFE493',
|
||||
light: '#FFF4D4'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '橙色',
|
||||
color: 'orange',
|
||||
value: {
|
||||
normal: '#FFA726',
|
||||
dark: '#CC851E',
|
||||
disabled: '#FFD392',
|
||||
light: '#FFEDD4'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '橘红色',
|
||||
color: 'orangered',
|
||||
value: {
|
||||
normal: '#FF7043',
|
||||
dark: '#CC5A36',
|
||||
disabled: '#FFB7A1',
|
||||
light: '#FFE2D9'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '棕色',
|
||||
color: 'brown',
|
||||
value: {
|
||||
normal: '#914F2C',
|
||||
dark: '#743F23',
|
||||
disabled: '#C8A795',
|
||||
light: '#E9DCD5'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '玄灰色',
|
||||
color: 'grey',
|
||||
value: {
|
||||
normal: '#78909C',
|
||||
dark: '#5F7E8B',
|
||||
disabled: '#C6D1D8',
|
||||
light: '#E4E9EC'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '灰色',
|
||||
color: 'gray',
|
||||
value: {
|
||||
normal: '#AAAAAA',
|
||||
dark: '#838383',
|
||||
disabled: '#E6E6E6',
|
||||
light: '#F8F7F8'
|
||||
}
|
||||
}
|
||||
],
|
||||
// scrollView的样式
|
||||
scrollViewStyle: {
|
||||
height: 0
|
||||
},
|
||||
// picker列表颜色列表信息
|
||||
pickerColorInfos: [],
|
||||
// picker列表颜色选中框样式
|
||||
colorSelectItemStyle: {
|
||||
top: 0,
|
||||
left: 0
|
||||
},
|
||||
// 当前选中的颜色序号
|
||||
currentColorIndex: 0,
|
||||
colorSelectFlag: false,
|
||||
// 当前选中颜色的色值信息
|
||||
selectColorInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.initScrollViewHeight()
|
||||
},
|
||||
onReady() {
|
||||
// 等待加载组件完成
|
||||
setTimeout(() => {
|
||||
this.getPickerColorItemInfo()
|
||||
}, 10)
|
||||
},
|
||||
methods: {
|
||||
// 计算scrollView的高度
|
||||
initScrollViewHeight() {
|
||||
// 获取当前屏幕的安全高度
|
||||
uni.getSystemInfo({
|
||||
success: (systemInfo) => {
|
||||
this.scrollViewStyle.height = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo
|
||||
.statusBarHeight + 'px'
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取色值列表的位置信息
|
||||
getPickerColorItemInfo() {
|
||||
// 获取picker容器的信息
|
||||
this._tGetRect('.background__left__picker').then((pickerInfo) => {
|
||||
let view = uni.createSelectorQuery().in(this)
|
||||
for (let i = 0; i <= this.colorList.length; i++) {
|
||||
view.select('.picker-color-item-' + i).boundingClientRect()
|
||||
}
|
||||
view.exec(res => {
|
||||
// 如果没有获取到，则重新获取
|
||||
if (!res.length) {
|
||||
setTimeout(() => {
|
||||
this.getPickerColorItemInfo()
|
||||
return
|
||||
}, 10)
|
||||
}
|
||||
// 将每个选择颜色值的宽高，位置信息存入列表中
|
||||
res.map((item, index) => {
|
||||
this.pickerColorInfos.push({
|
||||
x: (item.top - pickerInfo.top) + (item.height / 2),
|
||||
y: (item.left - pickerInfo.left) + (item.width / 2)
|
||||
})
|
||||
|
||||
// 初始化选中的圆环
|
||||
this.updatePickerColorSelectItem()
|
||||
this.updateSelectColorInfo()
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
// 色值选择
|
||||
pickerColorClick(index) {
|
||||
if (this.colorSelectFlag === false || index === this.currentColorIndex) {
|
||||
return
|
||||
}
|
||||
this.currentColorIndex = index
|
||||
this.updatePickerColorSelectItem()
|
||||
this.updateSelectColorInfo()
|
||||
},
|
||||
// 设置选中圆环信息
|
||||
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]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 色盘 start*/
|
||||
.box{
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 550rpx;
|
||||
height: 600rpx;
|
||||
background: none;
|
||||
}
|
||||
.colorwheel-box{
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
left: 10%;
|
||||
bottom: 20%;
|
||||
border-radius: 100% 10rpx;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.colorwheel-1{
|
||||
background: #2DE8BD;
|
||||
transform: rotate(-78.75deg);
|
||||
}
|
||||
.colorwheel-2{
|
||||
background: #24F083;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.colorwheel-3{
|
||||
background: #31E749;
|
||||
transform: rotate(-101.25deg);
|
||||
}
|
||||
.colorwheel-4{
|
||||
background: #A4E82F;
|
||||
transform: rotate(-112.5deg);
|
||||
}
|
||||
.colorwheel-5{
|
||||
background: #D5EB00;
|
||||
transform: rotate(-123.75deg);
|
||||
}
|
||||
.colorwheel-6{
|
||||
background: #FFF420;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
.colorwheel-7{
|
||||
background: #FFCA28;
|
||||
transform: rotate(-146.25deg);
|
||||
}
|
||||
.colorwheel-8{
|
||||
background: #FFA726;
|
||||
transform: rotate(-157.5deg);
|
||||
}
|
||||
.colorwheel-9{
|
||||
background: #FF7043;
|
||||
transform: rotate(-168.75deg);
|
||||
}
|
||||
.colorwheel-10{
|
||||
background: #E83A30;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.colorwheel-11{
|
||||
background: #E72F8C;
|
||||
transform: rotate(-11.25deg);
|
||||
}
|
||||
.colorwheel-12{
|
||||
background: #892FE8;
|
||||
transform: rotate(-22.5deg);
|
||||
}
|
||||
.colorwheel-13{
|
||||
background: #5F4FD9;
|
||||
transform: rotate(-33.75deg);
|
||||
}
|
||||
.colorwheel-14{
|
||||
background: #3646FF;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.colorwheel-15{
|
||||
background: #3D7EFF;
|
||||
transform: rotate(-56.25deg);
|
||||
}
|
||||
.colorwheel-16{
|
||||
background: #31C9E8;
|
||||
transform: rotate(-67.5deg);
|
||||
}
|
||||
/* 色盘 end*/
|
||||
|
||||
|
||||
/* 背景颜色容器 start */
|
||||
.background-container {
|
||||
.background {
|
||||
|
||||
/* 左边容器 start */
|
||||
&__left-container {
|
||||
width: 16%;
|
||||
height: 100%;
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
&__left {
|
||||
&__picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&__item-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin: 18rpx auto;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
|
||||
&--basic {
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
|
||||
&__select-wrapper {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
|
||||
.circle-wrapper {
|
||||
width: 40rpx;
|
||||
height: 80rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
display: inline-block;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 6rpx solid transparent;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: rotate(225deg);
|
||||
|
||||
&.right-circle {
|
||||
right: 0;
|
||||
border-bottom-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
// transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
|
||||
}
|
||||
|
||||
&.left-circle {
|
||||
left: 0;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
// transition: transform 0.3s cubic-bezier(0,.13,0,1.43);
|
||||
}
|
||||
|
||||
&--active {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 左边容器 end */
|
||||
|
||||
/* 右边容器 start */
|
||||
&__right-container {
|
||||
width: 84%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__right {
|
||||
&__show {
|
||||
padding: 30rpx;
|
||||
overflow: hidden;
|
||||
transform-origin: 0 50%;
|
||||
// transform: scaleX(0) rotate(-90deg);
|
||||
// transform: rotateY(-90deg);
|
||||
// transform: scaleX(0);
|
||||
// transition: all 0.2s linear;
|
||||
|
||||
&--visible {
|
||||
// transform: scaleX(1) rotate(0deg);
|
||||
// transform: rotateY(0deg);
|
||||
// transform: scaleX(1);
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: 46rpx;
|
||||
text-transform: capitalize;
|
||||
|
||||
&--gradient {
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
||||
margin-top: 40rpx;
|
||||
|
||||
&__item {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 40rpx;
|
||||
|
||||
&--title {
|
||||
width: 100%;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.4em;
|
||||
color: #FFFFFF;
|
||||
text-transform: capitalize;
|
||||
|
||||
&--light {
|
||||
color: #080808 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--value {
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
color: #AAAAAA;
|
||||
|
||||
&--light {
|
||||
color: #818181 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 右边容器 end */
|
||||
}
|
||||
}
|
||||
|
||||
/* 背景颜色容器 end */
|
||||
|
||||
@-webkit-keyframes circleProgressLoad_right {
|
||||
0% {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes circleProgressLoad_left {
|
||||
0% {
|
||||
transform: rotate(225deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
574
basicPage/flex-layout/flex-layout.vue
Normal file
574
basicPage/flex-layout/flex-layout.vue
Normal file
@@ -0,0 +1,574 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-flex">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Flex布局</tn-nav-bar>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view class="tn-margin-bottom-xl" :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">
|
||||
<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>
|
||||
<view class="tn-flex-basic-sm tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">sm(40%)</view>
|
||||
<view class="tn-flex-basic-md"></view>
|
||||
<view class="tn-flex-basic-md tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">md(50%)</view>
|
||||
<view class="tn-flex-basic-lg tn-padding tn-margin-top-sm tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">lg(60%)</view>
|
||||
<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>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例1
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<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">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-basic-md">
|
||||
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-basic-xs">
|
||||
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-basic-xs">
|
||||
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-basic-xs">
|
||||
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-basic-xs">
|
||||
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-basic-xs">
|
||||
<view class="tn-padding-lg tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <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">
|
||||
<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>
|
||||
</view>
|
||||
<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-2 tn-padding tn-margin-xs tn-radius bg-flex-shadow tn-cool-bg-color-2 tn-shadow-blur">2</view>
|
||||
</view>
|
||||
<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-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>
|
||||
|
||||
<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">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="tn-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">
|
||||
</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-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">
|
||||
</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>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例9
|
||||
</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>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例10
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</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 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">
|
||||
</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">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例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">
|
||||
</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-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例13
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex-3 tn-padding-sm tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur"></view>
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例14
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-margin-sm">
|
||||
<view class="tn-flex-1">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-left-xs tn-margin-right-xs tn-margin-top-sm tn-margin-bottom-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-xl">
|
||||
水平对齐 & justify
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin-sm">
|
||||
<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>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-right tn-margin-top-sm">
|
||||
<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">end</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">end</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-center tn-margin-top-sm">
|
||||
<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">center</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">center</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-around tn-margin-top-sm">
|
||||
<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">around</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">around</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-margin-top-sm">
|
||||
<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>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例1
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<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>
|
||||
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例2
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin">
|
||||
<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">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-margin-xs tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例3
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<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>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例4
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<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">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例5
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<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>
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-lg">
|
||||
应用示例6
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-margin">
|
||||
<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">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
<view class="justify-content-item">
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur">
|
||||
</view>
|
||||
<view class="tn-padding-xl tn-radius bg-flex-shadow tn-shadow-blur" style="margin-top: 20rpx;">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="tn-padding-top">
|
||||
<view class="tn-margin tn-text-bold tn-text-xl">
|
||||
垂直对齐 & align
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-margin-sm">
|
||||
<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>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-col-center tn-margin-top-sm">
|
||||
<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">center</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-col-bottom tn-margin-top-sm">
|
||||
<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>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BasicFlexLayout',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import '@/static/css/components/demo_page_common.scss';
|
||||
|
||||
/* 内容容器 start */
|
||||
.bg-flex-shadow{
|
||||
background-color: #00C3FF;
|
||||
z-index: 9999;
|
||||
}
|
||||
/* 内容容器 end */
|
||||
|
||||
</style>
|
||||
169
basicPage/grid-layout/grid-layout.vue
Normal file
169
basicPage/grid-layout/grid-layout.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-grid">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>Grid布局</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" @click="click">
|
||||
<tn-grid v-if="showGrid" :align="align" :hoverClass="hoverClass" :col="col">
|
||||
<block v-for="(item, index) in icons" :key="index">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<tn-grid-item>
|
||||
<view class="" style="margin: 60rpx 20rpx;font-size: 70rpx;color: #01BEFF;">
|
||||
<text class="" :class="['tn-icon-' + item]"></text>
|
||||
</view>
|
||||
</tn-grid-item>
|
||||
<!-- #endif-->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<tn-grid-item :style="{width: gridItemWidth}">
|
||||
<view class="icon__item--icon tn-cool-color-icon" :class="[$t.colorUtils.getRandomCoolBgClass(index)]">
|
||||
<view class="tn-margin-top-sm" :class="['tn-icon-' + item]"></view>
|
||||
</view>
|
||||
</tn-grid-item>
|
||||
<!-- #endif-->
|
||||
</block>
|
||||
</tn-grid>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'BasicGridLayout',
|
||||
components: {dynamicDemoTemplate},
|
||||
data() {
|
||||
return {
|
||||
showGrid: true,
|
||||
align: 'left',
|
||||
hoverClass: 'tn-hover',
|
||||
col: 3,
|
||||
icons: [
|
||||
'zodiac-shu',
|
||||
'zodiac-niu',
|
||||
'zodiac-hu',
|
||||
'zodiac-tu',
|
||||
'zodiac-long',
|
||||
'zodiac-she',
|
||||
'zodiac-ma',
|
||||
'zodiac-yang',
|
||||
'zodiac-hou',
|
||||
'zodiac-ji',
|
||||
'zodiac-gou',
|
||||
'zodiac-zhu',
|
||||
'logo-tuniao',
|
||||
],
|
||||
|
||||
tips: ['无需依赖额外的样式文件','使用tn-grid、tn-grid-item组件'],
|
||||
sectionList: [
|
||||
{
|
||||
name: '参数切换',
|
||||
section: [
|
||||
{
|
||||
title: '对齐方式',
|
||||
optional: ['左对齐','居中','右对齐'],
|
||||
methods: 'alignChange'
|
||||
},
|
||||
{
|
||||
title: '点击效果',
|
||||
optional: ['开启','关闭'],
|
||||
methods: 'hoverChange'
|
||||
},
|
||||
{
|
||||
title: '列数',
|
||||
optional: ['3','4'],
|
||||
methods: 'colChange'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 兼容小程序
|
||||
// #ifdef MP-WEIXIN
|
||||
gridItemWidth() {
|
||||
return 100 / this.col + '%'
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
click(event) {
|
||||
this[event.methods] && this[event.methods](event)
|
||||
},
|
||||
// 对齐方式控制
|
||||
alignChange(event) {
|
||||
switch(event.index) {
|
||||
case 0:
|
||||
this.align = 'left'
|
||||
break
|
||||
case 1:
|
||||
this.align = 'center'
|
||||
break
|
||||
case 2:
|
||||
this.align = 'right'
|
||||
break
|
||||
}
|
||||
},
|
||||
// 点击效果控制
|
||||
hoverChange(event) {
|
||||
this.hoverClass = event.index === 0 ? 'tn-hover' : 'none'
|
||||
},
|
||||
// 列数修改
|
||||
colChange(event) {
|
||||
this.col = event.index === 0 ? 3 : 4
|
||||
this.$refs.demoTemplate.updateSectionScrollView()
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon {
|
||||
&__item {
|
||||
width: 30%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
margin-top: 0;
|
||||
transform: scale(1);
|
||||
transition: transform 0.3s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin: 30rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg6.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
168
basicPage/icon/icon.vue
Normal file
168
basicPage/icon/icon.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-icon">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>图标</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||
|
||||
<tn-sticky :customNavHeight="vuex_custom_bar_height">
|
||||
<view class="search-content">
|
||||
<input class="search-content__input" placeholder-class="search-content__input-placeholder" placeholder="请输入图标名称吖" @input="saerchInput" />
|
||||
</view>
|
||||
</tn-sticky>
|
||||
|
||||
<view class="icon__container tn-flex tn-flex-wrap tn-flex-row-left tn-flex-col-center tn-margin">
|
||||
<block v-for="(item, index) in resultIconList" :key="index">
|
||||
<view
|
||||
class="icon__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center icon-shadow"
|
||||
:class="[{'icon__item--active': index === currentIconIndex}]"
|
||||
@click="clickIcon(index, item.name)"
|
||||
>
|
||||
<view class="icon__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
|
||||
<view :class="[`tn-icon-${item.name}`]"></view>
|
||||
</view>
|
||||
<view class="icon__item--title tn-text-ellipsis">{{ item.name }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="tn-text-center tn-margin-bottom-xl">
|
||||
<view>目前300+，里面缺少你想要的吗？</view>
|
||||
<view>请前往图鸟语雀留言写下你的需求叭</view>
|
||||
</view>
|
||||
|
||||
<view class="tn-padding-bottom"></view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import iconData from './iconfont.js'
|
||||
export default {
|
||||
name: 'basicIcon',
|
||||
data() {
|
||||
return {
|
||||
// 图标列表
|
||||
iconList: iconData.data,
|
||||
// 用户输入的内容
|
||||
searchValue: '',
|
||||
// 当前点击的图标序号
|
||||
currentIconIndex: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resultIconList() {
|
||||
if (this.searchValue === '') return this.iconList
|
||||
return this.iconList.filter((item) => {
|
||||
return item.name.includes(this.searchValue)
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// input输入的内容
|
||||
saerchInput(e) {
|
||||
this.searchValue = e.target.value
|
||||
},
|
||||
// 点击图标
|
||||
clickIcon(index, name) {
|
||||
this.currentIconIndex = index
|
||||
this.$t.messageUtils.toast(name, false, null, 'none', 5000)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
/* 搜索框 start */
|
||||
.search-content {
|
||||
padding-top: 16rpx;
|
||||
margin: 40rpx 40rpx;
|
||||
|
||||
&__input {
|
||||
caret-color: $tn-main-color;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 100rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
background-color: #FFFFFF;
|
||||
color: #080808;
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&__input-placeholder {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
/* 搜索框 end */
|
||||
|
||||
/* 图标容器 start */
|
||||
.icon-shadow{
|
||||
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.icon {
|
||||
&__container {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
&__item {
|
||||
width: 30.4%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
margin-top: 0;
|
||||
transform: scale(1);
|
||||
transition: transform 0.2s linear;
|
||||
transform-origin: center center;
|
||||
|
||||
&--active {
|
||||
transform: scale(0.95);
|
||||
box-shadow:
|
||||
inset 10rpx 10rpx 18rpx rgba(0, 0, 120, 0.04),
|
||||
inset -8rpx -8rpx 20rpx rgba(0, 0, 120, 0.03);
|
||||
}
|
||||
|
||||
&--icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
font-size: 60rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-radius: inherit;
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
background-size: 100% 100%;
|
||||
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
width: 100%;
|
||||
color: #78909C;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 图标容器 end */
|
||||
|
||||
</style>
|
||||
3
basicPage/icon/iconfont.js
Normal file
3
basicPage/icon/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
118
basicPage/shadow/shadow.vue
Normal file
118
basicPage/shadow/shadow.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-shadow">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>阴影</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<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>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'basicShadow',
|
||||
components: {dynamicDemoTemplate},
|
||||
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;
|
||||
}
|
||||
|
||||
.shadow-image {
|
||||
width: 80%;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
259
basicPage/tag/tag.vue
Normal file
259
basicPage/tag/tag.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<template>
|
||||
|
||||
<view class="basic-tag">
|
||||
|
||||
<!-- 顶部自定义导航 -->
|
||||
<tn-nav-bar fixed>标签</tn-nav-bar>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<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>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="capsule">
|
||||
<tn-tag class="capsule-tag" width="50%" height="100%" padding="0" shape="circleLeft" :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">
|
||||
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">
|
||||
<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">
|
||||
2
|
||||
</tn-tag>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</block>
|
||||
</dynamic-demo-template>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||
export default {
|
||||
name: 'basicTag',
|
||||
components: {dynamicDemoTemplate},
|
||||
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);
|
||||
}
|
||||
/* #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);
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
245
basicPage/test/test.vue
Normal file
245
basicPage/test/test.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<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