最新版

package.json

@@ -26,7 +26,8 @@
     "scss": "^0.2.4",
     "terser": "^5.31.2",
     "vue": "^3.2.16",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.3",

src/main.js

@@ -17,7 +17,7 @@ import Router from './router';
 // 引入Axios
 import axios from 'axios';
 
-import * as ELIcons from '@element-plus/icons-vue'
+// import * as ELIcons from '@element-plus/icons-vue'
 
 
 // Supermap拖拽组件
@@ -36,9 +36,9 @@ axios.defaults.baseURL = "https://127.0.0.1";
 const app = createApp(App);
 
 
-for (let iconName in ELIcons) {
-  app.component(iconName, ELIcons[iconName])
-}
+// for (let iconName in ELIcons) {
+//   app.component(iconName, ELIcons[iconName])
+// }
 
 app.use(Router);
 app.use(ElementPlus,{

src/views/HomePage/index.vue

@@ -47,24 +47,26 @@
                 <MapBox @godetails="godetailsMap"></MapBox>
             </div>
             <div class="flex-1 auto" style="height: 800px">
-                <div class="flex max-w column ">
+                <vue3-seamless-scroll :list="roleInfo.servesData" class="scroll">
                     <div class="flex mb-2 max-w cursor serveli" v-for="item in roleInfo.servesData" @click="godetailsMapRIght(item)">
-                        <div class="auto wrap" style="height: 150px">
-                            <div v-for="(val,num) in item.srcArr">
-                                <img style="width: 150px;height:150px;" v-if="val && num+1 != item.srcArr.langth" :src="BaseApi + val" /> 
-                            </div>
+                        <div class="auto wrap" style="height: 150px;width:150px;">
+                            <el-carousel width="150px" height="150px" direction="vertical" v-if="item.srcArr">
+                                <el-carousel-item  v-for="(val,num) in item.srcArr" :key="item" >
+                                    <img style="width: 150px;height:150px;" :src="BaseApi + val" /> 
+                                </el-carousel-item>
+                            </el-carousel>
                             <div style="width: 150px;height:150px;" v-if="!item.srcArr || item.srcArr.length < 2">
                                 <img class="max-w max-h" src="/public/images/serverno.png" />
                             </div>
                         </div>
-                        
                         <div class="flex flex-1 max-h column jc-sb label">
                             <p class="fz-18 fw-b ta-l">{{ item.name }}</p>
                             <p class="fz-16">{{ item.type }}</p>
                         </div>
                         <div class="viewDetail">查看详情<el-icon><Right /></el-icon></div>
                     </div>
-                </div>   
+                  </vue3-seamless-scroll>
+ 
             </div>           
         </div>
       </div>
@@ -128,41 +130,21 @@
             </div>
         </div>
       </div>
-
-      <!-- <div class="flex mt-3 common-box map-container column">
-        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
-            <span class="commontitle">帮扶成果</span>
-        </div>
-        <div class="line-common"></div>
-        <div class="flex map-box ai-c jc-c">
-            <div class="mapimg pos-r max-h">
-                <MapBox></MapBox>
-            </div>
-            <div class="flex cgbox column ta-l fz-24 fw-b">
-                <div class="mt-3 mb-3 ta-l">
-                    <span class="spanbf cursor color1" @click="opWindows">智慧化帮扶种植</span>
-                </div>
-                <div class="mt-3 mb-3 ta-l">
-                    <span class="spanbf cursor color2" @click="bfcgClick">订单服务型帮扶模式</span>
-                </div>
-                <div class="mt-3 mb-3 ta-l">
-                    <span class="spanbf color3">东蒙全流程服务型帮扶模式</span>
-                </div>
-            </div>
-        </div>
-      </div> -->
+ 
     </div>
   </template>
   <script>
-  import { defineComponent, reactive, onMounted, toRefs } from "vue";
+  import { defineComponent, reactive, onMounted, toRefs, ref } from "vue";
   import { postMethodCommon, getMethodCommon } from "../../api/common";
   import { BASE_API } from "/public/config/server.js";
   import MapBox from "./widget/map.vue";
   import LinYiDeptJson from "../../../public/config/临沂市行政区.json";
+  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
     name: "Index",
     components: {
-        MapBox
+        MapBox,
+        Vue3SeamlessScroll
     },
     setup(props, context) {
       let data = reactive({
@@ -199,6 +181,7 @@
                 })
             }
         })
+      
         
         methods.getNewsData()
         methods.getGoodsData()
@@ -208,7 +191,9 @@
         methods.getCodeType()
         methods.getAreaCode()
       });
+      
       let methods = {
+
         supplyClick(item,index){
             data.roleInfo.supplyIndex = index
             data.roleInfo.supplySearch = item.value
@@ -416,9 +401,14 @@
             postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                 let rel = res.data.result.items
                 rel.forEach(item =>{
+                    let imgArr
                     if (item.imgsrc) {
                         item.src = BASE_API + item.imgsrc.split(",")[0] || null,
-                        item.srcArr = item.imgsrc.split(',')                         
+                        
+                        imgArr = item.imgsrc.split(',')
+                
+                        item.srcArr = imgArr.slice(0, imgArr.length - 1)        
+                                
                     } 
 
                     if (item.imgsrc1) {
@@ -853,4 +843,5 @@
         writing-mode: vertical-rl;
         letter-spacing: 8px;
     }
+
   </style>