拉取

about/css/index.css

@@ -75,25 +75,16 @@
     overflow-x: hidden;
     overflow-y: auto;
 }
-/* //滚动条凹槽的颜色，还可以设置边框属性 */
-.about-sub-company-section .container .aboutcotn::-webkit-scrollbar-track-piece { 
-    background-color:#f8f8f8;
-}
-/* //滚动条的宽度 */
-.about-sub-company-section .container .aboutcotn::-webkit-scrollbar {
-    width:8px;
-    height:8px;
-}
-/* //滚动条的设置 */
-.about-sub-company-section .container .aboutcotn::-webkit-scrollbar-thumb {
-    background-color:#dddddd;
-    background-clip:padding-box;
-    min-height:28px;
-    border-radius: 15px;
+
+.about-sub-company-section .container .aboutcotn{ overflow: overlay; } /* 需要滚动的地方加上这个class */
+.about-sub-company-section .container .aboutcotn::-webkit-scrollbar { /* 组件内滚动条不显示 */
+    display: none;
 }
-.about-sub-company-section .container .aboutcotn::-webkit-scrollbar-thumb:hover {
-    background-color:#bbb;
+.about-sub-company-section .container .aboutcotn:hover::-webkit-scrollbar { /* 悬停时滚动条才显示 */ 
+    display: block; 
 }
+
+
 .about-sub-company-section .container .border-buttom{
     padding: 10px;
     border-bottom: 1px solid #C7C7C7;

about/index.html

@@ -79,7 +79,7 @@
                                         <a href="../technology/index.html">技术支撑</a>
                                     </li>
                                     <li>
-                                        <a href="../news">新闻动态</a>
+                                        <a href="../news/index.html">新闻动态</a>
                                         <!-- <ul class="submenu">
                                             <li><a href="../news">公司新闻</a></li>
                                             <li><a href="../news/trade/index.html">行业动态</a></li>

assets/css/style.css

@@ -172,7 +172,31 @@
             a:hover {
                 color: #639BFF;
             }
+
+
+            ::-webkit-scrollbar { /* 滚动条整体样式 */
+                width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
+                height: 5px;
+              }
+            ::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */
+                border-radius: 10px;
+                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+                background-color:#9e9e9e;
+            }
+            ::-webkit-scrollbar-track { /* 滚动条里面轨道 */
+                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
+                border-radius: 10px;
+            }
+               
+            body{ overflow: overlay; } /* 需要滚动的地方加上这个class */
+            body::-webkit-scrollbar { /* 组件内滚动条不显示 */
+                display: none;
+            }
+            body:hover::-webkit-scrollbar { /* 悬停时滚动条才显示 */ 
+                display: block; 
+            }
             
+                        
             input,
             select,
             textarea {
@@ -3511,6 +3535,50 @@
                 color: white;
                 cursor: default;
             }
+
+            .news-content-section .container .el-pagination button,.news-content-section .container .el-pagination ul li{
+                height: 33px;
+                line-height: 33px;
+                background-color: #fff;
+                border: 1px solid #C5C5C5;
+                font-size: 12px;
+                font-weight: bold;
+                padding: 0px 12px;
+            }
+
+            .news-content-section .container .el-pagination ul li{
+                font-size: 13px;
+            }
+
+            @media (max-width: 991px) {
+                .news-content-section .container .el-pagination{
+                    display: flex;
+                    width: 100%;
+                }
+                .news-content-section .container .page-des,.news-content-section .container .page-des2{
+                    display: none;
+                }
+                .news-content-section .container .el-pagination .el-pager{
+                    align-items: center;
+                    text-align: center;
+                    margin: 0 auto;
+                }
+                .news-content-section .container .el-pagination .btn-next{
+                    float: right;
+                }
+            }
+
+            @media (max-width: 768px) {
+                .news-content-section .container .el-pagination{
+                    width: 100%;
+                }
+                .news-content-section .container .el-pagination ul li{
+                    display: none;
+                }
+                .news-content-section .container .el-pagination .btn-next{
+                    float: right;
+                }
+            }
             
             @media (max-width: 768px) {
                 .news-content-section .menu-1 {
@@ -3525,19 +3593,19 @@
                 /* border-bottom: 1px solid #E6E6E6; */
                 margin-left: 0;
                 margin-right: 0;
-                padding: 25px;
+                /* padding: 25px; */
                 position: relative
             }
             
             .news-content-section .content li:before {
-                content: "";
+                /* content: ""; */
                 /* color: #2a2e78; */
-                margin-right: 10px;
+                /* margin-right: 10px; */
                 width: calc(100% - 30px);
                 height: 1px;
-                background: #E6E6E6;
-                position: absolute;
-                bottom: 0;
+                /* background: #E6E6E6; */
+                /* position: absolute; */
+                /* bottom: 0; */
             }
             
             .news-content-section .content li:hover {
@@ -3980,12 +4048,8 @@
                     width: 24.999999%;
                     margin-top: 2px;
                 }
-                .product-grid-section .grid-filter ul li:nth-child(4) {
+                .product-grid-section .grid-filter ul li:nth-child(6) {
                     padding-left: 10px;
-                    padding-right: 0;
-                }
-                .product-grid-section .grid-filter ul li:nth-child(5) {
-                    padding-left: 0;
                     padding-right: 10px;
                 }
                 .product-grid-section .grid-filter ul li:nth-child(7) {
@@ -3998,16 +4062,6 @@
                 .product-grid-section .grid-filter ul li {
                     width: 49.99999%;
                     margin-top: 2px;
-                    padding: 0;
-                }
-                .product-grid-section .grid-filter ul li:nth-child(3),
-                .product-grid-section .grid-filter ul li:nth-child(7) {
-                    padding-left: 0px;
-                    padding-right: 10px;
-                }
-                .product-grid-section .grid-filter ul li:nth-child(4) {
-                    padding-left: 0px;
-                    padding-right: 0;
                 }
             }
             
@@ -4036,7 +4090,8 @@
             
             .product-grid-section .grid-isotope .product-grid-box .product-img img {
                 height: 250px;
-                max-width: 250px;
+                /* max-width: 250px; */
+                padding: 0px 15px;
                 margin: 0 auto;
                 display: block;
             }
@@ -4051,6 +4106,7 @@
             }
             
             .product-grid-section .grid-isotope .product-grid-box .title span {
+                width: 100%;
                 color: #000;
                 font-size: 20px;
                 overflow: hidden;
@@ -4058,14 +4114,19 @@
                 white-space: nowrap;
                 font-weight: bold;
             }
-            
+
             .product-grid-section .grid-isotope .product-grid-box .title div {
-                color: #000;
-                font-size: 16px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
+            }
+            
+            .product-grid-section .grid-isotope .product-grid-box .title div span{
+                width: 100%;
+                color: #000;
+                font-size: 16px;
                 padding: 0 40px;
+                font-weight: 400;
             }
             
             .product-grid-section .grid-isotope .product-grid-box .product-link {
@@ -6113,7 +6174,7 @@
                 right: 2%;
                 font-size: 12px;
                 color: #646464;
-                bottom: 0;
+                bottom: 2px;
             }
             
             .page-des2 input {

assets/js/jquery.media.js

@@ -0,0 +1,511 @@
+/*
+ * jQuery Media Plugin for converting elements into rich media content.
+ *
+ * Examples and documentation at: http://malsup.com/jquery/media/
+ * Copyright (c) 2007-2010 M. Alsup
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * @author: M. Alsup
+ * @version: 0.99 (05-JUN-2013)
+ * @requires jQuery v1.1.2 or later
+ * $Id: jquery.media.js 2460 2007-07-23 02:53:15Z malsup $
+ *
+ * Supported Media Players:
+ *	- Flash
+ *	- Quicktime
+ *	- Real Player
+ *	- Silverlight
+ *	- Windows Media Player
+ *	- iframe
+ *
+ * Supported Media Formats:
+ *	 Any types supported by the above players, such as:
+ *	 Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp
+ *	 Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma
+ *	 Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml
+ *
+ * Thanks to Mark Hicken and Brent Pedersen for helping me debug this on the Mac!
+ * Thanks to Dan Rossi for numerous bug reports and code bits!
+ * Thanks to Skye Giordano for several great suggestions!
+ * Thanks to Richard Connamacher for excellent improvements to the non-IE behavior!
+ */
+/*global SWFObject alert Sys */
+/*jshint forin:false */
+;(function($) {
+"use strict";	
+
+var mode = document.documentMode || 0;
+var msie = /MSIE/.test(navigator.userAgent);
+var lameIE = msie && (/MSIE (6|7|8)\.0/.test(navigator.userAgent) || mode < 9);
+
+/**
+ * Chainable method for converting elements into rich media.
+ *
+ * @param options
+ * @param callback fn invoked for each matched element before conversion
+ * @param callback fn invoked for each matched element after conversion
+ */
+$.fn.media = function(options, f1, f2) {
+	if (options == 'undo') {
+		return this.each(function() {
+			var $this = $(this);
+			var html = $this.data('media.origHTML');
+			if (html)
+				$this.replaceWith(html);
+		});
+	}
+	
+	return this.each(function() {
+		if (typeof options == 'function') {
+			f2 = f1;
+			f1 = options;
+			options = {};
+		}
+		var o = getSettings(this, options);
+		// pre-conversion callback, passes original element and fully populated options
+		if (typeof f1 == 'function') f1(this, o);
+
+		var r = getTypesRegExp();
+		var m = r.exec(o.src.toLowerCase()) || [''];
+		var fn;
+
+		if (o.type)
+			m[0] = o.type;
+		else
+			m.shift();
+
+		for (var i=0; i < m.length; i++) {
+			fn = m[i].toLowerCase();
+			if (isDigit(fn[0])) fn = 'fn' + fn; // fns can't begin with numbers
+			if (!$.fn.media[fn])
+				continue;  // unrecognized media type
+			// normalize autoplay settings
+			var player = $.fn.media[fn+'_player'];
+			if (!o.params) o.params = {};
+			if (player) {
+				var num = player.autoplayAttr == 'autostart';
+				o.params[player.autoplayAttr || 'autoplay'] = num ? (o.autoplay ? 1 : 0) : o.autoplay ? true : false;
+			}
+			var $div = $.fn.media[fn](this, o);
+
+			$div.css('backgroundColor', o.bgColor).width(o.width);
+			
+			if (o.canUndo) {
+				var $temp = $('<div></div>').append(this);
+				$div.data('media.origHTML', $temp.html()); // store original markup
+			}
+			
+			// post-conversion callback, passes original element, new div element and fully populated options
+			if (typeof f2 == 'function') f2(this, $div[0], o, player.name);
+			break;
+		}
+	});
+};
+
+/**
+ * Non-chainable method for adding or changing file format / player mapping
+ * @name mapFormat
+ * @param String format File format extension (ie: mov, wav, mp3)
+ * @param String player Player name to use for the format (one of: flash, quicktime, realplayer, winmedia, silverlight or iframe
+ */
+$.fn.media.mapFormat = function(format, player) {
+	if (!format || !player || !$.fn.media.defaults.players[player]) return; // invalid
+	format = format.toLowerCase();
+	if (isDigit(format[0])) format = 'fn' + format;
+	$.fn.media[format] = $.fn.media[player];
+	$.fn.media[format+'_player'] = $.fn.media.defaults.players[player];
+};
+
+// global defautls; override as needed
+$.fn.media.defaults = {
+	standards:  true,       // use object tags only (no embeds for non-IE browsers)
+	canUndo:    true,       // tells plugin to store the original markup so it can be reverted via: $(sel).mediaUndo()
+	width:		400,
+	height:		400,
+	autoplay:	0,			// normalized cross-player setting
+	bgColor:	'#ffffff',	// background color
+	params:		{ wmode: 'transparent'},	// added to object element as param elements; added to embed element as attrs
+	attrs:		{},			// added to object and embed elements as attrs
+	flvKeyName: 'file',		// key used for object src param (thanks to Andrea Ercolino)
+	flashvars:	{},			// added to flash content as flashvars param/attr
+	flashVersion:	'7',	// required flash version
+	expressInstaller: null,	// src for express installer
+
+	// default flash video and mp3 player (@see: http://jeroenwijering.com/?item=Flash_Media_Player)
+	flvPlayer:	 'mediaplayer.swf',
+	mp3Player:	 'mediaplayer.swf',
+
+	// @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
+	silverlight: {
+		inplaceInstallPrompt: 'true', // display in-place install prompt?
+		isWindowless:		  'true', // windowless mode (false for wrapping markup)
+		framerate:			  '24',	  // maximum framerate
+		version:			  '0.9',  // Silverlight version
+		onError:			  null,	  // onError callback
+		onLoad:			      null,   // onLoad callback
+		initParams:			  null,	  // object init params
+		userContext:		  null	  // callback arg passed to the load callback
+	}
+};
+
+// Media Players; think twice before overriding
+$.fn.media.defaults.players = {
+	flash: {
+		name:		 'flash',
+		title:		 'Flash',
+		types:		 'flv,mp3,swf',
+		mimetype:	 'application/x-shockwave-flash',
+		pluginspage: 'http://www.adobe.com/go/getflashplayer',
+		ieAttrs: {
+			classid:  'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',
+			type:	  'application/x-oleobject',
+			codebase: 'http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=' + $.fn.media.defaults.flashVersion
+		}
+	},
+	quicktime: {
+		name:		 'quicktime',
+		title:		 'QuickTime',
+		mimetype:	 'video/quicktime',
+		pluginspage: 'http://www.apple.com/quicktime/download/',
+		types:		 'aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3gp',
+		ieAttrs: {
+			classid:  'clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B',
+			codebase: 'http://www.apple.com/qtactivex/qtplugin.cab'
+		}
+	},
+	realplayer: {
+		name:		  'real',
+		title:		  'RealPlayer',
+		types:		  'ra,ram,rm,rpm,rv,smi,smil',
+		mimetype:	  'audio/x-pn-realaudio-plugin',
+		pluginspage:  'http://www.real.com/player/',
+		autoplayAttr: 'autostart',
+		ieAttrs: {
+			classid: 'clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA'
+		}
+	},
+	winmedia: {
+		name:		  'winmedia',
+		title:		  'Windows Media',
+		types:		  'asx,asf,avi,wma,wmv',
+		mimetype:	  isFirefoxWMPPluginInstalled() ? 'application/x-ms-wmp' : 'application/x-mplayer2',
+		pluginspage:  'http://www.microsoft.com/Windows/MediaPlayer/',
+		autoplayAttr: 'autostart',
+		oUrl:		  'url',
+		ieAttrs: {
+			classid:  'clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6',
+			type:	  'application/x-oleobject'
+		}
+	},
+	// special cases
+	img: {
+		name:  'img',
+		title: 'Image',
+		types: 'gif,png,jpg'
+	},
+	iframe: {
+		name:  'iframe',
+		types: 'html,pdf'
+	},
+	silverlight: {
+		name:  'silverlight',
+		types: 'xaml'
+	}
+};
+
+//
+//	everything below here is private
+//
+
+
+// detection script for FF WMP plugin (http://www.therossman.org/experiments/wmp_play.html)
+// (hat tip to Mark Ross for this script)
+function isFirefoxWMPPluginInstalled() {
+	var plugs = navigator.plugins || [];
+	for (var i = 0; i < plugs.length; i++) {
+		var plugin = plugs[i];
+		if (plugin['filename'] == 'np-mswmp.dll')
+			return true;
+	}
+	return false;
+}
+
+var counter = 1;
+
+for (var player in $.fn.media.defaults.players) {
+	var types = $.fn.media.defaults.players[player].types;
+	$.each(types.split(','), function(i,o) {
+		if (isDigit(o[0])) o = 'fn' + o;
+		$.fn.media[o] = $.fn.media[player] = getGenerator(player);
+		$.fn.media[o+'_player'] = $.fn.media.defaults.players[player];
+	});
+}
+
+function getTypesRegExp() {
+	var types = '';
+	for (var player in $.fn.media.defaults.players) {
+		if (types.length) types += ',';
+		types += $.fn.media.defaults.players[player].types;
+	}
+	return new RegExp('\\.(' + types.replace(/,/ig,'|') + ')\\b');
+}
+
+function getGenerator(player) {
+	return function(el, options) {
+		return generate(el, options, player);
+	};
+}
+
+function isDigit(c) {
+	return '0123456789'.indexOf(c) > -1;
+}
+
+// flatten all possible options: global defaults, meta, option obj
+function getSettings(el, options) {
+	options = options || {};
+	var a, n;
+	var $el = $(el);
+	var cls = el.className || '';
+	// support metadata plugin (v1.0 and v2.0)
+	var meta = $.metadata ? $el.metadata() : $.meta ? $el.data() : {};
+	meta = meta || {};
+	var w = meta.width  || parseInt(((cls.match(/\bw:(\d+)/)||[])[1]||0),10) || parseInt(((cls.match(/\bwidth:(\d+)/)||[])[1]||0),10);
+	var h = meta.height || parseInt(((cls.match(/\bh:(\d+)/)||[])[1]||0),10) || parseInt(((cls.match(/\bheight:(\d+)/)||[])[1]||0),10);
+
+	if (w) meta.width = w;
+	if (h) meta.height = h;
+	if (cls) meta.cls = cls;
+	
+	// crank html5 style data attributes
+	var dataName = 'data-';
+    for (var i=0; i < el.attributes.length; i++) {
+        a = el.attributes[i], n = $.trim(a.name);
+        var index = n.indexOf(dataName);
+        if (index === 0) {
+			n = n.substring(dataName.length);
+			meta[n] = a.value;
+        }
+    }
+
+	a = $.fn.media.defaults;
+	var b = options;
+	var c = meta;
+
+	var p = { params: { bgColor: options.bgColor || $.fn.media.defaults.bgColor } };
+	var opts = $.extend({}, a, b, c);
+	$.each(['attrs','params','flashvars','silverlight'], function(i,o) {
+		opts[o] = $.extend({}, p[o] || {}, a[o] || {}, b[o] || {}, c[o] || {});
+	});
+
+	if (typeof opts.caption == 'undefined') opts.caption = $el.text();
+
+	// make sure we have a source!
+	opts.src = opts.src || $el.attr('href') || $el.attr('src') || 'unknown';
+	return opts;
+}
+
+//
+//	Flash Player
+//
+
+// generate flash using SWFObject library if possible
+$.fn.media.swf = function(el, opts) {
+	var f, p;
+	if (!window.SWFObject && !window.swfobject) {
+		// roll our own
+		if (opts.flashvars) {
+			var a = [];
+			for (f in opts.flashvars)
+				a.push(f + '=' + opts.flashvars[f]);
+			if (!opts.params) opts.params = {};
+			opts.params.flashvars = a.join('&');
+		}
+		return generate(el, opts, 'flash');
+	}
+
+	var id = el.id ? (' id="'+el.id+'"') : '';
+	var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+	var $div = $('<div' + id + cls + '>');
+
+	// swfobject v2+
+	if (window.swfobject) {
+		$(el).after($div).appendTo($div);
+		if (!el.id) el.id = 'movie_player_' + counter++;
+
+		// replace el with swfobject content
+		window.swfobject.embedSWF(opts.src, el.id, opts.width, opts.height, opts.flashVersion,
+			opts.expressInstaller, opts.flashvars, opts.params, opts.attrs);
+	}
+	// swfobject < v2
+	else {
+		$(el).after($div).remove();
+		var so = new SWFObject(opts.src, 'movie_player_' + counter++, opts.width, opts.height, opts.flashVersion, opts.bgColor);
+		if (opts.expressInstaller) so.useExpressInstall(opts.expressInstaller);
+
+		for (p in opts.params)
+			if (p != 'bgColor') so.addParam(p, opts.params[p]);
+		for (f in opts.flashvars)
+			so.addVariable(f, opts.flashvars[f]);
+		so.write($div[0]);
+	}
+
+	if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
+	return $div;
+};
+
+// map flv and mp3 files to the swf player by default
+$.fn.media.flv = $.fn.media.mp3 = function(el, opts) {
+	var src = opts.src;
+	var player = /\.mp3\b/i.test(src) ? opts.mp3Player : opts.flvPlayer;
+	var key = opts.flvKeyName;
+	src = encodeURIComponent(src);
+	opts.src = player;
+	opts.src = opts.src + '?'+key+'=' + (src);
+	var srcObj = {};
+	srcObj[key] = src;
+	opts.flashvars = $.extend({}, srcObj, opts.flashvars );
+	return $.fn.media.swf(el, opts);
+};
+
+//
+//	Silverlight
+//
+$.fn.media.xaml = function(el, opts) {
+	if (!window.Sys || !window.Sys.Silverlight) {
+		if ($.fn.media.xaml.warning) return;
+		$.fn.media.xaml.warning = 1;
+		alert('You must include the Silverlight.js script.');
+		return;
+	}
+
+	var props = {
+		width: opts.width,
+		height: opts.height,
+		background: opts.bgColor,
+		inplaceInstallPrompt: opts.silverlight.inplaceInstallPrompt,
+		isWindowless: opts.silverlight.isWindowless,
+		framerate: opts.silverlight.framerate,
+		version: opts.silverlight.version
+	};
+	var events = {
+		onError: opts.silverlight.onError,
+		onLoad: opts.silverlight.onLoad
+	};
+
+	var id1 = el.id ? (' id="'+el.id+'"') : '';
+	var id2 = opts.id || 'AG' + counter++;
+	// convert element to div
+	var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+	var $div = $('<div' + id1 + cls + '>');
+	$(el).after($div).remove();
+
+	Sys.Silverlight.createObjectEx({
+		source: opts.src,
+		initParams: opts.silverlight.initParams,
+		userContext: opts.silverlight.userContext,
+		id: id2,
+		parentElement: $div[0],
+		properties: props,
+		events: events
+	});
+
+	if (opts.caption) $('<div>').appendTo($div).html(opts.caption);
+	return $div;
+};
+
+//
+// generate object/embed markup
+//
+function generate(el, opts, player) {
+	var $el = $(el);
+	var o = $.fn.media.defaults.players[player];
+	var a, key, v;
+
+	if (player == 'iframe') {
+		o = $('<iframe' + ' width="' + opts.width + '" height="' + opts.height + '" >');
+		o.attr('src', opts.src);
+		o.css('backgroundColor', o.bgColor);
+	}
+	else if (player == 'img') {
+		o = $('<img>');
+		o.attr('src', opts.src);
+		if (opts.width)
+			o.attr('width', opts.width);
+		if (opts.height)
+			o.attr('height', opts.height);
+		o.css('backgroundColor', o.bgColor);
+	}
+	else if (lameIE) {
+		a = ['<object width="' + opts.width + '" height="' + opts.height + '" '];
+		for (key in opts.attrs)
+			a.push(key + '="'+opts.attrs[key]+'" ');
+		for (key in o.ieAttrs || {}) {
+			v = o.ieAttrs[key];
+			if (key == 'codebase' && window.location.protocol == 'https:')
+				v = v.replace('http','https');
+			a.push(key + '="'+v+'" ');
+		}
+		a.push('></ob'+'ject'+'>');
+		var p = ['<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">'];
+		for (key in opts.params)
+			p.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
+		o = document.createElement(a.join(''));
+		for (var i=0; i < p.length; i++)
+			o.appendChild(document.createElement(p[i]));
+	}
+	else if (opts.standards) {
+		// Rewritten to be standards compliant by Richard Connamacher
+		a = ['<object type="' + o.mimetype +'" width="' + opts.width + '" height="' + opts.height +'"'];
+		if (opts.src) a.push(' data="' + opts.src + '" ');
+		if (msie) {
+			for (key in o.ieAttrs || {}) {
+				v = o.ieAttrs[key];
+				if (key == 'codebase' && window.location.protocol == 'https:')
+					v = v.replace('http','https');
+				a.push(key + '="'+v+'" ');
+			}
+		}
+		a.push('>');
+		a.push('<param name="' + (o.oUrl || 'src') +'" value="' + opts.src + '">');
+		for (key in opts.params) {
+			if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
+				continue;
+			a.push('<param name="'+ key +'" value="' + opts.params[key] + '">');
+		}
+		// Alternate HTML
+		a.push('<div><p><strong>'+o.title+' Required</strong></p><p>'+o.title+' is required to view this media. <a href="'+o.pluginspage+'">Download Here</a>.</p></div>');
+		a.push('</ob'+'ject'+'>');
+	}
+	 else {
+	        a = ['<embed width="' + opts.width + '" height="' + opts.height + '" style="display:block"'];
+	        if (opts.src) a.push(' src="' + opts.src + '" ');
+	        for (key in opts.attrs)
+	            a.push(key + '="'+opts.attrs[key]+'" ');
+	        for (key in o.eAttrs || {})
+	            a.push(key + '="'+o.eAttrs[key]+'" ');
+	        for (key in opts.params) {
+	            if (key == 'wmode' && player != 'flash') // FF3/Quicktime borks on wmode
+					continue;
+	            a.push(key + '="'+opts.params[key]+'" ');
+	        }
+	        a.push('></em'+'bed'+'>');
+	    }	
+	// convert element to div
+	var id = el.id ? (' id="'+el.id+'"') : '';
+	var cls = opts.cls ? (' class="' + opts.cls + '"') : '';
+	var $div = $('<div' + id + cls + '>');
+	$el.after($div).remove();
+	if (lameIE || player == 'iframe' || player == 'img')
+		$div.append(o);
+	else
+		$div.html(a.join(''));
+	
+	if (opts.caption) 
+		$('<div>').appendTo($div).html(opts.caption);
+	return $div;
+}
+
+
+})(jQuery);

footer.html

@@ -57,7 +57,7 @@
                     <div class="widget nav-widget d-flex justify-content-center ">
                         <div>
                             <h5 class="widget-title ">
-                                <a href="../../news">新闻动态</a>
+                                <a href="../news/index.html">新闻动态</a>
                             </h5>
                         </div>
                     </div>

index.html

@@ -78,14 +78,14 @@
                                         <a href="./technology/index.html">技术支撑</a>
                                     </li>
                                     <li>
-                                        <a href="../news">新闻动态</a>
+                                        <a href="./news/index.html">新闻动态</a>
                                         <!-- <ul class="submenu">
                                             <li><a href="./news">公司新闻</a></li>
                                             <li><a href="./news/trade/index.html">行业动态</a></li>
                                         </ul> -->
                                     </li>
                                     <li>
-                                        <a href="./about">关于我们</a>
+                                        <a href="./about/index.html">关于我们</a>
                                     </li>
                                 </ul>
                             </div>
@@ -99,171 +99,114 @@
         </header>
         <!--====== HEADER END ======-->
 
-        <!--====== BANNER SECTION START ======-->
-        <section class="banner-section">
-            <div class="shutter">
-                <img src="assets/img/banner/11.jpg" alt="">
-                <div class="shutter-img">
-                    <a href="#">
-                        <div class="animate-img pc" style="background-image:url()">
-                            <img src="assets/img/banner/11.jpg" alt="">
-                        </div>
-                        <div class="animate-img mobile" style="background-image:url()">
-                            <img src="assets/img/banner/11.jpg" alt="">
-                        </div>
-                    </a>
-                    <a href="#">
-                        <div class="animate-img pc" style="background-image:url(assets/img/banner/12.jpg)"></div>
-                        <div class="animate-img mobile" style="background-image:url(assets/img/banner/12.jpg)"></div>
-                    </a>
-                    <a href="#">
-                        <div class="animate-img pc" style="background-image:url(assets/img/banner/13.jpg)"></div>
-                        <div class="animate-img mobile" style="background-image:url(assets/img/banner/13.jpg)"></div>
-                    </a>
-                    <a href="#">
-                        <div class="animate-img pc" style="background-image:url(assets/img/banner/14.jpg)"></div>
-                        <div class="animate-img mobile" style="background-image:url(assets/img/banner/14.jpg)"></div>
-                    </a>
-                </div>
-                <ul class="shutter-btn">
-                    <li class="prev"></li>
-                    <li class="next"></li>
-                </ul>
-                <div id="videoDiv">
-                    <!-- <button id="videoBtn">点击观看视频</button> -->
+
+        <section v-for="(list,ind) in homeList">
+            <!-- 首页轮播 -->
+            <!--====== BANNER SECTION START ======-->
+            <div class="banner-section">
+                <div id="shutter" class="shutter" v-if="list.title === '幻灯片'">
+                    <img :src="homeList[0].content[0].picture" alt="">
+                    <div class="shutter-img">
+                        <a href="#" v-for="con in homeList[0].content">
+                            <div class="animate-img pc">
+                                <img :src="con.picture" alt="">
+                            </div>
+                            <div class="animate-img mobile">
+                                <img :src="con.picture" alt="">
+                            </div>
+                        </a>
+                    </div>
+                    <ul class="shutter-btn">
+                        <li class="prev"></li>
+                        <li class="next"></li>
+                    </ul>
+                    <div id="videoDiv">
+                        <button id="videoBtn">点击观看视频</button>
+                    </div>
                 </div>
             </div>
-        </section>
-        <!--====== BANNER SECTION END ======-->
-
-        <!--====== WHYUS SECTION START ======-->
-        <section class="whyUs-section pt-90 pb-80">
-            <div class="container">
-                <div class="section-title text-center both-border pb-90">
-                    <span class="title-tag">物联网行业垂直应用</span>
-                    <div>
-                        永天科技以传感器数据采集、边缘计算、GIS、数字孪生、AI算法库等独具特色的物联网领域技术，研发、搭建了一系列专业的楼宇管理产品簇，可实现不同业务的独立、特色管理。
+            <!--====== BANNER SECTION END ======-->
+
+            <!--====== WHYUS SECTION START ======-->
+            <div class="whyUs-section pt-80 pb-80" v-if="list.title === '物联网行业垂直应用'">
+                <div class="container">
+                    <div class="section-title text-center both-border pb-90">
+                        <span class="title-tag">{{list.title}}</span>
+                        <div v-for="one in list.content_one">
+                            {{one.content}}
+                        </div>
                     </div>
-                </div>
-                <div class="row align-items-center justify-content-center">
-                    <div class="col-md-12">
-                        <div class="row" id="hexGrid">
-                            <div class="col-md-4 offset-2 col-sm-6">
-                                <!-- <a class="hexIn" href="#"> -->
-                                <img src="assets/img/slices/slices1.png" alt="" />
-                                <!-- </a> -->
-                            </div>
-                            <div class="col-md-4 col-sm-6">
-                                <!-- <a class="hexIn" href="#"> -->
-                                <img src="assets/img/slices/slices2.png" alt="" />
-                                <!-- </a> -->
-                            </div>
-                            <div class="hex hex3 col-md-4 col-sm-6">
-                                <!-- <a class="hexIn" href="#"> -->
-                                <img src="assets/img/slices/slices3.png" alt="" />
-                                <!-- </a> -->
-                            </div>
-                            <div class="hex col-md-4 col-sm-6">
-                                <!-- <a class="hexIn" href="#"> -->
-                                <img src="assets/img/slices/slices4.png" alt="" />
-                                <!-- </a> -->
-                            </div>
-                            <div class="hex col-md-4 col-sm-6">
-                                <!-- <a class="hexIn" href="#"> -->
-                                <img src="assets/img/slices/slices5.png" alt="" />
-                                <!-- </a> -->
+                    <div class="row align-items-center justify-content-center">
+                        <div class="col-md-12">
+                            <div class="row" id="hexGrid">
+                                <div :class="
+                                indx == 0 ? 'col-md-4 offset-2 col-sm-6' 
+                                : indx == 1 ? 'col-md-4 col-sm-6' 
+                                : indx == 2 ? 'hex hex3 col-md-4 col-sm-6' 
+                                : indx >= 3 ? 'hex col-md-4 col-sm-6' 
+                                : '' " v-for="(con,indx) in list.content">
+                                    <!-- <a class="hexIn" href="#"> -->
+                                    <img :src="con.picture" alt="" />
+                                    <!-- </a> -->
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-
-        </section>
-        <!--====== WHYUS SECTION END ======-->
-
-        <!--====== ABOUT SECTION START ======-->
-        <section class="about-section pt-80 pb-80 ">
-            <div class="container ">
-                <div class="section-title text-center both-border pb-80">
-                    <span class="title-tag ">数字化管理平台</span>
-                    <div>永天科技以智慧化楼宇服务为主要场景目标，打造轻量级的数字化管理中台产品，有效解决“信息孤岛”难题，同时发挥强大的应用扩展能力，助力用户实现楼宇空间全域管理。</div>
-                </div>
-                <div class="row align-items-center justify-content-center about-background">
-                    <div class="imgCenter col-md-6 about-img-box">
-                        <img src="assets/img/home/1.png" alt=" ">
+            <!--====== WHYUS SECTION END ======-->
+
+            <!--====== ABOUT SECTION START ======-->
+            <div class="about-section pt-80 pb-80 " v-if="list.title === '数字化管理平台'">
+                <div class="container ">
+                    <div class="section-title text-center both-border pb-80">
+                        <span class="title-tag ">{{list.title}}</span>
+                        <div v-for="one in list.content_one">
+                            {{one.content}}
+                        </div>
                     </div>
-                    <div class="col-md-6 about-text-box">
-                        <div class="">
-                            <span class="title-tag">智慧楼宇综合运营平台系统</span>
-                            <div>
-                                <br><br>
-                                <span style="margin-right: 35px;"></span>
-                                数字化楼宇服务中台，围绕着楼宇内各个传统服务系统信息的互联互动，通过对楼宇出入管理、停车、消费、安防、消防、设备资产、电力能耗、暖通服务、三维建筑模型等多个系统的数据对接，实现楼宇内的传统服务及管理的数字化赋能，从而构建一整套相对完整的智慧楼宇数字化服务产品系列和数字化楼宇管理平台。
-                                <br /><span
-                                    style="margin-right: 35px;"></span>在针对不同用户的需求方面，数字化楼宇平台通过“N+1”的方式，不断融合、拓展具有用户特点的系统需求，实现定制化的各类场景服务。
+                    <div class="row align-items-center justify-content-center about-background"
+                        v-for="con in list.content">
+                        <div class="imgCenter col-md-6 about-img-box" v-if="con.picture != null && con.picture != ''">
+                            <img :src="con.picture" alt=" ">
+                        </div>
+                        <div class="col-md-6 about-text-box">
+                            <div class="">
+                                <span class="title-tag" v-if="con.title != null && con.title != ''">{{con.title}}</span>
+                                <div>
+                                    <br><br>
+                                    <span v-for="cont in con.content">
+                                        <span style="margin-right: 35px;"></span>{{cont.content}}
+                                    </span>
+                                </div>
                             </div>
                         </div>
                     </div>
-
                 </div>
             </div>
+            <!--====== ABOUT SECTION END ======-->
 
-        </section>
-        <!--====== ABOUT SECTION END ======-->
-
-        <!--====== WHYUS SECTION START ======-->
-        <section class="whyUs-section pt-90 pb-80">
-            <div class="container">
-                <div class="section-title text-center both-border pb-90">
-                    <span class="title-tag">核心优势</span>
-                </div>
-                <div class="row align-items-center justify-content-center">
-                    <div class="col-md-12">
-                        <div class="row ys-text-align">
-                            <div class="maxWidth col-md-4 col-sm-6">
-                                <div class="about-img-box">
-                                    <img src="assets/img/home/2.png" alt="">
-                                    <div>
-                                        <span class="span1 title-tag">系统性能强悍</span>
-                                    </div>
-                                    <div>
-                                        云边融合系统，具有强大的边缘推理能力；
-                                        <br>
-                                        支持大规模分布式部署，满足设备高并发运行；
-                                        <br>
-                                        实时计算引擎，百亿数据秒级响应；
-                                        <br>
-                                        跨平台可伸缩，适配各种类型和规模的基础设施。
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="maxWidth col-md-4 col-sm-6">
-                                <div class="about-img-box">
-                                    <img src="assets/img/home/3.png" alt=" ">
-                                    <div>
-                                        <span class="span2 title-tag">平台生态开放</span>
-                                    </div>
-                                    <div>
-                                        全平台开发服务，多级开放能力，易于系统集成；
-                                        <br>
-                                        采用模块化和插件化设计，方便功能二次开发和与第三方平台对接；
-                                        <br>
-                                        充分利用中间件技术，实现各类子系统数据及时获取、有效共享。
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="maxWidth col-md-4 col-sm-6">
-                                <div class="about-img-box">
-                                    <img src="assets/img/home/4.png" alt=" ">
-                                    <div>
-                                        <span class="span3 title-tag">应用场景丰富</span>
-                                    </div>
-                                    <div>
-                                        案例涵盖市政、社区、园区、商区、学校、医院、文博等多种场景；
-                                        <br>
-                                        目前已服务于多个大型500强企业及上市公司；
-                                        <br>
-                                        服务 5000+ 客户、近 10万+ 用户、连接 500万+ 设备。
+            <!--====== WHYUS SECTION START ======-->
+            <div class="whyUs-section pt-80 pb-80" v-if="list.title === '核心优势'">
+                <div class="container">
+                    <div class="section-title text-center both-border pb-90">
+                        <span class="title-tag">{{list.title}}</span>
+                    </div>
+                    <div class="row align-items-center justify-content-center">
+                        <div class="col-md-12">
+                            <div class="row ys-text-align">
+                                <div class="maxWidth col-md-4 col-sm-6" v-for="(con,ind) in list.content">
+                                    <div class="about-img-box">
+                                        <img :src="con.picture" alt="">
+                                        <div>
+                                            <span :class="
+                                            ind == 0 ? 'span1 title-tag'
+                                            :ind == 1 ? 'span2 title-tag'
+                                            :ind == 2 ? 'span3 title-tag':''">{{con.title}}</span>
+                                        </div>
+                                        <div>
+                                            <span v-for="cont in con.content">{{cont.content}}<br></span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -271,123 +214,52 @@
                     </div>
                 </div>
             </div>
-        </section>
-        <!--====== WHYUS SECTION END ======-->
+            <!--====== WHYUS SECTION END ======-->
 
-        <!--====== Trademark SECTION START ======-->
-        <section class="about-section pt-80 pb-80 ">
-            <div class="container ">
-                <div class="section-title text-center both-border pb-80">
-                    <span class="title-tag ">合作伙伴</span>
-                </div>
-                <div class="row align-items-center justify-content-center trademark-background">
-                    <div class="col-md-12">
-                        <div class="row">
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/1.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/2.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/3.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/4.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/5.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/6.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/7.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/8.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/9.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/10.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/11.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/12.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/13.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/14.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/15.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/16.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/17.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/18.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/19.png" alt="">
-                            </div>
-                            <div class="col-md-2">
-                                <img src="assets/img/home/trademark/20.png" alt="">
+
+            <!--====== Trademark SECTION START ======-->
+            <div class="about-section pt-80 pb-80 " v-if="list.title === '合作伙伴'">
+                <div class="container ">
+                    <div class="section-title text-center both-border pb-80">
+                        <span class="title-tag ">{{list.title}}</span>
+                    </div>
+                    <div class="row align-items-center justify-content-center trademark-background">
+                        <div class="col-md-12">
+                            <div class="row">
+                                <div class="col-md-2" v-for="con in list.content">
+                                    <img :src="con.picture" alt="">
+                                </div>
                             </div>
-                        </div>
 
+                        </div>
                     </div>
                 </div>
-            </div>
 
-        </section>
-        <!--====== Trademark SECTION END ======-->
-
-        <!--====== NEWS SECTION START ======-->
-        <section class="news-section pt-80 pb-80">
-            <div class="container">
-                <div class="section-title text-center both-border">
-                    <span class="title-tag ">友情链接</span>
-                    <br><br><br>
-                </div>
-                <div class="row">
-                    <div class="newsBack col-md-12">
-                        <div class="row">
-                            <div class="newsImg col-md-3">
-                                <a href="https://www.119.gov.cn/" target="_blank">
-                                    <img src="assets/img/home/trademark/21.png" alt="">
-                                </a>
-                            </div>
-                            <div class="newsImg col-md-3">
-                                <a href="http://www.sgcc.com.cn/" target="_blank">
-                                    <img src="assets/img/home/trademark/22.png" alt="">
-                                </a>
-                            </div>
-                            <div class="newsImg col-md-3">
-                                <a href="http://www.sh-anfang.org/" target="_blank">
-                                    <img src="assets/img/home/trademark/23.png" alt="">
-                                </a>
-                            </div>
-                            <div class="newsImg col-md-3">
-                                <a href="http://www.dronesera.org.cn/#/homePage" target="_blank">
-                                    <img src="assets/img/home/trademark/24.png" alt="">
-                                </a>
+            </div>
+            <!--====== Trademark SECTION END ======-->
+
+            <!--====== NEWS SECTION START ======-->
+            <div class="news-section pt-80 pb-80" v-if="list.title === '友情链接'">
+                <div class="container">
+                    <div class="section-title text-center both-border">
+                        <span class="title-tag ">{{list.title}}</span>
+                        <br><br><br>
+                    </div>
+                    <div class="row">
+                        <div class="newsBack col-md-12">
+                            <div class="row">
+                                <div class="newsImg col-md-3" v-for="con in list.content">
+                                    <a :href="con.catenate" target="_blank">
+                                        <img :src="con.picture" alt="">
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+            <!--====== NEWS SECTION END ======-->
         </section>
-        <!--====== NEWS SECTION END ======-->
 
         <!--====== FOOTER PART START ======-->
         <div id="footer"></div>
@@ -420,29 +292,30 @@
 
     <script>
         //百叶窗轮播
-        $(function () {
-            $('.shutter').shutter({
-                // shutterW: 1000, // 容器宽度
-                // shutterH: 358, // 容器高度
-                isAutoPlay: true, // 是否自动播放
-                playInterval: 3000, // 自动播放时间
-                curDisplay: 3, // 当前显示页
-                fullPage: false // 是否全屏展示
-
+        setTimeout(() => {
+            $(function () {
+                $('#shutter').shutter({
+                    // shutterW: 1000, // 容器宽度
+                    // shutterH: 358, // 容器高度
+                    isAutoPlay: true, // 是否自动播放
+                    playInterval: 3000, // 自动播放时间
+                    curDisplay: 3, // 当前显示页
+                    fullPage: false // 是否全屏展示
+
+                });
             });
-        });
+        }, 1000)
+
 
         $(function () {
             $('#footer').load("./footer.html");
         })
 
-        var news_list = [];
         var app = new Vue({
             el: '#app',
             data: {
-                news: [],
-                msg: '0',
                 screenWidth: 0,
+                homeList: [],
             },
             computed: {
 
@@ -450,32 +323,22 @@
             mounted: function () {
 
                 this.screenWidth = document.body.clientWidth
+                console.log(this.screenWidth)
                 window.onresize = () => {
                     return (() => {
                         this.screenWidth = document.body.clientWidth
                     })()
                 }
 
-                var self = this;
+                var _this = this;
                 console.log(window.FQDN)
                 jQuery.ajax({
-                    type: 'GET',
+                    type: 'POST',
                     dataType: 'json',
-                    url: window.FQDN + 'agw/journalism_display',
-                    data: {
-                        type: '1'
-                    }
+                    url: window.FQDN + '/Index/index',
                 }).done(function (res) {
-                    if (!res.msg) {
-                        return;
-                    }
-                    res.data.forEach(function (item) {
-                        // console.log(item)
-                        news_list.push(item);
-                        if (self.news.length < 4) {
-                            self.news.push(item);
-                        }
-                    });
+                    console.log(res)
+                    _this.homeList = res
 
                 }).fail(function (err) { });
             },
@@ -484,24 +347,24 @@
             },
             watch: {
                 screenWidth(val) {
-                    // var videoBtn = document.getElementById('videoBtn')
-                    // var widthNum = val / 8;
-                    // var heightNum = val / 32;
-                    // var fontSizeNum = val / 96;
-                    // var bottomNum = val / 47;
-
-                    // if (widthNum >= 150) {
-                    //     videoBtn.style.left = (val / 2) - (widthNum / 2) + "px"
-                    //     videoBtn.style.width = widthNum + "px"
-                    // } else {
-                    //     videoBtn.style.left = (val / 2) - (150 / 2) + "px"
-                    //     videoBtn.style.width = "150px"
-                    // }
-
-                    // heightNum >= 30 ? videoBtn.style.height = heightNum + "px" : videoBtn.style.height = "30px";//按钮高度自适应
-                    // fontSizeNum >= 13 ? videoBtn.style.fontSize = fontSizeNum + "px" : videoBtn.style.fontSize = "13px";//按钮中字体自适应
-
-                    // videoBtn.style.display = "inline"
+                    var videoBtn = document.getElementById('videoBtn')
+                    var widthNum = val / 8;
+                    var heightNum = val / 32;
+                    var fontSizeNum = val / 96;
+                    var bottomNum = val / 47;
+
+                    if (widthNum >= 150) {
+                        videoBtn.style.left = (val / 2) - (widthNum / 2) + "px"
+                        videoBtn.style.width = widthNum + "px"
+                    } else {
+                        videoBtn.style.left = (val / 2) - (150 / 2) + "px"
+                        videoBtn.style.width = "150px"
+                    }
+
+                    heightNum >= 30 ? videoBtn.style.height = heightNum + "px" : videoBtn.style.height = "30px";//按钮高度自适应
+                    fontSizeNum >= 13 ? videoBtn.style.fontSize = fontSizeNum + "px" : videoBtn.style.fontSize = "13px";//按钮中字体自适应
+
+                    videoBtn.style.display = "inline"
                 }
             },
         });

news/index.html

@@ -18,21 +18,25 @@
     <link rel="stylesheet" href="../assets/css/style.css" />
     <!--====== Animation css =======-->
     <link rel="stylesheet" href="../assets/css/animation.css" />
+    <!--====== element css ====== -->
+    <link rel="stylesheet" href="../assets/css/element.css">
     <!--====== home css ====== -->
     <link rel="stylesheet" href="../assets/css/home.css" />
+
 </head>
 
 <body>
-    <!--[if lte IE 9]>
-	<p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
-  <![endif]-->
+    <div id="app">
+        <!--[if lte IE 9]>
+            <p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
+        <![endif]-->
 
-    <!--====== HEADER START ======-->
-    <header class="header-absolute sticky-header">
-        <div class="custom-container-one">
-            <div class="header-top-area">
-                <div class="container align-items-center">
-                    <!-- <div class="col-md-6 col-sm-7">
+        <!--====== HEADER START ======-->
+        <header class="header-absolute sticky-header">
+            <div class="custom-container-one">
+                <div class="header-top-area">
+                    <div class="container align-items-center">
+                        <!-- <div class="col-md-6 col-sm-7">
                         <ul class="contact-list">
                             <li>
                                 <a href="javascipt:void();">www.chinausky.com</a>
@@ -42,67 +46,65 @@
                             </li>
                         </ul>
                     </div> -->
+                    </div>
                 </div>
-            </div>
-            <div class="mainmenu-area container">
-                <div class="d-flex align-items-center justify-content-between">
-                    <nav class="main-menu">
-                        <div class="logo">
-                            <a href="../index.html"><img src="../assets/img/logo.png" alt="uskylogo"></a>
-                        </div>
-                        <div class="menu-items">
-                            <ul>
-                                <li>
-                                    <a href="../index.html">首页</a>
-                                </li>
-                                <li>
-                                    <a href="../solution/index.html?solution_type=1">解决方案</a>
-                                    <ul class="submenu">
-                                        <li><a href="../solution/index.html?solution_type=1">智慧安防</a></li>
-                                        <li><a href="../solution/index.html?solution_type=2">智慧消防</a></li>
-                                        <li><a href="../solution/index.html?solution_type=3">智慧建筑能源管理</a></li>
-                                        <li><a href="../solution/index.html?solution_type=4">智慧电力综合管理</a></li>
-                                        <li><a href="../solution/index.html?solution_type=5">智慧园区无人机综合管理</a></li>
-                                        <li><a href="../solution/index.html?solution_type=6">智慧楼宇综合运营</a></li>
-                                    </ul>
-                                </li>
-                                <li>
-                                    <a href="../product/index.html">产品中心</a>
-                                </li>
-                                <li>
-                                    <a href="../technology/index.html">技术支撑</a>
-                                </li>
-                                <li class="active">
-                                    <a href="../news">新闻动态</a>
-                                    <!-- <ul class="submenu">
+                <div class="mainmenu-area container">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <nav class="main-menu">
+                            <div class="logo">
+                                <a href="../index.html"><img src="../assets/img/logo.png" alt="uskylogo"></a>
+                            </div>
+                            <div class="menu-items">
+                                <ul>
+                                    <li>
+                                        <a href="../index.html">首页</a>
+                                    </li>
+                                    <li>
+                                        <a href="../solution/index.html?solution_type=1">解决方案</a>
+                                        <ul class="submenu">
+                                            <li><a href="../solution/index.html?solution_type=1">智慧安防</a></li>
+                                            <li><a href="../solution/index.html?solution_type=2">智慧消防</a></li>
+                                            <li><a href="../solution/index.html?solution_type=3">智慧建筑能源管理</a></li>
+                                            <li><a href="../solution/index.html?solution_type=4">智慧电力综合管理</a></li>
+                                            <li><a href="../solution/index.html?solution_type=5">智慧园区无人机综合管理</a></li>
+                                            <li><a href="../solution/index.html?solution_type=6">智慧楼宇综合运营</a></li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a href="../product/index.html">产品中心</a>
+                                    </li>
+                                    <li>
+                                        <a href="../technology/index.html">技术支撑</a>
+                                    </li>
+                                    <li class="active">
+                                        <a href="../news/index.html">新闻动态</a>
+                                        <!-- <ul class="submenu">
                                         <li><a href="../news">公司新闻</a></li>
                                         <li><a href="../news/trade/index.html">行业动态</a></li>
                                     </ul> -->
-                                </li>
-                                <li>
-                                    <a href="../about">关于我们</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </nav>
+                                    </li>
+                                    <li>
+                                        <a href="../about/index.html">关于我们</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </nav>
+                    </div>
                 </div>
-            </div>
-            <div class="row">
-                <div class="col-12">
+                <div>
                     <div class="mobile-menu"></div>
                 </div>
             </div>
-        </div>
-    </header>
-    <!--====== HEADER END ======-->
+        </header>
+        <!--====== HEADER END ======-->
 
-    <!--====== NEWS BREADCRUMB START ======-->
-    <section class="common-bradcrumb-section">
-        <img src="../assets/img/news/news-banner.png" alt="">
-    </section>
-    <!--====== NEWS BREADCRUMB END ======-->
+        <!--====== NEWS BREADCRUMB START ======-->
+        <section class="common-bradcrumb-section">
+            <img src="../assets/img/news/news-banner.png" alt="">
+        </section>
+        <!--====== NEWS BREADCRUMB END ======-->
 
-    <!-- <section class="crumbs">
+        <!-- <section class="crumbs">
         <div class="container">
             <ul>
                 <li>首页 ></li>
@@ -111,11 +113,11 @@
         </div>
     </section> -->
 
-    <!--====== NEWS CONTENT START ======-->
-    <section class="news-content-section pt-70">
-        <div class="container">
-            <div class="row newBox">
-                <!-- <div class="col-lg-12 col-md-12 menu-1">
+        <!--====== NEWS CONTENT START ======-->
+        <section class="news-content-section pt-70">
+            <div class="container">
+                <div class="row newBox">
+                    <!-- <div class="col-lg-12 col-md-12 menu-1">
                     <ul>
                         <li class="active">
                             <a>公司新闻</a>
@@ -127,29 +129,30 @@
 
 
 
-                <div class="col-lg-12 col-md-12 content" id="app">
-                    <div v-if="!hasNews" class="pt-60 pb-60">
-                        <div class="loadEffect">
-                            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+                    <div class="col-lg-12 col-md-12 content" id="app">
+                        <div v-if="!hasNews" class="pt-60 pb-60">
+                            <div class="loadEffect">
+                                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+                            </div>
                         </div>
-                    </div>
 
 
 
 
-                    <ul v-if="!loading">
-                        <!-- 新闻列表主题start -->
-                        <div class="row">
-                            <div class="col-md-4 newItemOne" v-for="item in news" :key="item.id">
-                                <div class="oneInnerBox" @click="oneInnerBox(item.id)">
-                                    <div class="img" v-bind:style="{backgroundImage:'url('+item.img_title+')'}"></div>
-                                    <a class="line-two">{{item.title}}</a>
-                                    <span>{{item.time}}</span>
+                        <ul v-if="!loading">
+                            <!-- 新闻列表主题start -->
+                            <div class="row">
+                                <div class="col-md-4 newItemOne" v-for="item in news" :key="item.id">
+                                    <div class="oneInnerBox" @click="oneInnerBox(item.id)">
+                                        <div class="img" v-bind:style="{backgroundImage:'url('+item.img_title+')'}">
+                                        </div>
+                                        <a class="line-two">{{item.title}}</a>
+                                        <span>{{item.time}}</span>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <!-- 新闻列表主题end -->
-                        <!-- <li class="row" v-for="item in news" :key="item.id">
+                            <!-- 新闻列表主题end -->
+                            <!-- <li class="row" v-for="item in news" :key="item.id">
                             <div class="col-lg-4 img" v-bind:style="{backgroundImage:'url('+item.img_title+')'}">
                             </div>
                             <div class="col-lg-8 d-flex flex-column">
@@ -167,41 +170,50 @@
                                 </div>
                             </div>
                         </li> -->
-                    </ul>
+                        </ul>
 
 
-                    <div v-if="!loading" class="page mt-30 mb-30">
-                        <div class="d-flex justify-content-center align-items-end cannot_selected"
-                            style="position:relative">
-                            <div class="page-des align-items-start cannot_selected">共<span> {{
-                                    totalPageNum}}</span>页，共<span> {{ totalPageSzie}}</span>条信息</div>
 
-                            <a :class="[hasPageTop ? '' : 'disable']" class="previous" @click="toPrevious">上一页</a>
-                            <a v-if="needOmit" :class="[currentPageNum == 1 ? 'active' : '']"
-                                @click="switchPage(1)">1</a>
-                            <span v-if="hasLeftOmit">...</span>
-                            <a v-for="item in middlePageNums" :key="item"
-                                :class="[item == currentPageNum ? 'active': '']" @click="switchPage(item)">{{item}}</a>
-                            <span v-if="hasRightOmit">...</span>
-                            <a v-if="needOmit" :class="[currentPageNum == totalPageNum? 'active' : '']"
-                                @click="switchPage(totalPageNum)">{{totalPageNum}}</a>
-                            <a :class="[hasPageNext ? '' : 'disable']" @click="toNext" class="next">下一页</a>
 
-                            <div class="page-des2 align-items-end cannot_selected pc">前往第
-                                <input v-model="goPage" class="previous" @keyup.enter="enterPage" /> 页
-                            </div>
+                        <div v-if="!loading" class="page mt-30 mb-30">
+                            <div class="d-flex justify-content-center align-items-end cannot_selected"
+                                style="position:relative">
+                                <div class="page-des align-items-start cannot_selected">共<span> {{
+                                        totalPageNum}}</span>页，共<span> {{totalPageSzie}}</span>条信息</div>
+
+
+                                <el-pagination prev-text="上一页" next-text='下一页' :page-size="one_page_num"
+                                    :current-page="currentPageNum" background layout="prev, pager, next"
+                                    :total="totalPageSzie" @current-change="currentChange">
+                                </el-pagination>
+
+                                <!-- <a :class="[hasPageTop ? '' : 'disable']" class="previous" @click="toPrevious">上一页</a>
+                                <a v-if="needOmit" :class="[currentPageNum == 1 ? 'active' : '']"
+                                    @click="switchPage(1)">1</a>
+                                <span v-if="hasLeftOmit">...</span>
+                                <a v-for="item in middlePageNums" :key="item"
+                                    :class="[item == currentPageNum ? 'active': '']"
+                                    @click="switchPage(item)">{{item}}</a>
+                                <span v-if="hasRightOmit">...</span>
+                                <a v-if="needOmit" :class="[currentPageNum == totalPageNum? 'active' : '']"
+                                    @click="switchPage(totalPageNum)">{{totalPageNum}}</a>
+                                <a :class="[hasPageNext ? '' : 'disable']" @click="toNext" class="next">下一页</a> -->
 
+                                <div class="page-des2 align-items-end cannot_selected pc">前往第
+                                    <input v-model="goPage" class="previous" @keyup.enter="enterPage" /> 页
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </section>
-    <!--====== NEWS CONTENT END ======-->
+        </section>
+        <!--====== NEWS CONTENT END ======-->
 
-    <!--====== FOOTER PART START ======-->
-    <div id="footer"></div>
-    <!--====== FOOTER PART END ======-->
+        <!--====== FOOTER PART START ======-->
+        <div id="footer"></div>
+        <!--====== FOOTER PART END ======-->
+    </div>
     <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
     <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
     <!--====== Bootstrap js ======-->
@@ -216,139 +228,73 @@
     <script src="../assets/js/settinginfo.js"></script>
     <!--====== Vue js======-->
     <script src="../assets/js/vue.min.js"></script>
+    <script src="../assets/js/element/index.js"></script>
     <script>
         $(function () {
             $('#footer').load("../footer.html");
         })
         var news_list = [];
-        var one_page_num = 12;
         var app = new Vue({
             el: '#app',
             data: {
                 message: 'hello',
                 news: [],
+                goPage: 1,
+                one_page_num: 12,
                 currentPageNum: 1,
                 totalPageNum: 1,
                 totalPageSzie: 4,
-                middlePageNums: [2, 3, 4, 5, 6],
-                needOmit: true,
                 loading: true,
-                goPage: 1,
             },
             computed: {
                 hasNews: function () {
                     return this.news.length > 0;
                 },
-                hasLeftOmit: function () {
-                    return (this.currentPageNum >= 4 && this.needOmit);
-                },
-                hasRightOmit: function () {
-                    return ((this.middlePageNums[4] + 1) < this.totalPageNum && this.needOmit);
-                },
-                hasPageTop: function () {
-                    return this.currentPageNum > 1;
-                },
-                hasPageNext: function () {
-                    return this.currentPageNum < this.totalPageNum;
-                }
             },
             mounted: function () {
-                var self = this;
-                jQuery.ajax({
-                    type: 'POST',
-                    dataType: 'json',
-                    url: window.FQDN + 'agw/journalism_display',
-                    data: {
-                        type: '1'
-                    }
-                }).done(function (res) {
-                    if (!res.msg) {
-                        return;
-                    }
-
-                    res.data.forEach(function (item) {
-                        news_list.push(item);
-                        if (self.news.length < one_page_num) {
-                            self.news.push(item);
-                        }
-                    });
+                this.journalism_display_Ajax();
 
-                    self.totalPageNum = Math.ceil(news_list.length / one_page_num);
-                    self.totalPageSzie = news_list.length;
-                    if (self.totalPageNum < 8) {
-                        self.needOmit = false;
-                        self.middlePageNums = [];
-                        for (var i = 1; i <= self.totalPageNum; i++) {
-                            self.middlePageNums.push(i);
-                        }
-                    }
-                    self.loading = false;
-                }).fail(function (err) { });
             },
             methods: {
-                oneInnerBox:function(id){
-                    window.location="./read.html?id="+id
-                },
-                switchPage: function (page_num) {
-                    if (page_num == this.currentPageNum) {
-                        return;
-                    }
-
-                    var start_index = (page_num - 1) * one_page_num;
-                    var limit = start_index + (one_page_num - 1);
-                    var tmp_new = [];
-                    for (var i = start_index; i <= limit; i++) {
-                        if (i < news_list.length) {
-                            tmp_new.push(news_list[i]);
+                journalism_display_Ajax() {
+                    var _this = this;
+                    jQuery.ajax({
+                        type: 'POST',
+                        dataType: 'json',
+                        url: window.FQDN + 'agw/journalism_display',
+                        data: {
+                            type: '1',
+                            size: _this.one_page_num,
+                            page: _this.currentPageNum
                         }
-                    }
-                    this.news = tmp_new;
-
-                    if (!this.needOmit) {
-                        this.currentPageNum = page_num;
-                        return;
-                    }
-
-                    if (page_num >= 5 && (page_num + 2) < this.totalPageNum) {
-                        this.middlePageNums = [page_num - 2, page_num - 1, page_num, page_num + 1, page_num + 2];
-                    } else if (page_num < 5) {
-                        this.middlePageNums = [2, 3, 4, 5, 6];
-                    } else if ((page_num + 2) >= this.totalPageNum) {
-                        this.middlePageNums = [this.totalPageNum - 5, this.totalPageNum - 4, this.totalPageNum - 3, this.totalPageNum - 2, this.totalPageNum - 1];
-                    }
+                    }).done(function (res) {
+                        if (!res.msg) {
+                            return;
+                        }
+                        _this.news = res.data
+                        _this.totalPageSzie = res.count
+                        _this.totalPageNum = Math.ceil(res.count / res.size);
 
-                    this.currentPageNum = page_num;
+                        _this.loading = false;
+                    }).fail(function (err) { });
                 },
-                toPrevious: function () {
-                    if (this.currentPageNum == 1) {
-                        return;
-                    }
-                    this.switchPage(this.currentPageNum - 1);
+                oneInnerBox: function (id) {
+                    window.location = "./read.html?id=" + id
                 },
-
-                toNext: function () {
-                    if (this.currentPageNum == this.totalPageNum) {
-                        return;
-                    }
-                    this.switchPage(this.currentPageNum + 1);
-                },
-                enterPage: function () {
-                    if (this.goPage <= this.totalPageNum) {
-                        // this.currentPageNum = this.goPage
-                        // alert(this.currentPageNum)
-                        this.switchPage(this.goPage);
-
+                enterPage: function (res) {
+                    if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
+                        this.currentPageNum = this.goPage
+                        this.journalism_display_Ajax();
                     } else {
-                        alert('您输入的页码错误，请重新输入！')
+                        this.goPage = 1
+                        alert('输入页数有误！')
                     }
+                },
+                currentChange: function (res) {
+                    this.currentPageNum = res
+                    this.journalism_display_Ajax();
                 }
             },
-            watch: {
-                currentPageNum: function (val) {
-                    this.goPage = val
-                }
-            }
-
         });
     </script>
 </body>

news/read.html

@@ -74,24 +74,22 @@
                                         <a href="../technology/index.html">技术支撑</a>
                                     </li>
                                     <li class="active">
-                                        <a href="../news">新闻动态</a>
+                                        <a href="../news/index.html">新闻动态</a>
                                         <!-- <ul class="submenu">
                                             <li><a href="../news">公司新闻</a></li>
                                             <li><a href="../news/trade/index.html">行业动态</a></li>
                                         </ul> -->
                                     </li>
                                     <li>
-                                        <a href="../about">关于我们</a>
+                                        <a href="../about/index.html">关于我们</a>
                                     </li>
                                 </ul>
                             </div>
                         </nav>
                     </div>
                 </div>
-                <div class="row">
-                    <div class="col-12">
-                        <div class="mobile-menu"></div>
-                    </div>
+                <div>
+                    <div class="mobile-menu"></div>
                 </div>
             </div>
         </header>
@@ -149,11 +147,19 @@
 
                         <!--  -->
                         <div v-if="!loading" class="read-page d-flex justify-content-between">
-                            <a :class="[!hasPrevious ? 'disable' : '']" :href="[hasPrevious ? './read.html?id='+previousInfo.id : 'javascript: void();']" class="previous">上一篇{{previousInfo.title}}</a>
+                            <a :class="[!hasPrevious ? 'disable' : '']"
+                                :href="[hasPrevious ? './read.html?id='+previousInfo.id : 'javascript: void();']"
+                                class="previous">上一篇{{previousInfo.title}}</a>
                             <a href="./index.html">返回新闻列表</a>
-                            <a :class="[!hasNext ? 'disable' : '']" :href="[hasNext ? './read.html?id='+nextInfo.id : 'javascript: void();']" class="next">下一篇{{nextInfo.title}}</a>
-                            <a :class="[!hasPrevious ? 'disable' : '']" :href="[hasPrevious ? './read.html?id='+previousInfo.id : 'javascript: void();']" class="min-previous">上一篇</a>
-                            <a :class="[!hasNext ? 'disable' : '']" :href="[hasNext ? './read.html?id='+nextInfo.id : 'javascript: void();']" class="min-next">下一篇</a>
+                            <a :class="[!hasNext ? 'disable' : '']"
+                                :href="[hasNext ? './read.html?id='+nextInfo.id : 'javascript: void();']"
+                                class="next">下一篇{{nextInfo.title}}</a>
+                            <a :class="[!hasPrevious ? 'disable' : '']"
+                                :href="[hasPrevious ? './read.html?id='+previousInfo.id : 'javascript: void();']"
+                                class="min-previous">上一篇</a>
+                            <a :class="[!hasNext ? 'disable' : '']"
+                                :href="[hasNext ? './read.html?id='+nextInfo.id : 'javascript: void();']"
+                                class="min-next">下一篇</a>
                         </div>
 
                         <!-- 相关新闻 start -->
@@ -161,23 +167,28 @@
                             <div class="title-tag2 pt-60">相关新闻</div>
                             <div class="relNewBox container ">
                                 <a class="justify-content-between d-flex relNewsList" href="">
-                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg"> 大数据时代要定“明规则” 保护好用户隐私 </div>
+                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg"> 大数据时代要定“明规则”
+                                        保护好用户隐私 </div>
                                     <div>2022-02-12</div>
                                 </a>
                                 <a class="justify-content-between d-flex relNewsList" href="">
-                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg">IDC关于覆盖100多个城市的智慧城市支出预测 </div>
+                                    <div><img width="18" height="18"
+                                            src="../assets/img/news/arrowT.svg">IDC关于覆盖100多个城市的智慧城市支出预测 </div>
                                     <div>2022-02-12</div>
                                 </a>
                                 <a class="justify-content-between d-flex relNewsList" href="">
-                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg">中国智慧城市建设：全国加速进行时 </div>
+                                    <div><img width="18" height="18"
+                                            src="../assets/img/news/arrowT.svg">中国智慧城市建设：全国加速进行时 </div>
                                     <div>2022-02-12</div>
                                 </a>
                                 <a class="justify-content-between d-flex relNewsList" href="">
-                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg">德勤中国智能制造深度报告 </div>
+                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg">德勤中国智能制造深度报告
+                                    </div>
                                     <div>2022-02-12</div>
                                 </a>
                                 <a class="justify-content-between d-flex relNewsList" href="">
-                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg">复合年增长率为13.6% 2022年中国将成最大物联网市场</div>
+                                    <div><img width="18" height="18" src="../assets/img/news/arrowT.svg">复合年增长率为13.6%
+                                        2022年中国将成最大物联网市场</div>
                                     <div>2022-02-12</div>
                                 </a>
                             </div>
@@ -215,7 +226,7 @@
     <!--====== Vue  js ======-->
     <script src="../assets/js/vue.min.js"></script>
     <script>
-        $(function() {
+        $(function () {
             $('#footer').load("../footer.html");
         })
         var app = new Vue({
@@ -227,21 +238,21 @@
                 nextInfo: {},
                 ariticle_id: 0
             },
-            created: function() {
+            created: function () {
                 this.ariticle_id = this.getQueryVariable('id')
             },
             computed: {
-                isNews: function() {
+                isNews: function () {
                     return (this.articleInfo.type == 1);
                 },
-                hasPrevious: function() {
+                hasPrevious: function () {
                     return Object.keys(this.previousInfo).length > 0;
                 },
-                hasNext: function() {
+                hasNext: function () {
                     return Object.keys(this.nextInfo).length > 0;
                 }
             },
-            mounted: function() {
+            mounted: function () {
                 var self = this;
                 jQuery.ajax({
                     type: 'POST',
@@ -250,7 +261,7 @@
                     data: {
                         id: this.ariticle_id
                     }
-                }).done(function(res) {
+                }).done(function (res) {
                     if (!res.msg) {
                         return;
                     }
@@ -267,11 +278,11 @@
                         self.nextInfo = res.next;
                     }
 
-                }).fail(function(err) {});
+                }).fail(function (err) { });
             },
             methods: {
 
-                getQueryVariable: function(variable) {
+                getQueryVariable: function (variable) {
                     var query = window.location.search.substring(1);
                     var vars = query.split("&");
                     for (var i = 0; i < vars.length; i++) {

news/trade/index.html

@@ -74,14 +74,14 @@
                                     <a href="../../technology/index.html">技术支撑</a>
                                 </li>
                                 <li class="active">
-                                    <a href="../../news">新闻动态</a>
+                                    <a href="../../news/index.html">新闻动态</a>
                                     <ul class="submenu">
-                                        <li><a href="../../news">公司新闻</a></li>
+                                        <li><a href="../../news/index.html">公司新闻</a></li>
                                         <li><a href="../../news/trade/index.html">行业动态</a></li>
                                     </ul>
                                 </li>
                                 <li>
-                                    <a href="../../about">关于我们</a>
+                                    <a href="../../about/index.html">关于我们</a>
                                 </li>
                             </ul>
                         </div>

product/css/index.css

@@ -46,20 +46,32 @@
     font-weight: bold;
     color: #333333;
     margin-bottom: 15px;
+    margin-top: 15px;
 }
 
 .product-details-section .tab-pane .productContent .paneConText .content{
     font-size: 15px;
     font-family: Microsoft YaHei;
     color: #333333;
-    margin-bottom: 15px;
     line-height: 28px;
 }
 
+.product-details-section .tab-pane .productContent .productContentImg{
+    height: 300px; 
+    padding-right:20px;
+}
+
 .product-grid-section .container .grid-isotope .software .product-link{
     cursor: pointer;
 }
 
+.product-grid-section .grid-filter ul li div span{
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 
 @media (max-width: 991px){
     .product-details-section .tab-pane .productContent{
@@ -73,4 +85,22 @@
     .product-details-section .tab-pane .productContent>div:nth-child(2){
         width: 100%;
     }
+    .product-details-section .tab-pane .productContent .productContentImg{
+        padding:0;
+    }
+}
+
+@media (max-width: 768px){
+    .product-grid-section .container{
+        max-width: 100%;
+    }
+    .product-grid-section .grid-isotope .product-grid-box .product-img img {
+        height: 180px;
+    }
+}
+
+@media (max-width: 576px){
+    .product-grid-section .grid-isotope .product-grid-box .product-img img {
+        height: 250px;
+    }
 }

product/index-202202101606.html

@@ -0,0 +1,833 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name=renderer content=webkit>
+    <meta name=renderer content=ie-comp>
+    <meta name=renderer content=ie-stand>
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="icon" href="../assets/img/favicon.ico">
+    <title>核心产品</title>
+
+    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+    <!--====== Mean Menu ======-->
+    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
+    <!--====== Default css ======-->
+    <link rel="stylesheet" href="../assets/css/default.css" />
+    <!--====== Style css ======-->
+    <link rel="stylesheet" href="../assets/css/style.css" />
+    <!--====== Animation css =======-->
+    <link rel="stylesheet" href="../assets/css/animation.css" />
+    <!--====== home css ====== -->
+    <link rel="stylesheet" href="../assets/css/home.css" />
+    <!--====== index css ====== -->
+    <link rel="stylesheet" href="./css/index.css" />
+</head>
+
+<body>
+    <!--[if lte IE 9]>
+	  <p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
+  <![endif]-->
+    <div id="app">
+        <!--====== HEADER START ======-->
+        <header class="header-absolute sticky-header">
+            <div class="custom-container-one">
+                <div class="header-top-area">
+                    <div class="container align-items-center">
+                        <!-- <div class="col-md-6 col-sm-7">
+                                <ul class="contact-list">
+                                    <li>
+                                        <a href="javascipt:void();">www.chinausky.com</a>
+                                    </li>
+                                    <li>
+                                        <a href="javascipt:void();">400 633 8668</a>
+                                    </li>
+                                </ul>
+                            </div> -->
+                    </div>
+                </div>
+                <div class="mainmenu-area container">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <nav class="main-menu">
+                            <div class="logo">
+                                <a href="../index.html"><img src="../assets/img/logo.png" alt="uskylogo"></a>
+                            </div>
+                            <div class="menu-items">
+                                <ul>
+                                    <li>
+                                        <a href="../index.html">首页</a>
+                                    </li>
+                                    <li>
+                                        <a href="../solution/index.html?solution_type=1">解决方案</a>
+                                        <ul class="submenu">
+                                            <li><a href="../solution/index.html?solution_type=1">智慧安防</a></li>
+                                            <li><a href="../solution/index.html?solution_type=2">智慧消防</a></li>
+                                            <li><a href="../solution/index.html?solution_type=3">智慧建筑能源管理</a></li>
+                                            <li><a href="../solution/index.html?solution_type=4">智慧电力综合管理</a></li>
+                                            <li><a href="../solution/index.html?solution_type=5">智慧园区无人机综合管理</a></li>
+                                            <li><a href="../solution/index.html?solution_type=6">智慧楼宇综合运营</a></li>
+                                        </ul>
+                                    </li>
+                                    <li class="active">
+                                        <a href="#">产品中心</a>
+                                    </li>
+                                    <li>
+                                        <a href="../technology/index.html">技术支撑</a>
+                                    </li>
+                                    <li>
+                                        <a href="../news">新闻动态</a>
+                                        <!-- <ul class="submenu">
+                                            <li><a href="../news">公司新闻</a></li>
+                                            <li><a href="../news/trade/index.html">行业动态</a></li>
+                                        </ul> -->
+                                    </li>
+                                    <li>
+                                        <a href="../about">关于我们</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </nav>
+                    </div>
+                </div>
+                <div>
+                    <div class="mobile-menu"></div>
+                </div>
+            </div>
+        </header>
+        <!--====== HEADER END ======-->
+
+        <!--====== COMMON BREADCRUMB START ======-->
+        <section class="common-bradcrumb-section">
+            <img src="../assets/img/product/bg.png" alt="">
+        </section>
+        <!--====== COMMON BREADCRUMB END ======-->
+
+        <!--====== PRODUCT GRID START======-->
+        <section class="product-grid-section pt-20 pb-60" v-show="!viweState">
+            <div class="container">
+                <div class="section-title both-border mb-20  pt-40 pb-40" style="text-align: center;">
+                    <span class="title-tag2">产品类别</span>
+                </div>
+                <div class="row row-tabs" style="padding: 0px 20px;">
+                    <div class="col-lg-12">
+                        <div class="grid-filter">
+                            <ul class="row cannot_selected">
+                                <li data-filter="*" class="active">
+                                    <div><span>全部</span></div>
+                                </li>
+                                <li data-filter=".software">
+                                    <div><span>智慧安防</span></div>
+                                </li>
+                                <li data-filter=".hardware">
+                                    <div><span>智慧消防</span></div>
+                                </li>
+                                <li data-filter=".water-system">
+                                    <div><span>智慧建筑能源管理</span></div>
+                                </li>
+                                <li data-filter=".securiy-system">
+                                    <div><span>智慧电力综合管理</span></div>
+                                </li>
+                                <li data-filter=".electricity-system">
+                                    <div><span>智慧园区无人机综合服务</span></div>
+                                </li>
+                                <li data-filter=".fire-system">
+                                    <div><span>智慧楼宇综合运营</span></div>
+                                </li>
+                                <!-- <li data-filter=".others-system">
+                                    <div><span>其它</span></div>
+                                </li> -->
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="row row-tabs grid-isotope pt-30">
+                    <!-- 1 -->
+                    <!-- <div class="col-lg-4 col-sm-6 software">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/QRcode.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>智慧消防综合管理软件</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>智慧消防综合管理软件</p>
+                                <p>v 1.0</p>
+                            </a>
+                        </div>
+                    </div> -->
+                    <!-- 2 -->
+                    <div class="col-lg-4 col-sm-6 software">
+                        <!-- <a @click="productDetails(`${cont}`)"> -->
+                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
+                            <div class="product-img">
+                                <img src="../assets/img/product/QRcode.png" />
+                            </div>
+                            <div class="title">
+                                <span>智慧安防综合管理系统软件</span>
+                                <div>
+                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
+                                    通过什么是系统采用蓝牙定位技术，通过什么是
+                                </div>
+                            </div>
+                        </div>
+                        <!-- </a> -->
+                    </div>
+                    <!-- 3 -->
+                    <div class="col-lg-4 col-sm-6 software">
+                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
+                            <div class="product-img">
+                                <img src="../assets/img/product/QRcode.png" />
+                            </div>
+                            <div class="title">
+                                <span>智慧园区综合管理系统软件</span>
+                                <div>
+                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
+                                    通过什么是系统采用蓝牙定位技术，通过什么是
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 4 -->
+                    <div class="col-lg-4 col-sm-6 software">
+                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
+                            <div class="product-img">
+                                <img src="../assets/img/product/QRcode.png" />
+                            </div>
+                            <div class="title">
+                                <span>永天智慧宝APP</span>
+                                <div>
+                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
+                                    通过什么是系统采用蓝牙定位技术，通过什么是
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 5 -->
+                    <div class="col-lg-4 col-sm-6 software">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/QRcode.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>智慧用电综合处理单元</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>智慧用电综合处理单元</p>
+                                <p>v 1.0</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 6 -->
+                    <div class="col-lg-4 col-sm-6 software">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/QRcode.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>用水数据采集单元</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>用水数据采集单元</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 7 -->
+                    <div class="col-lg-4 col-sm-6 software hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p01.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>用水数据采集装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>用水数据采集装置</p>
+                                <p>UUWC07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 8 -->
+                    <div class="col-lg-4 col-sm-6 software hardware securiy-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p02.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>紧急（求助）按钮</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>紧急（求助）按钮</p>
+                                <p>UUEH07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 9 -->
+                    <div class="col-lg-4 col-sm-6 software hardware electricity-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p03.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>电气火灾探测器</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>电气火灾探测器</p>
+                                <p>UUEF08-0500</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 10 -->
+                    <div class="col-lg-4 col-sm-6 software hardware electricity-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p04.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>智慧用电探测器</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>智慧用电探测器</p>
+                                <p>UUiE08-0500</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 11 -->
+                    <div class="col-lg-4 col-sm-6 software hardware fire-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p05.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>可燃气体探测器</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>可燃气体探测器</p>
+                                <p>UUGD07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 12 -->
+                    <div class="col-lg-4 col-sm-6 software hardware fire-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p06.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>火灾探测器</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>火灾探测器</p>
+                                <p>UUFD07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 13 -->
+                    <div class="col-lg-4 col-sm-6 software hardware securiy-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p07.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>门体开启状态探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>门体开启状态探测装置</p>
+                                <p>UUGS07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 14 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p08.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>二次供水探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>二次供水探测装置</p>
+                                <p>UUWT07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 15 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p09.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>二次供水探测装置（含水位告警）</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>二次供水探测装置（含水位告警）</p>
+                                <p>UUWTL07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 16 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p10.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>窨井盖探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>窨井盖探测装置</p>
+                                <p>UUIW07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 17 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p11.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>窨井盖探测装置（含溢水告警）</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>窨井盖探测装置（含溢水告警）</p>
+                                <p>UUIWL07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 18 -->
+                    <div class="col-lg-4 col-sm-6 hardware others-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p12.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>消防占道探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>消防占道探测装置</p>
+                                <p>UUFP07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 19 -->
+                    <div class="col-lg-4 col-sm-6 hardware securiy-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p13.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>电梯运行采集探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>电梯运行采集探测装置</p>
+                                <p>UULC08-0400</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 20 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p14.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>水质监测采集探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>水质监测采集探测装置</p>
+                                <p>UULW07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 21 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p15.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>消防给水系统采集探测装置（室内消火栓）</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>消防给水系统采集探测装置（室内消火栓）</p>
+                                <p>UUIH07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 22 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p16.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>消防给水系统采集探测装置（室外消火栓）</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>消防给水系统采集探测装置（室外消火栓）</p>
+                                <p>UUOH07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 23 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p17.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>消防给水系统采集探测装置（喷淋水压探测器）</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>消防给水系统采集探测装置（喷淋水压探测器）</p>
+                                <p>UUPH07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 24 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p18.jpg" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>消防给水系统采集探测装置（水泵探测装置）</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>消防给水系统采集探测装置（水泵探测装置）</p>
+                                <p>UUFW07-0500</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 25 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p19.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>水质监测采集探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>水质监测采集探测装置</p>
+                                <p>UULW07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 26 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p20.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>水质监测采集探测装置</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>水质监测采集探测装置</p>
+                                <p>UULW07-0800</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 27 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p21.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>水质浊度传感器</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>水质监测采集探测装置 UULW07-0800</p>
+                                <p>水质浊度传感器</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 28 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p22.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>水质电导率测量</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>水质监测采集探测装置 UULW07-0800</p>
+                                <p>水质电导率测量</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 29 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p23.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>水质PH传感器</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>水质监测采集探测装置 UULW07-0800</p>
+                                <p>水质PH传感器</p>
+                            </a>
+                        </div>
+                    </div>
+                    <!-- 30 -->
+                    <div class="col-lg-4 col-sm-6 hardware water-system">
+                        <div class="product-grid-box">
+                            <div class="product-img">
+                                <img src="../assets/img/product/p24.png" />
+                            </div>
+                            <div class="title d-flex justify-content-center align-items-center">
+                                <span>水质余氯传感器</span>
+                            </div>
+                            <a @click="productDetails(`${cont}`)" class="product-link">
+                                <p>水质监测采集探测装置 UULW07-0800</p>
+                                <p>水质余氯传感器</p>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="news-content-section pt-60">
+                    <div class="container">
+                        <div class="row newBox">
+                            <div class="col-lg-12 col-md-12 content" id="app">
+                                <div v-if="!loading" class="page mt-30 mb-30">
+                                    <div class="d-flex justify-content-center align-items-end cannot_selected"
+                                        style="position:relative">
+                                        <div class="page-des align-items-start cannot_selected">共<span> {{
+                                                totalPageNum}}</span>页，共<span> {{ totalPageSzie}}</span>条信息</div>
+
+                                        <a :class="[hasPageTop ? '' : 'disable']" class="previous"
+                                            @click="toPrevious">上一页</a>
+                                        <a v-if="needOmit" :class="[currentPageNum == 1 ? 'active' : '']"
+                                            @click="switchPage(1)">1</a>
+                                        <span v-if="hasLeftOmit">...</span>
+                                        <a v-for="item in middlePageNums" :key="item"
+                                            :class="[item == currentPageNum ? 'active': '']"
+                                            @click="switchPage(item)">{{item}}</a>
+                                        <span v-if="hasRightOmit">...</span>
+                                        <a v-if="needOmit" :class="[currentPageNum == totalPageNum? 'active' : '']"
+                                            @click="switchPage(totalPageNum)">{{totalPageNum}}</a>
+                                        <a :class="[hasPageNext ? '' : 'disable']" @click="toNext" class="next">下一页</a>
+
+                                        <div class="page-des2 align-items-end cannot_selected pc">前往第
+                                            <input v-model="goPage" class="previous" @keyup.enter="enterPage" /> 页
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+        </section>
+        <!--====== PRODUCT GRID START======-->
+
+        <!--====== PRODUCT GRID START======-->
+        <section id="product-details-section" class="product-details-section pt-20 pb-60" v-if="viweState">
+            <div class="container">
+                <div class="section-title both-border mb-20  pt-40 pb-40" style="text-align: center;">
+                    <div class="close" @click="productDetails(0)">
+                        <a>
+                            <img src="../assets/img/product/close.png" alt="">
+                        </a>
+                    </div>
+                    <span class="title-tag2">产品详情</span>
+                </div>
+                <div role="tabpanel" class="tab-pane tab-pane-tow active">
+                    <div>
+                        <!-- <div class="close">
+                            <a @click="productDetails(0)">
+                                <img src="../assets/img/product/close.png" alt="">
+                            </a>
+                        </div> -->
+                        <div class="productText">光电感烟火灾探测报警器</div>
+                    </div>
+                    <div class="productContent">
+                        <div>
+                            <img src="../assets/img/product/图层11.png" alt="">
+                        </div>
+                        <div>
+                            <div class="paneConText">
+                                <div class="title">产品特点</div>
+                                <div class="content">
+                                    本产品为独立式光电感烟火灾探测报警器，拥有高可靠性。当报警器感应到烟雾浓度达到报警设定值时，探测器将在现场发出声光报警信号，提醒相关人员立即采取有效措施；基于永天云平台，可启动联动装置，并在永天智慧消防平台上弹出警报详情，辅助消防应急指挥排除险情，可有效避免火灾、爆炸、中毒等恶性事故的发生。
+                                </div>
+                            </div>
+                            <div class="paneConText">
+                                <div class="title">产品参数</div>
+                                <div class="content">
+                                    可用于住宅、酒店、商场、学校、医院、办公楼、厂房、仓库等场所； 传感器：长寿命光电感应器 电源：DC9V 报警方式：声、光报警 报警音量：＞85dB@3m
+                                    无线模块：LoRa/NB-IoT/RPMA/Sigfox/ZigBee 工作温度：0℃~40℃ 工作湿度：≤95% 载波频段：470/850/900MHz等多频段可选
+                                    无线距离：≥100m@空旷环境
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!--====== FOOTER PART START ======-->
+        <div id="footer"></div>
+        <!--====== FOOTER PART END ======-->
+    </div>
+
+
+    <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
+    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
+    <!--====== Bootstrap js ======-->
+    <script src="../assets/js/bootstrap.min.js"></script>
+    <script src="../assets/js/popper.min.js"></script>
+    <!--====== Isotope js ======-->
+    <script src="../assets/js/isotope.pkgd.min.js"></script>
+    <!--====== Mean Menu ======-->
+    <script src="../assets/js/jquery.meanmenu.min.js"></script>
+    <!--====== Main js ======-->
+    <script src="../assets/js/main.js"></script>
+    <script>
+        $(function () {
+            $('#footer').load("../footer.html");
+        })
+    </script>
+    <!--====== Setting Info js=======-->
+    <script src="../assets/js/settinginfo.js"></script>
+    <!--====== Vue  js ======-->
+    <script src="../assets/js/vue.min.js"></script>
+    <script>
+        var news_list = [];
+        var one_page_num = 4;
+        var app = new Vue({
+            el: '#app',
+            data: {
+                cont: 3,
+                viweState: false,
+                message: 'hello',
+                news: [],
+                goPage: 1,
+                currentPageNum: 1,
+                totalPageNum: 1,
+                totalPageSzie: 4,
+                middlePageNums: [2, 3, 4, 5, 6],
+                needOmit: true,
+                loading: true,
+            },
+            computed: {
+                hasNews: function () {
+                    return this.news.length > 0;
+                },
+                hasLeftOmit: function () {
+                    return (this.currentPageNum > 4 && this.needOmit);
+                },
+                hasRightOmit: function () {
+                    return ((this.middlePageNums[4] + 1) < this.totalPageNum && this.needOmit);
+                },
+                hasPageTop: function () {
+                    return this.currentPageNum > 1;
+                },
+                hasPageNext: function () {
+                    return this.currentPageNum < this.totalPageNum;
+                }
+            },
+            mounted: function () {
+                var self = this;
+                jQuery.ajax({
+                    type: 'POST',
+                    dataType: 'json',
+                    url: window.FQDN + 'agw/journalism_display',
+                    data: {
+                        type: '1'
+                    }
+                }).done(function (res) {
+                    if (!res.msg) {
+                        return;
+                    }
+
+                    res.data.forEach(function (item) {
+                        news_list.push(item);
+                        if (self.news.length < one_page_num) {
+                            self.news.push(item);
+                        }
+                    });
+
+                    self.totalPageNum = Math.ceil(news_list.length / one_page_num);
+                    self.totalPageSzie = news_list.length;
+                    if (self.totalPageNum < 8) {
+                        self.needOmit = false;
+                        self.middlePageNums = [];
+                        for (var i = 1; i <= self.totalPageNum; i++) {
+                            self.middlePageNums.push(i);
+                        }
+                    }
+                    self.loading = false;
+                }).fail(function (err) { });
+            },
+            methods: {
+                productDetails: function (val) {
+                    console.log(val)
+                    this.viweState = !this.viweState
+                    if (val != 0) {
+                        setTimeout(() => {
+                            var dom = document.getElementById('product-details-section');
+                            window.scrollTo(0, dom.offsetTop - 200);
+                        }, 0)
+                        console.log(1)
+                    }
+                },
+                switchPage: function (page_num) {
+                    if (page_num == this.currentPageNum) {
+                        return;
+                    }
+
+                    var start_index = (page_num - 1) * one_page_num;
+                    var limit = start_index + (one_page_num - 1);
+                    var tmp_new = [];
+                    for (var i = start_index; i <= limit; i++) {
+                        if (i < news_list.length) {
+                            tmp_new.push(news_list[i]);
+                        }
+                    }
+                    this.news = tmp_new;
+
+                    if (!this.needOmit) {
+                        this.currentPageNum = page_num;
+                        return;
+                    }
+
+                    if (page_num >= 5 && (page_num + 2) < this.totalPageNum) {
+                        this.middlePageNums = [page_num - 2, page_num - 1, page_num, page_num + 1, page_num + 2];
+                    } else if (page_num < 5) {
+                        this.middlePageNums = [2, 3, 4, 5, 6];
+                    } else if ((page_num + 2) >= this.totalPageNum) {
+                        this.middlePageNums = [this.totalPageNum - 5, this.totalPageNum - 4, this.totalPageNum - 3, this.totalPageNum - 2, this.totalPageNum - 1];
+                    }
+
+                    this.currentPageNum = page_num;
+                },
+                toPrevious: function () {
+                    if (this.currentPageNum == 1) {
+                        return;
+                    }
+                    this.switchPage(this.currentPageNum - 1);
+                },
+                toNext: function () {
+                    if (this.currentPageNum == this.totalPageNum) {
+                        return;
+                    }
+                    this.switchPage(this.currentPageNum + 1);
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>

product/index.html

@@ -23,6 +23,8 @@
     <link rel="stylesheet" href="../assets/css/animation.css" />
     <!--====== home css ====== -->
     <link rel="stylesheet" href="../assets/css/home.css" />
+    <!--====== element css ====== -->
+    <link rel="stylesheet" href="../assets/css/element.css">
     <!--====== index css ====== -->
     <link rel="stylesheet" href="./css/index.css" />
 </head>
@@ -78,14 +80,14 @@
                                         <a href="../technology/index.html">技术支撑</a>
                                     </li>
                                     <li>
-                                        <a href="../news">新闻动态</a>
+                                        <a href="../news/index.html">新闻动态</a>
                                         <!-- <ul class="submenu">
                                             <li><a href="../news">公司新闻</a></li>
                                             <li><a href="../news/trade/index.html">行业动态</a></li>
                                         </ul> -->
                                     </li>
                                     <li>
-                                        <a href="../about">关于我们</a>
+                                        <a href="../about/index.html">关于我们</a>
                                     </li>
                                 </ul>
                             </div>
@@ -114,31 +116,14 @@
                 <div class="row row-tabs" style="padding: 0px 20px;">
                     <div class="col-lg-12">
                         <div class="grid-filter">
-                            <ul class="row cannot_selected">
-                                <li data-filter="*" class="active">
+                            <ul class="cannot_selected tabs_selected" style="text-align: center;">
+                                <li id="全部" data-filter="*" class="active" @click="getProductListAjax(0,'全部')">
                                     <div><span>全部</span></div>
                                 </li>
-                                <li data-filter=".software">
-                                    <div><span>智慧安防</span></div>
+                                <li :id="type.type_name" :data-filter="'.'+type.id" v-for="(type,ind) in getProductType"
+                                    @click="getProductListAjax(type.id,type.type_name)">
+                                    <div><span>{{type.type_name}}</span></div>
                                 </li>
-                                <li data-filter=".hardware">
-                                    <div><span>智慧消防</span></div>
-                                </li>
-                                <li data-filter=".water-system">
-                                    <div><span>智慧建筑能源管理</span></div>
-                                </li>
-                                <li data-filter=".securiy-system">
-                                    <div><span>智慧电力综合管理</span></div>
-                                </li>
-                                <li data-filter=".electricity-system">
-                                    <div><span>智慧园区无人机综合服务</span></div>
-                                </li>
-                                <li data-filter=".fire-system">
-                                    <div><span>智慧楼宇综合运营</span></div>
-                                </li>
-                                <!-- <li data-filter=".others-system">
-                                    <div><span>其它</span></div>
-                                </li> -->
                             </ul>
                         </div>
                     </div>
@@ -160,468 +145,45 @@
                         </div>
                     </div> -->
                     <!-- 2 -->
-                    <div class="col-lg-4 col-sm-6 software">
+                    <div class="col-lg-4 col-sm-6 software" v-for="list in getProductList">
                         <!-- <a @click="productDetails(`${cont}`)"> -->
-                            <div class="product-grid-box" @click="productDetails(`${cont}`)">
-                                <div class="product-img">
-                                    <img src="../assets/img/product/QRcode.png" />
-                                </div>
-                                <div class="title">
-                                    <span>智慧安防综合管理系统软件</span>
-                                    <div>
-                                        系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
-                                        通过什么是系统采用蓝牙定位技术，通过什么是
-                                    </div>
-                                </div>
-                            </div>
-                        <!-- </a> -->
-                    </div>
-                    <!-- 3 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
+                        <div class="product-grid-box" @click="productDetails(`${list.id}`)">
                             <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
+                                <img :src="list.product_picture" />
                             </div>
                             <div class="title">
-                                <span>智慧园区综合管理系统软件</span>
+                                <span>{{list.product_name}}</span>
                                 <div>
-                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
-                                    通过什么是系统采用蓝牙定位技术，通过什么是
+                                    <span v-for="trait in list.product_trait">
+                                        {{trait.product_trait}}
+                                    </span>
                                 </div>
                             </div>
                         </div>
+                        <!-- </a> -->
                     </div>
-                    <!-- 4 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box" @click="productDetails(`${cont}`)">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title">
-                                <span>永天智慧宝APP</span>
-                                <div>
-                                    系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，通过什么是系统采用蓝牙定位技术，
-                                    通过什么是系统采用蓝牙定位技术，通过什么是
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- 5 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>智慧用电综合处理单元</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>智慧用电综合处理单元</p>
-                                <p>v 1.0</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 6 -->
-                    <div class="col-lg-4 col-sm-6 software">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/QRcode.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>用水数据采集单元</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>用水数据采集单元</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 7 -->
-                    <div class="col-lg-4 col-sm-6 software hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p01.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>用水数据采集装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>用水数据采集装置</p>
-                                <p>UUWC07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 8 -->
-                    <div class="col-lg-4 col-sm-6 software hardware securiy-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p02.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>紧急（求助）按钮</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>紧急（求助）按钮</p>
-                                <p>UUEH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 9 -->
-                    <div class="col-lg-4 col-sm-6 software hardware electricity-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p03.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>电气火灾探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>电气火灾探测器</p>
-                                <p>UUEF08-0500</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 10 -->
-                    <div class="col-lg-4 col-sm-6 software hardware electricity-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p04.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>智慧用电探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>智慧用电探测器</p>
-                                <p>UUiE08-0500</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 11 -->
-                    <div class="col-lg-4 col-sm-6 software hardware fire-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p05.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>可燃气体探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>可燃气体探测器</p>
-                                <p>UUGD07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 12 -->
-                    <div class="col-lg-4 col-sm-6 software hardware fire-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p06.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>火灾探测器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>火灾探测器</p>
-                                <p>UUFD07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 13 -->
-                    <div class="col-lg-4 col-sm-6 software hardware securiy-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p07.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>门体开启状态探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>门体开启状态探测装置</p>
-                                <p>UUGS07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 14 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p08.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>二次供水探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>二次供水探测装置</p>
-                                <p>UUWT07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 15 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p09.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>二次供水探测装置（含水位告警）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>二次供水探测装置（含水位告警）</p>
-                                <p>UUWTL07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 16 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p10.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>窨井盖探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>窨井盖探测装置</p>
-                                <p>UUIW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 17 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p11.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>窨井盖探测装置（含溢水告警）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>窨井盖探测装置（含溢水告警）</p>
-                                <p>UUIWL07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 18 -->
-                    <div class="col-lg-4 col-sm-6 hardware others-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p12.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防占道探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防占道探测装置</p>
-                                <p>UUFP07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 19 -->
-                    <div class="col-lg-4 col-sm-6 hardware securiy-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p13.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>电梯运行采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>电梯运行采集探测装置</p>
-                                <p>UULC08-0400</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 20 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p14.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质监测采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置</p>
-                                <p>UULW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 21 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p15.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（室内消火栓）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（室内消火栓）</p>
-                                <p>UUIH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 22 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p16.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（室外消火栓）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（室外消火栓）</p>
-                                <p>UUOH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 23 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p17.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（喷淋水压探测器）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（喷淋水压探测器）</p>
-                                <p>UUPH07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 24 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p18.jpg" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>消防给水系统采集探测装置（水泵探测装置）</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>消防给水系统采集探测装置（水泵探测装置）</p>
-                                <p>UUFW07-0500</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 25 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p19.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质监测采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置</p>
-                                <p>UULW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 26 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p20.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质监测采集探测装置</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置</p>
-                                <p>UULW07-0800</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 27 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p21.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质浊度传感器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质浊度传感器</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 28 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p22.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质电导率测量</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质电导率测量</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 29 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p23.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质PH传感器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质PH传感器</p>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- 30 -->
-                    <div class="col-lg-4 col-sm-6 hardware water-system">
-                        <div class="product-grid-box">
-                            <div class="product-img">
-                                <img src="../assets/img/product/p24.png" />
-                            </div>
-                            <div class="title d-flex justify-content-center align-items-center">
-                                <span>水质余氯传感器</span>
-                            </div>
-                            <a @click="productDetails(`${cont}`)" class="product-link">
-                                <p>水质监测采集探测装置 UULW07-0800</p>
-                                <p>水质余氯传感器</p>
-                            </a>
-                        </div>
-                    </div>
+
                 </div>
                 <div class="news-content-section pt-60">
                     <div class="container">
-                        <div class="row">
+                        <div class="row newBox">
                             <div class="col-lg-12 col-md-12 content" id="app">
-                                <div class="news-content-section">
-                                    <div v-if="!loading" class="page mt-30 mb-30">
-                                        <div class="d-flex justify-content-center align-items-end cannot_selected">
-                                            <div class="page-des align-items-start cannot_selected">共<span> {{
-                                                    currentPageNum}}</span>页，共<span> {{ totalPageSzie}}</span>条信息</div>
-                                            <a :class="[hasPageTop ? '' : 'disable']" class="previous"
-                                                @click="toPrevious">上一页</a>
-                                            <a v-if="needOmit" :class="[currentPageNum == 1 ? 'active' : '']"
-                                                @click="switchPage(1)">1</a>
-                                            <span v-if="hasLeftOmit">...</span>
-                                            <a v-for="item in middlePageNums" :key="item"
-                                                :class="[item == currentPageNum ? 'active' : '']"
-                                                @click="switchPage(item)">{{item}}</a>
-                                            <span v-if="hasRightOmit">...</span>
-                                            <a v-if="needOmit" :class="[currentPageNum == totalPageNum ? 'active' : '']"
-                                                @click="switchPage(totalPageNum)">{{totalPageNum}}</a>
-                                            <a :class="[hasPageNext ? '' : 'disable']" @click="toNext"
-                                                class="next">下一页</a>
+                                <div v-if="!loading" class="page mt-30 mb-30">
+                                    <div class="d-flex justify-content-center align-items-end cannot_selected"
+                                        style="position:relative">
+                                        <div class="page-des align-items-start cannot_selected">共<span> {{
+                                                totalPageNum}}</span>页，共<span> {{totalPageSzie}}</span>条信息</div>
+
+                                        <el-pagination prev-text="上一页" next-text='下一页' :page-size="one_page_num"
+                                            :current-page="currentPageNum" background layout="prev, pager, next"
+                                            :total="totalPageSzie" @current-change="currentChange">
+                                        </el-pagination>
+
+                                        <div class="page-des2 align-items-end cannot_selected pc">前往第
+                                            <input v-model="goPage" class="previous" @keyup.enter="enterPage" /> 页
                                         </div>
                                     </div>
                                 </div>
-
                             </div>
                         </div>
                     </div>
@@ -640,32 +202,25 @@
                     </div>
                     <span class="title-tag2">产品详情</span>
                 </div>
-                <div role="tabpanel" class="tab-pane tab-pane-tow active">
+                <div role="tabpanel" class="tab-pane tab-pane-tow active" v-for="list in getProductDetails">
                     <div>
                         <!-- <div class="close">
                             <a @click="productDetails(0)">
                                 <img src="../assets/img/product/close.png" alt="">
                             </a>
                         </div> -->
-                        <div class="productText">光电感烟火灾探测报警器</div>
+                        <div class="productText">{{list.product_name}}</div>
                     </div>
                     <div class="productContent">
                         <div>
-                            <img src="../assets/img/product/图层11.png" alt="">
+                            <img class="productContentImg" :src="list.product_picture" alt="">
                         </div>
                         <div>
-                            <div class="paneConText">
-                                <div class="title">产品特点</div>
-                                <div class="content">
-                                    本产品为独立式光电感烟火灾探测报警器，拥有高可靠性。当报警器感应到烟雾浓度达到报警设定值时，探测器将在现场发出声光报警信号，提醒相关人员立即采取有效措施；基于永天云平台，可启动联动装置，并在永天智慧消防平台上弹出警报详情，辅助消防应急指挥排除险情，可有效避免火灾、爆炸、中毒等恶性事故的发生。
-                                </div>
-                            </div>
-                            <div class="paneConText">
-                                <div class="title">产品参数</div>
+                            <div class="paneConText" v-for="con in list.content">
+                                <div class="title" v-if="con.product_name != null && con.product_name != ''">
+                                    {{con.product_name}}</div>
                                 <div class="content">
-                                    可用于住宅、酒店、商场、学校、医院、办公楼、厂房、仓库等场所； 传感器：长寿命光电感应器 电源：DC9V 报警方式：声、光报警 报警音量：＞85dB@3m
-                                    无线模块：LoRa/NB-IoT/RPMA/Sigfox/ZigBee 工作温度：0℃~40℃ 工作湿度：≤95% 载波频段：470/850/900MHz等多频段可选
-                                    无线距离：≥100m@空旷环境
+                                    {{con.content}}
                                 </div>
                             </div>
                         </div>
@@ -700,126 +255,119 @@
     <script src="../assets/js/settinginfo.js"></script>
     <!--====== Vue  js ======-->
     <script src="../assets/js/vue.min.js"></script>
+    <script src="../assets/js/element/index.js"></script>
     <script>
-        var news_list = [];
-        var one_page_num = 4;
         var app = new Vue({
             el: '#app',
             data: {
                 cont: 3,
                 viweState: false,
-                message: 'hello',
-                news: [],
+
+                getProductType: [],
+                getProductList: [],
+                getProductDetails: [],
+
+                goPage: 1,
+                one_page_num: 12,
                 currentPageNum: 1,
                 totalPageNum: 1,
                 totalPageSzie: 4,
-                middlePageNums: [2, 3, 4, 5, 6],
-                needOmit: true,
                 loading: true,
+
+                tabs: 0,
+                tabsId: ''
             },
             computed: {
                 hasNews: function () {
-                    return this.news.length > 0;
-                },
-                hasLeftOmit: function () {
-                    return (this.currentPageNum > 4 && this.needOmit);
+                    return this.getProductList.length > 0;
                 },
-                hasRightOmit: function () {
-                    return ((this.middlePageNums[4] + 1) < this.totalPageNum && this.needOmit);
-                },
-                hasPageTop: function () {
-                    return this.currentPageNum > 1;
-                },
-                hasPageNext: function () {
-                    return this.currentPageNum < this.totalPageNum;
-                }
             },
             mounted: function () {
-                var self = this;
-                jQuery.ajax({
-                    type: 'POST',
-                    dataType: 'json',
-                    url: window.FQDN + '/journalism_display',
-                    data: {
-                        type: '1'
-                    }
-                }).done(function (res) {
-                    if (!res.msg) {
-                        return;
-                    }
-
-                    res.data.forEach(function (item) {
-                        news_list.push(item);
-                        if (self.news.length < one_page_num) {
-                            self.news.push(item);
-                        }
-                    });
-
-                    self.totalPageNum = Math.ceil(news_list.length / one_page_num);
-                    self.totalPageSzie = news_list.length
-                    if (self.totalPageNum < 8) {
-                        self.needOmit = false;
-                        self.middlePageNums = [];
-                        for (var i = 1; i <= self.totalPageNum; i++) {
-                            self.middlePageNums.push(i);
-                        }
-                    }
-                    self.loading = false;
-                }).fail(function (err) { });
+                var _this = this;
+                _this.getProductTypeAjax();
+                _this.getProductListAjax(0, '全部');
             },
             methods: {
                 productDetails: function (val) {
-                    console.log(val)
+                    // console.log(val)
                     this.viweState = !this.viweState
                     if (val != 0) {
                         setTimeout(() => {
                             var dom = document.getElementById('product-details-section');
                             window.scrollTo(0, dom.offsetTop - 200);
                         }, 0)
-                        console.log(1)
+                        this.getProductDetailsAjax(val);
                     }
                 },
-                switchPage: function (page_num) {
-                    if (page_num == this.currentPageNum) {
-                        return;
-                    }
-
-                    var start_index = (page_num - 1) * one_page_num;
-                    var limit = start_index + (one_page_num - 1);
-                    var tmp_new = [];
-                    for (var i = start_index; i <= limit; i++) {
-                        if (i < news_list.length) {
-                            tmp_new.push(news_list[i]);
+                getProductDetailsAjax(res) {
+                    var _this = this;
+                    jQuery.ajax({
+                        type: 'POST',
+                        dataType: 'json',
+                        url: window.FQDN + 'Product/getProductDetails',
+                        data: {
+                            id: res
                         }
-                    }
-                    this.news = tmp_new;
+                    }).done(function (res) {
+                        _this.getProductDetails = res
 
-                    if (!this.needOmit) {
-                        this.currentPageNum = page_num;
-                        return;
-                    }
+                    }).fail(function (err) { });
+                },
+                getProductListAjax(res, id) {
+                    var _this = this;
 
-                    if (page_num >= 5 && (page_num + 2) < this.totalPageNum) {
-                        this.middlePageNums = [page_num - 2, page_num - 1, page_num, page_num + 1, page_num + 2];
-                    } else if (page_num < 5) {
-                        this.middlePageNums = [2, 3, 4, 5, 6];
-                    } else if ((page_num + 2) >= this.totalPageNum) {
-                        this.middlePageNums = [this.totalPageNum - 5, this.totalPageNum - 4, this.totalPageNum - 3, this.totalPageNum - 2, this.totalPageNum - 1];
+                    if (_this.tabsId != id) {
+                        _this.currentPageNum = 1
                     }
+                    _this.tabs = res
+                    _this.tabsId = id
+
+                    $('.tabs_selected li').siblings().removeClass('active')
+                    $('#' + id).addClass('active')
+
+                    jQuery.ajax({
+                        type: 'POST',
+                        dataType: 'json',
+                        url: window.FQDN + 'Product/getProductList',
+                        data: {
+                            product_type_id: res,
+                            size: _this.one_page_num,
+                            page: _this.currentPageNum
+                        }
+                    }).done(function (res) {
+                        _this.getProductList = res.data
+                        _this.totalPageSzie = res.count
+                        _this.totalPageNum = Math.ceil(res.count / res.size);
+                        _this.loading = false;
 
-                    this.currentPageNum = page_num;
+                    }).fail(function (err) { });
                 },
-                toPrevious: function () {
-                    if (this.currentPageNum == 1) {
-                        return;
-                    }
-                    this.switchPage(this.currentPageNum - 1);
+                getProductTypeAjax() {
+                    var _this = this;
+                    jQuery.ajax({
+                        type: 'POST',
+                        dataType: 'json',
+                        url: window.FQDN + 'Product/getProductType',
+                    }).done(function (res) {
+                        _this.getProductType = res
+
+                    }).fail(function (err) { });
                 },
-                toNext: function () {
-                    if (this.currentPageNum == this.totalPageNum) {
-                        return;
+                oneInnerBox: function (id) {
+                    window.location = "./read.html?id=" + id
+                },
+                enterPage: function (res) {
+                    if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
+                        this.currentPageNum = this.goPage
+                        this.getProductListAjax(this.tabs, this.tabsId);
+                    } else {
+                        this.goPage = 1
+                        alert('输入页数有误！')
                     }
-                    this.switchPage(this.currentPageNum + 1);
+                },
+                currentChange: function (res) {
+                    this.currentPageNum = res
+                    this.getProductListAjax(this.tabs, this.tabsId);
                 }
             }
         })

solution/index.html

@@ -75,14 +75,14 @@
                                         <a href="../technology/index.html">技术支撑</a>
                                     </li>
                                     <li>
-                                        <a href="../news">新闻动态</a>
+                                        <a href="../news/index.html">新闻动态</a>
                                         <!-- <ul class="submenu">
                                             <li><a href="../news">公司新闻</a></li>
                                             <li><a href="../news/trade/index.html">行业动态</a></li>
                                         </ul> -->
                                     </li>
                                     <li>
-                                        <a href="../about">关于我们</a>
+                                        <a href="../about/index.html">关于我们</a>
                                     </li>
                                 </ul>
                             </div>

technology/css/index.css

@@ -44,6 +44,7 @@
     color: #333333;
     padding-top: 40px;
     padding-bottom: 20px;
+    cursor: pointer;
 }
 .technology-section .container .technologyDivOne .technologyContent>div:nth-child(2){
     font-size: 16px;
@@ -55,15 +56,17 @@
     padding: 60px 20px;
 }
 
-.technology-section .container .technologyDivOne .technologyButton>button{
+.technology-section .container .technologyDivOne .technologyButton .ButtonDownload{
     width: 142px;
     height: 50px;
     background: #FFFFFF;
     border: 1px solid #639BFF;
     border-radius: 10px;
+    text-align: center;
+    line-height: 45px;
 }
 
-.technology-section .container .technologyDivOne .technologyButton>button>span{
+.technology-section .container .technologyDivOne .technologyButton .ButtonDownload>span{
     margin-left: 10px;
     font-size: 16px;
     font-family: Microsoft YaHei;

technology/index.html

@@ -7,7 +7,7 @@
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
-    <link rel="icon" href="../../assets/img/favicon.ico">
+    <link rel="icon" href="../assets/img/favicon.ico">
     <title>核心技术</title>
 
     <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
@@ -73,14 +73,14 @@
                                         <a href="#">技术支撑</a>
                                     </li>
                                     <li>
-                                        <a href="../news">新闻动态</a>
+                                        <a href="../news/index.html">新闻动态</a>
                                         <!-- <ul class="submenu">
                                             <li><a href="../news">公司新闻</a></li>
                                             <li><a href="../news/trade/index.html">行业动态</a></li>
                                         </ul> -->
                                     </li>
                                     <li>
-                                        <a href="../about">关于我们</a>
+                                        <a href="../about/index.html">关于我们</a>
                                     </li>
                                 </ul>
                             </div>
@@ -114,14 +114,15 @@
                                 <div>{{arr.type}}</div>
                             </div>
                             <div class="technologyContent">
-                                <div>{{arr.title}}</div>
+                                <div @click="preview(arr.archive_route,arr.pattern)">{{arr.title}}
+                                </div>
                                 <div>{{arr.source}}</div>
                             </div>
                             <div class="technologyButton">
-                                <button @click="PDFdowload(arr.archive_route)">
+                                <a class="ButtonDownload" :href="arr.archive_route" download>
                                     <img src="../assets/img/technology/download.png" alt="">
                                     <span>下载{{arr.pattern}}</span>
-                                </button>
+                                </a>
                             </div>
                         </div>
                         <!-- <div class="mt-50 technologyDivOne">
@@ -179,6 +180,8 @@
     <script src="../assets/js/settinginfo.js"></script>
     <!--====== Vue  js ======-->
     <script src="../assets/js/vue.min.js"></script>
+    <!--====== PDF_downLoad  js ======-->
+    <script type="text/javascript" src="../assets/js/jquery.media.js"></script>
     <script>
         $(function () {
             $('#footer').load("../footer.html");
@@ -202,6 +205,14 @@
                 }
             },
             methods: {
+                preview: function (res, type) {
+                    console.log(res)
+                    if (type === 'XLSX' || type === 'XLS' || type === 'DOC' || type === 'DOCX') {
+                        window.location.href = 'https://view.officeapps.live.com/op/view.aspx?src=' + res
+                    } else if (type === 'PDF') {
+                        window.location.href = res
+                    }
+                },
                 PDFdowload: function (res) {
                     console.log(res)
                     window.location.href = res