更新专家列表

package-lock.json

@@ -14828,6 +14828,11 @@
       "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
+    "vue-waterfall": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/vue-waterfall/-/vue-waterfall-1.0.6.tgz",
+      "integrity": "sha1-ADJKj5f0Sb9vjN67SXS2DP+snu0="
+    },
     "vuedraggable": {
       "version": "2.23.2",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",

package.json

@@ -95,6 +95,7 @@
     "vue-loader": "^15.9.1",
     "vue-router": "^3.1.6",
     "vue-splitpane": "^1.0.4",
+    "vue-waterfall": "^1.0.6",
     "vuedraggable": "^2.23.0",
     "vuex": "3.1.1",
     "xlsx": "^0.15.5"

resources/js/views/meetemergency/ziyuan.vue

@@ -18,33 +18,48 @@
       </el-button>
     </div>
     <div>
-      <el-row>
-        <el-col v-for="(o, index) in tableData" :key="index + 1" :span="5" :offset="index > 0 ? 2 : 0">
-          <el-card :body-style="{ padding: '0px' }">
-            <img :src="o.img" class="image">
+      <waterfall :line-gap="200" :watch="tableData">
+        <!-- each component is wrapped by a waterfall slot -->
+        <waterfall-slot
+          v-for="(item, index) in tableData"
+          :key="index + 'cd'"
+          :width="'100'"
+          :height="'200'"
+          :order="index"
+        >
+          <el-card :body-style="{ padding: '20px' }">
+            <img :src="item.img" class="image">
             <div style="padding: 14px;">
-              <span>{{ o.name }}</span>
+              <span>{{ item.name }}</span>
               <div class="bottom clearfix">
-                <time class="time">{{ o.info }}</time>
-                <el-button type="text" class="button" @click="addDevice(o.id, o.name, o.info, o.img)">查看详情</el-button>
+                <time class="time">{{ item.info }}</time>
+                <el-button type="text" class="button" @click="addDevice(item.id, item.name, item.info, item.img)">查看详情</el-button>
               </div>
             </div>
           </el-card>
-        </el-col>
-      </el-row>
+        </waterfall-slot>
+      </waterfall>
     </div>
   </div>
 </template>
 
 <script>
 import waves from '@/directive/waves'; // 水波纹效果
+// 瀑布流
+import Waterfall from 'vue-waterfall/lib/waterfall';
+import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
+
 export default {
   directives: { waves },
+  components: {
+    Waterfall,
+    WaterfallSlot,
+  },
   data() {
     return {
       currentDate: new Date(),
       tableData: [{
-        name: '李庄家',
+        name: '李专家',
         info: '李庄家毕业于石家庄工程学院有先进的工作计划和工作经验对报警器这方面有一定的了解',
         img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1689867663,2720378664&fm=26&gp=0.jpg',
         id: 1,
@@ -56,7 +71,7 @@ export default {
       }, {
         name: '赵专家',
         info: '赵专家毕业于北京大学有足够的it方面的经验,对物联网,互联网有一定的经验',
-        img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608445510168&di=1a33e116c5169fd5010f866d12f77ada&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn12%2F435%2Fw640h595%2F20180506%2F6105-hacuuvt9423634.jpg',
+        img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608527314530&di=f10ab336902a2b09ee102f6c765afe75&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ff11f3a292df5e0fea1aee17a5f6034a85edf7212.jpg',
         id: 3,
       }, {
         name: '菅专家',
@@ -73,6 +88,31 @@ export default {
         info: '好专家毕业于杭州科技学院有足够的it方面的经验,对物联网,互联网有一定的经验,对报警设备对设备线路有经验',
         img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2409559085,2443372796&fm=26&gp=0.jpg',
         id: 6,
+      }, {
+        name: '刘专家',
+        info: '刘专家毕业于北京电影有先进的工作计划和工作经验对报警器这,对设备对接有足够的经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3295650107,2085001310&fm=26&gp=0.jpg',
+        id: 7,
+      }, {
+        name: '赵专家',
+        info: '赵专家毕业于北京大学有足够的it方面的经验,对物联网,互联网有一定的经验',
+        img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608527314530&di=f10ab336902a2b09ee102f6c765afe75&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ff11f3a292df5e0fea1aee17a5f6034a85edf7212.jpg',
+        id: 8,
+      }, {
+        name: '菅专家',
+        info: '菅专家毕业于杭州科技学院有足够的it方面的经验,对物联网,互联网有一定的经验,对报警设备对设备线路有经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=205530922,171182159&fm=26&gp=0.jpg',
+        id: 9,
+      }, {
+        name: '冯专家',
+        info: '冯专家毕业于杭州科技学院有足够的it方面的经验,对物联网,互联网有一定的经验,对报警设备对设备线路有经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3329910816,3196132831&fm=26&gp=0.jpg',
+        id: 10,
+      }, {
+        name: '好专家',
+        info: '好专家毕业于杭州科技学院有足够的it方面的经验,对物联网,互联网有一定的经验,对报警设备对设备线路有经验',
+        img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2409559085,2443372796&fm=26&gp=0.jpg',
+        id: 11,
       }],
     };
   },