From 2c2fb5e1eb1185a081e3507c2aa5c3aafaa2bb6d Mon Sep 17 00:00:00 2001
From: zhifu gao <zhifu.gzf@alibaba-inc.com>
Date: 星期二, 22 四月 2025 09:56:44 +0800
Subject: [PATCH] Update README.md (#2487)
---
web-pages/src/views/home/banner.vue | 146 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 112 insertions(+), 34 deletions(-)
diff --git a/web-pages/src/views/home/banner.vue b/web-pages/src/views/home/banner.vue
index d01e1ee..d973d00 100644
--- a/web-pages/src/views/home/banner.vue
+++ b/web-pages/src/views/home/banner.vue
@@ -1,22 +1,49 @@
<template>
<div class="banner-comp">
- <div class="swiper-container" ref="swiper-container">
+ <div
+ class="swiper-container"
+ ref="swiper-container"
+ :class="{ hiddenPagination: bannerList && bannerList.length < 2 }"
+ >
<div class="swiper-wrapper">
- <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
+ <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
<div class="item">
- <img class="banner-bg" :src="item.url" alt="">
+ <img class="banner-bg" :src="item.url" alt />
<div v-if="item.flag === 1" class="content">
- <h3 class="yjqd">
- 涓�閿惎鍔‵UNASR
- </h3>
+ <h3 class="yjqd">涓�閿惎鍔‵UNASR</h3>
<p class="text">
- FUNASR甯屾湜鍦ㄨ闊宠瘑鍒殑瀛︽湳鐮旂┒鍜屽伐涓氬簲鐢ㄤ箣闂存灦璧蜂竴搴фˉ姊併�傞�氳繃鍙戝竷宸ヤ笟绾�<br />
- 璇煶璇嗗埆妯″瀷鐨勮缁冨拰寰皟锛岀爺绌朵汉鍛樺拰寮�鍙戜汉鍛樺彲浠ユ洿鏂逛究鍦拌繘琛岃闊宠瘑鍒ā鍨嬬殑<br />
- 鐮旂┒鍜岀敓浜э紝骞舵帹鍔ㄨ闊宠瘑鍒敓鎬佺殑鍙戝睍銆傝璇煶璇嗗埆鏇存湁瓒ｏ紒
+ FUNASR甯屾湜鍦ㄨ闊宠瘑鍒殑瀛︽湳鐮旂┒鍜屽伐涓氬簲鐢ㄤ箣闂存灦璧蜂竴搴фˉ姊併�傞�氳繃鍙戝竷宸ヤ笟绾�
+ <br />璇煶璇嗗埆妯″瀷鐨勮缁冨拰寰皟锛岀爺绌朵汉鍛樺拰寮�鍙戜汉鍛樺彲浠ユ洿鏂逛究鍦拌繘琛岃闊宠瘑鍒ā鍨嬬殑
+ <br />鐮旂┒鍜岀敓浜э紝骞舵帹鍔ㄨ闊宠瘑鍒敓鎬佺殑鍙戝睍銆傝璇煶璇嗗埆鏇存湁瓒ｏ紒
</p>
- <div class="lxwm">
- 鑱旂郴鎴戜滑
+ <div class="lxwm">鑱旂郴鎴戜滑</div>
+ <div class="jzmd-wrap">
+ <div class="jzmd-title">鎹愯禒鍚嶅崟</div>
+ <div class="jzmd-content swiper-container" ref="jzmd-swiper">
+ <div class="swiper-wrapper">
+ <div
+ class="jzmd-row swiper-slide"
+ v-for="(item,index) in jzmdRows"
+ :key="index"
+ >
+ <div class="jzmd-item" v-if="jzmdList[2 * (item -1)]">
+ <div class="name">{{ jzmdList[2 * (item -1)].name }}</div>
+ <div class="num-text">
+ <span class="text">{{ jzmdList[2 * (item -1)].num }}</span>
+ <span class="unit">鍏�</span>
+ </div>
+ </div>
+ <div class="jzmd-item" v-if="jzmdList[2 * (item -1) + 1]">
+ <div class="name">{{ jzmdList[2 * (item -1) + 1].name }}</div>
+ <div class="num-text">
+ <span class="text">{{ jzmdList[2 * (item -1) + 1].num }}</span>
+ <span class="unit">鍏�</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -38,31 +65,68 @@
{
flag: 1,
url: require('./assets/images/banner.png')
- },
- {
- flag: 2,
- url: require('./assets/images/banner.png')
- },
- {
- flag: 2,
- url: require('./assets/images/banner.png')
- },
- {
- flag: 2,
- url: require('./assets/images/banner.png')
- },
- {
- flag: 2,
- url: require('./assets/images/banner.png')
}
],
- swiperObj: null
+ swiperObj: null,
+ jzmdSwiperObj: null,
+ jzmdList: [
+ {
+ name: '鍒樿繛鍝�',
+ num: 300
+ },
+ {
+ name: '绋嬩繆闄�',
+ num: 300
+ },
+ {
+ name: '榛勬槑',
+ num: 236
+ },
+ {
+ name: '楂樺織浠�',
+ num: 235
+ },
+ {
+ name: '闄堢繑',
+ num: 200
+ },
+ {
+ name: '澶忎警鏉�',
+ num: 200
+ },
+ {
+ name: '榛勮嵂甯�',
+ num: 198
+ },
+ {
+ name: '鑲栫倻',
+ num: 100
+ },
+ {
+ name: '鍒樻煴',
+ num: 100
+ },
+ {
+ name: '榛勬按鏉�',
+ num: 85
+ },
+ {
+ name: '瀛愰緳',
+ num: 85
+ }
+ ]
+ }
+ },
+ computed: {
+ jzmdRows () {
+ return Math.ceil(this.jzmdList.length / 2)
}
},
mounted () {
this.$nextTick(() => {
this.initSwiper()
})
+ this.initJzmdSwiper()
},
methods: {
initSwiper () {
@@ -78,14 +142,28 @@
dynamicBullets: true
},
on: {
- slideChangeTransitionEnd: function () {
-
- },
- init: function () {
-
- }
+ slideChangeTransitionEnd: function () {},
+ init: function () {}
}
})
+ },
+ initJzmdSwiper () {
+ if (this.jzmdSwiperObj) {
+ this.jzmdSwiperObj.destroy()
+ }
+ // const that = this
+ this.jzmdSwiperObj = new Swiper(this.$refs['jzmd-swiper'], {
+ direction: 'vertical',
+ autoplay: {
+ delay: 2000,
+ stopOnLastSlide: false,
+ disableOnInteraction: false
+ },
+ slidesPerView: 5,
+ slidesPerGroup: 1,
+ loop: true,
+ loopedSlides: 7
+ })
}
}
}
--
Gitblit v1.9.1