up

hot/src/views/Home.vue

@@ -211,8 +211,8 @@ export default {
       dom.show();
     },
     imgSrc(val) {
-      if (typeof val === "number") return `/data/${this.m}/img/${val}${this.data.suf}`; //线下调试
-      // if (typeof val === "number") return `/erhai/data/${this.m}/img/${val}${this.data.suf}`; //打包
+      // if (typeof val === "number") return `/data/${this.m}/img/${val}${this.data.suf}`; //线下调试
+      if (typeof val === "number") return `/erhai/data/${this.m}/img/${val}${this.data.suf}`; //打包
       else return val;
     },
     // 追加的图片地址过滤
@@ -235,6 +235,7 @@ export default {
       }/hot/js/data.js?time=${Math.random()}`;
       let result = (await this.$http.get(url)).data;
       let temp = result[this.m];
+      console.log(temp);
       let tempObj;
       tempObj = obj.find((v) => v.id === this.m);
       if(tempObj) {

hot/src/views/data.js

@@ -87,6 +87,8 @@ Protective Level: National Protected Animal with “Three Values”.`,
                   'Sharpbelly, Hemiculter leucisculus',
                   'Yellowhead Catfish, Pelteobagrus fulvidraco',
                   'Tench, Tinca tinca',
+                  'Asian Swamp Eel, Monopterus albus',
+                  'Pond Loach, Misgurnus anguillicaudatus',
             ],
             content: [
                   `Taxonomy: Order Cypriniformes, Family Cyprinidae<br />
@@ -228,9 +230,19 @@ Habits: It lives in shallow, slowly flowing, or still water areas of rivers and
 Other Vernacular Name: Doctor Fish<br />
 Taxonomy: Order Cypriniformes, Family Cyprinidae<br />
 Distribution: Native to Europe. Introduced as an economical fish.<br />
-Habits: A cold water fish. It lives in still water lake or slowly flowing sections of rivers. Generally forages at the bottom. Omnivorous, and bears a strong adaptability.`
+Habits: A cold water fish. It lives in still water lake or slowly flowing sections of rivers. Generally forages at the bottom. Omnivorous, and bears a strong adaptability.`,
+
+`Other Vernacular Names: Rice Eel, Ricefield Eel, Rice Paddy Eel
+Taxonomy: Order Synbranchiformes, Family Synbranchidae
+Distribution: Widely distributed in several major water systems in China.
+Habits: It lives in the shallow shoals with still or slowly flowing water. Nocturnal. Omnivorous, mainly feeds on benthic small animals such as shrimps, aquatic insects and other invertebrates.`,
+
+`Taxonomy: Cyproniformes, Family Cobitidae
+Distribution: All around China, mostly South China. Rare in North.
+Habits: Bears edible and medicinal values. Lives in various kinds of water areas.`,
+
             ],
-            images: 27,
+            images: 29,
       },
 
       // 其他动物
@@ -784,12 +796,7 @@ Distribution: Can be seen in provinces of Northeast China during migration. Over
 Habits: It prefers to accumulate in sea regions with abundant food. Feeds on coastal insects such as grubs, crustaceans, and worms.<br/>
 Protection Level: National Protected Animal with “Three Values”.<br/>
 Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
-                  `
-Taxonomy: Order Charadriiformes, Family Charadriidae<br/>
-Distribution: North America, Africa, and southern Palearctic Region. Overwinters in the south.<br/>
-Habits: It inhabits wetlands including river banks, lakes, swamps, and salt lakes. Mainly feed insects, worms, small crustaceans, and mollusks.<br/>
-Protection Level: National Protected Animal with “Three Values”.<br/>
-Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
+
                   `
 Taxonomy: Order Coraciiformes, Family Alcedinidae<br/>
 Distribution: It breeds in most regions in East, Central and South China from Liaoning to Gansu.<br/>
@@ -1140,12 +1147,10 @@ Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
             id: 'ITYys711933',
             title: [
                   'Light Grayish Green Diopside Tremolite Schist',
-                  'Light Gray Phyllite',
                   'Scapolite-Calcite Marble',
                   'Hornblende Schist',
                   'Two-Mica Plagioclase Gneiss',
                   'Mylonitized Biotite Plagioclase Gneiss',
-                  'Grayish Green Sericite Chlorite Felsic Schist',
                   'Felsic Chlorite Two-Mica Phyllonite',
                   'Biotite Monzo-Granulite',
                   'Grayish White Gray-Inserting (Water Pattern) Marble',
@@ -1182,10 +1187,8 @@ Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
                   Epoch:Precambrian Cangshan Group（AnꞒC）<br/>
                   Years before Present:1,800–2,300 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
-                  `Locality:Western Slope of Cangshan Mountain, Yangbi County<br/>
-                  Epoch:Precambrian Cangshan Group（AnꞒC）<br/>
-                  Years before Present:1,800–2,300 Ma<br/>
-                  Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+                  
+           
                   `Locality:Mangyong Steam, Wanqiao Town<br/>
                   Epoch:Precambrian Cangshan Group（AnꞒC）<br/>
                   Years before Present:1,000–1,800 Ma<br/>
@@ -1202,10 +1205,7 @@ Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
                   Epoch:Precambrian Cangshan Group（AnꞒC）<br/>
                   Years before Present:1,000–1,800 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
-                  `Locality:Mangyong Steam, Wanqiao Town, Dali City<br/>
-                  Epoch:Precambrian Cangshan Group（AnꞒC）<br/>
-                  Years before Present:1,000–1,800 Ma<br/>
-                  Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+
                   `Locality:Western Slope of Cangshan Mountain, Yangbi County<br/>
                   Epoch:Precambrian Cangshan Group（AnꞒC）<br/>
                   Years before Present:1,800–2,300 Ma<br/>
@@ -1331,7 +1331,7 @@ Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
                   Years before Present:1,800–2,300 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
             ],
-            images: 38
+            images: 36
       },
 
       // 沉积岩
@@ -1345,7 +1345,6 @@ Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
                   'Dark Gray Slaty Cleavaged Micritic Limestone',
                   'Strongly Dolomitized Microcrystalline Limestone',
                   'Light Brownish Gray-Light Gray Lamina-Patchy Micritic Limestone',
-                  'Purplish Red Fine-Grained Quartz Sandstone',
                   'Light Yellowish Gray Microcrystalline Dolomitic Cataclasite',
                   'Gray-Light Gray Vermicular Powder-Fine Crystalline Dolomite',
                   'Gray Calcite-Bearing Dolomitic Marble',
@@ -1390,34 +1389,37 @@ Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
                   Epoch:Kanglang Formation, Silurian, Proterozoic<br/>
                   Years before Present:410–438 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+
                   `Locality:Baofeng Temple, Binchuan County<br/>
                   Epoch:Kanglang Formation, Silurian, Proterozoic<br/>
                   Years before Present:410–438 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+
                   `Locality:Baofeng Temple, Binchuan County<br/>
                   Epoch:Kanglang Formation, Silurian, Proterozoic<br/>
                   Years before Present:410–438 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+
                   `Locality:Baofeng Temple, Binchuan County<br/>
                   Epoch:Kanglang Formation, Silurian, Proterozoic<br/>
                   Years before Present:410–438 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+
                   `Locality:Baofeng Temple, Binchuan County<br/>
                   Epoch:Kanglang Formation, Silurian, Proterozoic<br/>
                   Years before Present:410–438 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+
                   `Locality:Baofeng Temple, Binchuan County<br/>
                   Epoch:Kanglang Formation, Silurian, Proterozoic<br/>
                   Years before Present:410–438 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
-                  `Locality:Feilai Temple, Dali<br/>
-                  Epoch:Nanxin Formation, Cretaceous, Mesozoic<br/>
-                  Years before Present:137–225 Ma<br/>
-                  Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+                  
                   `Locality:Baofeng Temple, Binchuan County<br/>
                   Epoch:Kanglang Formation, Silurian, Proterozoic<br/>
                   Years before Present:410–438 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
+
                   `Locality:Baofeng Temple, Binchuan County<br/>
                   Epoch:Qingshan Formation, Devonian, Proterozoic<br/>
                   Years before Present:354–410 Ma<br/>
@@ -1581,7 +1583,7 @@ Dali Erhai Protection, Investment, and Construction Co. Ltd.`,
                   Years before Present:205–250 Ma<br/>
                   Dali Erhai Protection, Investment, and Construction Co. Ltd`,
             ],
-            images: 45
+            images: 44
       },
 
       // 矿石
@@ -2201,6 +2203,7 @@ Growth Traits: Annual herb with fibrous roots. Usually grows in paddy fields, di
             Erhai Lake, I wanna say to you, that we shall protect you together!<br/>
             We are members of the League of Young Pioneers of the 167 squadron. We love you, our mother lake!`
             ],
