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
78f0cb46ec
commit
f52e6ae5b4
17 changed files with 790 additions and 159 deletions
Split View Show Diff Stats
  1. 1 1
      .env.dev
  2. 1 1
      .env.prod
  3. 1 1
      .env.test
  4. 271 0
      public/chart.html
  5. 14 4
      src/App.vue
  6. BIN
      src/assets/images/img4dev/1.jpg
  7. BIN
      src/assets/images/img4dev/2.jpg
  8. BIN
      src/assets/images/img4dev/3.jpg
  9. BIN
      src/assets/images/img4dev/4.jpg
  10. BIN
      src/assets/images/img4dev/5.jpg
  11. 1 1
      src/router/index.js
  12. 2 1
      src/views/General.vue
  13. 193 41
      src/views/History.vue
  14. 1 3
      src/views/Metaverse.vue
  15. 8 60
      src/views/Test.vue
  16. 297 45
      src/views/Treasure.vue
  17. 0 1
      src/views/TreasureDetail.vue

+ 1 - 1
.env.dev
View File 

@@ -1,3 +1,3 @@
 
-CLI_MODE=dev

+VUE_APP_CLI_MODE=dev

 NODE_ENV=development

 PUBLIC_PATH=/

+ 1 - 1
.env.prod
View File 

@@ -1,3 +1,3 @@
 
-CLI_MODE=prod

+VUE_APP_CLI_MODE=prod

 NODE_ENV=production

 PUBLIC_PATH=/

+ 1 - 1
.env.test
View File 

@@ -1,3 +1,3 @@
 
-CLI_MODE=test

+VUE_APP_CLI_MODE=test

 NODE_ENV=production

 PUBLIC_PATH=/

+ 271 - 0
public/chart.html
View File 

@@ -0,0 +1,271 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" style="height: 100%">
 
+<head>
 
+  <meta charset="utf-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>chart</title>
 
+</head>
 
+
 
+<style>
 
+  *{
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+  }
 
+</style>
 
+
 
+<body style="height: 100%; margin: 0">
 
+  <div id="container" style="height: 100%"></div>
 
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
+  <script type="text/javascript" src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
 
+  <script type="text/javascript">
 
+    const testData = [
 
+      {
 
+        name: '开埠通商',
 
+        desc: '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
 
+        corps: [
 
+          {
 
+            name: '李鸿章',
 
+            brand: '创办江南制造局、上海机器织布局。',
 
+            desc: '',
 
+            story: '江南制造总局：中国民族工业从此起步；上海机器织布局：开创中国近代纺织业之先河。',
 
+            importance: 30,
 
+            id: '1'
 
+          },
 
+          {
 
+            name: '徐寿',
 
+            brand: '上海江南制造总局',
 
+            desc: '清代著名科学家，上海江南制造总局襄办。',
 
+            story: '',
 
+            importance: 40,
 
+            id: '2'
 
+          },
 
+          {
 
+            name: '刘永康',
 
+            brand: '正泰橡皮物品制造厂',
 
+            desc: '创办正泰橡皮物品制造厂，首创“回力”商标。',
 
+            story: '',
 
+            importance: 50,
 
+            id: '3'
 
+          },
 
+        ]
 
+      },
 
+      {
 
+        name: '曲折发展',
 
+        desc: '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
 
+        corps: [
 
+          {
 
+            name: '黄佐卿',
 
+            brand: '裕晋纱厂',
 
+            desc: '1895年投资的裕晋纱厂在上海杨树浦路落成并开工投产',
 
+            story: '',
 
+            importance: 30,
 
+            id: '1'
 
+          },
 
+          {
 
+            name: '孙多森、孙多鑫',
 
+            brand: '阜丰面粉厂',
 
+            desc: '1900年集资创办上海第一家民族机器面粉厂“阜丰面粉厂”',
 
+            story: '孙氏通、孚、丰集团：官办企业转化为民族资本企业的典型。',
 
+            importance: 30,
 
+            id: '2'
 
+          },
 
+          {
 
+            name: '严裕棠',
 
+            brand: '大隆机器厂',
 
+            desc: '1902年开办的大隆机器厂',
 
+            story: '',
 
+            importance: 30,
 
+            id: '3'
 
+          },
 
+          {
 
+            name: '张士德、刘致祥',
 
+            brand: '中国精益眼镜公司',
 
+            desc: '1911年集资开设中国精益眼镜公司',
 
+            story: '',
 
+            importance: 30,
 
+            id: '4'
 
+          },
 
+          {
 
+            name: '荣宗敬、荣德生',
 
+            brand: '第一家面粉厂、申新纺织公司',
 
+            desc: '第一家面粉厂，1915年，荣氏兄弟又创建申新纺织公司，人称“棉纱大王”。1919年至1921年，又发起和参与了上海华商面粉交易所、纱布交易所，成为上海民族工业的重要台柱之一。',
 
+            story: '荣氏企业：上海民族工业的重要台柱之一。',
 
+            importance: 30,
 
+            id: '5'
 
+          },
 
+        ]
 
+      },
 
+    ]
 
