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

118
pages/component/basics/color/color.js Normal file
View File

@ -0,0 +1,118 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 6140 72 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
export default [{
text: '主色',
key:'key_01',
data: [{
color: '#FFFFFF',
text: '蓝色',
value: '#465CFF'
}]
}, {
text: '辅助色',
key:'key_02',
data: [{
color: '#FFFFFF',
text: '红色',
value: '#FF2B2B'
}, {
color: '#FFFFFF',
text: '黄色',
value: '#FFB703'
}, {
color: '#FFFFFF',
text: '紫色',
value: '#6831FF'
}, {
color: '#FFFFFF',
text: '绿色',
value: '#09BE4F'
}]
}, {
text: '字体颜色',
key:'key_03',
data: [{
color: '#FFFFFF',
text: '深黑色',
value: '#181818'
}, {
color: '#FFFFFF',
text: '深灰色',
value: '#333333'
}, {
color: '#FFFFFF',
text: '灰色',
value: '#B2B2B2'
}, {
color: '#FFFFFF',
text: '浅灰色',
value: '#CCCCCC'
}, {
color: '#181818',
text: '白色',
value: '#FFFFFF'
}]
}, {
text: '背景色',
key:'key_04',
data: [{
color: '#181818',
text: '浅蓝',
value: '#F1F4FA'
}, {
color: '#181818',
text: '白色',
value: '#FFFFFF'
}, {
color: '#181818',
text: '灰色',
value: '#F8F8F8'
}, {
color: '#181818',
text: '红色 5%',
value: 'rgba(255, 43, 43, .05)'
}, {
color: '#181818',
text: '黄色 10%',
value: 'rgba(255, 183, 3, .1)'
}, {
color: '#181818',
text: '紫色 5%',
value: 'rgba(104, 49, 255, .05)'
}, {
color: '#181818',
text: '绿色 5%',
value: 'rgba(9, 190, 79, .05)'
}, {
color: '#FFFFFF',
text: '黑色 60%',
value: 'rgba(0, 0, 0, 0.6)'
}, {
color: '#FFFFFF',
text: '黑色 20%',
value: 'rgba(0, 0, 0, 0.2)'
}]
}, {
text: '边框颜色',
key:'key_05',
data: [{
color: '#181818',
text: '灰色',
value: '#EEEEEE'
}]
}, {
text: '渐变色',
key:'key_06',
data: [{
color: '#FFFFFF',
text: '渐变色',
value: '#465CFF #6831FF',
gradual: 'linear-gradient(90deg, #465CFF 0%, #6831FF 100%)'
}, {
color: '#FFFFFF',
text: '渐变色',
value: '#FD8C8C #FF2B2B',
gradual: 'linear-gradient(90deg, #FD8C8C 0%, #FF2B2B 100%)'
}]
}]

72
pages/component/basics/color/color.vue Normal file
View File

@ -0,0 +1,72 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18 6 1 407 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title">Color</view>
<view class="fui-page__desc">Color 色彩，First UI用色指南。</view>
</view>
<view class="fui-page__bd fui-page__spacing">
<block v-for="(item,index) in colors" :key="item.key">
<view class="fui-section__title">{{item.text}}</view>
<view @tap="getColor($event,model.gradual || model.value)" v-for="(model,idx) in item.data" :key="idx"
class="fui-color__item fui-page__spacing fui-align__center"
:style="{background:model.gradual || model.value,color:model.color}">
<text>{{model.text}}</text>
<text>{{model.value}}</text>
</view>
</block>
</view>
</view>
</template>
<script>
// #ifdef MP-BAIDU
import {
mapState
} from 'vuex'
// #endif
import colors from './color.js';
import $fui from '@/components/firstui/fui-clipboard';
export default {
data() {
return {
colors: colors
}
},
// #ifdef MP-BAIDU
computed: mapState(['status']),
// #endif
methods: {
getColor(e, color) {
// #ifdef MP-BAIDU
if (this.status == 1) {
$fui.getClipboardData(color, res => {
this.fui.toast('颜色复制成功');
}, e);
}
// #endif
// #ifndef MP-BAIDU
$fui.getClipboardData(color, res => {
this.fui.toast('颜色复制成功');
}, e);
// #endif
}
}
}
</script>
<style>
.fui-color__item {
width: 100%;
justify-content: space-between;
height: 84rpx;
border-radius: 42px;
margin-bottom: 24rpx;
font-size: 28rpx;
font-weight: 400;
box-shadow: 0 4rpx 8rpx 0 rgba(2, 4, 38, 0.05);
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
</style>