|
@@ -1,17 +1,48 @@
|
|
|
{<template>
|
|
|
- <div class="swiper">
|
|
|
- <van-swipe :autoplay="3000">
|
|
|
- <van-swipe-item v-for="(image, index) in images" :key="index">
|
|
|
- <img v-lazy="image" />
|
|
|
- </van-swipe-item>
|
|
|
- </van-swipe>
|
|
|
-
|
|
|
+ <div class="box">
|
|
|
+ <div class="swiper">
|
|
|
+ <van-swipe :autoplay="3000">
|
|
|
+ <van-swipe-item v-for="(image, index) in images" :key="index">
|
|
|
+ <img v-lazy="image" />
|
|
|
+ </van-swipe-item>
|
|
|
+ </van-swipe>
|
|
|
+ </div>
|
|
|
<van-grid class="gird" :gutter="10" :border="false" :column-num="3">
|
|
|
<van-grid-item v-for="(item, index) in gridImages" :key="index">
|
|
|
<van-image :src="item.src" />
|
|
|
<div class="grid-box">{{ item.text }}</div>
|
|
|
</van-grid-item>
|
|
|
</van-grid>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="left-box">
|
|
|
+ <span class="shu"></span>
|
|
|
+ <span>新闻中心</span>
|
|
|
+ </div>
|
|
|
+ <div class="more">>>>更多</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+ <div>sss</div>
|
|
|
+
|
|
|
+ <div>sss</div>
|
|
|
+
|
|
|
<Footer page="index"></Footer>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -71,41 +102,60 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.swiper {
|
|
|
- width: 100%;
|
|
|
- height: 170px;
|
|
|
- .van-swipe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- img {
|
|
|
+.box {
|
|
|
+ margin: 0 2%;
|
|
|
+ border: 1px solid red;
|
|
|
+ .swiper {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- pointer-events: none;
|
|
|
+ height: 170px;
|
|
|
+ .van-swipe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .custom-indicator {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 5px;
|
|
|
+ padding: 2px 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
- .custom-indicator {
|
|
|
- position: absolute;
|
|
|
- right: 5px;
|
|
|
- bottom: 5px;
|
|
|
- padding: 2px 5px;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.gird {
|
|
|
- .grid-box {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 15px;
|
|
|
+ .gird {
|
|
|
+ .grid-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ .van-image {
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ .van-image__img,
|
|
|
+ .van-image__error,
|
|
|
+ .van-image__loading {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- .van-image {
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
- .van-image__img,
|
|
|
- .van-image__error,
|
|
|
- .van-image__loading {
|
|
|
- height: 100%;
|
|
|
+ .content-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10px;
|
|
|
+ .left-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .shu {
|
|
|
+ display: inline-block;
|
|
|
+ height: 20px;
|
|
|
+ border-right: 5px solid orangered;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|