药品展示与销售 - 豆包

帮我写一个益业堂大药房的网页

下面是一个益业堂大药房的网页设计。这个设计采用了医疗行业常用的蓝色作为主色调，传达专业和可信赖的品牌形象。网页包含了药房介绍、服务项目、药品展示、专家团队、用户评价和联系方式等核心内容模块，同时添加了平滑滚动、悬停动画和响应式布局等现代网页元素。

Asset cover

益业堂大药房网站

V1

创建时间：03:00

这个网页设计包含了以下特色：

专业医疗色彩方案：使用蓝色作为主色调，传达专业和可信赖的品牌形象，辅以绿色和橙色作为辅助色。
完整的功能模块：包含药房介绍、服务项目、药品展示、专家团队、用户评价和联系方式等核心内容，满足用户的各类需求。
现代 UI 设计：采用卡片式布局、圆角设计和阴影效果，创造出层次感和深度，提升用户体验。
响应式设计：适配各种屏幕尺寸，从手机到桌面设备都有良好的显示效果。
交互效果：添加了平滑滚动、悬停动画、导航栏滚动变化等动态效果，增强用户交互体验。
清晰的视觉层次：通过字体大小、颜色和间距的变化，建立清晰的信息层级，帮助用户快速获取关键信息。
联系表单：提供留言咨询功能，方便用户与药房取得联系。

你可以根据实际需求对内容进行调整和扩展，例如添加更多药品信息、详细的服务说明等。

在此处拖放文件

文件数量：最多 50 个, 文件类型：pdf, txt, csv, docx, doc, xlsx, xls, pptx, ppt, md, mobi, epub

代码

预览

index.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>益业堂大药房 - 专业健康服务</title>

<script src="https://cdn.tailwindcss.com"></script>

<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<script>

tailwind.config = {

theme: {

extend: {

colors: {

primary: '#165DFF',

secondary: '#36B37E',

accent: '#FF5630',

neutral: {

100: '#F5F7FA',

200: '#E5E6EB',

300: '#C9CDD4',

400: '#86909C',

500: '#4E5969',

600: '#272E3B',

700: '#1D2129',

}

},

fontFamily: {

inter: ['Inter', 'sans-serif'],

},

}

}

}

</script>

<style type="text/tailwindcss">

@layer utilities {

.content-auto {

content-visibility: auto;

}

.text-shadow {

text-shadow: 0 2px 4px rgba(0,0,0,0.1);

}

.transition-custom {

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.hover-scale {

@apply hover:scale-105 transition-all duration-300;

}

.card-shadow {

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

}

.section-padding {

padding-top: clamp(3rem, 8vh, 6rem);

padding-bottom: clamp(3rem, 8vh, 6rem);

}

}

</style>

</head>

<body class="font-inter text-neutral-700 bg-neutral-100">

<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 shadow-sm">

<div class="container mx-auto px-4 md:px-6">

<div class="flex items-center justify-between h-16 md:h-20">

<a href="#" class="flex items-center space-x-2">

<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">

<i class="fa fa-plus-circle text-white text-xl"></i>

</div>

<span class="text-xl md:text-2xl font-bold text-primary">益业堂大药房</span>

</a>

<nav class="hidden md:flex space-x-8">

<a href="#home" class="text-neutral-700 hover:text-primary font-medium transition-custom">首页</a>

<a href="#about" class="text-neutral-700 hover:text-primary font-medium transition-custom">关于我们</a>

<a href="#services" class="text-neutral-700 hover:text-primary font-medium transition-custom">服务项目</a>

<a href="#products" class="text-neutral-700 hover:text-primary font-medium transition-custom">药品展示</a>

<a href="#experts" class="text-neutral-700 hover:text-primary font-medium transition-custom">专家团队</a>

<a href="#testimonials" class="text-neutral-700 hover:text-primary font-medium transition-custom">用户评价</a>

<a href="#contact" class="text-neutral-700 hover:text-primary font-medium transition-custom">联系我们</a>

</nav>

<button id="menu-toggle" class="md:hidden text-neutral-700 focus:outline-none">

<i class="fa fa-bars text-2xl"></i>

</button>

</div>

</div>

<div id="mobile-menu" class="hidden md:hidden bg-white border-t">

<div class="container mx-auto px-4 py-3 space-y-3">

<a href="#home" class="block py-2 text-neutral-700 hover:text-primary font-medium">首页</a>

</html>