+
 
+    function randomColor() {
 
+      return '#' + Math.floor(
 
+          (
 
+            Math.random() * (1 - 0.3) + 0.3
 
+          ) * 0xffffff
 
+        ).toString(16)
 
+    }
 
+    
+    const dataForRender = {}
 
+
 
+    let myChart = null
 
+    
+    var dom = document.getElementById('container');
 
+    myChart = echarts.init(dom, null, {
 
+      renderer: 'canvas',
 
+      useDirtyRect: false
 
+    });
 
+    
+    function showChart(timeIdx) {
 
+      myChart.clear()
 
+      
+      dataForRender.nodes = [
 
+        {
 
+          name: testData[timeIdx].name,
 
+          id: '0',
 
+          symbolSize: 100,
 
+          itemStyle: {
 
+            color: randomColor()
 
+          },
 
+        },
 
+      ]
 
+      dataForRender.edges = []
 
+
 
+      for (const iterator of testData[timeIdx].corps) {
 
+        const newNode = {
 
+          name: iterator.brand,
 
+          id: iterator.id,
 
+          symbolSize: iterator.importance,
 
+          itemStyle: {
 
+            color: randomColor()
 
+          }
 
+        }
 
+        dataForRender.nodes.push(newNode)
 
+      }
 
+      // 除了代表时代的那个节点，其他节点的尺寸归一化到[10, 70]
 
+      let vMax = Number.NEGATIVE_INFINITY
 
+      let vMin = Number.POSITIVE_INFINITY
 
+      const vMaxNew = 50
 
+      const vMinNew = 30
 
+      for (let index = 1; index < dataForRender.nodes.length; index++) {
 
+        const size = dataForRender.nodes[index].symbolSize
 
+        if (size > vMax) {
 
+          vMax = size
 
+        }
 
+        if (size < vMin) {
 
+          vMin = size
 
+        }
 
+      }
 
+      let scale = null
 
+      if (vMax === vMin) {
 
+        scale = 1
 
+        for (const iterator of dataForRender.nodes.slice(1)) {
 
+          iterator.symbolSize = vMinNew + (vMaxNew - vMinNew) / 2
 
+        }
 
+      } else {
 
+        scale = (vMaxNew - vMinNew) / (vMax - vMin)
 
+        for (const iterator of dataForRender.nodes.slice(1)) {
 
+          iterator.symbolSize = vMinNew + (iterator.symbolSize - vMin) * scale
 
+        }
 
+      }
 
+      // console.log(dataForRender.nodes);
 
+      for (let i = 0; i < dataForRender.nodes.length; i++) {
 
+        for (let j = i + 1; j < dataForRender.nodes.length; j++) {
 
+          const hasCenterNode = (i === 0 || j === 0)
 
+          const newEdge = {
 
+            source: dataForRender.nodes[i].id,
 
+            target: dataForRender.nodes[j].id,
 
+            value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * (hasCenterNode ? 10 : 1), // 值越大，连接的两个节点间斥力越小。
 
+          }
 
+          dataForRender.edges.push(newEdge)
 
+        }
 
+      }
 
+      // console.log(dataForRender);
 
+      
+      myChart.setOption({
 
+        animationDurationUpdate: 1500,
 
+        animationEasingUpdate: 'quinticInOut',
 
+        series: [
 
+          {
 
+            type: 'graph',
 
+            layout: 'force',
 
+            draggable: false,
 
+            // 力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力
 
+            force: {
 
+              initLayout: 'circular', // 进行力引导布局前的初始化布局，初始化布局会影响到力引导的效果。默认不进行任何布局，使用节点中提供的 x， y 作为节点的位置。如果不存在的话会随机生成一个位置。也可以选择使用环形布局 'circular'。
 
+              repulsion: 100, // 节点之间的斥力因子。傻逼文档把edgeLength当数组用的用法写到这上边了。
 
+              gravity: 0.1, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
 
+              edgeLength: [50, 400], // 把各个边的两个节点之间的距离归一化到这个范围内。与repulsion共同作用。
 
+              layoutAnimation: true,
 
+              friction: 0.1, // 这个参数能减缓节点的移动速度。取值范围 0 到 1。但是仍然是个试验性的参数，参见 #11024。
 
+            },
 
+            data: dataForRender.nodes,
 
+            // 或者叫edges
 
+            links: dataForRender.edges,
 
+            selectedMode: 'single',
 
+            select: {
 
+              itemStyle: {
 
+                shadowBlur: 50,
 
+                shadowColor: 'rgba(255, 255, 125, 0.7)',
 
+              },
 
+              label: {
 
+                position: 'right',
 
+                show: true,
 
+              }
 
+            },
 
+            // 高亮状态的图形样式
 
+            emphasis: {
 
+              scale: false,
 
+              label: {
 
+                position: 'right',
 
+                show: true
 
+              }
 
+            },
 
+            // 图表是否可以移动、缩放
 
+            roam: true,
 
+            lineStyle: {
 
+              width: 0.5,
 
+              curveness: 0.3,
 
+              opacity: 0.7,
 
+            }
 
+          }
 
+        ]
 
+      }, true)
 
+
 
+      setTimeout(() => {
 
+        // 等myChart上注册了select回调后再执行
 
+        // 一开始自动选中0号节点，也就是表示时代的那个
 
+        myChart.dispatchAction({
 
+          type: 'select',
 
+          seriesIndex: 0,
 
+          name: testData[timeIdx].name,
 
+        })
 
+      }, 0);
 
+    }
 
