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

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>