project-jiaxinglcpy
/
jxlcpy_base_daoshi_vue_ts
forked from common/base_daoshi_vue_ts
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 🧩 修改滑动问题

pull/5/head
张耀 3 years ago
parent
aaa21989d7
commit
8d4361a2f5
6 changed files with 49 additions and 152 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      package-lock.json
  2. 2
      package.json
  3. 107
      public/static/offline/JSON/getActivityList1.json
  4. 18
      public/static/offline/JSON/getAdvertisingList.json
  5. 4
      src/components/Carousel/Carousel.vue
  6. 37
      src/views/Activity/Activity.vue

33
package-lock.json
View File

@ -18,7 +18,7 @@
"lottie-web": "^5.10.2",
"pinia": "^2.0.30",
"qrcode": "^1.5.1",
"swiper": "^9.0.5",
"swiper": "^8.4.5",
"vue": "^3.2.13",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.3",
@ -7840,6 +7840,14 @@
"entities": "^2.0.0"
}
},
"node_modules/dom7": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.6.tgz",
"integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
"dependencies": {
"ssr-window": "^4.0.0"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@ -16952,9 +16960,9 @@
}
},
"node_modules/swiper": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.0.5.tgz",
"integrity": "sha512-UiLQ5fvn8L3ZZpaPa+9oiwKwhVGQt5TVc0UuXxFKHyTQe8g2E3vbPMiMfIGb6NhNGj5ntsSDyyNgg4qVmWlJkQ==",
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
"integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
"funding": [
{
"type": "patreon",
@ -16965,7 +16973,9 @@
"url": "http://opencollective.com/swiper"
}
],
"hasInstallScript": true,
"dependencies": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
},
"engines": {
@ -24884,6 +24894,14 @@
"entities": "^2.0.0"
}
},
"dom7": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.6.tgz",
"integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
"requires": {
"ssr-window": "^4.0.0"
}
},
"domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@ -31910,10 +31928,11 @@
}
},
"swiper": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-9.0.5.tgz",
"integrity": "sha512-UiLQ5fvn8L3ZZpaPa+9oiwKwhVGQt5TVc0UuXxFKHyTQe8g2E3vbPMiMfIGb6NhNGj5ntsSDyyNgg4qVmWlJkQ==",
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
"integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
"requires": {
"dom7": "^4.0.4",
"ssr-window": "^4.0.2"
}
},

2
package.json
View File

@ -27,7 +27,7 @@
"lottie-web": "^5.10.2",
"pinia": "^2.0.30",
"qrcode": "^1.5.1",
"swiper": "^9.0.5",
"swiper": "^8.4.5",
"vue": "^3.2.13",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.3",

107
public/static/offline/JSON/getActivityList1.json
View File

@ -58,113 +58,6 @@
"floorOrder": 1,
"point": 3,
"fileUrls": []
}, {
"activityId": 8328,
"activityName": "3331111",
"activityNameEn": "2222",
"activityContent": "2132132132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n2132\n",
"activityContentEn": "2222222",
"activityAddress": "232131",
"activityAddressEn": "22222",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/TDc5S9Z6KiVElVCqooqMj.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/y268pw6m8ys3YmtKUKGno.jpg",
"startDate": "2023-05-31",
"endDate": "2023-07-11",
"building": "",
"buildingCode": "",
"buildingOrder": 0,
"floor": "",
"floorCode": "",
"floorOrder": 0,
"point": -1,
"fileUrls": [
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/EHvBuaTyC8GkoE_hwP3CE.jpg",
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/vRycElclvtkNVHAmPvFgy.jpg",
"/iotFile/project-odubitlp9mjy2wyuqkpfga/20230608/Z8l7mYY91oMk_qiLXbUVN.jpg"
]
},
{
"activityId": 4390,
"activityName": "444活动打扫宫斗是的呢佛山到哪放大说法达萨罗客服经理肯定萨芬发的",
"activityNameEn": "dddd",
"activityContent": "拉萨动静分离凯撒京东方",
"activityContentEn": "kljl",
"activityAddress": "41111",
"activityAddressEn": "",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fCutkOWSsjkSaGJ1OwX38.jpg",
"startDate": "2023-06-07",
"endDate": "2023-07-17",
"building": "濮园未来社区",
"buildingCode": "gAi7ksmAnlR22G8CyLXbI",
"buildingOrder": 0,
"floor": "L1",
"floorCode": "EuMWamqDI1Vd3v-oIYjY5",
"floorOrder": 1,
"point": 3,
"fileUrls": []
},
{
"activityId": 4390,
"activityName": "55444活动打扫宫斗是的呢佛山到哪放大说法达萨罗客服经理肯定萨芬发的",
"activityNameEn": "dddd",
"activityContent": "拉萨动静分离凯撒京东方",
"activityContentEn": "kljl",
"activityAddress": "41111",
"activityAddressEn": "",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fCutkOWSsjkSaGJ1OwX38.jpg",
"startDate": "2023-06-07",
"endDate": "2023-07-17",
"building": "濮园未来社区",
"buildingCode": "gAi7ksmAnlR22G8CyLXbI",
"buildingOrder": 0,
"floor": "L1",
"floorCode": "EuMWamqDI1Vd3v-oIYjY5",
"floorOrder": 1,
"point": 3,
"fileUrls": []
},
{
"activityId": 4390,
"activityName": "66444活动打扫宫斗是的呢佛山到哪放大说法达萨罗客服经理肯定萨芬发的",
"activityNameEn": "dddd",
"activityContent": "拉萨动静分离凯撒京东方",
"activityContentEn": "kljl",
"activityAddress": "41111",
"activityAddressEn": "",
"activityType": 1,
"shopCode": "",
"shopName": "",
"shopNameEn": "",
"houseNumber": "",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"qrFileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/fCutkOWSsjkSaGJ1OwX38.jpg",
"startDate": "2023-06-07",
"endDate": "2023-07-17",
"building": "濮园未来社区",
"buildingCode": "gAi7ksmAnlR22G8CyLXbI",
"buildingOrder": 0,
"floor": "L1",
"floorCode": "EuMWamqDI1Vd3v-oIYjY5",
"floorOrder": 1,
"point": 3,
"fileUrls": []
}
]
}

