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

59
pages/component/layout/arc/arc.vue Normal file
View File

@ -0,0 +1,59 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6 1 4 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">BannerArc <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">BannerArc 横幅底部圆弧，常用的布局组件。</view>
</view>
<view class="fui-page__bd">
<fui-section is-line title="纯背景色" margin-top="32"></fui-section>
<fui-banner-arc background="#465CFF" margin-top="32"></fui-banner-arc>
<fui-section is-line title="渐变背景/调整高度/弧度" margin-top="96"></fui-section>
<!-- ratio 用于调整弧度大小，值越大弧度越小 -->
<fui-banner-arc background="linear-gradient(#6831FF,#465CFF)" :height="500" :ratio="1.5"
margin-top="32"></fui-banner-arc>
<fui-section is-line title="图片设置弧度" margin-top="96"></fui-section>
<fui-banner-arc margin-top="32" background="#EDF9FF" height="512" :ratio="1.5">
<image class="fui-banner" src="https://res.firstui.cn/static/images/my/light/img_banner_3x.png" mode="widthFix"></image>
</fui-banner-arc>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
.fui-wrap {
padding-bottom: 120rpx;
}
.fui-banner {
width: 750rpx;
height: 512rpx;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
/* #ifdef APP-NVUE */
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 750rpx;
border-bottom-left-radius: 750rpx;
/* #endif */
}
</style>

103
pages/component/layout/card/card.vue Normal file
View File

