js+css实现电商全套svg图标并下载网页代码
代码语言：html
所属分类：其他
代码描述：生成电商全套svg图标并下载网页代码
代码标签： js css 电商 全套 svg 图标 下载代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电商App SVG图标设计与定制下载工坊</title>
<!-- Tailwind CSS 引入 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- JSZip 库引入（用于一键打包下载全部图标） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: #0b0f19;
color: #f3f4f6;
}
/* 自定义网格透明背景 */
.trans-grid {
background-image: linear-gradient(45deg, #161d30 25%, transparent 25%),
linear-gradient(-45deg, #161d30 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #161d30 75%),
linear-gradient(-45deg, transparent 75%, #161d30 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- 头部导航 -->
<header class="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md sticky top-0 z-40 px-6 py-4">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="p-2 bg-indigo-600 rounded-xl text-white shadow-lg shadow-indigo-500/20">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
</svg>
</div>
<div>
<h1 class="text-xl font-bold tracking-tight bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">E-Shop SVG Studio</h1>
<p class="text-xs text-slate-400">专为电商App设计的矢量图标库与定制下载器</p>
</div>
</div>
<!-- 批量下载按钮 -->
<button onclick="downloadAllAsZip()" class="flex items-center gap-2 bg-gradient-to-r from-indigo-500 to-violet-600 hover:from-indigo-600 hover:to-violet-700 text-white font-medium px-5 py-2.5 rounded-xl transition duration-200 shadow-lg shadow-indigo-500/10 active:scale-95 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
</svg>
打包下载全部定制图标 (ZIP)
</button>
</div>
</header>
<!-- 主体内容 -->
<main class="flex-1 max-w-7xl w-full mx-auto px-6 py-8 flex flex-col lg:flex-row gap-8">
<!-- 左侧控制面板 -->
<section class="w-full lg:w-80 shrink-0 flex flex-col gap-6">
<!-- 搜索与筛选 -->
<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-sm">
<h3 class="text-sm font-semibold text-slate-300 mb-3">搜索图标</h3>
<div class="relative">
<input type="text" id="searchInput" oninput="filterIcons()" placehold.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0