18
public/static/offline/JSON/getAdvertisingList.json
View File

@ -39,24 +39,6 @@
"endDate": "2023-07-03",
"online": "2023-06-02",
"offline": "2023-07-03"
},{
"id": 9,
"advertisingCode": "2D3D6jrsxdBACj053KCPiD",
"advertisingName": "333",
"advertisingNameEn": "31212",
"advertisingNameOl": "2555",
"advertisingNameJa": "2555",
"address": "33",
"addressEn": "32",
"addressOl": "22",
"addressJa": "22",
"fileCode": "QdTMItiCaAuebZdnW6zjr",
"fileUrl": "/iotFile/project-odubitlp9mjy2wyuqkpfga/20230609/AqUbanFt3SXwU2dT68uNy.jpg",
"ord": 1,
"startDate": "2023-06-01",
"endDate": "2023-07-03",
"online": "2023-06-02",
"offline": "2023-07-03"
}
]
}

4
src/components/Carousel/Carousel.vue
View File

@ -10,7 +10,7 @@
:initial-slide="acList.length !== 1 ? 1 : 0"
:loop="acList.length >= 2 ? true : false"
:pagination="true"
:autoplay="acList.length >= 2 ? { delay: 3000, disableOnInteraction: false } : false"
:autoplay="acList.length >= 2 ? { delay: 5000, disableOnInteraction: false } : false"
:dynamic-bullets="true"
:space-between="16"
class="myswiper"
@ -52,7 +52,7 @@ const modules = [Autoplay, Pagination]
.myswiper {
height: 545px;
text-align: center;
.swiper-slide {
:deep(.swiper-slide) {
width: 800px;
height: 450px;
transition: all 0.3s linear;

37
src/views/Activity/Activity.vue
View File

@ -17,19 +17,23 @@
:dynamic-bullets="true"
:observer="true"
:grab-cursor="true"
:width="547"
:slides-per-view="actList.length === 2 ? 1.7 : 1.92"
:slides-offset-before="actList.length === 2 ? 200 : -70"
-->
<Swiper
v-if="showList"
:slides-per-view="actList.length === 2 ? 1.7 : 1.92"
:width="675"
:slides-per-view="1"
:loop-additional-slides="1"
:slides-offset-before="203"
:centered-slides="true"
:space-between="32"
:loop="actList.length > 3"
:initial-slide="actList.length > 3 ? 1 : 0"
:slides-offset-before="actList.length === 2 ? null : -70"
:loop="actList.length > 1"
:initial-slide="actList.length > 2 ? 1 : 0"
:modules="modules"
:autoplay="actList.length > 3 ? { delay: 3000, disableOnInteraction: false } : false"
:autoplay="actList.length > 1 ? { delay: 50000, disableOnInteraction: false } : false"
:pagination="{ el: '.list-paginationh' }"
:class="{ 'is-center': actList.length === 1 }"
class="swiper-big animate__animated animate__fadeInUp"
@ -50,7 +54,7 @@ import ActivityItem from './ActivityItem.vue'
import TypeBtnList from '@/components/TypeBtnList/TypeBtnList.vue'
import { getMallActivity, getShopActivity } from '@/http/api/activity'
import { ref, nextTick } from 'vue'
import { ref } from 'vue'
import 'swiper/css'
import 'swiper/css/pagination'
import { Autoplay, Pagination } from 'swiper' //
@ -134,16 +138,15 @@ getData('mall')
height: 1200px;
margin-top: 80px;
margin-left: 0;
.swiper-wrapper {
.swiper-slide {
width: 547px !important;
height: 972px;
transition: all 0.3s linear;
transform-origin: center top;
&.swiper-slide-active {
width: 675px !important;
height: 1200px;
}
:deep(.swiper-slide) {
width: 547px; //!important;
height: 972px;
transition: all 0.3s linear;
transform-origin: center top;
&.swiper-slide-active {
width: 675px; // !important;
height: 1200px;
}
}
}

Write Preview
Loading…
Cancel
Save