up

vue/src/views/Goods/components/Img.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="Img">
     <div class="txt">
-      <h3>20世纪20年代陈景星历史（左三） 在奉三高中与同学合影</h3>
-      <p>年 代：中华民国（1912~1949）</p>
-      <p>类 别：照片</p>
-      <p>质 地：纸</p>
-      <p>尺 寸：10*14cm</p>
+      <h3>{{ info.name }}</h3>
+      <p v-show="info.age">年代：{{ info.age }}</p>
+      <p v-show="info.sort">类别：{{ info.sort }}</p>
+      <p v-show="info.grain">质地：{{ info.grain }}</p>
+      <p v-show="info.long">
+        长：{{ info.long }}{{ info.type === "Italy" ? "m" : "cm" }}
+      </p>
+      <p v-show="info.width">
+        宽：{{ info.width }}{{ info.type === "Italy" ? "m" : "cm" }}
+      </p>
+      <p v-show="info.tall">
+        高：{{ info.tall }}{{ info.type === "Italy" ? "m" : "cm" }}
+      </p>
+      <p v-if="info.type === 'Italy'">作者：{{ info.author }}</p>
     </div>
     <div class="close" @click="$emit('close')"></div>
     <viewer class="viewerCla" ref="viewer" :images="lookPics">
@@ -37,6 +46,12 @@ export default {
   name: "Img",
   //import引入的组件需要注入到对象中才能使用
   components: {},
+  props: {
+    info: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     //这里存放数据
     return {

vue/src/views/Goods/components/Three.vue

@@ -11,15 +11,43 @@
       >
         <div class="centen">
           <div class="rowTop">
-            <div class="row" @click.stop="look3D(i)" v-for="i in 12" :key="i">
+            <div
+              class="row"
+              @click.stop="look3D(item)"
+              v-for="(item, index) in dataRes1"
+              :key="index"
+            >
               <img v-lazy="require('@/assets/img/Home/demo.png')" alt="" />
-              <div class="name">民国时期谢士炎烈士用过的墨盒1</div>
+              <div
+                class="name"
+                :class="{
+                  smRow:
+                    dataRes1.length > dataRes2.length &&
+                    index === dataRes1.length - 1,
+                }"
+              >
+                {{ item.name }}
+              </div>
             </div>
           </div>
           <div class="rowTop rowFloo">
-            <div class="row" @click.stop="look3D(i)" v-for="i in 12" :key="i">
+            <div
+              class="row"
+              @click.stop="look3D(item)"
+              v-for="(item, index) in dataRes2"
+              :key="index"
+            >
               <img v-lazy="require('@/assets/img/Home/demo.png')" alt="" />
-              <div class="name">民国时期谢士炎烈士用过的墨盒2</div>
+              <div
+                class="name"
+                :class="{
+                  smRow:
+                    dataRes2.length >= dataRes1.length &&
+                    index === dataRes2.length - 1,
+                }"
+              >
+                {{ item.name }}
+              </div>
             </div>
           </div>
         </div>
@@ -47,16 +75,17 @@
       </div>
       <div class="modelBox" v-if="modelBoxShow">
         <iframe
-          src="https://4dscene.4dage.com/culturalrelics/NSRDYT/Model2.html?m=nsr01"
+          src="http://4dscene.4dage.com/culturalrelics/YHTLSJNG/Model2.html?m=yht49"
           frameborder="0"
         ></iframe>
         <div class="txtInfo">
-          <h3>民国时期邓中夏烈士读书时期用的煤油灯</h3>
-          <p>年代：中华民国（1912~1949）</p>
-          <p>类别：其他</p>
-          <p>级别：二级</p>
-          <p>质地：玻璃</p>
-          <p>尺寸：17.5*9.2cm</p>
+          <h3>{{ info.name }}</h3>
+          <p v-show="info.age">年代：{{ info.age }}</p>
+          <p v-show="info.sort">类别：{{ info.sort }}</p>
+          <p v-show="info.grain">质地：{{ info.grain }}</p>
+          <p v-show="info.long">长：{{ info.long }}cm</p>
+          <p v-show="info.width">宽：{{ info.width }}cm</p>
+          <p v-show="info.tall">高：{{ info.tall }}cm</p>
         </div>
         <div
           class="close"
@@ -72,6 +101,12 @@ export default {
   name: "Three",
   //import引入的组件需要注入到对象中才能使用
   components: {},
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     //这里存放数据
     return {
@@ -83,6 +118,9 @@ export default {
       // 点击文物出来
       modelShow: false,
       modelBoxShow: false,
+      dataRes1: [],
+      dataRes2: [],
+      info: {},
     };
   },
   //监听属性 类似于data概念
@@ -160,7 +198,8 @@ export default {
       }
     },
 
-    look3D(id) {
+    look3D(item) {
+      this.info = item;
       this.modelShow = true;
       this.modelBoxShow = true;
     },
@@ -186,8 +225,6 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    let boxDom = document.querySelector(".bacXian");
-    boxDom.style.width = 300 * 12 + "px";
     this.elDom = document.querySelector(".main");
 
     this.Time2 = setTimeout(() => {
@@ -201,6 +238,18 @@ export default {
         else this.elDom.scrollLeft = this.elDom.scrollLeft + 1;
       }, 40);
     }, 5000);
+
+    this.dataRes1 = this.data.filter((v, i) => i % 2 === 0);
+    this.dataRes2 = this.data.filter((v, i) => !(i % 2 === 0));
+    let boxDom = document.querySelector(".bacXian");
+    let dataLength;
+    if (this.dataRes1.length === this.dataRes2.length)
+      dataLength = this.dataRes2.length + 0.6;
+    else if (this.dataRes1.length > this.dataRes2.length)
+      dataLength = this.dataRes1.length;
+    else dataLength = this.dataRes2.length;
+
+    boxDom.style.width = 300 * dataLength + "px";
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -387,6 +436,7 @@ export default {
     .bacXian {
       height: 100%;
       position: relative;
+      overflow: hidden;
       .centen {
         position: absolute;
         top: 50%;
@@ -442,6 +492,9 @@ export default {
               word-wrap: break-word;
               text-align: left;
             }
+            .smRow {
+              width: 60%;
+            }
             &:nth-of-type(2n) {
               top: -100px;
               &::after {
@@ -493,11 +546,6 @@ export default {
                 bottom: 242px;
               }
             }
-            &:last-child {
-              .name {
-                width: 60%;
-              }
-            }
           }
         }
       }

vue/src/views/Goods/components/Tow.vue

@@ -2,13 +2,13 @@
 <template>
   <div class="Tow">
     <div class="main">
-      <div class="row" @click="lookInfo(i)" v-for="i in 20" :key="i">
+      <div class="row" @click="lookInfo(item)" v-for="(item,index) in data" :key="index">
         <div><img v-lazy="require('@/assets/img/Home/demo.png')" alt="" /></div>
-        <p>1924年张应春烈士参加第三次全国运动会获得的银质奖章</p>
+        <p>{{item.name}}</p>
       </div>
     </div>
     <!-- 点击图片出来的页面 -->
-    <Img v-if="type === 'img'" @close="type = ''" />
+    <Img v-if="type === 'img'" @close="type = ''" :info='info'/>
   </div>
 </template>
 
@@ -16,6 +16,12 @@
 import Img from "./Img";
 export default {
   name: "Tow",
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
   //import引入的组件需要注入到对象中才能使用
   components: { Img },
   data() {
@@ -32,7 +38,7 @@ export default {
   //方法集合
   methods: {
     lookInfo(val) {
-      this.ifnfo = val;
+      this.info = val;
       this.type = "img";
     },
   },
@@ -86,7 +92,7 @@ export default {
       cursor: pointer;
       border-radius: 6px;
       overflow: hidden;
-      width: 370px;
+      width: 23%;
       height: 280px;
       margin: 0 40px 40px 0;
       background-color: #dddddd;

vue/src/views/Goods/data.js

@@ -0,0 +1,120 @@
+// type:     straw(手稿)   book(书刊)   tool（用具）  clothing（服装） Italy(油画)--二维才有
+
+/**
+ * name 名字
+ * age 年代
+ * sort 类别
+ * grain 质地
+ * long 长
+ * width 宽
+ * tall 高
+ * author 作者  --二维文物油画才有
+ */
+export const goodsData = {
+  '3D': [
+    // 手稿
+    { type: 'straw', name: '民国时期赵良璋烈士用过的派克51型钢笔', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    { type: 'straw', name: '1947年赵良璋在北平刻的"野雪"印章', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    { type: 'straw', name: '民国时期丁行烈士的水晶图章', age: '', sort: '文件、宣传品', grain: '其他金属', long: '7', width: '1.5', tall: '' },
+    { type: 'straw', name: '民国时期邓振询烈士用的私章及盒子', age: '', sort: '文件、宣传品', grain: '其他动物质', long: '2.3', width: '1.1', tall: '' },
+    { type: 'straw', name: '民国时期文绍珍烈士在国民革命军军官学校第六期学生毕业证章', age: '', sort: '文件、宣传品', grain: '铜', long: '6.4', width: '2.6', tall: '' },
+    { type: 'straw', name: '1943年丁行烈士在狱中刻的图章', age: '', sort: '文件、宣传品', grain: '石', long: '4.5', width: '1.6', tall: '' },
+    { type: 'straw', name: '民国时期成贻宾烈士在国立中央大学的校徽', age: '', sort: '文件、宣传品', grain: '铜', long: '', width: '', tall: '' },
+    { type: 'straw', name: '民国时期谭寿林烈士木刻私章（刻有“祝封贵县”）', age: '', sort: '文件、宣传品', grain: '木', long: '', width: '', tall: '' },
+    { type: 'straw', name: '民国时期周镐烈士用过的红玉石印章', age: '', sort: '文件、宣传品', grain: '宝玉石', long: '4', width: '1.5', tall: '1.5' },
+    { type: 'straw', name: '民国时期谢文锦烈士用过的印章', age: '', sort: '文件、宣传品', grain: '石', long: '3', width: '3', tall: '3.5' },
+    // 书刊
+    { type: 'book', name: '20世纪20年代高文华烈士北伐时期用的瓷杯', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    { type: 'book', name: '民国时期谢文锦烈士用过的金边碗', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    { type: 'book', name: '民国时期杜焕卿烈士用过的漱口杯', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+    { type: 'book', name: '民国时期谢世炎烈士用过的铁皮箱', age: '', sort: '家具', grain: '铁', long: '81.5', width: '47.7', tall: '19.7' },
+    { type: 'book', name: '民国时期谭寿林烈士用过的书箱', age: '', sort: '家具', grain: '木', long: '63.5', width: '30.7', tall: '38.5' },
+    // 用具
+    { type: 'tool', name: '民国时期谭寿林烈士用过的书箱', age: '', sort: '家具', grain: '木', long: '63.5', width: '30.7', tall: '38.5' },
+    { type: 'tool', name: '民国时期朱杏南烈士工作时联络做暗号用的陶瓷花盆和茶几', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    { type: 'tool', name: '民国时期石淳烈士用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '79.5', width: '47.3', tall: '19.5' },
+    { type: 'tool', name: '民国时期焦恭士烈士用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '29.5', width: '17.6', tall: '8.5' },
+    { type: 'tool', name: '民国时期何宝珍用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '65.4', width: '38.5', tall: '19.6' },
+    { type: 'tool', name: '抗战时期周镐烈士用过的皮包', age: '', sort: '皮革', grain: '皮革', long: '28', width: '39', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的黄皮文件包', age: '', sort: '皮革', grain: '皮革', long: '33', width: '26', tall: '' },
+    { type: 'tool', name: '民国时期赵良璋烈士飞行时用的美国光学公司制造的飞行员护目眼镜盒', age: '', sort: '其他', grain: '其他金属', long: '22', width: '8.4', tall: '5.2' },
+    { type: 'tool', name: '民国时期郭纲琳烈士戴过的瑞士方形女表', age: '', sort: '其他', grain: '其他金属', long: '20.8', width: '1.5', tall: '' },
+    { type: 'tool', name: '民国时期吕惠生烈士用过的手电筒', age: '', sort: '其他', grain: '其他金属', long: '18.7', width: '4.1', tall: '' },
+    { type: 'tool', name: '民国时期夏雨初烈士用过的铜锁', age: '', sort: '其他', grain: '铜', long: '7.5', width: '1.5', tall: '3.3' },
+    { type: 'tool', name: '1930年夏雨初烈士就义时戴的眼镜', age: '', sort: '其他', grain: '玻璃,其他无机质', long: '11.8', width: '5.2', tall: '' },
+    { type: 'tool', name: '民国时期夏雨初烈士使用的油灯', age: '', sort: '其他', grain: '铜', long: '14', width: '10.5', tall: '' },
+    { type: 'tool', name: '1947年卢志英烈士在上海工作时使用的怀表', age: '', sort: '其他', grain: '铜，其他金属', long: '', width: '', tall: '' },
+    { type: 'tool', name: '二十世纪三十年代郭纲琳烈士在狱中用铜元磨的鸡心，刻有“永是勇士”', age: '', sort: '其他', grain: '铜', long: '2.5', width: '1.5', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的闹钟', age: '', sort: '其他', grain: '铜，其他金属', long: '', width: '', tall: '' },
+    { type: 'tool', name: '二十世纪三十年代郭纲琳烈士狱中磨制的铜圆', age: '', sort: '钱币', grain: '铜', long: '', width: '', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的剪刀', age: '', sort: '铁器、其他金属器', grain: '铁', long: '23', width: '9.6', tall: '' },
+    { type: 'tool', name: '民国时期谢士炎烈士用过的铜压条', age: '', sort: '铜器', grain: '铜', long: '25', width: '3', tall: '' },
+    { type: 'tool', name: '民国时期胡廷俊烈士自制砚台', age: '', sort: '文具', grain: '石', long: '10.5', width: '9.8', tall: '2.2' },
+    // 服装
+    { type: 'clothing', name: '民国时期杜焕卿烈士使用过的墨盒', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    { type: 'clothing', name: '民国时期谢士炎烈士用过的墨盒', age: '', sort: '文具', grain: '铜', long: '10.8', width: '10.8', tall: '3.8' },
+    { type: 'clothing', name: '民国时期蒋传宗烈士用过的钢笔', age: '', sort: '文具', grain: '其他无机质', long: '13', width: '1.3', tall: '' },
+    { type: 'clothing', name: '1927年夏雨初烈士在郎溪组织农民起义时用的梭镖', age: '', sort: '武器', grain: '铁', long: '30', width: '4.7', tall: '' },
+    { type: 'clothing', name: '吕惠生1943年用过的大刀', age: '', sort: '武器', grain: '其他金属', long: '68.6', width: '6.6', tall: '' },
+    { type: 'clothing', name: '民国时期国民党宪兵司令部的奠基纪念碑', age: '', sort: '玺印符牌', grain: '石', long: '93', width: '51', tall: '10' },
+    { type: 'clothing', name: '1928年冯玉祥送给谢庆云烈士的象牙筷一双', age: '', sort: '牙骨角器', grain: '棉麻纤维', long: '22', width: '', tall: '' },
+    { type: 'clothing', name: '民国时期蒋宗銮烈士小学时竹木刻', age: '', sort: '竹木雕', grain: '木', long: '21', width: '6', tall: '' },
+  ],
+  '2D': [
+    // 手稿
+    { type: 'book', name: '20世纪20年代高文华烈士北伐时期用的瓷杯', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '10' },
+    { type: 'book', name: '民国时期谢文锦烈士用过的金边碗', age: '', sort: '瓷器', grain: '瓷', long: '', width: '', tall: '5.1' },
+    { type: 'book', name: '民国时期杜焕卿烈士用过的漱口杯', age: '', sort: '瓷器', grain: '瓷', long: '', width: '8.8', tall: '10' },
+    { type: 'book', name: '民国时期谢世炎烈士用过的铁皮箱', age: '', sort: '家具', grain: '铁', long: '81.5', width: '47.7', tall: '19.7' },
+    { type: 'book', name: '民国时期谭寿林烈士用过的书箱', age: '', sort: '家具', grain: '木', long: '63.5', width: '30.7', tall: '38.5' },
+    // 书刊
+    { type: 'straw', name: '民国时期赵良璋烈士用过的派克51型钢笔', age: '', sort: '书法、绘画', grain: '钢，其他金属，其他无机质', long: '13', width: '', tall: '' },
+    { type: 'straw', name: '1947年赵良璋在北平刻的"野雪"印章', age: '', sort: '文件、宣传品', grain: '其他无机质', long: '5', width: '1.1', tall: '1.2' },
+    { type: 'straw', name: '民国时期丁行烈士的水晶图章', age: '', sort: '文件、宣传品', grain: '其他金属', long: '7', width: '1.5', tall: '' },
+    { type: 'straw', name: '民国时期邓振询烈士用的私章及盒子', age: '', sort: '文件、宣传品', grain: '其他动物质', long: '2.3', width: '1.1', tall: '' },
+    { type: 'straw', name: '民国时期文绍珍烈士在国民革命军军官学校第六期学生毕业证章', age: '', sort: '文件、宣传品', grain: '铜', long: '6.4', width: '2.6', tall: '' },
+    { type: 'straw', name: '1943年丁行烈士在狱中刻的图章', age: '', sort: '文件、宣传品', grain: '石', long: '4.5', width: '1.6', tall: '' },
+    { type: 'straw', name: '民国时期成贻宾烈士在国立中央大学的校徽', age: '', sort: '文件、宣传品', grain: '铜', long: '', width: '', tall: '' },
+    { type: 'straw', name: '民国时期谭寿林烈士木刻私章（刻有“祝封贵县”）', age: '', sort: '文件、宣传品', grain: '木', long: '', width: '', tall: '' },
+    { type: 'straw', name: '民国时期周镐烈士用过的红玉石印章', age: '', sort: '文件、宣传品', grain: '宝玉石', long: '4', width: '1.5', tall: '1.5' },
+    { type: 'straw', name: '民国时期谢文锦烈士用过的印章', age: '', sort: '文件、宣传品', grain: '石', long: '3', width: '3', tall: '3.5' },
+
+    // 用具
+    { type: 'clothing', name: '民国时期杜焕卿烈士使用过的墨盒', age: '', sort: '文具', grain: '石', long: '10', width: '', tall: '2' },
+    { type: 'clothing', name: '民国时期谢士炎烈士用过的墨盒', age: '', sort: '文具', grain: '铜', long: '10.8', width: '10.8', tall: '3.8' },
+    { type: 'clothing', name: '民国时期蒋传宗烈士用过的钢笔', age: '', sort: '文具', grain: '其他无机质', long: '13', width: '1.3', tall: '' },
+    { type: 'clothing', name: '1927年夏雨初烈士在郎溪组织农民起义时用的梭镖', age: '', sort: '武器', grain: '铁', long: '30', width: '4.7', tall: '' },
+    { type: 'clothing', name: '吕惠生1943年用过的大刀', age: '', sort: '武器', grain: '其他金属', long: '68.6', width: '6.6', tall: '' },
+    { type: 'clothing', name: '民国时期国民党宪兵司令部的奠基纪念碑', age: '', sort: '玺印符牌', grain: '石', long: '93', width: '51', tall: '10' },
+    { type: 'clothing', name: '1928年冯玉祥送给谢庆云烈士的象牙筷一双', age: '', sort: '牙骨角器', grain: '棉麻纤维', long: '22', width: '', tall: '' },
+    { type: 'clothing', name: '民国时期蒋宗銮烈士小学时竹木刻', age: '', sort: '竹木雕', grain: '木', long: '21', width: '6', tall: '' },
+    // 服装
+    { type: 'tool', name: '民国时期谭寿林烈士用过的书箱', age: '', sort: '家具', grain: '木', long: '63.5', width: '30.7', tall: '38.5' },
+    { type: 'tool', name: '民国时期朱杏南烈士工作时联络做暗号用的陶瓷花盆和茶几', age: '', sort: '家具', grain: '瓷，木', long: '', width: '23', tall: '16' },
+    { type: 'tool', name: '民国时期石淳烈士用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '79.5', width: '47.3', tall: '19.5' },
+    { type: 'tool', name: '民国时期焦恭士烈士用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '29.5', width: '17.6', tall: '8.5' },
+    { type: 'tool', name: '民国时期何宝珍用过的皮箱', age: '', sort: '皮革', grain: '皮革', long: '65.4', width: '38.5', tall: '19.6' },
+    { type: 'tool', name: '抗战时期周镐烈士用过的皮包', age: '', sort: '皮革', grain: '皮革', long: '28', width: '39', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的黄皮文件包', age: '', sort: '皮革', grain: '皮革', long: '33', width: '26', tall: '' },
+    { type: 'tool', name: '民国时期赵良璋烈士飞行时用的美国光学公司制造的飞行员护目眼镜盒', age: '', sort: '其他', grain: '其他金属', long: '22', width: '8.4', tall: '5.2' },
+    { type: 'tool', name: '民国时期郭纲琳烈士戴过的瑞士方形女表', age: '', sort: '其他', grain: '其他金属', long: '20.8', width: '1.5', tall: '' },
+    { type: 'tool', name: '民国时期吕惠生烈士用过的手电筒', age: '', sort: '其他', grain: '其他金属', long: '18.7', width: '4.1', tall: '' },
+    { type: 'tool', name: '民国时期夏雨初烈士用过的铜锁', age: '', sort: '其他', grain: '铜', long: '7.5', width: '1.5', tall: '3.3' },
+    { type: 'tool', name: '1930年夏雨初烈士就义时戴的眼镜', age: '', sort: '其他', grain: '玻璃,其他无机质', long: '11.8', width: '5.2', tall: '' },
+    { type: 'tool', name: '民国时期夏雨初烈士使用的油灯', age: '', sort: '其他', grain: '铜', long: '14', width: '10.5', tall: '' },
+    { type: 'tool', name: '1947年卢志英烈士在上海工作时使用的怀表', age: '', sort: '其他', grain: '铜，其他金属', long: '', width: '', tall: '' },
+    { type: 'tool', name: '二十世纪三十年代郭纲琳烈士在狱中用铜元磨的鸡心，刻有“永是勇士”', age: '', sort: '其他', grain: '铜', long: '2.5', width: '1.5', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的闹钟', age: '', sort: '其他', grain: '铜，其他金属', long: '', width: '', tall: '' },
+    { type: 'tool', name: '二十世纪三十年代郭纲琳烈士狱中磨制的铜圆', age: '', sort: '钱币', grain: '铜', long: '', width: '', tall: '' },
+    { type: 'tool', name: '民国时期文绍珍烈士用过的剪刀', age: '', sort: '铁器、其他金属器', grain: '铁', long: '23', width: '9.6', tall: '' },
+    { type: 'tool', name: '民国时期谢士炎烈士用过的铜压条', age: '', sort: '铜器', grain: '铜', long: '25', width: '3', tall: '' },
+    { type: 'tool', name: '民国时期胡廷俊烈士自制砚台', age: '', sort: '文具', grain: '石', long: '10.5', width: '9.8', tall: '2.2' },
+    // 油画
+    {author:'作者1', type: 'Italy', name: '启蒙', age: '1999', sort: '油 画', grain: '', long: '2.03', width: '2.45', tall: '' },
+    {author:'作者1', type: 'Italy', name: '邓演达主持农工党一干会议', age: '1999', sort: '油 画', grain: '', long: '2.25', width: '3.27', tall: '' },
+    {author:'作者1', type: 'Italy', name: '被    捕', age: '1987', sort: '油 画', grain: '', long: '3.0 ', width: '2.4', tall: '' },
+    {author:'作者1', type: 'Italy', name: '在青年中间', age: '1987', sort: '油 画', grain: '', long: '2.04', width: '2.04', tall: '' },
+    {author:'作者1', type: 'Italy', name: '演    说', age: '1987', sort: '油 画', grain: '', long: '3.03', width: '1.95', tall: '' },
+    {author:'作者1', type: 'Italy', name: '马克昌就义', age: '1987', sort: '油 画', grain: '', long: '1.92', width: '2.01', tall: '' },
+  ]
+}

vue/src/views/Goods/index.vue

@@ -93,7 +93,7 @@
       </div>
     </div>
 
-    <div class="nullSerach" v-if="0">
+    <div class="nullSerach" v-if="data.length === 0">
       <div>
         <img src="../../assets/img/Goods/nullSearch.png" alt="" />
         <p>暂时没有数据</p>
@@ -101,8 +101,8 @@
       </div>
     </div>
     <template v-else>
-      <Three ref="ThreeRef" v-if="model === '3D'" />
-      <Tow v-else />
+      <Three ref="ThreeRef" v-if="model === '3D'" :data="data" />
+      <Tow v-else :data="data" />
     </template>
 
     <!-- 分享页面 -->
@@ -123,6 +123,7 @@
 </template>
 
 <script>
+import { goodsData } from "./data";
 import Three from "./components/Three.vue";
 import Tow from "./components/Tow.vue";
 export default {
@@ -151,6 +152,7 @@ export default {
       music: false,
       like: false,
       share: false,
+      data: [],
     };
   },
   //监听属性 类似于data概念
@@ -165,7 +167,8 @@ export default {
       if (val) dom.play();
       else dom.pause();
     },
-    model() {
+    model(val) {
+      this.data = goodsData[val];
       this.genre = "all";
       this.txt = "";
     },
@@ -210,7 +213,9 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.data = goodsData[this.model];
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前