新增横向滚动效果

src/views/dashboard/components/Team/index.vue

@@ -3,114 +3,109 @@
   <div class="component-container">
     <el-card class="team-card">
       <template #header>
-        <span class="fw-b">有来开源组织 & 技术团队 </span>
+        <span class="fw-b">有来开源组织 & 技术团队</span>
       </template>
       <el-tabs v-model="teamActiveName">
         <el-tab-pane label="开发者「无回」" name="developer">
-          <div class="developer">
+          <div class="developer" ref="dev_wapper">
             <ul class="developer__container">
-              <li class="developer__item" v-for="(item,index) in developers">
+              <li class="developer__item" v-for="(item, index) in developers" :key="index">
                 <div class="developer__inner">
                   <el-image
-                      class="developer__img"
+                    class="developer__img"
-                      :src="item.imgUrl"
+                    :src="item.imgUrl"
-                      :preview-src-list="[item.imgUrl]">
+                    :preview-src-list="[item.imgUrl]"
-                  </el-image>
+                  ></el-image>
                   <div class="developer__info">
                     <span class="developer__nickname">{{ item.nickname }}</span>
                     <div class="developer__position">
-                      <el-tag v-for="(position,i) in item.positions"
+                      <el-tag
-                              :type="colors[i%colors.length]"
+                        v-for="(position, i) in item.positions"
-                              :class="i!==0?'f-ml':''"
+                        :type="colors[i % colors.length]"
-                              size="small">
+                        :class="i !== 0 ? 'f-ml' : ''"
-                        {{ position }}
+                        size="small"
-                      </el-tag>
+                      >{{ position }}</el-tag>
                     </div>
                     <div class="developer__homepage">
-                      <a :href="item.homepage" target="_blank">
+                      <a :href="item.homepage" target="_blank">个人主页</a>
-                        个人主页
-                      </a>
                     </div>
                   </div>
                 </div>
               </li>
             </ul>
-            <el-image class="developer__indicator" :src="indicatorImgUrl"/>
+            <el-image class="developer__indicator" :src="indicatorImgUrl" />
           </div>
         </el-tab-pane>
 
         <el-tab-pane label="交流群「有来」" name="2">
           <div class="group">
             <el-image
-                class="group-img"
+              class="group-img"
-                src="https://cdn.youlai.tech/youlaiqun.png"
+              src="https://cdn.youlai.tech/youlaiqun.png"
-                :preview-src-list="['https://cdn.youlai.tech/youlaiqun.png']"
+              :preview-src-list="['https://cdn.youlai.tech/youlaiqun.png']"
             />
-            <div class="group-tip">
+            <div class="group-tip">群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。</div>
-              群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
-            </div>
           </div>
         </el-tab-pane>
 
         <el-tab-pane label="加入我们" name="3">
           <div class="join">
             <p>1. 人品良好、善于思考、执行力强；</p>
-            <p>2. 熟悉项目，且至少给项目提交(过)一个PR； </p>
+            <p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
             <p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
             <p>4. 过分优秀者我们会主动联系您...</p>
-            <div class="join__desc">
+            <div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
-              申请加入方式: 添加开发者微信申请即可。
-            </div>
           </div>
         </el-tab-pane>
-
       </el-tabs>
     </el-card>
-
   </div>
 </template>
 
 <script setup lang="ts">
