|
@@ -8,7 +8,29 @@
|
|
|
<van-search class='equipment-search' v-model='keyword' placeholder='请输入抽屉编号/控制回路/楼层' @search='onSearch'></van-search>
|
|
|
</div>
|
|
|
<div class='card-container'>
|
|
|
- <m-swiper></m-swiper>
|
|
|
+ <swiper class='swiper' :options='swiperOption'>
|
|
|
+ <swiper-slide>1-2AA1-11</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-112</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-113</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-114</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-115</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-116</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-117</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-118</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-119</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1110</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1111</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1112</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1113</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1114</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1115</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1116</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1117</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1118</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1119</swiper-slide>
|
|
|
+ <swiper-slide>1-2AA1-1120</swiper-slide>
|
|
|
+ <div class='swiper-pagination' slot='pagination'></div>
|
|
|
+ </swiper>
|
|
|
</div>
|
|
|
<div class='info-container'>
|
|
|
<div class='border'></div>
|
|
@@ -46,28 +68,38 @@
|
|
|
import Vue from 'vue'
|
|
|
import { NavBar, Search } from 'vant'
|
|
|
Vue.use(NavBar).use(Search)
|
|
|
-// import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
-// import 'swiper/swiper.less'
|
|
|
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
|
|
|
+import 'swiper/swiper-bundle.css'
|
|
|
import MSwiper from '../../components/MSwiper.vue'
|
|
|
export default {
|
|
|
name: 'LowVoltageCabinetDetail',
|
|
|
props: {},
|
|
|
- // components: { Swiper, SwiperSlide },
|
|
|
- components: { MSwiper },
|
|
|
- // directives: {
|
|
|
- // swiper: directive,
|
|
|
- // },
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ },
|
|
|
+ directives: {
|
|
|
+ swiper: directive,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
keyword: '',
|
|
|
swiperOption: {
|
|
|
slidesPerView: 3,
|
|
|
- slidesPerColumn: 2,
|
|
|
- spaceBetween: 30,
|
|
|
+ // slidesPerGroup: 3,
|
|
|
+ slidesPerColumn: 5,
|
|
|
+ spaceBetween: 10,
|
|
|
+ slidesPerColumnFill: 'row',
|
|
|
pagination: {
|
|
|
el: '.swiper-pagination',
|
|
|
clickable: true,
|
|
|
},
|
|
|
+ // autoplay: {
|
|
|
+ // //自动播放
|
|
|
+ // delay: 1500,
|
|
|
+ // disableOnInteraction: false,
|
|
|
+ // },
|
|
|
+ // speed: 1500, //播放速度
|
|
|
},
|
|
|
control: '',
|
|
|
drawernum: '',
|
|
@@ -126,6 +158,36 @@ export default {
|
|
|
margin-top: 12px;
|
|
|
padding: 20px 15px 0 15px;
|
|
|
background: #fff;
|
|
|
+ .swiper {
|
|
|
+ max-height: 300px;
|
|
|
+ width: 100%;
|
|
|
+ .swiper-slide {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #ebeded;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ max-height: 300px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ .swiper-slide {
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-pagination {
|
|
|
+ position: relative;
|
|
|
+ bottom: 0;
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
.info-container {
|
|
|
padding: 15px;
|