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/assets/css/banner.scss | 189 +++++++++++++++--------
web-pages/src/views/home/banner.vue | 244 ++++++++++++++++++++++-------
2 files changed, 306 insertions(+), 127 deletions(-)
diff --git a/web-pages/src/views/home/assets/css/banner.scss b/web-pages/src/views/home/assets/css/banner.scss
index 2b89eb0..4b765a2 100644
--- a/web-pages/src/views/home/assets/css/banner.scss
+++ b/web-pages/src/views/home/assets/css/banner.scss
@@ -1,78 +1,139 @@
-.banner-comp{
+.banner-comp {
width: 100%;
height: p(942);
- .swiper-container{
+ .swiper-container {
+ width: 100%;
+ height: 100%;
+ }
+ .swiper-pagination {
+ left: p(80);
+ width: p(15) !important;
+ top: 48% !important;
+ // overflow: initial;
+ .swiper-pagination-bullet {
+ width: p(15);
+ height: p(15) !important;
+ border-radius: p(3);
+ background: #1664ff !important;
+ opacity: 1;
+ }
+ .swiper-pagination-bullet-active-next {
+ transform: scale(0.33);
+ }
+ .swiper-pagination-bullet-active-prev {
+ transform: scale(0.33);
+ }
+ }
+ .hiddenPagination {
+ .swiper-pagination {
+ display: none;
+ }
+ }
+ .item {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .banner-bg {
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
height: 100%;
- }
- .swiper-pagination{
- left: p(80);
- width: p(15) !important;
- top: 48% !important;
- // overflow: initial;
- .swiper-pagination-bullet{
- width: p(15);
- height: p(15) !important;
- border-radius: p(3);
- background: #1664ff !important;
- opacity: 1
+ }
+ .content {
+ top: p(330);
+ left: p(216);
+ position: absolute;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ .yjqd {
+ letter-spacing: 3px;
+ color: #ffffff;
+ font-size: p(68);
}
- .swiper-pagination-bullet-active-next{
- transform: scale(.33)
+ .text {
+ font-size: p(17);
+ letter-spacing: 1px;
+ color: #d4d4d4;
}
- .swiper-pagination-bullet-active-prev{
- transform: scale(.33)
+ .lxwm {
+ color: #ffffff;
+ font-size: p(16);
+ width: p(124);
+ height: p(38);
+ background-color: #165dff;
+ border-radius: 4px;
+ text-align: center;
+ line-height: p(38);
+ margin-top: p(33);
+ cursor: pointer;
}
- }
- .hiddenPagination{
- .swiper-pagination{
-
- display: none;
+ .lxwm:hover {
+ background-color: #316fff;
}
- }
- .item{
- width: 100%;
- height: 100%;
- position: relative;
- .banner-bg{
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
- .content{
- top: p(330);
- left: p(216);
- position: absolute;
- z-index: 2;
+
+ .jzmd-wrap {
+ margin-top: p(63);
+ .jzmd-title {
+ position: relative;
+ line-height: 1;
+ padding-bottom: p(15);
+ margin-bottom: p(21);
+ font-size: p(22);
+ font-weight: 700;
+ color: #ffffff;
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 2em;
+ height: p(2);
+ background-color: #aeaeb7;
+ border-radius: p(2);
+ }
+ }
+ .jzmd-content {
display: flex;
- flex-direction: column;
- .yjqd{
- letter-spacing: 3px;
- color: #ffffff;
- font-size: p(68);
- }
- .text{
- font-size: p(17);
- letter-spacing: 1px;
- color: #d4d4d4;
- }
- .lxwm{
- color: #ffffff;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ width: p(294);
+ .jzmd-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: p(118);
+ line-height: 1;
+ margin-bottom: p(26);
+ .name {
font-size: p(16);
- width: p(124);
- height: p(38);
- background-color: #165dff;
- border-radius: 4px;
- text-align: center;
- line-height: p(38);
- margin-top: p(33);
- cursor: pointer;
+ color: #ffffff;
+ }
+ .num-text {
+ display: flex;
+ align-items: baseline;
+ align-items: baseline;
+ .text {
+ font-size: p(18);
+ color: #ffffff;
+ }
+ .unit {
+ font-size: p(14);
+ color: #ffffff;
+ }
+ }
}
- .lxwm:hover{
- background-color: #316fff;
+ &:after {
+ content: "";
+ width: p(118);
+ height: 0;
}
+ }
}
+ }
}
-}
\ No newline at end of file
+ }
+
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