mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-06-07 03:53:57 +08:00
新增10+页面模板
新增form表单部分组件的演示代码 新增图标 添加第三方开发插件演示（所属权归属第三方） 新增tn-scroll-view下拉组件开发（会员） 新增tn-stack-swiper堆叠轮播添加垂直滚动属性（会员） 新增tn-waterfall瀑布流组件（会员） 新增tn-tree-view树形菜单组件（会员） 新增tn-cascade-selection级联选择组件（会员） 新增tn-custom-swiper组件（会员【实验室】） 新增tn-lazy-load懒加载组件 新增tn-load-more加载更多组件 新增tn-sekeleton骨架屏组件 新增tn-empty空白页组件 新增tn-landscape压屏窗组件 新增tn-verification-code-input验证码输入组件 新增tn-goods-nav商品导航组件 修复tn-slider在tn-form-item下在H5端无法滑动的bug 修复tn-swipe-action-item点击回调事件中无法读取name属性的bug 修复群友已反馈的bug 优化部分页面在iphone上底部确实的问题
This commit is contained in:
JaylenTech
@@ -85,7 +85,7 @@
|
|||||||
<tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
|
<tn-avatar :badge="true" badgeIcon="vip" :src="src"></tn-avatar>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-margin-sm">
|
<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>
|
<tn-avatar :badge="true" badgeIcon="vip" badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40" :badgePosition="[-8, 18]" :src="src"></tn-avatar>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|||||||
@@ -97,7 +97,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -434,6 +434,9 @@
|
|||||||
return {
|
return {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
baseUrl: 'http://api.youzixy.com'
|
||||||
|
}
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-check-box tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>按钮</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="基础">
|
||||||
|
<tn-checkbox v-model="value1" name="选项1">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox v-model="value1" name="选项2" disabled>选项2(不可点击)</tn-checkbox>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="圆形选框">
|
||||||
|
<tn-checkbox-group shape="circle">
|
||||||
|
<tn-checkbox name="选项1">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项2">选项2</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项3">选项3</tn-checkbox>
|
||||||
|
</tn-checkbox-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="竖直排列">
|
||||||
|
<tn-checkbox-group width="100%" wrap>
|
||||||
|
<tn-checkbox name="选项1">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项2">选项2</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项3">选项3</tn-checkbox>
|
||||||
|
</tn-checkbox-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="禁止点击标签">
|
||||||
|
<tn-checkbox-group disabledLabel>
|
||||||
|
<tn-checkbox name="选项1">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项2">选项2</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项3">选项3</tn-checkbox>
|
||||||
|
</tn-checkbox-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义尺寸">
|
||||||
|
<view>
|
||||||
|
<tn-checkbox-group :size="26" :iconSize="18">
|
||||||
|
<tn-checkbox name="选项1">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项2">选项2</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项3" :size="36" :iconSize="30">选项3</tn-checkbox>
|
||||||
|
</tn-checkbox-group>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-checkbox-group :size="46" :iconSize="40">
|
||||||
|
<tn-checkbox name="选项1">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项2">选项2</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项3">选项3</tn-checkbox>
|
||||||
|
</tn-checkbox-group>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义颜色">
|
||||||
|
<tn-checkbox-group activeColor="#31E749">
|
||||||
|
<tn-checkbox name="选项1">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项2">选项2</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项3" activeColor="#E83A30">选项3</tn-checkbox>
|
||||||
|
</tn-checkbox-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义图标">
|
||||||
|
<tn-checkbox-group>
|
||||||
|
<tn-checkbox name="选项1" iconName="star">选项1</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项2" iconName="fire">选项2</tn-checkbox>
|
||||||
|
<tn-checkbox name="选项3" iconName="like">选项3</tn-checkbox>
|
||||||
|
</tn-checkbox-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsCheckBox',
|
||||||
|
components: {demoTitle},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: false,
|
||||||
|
value2: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-empty tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>空页面</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="内置图标">
|
||||||
|
<block v-for="(item, index) in inlineMode" :key="index">
|
||||||
|
<view class="empty__item">
|
||||||
|
<tn-empty :mode="item"></tn-empty>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义图标">
|
||||||
|
<view class="empty__item">
|
||||||
|
<tn-empty icon="moon-fill" text="夜深人静"></tn-empty>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义图片">
|
||||||
|
<view class="empty__item">
|
||||||
|
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也"></tn-empty>
|
||||||
|
</view>
|
||||||
|
<block v-for="(value, key, index) in imgEmpty" :key="index">
|
||||||
|
<view class="empty__item">
|
||||||
|
<tn-empty :icon="value" :mode="key"></tn-empty>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="隐藏文字">
|
||||||
|
<view class="empty__item">
|
||||||
|
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" mode=""></tn-empty>
|
||||||
|
</view>
|
||||||
|
<view class="empty__item tn-margin-top">
|
||||||
|
<tn-empty icon="help" mode=""></tn-empty>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="带跳转按钮">
|
||||||
|
<view class="empty__item">
|
||||||
|
<tn-empty icon="moon-fill" text="夜深人静">
|
||||||
|
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">看看小视频</tn-button>
|
||||||
|
</tn-empty>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义样式">
|
||||||
|
<view class="empty__item">
|
||||||
|
<tn-empty icon="moon-fill" text="夜深人静" :iconSize="120" :textSize="34" iconColor="#E6E6E6" textColor="#C6D1D8"></tn-empty>
|
||||||
|
</view>
|
||||||
|
<view class="empty__item tn-margin-top">
|
||||||
|
<tn-empty icon="https://tnuiimage.tnkjapp.com/empty/alien/2.png" text="空空如也" :imgWidth="200" :imgHeight="200"></tn-empty>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsEmpty',
|
||||||
|
components: { demoTitle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inlineMode: ['cart','page','search','address','network','order','coupon','favor','permission','history','message','list','data','comment'],
|
||||||
|
imgEmpty: {
|
||||||
|
cart: '/componentsPage/static/images/empty/cart.jpg',
|
||||||
|
comment: '/componentsPage/static/images/empty/comment.jpg',
|
||||||
|
data: '/componentsPage/static/images/empty/data.jpg',
|
||||||
|
network: '/componentsPage/static/images/empty/network.jpg',
|
||||||
|
page: '/componentsPage/static/images/empty/page.jpg',
|
||||||
|
permission: '/componentsPage/static/images/empty/permission.jpg',
|
||||||
|
search: '/componentsPage/static/images/empty/search.jpg'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.components-empty {
|
||||||
|
background-color: $tn-bg-gray-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
&__item {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-goods-nav tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>商品导航</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="基础">
|
||||||
|
<tn-goods-nav></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="选项设置为头像">
|
||||||
|
<tn-goods-nav :options="avatarOptions"></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="设置角标">
|
||||||
|
<tn-goods-nav :options="countOptions"></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="设置边距按钮">
|
||||||
|
<tn-goods-nav buttonType="paddingRect"></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="设置圆角按钮">
|
||||||
|
<tn-goods-nav buttonType="round"></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="不设置选项">
|
||||||
|
<tn-goods-nav :options="[]"></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义颜色">
|
||||||
|
<tn-goods-nav :options="customOptions" buttonType="round" :buttonGroups="customButtonGroups"></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="固定在底部">
|
||||||
|
<tn-goods-nav :fixed="true" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<view style="padding-bottom: 88rpx;"></view>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsGoodsNav',
|
||||||
|
components: { demoTitle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
avatarOptions: [{
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg'
|
||||||
|
},{
|
||||||
|
icon: 'service',
|
||||||
|
text: '客服'
|
||||||
|
},{
|
||||||
|
icon: 'star',
|
||||||
|
text: '收藏'
|
||||||
|
}],
|
||||||
|
countOptions: [{
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
count: 10
|
||||||
|
},{
|
||||||
|
icon: 'service',
|
||||||
|
text: '客服',
|
||||||
|
count: 100
|
||||||
|
},{
|
||||||
|
icon: 'star',
|
||||||
|
text: '收藏'
|
||||||
|
}],
|
||||||
|
customOptions: [{
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
count: 10,
|
||||||
|
countBackgroundColor: '#E83A30'
|
||||||
|
},{
|
||||||
|
icon: 'service',
|
||||||
|
text: '客服',
|
||||||
|
count: 100,
|
||||||
|
countBackgroundColor: 'transparent',
|
||||||
|
countFontColor: '#E83A30'
|
||||||
|
},{
|
||||||
|
icon: 'star',
|
||||||
|
text: '收藏',
|
||||||
|
iconColor: '#838383',
|
||||||
|
fontColor: '#080808'
|
||||||
|
}],
|
||||||
|
customButtonGroups: [{
|
||||||
|
text: '加入购物车',
|
||||||
|
backgroundColor: 'tn-cool-bg-color-8',
|
||||||
|
color: '#FFFFFF'
|
||||||
|
},{
|
||||||
|
text: '结算',
|
||||||
|
backgroundColor: 'tn-cool-bg-color-8--reverse',
|
||||||
|
color: '#FFFFFF'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选项点击事件
|
||||||
|
onOptionClick(e) {
|
||||||
|
this.$t.messageUtils.toast(`点击了第${e.index}个选项`)
|
||||||
|
},
|
||||||
|
// 按钮点击事件
|
||||||
|
onButtonClick(e) {
|
||||||
|
this.$t.messageUtils.toast(`点击了第${e.index}个按钮`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.components-goods-nav {
|
||||||
|
background-color: $tn-bg-gray-color;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,231 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-input tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>Input输入框</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="基本使用" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">文本</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input v-model="inputValue" type="text" placeholder="请输入文本"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="禁止输入" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">文本</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="text" placeholder="请输入文本" disabled></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="对齐方式" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
|
||||||
|
<view class="content__title">居中对齐</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="text" placeholder="请输入文本" inputAlign="center"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">右对齐</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="text" placeholder="请输入文本" inputAlign="right"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="边框" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">文本</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="text" placeholder="请输入文本" border></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
|
||||||
|
<view class="content__title">文本</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="text" placeholder="请输入文本" border borderColor="#01BEFF"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="右边显示图标" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">文本</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="text" placeholder="请输入文本" showRightIcon rightIcon="code"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="文本域" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">文本域</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="textarea" placeholder="请输入文本"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="内置类型" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
|
||||||
|
<view class="content__title">整数</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="number" placeholder="请输入整数"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
|
||||||
|
<view class="content__title">小数</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="digit" placeholder="请输入小数"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
|
||||||
|
<view class="content__title">身份证</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="idcard" placeholder="请输入身份证"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">电话号码</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="密码输入框" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center tn-border-solid-bottom">
|
||||||
|
<view class="content__title">密码</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="password" placeholder="请输入密码"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">密码</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="password" placeholder="请输入密码" :passwordIcon="false"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="弹出选择" :contentPadding="false">
|
||||||
|
<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
|
||||||
|
<view class="content__title">业务</view>
|
||||||
|
<view class="content__data tn-flex-1">
|
||||||
|
<tn-input type="select" placeholder="请选择业务类型" :selectOpen="selectShow" @click="selectShow = true"></tn-input>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="配合formItem使用" :contentPadding="false">
|
||||||
|
<view class="content tn-padding-left tn-padding-right">
|
||||||
|
<tn-form-item label="姓名">
|
||||||
|
<tn-input type="text" placeholder="请输入姓名"></tn-input>
|
||||||
|
</tn-form-item>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-padding-left tn-padding-right">
|
||||||
|
<tn-form-item label="姓名" labelPosition="top" required>
|
||||||
|
<tn-input type="text" placeholder="请输入姓名"></tn-input>
|
||||||
|
</tn-form-item>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-padding-left tn-padding-right">
|
||||||
|
<tn-form-item label="联系电话" :labelWidth="200">
|
||||||
|
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
|
||||||
|
</tn-form-item>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-padding-left tn-padding-right">
|
||||||
|
<tn-form-item label="联系电话" :labelWidth="200" labelAlign="center">
|
||||||
|
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
|
||||||
|
</tn-form-item>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-padding-left tn-padding-right">
|
||||||
|
<tn-form-item label="联系电话" :labelWidth="200" labelAlign="right">
|
||||||
|
<tn-input type="tel" placeholder="请输入电话号码"></tn-input>
|
||||||
|
</tn-form-item>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-padding-left tn-padding-right">
|
||||||
|
<tn-form-item label="验证码" :labelWidth="200">
|
||||||
|
<tn-input type="text" placeholder="请输入验证码"></tn-input>
|
||||||
|
<tn-button slot="right" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">获取验证码</tn-button>
|
||||||
|
</tn-form-item>
|
||||||
|
</view>
|
||||||
|
<view class="content tn-padding-left tn-padding-right">
|
||||||
|
<tn-form-item label="身份证" :labelWidth="200" leftIcon="identity">
|
||||||
|
<tn-input type="idcard" placeholder="请输入身份证号码"></tn-input>
|
||||||
|
</tn-form-item>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 业务类型select -->
|
||||||
|
<tn-select
|
||||||
|
v-model="selectShow"
|
||||||
|
mode="single"
|
||||||
|
:list="selectList"
|
||||||
|
@confirm="businessSelectConfirm"
|
||||||
|
></tn-select>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsInput',
|
||||||
|
components: { demoTitle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: '',
|
||||||
|
selectShow: false,
|
||||||
|
selectList: [
|
||||||
|
{
|
||||||
|
label: '免费',
|
||||||
|
value: 1101
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '会员',
|
||||||
|
value: 1102
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '全新开发',
|
||||||
|
value: 1103
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
businessSelectConfirm() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.components-input {
|
||||||
|
background-color: $tn-bg-gray-color;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
&__data {
|
||||||
|
margin: 10rpx 0;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<view class="components-landscape">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<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">
|
||||||
|
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showLandscape">弹出压屏窗</tn-button></view>
|
||||||
|
</dynamic-demo-template>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 压屏窗-->
|
||||||
|
<tn-landscape
|
||||||
|
:show="show"
|
||||||
|
:closeBtn="closeBtn"
|
||||||
|
:closeColor="closeColor"
|
||||||
|
:closeSize="closeSize"
|
||||||
|
:closePosition="closePosition"
|
||||||
|
:closeTop="closeTop"
|
||||||
|
:closeRight="closeRight"
|
||||||
|
:closeBottom="closeBottom"
|
||||||
|
:closeLeft="closeLeft"
|
||||||
|
:mask="mask"
|
||||||
|
:maskCloseable="maskCloseable"
|
||||||
|
@close="closeLandscape"
|
||||||
|
>
|
||||||
|
<image src="https://tnuiimage.tnkjapp.com/landscape/2022-new-year.png" mode="widthFix"></image>
|
||||||
|
</tn-landscape>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsLandscape',
|
||||||
|
components: {dynamicDemoTemplate},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
closeBtn: true,
|
||||||
|
closeColor: '',
|
||||||
|
closeSize: 0,
|
||||||
|
closePosition: 'rightTop',
|
||||||
|
closeTop: 0,
|
||||||
|
closeRight: 0,
|
||||||
|
closeBottom: 0,
|
||||||
|
closeLeft: 0,
|
||||||
|
mask: true,
|
||||||
|
maskCloseable: true,
|
||||||
|
|
||||||
|
tips: ['无需依赖额外的样式文件','使用tn-landscape组件'],
|
||||||
|
sectionList: [
|
||||||
|
{
|
||||||
|
name: '参数切换',
|
||||||
|
section: [
|
||||||
|
{
|
||||||
|
title: '关闭按钮',
|
||||||
|
optional: ['显示','隐藏'],
|
||||||
|
methods: 'closeBtnChange'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '关闭按钮位置',
|
||||||
|
optional: ['左上','右上','底部'],
|
||||||
|
methods: 'closePositionChange',
|
||||||
|
current: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '自定义关闭按钮',
|
||||||
|
optional: ['默认','自定义'],
|
||||||
|
methods: 'customCloseChange'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '遮罩',
|
||||||
|
optional: ['显示','隐藏'],
|
||||||
|
methods: 'maskChange'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '点击遮罩关闭',
|
||||||
|
optional: ['允许','不允许'],
|
||||||
|
methods: 'maskCloseableChange'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
click(event) {
|
||||||
|
this[event.methods] && this[event.methods](event)
|
||||||
|
},
|
||||||
|
// 弹出压屏窗
|
||||||
|
showLandscape() {
|
||||||
|
this.openLandscape()
|
||||||
|
},
|
||||||
|
// 切换关闭按钮显示隐藏
|
||||||
|
closeBtnChange(event) {
|
||||||
|
switch (event.index) {
|
||||||
|
case 0:
|
||||||
|
this.closeBtn = true
|
||||||
|
this.$refs.demoTemplate.updateSectionBtnsState([1,2], true)
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
this.closeBtn = false
|
||||||
|
this.$refs.demoTemplate.updateSectionBtnsState([1,2], false)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
this.openLandscape()
|
||||||
|
},
|
||||||
|
// 切换关闭按钮位置
|
||||||
|
closePositionChange(event) {
|
||||||
|
switch (event.index) {
|
||||||
|
case 0:
|
||||||
|
this.closePosition = 'leftTop'
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
this.closePosition = 'rightTop'
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
this.closePosition = 'bottom'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
this.$refs.demoTemplate.updateSectionBtnsValue(0, 2, 0)
|
||||||
|
this.customCloseChange({index: 0})
|
||||||
|
this.openLandscape()
|
||||||
|
},
|
||||||
|
// 切换自定义关闭按钮样式
|
||||||
|
customCloseChange(event) {
|
||||||
|
if (event.index === 0) {
|
||||||
|
this.closeTop = 0
|
||||||
|
this.closeRight = 0
|
||||||
|
this.closeBottom = 0
|
||||||
|
this.closeLeft = 0
|
||||||
|
this.closeColor = ''
|
||||||
|
this.closeSize = 0
|
||||||
|
} else if (event.index === 1) {
|
||||||
|
if (this.closePosition === 'leftTop') {
|
||||||
|
this.closeTop = -40
|
||||||
|
this.closeLeft = 30
|
||||||
|
} else if (this.closePosition === 'rightTop') {
|
||||||
|
this.closeTop = -40
|
||||||
|
this.closeRight = 30
|
||||||
|
} else if (this.closePosition === 'bottom') {
|
||||||
|
this.closeBottom = -60
|
||||||
|
}
|
||||||
|
this.closeColor = '#E83A30'
|
||||||
|
this.closeSize = 60
|
||||||
|
}
|
||||||
|
this.openLandscape()
|
||||||
|
},
|
||||||
|
// 切换遮罩显示隐藏
|
||||||
|
maskChange(event) {
|
||||||
|
this.mask = event.index === 0 ? true : false
|
||||||
|
this.openLandscape()
|
||||||
|
},
|
||||||
|
// 切换遮罩关闭状态
|
||||||
|
maskCloseableChange(event) {
|
||||||
|
this.maskCloseable = event.index === 0 ? true : false
|
||||||
|
this.openLandscape()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开压屏窗
|
||||||
|
openLandscape() {
|
||||||
|
this.show = true
|
||||||
|
},
|
||||||
|
// 关闭压屏窗
|
||||||
|
closeLandscape() {
|
||||||
|
this.show = false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-lazy-load">
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>懒加载</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
<view class="content">
|
||||||
|
<block v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="item">
|
||||||
|
<tn-lazy-load
|
||||||
|
:index="index"
|
||||||
|
:image="item.src"
|
||||||
|
:threshold="-450"
|
||||||
|
:height="400"
|
||||||
|
imgMode="aspectFill"
|
||||||
|
></tn-lazy-load>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<tn-load-more :status="status" @loadmore="getData"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsLazyLoad',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
status: 'loadmore',
|
||||||
|
list: [],
|
||||||
|
data: [
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag1.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/bag2.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner1.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner2.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/banner3.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/card.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer1.jpg' },
|
||||||
|
{ src: 'error.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/computer2.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/content.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup1.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/cup2.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/office.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase1.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/phonecase2.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow.jpg' },
|
||||||
|
{ src: 'error.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/pillow2.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch1.jpg' },
|
||||||
|
{ src: 'https://tnuiimage.tnkjapp.com/shop/watch2.jpg' },
|
||||||
|
{ src: 'error.jpg' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
uni.$emit('tOnLazyLoadReachBottom')
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
let index = 0
|
||||||
|
this.status = 'loading'
|
||||||
|
setTimeout(() => {
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
index = this.$t.number.random(0, this.data.length - 1)
|
||||||
|
this.list.push({
|
||||||
|
src: this.data[index].src
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.status = 'loadmore'
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
flex: 0 0 335rpx;
|
||||||
|
height: 400rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-load-more tn-safe-area-inset-bottom">
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>加载更多</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="默认">
|
||||||
|
<tn-load-more></tn-load-more>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="加载中">
|
||||||
|
<tn-load-more status="loading" :loadingIcon="false"></tn-load-more>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="loading"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="loading" loadingIconColor="#01BEFF"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="loading" loadingIconType="flower"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="没有更多">
|
||||||
|
<tn-load-more status="nomore"></tn-load-more>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="nomore" dot></tn-load-more>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="修改提示语">
|
||||||
|
<tn-load-more status="loadmore" :loadText="loadText"></tn-load-more>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="loading" :loadText="loadText"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="修改颜色">
|
||||||
|
<tn-load-more status="loadmore" :loadText="loadText" fontColor="#01BEFF"></tn-load-more>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="loading" :loadText="loadText" fontColor="tn-color-indigo"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-load-more class="tn-margin-top" status="nomore" :loadText="loadText" fontColor="rgba(255, 129, 129, 0.8)"></tn-load-more>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="修改字体尺寸">
|
||||||
|
<tn-load-more :fontSize="32"></tn-load-more>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsLoadMore',
|
||||||
|
components: { demoTitle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loadText: {
|
||||||
|
loadmore: '下拉加载',
|
||||||
|
loading: '快速加载中...',
|
||||||
|
nomore: '已经没有了啊'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="custom-nav-content">
|
<view class="custom-nav-content">
|
||||||
<view class="search-content">
|
<view class="search-content">
|
||||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-nav-bar>
|
</tn-nav-bar>
|
||||||
@@ -46,7 +46,7 @@
|
|||||||
>
|
>
|
||||||
<view class="custom-nav-content">
|
<view class="custom-nav-content">
|
||||||
<view class="search-content">
|
<view class="search-content">
|
||||||
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showLeftIcon="true" leftIcon="search"></tn-input>
|
<tn-input class="search-input" v-model="searchValue" placeholder="请输入要搜索的内容" :border="true" :height="50" :showRightIcon="true" rightIcon="search"></tn-input>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</tn-nav-bar>
|
</tn-nav-bar>
|
||||||
|
|||||||
@@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-radio tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>Radio单选按钮</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="基础">
|
||||||
|
<tn-radio-group>
|
||||||
|
<tn-radio name="选项1">选项1</tn-radio>
|
||||||
|
<tn-radio name="选项2" disabled>选项2(禁止选中)</tn-radio>
|
||||||
|
<tn-radio name="选项3">选项3</tn-radio>
|
||||||
|
</tn-radio-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="方形选框">
|
||||||
|
<tn-radio-group shape="square">
|
||||||
|
<tn-radio name="选项1">选项1</tn-radio>
|
||||||
|
<tn-radio name="选项2">选项2</tn-radio>
|
||||||
|
<tn-radio name="选项3">选项3</tn-radio>
|
||||||
|
</tn-radio-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="竖直排列">
|
||||||
|
<tn-radio-group width="100%" wrap>
|
||||||
|
<tn-radio name="选项1">选项1</tn-radio>
|
||||||
|
<tn-radio name="选项2">选项2</tn-radio>
|
||||||
|
<tn-radio name="选项3">选项3</tn-radio>
|
||||||
|
</tn-radio-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="禁止点击标签">
|
||||||
|
<tn-radio-group :disabledLabel="true">
|
||||||
|
<tn-radio name="选项1">选项1</tn-radio>
|
||||||
|
<tn-radio name="选项2">选项2</tn-radio>
|
||||||
|
<tn-radio name="选项3">选项3</tn-radio>
|
||||||
|
</tn-radio-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义尺寸">
|
||||||
|
<view>
|
||||||
|
<tn-radio-group :size="20" :iconSize="14">
|
||||||
|
<tn-radio name="选项1">选项1</tn-radio>
|
||||||
|
<tn-radio name="选项2">选项2</tn-radio>
|
||||||
|
<tn-radio name="选项3" :size="36" :iconSize="26">选项3</tn-radio>
|
||||||
|
</tn-radio-group>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-radio-group :size="46" :iconSize="36">
|
||||||
|
<tn-radio name="选项1">选项1</tn-radio>
|
||||||
|
<tn-radio name="选项2">选项2</tn-radio>
|
||||||
|
<tn-radio name="选项3">选项3</tn-radio>
|
||||||
|
</tn-radio-group>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义颜色">
|
||||||
|
<tn-radio-group activeColor="#31E749">
|
||||||
|
<tn-radio name="选项1">选项1</tn-radio>
|
||||||
|
<tn-radio name="选项2">选项2</tn-radio>
|
||||||
|
<tn-radio name="选项3" activeColor="#E83A30">选项3</tn-radio>
|
||||||
|
</tn-radio-group>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
export default {
|
||||||
|
name: 'componentsRadio',
|
||||||
|
components: {demoTitle},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,236 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-skeleton tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>骨架屏</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<view class="tn-padding-top"></view>
|
||||||
|
|
||||||
|
<view class="news tn-skeleton">
|
||||||
|
<block v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="news__item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-top">
|
||||||
|
<view class="news__item__info tn-flex tn-flex-direction-row tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="news__item__avatar tn-skeleton-circle">
|
||||||
|
<image :src="item.userInfo.avatar"></image>
|
||||||
|
</view>
|
||||||
|
<view class="news__item__outline tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-around">
|
||||||
|
<view class="news__item__nick-name tn-skeleton-fillet">{{ item.userInfo.nickName}}</view>
|
||||||
|
<view class="news__item__release-date tn-skeleton-fillet">{{ item.content.releaseDate }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="news__item__content tn-flex tn-flex-direction-row tn-flex-col-top tn-flex-row-center">
|
||||||
|
<view class="news__item__content__data">
|
||||||
|
<view class="news__item__title tn-text-ellipsis tn-skeleton-fillet">{{ item.content.title }}</view>
|
||||||
|
<view class="news__item__desc tn-text-ellipsis-2 tn-skeleton-fillet">{{ item.content.desc }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="news__item__main-image tn-skeleton-rect">
|
||||||
|
<image :src="item.content.mainImage" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 引用组件 -->
|
||||||
|
<tn-skeleton :show="showSkeleton"></tn-skeleton>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsSkeleton',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showSkeleton: true,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
userInfo: {
|
||||||
|
avatar: 'https://tnuiimage.tnkjapp.com/avatar/xiaomai1.jpg',
|
||||||
|
nickName: '图鸟科技-北北'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
title: '全新UI框架，tuniaoUI正式发布',
|
||||||
|
desc: '基于uniapp开发的UI框架，tuniaoUI现已正式发布，该UI最大的特点就是酷炫，相对于传统的UI框架，不仅仅提供了组件方便用户进行使用同时提供了酷炫的页面模板，让用户直接使用模板就可以做出精美的页面',
|
||||||
|
mainImage: 'https://tnuiimage.tnkjapp.com/shop/sticker.jpg',
|
||||||
|
releaseDate: '2020年12月30日'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 模拟加载数据完毕
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showSkeleton = false
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.components-skeleton {
|
||||||
|
// background-color: $tn-bg-gray-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.news {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
margin: 0 30rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
box-shadow: 4rpx 6rpx 28rpx 0px rgba(0, 0, 0, 0.1);
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
&__info {
|
||||||
|
height: 80rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
&__avatar {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__outline {
|
||||||
|
height: 100%;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
&__nick-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
&__release-date {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: $tn-font-sub-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
height: 140rpx;
|
||||||
|
&__data {
|
||||||
|
width: 60%;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
&__desc {
|
||||||
|
width: 100%;
|
||||||
|
word-break: break-all;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
&__main-image {
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 5rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -39,6 +39,14 @@
|
|||||||
</tn-slider>
|
</tn-slider>
|
||||||
</demo-title>
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="配合formItem使用">
|
||||||
|
<tn-form>
|
||||||
|
<tn-form-item label="价格区间" :labelWidth="140">
|
||||||
|
<tn-slider v-model="value8"></tn-slider>
|
||||||
|
</tn-form-item>
|
||||||
|
</tn-form>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
<view class="tn-padding-bottom-lg"></view>
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
@@ -60,7 +68,8 @@
|
|||||||
value4: 0,
|
value4: 0,
|
||||||
value5: 0,
|
value5: 0,
|
||||||
value6: 0,
|
value6: 0,
|
||||||
value7: 0
|
value7: 0,
|
||||||
|
value8: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-subsection tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>分段器</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="基本使用">
|
||||||
|
<tn-subsection :list="list"></tn-subsection>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="按钮模式">
|
||||||
|
<tn-subsection :list="list" mode="button"></tn-subsection>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-subsection :list="list" mode="button" :borderRadius="50"></tn-subsection>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="取消切换动画">
|
||||||
|
<tn-subsection :list="list" :animation="false"></tn-subsection>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="贝塞尔曲线切换动画">
|
||||||
|
<tn-subsection :list="list" animationType="cubic-bezier"></tn-subsection>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-subsection :list="list" mode="button" :borderRadius="50" animationType="cubic-bezier"></tn-subsection>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="选中字体设置为粗体">
|
||||||
|
<tn-subsection :list="list" :bold="true"></tn-subsection>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义样式">
|
||||||
|
<tn-subsection :list="list" :height="40" :fontSize="20"></tn-subsection>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-subsection :list="list" mode="button" :borderRadius="50" backgroundColor="tn-cool-bg-color-9" buttonColor="tn-cool-bg-color-7" inactiveColor="#FFFFFF" activeColor="#27A1BA"></tn-subsection>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top">
|
||||||
|
<tn-subsection :list="list" :borderRadius="50" backgroundColor="#FFFFFF" buttonColor="#E83A30" inactiveColor="#838383"></tn-subsection>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsSubsection',
|
||||||
|
components: { demoTitle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: ['全部','未付款','待发货','待收货','待评价']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<view class="components-verification-code-input tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<tn-nav-bar fixed>验证码输入</tn-nav-bar>
|
||||||
|
|
||||||
|
<!-- 页面内容 -->
|
||||||
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
||||||
|
|
||||||
|
<demo-title title="基础使用">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value1"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="居中提示线">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value2" mode="middleLine"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="底部提示线">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value3" mode="bottomLine"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="修改验证码长度">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value4" :maxLength="6"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="使用圆点隐藏已输入">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value5" :dotFill="true"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="不带呼吸效果">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value6" :breathe="false"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="字体加粗">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value7" :bold="true"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<demo-title title="自定义样式">
|
||||||
|
<view class="tn-bg-white">
|
||||||
|
<tn-verification-code-input v-model="value8" :fontSize="40" :inputWidth="60" activeColor="#3D7EFF" inactiveColor="#9EBEFF"></tn-verification-code-input>
|
||||||
|
</view>
|
||||||
|
</demo-title>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-lg"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import demoTitle from '@/libs/components/demo-title.vue'
|
||||||
|
export default {
|
||||||
|
name: 'ComponentsVerificationCode',
|
||||||
|
components: { demoTitle },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value1: '24',
|
||||||
|
value2: '',
|
||||||
|
value3: '',
|
||||||
|
value4: '',
|
||||||
|
value5: '',
|
||||||
|
value6: '',
|
||||||
|
value7: '',
|
||||||
|
value8: '',
|
||||||
|
value9: '',
|
||||||
|
value10: '',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.components-verification-code-input {
|
||||||
|
background-color: $tn-bg-gray-color;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -7,6 +7,10 @@ module.exports = {
|
|||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 更新顶部导航栏信息
|
||||||
|
this.updateCustomBarInfo()
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 点击左上角返回按钮时触发事件
|
// 点击左上角返回按钮时触发事件
|
||||||
goBack() {
|
goBack() {
|
||||||
@@ -14,7 +18,7 @@ module.exports = {
|
|||||||
const pages = getCurrentPages()
|
const pages = getCurrentPages()
|
||||||
if (pages && pages.length > 0) {
|
if (pages && pages.length > 0) {
|
||||||
const firstPage = pages[0]
|
const firstPage = pages[0]
|
||||||
if (!firstPage.route || firstPage.route != 'pages/index/index') {
|
if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url: '/pages/index/index'
|
url: '/pages/index/index'
|
||||||
})
|
})
|
||||||
@@ -28,6 +32,29 @@ module.exports = {
|
|||||||
url: '/pages/index/index'
|
url: '/pages/index/index'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
// 更新顶部导航栏信息
|
||||||
|
async updateCustomBarInfo() {
|
||||||
|
// 获取vuex中的自定义顶栏的高度
|
||||||
|
let customBarHeight = this.vuex_custom_bar_height
|
||||||
|
let statusBarHeight = this.vuex_status_bar_height
|
||||||
|
// 如果获取失败则重新获取
|
||||||
|
if (!customBarHeight) {
|
||||||
|
try {
|
||||||
|
const navBarInfo = await this.$t.updateCustomBar()
|
||||||
|
customBarHeight = navBarInfo.customBarHeight
|
||||||
|
statusBarHeight = navBarInfo.statusBarHeight
|
||||||
|
} catch(e) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updateCustomBarInfo()
|
||||||
|
}, 10)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新vuex中的导航栏信息
|
||||||
|
this.$t.vuex('vuex_status_bar_height', statusBarHeight)
|
||||||
|
this.$t.vuex('vuex_custom_bar_height', customBarHeight)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -81,6 +81,31 @@ export default {
|
|||||||
icon: 'star',
|
icon: 'star',
|
||||||
title: 'fab悬浮按钮',
|
title: 'fab悬浮按钮',
|
||||||
url: '/componentsPage/fab/fab'
|
url: '/componentsPage/fab/fab'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'star',
|
||||||
|
title: '懒加载',
|
||||||
|
url: '/componentsPage/lazy-load/lazy-load'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'star',
|
||||||
|
title: '加载更多',
|
||||||
|
url: '/componentsPage/load-more/load-more'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'star',
|
||||||
|
title: '骨架屏',
|
||||||
|
url: '/componentsPage/skeleton/skeleton'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'star',
|
||||||
|
title: '空页面',
|
||||||
|
url: '/componentsPage/empty/empty'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'star',
|
||||||
|
title: '商品导航',
|
||||||
|
url: '/componentsPage/goods-nav/goods-nav'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -108,6 +133,11 @@ export default {
|
|||||||
title: '提示信息框',
|
title: '提示信息框',
|
||||||
url: '/componentsPage/tips/tips'
|
url: '/componentsPage/tips/tips'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: 'creative',
|
||||||
|
title: '压屏窗',
|
||||||
|
url: '/componentsPage/landscape/landscape'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -119,6 +149,21 @@ export default {
|
|||||||
title: 'Form表单',
|
title: 'Form表单',
|
||||||
url: '/componentsPage/form/form'
|
url: '/componentsPage/form/form'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: 'image-text',
|
||||||
|
title: 'Input输入框',
|
||||||
|
url: '/componentsPage/input/input'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'image-text',
|
||||||
|
title: 'Radio单选框',
|
||||||
|
url: '/componentsPage/radio/radio'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'image-text',
|
||||||
|
title: 'Checkbox复选框',
|
||||||
|
url: '/componentsPage/check-box/check-box'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
icon: 'ticket',
|
icon: 'ticket',
|
||||||
title: 'ActionSheet操作菜单',
|
title: 'ActionSheet操作菜单',
|
||||||
@@ -159,6 +204,16 @@ export default {
|
|||||||
title: '签名板',
|
title: '签名板',
|
||||||
url: '/componentsPage/sign-board/sign-board'
|
url: '/componentsPage/sign-board/sign-board'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: 'edit-write',
|
||||||
|
title: '验证码输入',
|
||||||
|
url: '/componentsPage/verification-code-input/verification-code-input'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'edit-write',
|
||||||
|
title: '分段器',
|
||||||
|
url: '/componentsPage/subsection/subsection'
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
+39
-3
@@ -33,6 +33,30 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '个人中心',
|
||||||
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '夏天个人',
|
||||||
|
author: '可我会像',
|
||||||
|
url: '/templatePage/my/demo1/demo1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '图鸟个人',
|
||||||
|
author: '可我会像',
|
||||||
|
url: '/templatePage/my/demo2/demo2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'send',
|
||||||
|
title: '外卖个人',
|
||||||
|
author: '可我会像',
|
||||||
|
url: '/templatePage/my/demo3/demo3'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '常用首页',
|
title: '常用首页',
|
||||||
backgroundColor: 'tn-cool-bg-color-1',
|
backgroundColor: 'tn-cool-bg-color-1',
|
||||||
@@ -92,6 +116,12 @@ export default {
|
|||||||
author: '可我会像',
|
author: '可我会像',
|
||||||
url: '/templatePage/life/fullpage/fullpage'
|
url: '/templatePage/life/fullpage/fullpage'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: 'like-break',
|
||||||
|
title: '浏览器',
|
||||||
|
author: '可我会像',
|
||||||
|
url: '/templatePage/life/browser/browser'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
icon: 'like-break',
|
icon: 'like-break',
|
||||||
title: '时钟',
|
title: '时钟',
|
||||||
@@ -136,19 +166,25 @@ export default {
|
|||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
icon: 'send',
|
icon: 'send',
|
||||||
title: '3D全景',
|
title: '3D全景(第三方，约120￥一年)',
|
||||||
author: '可我会像 & 芊云全景',
|
author: '可我会像 & 芊云全景',
|
||||||
url: '/templatePage/life/pano/pano'
|
url: '/templatePage/life/pano/pano'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'like-break',
|
icon: 'like-break',
|
||||||
title: '隔壁的小生',
|
title: 'Ucharts图表(第三方，免费开源)',
|
||||||
|
author: '可我会像 & Ucharts秋云',
|
||||||
|
url: '/templatePage/life/candle/candle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'like-break',
|
||||||
|
title: '隔壁的小生(第三方，赞赏6￥可商用)',
|
||||||
author: '隔壁的小生',
|
author: '隔壁的小生',
|
||||||
url: '/templatePage/life/candle/candle'
|
url: '/templatePage/life/candle/candle'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'like-break',
|
icon: 'like-break',
|
||||||
title: '阿凡提·污克西西',
|
title: '阿凡提·污克西西(第三方，免费开源)',
|
||||||
author: '阿凡提·污克西西',
|
author: '阿凡提·污克西西',
|
||||||
url: '/templatePage/life/candle/candle'
|
url: '/templatePage/life/candle/candle'
|
||||||
},
|
},
|
||||||
|
|||||||
+500
-410
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
|
"^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
|
||||||
},
|
},
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
{
|
{
|
||||||
@@ -13,422 +13,512 @@
|
|||||||
],
|
],
|
||||||
"subPackages": [{
|
"subPackages": [{
|
||||||
"root": "basicPage",
|
"root": "basicPage",
|
||||||
"pages": [
|
"pages": [{
|
||||||
{
|
"path": "flex-layout/flex-layout",
|
||||||
"path": "flex-layout/flex-layout",
|
"style": {
|
||||||
"style": {
|
"navigationBarTitleText": "Flex布局",
|
||||||
"navigationBarTitleText": "Flex布局",
|
"enablePullDownRefresh": false
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "grid-layout/grid-layout",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Grid布局",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "color/color",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "配色",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "icon/icon",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "图标",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "button/button",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "按钮",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "tag/tag",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "标签",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "border/border",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "边框",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "shadow/shadow",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "阴影",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "badge/badge",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "微标",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "avatar/avatar",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "头像",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
}, {
|
||||||
},{
|
"path": "grid-layout/grid-layout",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Grid布局",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "color/color",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "配色",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "icon/icon",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "图标",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "button/button",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "按钮",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "tag/tag",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "标签",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "border/border",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "边框",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "shadow/shadow",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "阴影",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "badge/badge",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "微标",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "avatar/avatar",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "头像",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
"root": "componentsPage",
|
"root": "componentsPage",
|
||||||
"pages": [
|
"pages": [{
|
||||||
{
|
"path": "list/list",
|
||||||
"path": "list/list",
|
"style": {
|
||||||
"style": {
|
"navigationBarTitleText": "列表",
|
||||||
"navigationBarTitleText": "列表",
|
"enablePullDownRefresh": false
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "popup/popup",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "弹出层",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "modal/modal",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "模态框",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "toast/toast",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Toast",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "tips/tips",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "提示信息",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "form/form",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Form表单",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "action-sheet/action-sheet",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "操作菜单",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "picker/picker",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Picker选择器",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "select/select",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Select列选择器",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "verification-code/verification-code",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "验证码倒计时",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "loading/loading",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Loading加载",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "switch/switch",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Switch开关",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "progress/progress",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "Progress进度条",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "image-upload/image-upload",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "图片上传",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "rate/rate",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "rate评分",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "slider/slider",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "slider滑动条",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "number-box/number-box",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "numberBox步进输入",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "keyboard/keyboard",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "keyboard键盘",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "tabs/tabs",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "tabs标签",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "count-down/count-down",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "countDown倒计时",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "count-to/count-to",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "countTo数字跳转",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "count-scroll/count-scroll",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "countTo数字滚动",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "sticky/sticky",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "sticky吸顶",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "nav-bar/nav-bar",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "navBar导航栏",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "notice-bar/notice-bar",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "noticeBar通知栏",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "swiper/swiper",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "swiper轮播图",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "collapse/collapse",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "collapse折叠面板",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "read-more/read-more",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "readMore查看更多",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "steps/steps",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "steps步骤条",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "time-line/time-line",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "timeLine时间轴",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "index-list/index-list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "indexList索引列表",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "calendar/calendar",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "calendar日历",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "scroll-list/scroll-list",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "scrollList横向滚动",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "swipe-action/swipe-action",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "swipeAction滑动菜单",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "sign-board/sign-board",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "signBoard签名板",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
// "pageOrientation": "landscape"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "fab/fab",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "fab悬浮按钮",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
// "pageOrientation": "landscape"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
}, {
|
||||||
},{
|
"path": "popup/popup",
|
||||||
"root":"templatePage",
|
"style": {
|
||||||
"pages": [
|
"navigationBarTitleText": "弹出层",
|
||||||
{
|
"enablePullDownRefresh": false
|
||||||
"path": "login/demo1/demo1",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "火箭登录",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "login/demo2/demo2",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "粒子登录",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "login/demo3/demo3",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "背景登录",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "login/demo4/demo4",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "简约登录",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "health/qrcode/qrcode",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "健康码",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "home/course/course",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "课程首页",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "home/music/music",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "音乐首页",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "home/design/design",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "设计首页",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "home/job/job",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "招聘首页",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "home/screen/screen",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "投屏首页",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "home/wallpaper/wallpaper",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "壁纸首页",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "life/fullpage/fullpage",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "全屏轮播",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "life/pano/pano",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "3D全景",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "life/plus/plus",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "会员协议",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "life/candle/candle",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "敬请期待",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "time/clock/clock",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "时钟",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
"path": "animate/loading/loading",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "加载动效",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "animate/particle/particle",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "随机粒子",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "animate/photo/photo",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "相册图集",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"path": "animate/hollow/hollow",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "镂空效果",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
}, {
|
||||||
|
"path": "modal/modal",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "模态框",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "toast/toast",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Toast",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "tips/tips",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "提示信息",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "form/form",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Form表单",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "action-sheet/action-sheet",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "操作菜单",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "picker/picker",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Picker选择器",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "select/select",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Select列选择器",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "verification-code/verification-code",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "验证码倒计时",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "loading/loading",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Loading加载",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "switch/switch",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Switch开关",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "progress/progress",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "Progress进度条",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "image-upload/image-upload",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "图片上传",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "rate/rate",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "rate评分",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "slider/slider",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "slider滑动条",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "number-box/number-box",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "numberBox步进输入",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "keyboard/keyboard",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "keyboard键盘",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "tabs/tabs",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "tabs标签",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "count-down/count-down",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "countDown倒计时",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "count-to/count-to",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "countTo数字跳转",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "count-scroll/count-scroll",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "countTo数字滚动",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "sticky/sticky",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "sticky吸顶",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "nav-bar/nav-bar",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "navBar导航栏",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "notice-bar/notice-bar",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "noticeBar通知栏",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "swiper/swiper",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "swiper轮播图",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "collapse/collapse",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "collapse折叠面板",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "read-more/read-more",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "readMore查看更多",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "steps/steps",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "steps步骤条",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "time-line/time-line",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "timeLine时间轴",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "index-list/index-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "indexList索引列表",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "index-list/base/index-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "indexList索引列表",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "index-list/avatar/index-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "indexList索引列表",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "calendar/calendar",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "calendar日历",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "scroll-list/scroll-list",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "scrollList横向滚动",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "swipe-action/swipe-action",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "swipeAction滑动菜单",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "sign-board/sign-board",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "signBoard签名板",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
// "pageOrientation": "landscape"
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "fab/fab",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "fab悬浮按钮",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "input/input",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "输入框",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "radio/radio",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "单选框",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "check-box/check-box",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "复选框",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "lazy-load/lazy-load",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "懒加载",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "load-more/load-more",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "加载更多",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "skeleton/skeleton",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "骨架屏",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "empty/empty",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "空页面",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}, {
|
||||||
|
"path": "landscape/landscape",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "压屏窗",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "verification-code-input/verification-code-input",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "验证码输入",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "subsection/subsection",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "分段器",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "goods-nav/goods-nav",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "商品导航",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
"root": "templatePage",
|
||||||
|
"pages": [{
|
||||||
|
"path": "login/demo1/demo1",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "火箭登录",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "login/demo2/demo2",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "粒子登录",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "login/demo3/demo3",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "背景登录",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "login/demo4/demo4",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "简约登录",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "health/qrcode/qrcode",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "健康码",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "home/course/course",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "课程首页",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "home/music/music",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "音乐首页",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "home/design/design",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设计首页",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "home/job/job",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "招聘首页",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "home/screen/screen",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "投屏首页",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "home/wallpaper/wallpaper",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "壁纸首页",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "life/fullpage/fullpage",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "全屏轮播",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "life/pano/pano",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "3D全景",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "life/plus/plus",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "会员协议",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "life/candle/candle",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "敬请期待",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "time/clock/clock",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "时钟",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "animate/loading/loading",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "加载动效",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "animate/particle/particle",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "随机粒子",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "animate/photo/photo",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "相册图集",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "animate/hollow/hollow",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "镂空效果",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "my/demo1/demo1",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "夏天个人",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "my/demo2/demo2",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "图鸟个人",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
"path": "my/demo3/demo3",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "外卖个人",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
}]
|
||||||
}],
|
}],
|
||||||
"preloadRule": {
|
"preloadRule": {
|
||||||
"pages/index/index": {
|
"pages/index/index": {
|
||||||
"network":"all",
|
"network": "all",
|
||||||
"packages": ["basicPage","componentsPage","templatePage"]
|
"packages": ["basicPage", "componentsPage", "templatePage"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="basic">
|
<view class="basic tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<view class="top-backgroup">
|
<view class="top-backgroup">
|
||||||
<image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
<image src='https://tnuiimage.tnkjapp.com/index_bg/basic_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
<view class="nav_title tn-cool-bg-color-15">基 / 础 / 元 / 素</view>
|
<view class="nav_title tn-cool-bg-color-15">基 / 础 / 元 / 素</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class='nav-list tn-margin-bottom'>
|
<view class='nav-list'>
|
||||||
|
|
||||||
<block v-for="(item, index) in navList" :key="index">
|
<block v-for="(item, index) in navList" :key="index">
|
||||||
<navigator
|
<navigator
|
||||||
@@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="tn-padding-bottom-xs"></view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="components">
|
<view class="components tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<view class="top-backgroup">
|
<view class="top-backgroup">
|
||||||
<image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
<image src='https://tnuiimage.tnkjapp.com/index_bg/components_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||||
@@ -34,7 +34,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<view class="tn-padding-bottom"></view>
|
<view class="tn-padding-bottom-xs"></view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="vip">
|
<view class="template tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<view class="top-backgroup">
|
<view class="top-backgroup">
|
||||||
<image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
<image src='https://tnuiimage.tnkjapp.com/index_bg/template_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<view class="tn-padding-bottom"></view>
|
<view class="tn-padding-bottom-xs"></view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -134,25 +134,6 @@
|
|||||||
// align-items: center;
|
// align-items: center;
|
||||||
// justify-content: space-between;
|
// justify-content: space-between;
|
||||||
|
|
||||||
|
|
||||||
.author-title{
|
|
||||||
position: absolute;
|
|
||||||
z-index: -1;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
bottom: -100%;
|
|
||||||
border-radius: 10upx;
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #000000;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 元素标题 start */
|
/* 元素标题 start */
|
||||||
.nav-link {
|
.nav-link {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
+3
-13
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="about">
|
<view class="about tn-safe-area-inset-bottom">
|
||||||
|
|
||||||
<view class="top-backgroup">
|
<view class="top-backgroup">
|
||||||
<image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
<image src='https://tnuiimage.tnkjapp.com/index_bg/about_new.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||||
@@ -8,20 +8,10 @@
|
|||||||
<view class="about__wrap">
|
<view class="about__wrap">
|
||||||
<!-- 头像用户信息 -->
|
<!-- 头像用户信息 -->
|
||||||
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||||
<!-- #ifdef H5 -->
|
|
||||||
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
|
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
|
||||||
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
|
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="user-info__nick-name">图鸟科技</view>
|
<view class="user-info__nick-name">图鸟小伙伴</view>
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
|
||||||
<view class="user-info__avatar">
|
|
||||||
<open-data type="userAvatarUrl"></open-data>
|
|
||||||
</view>
|
|
||||||
<view class="user-info__nick-name" style="height: 50rpx;">
|
|
||||||
<open-data type="userNickName"></open-data>
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 数据信息 -->
|
<!-- 数据信息 -->
|
||||||
@@ -106,7 +96,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="tn-padding-bottom"></view>
|
<view class="tn-padding-bottom-xs"></view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -67,8 +67,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="hollow">
|
<view class="hollow">
|
||||||
<view class="tn-text-xxl">
|
<view class="tn-text-xxl">
|
||||||
<text class="">Hi，</text>
|
<text class="">Hi，图鸟的小伙伴</text>
|
||||||
<open-data type="userNickName"></open-data>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-text-xl tn-padding-top">
|
<view class="tn-text-xl tn-padding-top">
|
||||||
技术的友情，有你真好
|
技术的友情，有你真好
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-screen">
|
<view class="template-screen tn-safe-area-inset-bottom">
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<!-- <tn-nav-bar fixed alpha customBack>
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
<view slot="back" class='tn-custom-nav-bar__back'
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
@@ -131,7 +131,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- 图文 -->
|
<!-- 图文 -->
|
||||||
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 170rpx;">
|
<view class="tn-bg-white tn-flex tn-flex-direction-column" style="padding-bottom: 110rpx;">
|
||||||
|
|
||||||
<block v-for="(item,index) in content" :key="index">
|
<block v-for="(item,index) in content" :key="index">
|
||||||
<view class="tn-blogger-content__wrap">
|
<view class="tn-blogger-content__wrap">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-course">
|
<view class="template-course tn-safe-area-inset-bottom">
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<!-- <tn-nav-bar fixed alpha customBack>
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
<view slot="back" class='tn-custom-nav-bar__back'
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 比例 start-->
|
<!-- 比例 start-->
|
||||||
<view class="tn-flex tn-flex-wrap tn-margin-sm tn-padding-bottom-xl" style="padding-bottom: 170rpx;">
|
<view class="tn-flex tn-flex-wrap tn-margin-sm">
|
||||||
<block v-for="(item, index) in content" :key="index">
|
<block v-for="(item, index) in content" :key="index">
|
||||||
<view class="" style="width: 50%;">
|
<view class="" style="width: 50%;">
|
||||||
<view class="tn-blogger-content__wrap">
|
<view class="tn-blogger-content__wrap">
|
||||||
@@ -195,6 +195,7 @@
|
|||||||
<view class="tn-color-gray">我的</view>
|
<view class="tn-color-gray">我的</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
<!-- 回到首页悬浮按钮-->
|
<!-- 回到首页悬浮按钮-->
|
||||||
<nav-index-button></nav-index-button>
|
<nav-index-button></nav-index-button>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-design">
|
<view class="template-design tn-safe-area-inset-bottom">
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<!-- <tn-nav-bar fixed alpha customBack>
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
<view slot="back" class='tn-custom-nav-bar__back'
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
@@ -71,7 +71,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- 图文 -->
|
<!-- 图文 -->
|
||||||
<view class="tn-flex tn-flex-direction-column tn-margin-bottom">
|
<view class="tn-flex tn-flex-direction-column">
|
||||||
|
|
||||||
<block v-for="(item,index) in content" :key="index">
|
<block v-for="(item,index) in content" :key="index">
|
||||||
<view class="tn-blogger-content__wrap">
|
<view class="tn-blogger-content__wrap">
|
||||||
@@ -154,6 +154,7 @@
|
|||||||
<view class="tn-color-gray">我的</view>
|
<view class="tn-color-gray">我的</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
<!-- 回到首页悬浮按钮-->
|
<!-- 回到首页悬浮按钮-->
|
||||||
<nav-index-button></nav-index-button>
|
<nav-index-button></nav-index-button>
|
||||||
@@ -353,7 +354,6 @@
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
.template-design{
|
.template-design{
|
||||||
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
|
|
||||||
}
|
}
|
||||||
/* 图标容器10 start */
|
/* 图标容器10 start */
|
||||||
.icon10 {
|
.icon10 {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-job">
|
<view class="template-job tn-safe-area-inset-bottom">
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<!-- <tn-nav-bar fixed alpha customBack>
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
<view slot="back" class='tn-custom-nav-bar__back'
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 方式16 start-->
|
<!-- 方式16 start-->
|
||||||
<view class="tn-flex tn-flex-wrap tn-margin job-shadow tn-margin-bottom-xl">
|
<view class="tn-flex tn-flex-wrap tn-margin job-shadow">
|
||||||
<block v-for="(item, index) in icons" :key="index">
|
<block v-for="(item, index) in icons" :key="index">
|
||||||
<view class=" " style="width: 25%;">
|
<view class=" " style="width: 25%;">
|
||||||
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-padding-xl">
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-padding-xl">
|
||||||
@@ -74,6 +74,51 @@
|
|||||||
</view>
|
</view>
|
||||||
<!-- 方式16 end-->
|
<!-- 方式16 end-->
|
||||||
|
|
||||||
|
<!-- 底部tabbar start-->
|
||||||
|
<view class="tabbar footerfixed">
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-level">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-home.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-black">职位</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-level">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-honor.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-black">简历</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-circle tn-shadow-blur">
|
||||||
|
<view class="tn-icon-message-fill tn-color-white">
|
||||||
|
</view>
|
||||||
|
<!-- <image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image> -->
|
||||||
|
</view>
|
||||||
|
<!-- <view class="tn-color-gray">发布</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-level">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-up.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-black">提升</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-signpost tn-color-gray--dark">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/job-my.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">我的</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
<!-- 回到首页悬浮按钮-->
|
<!-- 回到首页悬浮按钮-->
|
||||||
<nav-index-button></nav-index-button>
|
<nav-index-button></nav-index-button>
|
||||||
|
|
||||||
@@ -286,6 +331,8 @@
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
|
.template-job{
|
||||||
|
}
|
||||||
/* 自定义导航栏内容 start */
|
/* 自定义导航栏内容 start */
|
||||||
.custom-nav {
|
.custom-nav {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -436,4 +483,76 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* 图标容器16 end */
|
/* 图标容器16 end */
|
||||||
|
|
||||||
|
/* 底部tabbar start*/
|
||||||
|
.footerfixed{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 110rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action {
|
||||||
|
font-size: 22rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon {
|
||||||
|
width: 100rpx;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 10rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 42rpx;
|
||||||
|
// line-height: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon image {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-circle {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin: -30rpx auto 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 52rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
background-color: #E72F8C;
|
||||||
|
width: 90rpx !important;
|
||||||
|
height: 90rpx !important;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(231, 47, 140, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-circle image {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 15rpx auto 15rpx;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-music">
|
<view class="template-music tn-safe-area-inset-bottom">
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<!-- <tn-nav-bar fixed alpha customBack>
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
<view slot="back" class='tn-custom-nav-bar__back'
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
@@ -120,7 +120,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
|
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom tn-margin-sm">
|
||||||
|
|
||||||
<block v-for="(item,index) in content" :key="index">
|
<block v-for="(item,index) in content" :key="index">
|
||||||
<view class="tn-blogger-content__wrap">
|
<view class="tn-blogger-content__wrap">
|
||||||
@@ -205,6 +205,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
<!-- 回到首页悬浮按钮-->
|
<!-- 回到首页悬浮按钮-->
|
||||||
<nav-index-button></nav-index-button>
|
<nav-index-button></nav-index-button>
|
||||||
@@ -403,7 +404,6 @@
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
.template-music{
|
.template-music{
|
||||||
margin-bottom: calc(110rpx + env(safe-area-inset-bottom) / 2);;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 自定义导航栏内容 start */
|
/* 自定义导航栏内容 start */
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-screen">
|
<view class="template-screen tn-safe-area-inset-bottom">
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<!-- <tn-nav-bar fixed alpha customBack>
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
<view slot="back" class='tn-custom-nav-bar__back'
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
@@ -134,7 +134,7 @@
|
|||||||
<!-- 方式7 end-->
|
<!-- 方式7 end-->
|
||||||
|
|
||||||
<!-- 图文 -->
|
<!-- 图文 -->
|
||||||
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 170rpx;">
|
<view class="tn-bg-white tn-flex tn-flex-direction-column tn-padding-bottom" style="padding-bottom: 110rpx;">
|
||||||
|
|
||||||
<block v-for="(item,index) in content" :key="index">
|
<block v-for="(item,index) in content" :key="index">
|
||||||
<view class="tn-blogger-content__wrap">
|
<view class="tn-blogger-content__wrap">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="template-wallpaper" style="background-color: #343434;">
|
<view class="template-wallpaper tn-safe-area-inset-bottom" style="background-color: #343434;">
|
||||||
<!-- 顶部自定义导航 -->
|
<!-- 顶部自定义导航 -->
|
||||||
<!-- <tn-nav-bar fixed alpha customBack>
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
<view slot="back" class='tn-custom-nav-bar__back'
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
@@ -106,7 +106,7 @@
|
|||||||
<!-- 比例 end-->
|
<!-- 比例 end-->
|
||||||
|
|
||||||
<!-- 图文 -->
|
<!-- 图文 -->
|
||||||
<view class="tn-flex tn-flex-direction-column tn-padding-bottom">
|
<view class="tn-flex tn-flex-direction-column">
|
||||||
|
|
||||||
<block v-for="(item,index) in content" :key="index">
|
<block v-for="(item,index) in content" :key="index">
|
||||||
<view class="tn-blogger-content__wrap">
|
<view class="tn-blogger-content__wrap">
|
||||||
@@ -148,6 +148,35 @@
|
|||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部tabbar start-->
|
||||||
|
<view class="tabbar footerfixed">
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-home-smile">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-home.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-white">首页</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-watercup tn-color-gray">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-more.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">投稿</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-ticket tn-color-gray">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/wallpaper-my.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">我的</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
<!-- 回到首页悬浮按钮-->
|
<!-- 回到首页悬浮按钮-->
|
||||||
<nav-index-button></nav-index-button>
|
<nav-index-button></nav-index-button>
|
||||||
|
|
||||||
@@ -358,6 +387,8 @@
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
|
.template-wallpaper{
|
||||||
|
}
|
||||||
/* 自定义导航栏内容 start */
|
/* 自定义导航栏内容 start */
|
||||||
.custom-nav {
|
.custom-nav {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -531,4 +562,53 @@
|
|||||||
}
|
}
|
||||||
/* 文章内容 end*/
|
/* 文章内容 end*/
|
||||||
|
|
||||||
|
/* 底部tabbar start*/
|
||||||
|
.footerfixed{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #080808;
|
||||||
|
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 110rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action {
|
||||||
|
font-size: 22rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon {
|
||||||
|
width: 100rpx;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 10rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon image {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
<text class="tn-text-xl-xxl"> / </text>
|
<text class="tn-text-xl-xxl"> / </text>
|
||||||
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
|
<text class="tn-text-xxl tn-padding-left-sm">终身</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格）</view>
|
<view class="tn-margin-bottom-xl">（大约等于1个前端页面价格💕）</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
@@ -61,7 +61,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">期待你的5星好评</view>
|
<view class="tn-text-bold">期待你的5星(⭐⭐⭐⭐⭐)好评</view>
|
||||||
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
|
<view class="tn-margin-bottom-xl">（尽管图鸟UI不是我最完美的作品）</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -71,7 +71,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">项目正式开始于2021年10月，于12月30上线</view>
|
<view class="tn-text-bold">项目正式开始于2021年10月，12月30开源公测，2022年1月30上线正式版</view>
|
||||||
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
|
<view class="tn-margin-bottom-xl">（期间断断续续的在接单恰饭）</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">会员特权</view>
|
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-vip-fill tn-padding-right-xs"></text> 会员特权 <text class="tn-icon-vip-fill tn-padding-left-xs"></text></view>
|
||||||
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
|
<view class="">①会员尊享更多酷炫模板，模板持续更新</view>
|
||||||
<view class="">②优先响应会员页面模板需求，icon需求</view>
|
<view class="">②优先响应会员页面模板需求，icon需求</view>
|
||||||
<view class="">③会员版本更新，在会员群进行代码发送</view>
|
<view class="">③会员版本更新，在会员群进行代码发送</view>
|
||||||
@@ -89,7 +89,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="plus-text">
|
<view class="plus-text">
|
||||||
<view class="tn-text-bold">关于作者</view>
|
<view class="tn-text-bold tn-text-xxl"> <text class="tn-icon-moon-fill tn-padding-right-xs"></text> 关于作者 <text class="tn-icon-moon-fill tn-padding-left-xs"></text></view>
|
||||||
<view class="">蔡北北，95年，广州</view>
|
<view class="">蔡北北，95年，广州</view>
|
||||||
<view class="">浮夸UI设计</view>
|
<view class="">浮夸UI设计</view>
|
||||||
<view class="">菜鸡软件开发</view>
|
<view class="">菜鸡软件开发</view>
|
||||||
|
|||||||
@@ -0,0 +1,343 @@
|
|||||||
|
<template>
|
||||||
|
<view class="template-about tn-safe-area-inset-bottom">
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
|
@click="goBack">
|
||||||
|
<text class='icon tn-icon-left'></text>
|
||||||
|
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||||
|
</view>
|
||||||
|
</tn-nav-bar> -->
|
||||||
|
|
||||||
|
|
||||||
|
<view class="top-backgroup">
|
||||||
|
<image src='https://tnuiimage.tnkjapp.com/swiper/summer.jpg' mode='widthFix' class='backgroud-image'></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="about__wrap">
|
||||||
|
<!-- 头像用户信息 -->
|
||||||
|
<view class="user-info__container tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
||||||
|
<view class="user-info__avatar tn-bg-grey--light tn-flex tn-flex-col-center tn-flex-row-center">
|
||||||
|
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;"></view>
|
||||||
|
</view>
|
||||||
|
<view class="user-info__nick-name">图鸟科技</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 消息&数据 -->
|
||||||
|
<view class="tn-shadow-warp" style="margin-top: 100rpx;border-radius: 12rpx;background-color: rgba(255,255,255,1);">
|
||||||
|
<view class="tn-flex">
|
||||||
|
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="">
|
||||||
|
<view class="tn-text-xxl tn-color-orange">1.29W</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
|
||||||
|
<text class="tn-icon-fire"></text>
|
||||||
|
<text class="tn-padding-left-xs">人气</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="">
|
||||||
|
<view class="tn-text-xxl tn-color-blue">216</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
|
||||||
|
<text class="tn-icon-share-circle"></text>
|
||||||
|
<text class="tn-padding-left-xs">分享</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-flex-1 tn-padding-sm tn-margin-xs">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="">
|
||||||
|
<view class="tn-text-xxl tn-color-red">962</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-top-xs tn-color-gray tn-text-df tn-text-center">
|
||||||
|
<text class="tn-icon-like"></text>
|
||||||
|
<text class="tn-padding-left-xs">爱心</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 更多信息-->
|
||||||
|
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
|
||||||
|
<view class="tn-icon-logo-tuniao"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
|
||||||
|
<view class="tn-icon-like-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
|
||||||
|
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
|
||||||
|
<view class="tn-icon-set-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
|
||||||
|
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 更多信息-->
|
||||||
|
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
|
||||||
|
<view class="tn-icon-wechat-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
|
||||||
|
<view class="tn-icon-message-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
|
||||||
|
<view class="tn-icon-phone-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
|
||||||
|
<view class="tn-icon-safe-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部tabbar start-->
|
||||||
|
<view class="tabbar footerfixed">
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-home-smile">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">首页</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-discover">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">圈子</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-image-text">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">案例</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-my">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-black">我的</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 回到首页悬浮按钮-->
|
||||||
|
<nav-index-button></nav-index-button>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||||
|
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||||
|
export default {
|
||||||
|
name: 'about-demo-1',
|
||||||
|
mixins: [template_page_mixin],
|
||||||
|
components: { NavIndexButton },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
|
.template-about{
|
||||||
|
}
|
||||||
|
/* 顶部背景图 start */
|
||||||
|
.top-backgroup {
|
||||||
|
height: 450rpx;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
.backgroud-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 667rpx;
|
||||||
|
// z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 顶部背景图 end */
|
||||||
|
|
||||||
|
/* 页面 start*/
|
||||||
|
.about-shadow{
|
||||||
|
border-radius: 15rpx;
|
||||||
|
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin: 20rpx 30rpx;
|
||||||
|
margin-top: -330rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 页面 end*/
|
||||||
|
|
||||||
|
/* 用户信息 start */
|
||||||
|
.user-info {
|
||||||
|
&__container {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&__avatar {
|
||||||
|
width: 170rpx;
|
||||||
|
height: 170rpx;
|
||||||
|
border: 8rpx solid rgba(255,255,255,0.05);
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nick-name {
|
||||||
|
margin-top: 26rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 用户信息 end */
|
||||||
|
/* 图标容器1 start */
|
||||||
|
.icon1 {
|
||||||
|
&__item {
|
||||||
|
// width: 30%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 20rpx 10rpx;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
transform-origin: center center;
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 图标容器1 end */
|
||||||
|
|
||||||
|
/* 底部tabbar start*/
|
||||||
|
.footerfixed{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 110rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action {
|
||||||
|
font-size: 22rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon {
|
||||||
|
width: 100rpx;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 10rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon image {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,801 @@
|
|||||||
|
<template>
|
||||||
|
<view class="template-about tn-safe-area-inset-bottom">
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
|
@click="goBack">
|
||||||
|
<text class='icon tn-icon-left'></text>
|
||||||
|
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||||
|
</view>
|
||||||
|
</tn-nav-bar> -->
|
||||||
|
|
||||||
|
|
||||||
|
<view class="top-backgroup">
|
||||||
|
<image src='https://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<button @click="navTuniaoHome">
|
||||||
|
<view class="dong">
|
||||||
|
<view class="monster">
|
||||||
|
<view class="monster__face">
|
||||||
|
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
|
||||||
|
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||||
|
</view>
|
||||||
|
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
|
||||||
|
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||||
|
</view>
|
||||||
|
<view class="monster__noses">
|
||||||
|
<view class="monster__nose"></view>
|
||||||
|
<view class="monster__nose"></view>
|
||||||
|
</view>
|
||||||
|
<view class="monster__mouth">
|
||||||
|
<view class="monster__top"></view>
|
||||||
|
<view class="monster__bottom"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<view class="about__wrap">
|
||||||
|
|
||||||
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||||
|
<view class="justify-content-item">
|
||||||
|
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||||
|
<!-- 图标logo -->
|
||||||
|
<view class="logo-pic tn-shadow" >
|
||||||
|
<view class="logo-image">
|
||||||
|
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-right tn-color-white">
|
||||||
|
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
|
||||||
|
图鸟小伙伴
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">欢迎访问图鸟UI</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 方式7 start-->
|
||||||
|
<view class="tn-flex tn-padding-top-xl" style="margin-top: -20rpx;">
|
||||||
|
<view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/my/my17.png' mode='aspectFit'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/my/my14.png' mode='aspectFit'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 方式7 end-->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 更多信息-->
|
||||||
|
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
|
||||||
|
<view class="tn-icon-logo-tuniao"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">关于图鸟</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
|
||||||
|
<view class="tn-icon-like-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
|
||||||
|
<!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
|
||||||
|
<view class="tn-icon-set-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">更新日志</view>
|
||||||
|
<!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 更多信息-->
|
||||||
|
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
|
||||||
|
<view class="tn-icon-wechat-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
|
||||||
|
<view class="tn-icon-message-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
|
||||||
|
<view class="tn-icon-phone-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
|
||||||
|
<view class="tn-icon-safe-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部tabbar start-->
|
||||||
|
<view class="tabbar footerfixed">
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-home-smile">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">首页</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-discover">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">圈子</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-image-text">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">案例</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-my">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-black">我的</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 回到首页悬浮按钮-->
|
||||||
|
<nav-index-button></nav-index-button>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||||
|
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||||
|
export default {
|
||||||
|
name: 'about-demo-2',
|
||||||
|
mixins: [template_page_mixin],
|
||||||
|
components: { NavIndexButton },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转到
|
||||||
|
navTuniaoHome(e) {
|
||||||
|
wx.vibrateLong();
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
|
.template-about{
|
||||||
|
}
|
||||||
|
/* 顶部背景图 start */
|
||||||
|
.top-backgroup {
|
||||||
|
height: 450rpx;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
.backgroud-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 667rpx;
|
||||||
|
// z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 顶部背景图 end */
|
||||||
|
|
||||||
|
/* 用户头像 start */
|
||||||
|
.logo-image{
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
position: relative;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.logo-pic{
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
// background-attachment:fixed;
|
||||||
|
background-position:top;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面 start*/
|
||||||
|
.about-shadow{
|
||||||
|
border-radius: 15rpx;
|
||||||
|
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin: 20rpx 30rpx;
|
||||||
|
margin-top: -230rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 页面 end*/
|
||||||
|
|
||||||
|
.my-shadow{
|
||||||
|
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标容器7 start */
|
||||||
|
.icon7 {
|
||||||
|
&__item {
|
||||||
|
width: 30%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 10rpx;
|
||||||
|
margin: 20rpx 10rpx;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
transform-origin: center center;
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
font-size: 60rpx;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-bottom: 18rpx;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标容器1 start */
|
||||||
|
.icon1 {
|
||||||
|
&__item {
|
||||||
|
// width: 30%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 20rpx 10rpx;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
transform-origin: center center;
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 图标容器1 end */
|
||||||
|
|
||||||
|
/* 底部tabbar start*/
|
||||||
|
.footerfixed{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 110rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action {
|
||||||
|
font-size: 22rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon {
|
||||||
|
width: 100rpx;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 10rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon image {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 大嘴鸟*/
|
||||||
|
.dong {
|
||||||
|
z-index: 9999;
|
||||||
|
position: fixed;
|
||||||
|
top: -40px;
|
||||||
|
right: -80px;
|
||||||
|
transform: scale(0.24);
|
||||||
|
-webkit-transform: scale(0.24);
|
||||||
|
-moz-transform: scale(0.24);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster {
|
||||||
|
transform: rotate(-50deg);
|
||||||
|
-ms-transform: rotate(-50deg);
|
||||||
|
/* IE 9 */
|
||||||
|
-moz-transform: rotate(-50deg);
|
||||||
|
/* Firefox */
|
||||||
|
-webkit-transform: rotate(-50deg);
|
||||||
|
/* Safari 和 Chrome */
|
||||||
|
-o-transform: rotate(-50deg);
|
||||||
|
/* Opera */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
width: 170px;
|
||||||
|
height: 400px;
|
||||||
|
border-top-left-radius: 200px;
|
||||||
|
border-top-right-radius: 200px;
|
||||||
|
background-color: #3C47D7;
|
||||||
|
box-shadow: 20px 20px 60px #4650E5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__face {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
top: 14%;
|
||||||
|
width: 75%;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__noses {
|
||||||
|
top: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 28%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__nose {
|
||||||
|
width: 8px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__mouth {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 0%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 25px solid #FFC333;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: #810332;
|
||||||
|
animation: mouth 1.75s infinite;
|
||||||
|
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__mouth::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: #400018;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__mouth::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -80px;
|
||||||
|
width: 160px;
|
||||||
|
height: 80px;
|
||||||
|
border-top-left-radius: 50%;
|
||||||
|
border-top-right-radius: 50%;
|
||||||
|
background-color: #DC1B50;
|
||||||
|
animation: tongue 1.75s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__top {
|
||||||
|
position: absolute;
|
||||||
|
top: -30px;
|
||||||
|
width: 170px;
|
||||||
|
height: 30px;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
z-index: 100;
|
||||||
|
animation: t 1.75s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
z-index: 100;
|
||||||
|
animation: b 1.75s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-eye {
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
width: 65px;
|
||||||
|
height: 65px;
|
||||||
|
background: linear-gradient(105deg, white, #cb87f4);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
margin: 3px;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-eye--green {
|
||||||
|
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-eye--violet {
|
||||||
|
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.eye--left {
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye--right {
|
||||||
|
left: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye--center {
|
||||||
|
left: 45%;
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-eye-pupil {
|
||||||
|
position: absolute;
|
||||||
|
width: 55%;
|
||||||
|
height: 55%;
|
||||||
|
left: 50%;
|
||||||
|
top: 25%;
|
||||||
|
-webkit-transform: translate(-50%);
|
||||||
|
transform: translate(-50%);
|
||||||
|
z-index: 100;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pupil--green {
|
||||||
|
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pupil--pink {
|
||||||
|
background: linear-gradient(135deg, #f1a183, #8535cd);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-eye-pupil-blackThing {
|
||||||
|
position: absolute;
|
||||||
|
width: 55%;
|
||||||
|
height: 55%;
|
||||||
|
left: 50%;
|
||||||
|
top: 25%;
|
||||||
|
background: #2c2f32;
|
||||||
|
-webkit-transform: translate(-50%);
|
||||||
|
transform: translate(-50%);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-eye-pupil-lightReflection {
|
||||||
|
position: absolute;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
left: 25%;
|
||||||
|
top: 10%;
|
||||||
|
background: #ebebeb;
|
||||||
|
-webkit-transform: translate(-50%);
|
||||||
|
transform: translate(-50%);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**/
|
||||||
|
@keyframes t {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
10%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
top: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
top: -0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes b {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
10%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
bottom: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
bottom: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
bottom: -0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
bottom: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mouth {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
10%,
|
||||||
|
100% {
|
||||||
|
width: 100%;
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
15% {
|
||||||
|
width: 90%;
|
||||||
|
height: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
width: 50%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
width: 80%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
35% {
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
width: 55%;
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
width: 50%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
width: 40%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
55% {
|
||||||
|
width: 70%;
|
||||||
|
height: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
width: 40%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
65% {
|
||||||
|
width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
width: 100%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
width: 90%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
width: 50%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
85% {
|
||||||
|
width: 90%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
85% {
|
||||||
|
width: 40%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
width: 90%;
|
||||||
|
height: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tongue {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
20%,
|
||||||
|
100% {
|
||||||
|
bottom: -80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
30%,
|
||||||
|
90% {
|
||||||
|
bottom: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
bottom: -45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
bottom: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
bottom: -80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
bottom: -40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,955 @@
|
|||||||
|
<template>
|
||||||
|
<view class="template-about tn-safe-area-inset-bottom">
|
||||||
|
<!-- 顶部自定义导航 -->
|
||||||
|
<!-- <tn-nav-bar fixed alpha customBack>
|
||||||
|
<view slot="back" class='tn-custom-nav-bar__back'
|
||||||
|
@click="goBack">
|
||||||
|
<text class='icon tn-icon-left'></text>
|
||||||
|
<text class='icon tn-icon-home-capsule-fill'></text>
|
||||||
|
</view>
|
||||||
|
</tn-nav-bar> -->
|
||||||
|
|
||||||
|
|
||||||
|
<view class="top-backgroup">
|
||||||
|
<image src='https://tnuiimage.tnkjapp.com/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<button @click="navTuniaoHome">
|
||||||
|
<view class="dong">
|
||||||
|
<view class="monster">
|
||||||
|
<view class="monster__face">
|
||||||
|
<view class="monster__eye avatar-eye avatar-eye--green eye--left">
|
||||||
|
<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||||
|
</view>
|
||||||
|
<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
|
||||||
|
<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
|
||||||
|
</view>
|
||||||
|
<view class="monster__noses">
|
||||||
|
<view class="monster__nose"></view>
|
||||||
|
<view class="monster__nose"></view>
|
||||||
|
</view>
|
||||||
|
<view class="monster__mouth">
|
||||||
|
<view class="monster__top"></view>
|
||||||
|
<view class="monster__bottom"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<view class="about__wrap">
|
||||||
|
|
||||||
|
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||||
|
<view class="justify-content-item">
|
||||||
|
<view class="tn-flex tn-flex-col-center tn-flex-row-left">
|
||||||
|
<!-- 图标logo -->
|
||||||
|
<view class="logo-pic tn-shadow" >
|
||||||
|
<view class="logo-image">
|
||||||
|
<view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-right tn-color-white">
|
||||||
|
<view class="tn-padding-right tn-padding-left-sm tn-text-xxl">
|
||||||
|
图鸟小伙伴
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">亲爱的会员你好吖</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 更多信息-->
|
||||||
|
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm tn-color-black tn-bg-white">
|
||||||
|
<!-- 方式12 start-->
|
||||||
|
<view class="tn-flex tn-flex-row-center tn-radius">
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-vip"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">我的订单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-money"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">余额充值</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-ticket"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">消费明细</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-lucky-money"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">红包卡券</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-flex tn-flex-row-center tn-radius">
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-shop"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">积分商城</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-order"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">积分订单</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-star"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">店铺收藏</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-sm tn-margin-xs tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="tn-icon-map"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-text-center">
|
||||||
|
<text class="tn-text-ellipsis">收货地址</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 方式12 end-->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="tn-flex tn-flex-row-between tn-padding-top-xl">
|
||||||
|
<view class="justify-content-item tn-text-bold tn-text-lg">
|
||||||
|
<text class="">更多功能</text>
|
||||||
|
</view>
|
||||||
|
<view class="justify-content-item tn-text-df">
|
||||||
|
<text class="tn-padding-xs">全部</text>
|
||||||
|
<text class="tn-icon-right"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 更多信息-->
|
||||||
|
<view class="about-shadow tn-margin-top tn-padding-top-sm tn-padding-bottom-sm">
|
||||||
|
<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
|
||||||
|
<view class="tn-flex tn-margin-left-sm tn-margin-right-sm tn-margin-top">
|
||||||
|
<block v-for="(item, index) in historyData" :key="index">
|
||||||
|
<view class="tn-flex-1 tn-padding-sm tn-radius">
|
||||||
|
<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
|
||||||
|
<view class="icon11__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
|
||||||
|
<view :class="[`tn-icon-${item.icon}`]"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-black tn-text-df tn-text-center tn-margin-top-sm">
|
||||||
|
<text class="tn-text-ellipsis" >{{ item.title }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</tn-scroll-list>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 更多信息-->
|
||||||
|
<view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
|
||||||
|
<view class="tn-icon-wechat-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
|
||||||
|
<view class="tn-icon-message-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">问题反馈</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
|
||||||
|
<view class="tn-icon-phone-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">技术支持</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
|
||||||
|
<view class="tn-flex tn-flex-col-center">
|
||||||
|
<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
|
||||||
|
<view class="tn-icon-safe-fill"></view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-margin-left-sm tn-flex-1">会员协议</view>
|
||||||
|
<view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
|
||||||
|
</view>
|
||||||
|
</tn-list-cell>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部tabbar start-->
|
||||||
|
<view class="tabbar footerfixed">
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-home-smile">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/home_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">首页</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-discover">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/information_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">圈子</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-image-text">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/case_tn.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-gray">福利</view>
|
||||||
|
</view>
|
||||||
|
<view class="action">
|
||||||
|
<view class="bar-icon">
|
||||||
|
<!-- <view class="tn-icon-my">
|
||||||
|
</view> -->
|
||||||
|
<image class="" src='https://tnuiimage.tnkjapp.com/tabbar/my_tnnew.png'></image>
|
||||||
|
</view>
|
||||||
|
<view class="tn-color-black">我的</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-padding-xl"></view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 回到首页悬浮按钮-->
|
||||||
|
<nav-index-button></nav-index-button>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
|
||||||
|
import NavIndexButton from '@/libs/components/nav-index-button.vue'
|
||||||
|
export default {
|
||||||
|
name: 'about-demo-3',
|
||||||
|
mixins: [template_page_mixin],
|
||||||
|
components: { NavIndexButton },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
historyData: [
|
||||||
|
{
|
||||||
|
title: '分销中心',
|
||||||
|
icon: 'organizatio',
|
||||||
|
color: 'orange',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '积分商城',
|
||||||
|
icon: 'level',
|
||||||
|
color: 'purple',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '限时秒杀',
|
||||||
|
icon: 'clock',
|
||||||
|
color: 'blue',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '社区团购',
|
||||||
|
icon: 'team',
|
||||||
|
color: 'purplered',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '大转盘',
|
||||||
|
icon: 'group-circle',
|
||||||
|
color: 'teal',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '商品核销',
|
||||||
|
icon: 'scan',
|
||||||
|
color: 'orangered',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '满减优惠',
|
||||||
|
icon: 'coupon',
|
||||||
|
color: 'indigo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '视频直播',
|
||||||
|
icon: 'video',
|
||||||
|
color: 'green',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 跳转到
|
||||||
|
navTuniaoHome(e) {
|
||||||
|
wx.vibrateLong();
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/index/index'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/static/css/templatePage/custom_nav_bar.scss';
|
||||||
|
.template-about{
|
||||||
|
}
|
||||||
|
/* 顶部背景图 start */
|
||||||
|
.top-backgroup {
|
||||||
|
height: 450rpx;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
.backgroud-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 667rpx;
|
||||||
|
// z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 顶部背景图 end */
|
||||||
|
|
||||||
|
/* 用户头像 start */
|
||||||
|
.logo-image{
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.logo-pic{
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
// background-attachment:fixed;
|
||||||
|
background-position:top;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面 start*/
|
||||||
|
.about-shadow{
|
||||||
|
border-radius: 15rpx;
|
||||||
|
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin: 20rpx 30rpx;
|
||||||
|
margin-top: -230rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 页面 end*/
|
||||||
|
|
||||||
|
/* 图标容器1 start */
|
||||||
|
.icon1 {
|
||||||
|
&__item {
|
||||||
|
// width: 30%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 20rpx 10rpx;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
transform-origin: center center;
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 图标容器1 end */
|
||||||
|
|
||||||
|
/* 底部tabbar start*/
|
||||||
|
.footerfixed{
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 110rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0;
|
||||||
|
height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action {
|
||||||
|
font-size: 22rpx;
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon {
|
||||||
|
width: 100rpx;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: auto;
|
||||||
|
margin: 0 auto 10rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabbar .action .bar-icon image {
|
||||||
|
width: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标容器12 start */
|
||||||
|
.icon12 {
|
||||||
|
&__item {
|
||||||
|
width: 30%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 20rpx 10rpx;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
transform-origin: center center;
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
font-size: 60rpx;
|
||||||
|
// border-radius: 50%;
|
||||||
|
margin-bottom: 0rpx;
|
||||||
|
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);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标容器11 start */
|
||||||
|
.icon11 {
|
||||||
|
&__item {
|
||||||
|
width: 30%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin: 20rpx 10rpx;
|
||||||
|
transform: scale(1);
|
||||||
|
transition: transform 0.3s linear;
|
||||||
|
transform-origin: center center;
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 大嘴鸟*/
|
||||||
|
.dong {
|
||||||
|
z-index: 9999;
|
||||||
|
position: fixed;
|
||||||
|
top: -40px;
|
||||||
|
right: -80px;
|
||||||
|
transform: scale(0.24);
|
||||||
|
-webkit-transform: scale(0.24);
|
||||||
|
-moz-transform: scale(0.24);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster {
|
||||||
|
transform: rotate(-50deg);
|
||||||
|
-ms-transform: rotate(-50deg);
|
||||||
|
/* IE 9 */
|
||||||
|
-moz-transform: rotate(-50deg);
|
||||||
|
/* Firefox */
|
||||||
|
-webkit-transform: rotate(-50deg);
|
||||||
|
/* Safari 和 Chrome */
|
||||||
|
-o-transform: rotate(-50deg);
|
||||||
|
/* Opera */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
width: 170px;
|
||||||
|
height: 400px;
|
||||||
|
border-top-left-radius: 200px;
|
||||||
|
border-top-right-radius: 200px;
|
||||||
|
background-color: #3C47D7;
|
||||||
|
box-shadow: 20px 20px 60px #4650E5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__face {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
top: 14%;
|
||||||
|
width: 75%;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__noses {
|
||||||
|
top: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 28%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__nose {
|
||||||
|
width: 8px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__mouth {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 0%;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 25px solid #FFC333;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: #810332;
|
||||||
|
animation: mouth 1.75s infinite;
|
||||||
|
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__mouth::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: #400018;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__mouth::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -80px;
|
||||||
|
width: 160px;
|
||||||
|
height: 80px;
|
||||||
|
border-top-left-radius: 50%;
|
||||||
|
border-top-right-radius: 50%;
|
||||||
|
background-color: #DC1B50;
|
||||||
|
animation: tongue 1.75s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__top {
|
||||||
|
position: absolute;
|
||||||
|
top: -30px;
|
||||||
|
width: 170px;
|
||||||
|
height: 30px;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
z-index: 100;
|
||||||
|
animation: t 1.75s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monster__bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
border-top-left-radius: 10px;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
z-index: 100;
|
||||||
|
animation: b 1.75s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-eye {
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
width: 65px;
|
||||||
|
height: 65px;
|
||||||
|
background: linear-gradient(105deg, white, #cb87f4);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
margin: 3px;
|
||||||
|
-webkit-transform: translateX(-50%);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-eye--green {
|
||||||
|
background: linear-gradient(to bottom, #fdfdfd, #c3efea);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-eye--violet {
|
||||||
|
background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.eye--left {
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye--right {
|
||||||
|
left: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye--center {
|
||||||
|
left: 45%;
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-eye-pupil {
|
||||||
|
position: absolute;
|
||||||
|
width: 55%;
|
||||||
|
height: 55%;
|
||||||
|
left: 50%;
|
||||||
|
top: 25%;
|
||||||
|
-webkit-transform: translate(-50%);
|
||||||
|
transform: translate(-50%);
|
||||||
|
z-index: 100;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pupil--green {
|
||||||
|
background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pupil--pink {
|
||||||
|
background: linear-gradient(135deg, #f1a183, #8535cd);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-eye-pupil-blackThing {
|
||||||
|
position: absolute;
|
||||||
|
width: 55%;
|
||||||
|
height: 55%;
|
||||||
|
left: 50%;
|
||||||
|
top: 25%;
|
||||||
|
background: #2c2f32;
|
||||||
|
-webkit-transform: translate(-50%);
|
||||||
|
transform: translate(-50%);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-eye-pupil-lightReflection {
|
||||||
|
position: absolute;
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
left: 25%;
|
||||||
|
top: 10%;
|
||||||
|
background: #ebebeb;
|
||||||
|
-webkit-transform: translate(-50%);
|
||||||
|
transform: translate(-50%);
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**/
|
||||||
|
@keyframes t {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
10%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
top: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
top: -0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes b {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
10%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
bottom: -30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
bottom: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
bottom: -0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
bottom: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mouth {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
10%,
|
||||||
|
100% {
|
||||||
|
width: 100%;
|
||||||
|
height: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
15% {
|
||||||
|
width: 90%;
|
||||||
|
height: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
width: 50%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
width: 70%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
width: 80%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
35% {
|
||||||
|
width: 60%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
width: 55%;
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
width: 50%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
width: 40%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
55% {
|
||||||
|
width: 70%;
|
||||||
|
height: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
width: 40%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
65% {
|
||||||
|
width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
width: 100%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
width: 90%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
width: 50%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
85% {
|
||||||
|
width: 90%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
85% {
|
||||||
|
width: 40%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
width: 90%;
|
||||||
|
height: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
95% {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes tongue {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
20%,
|
||||||
|
100% {
|
||||||
|
bottom: -80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
30%,
|
||||||
|
90% {
|
||||||
|
bottom: -40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
bottom: -45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
bottom: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
bottom: -80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
bottom: -40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="show" class="tn-empty-class tn-empty" :style="[emptyStyle]">
|
||||||
|
<view
|
||||||
|
v-if="!isImage"
|
||||||
|
class="tn-empty__icon"
|
||||||
|
:class="[icon ? `tn-icon-${icon}` : `tn-icon-empty-${mode}`]"
|
||||||
|
:style="[iconStyle]"
|
||||||
|
></view>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
class="tn-empty__image"
|
||||||
|
:style="[imageStyle]"
|
||||||
|
:src="icon"
|
||||||
|
mode="widthFix"
|
||||||
|
></image>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="tn-empty__text"
|
||||||
|
:style="[textStyle]"
|
||||||
|
>{{ text ? text : icons[mode]}}</view>
|
||||||
|
<view v-if="$slots.default || $slots.$default" class="tn-empty__slot">
|
||||||
|
<slot/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tn-empty',
|
||||||
|
props: {
|
||||||
|
// 显示空白页
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 内置icon的名称
|
||||||
|
// 图片路径，建议使用绝对路径
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 预置图标类型
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'data'
|
||||||
|
},
|
||||||
|
// 提示文字
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 文字颜色
|
||||||
|
textColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 文字大小，单位rpx
|
||||||
|
textSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 图标颜色
|
||||||
|
iconColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 图标大小，单位rpx
|
||||||
|
iconSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 图片宽度（当图标为图片时生效），单位rpx
|
||||||
|
imgWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 图片高度（当图标为图片时生效），单位rpx
|
||||||
|
imgHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 自定义组件样式
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
emptyStyle() {
|
||||||
|
let style = {}
|
||||||
|
Object.assign(style, this.customStyle)
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
iconStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (this.iconSize) {
|
||||||
|
style.fontSize = this.iconSize + 'rpx'
|
||||||
|
}
|
||||||
|
if (this.iconColor) {
|
||||||
|
style.color = this.iconColor
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
imageStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (this.imgWidth) {
|
||||||
|
style.width = this.imgWidth + 'rpx'
|
||||||
|
}
|
||||||
|
if (this.imgHeight) {
|
||||||
|
style.height = this.imgHeight + 'rpx'
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
textStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (this.textColor) {
|
||||||
|
style.color = this.textColor
|
||||||
|
}
|
||||||
|
if (this.textSize) {
|
||||||
|
style.fontSize = this.textSize + 'rpx'
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
// 判断传递的icon是否为图片
|
||||||
|
isImage() {
|
||||||
|
return this.icon.indexOf('/') >= 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
icons: {
|
||||||
|
cart: '购物车为空',
|
||||||
|
page: '页面不存在',
|
||||||
|
search: '搜索结果为空',
|
||||||
|
address: '地址为空',
|
||||||
|
network: '网络不通',
|
||||||
|
order: '订单为空',
|
||||||
|
coupon: '优惠券为空',
|
||||||
|
favor: '暂无收藏',
|
||||||
|
permission: '无权限',
|
||||||
|
history: '历史记录为空',
|
||||||
|
message: '暂无消息',
|
||||||
|
list: '列表为空',
|
||||||
|
data: '暂无数据',
|
||||||
|
comment: '暂无评论'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tn-empty {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-top: 14rpx;
|
||||||
|
color: #AAAAAA;
|
||||||
|
font-size: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
color: #AAAAAA;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__slot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,359 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="tn-goods-nav-class tn-goods-nav"
|
||||||
|
:class="[
|
||||||
|
backgroundColorClass,
|
||||||
|
{
|
||||||
|
'tn-goods-nav--fixed': fixed,
|
||||||
|
'tn-safe-area-inset-bottom': safeAreaInsetBottom
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
:style="[backgroundColorStyle, navStyle]"
|
||||||
|
>
|
||||||
|
<view class="options">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in optionsData"
|
||||||
|
:key="index"
|
||||||
|
class="options__item"
|
||||||
|
:class="[{'options__item--avatar': item.showAvatar}]"
|
||||||
|
@tap="handleOptionClick(index)"
|
||||||
|
>
|
||||||
|
<block v-if="item.showAvatar">
|
||||||
|
<tn-avatar
|
||||||
|
:src="item.avatar"
|
||||||
|
size="sm"
|
||||||
|
:badge="item.showBadge"
|
||||||
|
:badgeText="item.count"
|
||||||
|
:badgeBgColor="item.countBackgroundColor"
|
||||||
|
:badgeColor="item.countFontColor"
|
||||||
|
:badgeSize="26"
|
||||||
|
></tn-avatar>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="options__item__icon" :class="[`tn-icon-${item.icon}`]" :style="[optionStyle(index, 'icon')]">
|
||||||
|
<tn-badge v-if="item.showBadge" :absolute="true" :backgroundColor="item.countBackgroundColor" :fontColor="item.countFontColor" :fontSize="16" padding="2rpx 5rpx">{{ item.count }}</tn-badge>
|
||||||
|
</view>
|
||||||
|
<view class="options__item__text" :style="[optionStyle(index, 'text')]">{{ item.text }}</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="buttons">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in buttonGroupsData"
|
||||||
|
:key="index"
|
||||||
|
class="buttons__item"
|
||||||
|
:class="[buttonClass(index)]"
|
||||||
|
:style="[buttonStyle(index)]"
|
||||||
|
@tap="handleButtonClick(index)"
|
||||||
|
>
|
||||||
|
<view class="buttons__item__text">{{ item.text }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tn-goods-nav',
|
||||||
|
props: {
|
||||||
|
// 选项信息
|
||||||
|
// 建议不超过3个
|
||||||
|
// {
|
||||||
|
// icon: '', // 图标名称
|
||||||
|
// text: '', // 显示的文本
|
||||||
|
// count: '', // 角标的值
|
||||||
|
// countBackgroundColor: '', // 角标背景颜色
|
||||||
|
// countFontColor: '', // 角标字体颜色
|
||||||
|
// iconColor: '', // 图标颜色
|
||||||
|
// textColor: '', // 文本颜色
|
||||||
|
// avatar: '', // 显示头像（此时将不显示图标和文本）
|
||||||
|
// }
|
||||||
|
options: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [{
|
||||||
|
icon: 'shop',
|
||||||
|
text: '店铺'
|
||||||
|
},{
|
||||||
|
icon: 'service',
|
||||||
|
text: '客服'
|
||||||
|
},{
|
||||||
|
icon: 'star',
|
||||||
|
text: '收藏'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 按钮组
|
||||||
|
// 建议不超过2个
|
||||||
|
// {
|
||||||
|
// text: '', // 显示的文本
|
||||||
|
// backgroundColor: '', // 按钮背景颜色
|
||||||
|
// color: '' // 文本颜色
|
||||||
|
// }
|
||||||
|
buttonGroups: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [{
|
||||||
|
text: '加入购物车',
|
||||||
|
backgroundColor: '#FFA726',
|
||||||
|
color: '#FFFFFF'
|
||||||
|
},{
|
||||||
|
text: '结算',
|
||||||
|
backgroundColor: '#FF7043',
|
||||||
|
color: '#FFFFFF'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 背景颜色
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 导航的高度，单位rpx
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 导航的层级
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 按钮类型
|
||||||
|
// rect -> 方形 paddingRect -> 上下带边距方形 round -> 圆角
|
||||||
|
buttonType: {
|
||||||
|
type: String,
|
||||||
|
default: 'rect'
|
||||||
|
},
|
||||||
|
// 是否固定在底部
|
||||||
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
|
||||||
|
safeAreaInsetBottom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
backgroundColorStyle() {
|
||||||
|
return this.$t.colorUtils.getBackgroundColorStyle(this.backgroundColor)
|
||||||
|
},
|
||||||
|
backgroundColorClass() {
|
||||||
|
return this.$t.colorUtils.getBackgroundColorInternalClass(this.backgroundColor)
|
||||||
|
},
|
||||||
|
navStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (this.height) {
|
||||||
|
style.height = this.height + 'rpx'
|
||||||
|
}
|
||||||
|
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.goodsNav
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
// 选项style
|
||||||
|
optionStyle() {
|
||||||
|
return (index, type) => {
|
||||||
|
let style = {}
|
||||||
|
const item = this.optionsData[index]
|
||||||
|
if (type === 'icon' && item.iconColor) {
|
||||||
|
style.color = item.iconColor
|
||||||
|
} else if (type === 'text' && item.fontColor) {
|
||||||
|
style.color = item.fontColor
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 按钮class
|
||||||
|
buttonClass() {
|
||||||
|
return (index) => {
|
||||||
|
let clazz = ''
|
||||||
|
const item = this.buttonGroupsData[index]
|
||||||
|
if (item.backgroundColorClass) {
|
||||||
|
clazz += ` ${item.backgroundColorClass}`
|
||||||
|
}
|
||||||
|
if (item.colorClass) {
|
||||||
|
clazz += ` ${item.colorClass}`
|
||||||
|
}
|
||||||
|
|
||||||
|
clazz += ` buttons__item--${this.$t.string.humpConvertChar(this.buttonType, '-')}`
|
||||||
|
|
||||||
|
return clazz
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 按钮style
|
||||||
|
buttonStyle() {
|
||||||
|
return (index) => {
|
||||||
|
let style = {}
|
||||||
|
const item = this.buttonGroupsData[index]
|
||||||
|
if (item.backgroundColorStyle) {
|
||||||
|
style.backgroundColor = item.backgroundColorStyle
|
||||||
|
}
|
||||||
|
if (item.colorStyle) {
|
||||||
|
style.color = item.colorStyle
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
options(val) {
|
||||||
|
this.initData()
|
||||||
|
},
|
||||||
|
buttonGroups(val) {
|
||||||
|
this.initData()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 保存选项数据
|
||||||
|
optionsData: [],
|
||||||
|
// 保存按钮组数据
|
||||||
|
buttonGroupsData: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化选项和按钮数据
|
||||||
|
initData() {
|
||||||
|
this.handleOptionsData()
|
||||||
|
this.handleButtonGroupsData()
|
||||||
|
},
|
||||||
|
// 选项点击事件
|
||||||
|
handleOptionClick(index) {
|
||||||
|
this.$emit('optionClick', {
|
||||||
|
index: index
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 按钮点击事件
|
||||||
|
handleButtonClick(index) {
|
||||||
|
this.$emit('buttonClick', {
|
||||||
|
index: index
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 处理选项组数据
|
||||||
|
handleOptionsData() {
|
||||||
|
this.optionsData = this.options.map((item) => {
|
||||||
|
let option = {...item}
|
||||||
|
option.showAvatar = item.hasOwnProperty('avatar')
|
||||||
|
if (item.hasOwnProperty('count')) {
|
||||||
|
const count = this.$t.number.formatNumberString(item.count, 2)
|
||||||
|
option.showBadge = true
|
||||||
|
option.count = typeof count === 'number' ? String(count) : count
|
||||||
|
option.countBackgroundColor = item.countBackgroundColor ? item.countBackgroundColor : '#01BEFF'
|
||||||
|
option.countFontColor = item.countFontColor ? item.countFontColor : '#FFFFFF'
|
||||||
|
}
|
||||||
|
|
||||||
|
return option
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 处理按钮组数据
|
||||||
|
handleButtonGroupsData() {
|
||||||
|
this.buttonGroupsData = this.buttonGroups.map((item) => {
|
||||||
|
let button = {...item}
|
||||||
|
if (item.hasOwnProperty('backgroundColor')) {
|
||||||
|
button.backgroundColorClass = this.$t.colorUtils.getBackgroundColorInternalClass(item.backgroundColor)
|
||||||
|
button.backgroundColorStyle = this.$t.colorUtils.getBackgroundColorStyle(item.backgroundColor)
|
||||||
|
}
|
||||||
|
if (item.hasOwnProperty('color')) {
|
||||||
|
button.colorClass = this.$t.colorUtils.getBackgroundColorInternalClass(item.color)
|
||||||
|
button.colorStyle = this.$t.colorUtils.getBackgroundColorStyle(item.color)
|
||||||
|
}
|
||||||
|
return button
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tn-goods-nav {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 88rpx;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: content-box;
|
||||||
|
|
||||||
|
&--fixed {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
color: #AAAAAA;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
padding: 0 26rpx;
|
||||||
|
|
||||||
|
&--avatar {
|
||||||
|
padding: 0rpx 0rpx 0rpx 26rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
position: relative;
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&--rect {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--padding-rect {
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--round {
|
||||||
|
height: 75%;
|
||||||
|
&:first-child {
|
||||||
|
border-top-left-radius: 100rpx;
|
||||||
|
border-bottom-left-radius: 100rpx;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-top-right-radius: 100rpx;
|
||||||
|
border-bottom-right-radius: 100rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,225 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tn-landscape-class tn-landscape">
|
||||||
|
<view v-if="showValue" class="tn-landscape__container" :style="[containerStyle]">
|
||||||
|
<slot></slot>
|
||||||
|
<view
|
||||||
|
v-if="closeBtn"
|
||||||
|
class="tn-landscape__icon tn-icon-close-fill"
|
||||||
|
:class="[{
|
||||||
|
'tn-landscape__icon--left-top': closePosition === 'leftTop',
|
||||||
|
'tn-landscape__icon--right-top': closePosition === 'rightTop',
|
||||||
|
'tn-landscape__icon--bottom': closePosition === 'bottom'
|
||||||
|
}]"
|
||||||
|
:style="[closeBtnStyle]"
|
||||||
|
@tap="close"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="mask"
|
||||||
|
class="tn-landscape__mask"
|
||||||
|
:class="[{'tn-landscape__mask--show': showValue}]"
|
||||||
|
:style="[maskStyle]"
|
||||||
|
@tap="closeMask"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tn-landscape',
|
||||||
|
props: {
|
||||||
|
// 显示
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 显示关闭图标
|
||||||
|
closeBtn: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 关闭图标颜色
|
||||||
|
closeColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 关闭图标大小，单位rpx
|
||||||
|
closeSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 关闭图标位置
|
||||||
|
// leftTop -> 左上角 rightTop -> 右上角 bottom -> 底部
|
||||||
|
closePosition: {
|
||||||
|
type: String,
|
||||||
|
default: 'rightTop'
|
||||||
|
},
|
||||||
|
// 关闭图标top值，单位rpx
|
||||||
|
// 当关闭图标在leftTop或者rightTop时生效
|
||||||
|
closeTop: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 关闭图标right值，单位rpx
|
||||||
|
// 当关闭图标在RightTop时生效
|
||||||
|
closeRight: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 关闭图标bottom值，单位rpx
|
||||||
|
// 当关闭图标在bottom时生效
|
||||||
|
closeBottom: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 关闭图标left值，单位rpx
|
||||||
|
// 当关闭图标在leftTop时生效
|
||||||
|
closeLeft: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 显示遮罩
|
||||||
|
mask: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 点击遮罩可以关闭
|
||||||
|
maskCloseable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// zIndex
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
containerStyle() {
|
||||||
|
let style = {}
|
||||||
|
style.zIndex = this.zIndex ? this.zIndex : this.$t.zIndex.landsacpe
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
closeBtnStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (this.closePosition === 'leftTop') {
|
||||||
|
if (this.closeTop) {
|
||||||
|
style.top = this.closeTop + 'rpx'
|
||||||
|
}
|
||||||
|
if (this.closeLeft) {
|
||||||
|
style.left = this.closeLeft + 'rpx'
|
||||||
|
}
|
||||||
|
} else if (this.closePosition === 'rightTop') {
|
||||||
|
if (this.closeTop) {
|
||||||
|
style.top = this.closeTop + 'rpx'
|
||||||
|
}
|
||||||
|
if (this.closeRight) {
|
||||||
|
style.right = this.closeRight + 'rpx'
|
||||||
|
}
|
||||||
|
} else if (this.closePosition === 'bottom') {
|
||||||
|
if (this.closeBottom) {
|
||||||
|
style.bottom = this.closeBottom + 'rpx'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.closeSize) {
|
||||||
|
style.fontSize = this.closeSize + 'rpx'
|
||||||
|
}
|
||||||
|
if (this.closeColor) {
|
||||||
|
style.color = this.closeColor
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
maskStyle() {
|
||||||
|
let style = {}
|
||||||
|
style.zIndex = this.zIndex ? this.zIndex - 1 : this.$t.zIndex.landsacpe - 1
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show: {
|
||||||
|
handler(val) {
|
||||||
|
this.showValue = val
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showValue: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 关闭压屏窗
|
||||||
|
close() {
|
||||||
|
this.showValue = false
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
|
// 点击遮罩关闭
|
||||||
|
closeMask() {
|
||||||
|
if (!this.maskCloseable) return
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tn-landscape {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
max-width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 50rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
|
||||||
|
&--left-top {
|
||||||
|
top: -40rpx;
|
||||||
|
left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--right-top {
|
||||||
|
top: -40rpx;
|
||||||
|
right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--bottom {
|
||||||
|
left: 50%;
|
||||||
|
bottom: -40rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mask {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: $tn-mask-bg-color;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale3d(1, 1, 0);
|
||||||
|
transition: all 0.25s ease-in;
|
||||||
|
|
||||||
|
&--show {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: scale3d(1, 1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,254 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tn-lazy-load-class tn-lazy-load">
|
||||||
|
<view
|
||||||
|
class="tn-lazy-load__item"
|
||||||
|
:class="[`tn-lazy-load__item--${elIndex}`]"
|
||||||
|
:style="[lazyLoadItemStyle]"
|
||||||
|
>
|
||||||
|
<view class="tn-lazy-load__item__content">
|
||||||
|
<image
|
||||||
|
v-if="!error"
|
||||||
|
class="tn-lazy-load__item__image"
|
||||||
|
:style="[imageStyle]"
|
||||||
|
:src="show ? image : loadingImg"
|
||||||
|
:mode="imgMode"
|
||||||
|
@load="handleImgLoaded"
|
||||||
|
@error="handleImgError"
|
||||||
|
@tap="handleImgClick"
|
||||||
|
></image>
|
||||||
|
<image
|
||||||
|
v-else
|
||||||
|
class="tn-lazy-load__item__image tn-lazy-load__item__image--error"
|
||||||
|
:style="[imageStyle]"
|
||||||
|
:src="errorImg"
|
||||||
|
:mode="imgMode"
|
||||||
|
@load="handleErrorImgLoaded"
|
||||||
|
@tap="handleImgClick"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tn-lazy-load',
|
||||||
|
props: {
|
||||||
|
// 组件标识
|
||||||
|
index: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 待显示的图片地址
|
||||||
|
image: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 图片裁剪模式
|
||||||
|
imgMode: {
|
||||||
|
type: String,
|
||||||
|
default: 'scaleToFill'
|
||||||
|
},
|
||||||
|
// 占位图片路径
|
||||||
|
loadingImg: {
|
||||||
|
type: String,
|
||||||
|
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='
|
||||||
|
},
|
||||||
|
// 加载失败的错误占位图
|
||||||
|
errorImg: {
|
||||||
|
type: String,
|
||||||
|
default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162trcPDw5ubm7i4uNzc3Obm5s3NzaGhoeHh4cjIyKenp9LS0r29vbKysuvr67sDMEkAAAlpSURBVHja7NzpYqMgAIVRUVHc8/5PO66R1WAbOzX97q+ZtDEpR0AWTR7kVyWhCAAhgABCAAGEAAIIAQQQAggBBBACCCAEEEAIIIAQQAgggBBAACGAAEIAAYQAQgABhAACCAEEEAIIIAQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAsqeX5QWHKIcs/Ptl03lfL4zDFPWfBGmSpPn+IZzSH5KkCL5B+n+oklwz6Iz//R2QzFOabzhEmiRirAmZt/bl0w/dpMbLqeeo4wEdpC7zR5WAPKziHKtO7ql+ReKvIa9BxgNaL5ZtEkpeAGIVp5jKJa09xVo9vgSSzQcszdYvmOqjQNSQ6pHK6rO1n1Xj32788miwHLaZz1Tl9i/yayDlYJ/60/+lp8GSY7OY1B8E4p55bWmfquFk22GLuUUxi78cX+m+BjL2GLkhMrV+/muS6Sfic0CEp5T1Yu2OQdTzsKV0MJV73KVjroyTffxfuv5Tf3fd6iLT9wz8YdVHgUzF2Is9/Xhi5sYJqP1w/GUpjOiHVbaI0w2L+pg3GZzvtokcgHxWDXHaiy78l3sPke01qphamT5c+dqyeAGSumdL/mkggauTam0e3L/mPEiqtzKDbl0Z1Wn8xOa4ySo8X/7TQIJnY/seEKWf12UmC72CKP9xYjr19RPT7NNA+oMO+R0gwmlotAry+C6I0f59ch8yXVQOr0BKYcXt1IUYRyCt+Ur9HGsrQKI79WY9sY9ARPKlzFOFdb41ioD8b5Bp+mqeeRKAxINkESBFGpOpKhgv9OuYpH8A8l4Qa3qp60Kl2/k+rG2sWafuuyCBafb2j4JkgZUob3nWcmicpkxEgmTLLGejTxnWSWCi8lPmsk6DlIHFJv24ojiYyYoGacwL8zXTLEAVaDI/Ybb3NIgKDSv2oXpmHkvNs+PTpMASEdlk7fOZeRk37fwJ6yGnQarQsGIfqqcvx43rTOXY6jf7uKXdRzdLDRPbjIrx1cIj3Kr4KyBFezzgUGuR5893qkOQ19fR2uVBaU+r16LphJNOiatK7PeBZK/Kb+tUn71rcQjSvARpghfH/yG/D2RetTuI3N5QrMWdP46brP7FmKZ//CGQ9At9SL01DLkzY/Vs8Z97fQZ7gelw7jHqCz+/Wile5J4g3Vc79eb5a6oLSue+Ve83gaSv2jp5PxCzjzwFUm9zw9MllSMil1kS4d2E9SaQ1xNo9wMxx0+nQNLnew/WDHvveMAHYm08mofl3TFI/8pD3Q6kMAv6DIi2jTCwRJUvNdDYrrJum9oHhusCbWALonwxBRk1vXMnEGWuT5wAmfYuVGUYpJ7fUZujCN92hvzwWlrFgxSfANKb10DxIMbShnfrynyZZV30imA7P43ArXXHbvBVkTCIuGy25AdBrHmNeBCpL214QdLp9LZarG3IMWrmW0ehtuO7F2PS09UcgqS3B7FKPhpknrStD0HGF/vQRne37LwLG8EbHT4WxN7/Fg0yD9Yr/3br4nnstA+0Il6QxzdBmg8A6a2/IRbkcK9h/uzV8zywF/oSkOyageCPglRWgcWClHnEzs9q/t/SENVXgFijlsq3VtXdCsRp4qObrLLLgjuzSq3fX89ZZW6AfxNIzF6X9FYgThN/fk093KkvHX/hbWd+DqS/FUhlf+G3gohEXzVs3g9iDluWoaW8fL73QhB34u+tIHIf19nLuF4Q98a09Eynnl56q+ePgEhnX+dbQOp6H5XnJ0ACd8dFgkwf12nTOTcEqd2pom+CFF02TIPw6dKmrLS5qOtBpo8b5quUtrwrSGbuqPkeSJqllTFHO02NPxdMrm+y5LKdWyWXjw4vA5nGEtnjuyCFyHqNYvEolzmASm3zK1Eg5zr13lhqV1tlksnVw8Pkwgri7O07AVKLJkutRYw87bPlRpBpNXE8xGb+fhBlvEGrGPLqViu5sILIx9dAmqF1705sxF4M8+R8P5dOdQwi12fMnATpjJ2JSt/POIvU9wPJEs/jduJAjLvU0yFT0i64Yb1bsVi79dA4pEy3TzoHMq2O7Re4vXm5O9+l290NpE4CU+YRIMNye2iaqbVS2AUnn2fsekthYKReVNutVedA5juttyIXrT38mOds+ps9DWhwL7GWc61/DVKPzVN9UHDarf1icU98IOU8tm6L031Iq63t1tKzj3fe/FCpO4F0/i0Z2+yvA1KeGBjqj1qYx8/zoxpKZ1Yl367I1k+sfcft/QPy9csXy/32qX1qLZsrryG5BGQaRj0vc/b7N54XXq293TCLB5HO42Fy517obW19b+qjl3CHp0fdLJcWvmdy1etESi/uAdJrs1hTaUklHuW8qSDdC3UfXVR5cnD3rAFSSqtFb7z7eapErx7rC739jCXfbK3aWiipjXo8UbmxXPa7QQq9R289j2Gr88N7Ag5AlHPRKc37pNZv0CZtX1tVMG6rm8qW1/KlCgQvcMss933ybwXZz3dReW5yce4ByZtHFIhwT9kmjxg8BzbKDUe1PB9edBJqSN7/KM1LmqyuMZ5BpeTUw1aD/uDI0relPfSHa/Wn8Pxq1BNfxy/h3IdwOJqIKumb9CHvTqMefyY82RoQAgggBBBACCCAEEAAIYAQQAAhgABCAAGEAAIIAYQAAggBBBACCCAEEEAIIAQQQAgggBBAACGAAEIAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAEEEAIIAQQQAgggBBBACCCAEEAIIIAQQAAhgABCAAGEAEIAAYQAAggBBBACCCAEEAIIIAQQQAgggBBAACGAEEAAIYAAQgABhAACCAGEAAIIAQQQAgggBBBACCAEEEAIIIAQQAAhgABCACGAAEIAAYQAAggBBBACCAEEEAIIIAQQQAggfyL/BBgA8PgLdH0TBtkAAAAASUVORK5CYII='
|
||||||
|
},
|
||||||
|
// 图片进入可见区域前多少像素前，单位rpx，开始加载图片
|
||||||
|
// 负数为图片超出屏幕底部多少像素后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发（图片还没出现在屏幕上）
|
||||||
|
threshold: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
// 是否开启过渡效果
|
||||||
|
isEffect: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 动画过渡时间
|
||||||
|
duration: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 500
|
||||||
|
},
|
||||||
|
// 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
|
||||||
|
// linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
|
||||||
|
effect: {
|
||||||
|
type: String,
|
||||||
|
default: 'ease-in-out'
|
||||||
|
},
|
||||||
|
// 图片高度，单位rpx
|
||||||
|
height: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 450
|
||||||
|
},
|
||||||
|
// 图片圆角
|
||||||
|
borderRadius: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
thresholdValue() {
|
||||||
|
// 先取绝对值，因为threshold可能是负数，最后根据this.threshold是正数或者负数，重新还原
|
||||||
|
let threshold = uni.upx2px(Math.abs(this.threshold))
|
||||||
|
return this.threshold < 0 ? -threshold : threshold
|
||||||
|
},
|
||||||
|
lazyLoadItemStyle() {
|
||||||
|
let style = {}
|
||||||
|
style.opacity = Number(this.opacity)
|
||||||
|
if (this.borderRadius) {
|
||||||
|
style.borderRadius = this.borderRadius
|
||||||
|
}
|
||||||
|
// 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
|
||||||
|
style.transition = `opacity ${this.time / 1000}s ${this.effect}`
|
||||||
|
style.height = this.$t.string.getLengthUnitValue(this.height)
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
imageStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (typeof this.height === 'string' && this.height.indexOf('%') === -1) {
|
||||||
|
style.height = this.$t.string.getLengthUnitValue(this.height)
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(val) {
|
||||||
|
// 如果不开启过渡效果直接返回
|
||||||
|
if (!this.effect) return
|
||||||
|
this.time = 0
|
||||||
|
// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
|
||||||
|
this.opacity = 0
|
||||||
|
setTimeout(() => {
|
||||||
|
this.time = this.duration
|
||||||
|
this.opacity = 1
|
||||||
|
}, 30)
|
||||||
|
},
|
||||||
|
image(val) {
|
||||||
|
// 修改图片后重置部分变量
|
||||||
|
if (!val) {
|
||||||
|
// 如果传入null或者''，或者undefined，标记为错误状态
|
||||||
|
this.error = true
|
||||||
|
} else {
|
||||||
|
this.init()
|
||||||
|
this.error = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
elIndex: this.$t.uuid(),
|
||||||
|
// 显示图片
|
||||||
|
show: false,
|
||||||
|
// 图片透明度
|
||||||
|
opacity: 1,
|
||||||
|
// 动画时间
|
||||||
|
time: this.duration,
|
||||||
|
// 懒加载状态
|
||||||
|
// loadlazy-懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
|
||||||
|
loadStatus: '',
|
||||||
|
// 图片加载失败
|
||||||
|
error: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 由于一些特殊原因，不能将此变量放到data中定义
|
||||||
|
this.observer = {}
|
||||||
|
this.observerName = 'lazyLoadContentObserver'
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
|
||||||
|
this.$nextTick(() => {
|
||||||
|
uni.$once('tOnLazyLoadReachBottom', () => {
|
||||||
|
if (!this.show) this.show = true
|
||||||
|
})
|
||||||
|
})
|
||||||
|
// mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
|
||||||
|
setTimeout(() => {
|
||||||
|
this.disconnectObserver(this.observerName)
|
||||||
|
const contentObserver = uni.createIntersectionObserver(this)
|
||||||
|
contentObserver.relativeToViewport({
|
||||||
|
bottom: this.thresholdValue
|
||||||
|
}).observe(`.tn-lazy-load__item--${this.elIndex}`, (res) => {
|
||||||
|
if (res.intersectionRatio > 0) {
|
||||||
|
// 懒加载状态改变
|
||||||
|
this.show = true
|
||||||
|
// 如果图片已经加载，去掉监听，减少性能消耗
|
||||||
|
this.disconnectObserver(this.observerName)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this[this.observerName] = contentObserver
|
||||||
|
}, 50)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化
|
||||||
|
init() {
|
||||||
|
this.error = false
|
||||||
|
this.loadStatus = ''
|
||||||
|
},
|
||||||
|
// 处理图片点击事件
|
||||||
|
handleImgClick() {
|
||||||
|
let whichImg = ''
|
||||||
|
// 如果show为false，则表示图片还没有开始加载，点击的是最开始占位图
|
||||||
|
if (this.show === false) whichImg = 'lazyImg'
|
||||||
|
// 如果error为true，则表示图片加载失败，点击的是错误占位图
|
||||||
|
else if (this.error === true) whichImg = 'errorImg'
|
||||||
|
// 点击了正常的图片
|
||||||
|
else whichImg = 'realImg'
|
||||||
|
|
||||||
|
this.$emit('click', {
|
||||||
|
index: this.index,
|
||||||
|
whichImg: whichImg
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 处理图片加载完成事件，通过show来区分是占位图触发还是加载真正的图片触发
|
||||||
|
handleImgLoaded() {
|
||||||
|
if (this.loadStatus = '') {
|
||||||
|
// 占位图加载完成
|
||||||
|
this.loadStatus = 'lazyed'
|
||||||
|
}
|
||||||
|
else if (this.loadStatus == 'lazyed') {
|
||||||
|
// 真正的图片加载完成
|
||||||
|
this.loadStatus = 'loaded'
|
||||||
|
this.$emit('loaded', this.index)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 处理错误图片加载完成
|
||||||
|
handleErrorImgLoaded() {
|
||||||
|
this.$emit('error', this.index)
|
||||||
|
},
|
||||||
|
// 处理图片加载失败
|
||||||
|
handleImgError() {
|
||||||
|
this.error = true
|
||||||
|
},
|
||||||
|
disconnectObserver(observerName) {
|
||||||
|
const observer = this[observerName]
|
||||||
|
observer && observer.disconnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tn-lazy-load {
|
||||||
|
&__item {
|
||||||
|
background-color: $tn-bg-gray-color;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&__image {
|
||||||
|
// 解决父容器会多出3px的问题
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
// 骗系统开启硬件加速
|
||||||
|
transform: transition3d(0, 0, 0);
|
||||||
|
// 防止图片加载“闪一下”
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tn-load-more-class tn-load-more">
|
||||||
|
<view
|
||||||
|
class="tn-load-more__wrap"
|
||||||
|
:class="[backgroundColorClass]"
|
||||||
|
:style="[loadStyle]"
|
||||||
|
>
|
||||||
|
<view class="tn-load-more__line"></view>
|
||||||
|
<view
|
||||||
|
class="tn-load-more__content"
|
||||||
|
:class="[{'tn-load-more__content--more': (status === 'loadmore' || status === 'nomore')}]"
|
||||||
|
>
|
||||||
|
<view class="tn-load-more__loading">
|
||||||
|
<tn-loading
|
||||||
|
class="tn-load-more__loading__icon"
|
||||||
|
:mode="loadingIconType"
|
||||||
|
:show="status === 'loading' && loadingIcon"
|
||||||
|
:color="loadingIconColor"
|
||||||
|
></tn-loading>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="tn-load-more__text"
|
||||||
|
:class="[fontColorClass, {'tn-load-more__text--dot': (status === 'nomore' && dot)}]"
|
||||||
|
:style="[loadTextStyle]"
|
||||||
|
>{{ showText }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="tn-load-more__line"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||||
|
export default {
|
||||||
|
name: 'tn-load-more',
|
||||||
|
mixins: [componentsColorMixin],
|
||||||
|
props: {
|
||||||
|
// 加载状态
|
||||||
|
// loadmore -> 加载更多
|
||||||
|
// loading -> 加载中
|
||||||
|
// nomore -> 没有更多
|
||||||
|
status: {
|
||||||
|
type: String,
|
||||||
|
default: 'loadmore'
|
||||||
|
},
|
||||||
|
// 显示加载图标
|
||||||
|
loadingIcon: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 加载图标样式，参考tn-loading组件的加载类型
|
||||||
|
loadingIconType: {
|
||||||
|
type: String,
|
||||||
|
default: 'circle'
|
||||||
|
},
|
||||||
|
// 在圆圈加载状态下，圆圈的颜色
|
||||||
|
loadingIconColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 显示的文字
|
||||||
|
loadText: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
loadmore: '加载更多',
|
||||||
|
loading: '正在加载...',
|
||||||
|
nomore: '没有更多了'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 是否显示粗点，在nomore状态下生效
|
||||||
|
dot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 自定义组件样式
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
loadStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (this.backgroundColorStyle) {
|
||||||
|
style.backgroundColor = this.backgroundColorStyle
|
||||||
|
}
|
||||||
|
// 合并用户自定义样式
|
||||||
|
if (Object.keys(this.customStyle).length > 0) {
|
||||||
|
Object.assign(style, this.customStyle)
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
loadTextStyle() {
|
||||||
|
let style = {}
|
||||||
|
if (this.fontColorStyle) {
|
||||||
|
style.color = this.fontColorStyle
|
||||||
|
}
|
||||||
|
if (this.fontSizeStyle) {
|
||||||
|
style.fontSize = this.fontSizeStyle
|
||||||
|
style.lineHeight = this.$t.string.getLengthUnitValue(this.fontSize + 2, this.fontUnit)
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
// 显示的提示文字
|
||||||
|
showText() {
|
||||||
|
let text = ''
|
||||||
|
if (this.status === 'loadmore') text = this.loadText.loadmore || '加载更多'
|
||||||
|
else if (this.status === 'loading') text = this.loadText.loading || '正在加载...'
|
||||||
|
else if (this.status === 'nomore' && this.dot) text = this.dotText
|
||||||
|
else text = this.loadText.nomore || '没有更多了'
|
||||||
|
|
||||||
|
return text
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 粗点
|
||||||
|
dotText: '●'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 处理加载更多事件
|
||||||
|
loadMore() {
|
||||||
|
// 只有在 loadmore 状态下点击才会发送点击事件，内容不满一屏时无法触发底部上拉事件，所以需要点击来触发
|
||||||
|
if (this.status === 'loadmore') this.$emit('loadmore')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tn-load-more {
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
background-color: transparent;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: $tn-content-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__line {
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 1px solid $tn-content-color;
|
||||||
|
width: 50rpx;
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
|
||||||
|
&--more {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__loading {
|
||||||
|
margin-right: 8rpx;
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
line-height: 30rpx;
|
||||||
|
|
||||||
|
&--dot {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,254 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
v-if="show"
|
||||||
|
class="tn-skeleton-class tn-skeleton"
|
||||||
|
:class="[backgroundColorClass]"
|
||||||
|
:style="[skeletonStyle]"
|
||||||
|
@touchmove.stop.prevent
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in rectNodes"
|
||||||
|
:key="$t.uuid()"
|
||||||
|
class="tn-skeleton__item tn-skeleton__item--rect"
|
||||||
|
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||||||
|
:style="[itemStyle('rect', item)]"
|
||||||
|
></view>
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in circleNodes"
|
||||||
|
:key="$t.uuid()"
|
||||||
|
class="tn-skeleton__item tn-skeleton__item--circle"
|
||||||
|
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||||||
|
:style="[itemStyle('circle', item)]"
|
||||||
|
></view>
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in filletNodes"
|
||||||
|
:key="$t.uuid()"
|
||||||
|
class="tn-skeleton__item tn-skeleton__item--fillet"
|
||||||
|
:class="[elBackgroundColorClass, {'tn-skeleton__item--fade': animation}]"
|
||||||
|
:style="[itemStyle('fillet', item)]"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import componentsColorMixin from '../../libs/mixin/components_color.js'
|
||||||
|
export default {
|
||||||
|
name: 'tn-skeleton',
|
||||||
|
mixins: [ componentsColorMixin ],
|
||||||
|
props: {
|
||||||
|
// 显示骨架屏
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 需要渲染的元素背景颜色
|
||||||
|
elBackgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 开启加载动画
|
||||||
|
animation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 矩形元素自定义样式
|
||||||
|
rectCustomStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 圆形元素自定义样式
|
||||||
|
circleCustomStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 圆角元素自定义样式
|
||||||
|
filletCustomStyle: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
elBackgroundColorStyle() {
|
||||||
|
return this.$t.colorUtils.getBackgroundColorStyle(this.elBackgroundColor)
|
||||||
|
},
|
||||||
|
elBackgroundColorClass() {
|
||||||
|
return this.$t.colorUtils.getBackgroundColorInternalClass(this.elBackgroundColor)
|
||||||
|
},
|
||||||
|
// 骨架屏样式
|
||||||
|
skeletonStyle() {
|
||||||
|
let style = {}
|
||||||
|
style.width = this.skeletonWidth + 'px'
|
||||||
|
style.height = this.skeletonHeight + 'px'
|
||||||
|
if (this.backgroundColorStyle) {
|
||||||
|
style.backgroundColor = this.backgroundColorStyle
|
||||||
|
}
|
||||||
|
style.left = this.left + 'px'
|
||||||
|
style.top = this.top + 'px'
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
// 元素样式
|
||||||
|
itemStyle() {
|
||||||
|
return (type, item) => {
|
||||||
|
let style = {}
|
||||||
|
style.width = item.width + 'px'
|
||||||
|
style.height = item.height + 'px'
|
||||||
|
if (this.elBackgroundColorStyle) {
|
||||||
|
style.backgroundColor = this.elBackgroundColorStyle
|
||||||
|
}
|
||||||
|
style.left = (item.left - this.left) + 'px'
|
||||||
|
style.top = (item.top - this.top) + 'px'
|
||||||
|
if (type === 'rect') {
|
||||||
|
Object.assign(style, this.rectCustomStyle)
|
||||||
|
} else if (type === 'circle') {
|
||||||
|
style.borderRadius = (item.width / 2) + 'px'
|
||||||
|
Object.assign(style, this.circleCustomStyle)
|
||||||
|
} else if (type === 'fillet') {
|
||||||
|
Object.assign(style, this.filletCustomStyle)
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 骨架屏宽度
|
||||||
|
skeletonWidth: 750,
|
||||||
|
// 骨架屏高度
|
||||||
|
skeletonHeight: 1500,
|
||||||
|
// 圆角元素
|
||||||
|
filletNodes: [],
|
||||||
|
// 圆形元素
|
||||||
|
circleNodes: [],
|
||||||
|
// 矩形元素
|
||||||
|
rectNodes: [],
|
||||||
|
// 元素偏移位置
|
||||||
|
top: 0,
|
||||||
|
left: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 获取系统信息
|
||||||
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
|
this.skeletonWidth = systemInfo.safeArea.width
|
||||||
|
this.skeletonHeight = systemInfo.safeArea.height
|
||||||
|
this.selectQueryInfo()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询节点信息
|
||||||
|
selectQueryInfo() {
|
||||||
|
// 获取整个父容器的宽高作为骨架屏的宽高
|
||||||
|
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||||
|
let query = null
|
||||||
|
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery().in(this.$parent)
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery()
|
||||||
|
// #endif
|
||||||
|
query.selectAll('.tn-skeleton').boundingClientRect().exec((res) => {
|
||||||
|
console.log(res);
|
||||||
|
this.skeletonWidth = res[0][0].width
|
||||||
|
this.skeletonHeight = res[0][0].height
|
||||||
|
this.top = res[0][0].bottom - res[0][0].height
|
||||||
|
this.left = res[0][0].left
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取元素列表
|
||||||
|
this.getRectElements()
|
||||||
|
this.getCircleElements()
|
||||||
|
this.getFillteElements()
|
||||||
|
},
|
||||||
|
// 矩形元素列表
|
||||||
|
getRectElements() {
|
||||||
|
let query = null
|
||||||
|
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery().in(this.$parent)
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery()
|
||||||
|
// #endif
|
||||||
|
query.selectAll('.tn-skeleton-rect').boundingClientRect().exec((res) => {
|
||||||
|
this.rectNodes = res[0]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 圆形元素列表
|
||||||
|
getCircleElements() {
|
||||||
|
let query = null
|
||||||
|
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery().in(this.$parent)
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery()
|
||||||
|
// #endif
|
||||||
|
query.selectAll('.tn-skeleton-circle').boundingClientRect().exec((res) => {
|
||||||
|
this.circleNodes = res[0]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 圆角元素列表
|
||||||
|
getFillteElements() {
|
||||||
|
let query = null
|
||||||
|
// 在微信小程序中，如果把骨架屏放入组件使用，需要in(this)上下文为父组件才有效
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery().in(this.$parent)
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
query = uni.createSelectorQuery()
|
||||||
|
// #endif
|
||||||
|
query.selectAll('.tn-skeleton-fillet').boundingClientRect().exec((res) => {
|
||||||
|
this.filletNodes = res[0]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tn-skeleton {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9998;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
|
||||||
|
&--fillet {
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--fade {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #E6E6E6;
|
||||||
|
animation-duration: 1.5s;
|
||||||
|
animation-name: blink;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,324 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tn-verification-code-class tn-verification-code">
|
||||||
|
<view class="tn-code__container">
|
||||||
|
<input class="tn-code__input" :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxLength" @input="getValue" />
|
||||||
|
<view v-for="(item, index) in loopCharArr" :key="index">
|
||||||
|
<view
|
||||||
|
class="tn-code__item"
|
||||||
|
:class="[{
|
||||||
|
'tn-code__item--breathe': breathe && charArrLength === index,
|
||||||
|
'tn-code__item__box': mode === 'box',
|
||||||
|
'tn-code__item__box--active': mode === 'box' && charArrLength === index
|
||||||
|
}]"
|
||||||
|
:style="[itemStyle(index)]"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="mode !== 'middleLine'"
|
||||||
|
class="tn-code__item__line tn-code__item__line--placeholder"
|
||||||
|
:style="[placeholderLineStyle(index)]"
|
||||||
|
></view>
|
||||||
|
<view
|
||||||
|
v-if="mode === 'middleLine' && charArrLength <= index"
|
||||||
|
class="tn-code__item__line tn-code__item__line--middle"
|
||||||
|
:class="[{
|
||||||
|
'tn-code__item__line--bold': bold,
|
||||||
|
'tn-code__item--breathe': breathe && charArrLength === index,
|
||||||
|
'tn-code__item__line--active': charArrLength === index
|
||||||
|
}]"
|
||||||
|
:style="[lineStyle(index)]"
|
||||||
|
></view>
|
||||||
|
<view
|
||||||
|
v-if="mode === 'bottomLine'"
|
||||||
|
class="tn-code__item__line tn-code__item__line--bottom"
|
||||||
|
:class="[{
|
||||||
|
'tn-code__item__line--bold': bold,
|
||||||
|
'tn-code__item--breathe': breathe && charArrLength === index,
|
||||||
|
'tn-code__item__line--active': charArrLength === index
|
||||||
|
}]"
|
||||||
|
:style="[lineStyle(index)]"
|
||||||
|
></view>
|
||||||
|
<block v-if="!dotFill">
|
||||||
|
<text>{{ charArr[index] ? charArr[index] : '' }}</text>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<text class="tn-code__item__dot">{{ charArr[index] ? '●' : '' }}</text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'tn-verification-code',
|
||||||
|
props: {
|
||||||
|
// 验证码的值
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 最大输入长度
|
||||||
|
maxLength: {
|
||||||
|
type: Number,
|
||||||
|
default: 4
|
||||||
|
},
|
||||||
|
// 显示模式
|
||||||
|
// box -> 盒子 bottomLine -> 底部横线 middleLine -> 中间横线
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: 'box'
|
||||||
|
},
|
||||||
|
// 用圆点填充空白位置
|
||||||
|
dotFill: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 字体加粗
|
||||||
|
bold: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 字体大小
|
||||||
|
fontSize: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 激活时颜色
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 未激活时颜色
|
||||||
|
inactiveColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 输入框宽度，单位rpx
|
||||||
|
inputWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 80
|
||||||
|
},
|
||||||
|
// 当前激活的item带呼吸效果
|
||||||
|
breathe: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 自动获取焦点
|
||||||
|
focus: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 隐藏原生键盘，当使用自定义键盘的时候设置该参数未true即可
|
||||||
|
disabledKeyboard: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 拆分要显示的字符
|
||||||
|
charArr() {
|
||||||
|
return this.valueModel.split('')
|
||||||
|
},
|
||||||
|
// 当前输入字符的长度
|
||||||
|
charArrLength() {
|
||||||
|
return this.charArr.length
|
||||||
|
},
|
||||||
|
// 输入框的个数
|
||||||
|
loopCharArr() {
|
||||||
|
return new Array(this.maxLength)
|
||||||
|
},
|
||||||
|
itemStyle() {
|
||||||
|
return (index) => {
|
||||||
|
let style = {}
|
||||||
|
style.fontWeight = this.bold ? 'bold' : 'normal'
|
||||||
|
if (this.fontSize) {
|
||||||
|
style.fontSize = this.fontSize + 'rpx'
|
||||||
|
}
|
||||||
|
if (this.inputWidth) {
|
||||||
|
style.width = this.inputWidth + 'rpx'
|
||||||
|
style.height = this.inputWidth + 'rpx'
|
||||||
|
style.lineHeight = this.inputWidth + 'rpx'
|
||||||
|
}
|
||||||
|
if (this.inactiveColor) {
|
||||||
|
style.color = this.inactiveColor
|
||||||
|
style.borderColor = this.inactiveColor
|
||||||
|
}
|
||||||
|
if (this.mode === 'box' && this.charArrLength === index) {
|
||||||
|
style.borderColor = this.activeColor
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
placeholderLineStyle() {
|
||||||
|
return (index) => {
|
||||||
|
let style = {}
|
||||||
|
style.display = this.charArrLength === index ? 'block' : 'none'
|
||||||
|
if (this.inputWidth) {
|
||||||
|
style.height = (this.inputWidth * 0.5) + 'rpx'
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle() {
|
||||||
|
return (index) => {
|
||||||
|
let style = {}
|
||||||
|
if (this.inactiveColor) {
|
||||||
|
style.backgroundColor = this.inactiveColor
|
||||||
|
}
|
||||||
|
if (this.charArrLength === index && this.activeColor) {
|
||||||
|
style.backgroundColor = this.activeColor
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
// 转换为字符串
|
||||||
|
val = String(val)
|
||||||
|
// 截掉超出的部分
|
||||||
|
this.valueModel = val.substring(0, this.maxLength)
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
valueModel: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取填写的值
|
||||||
|
getValue(e) {
|
||||||
|
const {
|
||||||
|
value
|
||||||
|
} = e.detail
|
||||||
|
this.valueModel = value
|
||||||
|
// 判断输入的长度是否超出了maxlength的值
|
||||||
|
if (String(value).length > this.maxLength) return
|
||||||
|
// 未达到maxlength之前，触发change事件，否则触发finish事件
|
||||||
|
this.$emit('change', value)
|
||||||
|
this.$emit('input', value)
|
||||||
|
if (String(value).length == this.maxLength) {
|
||||||
|
this.$emit('finish', value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.tn-verification-code {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.tn-code {
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 200%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: left;
|
||||||
|
z-index: 9;
|
||||||
|
opacity: 0;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
position: relative;
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 10rpx 10rpx;
|
||||||
|
font-size: 60rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #838383;
|
||||||
|
|
||||||
|
&--breathe {
|
||||||
|
animation: breathe 2s infinite ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__box {
|
||||||
|
border: 2rpx solid #AAAAAA;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
animation-duration: 1500ms;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-direction: alternate;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2rpx solid #01BEFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__line {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: #AAAAAA;
|
||||||
|
|
||||||
|
&--bold {
|
||||||
|
height: 4px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--placeholder {
|
||||||
|
display: none;
|
||||||
|
width: 2rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--middle, &--bottom {
|
||||||
|
width: 80%;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
&--bottom {
|
||||||
|
top: auto !important;
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateX(-50%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background-color: #01BEFF !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__dot {
|
||||||
|
font-size: 34rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes breathe {
|
||||||
|
0% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+83
-3
File diff suppressed because one or more lines are too long
@@ -1,7 +1,9 @@
|
|||||||
// 各组件的z-index值
|
// 各组件的z-index值
|
||||||
export default {
|
export default {
|
||||||
|
landsacpe: 29100,
|
||||||
navbar: 29090,
|
navbar: 29090,
|
||||||
toast: 20090,
|
toast: 20090,
|
||||||
|
goodsNav: 20089,
|
||||||
alert: 20085,
|
alert: 20085,
|
||||||
modal: 20080,
|
modal: 20080,
|
||||||
popup: 20075,
|
popup: 20075,
|
||||||
|
|||||||
@@ -89,8 +89,24 @@ function getDigit(number) {
|
|||||||
return digit
|
return digit
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取指定范围的随机数
|
||||||
|
|
||||||
|
* @param {Object} min 最小值
|
||||||
|
* @param {Object} max 最大值
|
||||||
|
*/
|
||||||
|
function random(min, max) {
|
||||||
|
if (min >= 0 && max > 0 && max >= min) {
|
||||||
|
let gab = max - min + 1
|
||||||
|
return Math.floor(Math.random() * gab + min)
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
formatNumberString,
|
formatNumberString,
|
||||||
formatNumberAddZero,
|
formatNumberAddZero,
|
||||||
formatNumberAddUnit
|
formatNumberAddUnit,
|
||||||
|
random
|
||||||
}
|
}
|
||||||
@@ -32,7 +32,32 @@ function getLengthUnitValue(value, unit = 'rpx') {
|
|||||||
else return value + unit
|
else return value + unit
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将驼峰命名的字符串转换为指定连接符来进行连接
|
||||||
|
*
|
||||||
|
* @param {Object} string 待转换的字符串
|
||||||
|
* @param {Object} replace 进行连接的字符
|
||||||
|
*/
|
||||||
|
function humpConvertChar(string, replace = '_') {
|
||||||
|
if (!string || !replace) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
return string.replace(/([A-Z])/g, `${replace}$1`).toLowerCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
function charConvertHump(string, replace = '_') {
|
||||||
|
if (!string || !replace) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
let reg = RegExp("//" + replace + "(/w)/", "g")
|
||||||
|
return string.replace(reg, function(all, letter) {
|
||||||
|
return letter.toUpperCase()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
trim,
|
trim,
|
||||||
getLengthUnitValue
|
getLengthUnitValue,
|
||||||
|
humpConvertChar,
|
||||||
|
charConvertHump
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user