+
 
+    showChart(0)
 
+
 
+    // 用户选中节点后，向父窗口post message
 
+    function onSelect(params) {
 
+      if (params.dataType === 'node') { // 用户选中节点触发的
 
+        window.parent.postMessage(`node-selected: ${dataForRender.nodes[params.dataIndexInside].id}`, '*')
 
+      } else if (params.type === 'select') { // 程序里调用dispatchAction触发的，且type为select
 
+        console.log('iframe message: emitting...');
 
+        window.parent.postMessage(`node-selected: 0`, '*')
 
+      }
 
+    }
 
+    myChart.on('select', onSelect)
 
+
 
+    window.addEventListener('resize', myChart.resize);
 
+
 
+    // 切换时代
 
+    window.changeTime = function (idx) {
 
+      if (Number.isInteger(idx) && idx >= 0) {
 
+        showChart(idx)
 
+      } else {
 
+        console.error('[page using echart] changeTime: invalid param!', idx);
 
+      }
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 14 - 4
src/App.vue
View File 

@@ -112,13 +112,18 @@ export default {
 
     HomeFadeIn,
 
   },
 
   setup () {
 
-    const isShowFadeInMask = ref(true)
 
+    console.log('setup!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
 
+    const isShowFadeInMask = ref(process.env.VUE_APP_CLI_MODE === 'dev' ? false : true)
 
     const progress = ref(0)
 
     onMounted(() => {
 
-    // this.$mitt.on('test', e => {
 
-    //   console.log('test', e)
 
-    // })
 
+      console.log('onMounted!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
 
+      // this.$mitt.on('test', e => {
 
+      //   console.log('test', e)
 
+      // })
 
 
+      /**
 
+     * 加载unity
 
+     */
 
       window.addEventListener("load", function () {
 
         if ("serviceWorker" in navigator) {
 
           navigator.serviceWorker.register("ServiceWorker.js")
 
@@ -181,8 +186,12 @@ export default {
 
         }
 
       }
 
       document.body.appendChild(script)
 
+      /**
 
+       * end of unity
 
+       */
 
     })
 
 
+
 
     const isShowNavBar = ref(true)
 
     const activeNavItemIdx = ref(0)
 
 
@@ -292,6 +301,7 @@ html, body {
 
     justify-content: center;
 
     align-items: center;
 
     transition: all 0.5s;
 
+    backdrop-filter: blur(5px);
 
     >button.tab-item {
 
       font-size: 30px;
 
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;

BIN
src/assets/images/img4dev/1.jpg
View File


BIN
src/assets/images/img4dev/2.jpg
View File


BIN
src/assets/images/img4dev/3.jpg
View File


BIN
src/assets/images/img4dev/4.jpg
View File


BIN
src/assets/images/img4dev/5.jpg
View File


+ 1 - 1
src/router/index.js
View File 

@@ -9,7 +9,7 @@ import TestView from '../views/Test.vue'
 
 // import store from '@/store/index.js'
 
 
 const routes = [
 
-  { path: '/', redirect: '/general' },
 
+  { path: '/', redirect: '/general' }, // todo: 这个会导致/history也匹配到？！
 
   {
 
     path: '/general',
 
     name: 'GeneralView',

+ 2 - 1
src/views/General.vue
View File 

@@ -8,7 +8,7 @@
 
     >

       {{ activeCorpInfo.name }}

     </h1>

-    <form @submit="onSearch">

+    <form @submit.prevent="onSearch">

       <input

         v-model="filterKeyword"

         type="text"

@@ -263,6 +263,7 @@ export default {
 
     left: 81px;

     max-height: 520px;

     overflow: auto;

+    user-select: none;

     >li {

       display: block;

       color: #fff;

+ 193 - 41
src/views/History.vue
View File 

@@ -1,7 +1,13 @@
 
 <template>

   <div class="history">

+    <iframe

+      id="iframe-echart"

+      src="/chart.html"

+      frameborder="0"

+    />

+

     <h1>

-      {{ timeList[activeTimeId] }}

+      {{ timeList[activeTimeIdx].name }}

     </h1>

     <menu>

       <img

@@ -20,19 +26,19 @@
 
         <li

           v-for="(time, idx) in timeList"

           :key="idx"

-          :class="{active: activeTimeId === idx}"

-          @click="activeTimeId = idx"

+          :class="{active: activeTimeIdx === idx}"

+          @click="onClickTimeItem(idx)"

         >

           <div

             class="point"

           />

-          {{ time }}

+          {{ time.name }}

         </li>

       </ul>

     </menu>

 

     <article>

-      <h2>{{ timeList[activeTimeId] }}</h2>

+      <h2>{{ articleTitle }}</h2>

       <img

         class="splitter"

         src="@/assets/images/splitter-history-top.png"

@@ -42,32 +48,15 @@
 
       <div class="txt-wrapper">

         <div

           class="txt"

-        >

-          skjflksklflk;sdj喀什酱豆腐感受到了看过深刻的JFK流口水

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-          史蒂夫罗杰斯大量进口

-        </div>

+          v-html="articleDesc"

+        />

         <button

-          v-show="activeTimeId !== 0"

+          v-show="activeTimeIdx !== 0"

           class="left"

           @click="onClickLeftArrow"

         />

         <button

-          v-show="activeTimeId !== timeList.length - 1"

+          v-show="activeTimeIdx !== timeList.length - 1"

           class="right"

           @click="onClickRightArrow"

         />

@@ -86,38 +75,194 @@
 
 import {

   ref,

   reactive,

+  onMounted,

+  onBeforeUnmount,

+  computed,

 } from 'vue'

 

 export default {

   name: 'HistoryView',

   setup () {

+    const myIframe = ref(null)

+

     const timeList = reactive([

-      '开埠通商',

-      '曲折发展',

-      '步履维艰',

-      '筚路蓝缕',

-      '改革开放',

-      '战略负重',

-      '创新驱动',

-      '追梦未来',

+      {

+        name: '开埠通商',

+        desc: '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',

+        corps: [

+          {

+            name: '李鸿章',

+            brand: '创办江南制造局、上海机器织布局。',

+            desc: '',

+            story: '江南制造总局：中国民族工业从此起步；上海机器织布局：开创中国近代纺织业之先河。',

+            importance: 30,

+            id: '1'

+          },

+          {

+            name: '徐寿',

+            brand: '上海江南制造总局',

+            desc: '清代著名科学家，上海江南制造总局襄办。',

+            story: '',

+            importance: 40,

+            id: '2'

+          },

+          {

+            name: '刘永康',

+            brand: '正泰橡皮物品制造厂',

+            desc: '创办正泰橡皮物品制造厂，首创“回力”商标。',

+            story: '',

+            importance: 50,

+            id: '3'

+          },

+        ]

+      },

+      {

+        name: '曲折发展',

+        desc: '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',

+        corps: [

+          {

+            name: '黄佐卿',

+            brand: '裕晋纱厂',

+            desc: '1895年投资的裕晋纱厂在上海杨树浦路落成并开工投产',

+            story: '',

+            importance: 30,

+            id: '1'

+          },

+          {

+            name: '孙多森、孙多鑫',

+            brand: '阜丰面粉厂',

+            desc: '1900年集资创办上海第一家民族机器面粉厂“阜丰面粉厂”',

+            story: '孙氏通、孚、丰集团：官办企业转化为民族资本企业的典型。',

+            importance: 30,

+            id: '2'

+          },

+          {

+            name: '严裕棠',

+            brand: '大隆机器厂',

+            desc: '1902年开办的大隆机器厂',

+            story: '',

+            importance: 30,

+            id: '3'

+          },

+          {

+            name: '张士德、刘致祥',

+            brand: '中国精益眼镜公司',

+            desc: '1911年集资开设中国精益眼镜公司',

+            story: '',

+            importance: 30,

+            id: '4'

+          },

+          {

+            name: '荣宗敬、荣德生',

+            brand: '第一家面粉厂、申新纺织公司',

+            desc: '第一家面粉厂，1915年，荣氏兄弟又创建申新纺织公司，人称“棉纱大王”。1919年至1921年，又发起和参与了上海华商面粉交易所、纱布交易所，成为上海民族工业的重要台柱之一。',

+            story: '荣氏企业：上海民族工业的重要台柱之一。',

+            importance: 30,

+            id: '5'

+          },

+        ]

+      },

+      {

+        name: '步履维艰',

+        desc: '',

+        corps: [

+        ]

+      },

+      {

+        name: '筚路蓝缕',

+        desc: '',

+        corps: [

+        ]

+      },

+      {

+        name: '改革开放',

+        desc: '',

+        corps: [

+        ]

+      },

+      {

+        name: '战略负重',

+        desc: '',

+        corps: [

+        ]

+      },

+      {

+        name: '创新驱动',

+        desc: '',

+        corps: [

+        ]

+      },

+      {

+        name: '追梦未来',

+        desc: '',

+        corps: [

+        ]

+      },

     ])

-    const activeTimeId = ref(0)

+    const activeTimeIdx = ref(0)

     function onClickLeftArrow() {

-      if (activeTimeId.value > 0) {

-        activeTimeId.value--

+      if (activeTimeIdx.value > 0) {

+        activeTimeIdx.value--

       }

     }

     function onClickRightArrow() {

-      if (activeTimeId.value < timeList.length - 1) {

-        activeTimeId.value++

+      if (activeTimeIdx.value < timeList.length - 1) {

+        activeTimeIdx.value++

       }

     }

+    const activeCorpId = ref('')

+    const articleTitle = computed(() => {

+      if (activeCorpId.value === '') {

+        return ''

+      } else if (activeCorpId.value === '0') {

+        return timeList[activeTimeIdx.value].name

+      } else {

+        const targetCorp = timeList[activeTimeIdx.value].corps.find((item) => {

+          return item.id === activeCorpId.value

+        })

+        return targetCorp?.brand

+      }

+    })

+    const articleDesc = computed(() => {

+      if (activeCorpId.value === '') {

+        return ''

+      } else if (activeCorpId.value === '0') {

+        return timeList[activeTimeIdx.value].desc

+      } else {

+        const targetCorp = timeList[activeTimeIdx.value].corps.find((item) => {

+          return item.id === activeCorpId.value

+        })

+        return targetCorp?.desc || targetCorp?.story

+      }

+    })

+    function onClickTimeItem(idx) {

+      activeTimeIdx.value = idx

+      activeCorpId.value = ''

+      document.getElementById('iframe-echart').contentWindow.changeTime(idx)

+    }

+

+    function onIframeMessage(e) {

+      console.log('iframe message: ', e.data)

+      if (e.data.startsWith && e.data.startsWith('node-selected: ')) {

+        activeCorpId.value = e.data.split('node-selected: ')[1]

+      }

+    }

+    onMounted(() => {

+      window.addEventListener('message', onIframeMessage)

+    })

+    onBeforeUnmount(() => {

+      window.removeEventListener('message', onIframeMessage)

+    })

 

     return {

+      timeList,

+      activeTimeIdx,

       onClickLeftArrow,

       onClickRightArrow,

-      timeList,

-      activeTimeId,

+      activeCorpId,

+      articleTitle,

+      articleDesc,

+      onClickTimeItem,

     }

   }

 }

@@ -125,6 +270,13 @@ export default {
 
 

 <style lang="less" scoped>

 .history {

+  >iframe {

+    position: absolute;

+    left: 0;

+    top: 0;

+    width: 100%;

+    height: 100%;

+  }

   >h1 {

     position: absolute;

     top: 51px;

+ 1 - 3
src/views/Metaverse.vue
View File 

@@ -1,7 +1,5 @@
 
 <template>

-  <div class="history">

-    sfsd

-  </div>

+  <div class="history" />

 </template>

 

 <script>

+ 8 - 60
src/views/Test.vue
View File 

@@ -1,18 +1,6 @@
 
 <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 class="shabi">

+    <input type="text">

   </div>

 </template>

 

@@ -26,58 +14,18 @@ import {
 
 

 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

-    }

-  })

-})

+onMounted(() => {})

 </script>

 

 <style lang="less" scoped>

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

-

-.grid {

-  background: #DDD;

-  height: 100%;

-  background: red;

+.shabi {

+  input {

+    color: #fff;

+  }

 }

-

-/* 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>

+ 297 - 45
src/views/Treasure.vue
View File 

@@ -11,41 +11,276 @@
 
       @mousedown="onMouseDown"

       @mouseup="onMouseUp"

     >

-      <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

+        class="cover grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <img

+          class="photo"

+          src="@/assets/images/img4dev/1.jpg"

+          alt=""

+          draggable="false"

+        >

+        <h3>标题标题标题标题标题标题</h3>

+      </div>

+      <div

+        class="cover grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <img

+          class="photo"

+          src="@/assets/images/img4dev/2.jpg"

+          alt=""

+          draggable="false"

+        >

+        <h3>标题标题标题标题标题标题</h3>

+      </div>

+      <div

+        class="cover grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <img

+          class="photo"

+          src="@/assets/images/img4dev/3.jpg"

+          alt=""

+          draggable="false"

+        >

+        <h3>标题标题标题标题标题标题</h3>

+      </div>

+      <div

+        class="cover grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <img

+          class="photo"

+          src="@/assets/images/img4dev/4.jpg"

+          alt=""

+          draggable="false"

+        >

+        <h3>标题标题标题标题标题标题</h3>

+      </div>

+      <div

+        class="cover grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <img

+          class="photo"

+          src="@/assets/images/img4dev/5.jpg"

+          alt=""

+          draggable="false"

+        >

+        <h3>标题标题标题标题标题标题</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题1</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题2</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题3</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题4</h3>

+      </div>

+      <div

+        class="grid-item grid-item--width2 grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题5</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题6</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题7</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题8</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题9</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题10</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题11</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题12</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题13</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题14</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题15</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题16</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题17</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题18</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题19</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题20</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题21</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题22</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题23</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题24</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题25</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题26</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题27</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题28</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题29</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题30</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题31</h3>

+      </div>

+      <div

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

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题32</h3>

+      </div>

+      <div

+        class="grid-item grid-item--height2"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题33</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题34</h3>

+      </div>

+      <div

+        class="grid-item"

+        @click="!isDragged && $router.push({name: 'TreasureDetail'})"

+      >

+        <h3>标题标题标题35</h3>

+      </div>

     </div>

   </div>

 </template>

@@ -91,7 +326,8 @@ onMounted(() => {
 
       layoutMode: 'packery',

       itemSelector: '.grid-item',

       packery: {

-        horizontal: true

+        horizontal: true,

+        gutter: 18,

       }

     })

   }, 300)

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

   }

   >.grid {

-    background: #DDD;

     height: 100%;

-    background: red;

     &::after {

       content: '';

       display: block;

       clear: both;

     }

+

     >.grid-item {

       float: left;

-      width: 100px;

-      height: 100px;

-      background: #0D8;

-      border: 2px solid #333;

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

+      width: 200px;

+      height: 200px;

+      background: blue;

+      position: relative;

+      > img {

+        width: 100%;

+        height: 100%;

+        object-fit: cover;

+      }

+      >h3 {

+        position: absolute;

+        left: 0;

+        bottom: 5px;

+        width: 100%;

+        padding: 7px 25px;

+        background: linear-gradient(90deg, rgba(176,161,121,0.7) 0%, rgba(0,0,0,0) 100%);

+        font-size: 20px;

+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;

+        font-weight: 400;

+        color: #FFFFFF;

+        line-height: 23px;

+      }

     }

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

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

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

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

   }

 }

 </style>

+ 0 - 1
src/views/TreasureDetail.vue
View File 

@@ -41,6 +41,5 @@ export default {
 
   width: 100%;

   height: 100%;

   overflow: auto;

-  background: blue;

 }

 </style>