From 3a2f6693a164d292df648f22afaa152cf5b747be Mon Sep 17 00:00:00 2001
From: bltcn <bltcn@163.com>
Date: 星期一, 19 八月 2024 13:36:13 +0800
Subject: [PATCH] donate list (#2022)
---
web-pages/src/views/home/banner.vue | 244 ++++++++++++++++++++++++++++++++++++------------
1 files changed, 181 insertions(+), 63 deletions(-)
diff --git a/web-pages/src/views/home/banner.vue b/web-pages/src/views/home/banner.vue
index 1a1b19d..40f49e1 100644
--- a/web-pages/src/views/home/banner.vue
+++ b/web-pages/src/views/home/banner.vue
@@ -1,77 +1,195 @@
<template>
- <div class="banner-comp">
- <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="item">
- <img class="banner-bg" :src="item.url" alt="">
- <div v-if="item.flag === 1" class="content">
- <h3 class="yjqd">
- 涓�閿惎鍔‵UNASR
- </h3>
- <p class="text">
- FUNASR甯屾湜鍦ㄨ闊宠瘑鍒殑瀛︽湳鐮旂┒鍜屽伐涓氬簲鐢ㄤ箣闂存灦璧蜂竴搴фˉ姊併�傞�氳繃鍙戝竷宸ヤ笟绾�<br />
- 璇煶璇嗗埆妯″瀷鐨勮缁冨拰寰皟锛岀爺绌朵汉鍛樺拰寮�鍙戜汉鍛樺彲浠ユ洿鏂逛究鍦拌繘琛岃闊宠瘑鍒ā鍨嬬殑<br />
- 鐮旂┒鍜岀敓浜э紝骞舵帹鍔ㄨ闊宠瘑鍒敓鎬佺殑鍙戝睍銆傝璇煶璇嗗埆鏇存湁瓒ｏ紒
- </p>
+ <div class="banner-comp">
+ <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="item">
+ <img class="banner-bg" :src="item.url" alt="" />
+ <div v-if="item.flag === 1" class="content">
+ <h3 class="yjqd">涓�閿惎鍔‵UNASR</h3>
+ <p class="text">
+ FUNASR甯屾湜鍦ㄨ闊宠瘑鍒殑瀛︽湳鐮旂┒鍜屽伐涓氬簲鐢ㄤ箣闂存灦璧蜂竴搴фˉ姊併�傞�氳繃鍙戝竷宸ヤ笟绾�<br />
+ 璇煶璇嗗埆妯″瀷鐨勮缁冨拰寰皟锛岀爺绌朵汉鍛樺拰寮�鍙戜汉鍛樺彲浠ユ洿鏂逛究鍦拌繘琛岃闊宠瘑鍒ā鍨嬬殑<br />
+ 鐮旂┒鍜岀敓浜э紝骞舵帹鍔ㄨ闊宠瘑鍒敓鎬佺殑鍙戝睍銆傝璇煶璇嗗埆鏇存湁瓒ｏ紒
+ </p>
- <div class="lxwm">
- 鑱旂郴鎴戜滑
- </div>
- </div>
+ <div class="lxwm">鑱旂郴鎴戜滑</div>
+ <div class="jzmd-wrap">
+ <div class="jzmd-title">鎹愯禒鍚嶅崟</div>
+ <div class="jzmd-content">
+ <div
+ class="jzmd-item"
+ v-for="(item, index) in jzmdList"
+ :key="index"
+ >
+ <div class="name">{{ item.name }}</div>
+ <div class="num-text">
+ <span class="text">{{ item.num }}</span>
+ <span class="unit">鍏�</span>
</div>
+ </div>
</div>
+ </div>
</div>
-
- <div class="swiper-pagination"></div>
+ </div>
</div>
+ </div>
+
+ <div class="swiper-pagination"></div>
</div>
+ </div>
</template>
<script>
-import Swiper from 'swiper'
+import Swiper from "swiper";
export default {
- name: 'banner-comp',
- data () {
- return {
- bannerList: [
- {
- flag: 1,
- url: require('./assets/images/banner.png')
- }
- ],
- swiperObj: null
- }
+ name: "banner-comp",
+ data() {
+ return {
+ bannerList: [
+ {
+ flag: 1,
+ url: require("./assets/images/banner.png"),
+ },
+ ],
+ swiperObj: null,
+ jzmdList: [
+ {
+ 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,
+ },
+ {
+ name: "姊佹旦閿�",
+ num: 66,
+ },
+ {
+ name: "Alan",
+ num: 66,
+ },
+ {
+ name: "姗欐眮",
+ num: 50,
+ },
+ {
+ name: "椹媷",
+ num: 50,
+ },
+ {
+ name: "杞﹀厛鐢�",
+ num: 30.66,
+ },
+ {
+ name: "闄堜功涓�",
+ num: 22.22,
+ },
+ {
+ name: "钁�",
+ num: 22,
+ },
+ {
+ name: "H2G2",
+ num: 20.24,
+ },
+ {
+ name: "鐧芥槑鏅�",
+ num: 20,
+ },
+ {
+ name: "鍚戝墠涓�鏍�",
+ num: 20,
+ },
+ {
+ name: "Hey Song",
+ num: 20,
+ },
+ {
+ name: "javaweh",
+ num: 20,
+ },
+ {
+ name: "鍒樺織浼�",
+ num: 20,
+ },
+ {
+ name: "鎵撻笩鑲夌殑灏忓墤渚�",
+ num: 10,
+ },
+ {
+ name: "灏忛倱",
+ num: 10,
+ },
+ ],
+ };
+ },
+ mounted() {
+ this.$nextTick(() => {
+ this.initSwiper();
+ });
+ },
+ methods: {
+ initSwiper() {
+ if (this.swiperObj) {
+ this.swiperObj.destroy();
+ }
+ // const that = this
+ this.swiperObj = new Swiper(this.$refs["swiper-container"], {
+ slidesPerView: 1,
+ direction: "vertical",
+ pagination: {
+ el: ".swiper-pagination",
+ dynamicBullets: true,
+ },
+ on: {
+ slideChangeTransitionEnd: function () {},
+ init: function () {},
+ },
+ });
},
- mounted () {
- this.$nextTick(() => {
- this.initSwiper()
- })
- },
- methods: {
- initSwiper () {
- if (this.swiperObj) {
- this.swiperObj.destroy()
- }
- // const that = this
- this.swiperObj = new Swiper(this.$refs['swiper-container'], {
- slidesPerView: 1,
- direction: 'vertical',
- pagination: {
- el: '.swiper-pagination',
- dynamicBullets: true
- },
- on: {
- slideChangeTransitionEnd: function () {
-
- },
- init: function () {
-
- }
- }
- })
- }
- }
-}
+ },
+};
</script>
<style src="./assets/css/banner.scss" lang="scss"></style>
--
Gitblit v1.9.1