-import {nextTick, onMounted, reactive, toRefs, watchEffect} from "vue";
+import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from "vue";
 import BScroll from "better-scroll";
 
 const state = reactive({
-  teamActiveName: 'developer',
+  teamActiveName: "developer",
   developers: [
     {
-      imgUrl: 'https://cdn.youlai.tech/rui.jpg',
+      imgUrl: "https://cdn.youlai.tech/rui.jpg",
-      nickname: '郝先瑞',
+      nickname: "郝先瑞",
-      positions: ['Vue3','Java',  '文档'],
+      positions: ["Vue3", "Java", "文档"],
-      homepage: 'https://www.cnblogs.com/haoxianrui/'
+      homepage: "https://www.cnblogs.com/haoxianrui/",
     },
     {
-      imgUrl: 'https://cdn.youlai.tech/chuan.jpg',
+      imgUrl: "https://cdn.youlai.tech/chuan.jpg",
-      nickname: '张川',
+      nickname: "张川",
-      positions: ['Vue3','Java' ],
+      positions: ["Vue3", "Java"],
-      homepage: 'https://blog.csdn.net/qq_41595149'
+      homepage: "https://blog.csdn.net/qq_41595149",
+    },
+    {
+      imgUrl: "https://cdn.youlai.tech/lin.jpg",
+      nickname: "张加林",
+      positions: ["DevOps"],
+      homepage: "https://gitee.com/ximy",
     },
-     {
-      imgUrl: 'https://cdn.youlai.tech/lin.jpg',
-      nickname: '张加林',
-      positions: ['DevOps'],
-      homepage: 'https://gitee.com/ximy'
-    }
   ],
-  colors: ['', 'success', 'warning', 'danger'],
+  colors: ["", "success", "warning", "danger"],
-  indicatorImgUrl: new URL(`../../../../assets/index/indicator.png`, import.meta.url).href
+  indicatorImgUrl: new URL(
-})
+    `../../../../assets/index/indicator.png`,
+    import.meta.url
+  ).href,
+});
 
-const {teamActiveName, developers, colors, indicatorImgUrl} = toRefs(state)
+const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
 
-/*let bScroll = reactive({})
+let bScroll = reactive({})
+
+const dev_wapper = ref<HTMLElement | any>(null)
 
 onMounted(() => {
-  bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
+    bScroll = new BScroll(dev_wapper.value, {
-    startX: 0,
+    mouseWheel: true,//开启鼠标滚轮
-    click: true,
+    disableMouse: false,//启用鼠标拖动
-    scrollX: true,
+    scrollX: true,  //X轴滚动启用 
-    scrollY: false,
-    eventPassthrough: "vertical" // 横向滚动，保留纵向原生滚动
   })
 })
 
@@ -118,8 +113,27 @@ watchEffect(() => {
   nextTick(() => {
     bScroll && (bScroll as any).refresh()
   })
-})*/
+})
 
+
+
+// let bScroll = reactive({})
+
+// onMounted(() => {
+//   bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
+//     startX: 0,
+//     click: true,
+//     scrollX: true,
+//     scrollY: false,
+//     eventPassthrough: "vertical" // 横向滚动，保留纵向原生滚动
+//   })
+// })
+
+// watchEffect(() => {
+//   nextTick(() => {
+//     bScroll && (bScroll as any).refresh()
+//   })
+// })
 </script>
 
 <style lang="scss" scoped>
@@ -135,9 +149,11 @@ watchEffect(() => {
 
     .developer {
       width: 100%;
+      overflow: hidden;
 
       &__container {
-        display: flex;
+        display: inline-flex;
+        overflow: hidden;
         justify-content: flex-start;
 
         .developer__item {
@@ -153,7 +169,7 @@ watchEffect(() => {
           .developer__inner {
             border: 1px solid #cccccc;
             border-radius: 5px;
-            box-shadow: 6px 6px 6px #AAA;
+            box-shadow: 6px 6px 6px #aaa;
             padding: 8px;
             text-align: center;
 
@@ -176,14 +192,14 @@ watchEffect(() => {
                 a {
                   display: inline-block;
                   padding: 4px 10px;
-                  color: #409EFF;
+                  color: #409eff;
-                  border: 1px solid #409EFF;
+                  border: 1px solid #409eff;
                   border-radius: 5px;
                   background: #ecf5ff;
 
                   &:hover {
-                    background: #409EFF;
+                    background: #409eff;
-                    color: #FFFFFF;
+                    color: #ffffff;
                   }
                 }
               }
@@ -192,7 +208,7 @@ watchEffect(() => {
         }
       }
 
-      &__indicator{
+      &__indicator {
         position: absolute;
         right: 0;
         bottom: 0;
@@ -210,7 +226,7 @@ watchEffect(() => {
 
       &__desc {
         margin-top: 20px;
-        color: #409EFF;
+        color: #409eff;
         font-weight: bold;
       }
     }
@@ -232,8 +248,5 @@ watchEffect(() => {
   .f-ml {
     margin-left: 5px;
   }
-
-
 }
-
 </style>