273 lines
7.8 KiB
Vue
273 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="demo-page">
|
|||
|
|
<view class="demo-title">阿里图标库使用示例</view>
|
|||
|
|
|
|||
|
|
<!-- 方式一：直接使用 iconfont 类 -->
|
|||
|
|
<view class="demo-section">
|
|||
|
|
<view class="section-title">方式一：直接使用</view>
|
|||
|
|
<view class="icon-list">
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<text class="iconfont icon-home"></text>
|
|||
|
|
<text class="icon-name">icon-home</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<text class="iconfont icon-user"></text>
|
|||
|
|
<text class="icon-name">icon-user</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<text class="iconfont icon-search"></text>
|
|||
|
|
<text class="icon-name">icon-search</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 方式二：使用封装的组件 -->
|
|||
|
|
<view class="demo-section">
|
|||
|
|
<view class="section-title">方式二：使用封装组件</view>
|
|||
|
|
<view class="icon-list">
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<IconfontIcon name="home" :size="48" color="#13C57C" />
|
|||
|
|
<text class="icon-name">绿色 48rpx</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<IconfontIcon name="user" :size="36" color="#256BFA" />
|
|||
|
|
<text class="icon-name">蓝色 36rpx</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<IconfontIcon name="search" :size="32" color="#FF9800" />
|
|||
|
|
<text class="icon-name">橙色 32rpx</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 方式三：使用配置常量 -->
|
|||
|
|
<view class="demo-section">
|
|||
|
|
<view class="section-title">方式三：使用配置常量</view>
|
|||
|
|
<view class="icon-list">
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<IconfontIcon
|
|||
|
|
:name="ICONS.PHONE"
|
|||
|
|
:size="ICON_SIZES.LARGE"
|
|||
|
|
:color="ICON_COLORS.PRIMARY"
|
|||
|
|
/>
|
|||
|
|
<text class="icon-name">电话</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<IconfontIcon
|
|||
|
|
:name="ICONS.MESSAGE"
|
|||
|
|
:size="ICON_SIZES.LARGE"
|
|||
|
|
:color="ICON_COLORS.SECONDARY"
|
|||
|
|
/>
|
|||
|
|
<text class="icon-name">消息</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="icon-item">
|
|||
|
|
<IconfontIcon
|
|||
|
|
:name="ICONS.LOCATION"
|
|||
|
|
:size="ICON_SIZES.LARGE"
|
|||
|
|
:color="ICON_COLORS.DANGER"
|
|||
|
|
/>
|
|||
|
|
<text class="icon-name">位置</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 方式四：按钮中使用 -->
|
|||
|
|
<view class="demo-section">
|
|||
|
|
<view class="section-title">方式四：在按钮中使用</view>
|
|||
|
|
<button class="demo-button primary">
|
|||
|
|
<IconfontIcon name="phone" :size="32" color="#FFFFFF" />
|
|||
|
|
<text>手机号登录</text>
|
|||
|
|
</button>
|
|||
|
|
<button class="demo-button secondary">
|
|||
|
|
<IconfontIcon name="user" :size="32" color="#256BFA" />
|
|||
|
|
<text>个人中心</text>
|
|||
|
|
</button>
|
|||
|
|
<button class="demo-button success">
|
|||
|
|
<IconfontIcon name="star" :size="32" color="#FFFFFF" />
|
|||
|
|
<text>收藏职位</text>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 方式五：列表中使用 -->
|
|||
|
|
<view class="demo-section">
|
|||
|
|
<view class="section-title">方式五：在列表中使用</view>
|
|||
|
|
<view class="demo-list">
|
|||
|
|
<view class="list-item" v-for="item in menuList" :key="item.id">
|
|||
|
|
<IconfontIcon :name="item.icon" :size="40" :color="item.color" />
|
|||
|
|
<view class="item-content">
|
|||
|
|
<view class="item-title">{{ item.title }}</view>
|
|||
|
|
<view class="item-desc">{{ item.desc }}</view>
|
|||
|
|
</view>
|
|||
|
|
<IconfontIcon name="arrow-right" :size="28" color="#999" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 注意事项 -->
|
|||
|
|
<view class="demo-section">
|
|||
|
|
<view class="section-title">⚠️ 注意事项</view>
|
|||
|
|
<view class="tips-box">
|
|||
|
|
<view class="tip-item">1. 确保已从阿里图标库下载字体文件到 static/iconfont/ 目录</view>
|
|||
|
|
<view class="tip-item">2. 确保已在 App.vue 中引入 iconfont.css</view>
|
|||
|
|
<view class="tip-item">3. 图标名称需要与阿里图标库中的类名保持一致</view>
|
|||
|
|
<view class="tip-item">4. 推荐使用封装的 IconfontIcon 组件，便于统一管理</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
|
|||
|
|
import { ICONS, ICON_SIZES, ICON_COLORS } from '@/config/icons'
|
|||
|
|
|
|||
|
|
const menuList = ref([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
icon: 'home',
|
|||
|
|
title: '首页',
|
|||
|
|
desc: '查看推荐职位',
|
|||
|
|
color: '#13C57C'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
icon: 'search',
|
|||
|
|
title: '搜索',
|
|||
|
|
desc: '搜索心仪职位',
|
|||
|
|
color: '#256BFA'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
icon: 'message',
|
|||
|
|
title: '消息',
|
|||
|
|
desc: '查看聊天消息',
|
|||
|
|
color: '#FF9800'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
icon: 'user',
|
|||
|
|
title: '我的',
|
|||
|
|
desc: '个人中心',
|
|||
|
|
color: '#9C27B0'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus" scoped>
|
|||
|
|
.demo-page
|
|||
|
|
padding: 40rpx
|
|||
|
|
background: #F5F5F5
|
|||
|
|
min-height: 100vh
|
|||
|
|
|
|||
|
|
.demo-title
|
|||
|
|
font-size: 48rpx
|
|||
|
|
font-weight: bold
|
|||
|
|
color: #333
|
|||
|
|
text-align: center
|
|||
|
|
margin-bottom: 40rpx
|
|||
|
|
|
|||
|
|
.demo-section
|
|||
|
|
background: #FFFFFF
|
|||
|
|
border-radius: 16rpx
|
|||
|
|
padding: 32rpx
|
|||
|
|
margin-bottom: 32rpx
|
|||
|
|
|
|||
|
|
.section-title
|
|||
|
|
font-size: 32rpx
|
|||
|
|
font-weight: 600
|
|||
|
|
color: #333
|
|||
|
|
margin-bottom: 24rpx
|
|||
|
|
padding-bottom: 16rpx
|
|||
|
|
border-bottom: 2rpx solid #F0F0F0
|
|||
|
|
|
|||
|
|
.icon-list
|
|||
|
|
display: flex
|
|||
|
|
flex-wrap: wrap
|
|||
|
|
gap: 32rpx
|
|||
|
|
|
|||
|
|
.icon-item
|
|||
|
|
display: flex
|
|||
|
|
flex-direction: column
|
|||
|
|
align-items: center
|
|||
|
|
gap: 12rpx
|
|||
|
|
min-width: 120rpx
|
|||
|
|
|
|||
|
|
.iconfont
|
|||
|
|
font-size: 48rpx
|
|||
|
|
color: #333
|
|||
|
|
|
|||
|
|
.icon-name
|
|||
|
|
font-size: 24rpx
|
|||
|
|
color: #666
|
|||
|
|
text-align: center
|
|||
|
|
|
|||
|
|
.demo-button
|
|||
|
|
width: 100%
|
|||
|
|
height: 88rpx
|
|||
|
|
border-radius: 44rpx
|
|||
|
|
display: flex
|
|||
|
|
align-items: center
|
|||
|
|
justify-content: center
|
|||
|
|
gap: 12rpx
|
|||
|
|
font-size: 32rpx
|
|||
|
|
margin-bottom: 20rpx
|
|||
|
|
border: none
|
|||
|
|
|
|||
|
|
&.primary
|
|||
|
|
background: linear-gradient(135deg, #13C57C 0%, #0FA368 100%)
|
|||
|
|
color: #FFFFFF
|
|||
|
|
|
|||
|
|
&.secondary
|
|||
|
|
background: #F7F8FA
|
|||
|
|
color: #256BFA
|
|||
|
|
|
|||
|
|
&.success
|
|||
|
|
background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%)
|
|||
|
|
color: #FFFFFF
|
|||
|
|
|
|||
|
|
.demo-list
|
|||
|
|
display: flex
|
|||
|
|
flex-direction: column
|
|||
|
|
gap: 20rpx
|
|||
|
|
|
|||
|
|
.list-item
|
|||
|
|
display: flex
|
|||
|
|
align-items: center
|
|||
|
|
padding: 24rpx
|
|||
|
|
background: #F7F8FA
|
|||
|
|
border-radius: 12rpx
|
|||
|
|
gap: 20rpx
|
|||
|
|
|
|||
|
|
.item-content
|
|||
|
|
flex: 1
|
|||
|
|
|
|||
|
|
.item-title
|
|||
|
|
font-size: 30rpx
|
|||
|
|
color: #333
|
|||
|
|
font-weight: 500
|
|||
|
|
margin-bottom: 8rpx
|
|||
|
|
|
|||
|
|
.item-desc
|
|||
|
|
font-size: 24rpx
|
|||
|
|
color: #999
|
|||
|
|
|
|||
|
|
.tips-box
|
|||
|
|
padding: 24rpx
|
|||
|
|
background: #FFF3E0
|
|||
|
|
border-radius: 12rpx
|
|||
|
|
|
|||
|
|
.tip-item
|
|||
|
|
font-size: 26rpx
|
|||
|
|
color: #E65100
|
|||
|
|
line-height: 1.8
|
|||
|
|
margin-bottom: 12rpx
|
|||
|
|
|
|||
|
|
&:last-child
|
|||
|
|
margin-bottom: 0
|
|||
|
|
|
|||
|
|
// 按钮重置样式
|
|||
|
|
button::after
|
|||
|
|
border: none
|
|||
|
|
</style>
|
|||
|
|
|