+            video:[{url: 'https://super.4dage.com/data/1173_1/edit/20220421_150435490.mp4'}],
             images: 6
       },
 

web/package-lock.json

@@ -15,6 +15,7 @@
         "v-viewer": "^1.6.4",
         "vue": "^2.6.11",
         "vue-awesome-swiper": "^4.1.1",
+        "vue-lazyload": "^1.3.3",
         "vue-router": "^3.2.0"
       },
       "devDependencies": {
@@ -13775,6 +13776,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-lazyload": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.3.tgz",
+      "integrity": "sha512-uHnq0FTEeNmqnbBC2aRKlmtd9LofMZ6Q3mWvgfLa+i9vhxU8fDK+nGs9c1iVT85axSua/AUnMttIq3xPaU9G3A=="
+    },
     "node_modules/vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",
@@ -26316,6 +26322,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-lazyload": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.3.tgz",
+      "integrity": "sha512-uHnq0FTEeNmqnbBC2aRKlmtd9LofMZ6Q3mWvgfLa+i9vhxU8fDK+nGs9c1iVT85axSua/AUnMttIq3xPaU9G3A=="
+    },
     "vue-loader": {
       "version": "15.9.8",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.8.tgz",

web/package.json

@@ -17,6 +17,7 @@
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

web/src/components/welcome/index.vue

@@ -56,7 +56,6 @@ export default {
       languagShow: false,
       videoPlay: false,
       playImgOpa: 1,
-      myTime: null,
     };
   },
   methods: {
@@ -70,11 +69,13 @@ export default {
     if (window.location.hash === "#/") {
       this.isShow = true;
       // 移动端的play图片透明度变化
-      this.myTime = setInterval(() => {
-        console.log("定时器启动");
-        if (this.playImgOpa === 1) this.playImgOpa = 0.5;
-        else this.playImgOpa = 1;
-      }, 1500);
+      if (this.isMobile) {
+        setInterval(() => {
+          console.log("定时器启动");
+          if (this.playImgOpa === 1) this.playImgOpa = 0.5;
+          else this.playImgOpa = 1;
+        }, 1500);
+      }
     }
     // 监听视频播放完毕
     this.$nextTick(() => {

web/src/main.js

@@ -15,7 +15,12 @@ Vue.use(Viewer, {
     title: false
   }
 })
-
+// 图片懒加载
+import VueLazyLoad from 'vue-lazyload'
+Vue.use(VueLazyLoad, {
+  error: require('@/assets/img/IMGerror.png'),
+  loading: require('@/assets/img/loading.gif')
+})
 const MylangueFu = {
   data() {
     return {

web/src/views/gui/component/quality.js

@@ -0,0 +1,270 @@
+const qualityData = [
+  {
+    id:1,
+    name: '白鹭', txt: `别名：小白鹭<br/>
+  分类：鹈形目 鹭科 <br/>
+  分布：分布在中国南方、台湾及海南岛。<br/>
+  习性：栖息于沿海岛屿、海岸及其沿海附近的江河、水稻田和沼泽地带。主要以各种小型鱼类为食，也吃虾、蟹、蝌蚪和水生昆虫等动物性食物。<br/>
+  大理洱海保护投资建设有限责任公司` },
+  {
+    id:2,
+    name: '赤麻鸭', txt: `别名：黄鸭、黄凫、渎凫、红雁<br/>
+  分类：雁形目 鸭科<br/>
+  分布：在中国东北、华北、长江流域省份，偶见于台湾岛内。<br/>
+  习性：栖息于草原、沼泽、农田和平原疏林等各类生境中。以水生植物和昆虫、甲壳动物、软体动物为食。<br/>
+  保护级别：中国“三有”保护动物。
+  大理洱海保护投资建设有限责任公司` },
+  {
+    id:3,
+    name: '绿头鸭', txt: `别名：大绿头,大红腿鸭,官鸭,对鸭,大麻鸭,青边<br/>
+  分类：雁形目  鸭科<br/>
+  分布：繁殖于中国西北和东北，越冬于西藏西南及北纬40°以南的华中、华南广大地区，包括台湾。<br/>
+  习性：通常栖息于淡水湖畔。杂食性，主要以野生植物组织比如种子为食，也吃软体动物、甲壳类、水生昆虫等。<br/>
+  保护级别：中国“三有”保护动物。<br/>
+  大理洱海保护投资建设有限责任公司` },
+  {
+    id:4,
+    name: '黑水鸡', txt: `别名：鷭、江鸡、红骨顶<br/>
+  分类：鹤形目 秧鸡科<br/>
+  分布：在广布于除大洋洲以外的世界各地。<br/>
+  习性：栖息于富有芦苇和其他水生挺水植物的淡水湿地。以水草、小鱼虾和水生昆虫等为食。<br/>
+  保护级别：中国“三有”保护动物。<br/>
+  大理洱海保护投资建设有限责任公司` },
+  {
+    id:5,
+    name: '骨顶鸡', txt: `别名：白骨顶<br/>
+  分类：鹤形目 秧鸡科<br/>
+  分布：广泛分布于世界各地。<br/>
+  习性：栖息于低山丘陵和平原草地、甚至荒漠与半荒漠地带的各类水域中，杂食性，但主要以植物为食。<br/>
+  保护级别：中国“三有”保护动物。<br/>
+  大理洱海保护投资建设有限责任公司`},
+  {
+    id:6,
+    name: '红嘴鸥', txt: `别名：笑鸥、钓鱼郎<br/>
+  分类：鸥形目  鸥科<br/>
+  分布：在北美、欧洲和亚洲大部分地区的北部繁殖。在中国，越冬于南方沿海和内陆湿地。<br/>
+  习性：栖息于平原和低山丘陵地带的湖泊。主要以鱼，以及虾、水生昆虫、甲壳类、软体动物等水生无脊椎动物为食。<br/>
+  保护级别：中国“三有”保护动物。<br/>
+  大理洱海保护投资建设有限责任公司` },
+  {
+    id:7,
+    name: '小鸊鷉', txt: `别名：油鸭、水葫芦、油葫芦、王八鸭子<br/>
+  分类：鸊鷉目 鸊鷉科<br/>
+  分布：在中国大部分开阔水面都能见到小䴙䴘。<br/>
+  习性：栖息于湖泊、水塘、水渠、池塘和沼泽地带。主要以各种小型鱼类为食。<br/>
+  保护级别：中国“三有”保护动物。<br/>
+  大理洱海保护投资建设有限责任公司`},
+  {
+    id:8,
+    name: '云南裂腹鱼', txt: `别名：面鱼<br/>
+  分类：鲤形目 鲤科<br/>
+  分布：云南省大理州洱海流域。<br/>
+  习性：自然条件下喜生活于水质清新的江河、水库、湖泊中。属中小型亚冷水性鱼类，云南特有种。为云南四大名贵鱼类之一。`},
+  {
+    id:9,
+    name: '大理裂腹鱼', txt: `别名：弓鱼、竿鱼<br/>
+  分类：鲤形目 鲤科<br/>
+  分布：中国特有种，仅分布于洱海及其附属水系。<br/>
+  习性：栖息于湖泊中敞水区域，适应于静水环境，主食浮游生物。<br/>
+  保护级别：国家II级保护动物，已列入中国濒危动物红皮书。` },
+  {
+    id:10,
+    name: '灰裂腹鱼', txt: `别名：灰色裂腹鱼<br/>
+  分类：鲤形目 鲤科<br/>
+  分布：分布于金沙江（乌江）、南盘江、澜沧江、龙川江、大盈江水系。<br/>
+  习性：自然条件下，栖息环境多为水流湍急、砂砾底质。主食水生无脊椎动物，数量较少。` },
+  {
+    id:11,
+    name: '洱海四须鲃', txt: `别名：镖鱼、青脊梁<br/>
+  分类：鲤形目 鲤科<br/>
+  分布：中国特有种，仅分布于洱海流域。<br/>
+  习性：生活于湖岸水草丛生处，主食水草。五六月间产卵。1960年代后逐年减少，现已不多见。` },
+  {
+    id:12,
+    name: '光唇裂腹鱼', txt: `别名：面鱼<br/>
+  分类：鲤形目 鲤科<br/>
+  分布：分布于珠江水系南北盘江、元江、澜沧江和怒江等。<br/>
+  习性：自然条件下，栖息环境多为水流湍急、砂砾底质。下层鱼类，食藻类和有机碎屑。` },
+  {
+    id:13,
+    name: '太湖新银鱼', txt: `别名：小银鱼、银鱼<br/>
+  分类：鲑形目  银鱼科<br/>
+  分布：长江中、下游的附属湖泊中，模式产地在太湖。<br/>
+  习性：纯淡水的种类，终生生活于湖泊内，浮游在水的中、下层，以浮游动物为主食，也食少量的小虾和鱼苗。` },
+  {
+    id:14,
+    name: '黄鳝', txt: `别名：鱓鱼、罗鳝、蛇鱼、血鳝、常鱼、 长鱼、鳝鱼<br/>
+  分类：合鳃鱼目  合鳃鱼科<br/>
+  分布：广布于中国各大水系。<br/>
+  习性：在静水或缓流的浅滩生活，昼伏夜出。杂食，主食底栖小动物，比如小虾、水生小昆虫和其他一些无脊椎动物等。` },
+  {
+    id:15,
+    name: '鲫鱼', txt: `别名：刀子鱼<br/>
+  分类：鲤形目  鲤科<br/>
+  分布：全国各地水域常年均有分布。<br/>
+  习性：喜欢群集而行。到水草丰茂的浅滩，河湾，芦苇丛中寻食，产卵；遇到水流缓慢或静止不动。`},
+  {
+    id:16,
+    name: '海菜花', txt: `分类地位: 水鳖科  水车前属 <br/>
+  分布地点：产广东、海南、广西、四川、贵州和云南。<br/>
+  生长特征：沉水草本。为我国特有种。生于湖泊、池塘、沟渠及水田中。花果期5-10月。`},
+  {
+    id:17,
+    name: '睡莲', txt: `分类地位：睡莲科  睡莲属  <br/>
+  分布地点：在我国广泛分布。俄罗斯、朝鲜、日本、印度、越南、美国均有。<br/>
+  生长特征：多年水生草本；生在池沼中。根状茎短粗。花期6-8月，果期8-10月。` },
+  {
+    id:18,
+    name: '菱', txt: `分类地位：菱科   菱属  <br/>
+  分布地点：产黑龙江、吉林、辽宁、陕西、河北、河南、山东、江苏、浙江、安徽、湖北、湖南、江西、福建、广东、广西等省区水域；全国各地有栽培。日本、朝鲜、印度、巴基斯坦也有分布。<br/>
+  生长特征：一年生浮水水生草本。生于湖湾、池塘、河湾。花期5-10月，果期7-11月。`},
+  {
+    id:19,
+    name: '水葫芦', txt: `分类地位：雨久花科   凤眼蓝属 <br/>
+  分布地点：原产巴西。现广布于我国长江、黄河流域及华南各省。亚洲热带地区也已广泛生长。 <br/>
+  生长特性：浮水草本，生于海拔200-1 500米的水塘、沟渠及稻田中。花期7-10月，果期8-11月。`},
+  {
+    id:20,
+    name: '粉绿狐尾藻', txt: `分类地位：小二仙草科  狐尾藻属 <br/>
+  分布地点：产海南。印度、越南也有分布。<br/>
+  生长特性：生于浅水中。株高约10- 20厘米。茎呈半蔓性，能匍匐湿地生长。花期在每年的4-9月 ` },
+  {
+    id:21,
+    name: '针海绵', txt: `分类：多孔动物门  单轴目  海绵科<br/>
+  分布：洱海及其上游水域。<br/>
+  习性：喜附着于苦草等水生植物的茎叶上，或附着或包裹在螺蛳、蚬、蚌等软体动物的贝壳上。`},
+  {
+    id:22,
+    name: '螺蛳', txt: `别名：方田螺<br/>
+  分类：中腹足目  田螺科 <br/>
+  分布：仅分布云南省湖泊。 <br/>
+  习性：生活于河沟、湖泊、池沼及水田内；多栖息于腐殖质较多的水底。以藻类及其他植物的表皮为食。<br/>
+  保护级别：国家二级保护动物。`},
+  {
+    id:23,
+    name: '福寿螺', txt: `别名：大瓶螺、苹果螺<br/>
+  分类：中腹足目  瓶螺科<br/>
+  分布：原产南美，1981年传入中国大陆，现分布我国南方各省，为重要外来入侵有害生物。 <br/>
+  习性：生活在水质清新、饵料充足的淡水中，多集群栖息于池边浅水区，或吸附在水生植物茎叶上。`}
+]
+const qualityDataEn = [
+  {id:1,
+    name:"Little Egret, Egretta garzetta",txt:`Taxonomy: Order Pelecaniformes, Family Ardeidae<br/>
+  Distribution: Southern part of China, including Taiwan and Hainan Islands.<br/>
+  Habits: Inhabits offshore islands, coasts, inshore lakes, paddy fields, and swamps. Mainly feed on various kinds of small fishes, and also other animal derived food such as shrimps, crabs, tadpoles, and aquatic insects.<br/>
+  Dali Erhai Protection, Investment, and Construction Co. Ltd.`},
+  {
+  id:2,  name:"Ruddy Shelduck, Tadorna ferruginea",txt:`Other Vernacular 
+  Name: Brahminy Duck<br/>
+  Taxonomy: Order Anseriformes, Family Anatidae<br/>
+  Distribution: Provinces in Northeast, North and the Yangzte River Basin of China, and occasionally, Taiwan.<br/>
+  Habits: It inhabits various habitats such as grassland, swamp, paddy fields, and sparse forest in plains. Feeds on aquatic plants, insects, crustaceans, and mollusks.<br/>
+  Protection Level: National Protected Animal with “Three Values”.<br/>
+  Dali Erhai Protection, Investment, and Construction Co. Ltd.`},
+  {
+  id:3,  name:"Mallard, Anas platyrhynchos",txt:`Other Vernacular 
+  Name: Wild Duck<br/>
+  Taxonomy: Order Anseriformes, Family Anatidae<br/>
+  Distribution: It breeds in Northwest and Northeast China, and overwinters in southwestern Tibet and most regions of Central and South China south of 40° N, including Taiwan.<br/>
+  Habits: It usually inhabits freshwater lakeshores. Omnivorous, mainly feeds on vegetative tissues such as seeds, and also mollusks, crustaceans, and aquatic insects.<br/>
+  Protection Level: National Protected Animal with “Three Values”.<br/>
+  Dali Erhai Protection, Investment, and Construction Co. Ltd.`},
+  {id:4,
+    name:"Common Moorhen, Gallinula chloropus",txt:`Other Vernacular Names: Waterhen, Swamp Chicken<br/>
+  Taxonomy: Order Gruiformes, Family Rallidae<br/>
+  Distribution: Widely distributed around the world except Oceania.<br/>
+  Habits: It inhabits freshwater wetlands with flourishing reed and other emergent aquatic plants. Feeds on aquatic grasses, small fishes and shrimps, and aquatic insects.<br/>
+  Protection Level: National Protected Animal with “Three Values”.<br/>
+  Dali Erhai Protection, Investment, and Construction Co. Ltd.`},
+  {id:5,
+    name:"Eurasian Coot, Fulica atra",txt:`Taxonomy: Order Gruiformes, Family Rallidae<br/>
+  Distribution: Widely distributed in the world.<br/>
+  Habits: It inhabits various kinds of water areas in lowland hills, grassland in plains, even desert and semi-desert areas. Although omnivorous, it mainly feeds on vegetation.<br/>
+  Protection Level: National Protected Animal with “Three Values”.<br/>
+  Dali Erhai Protection, Investment, and Construction Co. Ltd.`},
+  {id:6,
+    name:"Black-Headed Gull, Larus ridibundus",txt:`Taxonomy: Order Charadriiformes, Family Laridae<br/>
+  Distribution: Breeds in a vast area in northern North America and Eurasia. In China, they overwinter in southern coasts and inland wetlands.<br/>
+  Habits: It inhabits lakes in plains and lowland hills. Mainly feeds on fishes and aquatic invertebrates such as shrimps, insects, crustaceans, and mollusks.<br/>
+  Protection Level: National Protected Animal with “Three Values”.<br/>
+  Dali Erhai Protection, Investment, and Construction Co. Ltd.`},
+  {
+  id:7,  name:"Little Grebe, Tachybatus ruficollis",txt:`Other Vernacular 
+  Name: Dabchick<br/>
+  Taxonomy: ORder Podicipediformes, Family Podicedidae<br/>
+  Distribution: It can be observed in most open areas in China.<br/>
+  Habits: It inhabits lakes, ponds, canals, puddles, and swampy areas. Mainly feeds on various kinds of small fishes.<br/>
+  Protection Level: National Protected Animal with “Three Values”.<br/>
+  Dali Erhai Protection, Investment, and Construction Co. Ltd.`},
+  {id:8,
+    name:"Yunnan Cloven-Breast Fish, Schizothorax yunnanensis",txt:`Taxonomy: Order Cypriniformes, Family Cyprinidae<br/>
+  Distribution: Erhai Basin, Dali Prefecture, Yunnan Province.<br/>
+  Habits: Under natural conditions, it prefers to inhabit rivers, reservoirs, and lakes with clear and pure water. It is a small or medium-sized subcold water fish that is endemic to Yunnan. One of the four famous and precious fishes in Yunnan.`},
+  {id:9,
+    name:"Dali Cloven-Breast Fish, Schizothorax taliensis",txt:`Taxonomy: Order Cypriniformes, Family Cyprinidae<br/>
+  Distribution: Endemic to China. Only distributes in the Erhai Lake and its accessory water systems.<br/>
+  Habits: Inhabits open water areas in the lake. Adapted to still water environment. Mainly feeds on plankton.<br/>
+  Protection Level: National Protected Animal Grade II. Listed in the Red Data Book of Endangered Animals of China.`},
+  {id:10,
+    name:"Grey Cloven-Breast Fish, Schizothorax griseus",txt:`Taxonomy: Order Cypriniformes, Family Cyprinidae<br/>
+  Distribution: Water systems of the Yangtze (Wujiang), Nanpan, Lancang, Longchuan, and Great Yingjiang Rivers.<br/>
+  Habits: Under natural conditions, its habitats are mostly with fast flowing current and gravel bottom. Mainly feeds on invertebrates. Rare.`},
+  {id:11,
+    name:"Erhai Barbel Fish, Barbodes daliensis",txt:`Taxonomy: Order Cypriniformes, Family Cyprinidae<br/>
+  Distribution: Endemic to China. Only distributed in the Erhai Basin.<br/>
+  Habits: Inhabits grassy region near lakeshores, and mainly feeds on water grasses. Spawns in May and June. Decreased since the 60s. Uncommonly seen nowadays.`},
+  {id:12,
+    name:"Smooth-Lipped Cloven-Breast Fish, Schizothorax lissolabiatus",txt:`Taxonomy: Order Cypriniformes, Family Cyprinidae<br/>
+  Distribution: Pearl River System including South and North Panjiang Rivers and Yuanjiang River, Lancang, and Nujiang Rivers.<br/>
+  Habits: Under natural conditions, its habitats are mostly with fast flowing current and gravel bottom. A demersal fish, feeds on algae and organic debris.`},
+  {id:13,
+    name:"Taihu Silverfish, Neosalanx taihuensis",txt:`Taxonomy: Order Salmoniformes, Family Salangidae<br/>
+  Distribution: Affiliated lakes in the middle and lower sectors of the Yangtze River. Its type locality is the Taihu Lake.<br/>
+  Habits: A pure freshwater fish, spends its entire life in the lake. Floats in the middle and lower levels of water, mainly feeds on zooplankton, and also a small amount of small shrimps and fries.`},
+  {id:14,
+    name:"Asian Swamp Eel, Monopterus albus",txt:`Other Vernacular Names: Rice Eel, Ricefield Eel, Rice Paddy Eel<br/>
+  Taxonomy: Order Synbranchiformes, Family Synbranchidae<br/>
+  Distribution: Widely distributed in several major water systems in China.<br/>
+  Habits: It lives in the shallow shoals with still or slowly flowing water. Nocturnal. Omnivorous, mainly feeds on benthic small animals such as shrimps, aquatic insects and other invertebrates.`},
+  {id:15,
+    name:"Gold Fish, Carassius auratus",txt:`Taxonomy: Order Cypriniformes, Family Cyprinidae<br/>
+  Distribution: Can be found in water areas throughout the country in all year round.<br/>
+  Habits: Prefers to group into bevies. Forages and spawns in shallow shoals with dense grasses, river bays, and reeds; slows down or keeps still when encountering current.`},
+  {id:16,
+    name:"Haicai Flower, Ottelia acuminata",txt:`Taxonomy: Family Hydrocharitaceae, genus Ottelia<br/>
+  Distribution: Guangdong, Hainan, Guangxi, Sichuan, Guizhou, and Yunnan.<br/>
+  Growth Traits: Submerged herb. Endemic to China. Growths in lakes, ponds, canals, and paddy fields. Flowers and fruits in May–October.`},
+  {id:17,
+    name:"Pygmy Water-Lily, Nymphaea tetragona",txt:`Taxonomy: Family Nymphaeaceae, genus Nymphaea<br/>
+  Distribution: Widely distributed in China. Can also be found from Russian, Korea, Japan, India, Vietnam, and USA, etc.<br/>
+  Growth Traits: Perennial aquatic herb. Grows in lakes and swamps with short and stout rhizome. Flowers in June–August and fruits in August–October.`},
+  {id:18,
+    name:"Water Chestnut, Trapa bispinosa",txt:`Taxonomy: Family Trapaceae, genus Trapa<br/>
+  Distribution: Water areas in Heilongjiang, Jilin, Liaoning, Shaanxi, Hebei, Henan, Shandong, Jiangsu, Zhejiang, Anhui, Hubei, Hunan, Jiangxi, Fujian, Guangdong, and Guangxi, etc. Cultivated in all around the country. Can also be found from Japan, Korea, India, and Pakistan, etc.<br/>
+  Growth Traits: Perennial floating aquatic herb. Grows in lake bays, ponds, and river coves. Flowers in May–October, and fruits in July–November.`},
+  {id:19,
+    name:"Water Hyacinths, Eichhornia crassipes",txt:`Taxonomy: Family Pontederiaceae, genus Eichhornia<br/>
+  Distribution: Native to Brazil. Currently, it is widely distributed in the Yangtze and Yellow River Basins and several provinces in South China. Can also be found widely in tropical regions of Asia.<br/>
+  Growth Traits: Floating herb. Grows in ponds, canals, and paddy fields of an elevation between 200–1,500 m. Flowers in July–October, and fruits in August–November.`},
+  {id:20,
+    name:"Parrot's feather, Myriophyllum aquaticum",txt:`Taxonomy: Family Haloragidaceae, genus Myriophyllum<br/>
+  Distribution: Hainan. Can also be found from Vietnam and India.<br/>
+  Growth Traits: Grows in shallow water. Plant height 10–20 cm. Stem is semi-repent on the wetlands. Flowers in April–September.`},
+  {id:21,
+    name:"Freshwater Sponge, Spongilla sp.",txt:`Taxonomy: Phylum Porifera, Order Monaxonida, Family Spongiidae<br/>
+  Distribution: Erhai Lake and its upstream.<br/>
+  Habits: Prefers to attach on leaves and stems of eelgrasses. Also attaches on or encloses shells of mollusks, such as fresh water snails, clams, and mussels.`},
+  {id:22,
+    name:"Luosi Snail, Margarya melanioides",txt:`Taxonomy: Order Mesogastropoda, Family Viviparidae<br/>
+  Distribution: Endemic to some lakes in Yunnan.<br/>
+  Habits: Lives in river ditches, lakes, ponds, and paddy fields. Usually inhabits water bottom with plenty of humus. Feeds on algae and epidermis of macrophytes.<br/>
+  Protection Level: National Protected Animal Grade II.`},
+  {
+  id:23,  name:"Channeled Applesnail, Pomacea canaliculata",txt:`Other Vernacular 
+  Name: Golden Apple Snail<br/>
+  Taxonomy: Order Mesogastropoda, Family Ampullariidae<br/>
+  Distribution: Native to South America. Introduced into mainland China in 1981, and now widely distributed in several provinces of South China as an invasive pest.<br/>
+  Habits: Lives in freshwater with clear water and abundant food resources. Usually clusters in shallow water area near lakeshores, or attached to the stems and leaves of aquatic plants.`},
+]
+
+export { qualityData,qualityDataEn }

web/src/views/gui/component/quality.vue

@@ -2,26 +2,41 @@
   <div class="quality">
     <div class="main">
       <div class="top">
-        <h2>{{Mylangue?'精品典藏':'Collections'}}</h2>
+        <h2>{{ Mylangue ? "精品典藏" : "Collections" }}</h2>
         <i class="el-icon-close" @click="$emit('close')"></i>
       </div>
       <div class="conten">
-        <div class="search">
+        <div class="search" @keyup.enter="pageChange(1)">
           <el-input
             v-model="input"
-            :placeholder="Mylangue?'请输入藏品名称...':'Enter title here'"
+            :placeholder="Mylangue ? '请输入藏品名称...' : 'Enter title here'"
             suffix-icon="el-icon-search"
           ></el-input>
-          <el-button type="primary" size="small" style="margin-left: 15px"
-            >{{Mylangue?'搜索':'Search'}}</el-button
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-left: 15px"
+            @click="pageChange(1)"
+            >{{ Mylangue ? "搜索" : "Search" }}</el-button
           >
-          <el-button size="small">{{Mylangue?'重置':'Reset'}}</el-button>
+          <el-button size="small" @click="reset">{{
+            Mylangue ? "重置" : "Reset"
+          }}</el-button>
+        </div>
+        <!-- 没有数据 -->
+        <div class="noneInfo" v-if="data.length === 0">
+          <p>{{ Mylangue ? "暂无数据..." : "no data..." }}</p>
         </div>
         <!-- 内容 -->
-        <div class="rowAll">
-          <div class="row" v-for="i in 8" :key="i">
-            <img src="../../../assets/images/myModel.jpg" alt="" />
-            <p>藏品名称</p>
+        <div class="rowAll" v-else>
+          <div
+            class="row"
+            :title="item.name"
+            v-for="item in data"
+            :key="item.id"
+          >
+            <img v-lazy="`/data/goods/${item.id}.jpg`" alt="" />
+            <p>{{ item.name }}</p>
           </div>
         </div>
         <!-- 分页 -->
@@ -31,8 +46,7 @@
             :page-size="8"
             :current-page="formData.pageNum"
             @current-change="currentChange"
-            @size-change="sizeChange"
-            :total="50"
+            :total="total"
           >
           </el-pagination>
         </div>
@@ -42,6 +56,7 @@
 </template>
 
 <script>
+import { qualityData, qualityDataEn } from "./quality";
 export default {
   name: "quality",
   components: {},
@@ -53,6 +68,9 @@ export default {
         pageNum: 1,
         pageSize: 8,
       },
+      dataAll: [],
+      data: [],
+      total: 0,
     };
   },
   //监听属性 类似于data概念
@@ -61,15 +79,21 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 点击重置
+    reset() {
+      this.input = "";
+      this.pageChange(1);
+    },
     // 分页器方法
     currentChange(val) {
-      // console.log('当前页改变了', val)
-      this.formData.pageNum = val;
+      this.pageChange(val);
     },
-    sizeChange(val) {
-      // console.log('条数改变了', val)
-      this.formData.pageNum = 1;
-      this.formData.pageSize = val;
+    // 封装一个控制分页的方法
+    pageChange(i) {
+      let temp = this.dataAll.filter((v) => v.name.includes(this.input));
+      this.total = temp.length;
+      if (this.isMobile) this.data = [...temp];
+      else this.data = temp.slice((i - 1) * 8, i * 8);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -77,11 +101,16 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     // 控制分页器的英文版文字
-    if(!this.Mylangue) {
-      let dom = document.getElementsByClassName("el-pagination__jump")
-      dom[0].childNodes[0].nodeValue = "Jump to";
-      dom[0].childNodes[2].nodeValue = "page";
-    }
+    if (!this.Mylangue) {
+      // 英文版
+      this.dataAll = qualityDataEn;
+      let dom = document.getElementsByClassName("el-pagination__jump");
+      if (dom && dom[0]) {
+        dom[0].childNodes[0].nodeValue = "Jump to";
+        dom[0].childNodes[2].nodeValue = "page";
+      }
+    } else this.dataAll = qualityData;
+    this.pageChange(1);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -97,7 +126,7 @@ export default {
   outline: 2px solid #165491;
 }
 .quality {
-  background-color: rgba(0,0,0,.5);
+  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   left: 0;
@@ -147,10 +176,20 @@ export default {
         font-size: 18px;
       }
     }
+    .noneInfo {
+      margin-top: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      font-size: 30px;
+      height: 420px;
+    }
     .rowAll {
       margin-top: 40px;
       display: flex;
       flex-wrap: wrap;
+      height: 420px;
       .row {
         cursor: pointer;
         margin-right: 10px;
@@ -203,7 +242,7 @@ export default {
   .quality {
     .main {
       top: 60px;
-      transform: translate(-50%,0);
+      transform: translate(-50%, 0);
       max-height: 640px;
       width: 100%;
       max-width: 350px;
@@ -220,17 +259,21 @@ export default {
       padding: 10px;
       .search {
         width: 100%;
-        button{
+        button {
           width: 56px !important;
           padding: 5px 8px !important;
         }
       }
-      .rowAll{
+      .noneInfo {
+        margin-top: 20px;
+        height: calc(100% - 42px);
+      }
+      .rowAll {
         justify-content: center;
         margin-top: 20px;
         height: calc(100% - 42px);
         overflow-y: auto;
-        .row{
+        .row {
           margin-right: 0;
           margin-bottom: 10px;
         }