第一次上传
This commit is contained in:
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<view class="promotion-page" :style="showCode?'height: 100vh; overflow: hidden;':''">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
||||
<text class="nav-title">我的推广</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<view class="stats-section">
|
||||
<view class="stats-card">
|
||||
<view @click="showCode=true" class="stat-item">
|
||||
<up-icon name="share" color="#fff" size="20"></up-icon>
|
||||
<text class="stat-label">推广码</text>
|
||||
</view>
|
||||
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ list.length }}</text>
|
||||
<text class="stat-label">推广会员</text>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="stat-value">{{ allAward }}</text>
|
||||
<text class="stat-label">获得积分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 会员列表 -->
|
||||
<view class="content">
|
||||
<view class="list-header">
|
||||
<text class="header-title">推广会员列表</text>
|
||||
<text class="header-count">共{{ list.length }}人</text>
|
||||
</view>
|
||||
|
||||
<view v-if="list.length > 0" class="members-list">
|
||||
<view v-for="member in list" :key="member.id" class="member-card">
|
||||
<!-- 会员信息 -->
|
||||
|
||||
<view class="member-info">
|
||||
<image class="member-avatar" :src="Service.GetMateUrlByImg(member.avatar)" mode="aspectFill" />
|
||||
<view class="member-details">
|
||||
<view class="name-tag-row">
|
||||
<text class="member-name">{{ member.nick }}</text>
|
||||
</view>
|
||||
<view class="user-id-tag">
|
||||
<image :src="Service.GetIconImg('/static/iconMent/user/viptype.png')" style="width: 20rpx; height: 20rpx; margin-right: 10rpx;"></image>
|
||||
<text class="id-text">ID: {{ member.userNo }}</text>
|
||||
</view>
|
||||
<text class="register-time">注册时间:{{ member.addTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分奖励 -->
|
||||
<view class="points-info">
|
||||
<text class="points-label">奖励</text>
|
||||
<text class="points-value">+{{ member.award }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="empty-state">
|
||||
<text class="ri-team-line empty-icon"></text>
|
||||
<text class="empty-text">暂无推广会员</text>
|
||||
<text class="empty-desc">邀请好友加入,获得积分奖励</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-popup :show="showCode" round='10' mode='center' @close="showCode=false" :closeable="true"
|
||||
:safeAreaInsetTop='true' :safeAreaInsetBottom='false' >
|
||||
<view class="" style=" margin: 0 auto; padding: 20rpx; background-color: #fff; " >
|
||||
<l-painter :board="poster" ref="posterFun">
|
||||
</l-painter>
|
||||
</view>
|
||||
<view class="" style="padding: 0 20rpx 20rpx;" >
|
||||
<up-button color='var(--nav-mian)' @click="save()" text="保存图片" ></up-button>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { vpUserService, Service } from "@/Service/vp/vpUserService"
|
||||
|
||||
let list = ref<Array<any>>([])
|
||||
let status = ref<string>('loadmore')
|
||||
let pageNo = ref<number>(1)
|
||||
|
||||
let allAward = ref<Number>(0)
|
||||
let showCode=ref(false)
|
||||
let code=ref('')
|
||||
|
||||
let url = ref<string>('')
|
||||
let imgurl = ref<string>('')
|
||||
const posterFun = ref(null)
|
||||
|
||||
const poster = ref<any>({
|
||||
css: {
|
||||
// 根节点若无尺寸,自动获取父级节点
|
||||
position: ' relative',
|
||||
borderRadius: '18rpx',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
|
||||
views: [{
|
||||
type: 'image',
|
||||
src: 'https://vp.clouds.xypays.cn/poster/poster1.png',
|
||||
css: {
|
||||
width: '550rpx',
|
||||
margin: '0 auto',
|
||||
},
|
||||
mode: "widthFix"
|
||||
}, {
|
||||
type: 'qrcode',
|
||||
text: '',
|
||||
css: {
|
||||
width: '80rpx',
|
||||
height: '80rpx',
|
||||
margin: '0 auto',
|
||||
position: 'absolute',
|
||||
top: '870rpx',
|
||||
left: '65rpx'
|
||||
},
|
||||
}],
|
||||
|
||||
|
||||
})
|
||||
|
||||
let picture = ref<string>('')
|
||||
|
||||
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
getData()
|
||||
getCode()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
getList()
|
||||
});
|
||||
|
||||
|
||||
const getData = () => {
|
||||
list.value = []
|
||||
status.value = 'loadmore'
|
||||
pageNo.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
|
||||
const getList = () => {
|
||||
if (status.value == 'nomore' || status.value == 'loading') {
|
||||
return
|
||||
}
|
||||
|
||||
status.value = 'loading'
|
||||
|
||||
vpUserService.GetUseRemList(pageNo.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
list.value = [...list.value, ...res.data.list]
|
||||
status.value = 10 == res.data.list.length ? 'loadmore' : 'nomore'
|
||||
allAward.value = res.data.allAward
|
||||
pageNo.value++
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getCode=()=>{
|
||||
vpUserService.GetShareEwm().then(res=>{
|
||||
if(res.code==0){
|
||||
url.value=res.data.url
|
||||
imgurl.value = res.data.bgUrl
|
||||
poster.value.views[1].text = url.value
|
||||
poster.value.views[0].src = imgurl.value
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 返回
|
||||
const goBack = () => {
|
||||
Service.GoPageBack()
|
||||
}
|
||||
|
||||
const save=()=>{
|
||||
Service.LoadClose('开始下载')
|
||||
posterFun.value.canvasToTempFilePathSync({
|
||||
fileType: 'jpg',
|
||||
pathType:'url',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
picture.value = res.tempFilePath
|
||||
saveImage()
|
||||
},
|
||||
fail(e) {
|
||||
Service.Msg('下载失败')
|
||||
console.log('???????????', e)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
const saveImage = () => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: picture.value,
|
||||
success(res) {
|
||||
Service.Msg('保存成功!')
|
||||
},
|
||||
fail: function (err) {
|
||||
console.log(err,'===')
|
||||
Service.Msg('保存失败')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 引入全局标签样式 */
|
||||
@import '@/styles/member-tags.scss';
|
||||
|
||||
.promotion-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 60rpx 24rpx 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 统计卡片 */
|
||||
.stats-section {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 4rpx 16rpx rgba(255, 107, 0, 0.3);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
height: 60rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
padding: 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
/* 列表头部 */
|
||||
.list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.header-count {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 会员列表 */
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.member-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.member-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.name-tag-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.user-member-tag {
|
||||
transform: scale(0.92);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.user-id-tag {
|
||||
margin-bottom: 8rpx;
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.register-time {
|
||||
font-size: 22rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
/* 积分信息 */
|
||||
.points-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 16rpx;
|
||||
background: #FFF4E6;
|
||||
border-radius: 12rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.points-label {
|
||||
font-size: 20rpx;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.points-value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 120rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
font-size: 24rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>图标批量下载工具</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
h1 {
|
||||
color: #6366F1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.subtitle {
|
||||
color: #64748B;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.icon-card {
|
||||
border: 2px solid #E2E8F0;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.icon-card:hover {
|
||||
border-color: #6366F1;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(99,102,241,0.2);
|
||||
}
|
||||
.icon-preview {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0 auto 15px;
|
||||
background: #F8FAFC;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
}
|
||||
.icon-name {
|
||||
font-weight: 600;
|
||||
color: #0F172A;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.icon-size {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 20px;
|
||||
background: #6366F1;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #4F46E5;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.instructions {
|
||||
background: #F8FAFC;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.instructions h3 {
|
||||
color: #0F172A;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.instructions ol {
|
||||
padding-left: 20px;
|
||||
color: #64748B;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.download-all {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.download-all .btn {
|
||||
padding: 15px 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎨 图标批量下载工具</h1>
|
||||
<p class="subtitle">一键下载项目所需的所有图标素材</p>
|
||||
|
||||
<div class="instructions">
|
||||
<h3>📖 使用说明</h3>
|
||||
<ol>
|
||||
<li>点击下方任意图标卡片的"下载"按钮</li>
|
||||
<li>会自动跳转到 RemixIcon 图标库(免费、开源)</li>
|
||||
<li>点击下载图标,选择 PNG 格式</li>
|
||||
<li>调整颜色为对应的颜色代码</li>
|
||||
<li>下载并保存到项目的 <code>static/icons/</code> 目录</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="icon-grid">
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🏠</div>
|
||||
<div class="icon-name">首页</div>
|
||||
<div class="icon-size">48x48 px | #94A3B8 / #6366F1</div>
|
||||
<a href="https://remixicon.com/icon/home-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">👤</div>
|
||||
<div class="icon-name">我的</div>
|
||||
<div class="icon-size">48x48 px | #94A3B8 / #6366F1</div>
|
||||
<a href="https://remixicon.com/icon/user-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
|
||||
<!-- 首页图标 -->
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🔍</div>
|
||||
<div class="icon-name">搜索</div>
|
||||
<div class="icon-size">24x24 px | #94A3B8</div>
|
||||
<a href="https://remixicon.com/icon/search-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">📍</div>
|
||||
<div class="icon-name">位置</div>
|
||||
<div class="icon-size">24x24 px | #94A3B8</div>
|
||||
<a href="https://remixicon.com/icon/map-pin-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🍽️</div>
|
||||
<div class="icon-name">餐饮</div>
|
||||
<div class="icon-size">32x32 px | #6366F1</div>
|
||||
<a href="https://remixicon.com/icon/restaurant-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🍷</div>
|
||||
<div class="icon-name">酒馆</div>
|
||||
<div class="icon-size">32x32 px | #6366F1</div>
|
||||
<a href="https://remixicon.com/icon/goblet-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🏪</div>
|
||||
<div class="icon-name">超市</div>
|
||||
<div class="icon-size">32x32 px | #6366F1</div>
|
||||
<a href="https://remixicon.com/icon/shop-3-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">📦</div>
|
||||
<div class="icon-name">全部</div>
|
||||
<div class="icon-size">32x32 px | #6366F1</div>
|
||||
<a href="https://remixicon.com/icon/apps-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
|
||||
<!-- 个人中心图标 -->
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">✏️</div>
|
||||
<div class="icon-name">编辑</div>
|
||||
<div class="icon-size">24x24 px | #FFFFFF</div>
|
||||
<a href="https://remixicon.com/icon/edit-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">💎</div>
|
||||
<div class="icon-name">会员</div>
|
||||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||||
<a href="https://remixicon.com/icon/vip-diamond-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🎫</div>
|
||||
<div class="icon-name">优惠券</div>
|
||||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||||
<a href="https://remixicon.com/icon/coupon-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">💰</div>
|
||||
<div class="icon-name">积分</div>
|
||||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||||
<a href="https://remixicon.com/icon/coin-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">📋</div>
|
||||
<div class="icon-name">订单</div>
|
||||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||||
<a href="https://remixicon.com/icon/file-list-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">⭐</div>
|
||||
<div class="icon-name">收藏</div>
|
||||
<div class="icon-size">24x24 px | #64748B</div>
|
||||
<a href="https://remixicon.com/icon/star-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">❓</div>
|
||||
<div class="icon-name">帮助</div>
|
||||
<div class="icon-size">24x24 px | #64748B</div>
|
||||
<a href="https://remixicon.com/icon/question-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">⚙️</div>
|
||||
<div class="icon-name">设置</div>
|
||||
<div class="icon-size">24x24 px | #64748B</div>
|
||||
<a href="https://remixicon.com/icon/settings-3-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">→</div>
|
||||
<div class="icon-name">箭头</div>
|
||||
<div class="icon-size">20x20 px | #CBD5E1</div>
|
||||
<a href="https://remixicon.com/icon/arrow-right-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
|
||||
<!-- 店铺详情图标 -->
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">📞</div>
|
||||
<div class="icon-name">电话</div>
|
||||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||||
<a href="https://remixicon.com/icon/phone-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🧭</div>
|
||||
<div class="icon-name">导航</div>
|
||||
<div class="icon-size">32x32 px | #FFFFFF</div>
|
||||
<a href="https://remixicon.com/icon/compass-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">🕐</div>
|
||||
<div class="icon-name">时间</div>
|
||||
<div class="icon-size">24x24 px | #64748B</div>
|
||||
<a href="https://remixicon.com/icon/time-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
|
||||
<!-- 优惠券图标 -->
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">✓</div>
|
||||
<div class="icon-name">已使用</div>
|
||||
<div class="icon-size">24x24 px | #10B981</div>
|
||||
<a href="https://remixicon.com/icon/check-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">✕</div>
|
||||
<div class="icon-name">已过期</div>
|
||||
<div class="icon-size">24x24 px | #94A3B8</div>
|
||||
<a href="https://remixicon.com/icon/close-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
<div class="icon-card">
|
||||
<div class="icon-preview">📭</div>
|
||||
<div class="icon-name">空状态</div>
|
||||
<div class="icon-size">80x80 px | #CBD5E1</div>
|
||||
<a href="https://remixicon.com/icon/inbox-line" class="btn" target="_blank">下载</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download-all">
|
||||
<p style="color: #64748B; margin-bottom: 20px;">
|
||||
💡 提示:所有图标来自 RemixIcon,完全免费开源
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user