Home Explore Help
Register Sign In
renyicun
/
ShangHaiInustrialMuseum
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

【国之重器】布局方案更新

任一存 2 years ago
parent
682e2782f1
commit
97dbbebd93
8 changed files with 183 additions and 154 deletions
Unified View Show Diff Stats
  1. 3 0
      .eslintrc.js
  2. 5 0
      public/index.html
  3. 12 0
      public/libs/isotope-layout.3.0.6.js
  4. 4 0
      public/libs/jquery.2.2.2.js
  5. 6 0
      public/libs/packery-mode.2.0.1.js
  6. 6 0
      src/router/index.js
  7. 83 0
      src/views/Test.vue
  8. 64 154
      src/views/Treasure.vue

+ 3 - 0
.eslintrc.js
View File 

@@ -8,6 +8,9 @@ module.exports = {
 
     jquery: true,
 
     jquery: true,
 
     node: true,
 
     node: true,
 
   },
 
   },
 
+  exclude: {
 
+
 
+  },
 
   'extends': [
 
   'extends': [
 
     'plugin:vue/vue3-recommended',
 
     'plugin:vue/vue3-recommended',
 
     'eslint:recommended'
 
     'eslint:recommended'

+ 5 - 0
public/index.html
View File 

@@ -9,6 +9,11 @@
 
     <title>我是标题</title>
 
     <title>我是标题</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
+    <script src="./libs/jquery.2.2.2.js"></script>
 
+    <script src="./libs/isotope-layout.3.0.6.js"></script>
 
+    <script src="./libs/packery-mode.2.0.1.js"></script>
 
+
 
+    
     <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
 
     <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> -->
 
     <noscript>
 
     <noscript>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

File diff suppressed because it is too large
+ 12 - 0
public/libs/isotope-layout.3.0.6.js


File diff suppressed because it is too large
+ 4 - 0
public/libs/jquery.2.2.2.js


File diff suppressed because it is too large
+ 6 - 0
public/libs/packery-mode.2.0.1.js


+ 6 - 0
src/router/index.js
View File 

@@ -3,6 +3,7 @@ import GeneralView from '../views/General.vue'
 
 import HistoryView from '../views/History.vue'
 
 import HistoryView from '../views/History.vue'
 
 import TreasureView from '../views/Treasure.vue'
 
 import TreasureView from '../views/Treasure.vue'
 
 import MetaverseView from '../views/Metaverse.vue'
 
 import MetaverseView from '../views/Metaverse.vue'
 
+import TestView from '../views/Test.vue'
 
 
 
 // import store from '@/store/index.js'
 
 // import store from '@/store/index.js'
 
 
 
@@ -31,6 +32,11 @@ const routes = [
 
     name: 'MetaverseView',
 
     name: 'MetaverseView',
 
     component: MetaverseView,
 
     component: MetaverseView,
 
   },
 
   },
 
+  {
 
+    path: '/test',
 
+    name: 'TestView',
 
+    component: TestView,
 
+  },
 
 ]
 
 ]
 
 
 
 const router = createRouter({
 
 const router = createRouter({

+ 83 - 0
src/views/Test.vue
View File 

@@ -0,0 +1,83 @@
 
+<template>

+  <div class="grid">

+    <div class="grid-item grid-item--width2" />

+    <div class="grid-item grid-item--height2" />

+    <div class="grid-item" />

+    <div class="grid-item" />

+    <div class="grid-item grid-item--width2 grid-item--height2" />

+    <div class="grid-item grid-item--width2" />

+    <div class="grid-item grid-item--width2" />

+    <div class="grid-item grid-item--height2" />

+    <div class="grid-item" />

+    <div class="grid-item grid-item--width2" />

+    <div class="grid-item grid-item--height2" />

+    <div class="grid-item" />

+    <div class="grid-item" />

+  </div>

+</template>

+

+<script>

+import {

+  onMounted,

+  reactive,

+  ref,

+  toRefs,

+} from 'vue'

+

+export default {

+  name: 'TestView',

+  // mounted() {

+  //   $('.grid').isotope({

+  //     layoutMode: 'packery',

+  //     itemSelector: '.grid-item',

+  //     packery: {

+  //       horizontal: true

+  //     }

+  //   })

+  // }

+}

+</script>

+

+<script setup>

+onMounted(() => {

+  $('.grid').isotope({

+    layoutMode: 'packery',

+    itemSelector: '.grid-item',

+    packery: {

+      horizontal: true

+    }

+  })

+})

+</script>

+

+<style lang="less" scoped>

+/* ---- grid ---- */

+

+.grid {

+  background: #DDD;

+  height: 100%;

+  background: red;

+}

+

+/* clear fix */

+.grid:after {

+  content: '';

+  display: block;

+  clear: both;

+}

+

+/* ---- .grid-item ---- */

+

+.grid-item {

+  float: left;

+  width: 100px;

+  height: 100px;

+  background: #0D8;

+  border: 2px solid #333;

+  border-color: hsla(0, 0%, 0%, 0.7);

+}

+

+.grid-item--width2 { width: 200px; }

+.grid-item--height2 { height: 200px; }

+

+</style>

+ 64 - 154
src/views/Treasure.vue
View File 

@@ -2,155 +2,50 @@
 
   <div

   <div

     ref="gridWrapperElem"

     ref="gridWrapperElem"

     class="history"

     class="history"

-    @mousemove.prevent

-    @mousemove="onMouseMove"

   >

   >

     <div

     <div

       class="grid"

       class="grid"

       @mousemove.prevent

       @mousemove.prevent

+      @mousemove="onMouseMove"

+      @mouseleave="onMouseLeave"

       @mousedown="onMouseDown"

       @mousedown="onMouseDown"

       @mouseup="onMouseUp"

       @mouseup="onMouseUp"

     >

     >

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      >

-        aaaa

-      </div>

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      >

-        bbbb

-      </div>

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item grid-item--width2"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item grid-item--width2"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item grid-item--width2"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item grid-item--width2"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item grid-item--width2"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item grid-item--width2"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item grid-item--width2"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

-      <div

-        class="grid-item"

-        @mousemove.prevent

-      />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--width2 grid-item--height2" />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item grid-item--width2" />

+      <div class="grid-item grid-item--height2" />

+      <div class="grid-item" />

+      <div class="grid-item" />

     </div>

     </div>

   </div>

   </div>

 </template>

 </template>

@@ -173,25 +68,32 @@ let isMouseDown = false
 
 let isDragged = false

 let isDragged = false

 const gridWrapperElem = ref('null')

 const gridWrapperElem = ref('null')

 function onMouseDown() {

 function onMouseDown() {

-  console.log('mouse down')

   isMouseDown = true

   isMouseDown = true

   isDragged = false

   isDragged = false

 }

 }

 function onMouseUp() {

 function onMouseUp() {

-  console.log('mouse up')

   isMouseDown = false

   isMouseDown = false

 }

 }

 function onMouseMove(e) {

 function onMouseMove(e) {

   if (isMouseDown) {

   if (isMouseDown) {

     console.log(e)

     console.log(e)

-    gridWrapperElem.value.scrollTop -= e.movementX

+    gridWrapperElem.value.scrollLeft -= e.movementX

     isDragged = true

     isDragged = true

   }

   }

 }

 }

+function onMouseLeave(e) {

+  isMouseDown = false

+}

 

 

 onMounted(() => {

 onMounted(() => {

   setTimeout(() => {

   setTimeout(() => {

-    var elem = document.querySelector('.grid')

+    $('.grid').isotope({

+      layoutMode: 'packery',

+      itemSelector: '.grid-item',

+      packery: {

+        horizontal: true

+      }

+    })

   }, 300)

   }, 300)

 })

 })

 </script>

 </script>

@@ -207,16 +109,24 @@ onMounted(() => {
 
     // border-radius: 2px;

     // border-radius: 2px;

   }

   }

   >.grid {

   >.grid {

-    >.grid-item {

-      width: 200px;

-      height: 200px;

-      background: red;

+    background: #DDD;

+    height: 100%;

+    background: red;

+    &::after {

+      content: '';

+      display: block;

+      clear: both;

     }

     }

-    >.grid-item--width2 {

-      width: 400px;

-      height: 200px;

-      background: blue;

+    >.grid-item {

+      float: left;

+      width: 100px;

+      height: 100px;

+      background: #0D8;

+      border: 2px solid #333;

+      border-color: hsla(0, 0%, 0%, 0.7);

     }

     }

+    >.grid-item--width2 { width: 200px; }

+    >.grid-item--height2 { height: 200px; }

   }

   }

 }

 }

 </style>
 
 </style>