@ -0,0 +1,103 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 7 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Card</view>
<view class="fui-page__desc">Card 卡片，常用的布局组件。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基础使用</view>
<fui-card :src="src" title="标题文字" tag="额外信息">
<view class="fui-card__content">这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</view>
</fui-card>
<view class="fui-section__title">通栏展示</view>
<fui-card :padding="['20rpx','32rpx']" full :src="src" title="标题文字" tag="额外信息">
<view class="fui-card__content fui-padding">这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。</view>
</fui-card>
<view class="fui-section__title">推荐布局</view>
<fui-card :src="src2" imageRadius="50%" title="First UI" color="#465CFF" tag="23小时前" :headerLine="false" showBorder>
<view class="fui-list__item">
<image class="fui-cover" :src="`${resUrl}/cooperate/light/img_banner_3x.png`" mode="widthFix">
</image>
<view class="fui-list__title">First UI重磅上线，一款轻量、全面、可靠的移动端组件库。</view>
</view>
</fui-card>
<view class="fui-section__title">推荐布局</view>
<fui-card>
<view class="fui-list__item">
<image class="fui-cover" :src="`${resUrl}/cooperate/dark/img_banner_3x.png`" mode="widthFix"></image>
</view>
<view class="fui-card__title">
First UI重磅上线，一款轻量、全面、可靠的移动端组件库。
</view>
</fui-card>
</view>
</view>
</template>
<script>
export default {
data() {
return {
resUrl:this.fui.resUrl(),
src: '/static/images/common/icon_tabbar_3x.png',
src2: '/static/images/common/img_logo.png'
}
},
methods: {
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-card__content {
font-size: 28rpx;
padding: 32rpx 20rpx;
box-sizing: border-box;
}
.fui-padding {
padding-left: 32rpx;
padding-right: 32rpx;
}
.fui-list__item {
width: 100%;
height: 385rpx;
position: relative;
background: #eee;
}
.fui-cover {
width: 100%;
height: 385rpx;
display: block;
}
.fui-list__title {
position: absolute;
left: 0;
bottom: 0;
color: #fff;
font-weight: 500;
padding: 24rpx 20rpx;
box-sizing: border-box;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}
.fui-card__title {
width: 100%;
padding: 32rpx;
box-sizing: border-box;
font-weight: 500;
}
</style>

95
pages/component/layout/grid/grid.vue Normal file
View File

@ -0,0 +1,95 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 86 1 407 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Grid</view>
<view class="fui-page__desc">Grid 宫格，主要使用场景如：热门内容等。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">九宫格</view>
<fui-grid>
<fui-grid-item v-for="(item,index) in nums" :key="index">
<view class="fui-grid__cell">
<image src="/static/images/common/icon_tabbar_3x.png" class="fui-icon" mode="widthFix"></image>
<text>Grid</text>
</view>
</fui-grid-item>
</fui-grid>
<view class="fui-section__title">高度自适应</view>
<fui-grid :square="false">
<fui-grid-item v-for="(item,index) in nums" :key="index">
<view class="fui-grid__cell fui-padding">
<image src="/static/images/common/icon_tabbar_2x.png" class="fui-icon__2x" mode="widthFix">
</image>
<text>Grid</text>
</view>
</fui-grid-item>
</fui-grid>
<view class="fui-section__title">改变列数（4列）</view>
<fui-grid :columns="4">
<fui-grid-item v-for="(item,index) in arrs" :key="index">
<view class="fui-grid__cell fui-padding">
<image src="/static/images/common/icon_tabbar_2x.png" class="fui-icon__2x" mode="widthFix">
</image>
<text>Grid</text>
</view>
</fui-grid-item>
</fui-grid>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//百度小程序循环数字有问题
nums: [0, 1, 2, 3, 4, 5, 6, 7, 8],
arrs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
}
},
onLoad() {}
}
</script>
<style>
page {
background-color: #FFFFFF;
/* 非nvue端可通过此变量控制边框颜色 */
/* --fui-color-border:#465CFF; */
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-grid__cell {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex: 1;
font-size: 28rpx;
font-weight: 400;
}
.fui-padding {
padding: 36rpx 0;
}
.fui-icon {
width: 96rpx;
height: 96rpx;
margin-bottom: 16rpx;
}
.fui-icon__2x {
width: 64rpx;
height: 64rpx;
margin-bottom: 16rpx;
}
.fui-flex__column {
flex: 1;
}
</style>

80
pages/component/layout/horizontal-scroll/horizontal-scroll.vue Normal file
View File

@ -0,0 +1,80 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">HorizontalScroll <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">HorizontalScroll 横向滚动的视图容器，主要用于菜单导航，热门商品区等场景。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<view class="fui-section__title">商品展示</view>
<fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B">
<view class="fui-list">
<view class="fui-list--item" v-for="(item,index) in goodsList" :key="index">
<fui-lazyload radius="16" marginBottom="20" :width="128" :height="128" :src="item.src"
mode="aspectFill">
</fui-lazyload>
<fui-text :text="`￥${item.price}`" color="#FF2B2B" size="24"></fui-text>
</view>
</view>
</fui-horizontal-scroll>
<view class="fui-section__title">菜单展示</view>
<fui-horizontal-scroll>
<view>
<view class="fui-list" :class="{'fui-mtop':index!==0}" v-for="(list,index) in menuList" :key="index">
<view class="fui-list--item fui-mr--52" v-for="(item,idx) in list" :key="item.text">
<fui-lazyload background="transparent" marginBottom="12" :width="96" :height="96" :src="item.icon"
mode="aspectFill">
</fui-lazyload>
<fui-text un-shrink :text="item.text" color="#888" size="24"></fui-text>
</view>
</view>
</view>
</fui-horizontal-scroll>
</view>
</view>
</template>
<script>
import data from './index.js'
export default {
data() {
return {
goodsList: data.goodsList,
menuList: data.menuList
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
.fui-list {
display: flex;
flex-direction: row;
align-items: center;
}
.fui-list--item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 24rpx;
}
.fui-mr--52{
margin-right: 52rpx;
}
.fui-list--item:last-child {
margin-right: 0;
}
.fui-mtop{
margin-top: 24rpx;
}
</style>

89
pages/component/layout/horizontal-scroll/index.js Normal file
View File

@ -0,0 +1,89 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
const goodsList = [{
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
price: '2800.00'
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
price: '48.00'
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
price: '29.90',
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
price: '8.90'
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
price: '2800.00'
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
price: '48.00'
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
price: '29.90',
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
price: '8.90'
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
price: '2800.00'
}, {
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
price: '48.00'
}]
const menuList = [
[{
icon: '/static/images/common/icon_tabbar_2x.png',
text: '百亿补贴'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '查快递'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '实时低价'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '摇现金'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '家电清洗'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '活动日历'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '资质规则'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '限时秒杀'
}],
[{
icon: '/static/images/common/icon_tabbar_2x.png',
text: '签到'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '医药馆'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '断码清仓'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '爱回收'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '买车养车'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '家用电器'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '免费水果'
}, {
icon: '/static/images/common/icon_tabbar_2x.png',
text: '充值中心'
}]
]
export default {
goodsList,
menuList
}

181
pages/component/layout/layout/layout.vue Normal file
View File

@ -0,0 +1,181 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 86 140 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Layout</view>
<view class="fui-page__desc">Layout 栅格布局，将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基础布局</view>
<fui-row margin-bottom="24rpx">
<fui-col>
<view class="fui-col__item fui-color__black"></view>
</fui-col>
</fui-row>
<fui-row margin-bottom="24rpx">
<fui-col :span="12">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="12">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="24rpx">
<fui-col :span="8">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="8">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
<fui-col :span="8">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="24rpx">
<fui-col :span="6">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="6">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
<fui-col :span="6">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="6">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="24rpx">
<fui-col :span="4">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<view class="fui-section__title">混合布局</view>
<fui-row marginBottom="24rpx" :gutter="gutter">
<fui-col :span="8">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="8">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="24rpx" :gutter="gutter">
<fui-col :span="4">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="16">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
<fui-col :span="4">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
</fui-row>
<view class="fui-section__title">分栏偏移</view>
<fui-row marginBottom="10px" :gutter="gutter">
<fui-col :span="8">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="8" :offset="6">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="10px" :gutter="gutter">
<fui-col :span="6" :offset="6">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="6" :offset="6">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="10px" :gutter="gutter">
<fui-col :span="12" :pullRight="0">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :span="6" :pushLeft="6">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="24rpx" :gutter="gutter">
<fui-col :span="12" :offset="6">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
</fui-row>
<view class="fui-section__title">响应式布局</view>
<fui-row marginBottom="24rpx" :gutter="gutter">
<fui-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
<fui-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
</view>
</view>
</template>
<script>
export default {
data() {
return {
gutter: 0
}
},
methods: {
}
}
</script>
<style>
.fui-section__title {
margin-left: 32rpx;
}
.fui-col__item {
height: 84rpx;
border-radius: 16rpx;
}
.fui-color__black {
background-color: #333333;
}
.fui-color__yellow {
background-color: #FFB703;
}
</style>

162
pages/component/layout/list/list.vue Normal file
View File

@ -0,0 +1,162 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">List</view>
<view class="fui-page__desc">List 列表，常用的布局组件。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">基础使用</view>
<fui-list>
<fui-list-cell>标题文字</fui-list-cell>
<fui-list-cell>
<text>标题文字</text>
<text class="fui-text__explain">说明文字</text>
</fui-list-cell>
<fui-list-cell arrow>
<text>标题文字</text>
</fui-list-cell>
<fui-list-cell arrow>
<view class="fui-list__item">
<text>标题文字</text>
<text class="fui-text__explain">说明文字</text>
</view>
</fui-list-cell>
<fui-list-cell arrow :bottomLeft="0">
<view class="fui-list__item">
<text>标题文字</text>
<fui-badge value="1" type="danger"></fui-badge>
</view>
</fui-list-cell>
</fui-list>
<view class="fui-section__title" style="margin-bottom: 0;">无点击效果、带标题</view>
<fui-list bottomBorder title="带标题的列表">
<fui-list-cell :highlight="false">标题文字</fui-list-cell>
<fui-list-cell :bottomBorder="false" :highlight="false" arrow>标题文字</fui-list-cell>
</fui-list>
<view class="fui-section__title">带图标的列表</view>
<fui-list-cell topBorder>
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
<fui-list-cell>
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
<text class="fui-text__explain">说明文字</text>
</fui-list-cell>
<fui-list-cell arrow>
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
<fui-list-cell arrow :bottomLeft="0">
<view class="fui-list__item">
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
<text class="fui-text__explain">说明文字</text>
</view>
</fui-list-cell>
<view class="fui-section__title">改变底部线条左侧偏移距离</view>
<fui-list-cell topBorder :bottomLeft="104">
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
<fui-list-cell :bottomLeft="0">
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
<view class="fui-section__title">改变底部线条右侧偏移距离</view>
<fui-list-cell :bottomRight="32">
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
<fui-list-cell :bottomBorder="false">
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
<view class="fui-section__title">无线条</view>
<fui-list-cell :bottomBorder="false" arrow>
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
<fui-list-cell :bottomBorder="false" arrow>
<view class="fui-align__center">
<image class="fui-list__icon" src="/static/images/common/icon_tabbar.png" mode="widthFix">
</image>
<text>标题文字</text>
</view>
</fui-list-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
page {
font-weight: normal;
/* 非nvue端使用此变量改变list线条颜色，nvue端请查看文档 */
/* --fui-color-border:#B2B2B2; */
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-list__item {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.fui-text__explain {
font-size: 28rpx;
color: #7F7F7F;
flex-shrink: 0;
}
.fui-list__icon {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
}
</style>

60
pages/component/layout/movable-view/movable-view.vue Normal file
View File

@ -0,0 +1,60 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1407 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">MovableView <image
src="/static/images/index/light/icon_member_3x.png"></image></view>
<view class="fui-page__desc">MovableView 可移动的视图容器，在页面中可以拖拽滑动，暂不支持缩放。</view>
</view>
<fui-movable-view @change="change">
<view class="fui-fab--box" @tap="handleClick">
<fui-icon name="edit" color="#fff"></fui-icon>
</view>
</fui-movable-view>
<fui-movable-view top="200">
<view class="fui-fab--box" @tap="handleClick">
<fui-icon name="share" color="#fff"></fui-icon>
</view>
</fui-movable-view>
<fui-movable-view left="80">
<view class="fui-fab--box" @tap="handleClick">
<fui-icon name="plus" color="#fff"></fui-icon>
</view>
</fui-movable-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
change(e){
console.log(e)
},
handleClick(){
this.fui.toast('点击了~')
}
}
}
</script>
<style>
.fui-fab--box{
width: 108rpx;
height: 108rpx;
border-radius: 50%;
background: #465CFF;
display: flex;
align-items: center;
justify-content: center;
}
</style>

98
pages/component/layout/panel/panel.vue Normal file
View File

@ -0,0 +1,98 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 614 0 72 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Panel <image
src="/static/images/index/light/icon_member_3x.png"></image></view>
<view class="fui-page__desc">Panel 面板，常用的布局组件。</view>
</view>
<view class="fui-page__bd">
<fui-panel :panelData="panelData" radius="24" fontWeight="600"></fui-panel>
<fui-panel :panelData="panelData2" :marginTop="24" :size="34" :descSize="26"></fui-panel>
<fui-panel :panelData="panelData3" :marginTop="24" :size="34" :descSize="26">
<fui-list-cell arrow :bottomBorder="false" topBorder topLeft="32">
<text class="fui-text__link">查看更多</text>
</fui-list-cell>
</fui-panel>
<fui-panel :panelData="panelData4" radius="16" :marginTop="24" width="60" height="60" :size="32"></fui-panel>
<fui-panel :panelData="panelData5" :marginTop="24" :size="32" @click="itemClick">
</fui-panel>
</view>
</view>
</template>
<script>
export default {
data() {
return {
panelData: {
src: '/static/images/common/img_logo.png',
title: '基础使用',
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
},
panelData2: {
head: '带标题的列表',
src: '/static/images/common/logo.png',
title: 'First UI组件库',
desc: 'First UI是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
},
panelData3: {
head: 'First UI介绍',
list: [{
src: '/static/images/common/logo.png',
title: 'First UI组件库',
desc: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。'
}, {
src: '/static/images/common/logo.png',
title: 'First UI跨平台UI组件库',
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
}]
},
panelData4: {
head: '设置图片大小',
list: [{
src: '/static/images/common/img_logo.png',
title: 'First UI组件库'
}, {
src: '/static/images/common/img_logo.png',
title: 'First UI跨平台UI组件库'
}]
},
panelData5: {
head: '附加信息',
list: [{
title: 'First UI组件库',
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
source: '开源中国',
time: '2021-08-09'
}, {
title: 'First UI跨平台UI组件库',
desc: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。',
source: 'GitHub',
time: '2021-08-09',
extra: 'Apache License 2.0'
}]
}
}
},
methods: {
itemClick(e) {
console.log(e)
},
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-text__link {
color: #465CFF;
font-size: 32rpx;
}
</style>

98
pages/component/layout/preview/preview.vue Normal file
View File

@ -0,0 +1,98 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 407 254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">Preview <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">Preview 表单预览，常用的布局组件。</view>
</view>
<view class="fui-page__bd">
<fui-preview :previewData="previewData"></fui-preview>
<!-- 标签文本两端对齐 -->
<fui-preview labelAlign="justify" labelWidth="112" :previewData="previewData2" marginTop="24"
@click="btnClick"></fui-preview>
<!-- 内容文本左对齐 -->
<fui-preview bd-align="left" :labelWidth="136" :hdLabelWidth="136" :previewData="previewData"
marginTop="24"></fui-preview>
</view>
</view>
</template>
<script>
export default {
data() {
return {
previewData: {
label: '订单金额',
value: '￥29.90',
list: [{
label: '订单号',
// labelColor:'#FF2B2B',
value: 'Fui00000111112',
valueColor: '#FF2B2B'
}, {
label: '物流单号',
value: '34409992021080911'
}, {
label: '创建时间',
value: '2021-08-09 09:20'
}, {
label: '付款时间',
value: '2021-08-09 09:30'
}, {
label: '订单备注',
value: '路上请安全第一，如果超时可提前按已送达或与我联系。辛苦了！'
}],
buttons: [{
text: '联系客服'
}]
},
previewData2: {
label: '个人信息',
list: [{
label: '姓名',
value: '张三'
}, {
label: '性别',
value: '男'
}, {
label: '年龄',
value: '36'
}, {
label: '手机号码',
value: '189****0020'
}, {
label: '家庭住址',
value: '广东省深圳市龙华区深圳北站'
}],
buttons: [{
id: 1, //自定义属性，非约定
text: '修改',
color: '#181818'
}, {
id: 2,
text: '删除',
color: '#FF2B2B'
}]
}
}
},
methods: {
btnClick(e) {
console.log(e)
},
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
}
}
}
</script>
<style>
page {
font-weight: normal;
}
</style>

37
pages/component/layout/section/section.vue Normal file
View File

@ -0,0 +1,37 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<fui-section title="Section" descr="Section 标题栏，主要用于文章、列表详情等标题展示。" :margin-top="52"></fui-section>
<view class="fui-page__bd">
<fui-section title="装饰线条" isLine margin-top="64"></fui-section>
<fui-section title="线条宽度/颜色调整" line-width="8rpx" line-color="#FF2B2B" isLine margin-top="96"></fui-section>
<fui-section title="标题/无线条/带描述" descr="我是描述文本~" margin-top="96"></fui-section>
<fui-section :padding="['32rpx','32rpx']" background="#fff" title="设置背景" isLine
margin-top="96"></fui-section>
<fui-section title="插槽使用/加图标" margin-top="64">
<template v-slot:right>
<image class="fui-vip__icon" src="/static/images/index/light/icon_member_3x.png"></image>
</template>
</fui-section>
<fui-section title="线条渐变色/调整字体大小" line-width="3px" size="48" isLine
line-color="linear-gradient(to bottom , #FFB703, #FF416C)" margin-top="96"></fui-section>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>