thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
pages/tabbar/layout/index.js Normal file
View File

@ -0,0 +1,98 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6 1 40725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
export default [{
cn: '列表',
en: 'LIST',
src: 'list',
background: '#F8F4FF',
page: '/pages/component/layout/list/list'
}, {
cn: '索引列表',
en: 'INDEX LIST',
src: 'index_list',
background: '#EDF9FF',
page: '/pages/component/nav/indexList/indexList'
}, {
cn: '宫格',
en: 'GRID',
src: 'grid',
background: '#EAFFF6',
page: '/pages/component/layout/grid/grid'
}, {
cn: '卡片',
en: 'CARD',
src: 'card',
background: '#FFF4F7',
page: '/pages/component/layout/card/card'
}, {
cn: '瀑布流',
en: 'WATERFALL FLOW',
src: 'waterfall_flow',
background: '#FFF8EF',
page: '/pages/layout/waterfall/waterfall'
}, {
cn: '顶部选项卡',
en: 'TOP TAB',
src: 'tabs',
background: '#F8F4FF',
page: '/pages/layout/topTab/topTab'
}, {
cn: '垂直选项卡',
en: 'VERTICAL TAB',
src: 'vertical',
background: '#EDF9FF',
page: '/pages/component/nav/vtabs/vtabs'
}, {
cn: '新闻列表',
en: 'NEWS LIST',
src: 'news',
background: '#EAFFF6',
page: '/pages/layout/newsList/newsList'
}, {
cn: '商品列表',
en: 'PRODUCT LIST',
src: 'goodslist',
background: '#FFF4F7',
page: '/pages/layout/productList/productList'
}, {
cn: '提交订单栏',
en: 'SUBMIT BAR',
src: 'submit',
background: '#FFF8EF',
page: '/pages/layout/submitBar/submitBar'
}, {
cn: '商品导航栏',
en: 'GOODS BAR',
src: 'commodity',
background: '#F8F4FF',
page: '/pages/layout/goodsBar/goodsBar'
}, {
cn: '聊天栏',
en: 'CHAT BAR',
src: 'chat',
background: '#EDF9FF',
page: '/pages/layout/chatBar/chatBar'
}, {
cn: '滚动消息',
en: 'ROLL NEWS',
src: 'roll',
background: '#EAFFF6',
page: '/pages/layout/rollNews/rollNews'
}, {
cn: '卡片轮播',
en: 'CARD SWIPER',
src: 'rotation',
background: '#FFF4F7',
page: '/pages/layout/cardSwiper/cardSwiper'
}, {
cn: '地图',
en: 'MAP',
src: 'map',
background: '#FFF8EF',
page: '/pages/layout/map/map'
}, {
cn: '横向滚动',
en: 'ROLL HORIZONTAL',
src: 'transverse',
background: '#F8F4FF',
page: '/pages/layout/rollHor/rollHor'
}]

129
pages/tabbar/layout/layout.vue Normal file
View File

@ -0,0 +1,129 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 61 4 0 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">布局 <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">常用的页面布局，可提升开发效率以及带来舒服的视觉效果！</view>
</view>
<view class="fui-page-bd fui-page__spacing">
<view class="fui-layout__item" @tap="href(item.page)" v-for="(item,index) in layoutData" :key="index">
<view class="fui-layout__item-inner">
<view class="fui-cover__box fui-flex__center" :style="{background:item.background}">
<image class="fui-cover" :src="`${resUrl}/layout/img_${item.src}_3x.png`" mode="widthFix">
</image>
</view>
<view class="fui-name__cn">{{item.cn}}</view>
<view class="fui-name__en">{{item.en}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
import layoutData from './index.js';
import {
mapState,
mapActions
} from 'vuex'
export default {
computed: mapState(['status']),
data() {
return {
layoutData: layoutData,
resUrl: this.fui.resUrl()
}
},
onReady() {
// #ifdef MP-BAIDU
this.getStatus().then((res) => {})
// #endif
},
methods: {
...mapActions(['getStatus']),
href(page) {
if (page) {
// #ifdef MP-BAIDU
if (this.status !== 1 && (~page.indexOf('waterfall') || ~page.indexOf('topTab'))) {
this.fui.toast('开发中~')
return;
}
// #endif
this.fui.href(page)
} else {
this.fui.href('/pages/common/coding/coding')
}
},
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
},
onShareAppMessage() {
return {
title: 'First UI组件库'
}
}
}
</script>
<style>
page {
background-color: #FFFFFF;
}
.fui-page-bd {
display: flex;
flex-wrap: wrap;
}
.fui-layout__item {
width: 50%;
margin-bottom: 32rpx;
box-sizing: border-box;
}
.fui-layout__item:nth-of-type(odd) {
padding-right: 15rpx;
}
.fui-layout__item:nth-of-type(even) {
padding-left: 15rpx;
}
.fui-layout__item-inner {
background: #FFFFFF;
box-shadow: 0 4rpx 8rpx 0 rgba(2, 4, 38, 0.05);
border-radius: 24rpx;
overflow: hidden;
padding-bottom: 32rpx;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-cover__box {
width: 100%;
height: 202rpx;
}
.fui-cover {
width: 164rpx;
height: 118rpx;
}
.fui-name__cn {
line-height: 32rpx;
text-align: center;
padding-top: 28rpx;
}
.fui-name__en {
font-size: 24rpx;
line-height: 24rpx;
color: #B2B2B2;
text-align: center;
padding-top: 16rpx;
}
</style>