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/assets/css/banner.scss | 269 +++++++++++++-------------
web-pages/src/views/home/banner.vue | 330 +++++++++++++++-----------------
2 files changed, 288 insertions(+), 311 deletions(-)
diff --git a/web-pages/src/views/home/assets/css/banner.scss b/web-pages/src/views/home/assets/css/banner.scss
index 4b765a2..e0d1444 100644
--- a/web-pages/src/views/home/assets/css/banner.scss
+++ b/web-pages/src/views/home/assets/css/banner.scss
@@ -2,138 +2,143 @@
width: 100%;
height: p(942);
.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%;
- }
- .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);
- }
- .text {
- font-size: p(17);
- letter-spacing: 1px;
- color: #d4d4d4;
- }
- .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;
- }
- .lxwm:hover {
- background-color: #316fff;
- }
-
- .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-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);
- 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;
- }
- }
- }
- &:after {
- content: "";
- width: p(118);
- height: 0;
- }
- }
- }
- }
}
- }
-
+ .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%;
+ }
+ .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);
+ }
+ .text {
+ font-size: p(17);
+ letter-spacing: 1px;
+ color: #d4d4d4;
+ }
+ .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;
+ }
+ .lxwm:hover {
+ background-color: #316fff;
+ }
+
+ .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 {
+ width: p(294);
+ height: p(207);
+ margin-left: 0;
+
+ .jzmd-row {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .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);
+ 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;
+ }
+ }
+ }
+ &:after {
+ content: '';
+ width: p(118);
+ height: 0;
+ }
+ }
+ }
+ }
+ }
+}
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