From 376467b1561ec1e1b73b018c6a2c0fefd52f9167 Mon Sep 17 00:00:00 2001
From: bltcn <bltcn@163.com>
Date: 星期二, 27 八月 2024 14:30:59 +0800
Subject: [PATCH] update web (#2034)
---
web-pages/src/views/home/banner.vue | 330 +++++++++++++++++++++++++-----------------------------
1 files changed, 151 insertions(+), 179 deletions(-)
diff --git a/web-pages/src/views/home/banner.vue b/web-pages/src/views/home/banner.vue
index 40f49e1..5ee77b9 100644
--- a/web-pages/src/views/home/banner.vue
+++ b/web-pages/src/views/home/banner.vue
@@ -1,195 +1,167 @@
<template>
- <div class="banner-comp">
- <div
- class="swiper-container"
- ref="swiper-container"
- :class="{ hiddenPagination: bannerList && bannerList.length < 2 }"
- >
- <div class="swiper-wrapper">
+ <div class="banner-comp">
<div
- class="swiper-slide"
- v-for="(item, index) in bannerList"
- :key="index"
+ class="swiper-container"
+ ref="swiper-container"
+ :class="{ hiddenPagination: bannerList && bannerList.length < 2 }"
>
- <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="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 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 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>
- </div>
</div>
- </div>
</div>
- </div>
- </div>
- </div>
- <div class="swiper-pagination"></div>
+ <div class="swiper-pagination"></div>
+ </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,
- 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 () {},
- },
- });
+ name: 'banner-comp',
+ data () {
+ return {
+ bannerList: [
+ {
+ flag: 1,
+ url: require('./assets/images/banner.png')
+ }
+ ],
+ swiperObj: null,
+ jzmdSwiperObj: 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
+ }
+ ]
+ }
},
- },
-};
+ computed: {
+ jzmdRows () {
+ return Math.ceil(this.jzmdList.length / 2)
+ }
+ },
+ mounted () {
+ this.$nextTick(() => {
+ this.initSwiper()
+ })
+ this.initJzmdSwiper()
+ },
+ 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 () {}
+ }
+ })
+ },
+ 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
+ })
+ }
+ }
+}
</script>
<style src="./assets/css/banner.scss" lang="scss"></style>
--
Gitblit v1.9.1