117 lines
3.8 KiB
Vue
117 lines
3.8 KiB
Vue
<template>
|
||
<view class="page-shell comps-page">
|
||
<view class="list-hero">
|
||
<van-nav-bar title="组件风格" left-arrow :border="false" @click-left="goHome" />
|
||
<view class="list-hero-copy">
|
||
<view class="eyebrow">DESIGN SYSTEM</view>
|
||
<view class="title">组件合集</view>
|
||
<view class="subline">按钮 · 状态 · 反馈 · 附件等基础样式</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="home-body">
|
||
<view class="panel">
|
||
<view class="panel-hd"><text class="panel-title">按钮 Button</text></view>
|
||
<view class="comp-row">
|
||
<van-button type="primary" size="small" color="#22c55e" round>主按钮</van-button>
|
||
<van-button type="primary" size="small" plain hairline color="#22c55e" round>描边</van-button>
|
||
<van-button size="small" plain hairline round>次要</van-button>
|
||
<van-button type="danger" size="small" plain hairline round>危险</van-button>
|
||
</view>
|
||
<van-button
|
||
type="primary"
|
||
color="#22c55e"
|
||
block
|
||
round
|
||
style="margin-top: 16rpx; height: 88rpx;"
|
||
>
|
||
通栏主按钮（44px）
|
||
</van-button>
|
||
</view>
|
||
|
||
<view class="panel">
|
||
<view class="panel-hd"><text class="panel-title">状态 Tag</text></view>
|
||
<view class="comp-row">
|
||
<van-tag type="warning" plain round>待处理</van-tag>
|
||
<van-tag type="primary" color="#22c55e" round>进行中</van-tag>
|
||
<van-tag type="success" plain round>已完成</van-tag>
|
||
<van-tag type="danger" plain round>异常</van-tag>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="panel">
|
||
<view class="panel-hd"><text class="panel-title">通知 / 空态 / 加载</text></view>
|
||
<van-notice-bar
|
||
left-icon="volume-o"
|
||
text="移动端菜单在「菜单管理 → 移动端菜单」下配置，按角色授权后展示。"
|
||
background="#f0fdf4"
|
||
color="#16a34a"
|
||
/>
|
||
<view style="min-height: 360rpx; margin-top: 24rpx">
|
||
<van-empty
|
||
description="暂无相关数据"
|
||
tip="可下拉刷新，或点击上方按钮新增一条记录"
|
||
/>
|
||
</view>
|
||
<view style="display: flex; justify-content: center; padding: 32rpx 0">
|
||
<van-loading size="24px" color="#22c55e">加载中</van-loading>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="panel">
|
||
<view class="panel-hd"><text class="panel-title">反馈</text></view>
|
||
<view class="comp-row">
|
||
<van-button size="small" plain hairline color="#22c55e" @click="toast('操作成功')">
|
||
Toast
|
||
</van-button>
|
||
<van-button size="small" plain hairline color="#22c55e" @click="showDialog">
|
||
Dialog
|
||
</van-button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="panel">
|
||
<view class="panel-hd"><text class="panel-title">附件卡片</text></view>
|
||
<AttachList
|
||
:files="[{ name: '质检报告.docx', size: '1.2 MB', time: '08-10 10:20' }]"
|
||
@upload="toast('上传')"
|
||
@preview="toast('预览')"
|
||
@download="toast('下载')"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import AttachList from '../../components/AttachList.vue'
|
||
|
||
export default {
|
||
components: { AttachList },
|
||
methods: {
|
||
goHome() {
|
||
uni.reLaunch({ url: '/pages/index/index' })
|
||
},
|
||
toast(msg) {
|
||
uni.showToast({ title: msg, icon: 'none' })
|
||
},
|
||
showDialog() {
|
||
uni.showModal({
|
||
title: '确认提交',
|
||
content: '提交后将进入审批流程，是否继续？',
|
||
confirmColor: '#22c55e'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.comp-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
align-items: center;
|
||
}
|
||
</style>
|