目录
一、Swiper插件
1、安装swiper
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
2、导入css中
@import '../../public/static/css/swiper-bundle.min.css';
二、分类界面设计
1、左侧side部分代码
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="t_thumbs">
<div class="t_thumbs_img">
<img src="../../public/static/img/推荐1.jpg" alt="">
</div>
<div class="t_thumbs_info">
<a href="#" class="t_thumbs_title">炙黄芪</a>
<p class="t_thumbs_body">黄芪的炮制加工品</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="t_thumbs">
<div class="t_thumbs_img">
<img src="../../public/static/img/推荐2.jpg" alt="">
</div>
<div class="t_thumbs_info">
<a href="#" class="t_thumbs_title">天冬</a>
<p class="t_thumbs_body">百合科植物天冬的块根</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="t_thumbs">
<div class="t_thumbs_img">
<img src="../../public/static/img/推荐3.jpg" alt="">
</div>
<div class="t_thumbs_info">
<a href="#" class="t_thumbs_title">丁香</a>
<p class="t_thumbs_body">桃金娘科植物丁香的花蕾</p>
</div>
</div>
</div>
</div>
2、右侧详细内容
<div class="home-1-slider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="t_sliders">
<div class="t_sliders_info">
<h4 class="t_sliders_title">炙黄芪</h4>
<p class="t_sliders_body">益气补中 属补虚药下分类的补气药</p>
<p class="t_sliders_text"> 本品呈圆形或椭圆形的厚片,直径0.8~3.5厘米,厚0.1~0.4厘米。外表皮淡棕黄色或淡棕褐色,略有光泽,可见纵皱纹或纵沟。切面皮部黄白色,木部淡黄色,有放射状纹理和裂隙。具蜜香气,味甜,略带黏性,嚼之微有豆腥味。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="t_sliders">
<div class="t_sliders_info">
<h4 class="t_sliders_title">天冬</h4>
<p class="t_sliders_body">养阴润燥、润肺生津。属补虚药下属分类的补阴药。</p>
<p class="t_sliders_text">长纺锤形,略弯曲,长5~18厘米,直径0.5~2厘米。表面黄白色至淡黄棕色,半透明,光滑或具深浅不等的纵皱纹,偶有残存的灰棕色外皮。质硬或柔润,有黏性,断面角质样,中柱黄白色。气微,味甜、微苦。</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="t_sliders">
<div class="t_sliders_info">
<h4 class="t_sliders_title">丁香</h4>
<p class="t_sliders_body">温中降逆、补肾助阳 属温里药</p>
<p class="t_sliders_text"> 略研棒状。花冠圆球形,花瓣4,覆瓦状抱合,棕褐色至黄褐色,花瓣内为雄蕊和花柱,搓碎后可见众多黄色细粒状的花药。萼筒圆柱状,略扁,有的稍弯曲,红棕色或棕褐色,上部有4枚三角状的萼片,“十”字形分开。质坚实,富油性。气芳香浓烈,味辛辣,有麻舌感。</p>
</div>
</div>
</div>
</div>
<div class="swiperButton">
<div class="swiper-button-next">
<i class="fas fa-angle-right"></i>
</div>
<div class="swiper-button-prev">
<i class="fas fa-angle-left"></i>
</div>
</div>
</div>
</div>
3、成果展示
其中点击左侧、滑动右侧内容、点击翻页按钮都可以实现翻页效果。